### Start Development Server

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Starts the development server for the project.

```bash
turbo dev
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Run this command in the root of the project to install all necessary dependencies.

```bash
npm install
```

--------------------------------

### Start Storybook Server

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Launches the Storybook server for developing and viewing UI components in isolation.

```bash
turbo storybook
```

--------------------------------

### Install Turbo Globally

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Install the turbo CLI globally to conveniently run turbo commands from anywhere in your repository.

```bash
npm install turbo --global
```

--------------------------------

### DxcButton Examples

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates various configurations for the DxcButton component, including different modes, semantic variants, icons, sizes, and states.

```tsx
import { DxcButton, DxcFlex } from "@dxc-technology/halstack-react";

function ButtonExamples() {
  const handleClick = () => console.log("Button clicked");

  return (
    <DxcFlex direction="column" gap="1rem">
      {/* Primary button (default) */}
      <DxcButton label="Primary Action" onClick={handleClick} />

      {/* Secondary and tertiary modes */}
      <DxcButton label="Secondary" mode="secondary" onClick={handleClick} />
      <DxcButton label="Tertiary" mode="tertiary" onClick={handleClick} />

      {/* Semantic variants */}
      <DxcButton label="Success" semantic="success" onClick={handleClick} />
      <DxcButton label="Error" semantic="error" onClick={handleClick} />
      <DxcButton label="Warning" semantic="warning" onClick={handleClick} />
      <DxcButton label="Info" semantic="info" onClick={handleClick} />

      {/* With icon (Material Symbol name or SVG) */}
      <DxcButton
        label="Download"
        icon="download"
        iconPosition="after"
        onClick={handleClick}
      />

      {/* Icon-only button */}
      <DxcButton icon="settings" title="Settings" onClick={handleClick} />

      {/* Size variations */}
      <DxcButton
        label="Large Button"
        size={{ height: "large", width: "fillParent" }}
        onClick={handleClick}
      />

      {/* Submit button for forms */}
      <DxcButton label="Submit Form" type="submit" />

      {/* Disabled state */}
      <DxcButton label="Disabled" disabled onClick={handleClick} />
    </DxcFlex>
  );
}
```

--------------------------------

### Implementing DxcTabs with various configurations

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Examples showing basic usage, icon positioning, notification badges, disabled states, and event handling.

```tsx
import { DxcTabs, DxcFlex } from "@dxc-technology/halstack-react";

function TabsExamples() {
  return (
    <DxcFlex direction="column" gap="2rem">
      {/* Basic tabs with content */}
      <DxcTabs>
        <DxcTabs.Tab label="Overview" tabId="overview">
          <p>Overview content goes here.</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Details" tabId="details">
          <p>Details content goes here.</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Reviews" tabId="reviews">
          <p>Reviews content goes here.</p>
        </DxcTabs.Tab>
      </DxcTabs>

      {/* Tabs with icons */}
      <DxcTabs iconPosition="left">
        <DxcTabs.Tab label="Home" icon="home" tabId="home">
          <p>Home content</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Settings" icon="settings" tabId="settings">
          <p>Settings content</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Profile" icon="person" tabId="profile">
          <p>Profile content</p>
        </DxcTabs.Tab>
      </DxcTabs>

      {/* Icons on top */}
      <DxcTabs iconPosition="top">
        <DxcTabs.Tab label="Dashboard" icon="dashboard" tabId="dashboard">
          <p>Dashboard content</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Analytics" icon="analytics" tabId="analytics">
          <p>Analytics content</p>
        </DxcTabs.Tab>
      </DxcTabs>

      {/* With notification badges */}
      <DxcTabs>
        <DxcTabs.Tab label="Inbox" notificationNumber={5} tabId="inbox">
          <p>You have 5 new messages.</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Alerts" notificationNumber={true} tabId="alerts">
          <p>You have new alerts.</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Archive" tabId="archive">
          <p>Archived items.</p>
        </DxcTabs.Tab>
      </DxcTabs>

      {/* With disabled tab and default active */}
      <DxcTabs>
        <DxcTabs.Tab label="Active Tab" tabId="active">
          <p>Active content</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Default Active" defaultActive tabId="default">
          <p>This tab is active by default.</p>
        </DxcTabs.Tab>
        <DxcTabs.Tab label="Disabled" disabled tabId="disabled">
          <p>This tab is disabled.</p>
        </DxcTabs.Tab>
      </DxcTabs>

      {/* With click and hover handlers */}
      <DxcTabs>
        <DxcTabs.Tab
          label="Clickable"
          tabId="clickable"
          onClick={() => console.log("Tab clicked")}
          onHover={() => console.log("Tab hovered")}
        >
          <p>Check console for events.</p>
        </DxcTabs.Tab>
      </DxcTabs>
    </DxcFlex>
  );
}
```

--------------------------------

### Basic Setup with HalstackProvider

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Wrap your application with HalstackProvider to enable theming and internationalization. Customize labels and tokens as needed.

```tsx
import { HalstackProvider, DxcButton, DxcTextInput } from "@dxc-technology/halstack-react";

function App() {
  return (
    <HalstackProvider
      labels={{
        formFields: {
          optionalLabel: "(Opcional)",
          requiredValueErrorMessage: "Este campo es obligatorio.",
        },
        dateInput: {
          invalidDateErrorMessage: "Fecha inválida.",
        },
      }}
      opinionatedTheme={{
        tokens: {
          "--color-purple-700": "#5f249f",
          "--color-purple-800": "#4b1d7d",
        },
        logos: {
          mainLogo: "/custom-logo.svg",
          footerLogo: "/footer-logo.svg",
        },
      }}
    >
      <DxcTextInput label="Name" />
      <DxcButton label="Submit" onClick={() => console.log("Submitted")} />
    </HalstackProvider>
  );
}
```

--------------------------------

### DxcApplicationLayout Example

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Shows a full application layout implementation including header, sidenav, main content, and footer.

```tsx
import {
  DxcApplicationLayout,
  DxcButton,
  DxcFlex,
  DxcHeading,
  DxcParagraph,
} from "@dxc-technology/halstack-react";

function ApplicationLayoutExample() {
  return (
    <DxcApplicationLayout
      logo={{
        src: "/logo.svg",
        alt: "Company Logo",
        href: "/",
        onClick: () => console.log("Logo clicked"),
      }}
      header={
        <DxcFlex justifyContent="flex-end" alignItems="center" gap="1rem">
          <DxcButton label="Help" mode="tertiary" />
          <DxcButton label="Settings" mode="tertiary" icon="settings" />
          <DxcButton label="Profile" mode="secondary" icon="person" />
        </DxcFlex>
      }
      sidenav={
        <DxcApplicationLayout.Sidenav title={<h3>Navigation</h3>}>
          <DxcFlex direction="column" gap="0.5rem">
            <DxcButton label="Dashboard" mode="tertiary" icon="dashboard" size={{ width: "fillParent" }} />
            <DxcButton label="Projects" mode="tertiary" icon="folder" size={{ width: "fillParent" }} />
            <DxcButton label="Tasks" mode="tertiary" icon="task" size={{ width: "fillParent" }} />
            <DxcButton label="Reports" mode="tertiary" icon="assessment" size={{ width: "fillParent" }} />
            <DxcButton label="Settings" mode="tertiary" icon="settings" size={{ width: "fillParent" }} />
          </DxcFlex>
        </DxcApplicationLayout.Sidenav>
      }
      footer={
        <DxcFlex justifyContent="space-between" alignItems="center">
          <span>© 2024 Company Name</span>
          <DxcFlex gap="1rem">
            <a href="/privacy">Privacy Policy</a>
            <a href="/terms">Terms of Service</a>
          </DxcFlex>
        </DxcFlex>
      }
    >
      <DxcApplicationLayout.Main>
        <DxcFlex direction="column" gap="1.5rem" style={{ padding: "2rem" }}>
          <DxcHeading level={1} text="Welcome to the Dashboard" />
          <DxcParagraph>
            This is the main content area of your application.
            The layout automatically handles responsive behavior and sidenav toggling.
          </DxcParagraph>
          <DxcFlex gap="1rem">
            <DxcButton label="Primary Action" />
            <DxcButton label="Secondary Action" mode="secondary" />
          </DxcFlex>
        </DxcFlex>
      </DxcApplicationLayout.Main>
    </DxcApplicationLayout>
  );
}
```

--------------------------------

### Install Halstack React

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Install the Halstack React library and its peer dependencies using npm.

```bash
npm install @dxc-technology/halstack-react @emotion/react @emotion/styled react react-dom
```

--------------------------------

### DxcFlex Layout Examples

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates various flexbox configurations including alignment, direction, wrapping, and nesting.

```tsx
import { DxcFlex, DxcButton, DxcTextInput } from "@dxc-technology/halstack-react";

function FlexExamples() {
  return (
    <>
      {/* Basic horizontal layout */}
      <DxcFlex gap="1rem" alignItems="center">
        <DxcButton label="Button 1" />
        <DxcButton label="Button 2" />
        <DxcButton label="Button 3" />
      </DxcFlex>

      {/* Vertical layout */}
      <DxcFlex direction="column" gap="1rem">
        <DxcTextInput label="First Name" />
        <DxcTextInput label="Last Name" />
        <DxcTextInput label="Email" />
      </DxcFlex>

      {/* Space between items */}
      <DxcFlex justifyContent="space-between" alignItems="center">
        <span>Left content</span>
        <span>Right content</span>
      </DxcFlex>

      {/* Center content */}
      <DxcFlex justifyContent="center" alignItems="center" fullHeight>
        <p>Centered content</p>
      </DxcFlex>

      {/* Wrap items */}
      <DxcFlex gap="1rem" wrap="wrap">
        {Array.from({ length: 10 }, (_, i) => (
          <DxcButton key={i} label={`Button ${i + 1}`} />
        ))}
      </DxcFlex>

      {/* Different row and column gaps */}
      <DxcFlex gap={{ rowGap: "1rem", columnGap: "2rem" }} wrap="wrap">
        <DxcButton label="Item 1" />
        <DxcButton label="Item 2" />
        <DxcButton label="Item 3" />
      </DxcFlex>

      {/* Grow and shrink */}
      <DxcFlex gap="1rem">
        <DxcFlex grow={1} shrink={0}>
          <DxcTextInput label="Grows" size="fillParent" />
        </DxcFlex>
        <DxcFlex shrink={0}>
          <DxcButton label="Fixed" />
        </DxcFlex>
      </DxcFlex>

      {/* Custom HTML tag */}
      <DxcFlex as="nav" gap="1rem" justifyContent="center">
        <a href="/home">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </DxcFlex>

      {/* Nested flex containers */}
      <DxcFlex direction="column" gap="1rem">
        <DxcFlex justifyContent="space-between">
          <span>Header Left</span>
          <span>Header Right</span>
        </DxcFlex>
        <DxcFlex grow={1} direction="row" gap="1rem">
          <DxcFlex basis="200px" shrink={0}>Sidebar</DxcFlex>
          <DxcFlex grow={1}>Main Content</DxcFlex>
        </DxcFlex>
      </DxcFlex>
    </>
  );
}
```

--------------------------------

### DxcDialog Basic and Confirmation Examples

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates how to trigger and manage DxcDialog components for general content and confirmation actions. Ensure the dialog is conditionally rendered based on state.

```tsx
import { useState } from "react";
import { DxcDialog, DxcButton, DxcTextInput, DxcFlex } from "@dxc-technology/halstack-react";

function DialogExamples() {
  const [isOpen, setIsOpen] = useState(false);
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);

  return (
    <>
      {/* Basic dialog trigger */}
      <DxcFlex gap="1rem">
        <DxcButton label="Open Dialog" onClick={() => setIsOpen(true)} />
        <DxcButton
          label="Open Confirm Dialog"
          onClick={() => setIsConfirmOpen(true)}
        />
      </DxcFlex>

      {/* Basic dialog with close button */}
      {isOpen && (
        <DxcDialog
          closable
          onCloseClick={() => setIsOpen(false)}
          onBackgroundClick={() => setIsOpen(false)}
          overlay
        >
          <DxcFlex direction="column" gap="1rem" style={{ padding: "1rem" }}>
            <h2>Dialog Title</h2>
            <p>This is a dialog with content. Click the X or background to close.</p>
            <DxcTextInput label="Enter something" />
            <DxcFlex justifyContent="flex-end" gap="0.5rem">
              <DxcButton
                label="Cancel"
                mode="secondary"
                onClick={() => setIsOpen(false)}
              />
              <DxcButton
                label="Save"
                onClick={() => {
                  console.log("Saved!");
                  setIsOpen(false);
                }}
              />
            </DxcFlex>
          </DxcFlex>
        </DxcDialog>
      )}

      {/* Confirmation dialog */}
      {isConfirmOpen && (
        <DxcDialog
          closable
          onCloseClick={() => setIsConfirmOpen(false)}
          overlay
        >
          <DxcFlex direction="column" gap="1rem" style={{ padding: "1.5rem" }}>
            <h2>Confirm Action</h2>
            <p>Are you sure you want to delete this item? This action cannot be undone.</p>
            <DxcFlex justifyContent="flex-end" gap="0.5rem">
              <DxcButton
                label="Cancel"
                mode="tertiary"
                onClick={() => setIsConfirmOpen(false)}
              />
              <DxcButton
                label="Delete"
                semantic="error"
                onClick={() => {
                  console.log("Deleted!");
                  setIsConfirmOpen(false);
                }}
              />
            </DxcFlex>
          </DxcFlex>
        </DxcDialog>
      )}
    </>
  );
}

```

--------------------------------

### DxcDropdown Basic and Icon Examples

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates the basic usage of the DxcDropdown component and its variations with icons. The `onSelectOption` prop handles user selections.

```tsx
import { DxcDropdown, DxcFlex } from "@dxc-technology/halstack-react";

function DropdownExamples() {
  const handleSelect = (value: string) => {
    console.log("Selected:", value);
  };

  const basicOptions = [
    { label: "Edit", value: "edit" },
    { label: "Delete", value: "delete" },
    { label: "Share", value: "share" },
  ];

  const iconOptions = [
    { label: "Edit", value: "edit", icon: "edit" },
    { label: "Delete", value: "delete", icon: "delete" },
    { label: "Share", value: "share", icon: "share" },
    { label: "Download", value: "download", icon: "download" },
  ];

  return (
    <DxcFlex gap="1rem" wrap="wrap">
      {/* Basic dropdown */}
      <DxcDropdown
        label="Actions"
        options={basicOptions}
        onSelectOption={handleSelect}
      />

      {/* With icon */}
      <DxcDropdown
        label="Menu"
        icon="menu"
        options={basicOptions}
        onSelectOption={handleSelect}
      />

      {/* Icon after label */}
      <DxcDropdown
        label="Options"
        icon="settings"
        iconPosition="after"
        options={basicOptions}
        onSelectOption={handleSelect}
      />

      {/* Options with icons */}
      <DxcDropdown
        label="Actions"
        options={iconOptions}
        optionsIconPosition="before"
        onSelectOption={handleSelect}
      />

      {/* Without caret */}
      <DxcDropdown
        label="More"
        icon="more_vert"
        caretHidden
        options={basicOptions}
        onSelectOption={handleSelect}
      />

      {/* Expand on hover */}
      <DxcDropdown
        label="Hover Menu"
        options={basicOptions}
        expandOnHover
        onSelectOption={handleSelect}
      />

      {/* Disabled */}
      <DxcDropdown
        label="Disabled"
        options={basicOptions}
        disabled
        onSelectOption={handleSelect}
      />

      {/* Size variations */}
      <DxcDropdown
        label="Fill Parent"
        options={basicOptions}
        size="fillParent"
        onSelectOption={handleSelect}
      />
    </DxcFlex>
  );
}

```

--------------------------------

### DxcTextInput Usage Examples

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates various configurations of the DxcTextInput component, including controlled/uncontrolled states, validation patterns, suggestions, and visual variations.

```tsx
import { useState } from "react";
import { DxcTextInput, DxcFlex } from "@dxc-technology/halstack-react";

function TextInputExamples() {
  const [value, setValue] = useState("");
  const [error, setError] = useState<string | undefined>();

  // Static suggestions
  const countries = ["Spain", "France", "Germany", "Italy", "Portugal"];

  // Async suggestions function
  const fetchSuggestions = async (searchValue: string): Promise<string[]> => {
    const response = await fetch(`/api/search?q=${searchValue}`);
    const data = await response.json();
    return data.results;
  };

  return (
    <DxcFlex direction="column" gap="1rem">
      {/* Basic controlled input */}
      <DxcTextInput
        label="Full Name"
        value={value}
        onChange={({ value, error }) => {
          setValue(value);
          setError(error);
        }}
        onBlur={({ value, error }) => console.log("Blur:", value, error)}
        error={error}
        helperText="Enter your full legal name"
        placeholder="John Doe"
      />

      {/* Uncontrolled with default value */}
      <DxcTextInput
        label="Username"
        defaultValue="default_user"
        name="username"
      />

      {/* With validation pattern and length constraints */}
      <DxcTextInput
        label="Email"
        pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
        minLength={5}
        maxLength={100}
        onChange={({ value, error }) => {
          if (error) console.log("Validation error:", error);
        }}
      />

      {/* With prefix and suffix */}
      <DxcTextInput
        label="Price"
        prefix="$"
        suffix="USD"
        alignment="right"
      />

      {/* Clearable input */}
      <DxcTextInput label="Search" clearable placeholder="Type to search..." />

      {/* With static suggestions (autocomplete) */}
      <DxcTextInput
        label="Country"
        suggestions={countries}
        helperText="Start typing to see suggestions"
      />

      {/* With async suggestions */}
      <DxcTextInput
        label="City"
        suggestions={fetchSuggestions}
        helperText="Suggestions loaded from API"
      />

      {/* With custom action */}
      <DxcTextInput
        label="Password Reset Code"
        action={{
          icon: "content_copy",
          title: "Copy to clipboard",
          onClick: () => navigator.clipboard.writeText(value),
        }}
      />

      {/* Optional field */}
      <DxcTextInput label="Middle Name" optional />

      {/* Read-only and disabled states */}
      <DxcTextInput label="Read Only" value="Cannot edit" readOnly />
      <DxcTextInput label="Disabled" value="Disabled input" disabled />

      {/* Size variations */}
      <DxcTextInput label="Fill Parent" size="fillParent" />
    </DxcFlex>
  );
}
```

--------------------------------

### Install Halstack via npm

Source: https://github.com/dxc-technology/halstack-react/blob/master/README.md

Use this command to add the Halstack package to your React project dependencies.

```bash
npm i @dxc-technology/halstack-react
```

--------------------------------

### DxcSlider Examples

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates various configurations of the DxcSlider component, including controlled and uncontrolled states, step increments, visual aids, input integration, custom formatting, event handling, and disabled states.

```tsx
import { useState } from "react";
import { DxcSlider, DxcFlex } from "@dxc-technology/halstack-react";

function SliderExamples() {
  const [value, setValue] = useState(50);
  const [volume, setVolume] = useState(75);

  return (
    <DxcFlex direction="column" gap="1.5rem">
      {/* Controlled slider */}
      <DxcSlider
        label="Select Value"
        value={value}
        onChange={(newValue) => setValue(newValue)}
        minValue={0}
        maxValue={100}
        helperText={`Current value: ${value}`}
      />

      {/* Uncontrolled with default */}
      <DxcSlider
        label="Uncontrolled Slider"
        defaultValue={30}
        minValue={0}
        maxValue={100}
        name="slider"
      />

      {/* With step and marks */}
      <DxcSlider
        label="With Steps"
        value={value}
        onChange={setValue}
        minValue={0}
        maxValue={100}
        step={10}
        marks
      />

      {/* Show limit values */}
      <DxcSlider
        label="With Limits"
        value={value}
        onChange={setValue}
        minValue={0}
        maxValue={100}
        showLimitsValues
      />

      {/* Show input field */}
      <DxcSlider
        label="With Input"
        value={value}
        onChange={setValue}
        minValue={0}
        maxValue={100}
        showInput
      />

      {/* Custom label format */}
      <DxcSlider
        label="Volume"
        value={volume}
        onChange={setVolume}
        minValue={0}
        maxValue={100}
        showLimitsValues
        labelFormatCallback={(val) => `${val}%`}
      />

      {/* Price slider with currency format */}
      <DxcSlider
        label="Price Range"
        defaultValue={500}
        minValue={0}
        maxValue={1000}
        step={50}
        showLimitsValues
        showInput
        labelFormatCallback={(val) => `$${val}`}
      />

      {/* With drag end callback */}
      <DxcSlider
        label="Drag End Event"
        value={value}
        onChange={setValue}
        onDragEnd={(finalValue) => {
          console.log("Final value:", finalValue);
          // Useful for API calls after user finishes dragging
        }}
        minValue={0}
        maxValue={100}
      />

      {/* Disabled */}
      <DxcSlider
        label="Disabled Slider"
        value={50}
        disabled
        minValue={0}
        maxValue={100}
        showLimitsValues
      />

      {/* Size variations */}
      <DxcSlider
        label="Fill Parent Width"
        value={value}
        onChange={setValue}
        minValue={0}
        maxValue={100}
        size="fillParent"
      />
    </DxcFlex>
  );
}

```

--------------------------------

### DxcToastsQueue and useToast Hook Examples

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Shows how to integrate DxcToastsQueue with the useToast hook to display various types of notifications, including default, success, warning, info, loading, and toasts with actions. The DxcToastsQueue should wrap the application.

```tsx
import { DxcToastsQueue, useToast, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";

// Wrap your app with DxcToastsQueue
function App() {
  return (
    <DxcToastsQueue duration={4000}>
      <ToastExamples />
    </DxcToastsQueue>
  );
}

function ToastExamples() {
  const toast = useToast();

  const showDefaultToast = () => {
    toast.default({
      message: "This is a default notification",
      icon: "info",
    });
  };

  const showSuccessToast = () => {
    toast.success({
      message: "Operation completed successfully!",
    });
  };

  const showWarningToast = () => {
    toast.warning({
      message: "Please review your input before proceeding.",
      hideSemanticIcon: false,
    });
  };

  const showInfoToast = () => {
    toast.info({
      message: "New updates are available.",
    });
  };

  const showLoadingToast = () => {
    const clearToast = toast.loading({
      message: "Processing your request...",
    });

    // Clear the loading toast after 3 seconds
    setTimeout(() => {
      clearToast?.();
      toast.success({ message: "Request completed!" });
    }, 3000);
  };

  const showToastWithAction = () => {
    toast.info({
      message: "File deleted successfully",
      action: {
        label: "Undo",
        icon: "undo",
        onClick: () => {
          console.log("Undo clicked");
          toast.success({ message: "File restored!" });
        },
      },
    });
  };

  return (
    <DxcFlex gap="1rem" wrap="wrap">
      <DxcButton label="Default Toast" onClick={showDefaultToast} />
      <DxcButton label="Success Toast" onClick={showSuccessToast} />
      <DxcButton label="Warning Toast" onClick={showWarningToast} />
      <DxcButton label="Info Toast" onClick={showInfoToast} />
      <DxcButton label="Loading Toast" onClick={showLoadingToast} />
      <DxcButton label="Toast with Action" onClick={showToastWithAction} />
    </DxcFlex>
  );
}

```

--------------------------------

### Build the Library

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Use this command to build the halstack-react component library.

```bash
turbo build
```

--------------------------------

### Build Storybook

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Generates a static build of the Storybook for deployment.

```bash
turbo storybook:build
```

--------------------------------

### Implement DxcAccordion configurations

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Shows how to use independent and non-independent accordion modes, along with adding badges and status lights to items.

```tsx
import { useState } from "react";
import { DxcAccordion, DxcBadge, DxcStatusLight } from "@dxc-technology/halstack-react";

function AccordionExamples() {
  const [activeIndex, setActiveIndex] = useState<number | undefined>(0);
  const [multipleActive, setMultipleActive] = useState<number[]>([0, 2]);

  return (
    <>
      {/* Independent mode - only one panel open at a time (controlled) */}
      <DxcAccordion
        independent
        indexActive={activeIndex}
        onActiveChange={(index) => setActiveIndex(index)}
      >
        <DxcAccordion.Item
          label="Personal Information"
          subLabel="Name, email, and contact details"
          icon="person"
        >
          <p>Enter your personal information here.</p>
        </DxcAccordion.Item>
        <DxcAccordion.Item
          label="Payment Details"
          subLabel="Credit card and billing"
          icon="credit_card"
          assistiveText="Required"
        >
          <p>Enter your payment information.</p>
        </DxcAccordion.Item>
        <DxcAccordion.Item
          label="Shipping Address"
          icon="local_shipping"
          disabled
        >
          <p>This section is disabled.</p>
        </DxcAccordion.Item>
      </DxcAccordion>

      {/* Non-independent mode - multiple panels can be open (controlled) */}
      <DxcAccordion
        independent={false}
        indexActive={multipleActive}
        onActiveChange={(indexes) => setMultipleActive(indexes)}
        margin={{ top: "large" }}
      >
        <DxcAccordion.Item label="Section 1">
          <p>Content for section 1</p>
        </DxcAccordion.Item>
        <DxcAccordion.Item label="Section 2">
          <p>Content for section 2</p>
        </DxcAccordion.Item>
        <DxcAccordion.Item label="Section 3">
          <p>Content for section 3</p>
        </DxcAccordion.Item>
      </DxcAccordion>

      {/* Uncontrolled with default active */}
      <DxcAccordion independent defaultIndexActive={1} margin={{ top: "large" }}>
        <DxcAccordion.Item
          label="With Badge"
          badge={{ position: "after", element: <DxcBadge label="New" /> }}
        >
          <p>This item has a badge.</p>
        </DxcAccordion.Item>
        <DxcAccordion.Item
          label="With Status Light"
          statusLight={<DxcStatusLight label="Active" status="success" />}
        >
          <p>This item has a status light.</p>
        </DxcAccordion.Item>
      </DxcAccordion>
    </>
  );
}
```

--------------------------------

### Run Tests

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Executes the test suite for the project.

```bash
turbo test
```

--------------------------------

### Deploy Storybook

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Deploys the Storybook to GitHub Pages.

```bash
turbo storybook:deploy
```

--------------------------------

### Implement Halstack components

Source: https://github.com/dxc-technology/halstack-react/blob/master/README.md

Import and use DxcButton and DxcTextInput components within a React application.

```jsx
import { DxcButton, DxcTextInput } from "@dxc-technology/halstack-react";

const App = () => (
  <>
    <DxcTextInput label="Enter your name" />
    <DxcButton label="Submit" type="submit" />
  </>
);
```

--------------------------------

### Implement DxcSelect variations

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates various configurations of the DxcSelect component, including controlled and uncontrolled states, search functionality, grouped options, and virtualization.

```tsx
import { useState } from "react";
import { DxcSelect, DxcFlex } from "@dxc-technology/halstack-react";

function SelectExamples() {
  const [singleValue, setSingleValue] = useState("");
  const [multiValue, setMultiValue] = useState<string[]>([]);

  // Simple options
  const simpleOptions = [
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" },
  ];

  // Options with icons
  const iconOptions = [
    { label: "Home", value: "home", icon: "home" },
    { label: "Settings", value: "settings", icon: "settings" },
    { label: "Profile", value: "profile", icon: "person" },
  ];

  // Grouped options
  const groupedOptions = [
    {
      label: "Fruits",
      options: [
        { label: "Apple", value: "apple" },
        { label: "Banana", value: "banana" },
        { label: "Orange", value: "orange" },
      ],
    },
    {
      label: "Vegetables",
      options: [
        { label: "Carrot", value: "carrot" },
        { label: "Broccoli", value: "broccoli" },
        { label: "Spinach", value: "spinach" },
      ],
    },
  ];

  return (
    <DxcFlex direction="column" gap="1rem">
      {/* Basic single select (controlled) */}
      <DxcSelect
        label="Choose Option"
        options={simpleOptions}
        value={singleValue}
        onChange={({ value, error }) => {
          setSingleValue(value);
          if (error) console.log("Error:", error);
        }}
        helperText="Select one option"
        placeholder="Select..."
      />

      {/* Multiple select (controlled) */}
      <DxcSelect
        label="Select Multiple"
        options={simpleOptions}
        multiple
        value={multiValue}
        onChange={({ value }) => setMultiValue(value)}
        enableSelectAll
        helperText="You can select multiple options"
      />

      {/* Uncontrolled with default value */}
      <DxcSelect
        label="Default Selection"
        options={simpleOptions}
        defaultValue="2"
        name="selection"
      />

      {/* Searchable select */}
      <DxcSelect
        label="Searchable"
        options={simpleOptions}
        searchable
        helperText="Type to filter options"
      />

      {/* Searchable with startsWith mode */}
      <DxcSelect
        label="Search by Start"
        options={simpleOptions}
        searchable
        searchByStartsWith
      />

      {/* With icons */}
      <DxcSelect
        label="With Icons"
        options={iconOptions}
        placeholder="Select a page..."
      />

      {/* Grouped options */}
      <DxcSelect
        label="Grouped Options"
        options={groupedOptions}
        placeholder="Select food..."
      />

      {/* Optional select */}
      <DxcSelect
        label="Optional Field"
        options={simpleOptions}
        optional
        placeholder="None selected"
      />

      {/* With error state */}
      <DxcSelect
        label="With Error"
        options={simpleOptions}
        error="Please select an option"
      />

      {/* Virtualized for large lists */}
      <DxcSelect
        label="Large List (Virtualized)"
        options={Array.from({ length: 1000 }, (_, i) => ({
          label: `Option ${i + 1}`,
          value: String(i + 1),
        }))}
        virtualizedHeight="300px"
        searchable
      />

      {/* Size variations */}
      <DxcSelect
        label="Fill Parent Width"
        options={simpleOptions}
        size="fillParent"
      />
    </DxcFlex>
  );
}
```

--------------------------------

### DxcFileInput with File Type Restriction and Preview

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Enables file type restriction using the `accept` prop and displays a preview of the uploaded image files. The `showPreview` prop is set to true.

```tsx
import {
  DxcFileInput,
  DxcFlex
} from "@dxc-technology/halstack-react";
import type { FileData } from "@dxc-technology/halstack-react";
import { useState } from "react";

function FileInputExamples() {
  const [files, setFiles] = useState<FileData[]>([]);

  const handleFileCallback = (newFiles: FileData[]) => {
    // Validate files and add custom errors if needed
    const validatedFiles = newFiles.map((fileData) => {
      if (fileData.file.size > 5 * 1024 * 1024) {
        return { ...fileData, error: "File exceeds 5MB limit" };
      }
      return fileData;
    });
    setFiles(validatedFiles);
  };

  return (
    <DxcFlex direction="column" gap="1.5rem">
      {/* With file type restriction */}
      <DxcFileInput
        label="Upload Images"
        value={files}
        callbackFile={handleFileCallback}
        accept="image/*"
        showPreview
        helperText="Only image files are allowed"
      />
    </DxcFlex>
  );
}
```

--------------------------------

### DxcDataGrid Basic Usage

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates the basic implementation of the DxcDataGrid component with columns and rows.

```tsx
import { DxcDataGrid, DxcFlex } from "@dxc-technology/halstack-react";

function DataGridExamples() {
  const columns = [
    { key: "id", label: "ID", sortable: true },
    { key: "name", label: "Name", sortable: true, resizable: true },
    { key: "email", label: "Email", resizable: true },
    { key: "role", label: "Role", alignment: "center" as const },
    { key: "status", label: "Status", alignment: "right" as const },
  ];

  const rows = [
    { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", status: "Active" },
    { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User", status: "Active" },
    { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "User", status: "Inactive" },
    { id: 4, name: "Alice Brown", email: "alice@example.com", role: "Editor", status: "Active" },
    { id: 5, name: "Charlie Wilson", email: "charlie@example.com", role: "User", status: "Pending" },
  ];

  return (
    <DxcFlex direction="column" gap="2rem">
      {/* Basic data grid */}
      <DxcDataGrid
        columns={columns}
        rows={rows}
      />
    </DxcFlex>
  );
}
```

--------------------------------

### Run Linter

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Executes the linter to check for code quality and potential issues.

```bash
turbo lint
```

--------------------------------

### Implement DxcRadioGroup variants

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Shows how to configure radio groups with controlled/uncontrolled modes, horizontal stacking, optional items, and error states.

```tsx
import { useState } from "react";
import { DxcRadioGroup, DxcFlex } from "@dxc-technology/halstack-react";

function RadioGroupExamples() {
  const [selectedSize, setSelectedSize] = useState("medium");

  const sizeOptions = [
    { label: "Small", value: "small" },
    { label: "Medium", value: "medium" },
    { label: "Large", value: "large" },
  ];

  const paymentOptions = [
    { label: "Credit Card", value: "credit" },
    { label: "PayPal", value: "paypal" },
    { label: "Bank Transfer", value: "bank", disabled: true },
  ];

  return (
    <DxcFlex direction="column" gap="1.5rem">
      {/* Controlled radio group */}
      <DxcRadioGroup
        label="Select Size"
        options={sizeOptions}
        value={selectedSize}
        onChange={(value) => setSelectedSize(value)}
        helperText="Choose your preferred size"
      />

      {/* Uncontrolled with default */}
      <DxcRadioGroup
        label="Payment Method"
        options={paymentOptions}
        defaultValue="credit"
        name="payment"
        onBlur={({ value, error }) => {
          console.log("Selected:", value);
          if (error) console.log("Error:", error);
        }}
      />

      {/* Row stacking (horizontal layout) */}
      <DxcRadioGroup
        label="Delivery Speed"
        options={[
          { label: "Standard", value: "standard" },
          { label: "Express", value: "express" },
          { label: "Overnight", value: "overnight" },
        ]}
        stacking="row"
      />

      {/* Optional with custom label */}
      <DxcRadioGroup
        label="Gender"
        options={[
          { label: "Male", value: "male" },
          { label: "Female", value: "female" },
        ]}
        optional
        optionalItemLabel="Prefer not to say"
      />

      {/* With error state */}
      <DxcRadioGroup
        label="Required Selection"
        options={sizeOptions}
        error="Please select an option"
      />

      {/* Read-only */}
      <DxcRadioGroup
        label="Read Only Group"
        options={sizeOptions}
        value="medium"
        readOnly
      />
    </DxcFlex>
  );
}
```

--------------------------------

### Run Accessibility Tests

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Runs accessibility tests to ensure the components meet accessibility standards.

```bash
turbo test:accessibility
```

--------------------------------

### Implement DxcDateInput variations

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Demonstrates controlled and uncontrolled date inputs, custom date formats, and various states like read-only, disabled, and error handling.

```tsx
import { useState } from "react";
import { DxcDateInput, DxcFlex } from "@dxc-technology/halstack-react";

function DateInputExamples() {
  const [date, setDate] = useState("");

  return (
    <DxcFlex direction="column" gap="1rem">
      {/* Controlled date input */}
      <DxcDateInput
        label="Select Date"
        value={date}
        onChange={({ value, error, date: dateObj }) => {
          setDate(value);
          if (dateObj) {
            console.log("Valid date:", dateObj.toISOString());
          }
          if (error) {
            console.log("Validation error:", error);
          }
        }}
        onBlur={({ value, error, date }) => {
          console.log("Blur - Value:", value, "Date:", date);
        }}
        helperText="Format: dd-MM-yyyy"
      />

      {/* Custom date format */}
      <DxcDateInput
        label="US Format"
        format="MM/dd/yyyy"
        placeholder
        helperText="Format: MM/dd/yyyy"
      />

      {/* European format */}
      <DxcDateInput
        label="European Format"
        format="dd.MM.yyyy"
        placeholder
      />

      {/* ISO format */}
      <DxcDateInput
        label="ISO Format"
        format="yyyy-MM-dd"
        placeholder
      />

      {/* Uncontrolled with default */}
      <DxcDateInput
        label="Default Date"
        defaultValue="15-06-2024"
        name="eventDate"
      />

      {/* Clearable */}
      <DxcDateInput
        label="Clearable Date"
        clearable
        placeholder
      />

      {/* Optional field */}
      <DxcDateInput label="Optional Date" optional placeholder />

      {/* With error */}
      <DxcDateInput
        label="With Error"
        error="Please enter a valid date"
        value="invalid"
      />

      {/* Read-only and disabled */}
      <DxcDateInput label="Read Only" value="01-01-2024" readOnly />
      <DxcDateInput label="Disabled" value="01-01-2024" disabled />

      {/* Size variations */}
      <DxcDateInput label="Fill Parent" size="fillParent" placeholder />
    </DxcFlex>
  );
}
```

--------------------------------

### DxcFileInput with Size Constraints

Source: https://context7.com/dxc-technology/halstack-react/llms.txt

Applies size constraints to uploaded files using `minSize` and `maxSize` props. The helper text informs the user about the allowed file size range.

```tsx
import {
  DxcFileInput,
  DxcFlex
} from "@dxc-technology/halstack-react";
import type { FileData } from "@dxc-technology/halstack-react";
import { useState } from "react";

function FileInputExamples() {
  const [files, setFiles] = useState<FileData[]>([]);

  const handleFileCallback = (newFiles: FileData[]) => {
    // Validate files and add custom errors if needed
    const validatedFiles = newFiles.map((fileData) => {
      if (fileData.file.size > 5 * 1024 * 1024) {
        return { ...fileData, error: "File exceeds 5MB limit" };
      }
      return fileData;
    });
    setFiles(validatedFiles);
  };

  return (
    <DxcFlex direction="column" gap="1.5rem">
      {/* With size constraints */}
      <DxcFileInput
        label="Upload with Size Limits"
        value={files}
        callbackFile={handleFileCallback}
        minSize={1024}
        maxSize={5 * 1024 * 1024}
        helperText="File size must be between 1KB and 5MB"
      />
    </DxcFlex>
  );
}
```

--------------------------------

### Run Prettier Formatter

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Executes the Prettier formatter to ensure code style consistency.

```bash
npm run format
```

--------------------------------

### Run Storybook Tests

Source: https://github.com/dxc-technology/halstack-react/blob/master/LOCAL.md

Executes tests specifically for the Storybook environment.

```bash
turbo test-storybook
```