### Install and Run Next.js App

Source: https://github.com/daimlertruck/dt-dds/blob/main/examples/with-nextjs-pages-router/README.md

Install dependencies and start the development server for your Next.js application.

```bash
yarn install
yarn dev
```

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

### Install and Build Package

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/changeset-conventional-commits/README.md

Commands to install dependencies and build the package.

```bash
yarn install
yarn build
```

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

### Development Command

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/icon-button/README.md

Run this command to start the package locally for development and testing.

```bash
yarn dev
```

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

### Standard AppHeader Usage Example

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/app-header/README.md

Demonstrates the basic structure and usage of the AppHeader component with standard layout. It includes examples of adding a logo, app name, navigation, and action buttons.

```jsx
import { AppHeader } from '@dt-dds/react-app-header';
import { Icon } from '@dt-dds/react-icon';
import { IconButton } from '@dt-dds/react-icon-button';

export const App = () => {
  return (
    <AppHeader type='standard'>
      <AppHeader.Actions position='left'>
        <IconButton ariaLabel='menu' onClick={() => null}>
          <Icon code='menu' />
        </IconButton>
      </AppHeader.Actions>

      <AppHeader.AppName name='My App' />

      <AppHeader.Logo>
        <img src='/logo.svg' alt='Logo' />
      </AppHeader.Logo>

      <AppHeader.Navigation position='center'>
        <ul>
          <li>
            <a href='/home'>Home</a>
          </li>
          <li>
            <a href='/about'>About</a>
          </li>
        </ul>
      </AppHeader.Navigation>

      <AppHeader.Actions position='right'>
        <IconButton ariaLabel='search' onClick={() => null}>
          <Icon code='search' />
        </IconButton>
      </AppHeader.Actions>
    </AppHeader>
  );
};

```

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

### Install Icons Package with Yarn

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/icons/README.md

Install the package using yarn. This is the first step to integrate icons into your application.

```bash
yarn add @dt-dds/icons
```

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

### Basic Select Usage Example

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/select/README.md

Demonstrates how to implement a single-select Select component with predefined options. Ensure you have React and useState imported.

```jsx
import { Select } from '@dt-dds/react-select';

const items = [
  { value: 'value1', label: 'Value 1' },
  { value: 'value2', label: 'Value 2' },
  { value: 'value3', label: 'Value 3', disabled: true },
];

export const App = () => {
  const [value, setValue] = useState < string > '';

  return (
    <Select
      label='Choose a value'
      helperText='you need to make a selection'
      isMulti={false}
      value={value}
      onChange={setValue}
      variant='outlined'
      fill='default'
    >
      {items.map((item, index) => (
        <Select.Option
          key={item.value}
          index={index}
          value={item.value}
          disabled={item.disabled}
        >
          {item.label}
        </Select.Option>
      ))}
    </Select>
  );
};

```

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

### Generated Changeset Example

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/changeset-conventional-commits/README.md

An example of a Changeset file generated by the plugin, specifying the package and version bump type.

```markdown
---
'@dt-dds/react': patch
---

chore: set beta version for main branch
```

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

### Build and Publish @dt-dds/react

Source: https://github.com/daimlertruck/dt-dds/blob/main/CONTRIBUTING.md

Commands to install dependencies, build, pack, and publish the @dt-dds/react package.

```bash
yarn install
yarn build
yarn pack
yarn publish
```

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

### Install DT-DDS React Components and Emotion

Source: https://github.com/daimlertruck/dt-dds/blob/main/README.md

Installs the `@dt-dds/react` package along with the necessary Emotion dependencies for CSS-IN-JS styling. Ensure these packages are added to your project.

```bash
yarn add @dt-dds/react @emotion/css @emotion/react @emotion/styled
```

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

### SegmentedControl Usage Example

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/segmented-control/README.md

Demonstrates how to import and use the SegmentedControl component with its options.

```APIDOC
## SegmentedControl Usage

```jsx
import { SegmentedControl } from '@dt-dds/react-segmented-control';

export const App = () => {
  return (
    <SegmentedControl
      selectedValue='list'
      showLabel={false}
      onChangeControl={handleChanges}
    >
      <SegmentedControl.Option label='List' value='list' iconCode='list' />
      <SegmentedControl.Option
        label='Gallery'
        value='gallery'
        iconCode='grid_view'
        disabled
      />
    </SegmentedControl>
  );
};
```
```

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

### Development Commands for Themes Package

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/themes/README.md

Common development commands for the themes package, including installing dependencies, building, testing, and generating themes.

```bash
# Install dependencies
yarn install

# Build the package
yarn build

# Run tests
yarn test

# Generate themes from tokens
yarn build:theme
```

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

### Select Examples - `@dt-dds/react-select`

Source: https://context7.com/daimlertruck/dt-dds/llms.txt

Illustrates single and multi-select dropdowns with various configurations, including helper text, error states, and disabled options. Ensure children are `Select.Option` elements.

```tsx
import { Select } from '@dt-dds/react-select';

function SelectExamples() {
  const [country, setCountry] = React.useState('');
  const [tags, setTags] = React.useState<string[]>([]);

  return (
    <>
      {/* Single select *//*}
      <Select
        label="Country"
        value={country}
        onChange={setCountry}
        helperText="Select your country of residence"
        isRequired
      >
        <Select.Option value="de">Germany</Select.Option>
        <Select.Option value="us">United States</Select.Option>
        <Select.Option value="jp">Japan</Select.Option>
        <Select.Option value="br" isDisabled>Brazil (unavailable)</Select.Option>
      </Select>

      {/* Multi select *//*}
      <Select
        label="Tags"
        isMulti
        value={tags}
        onChange={setTags}
        variant="outlined"
        fill="default"
        scale="standard"
      >
        <Select.Option value="urgent">Urgent</Select.Option>
        <Select.Option value="review">In Review</Select.Option>
        <Select.Option value="done">Done</Select.Option>
      </Select>

      {/* With error *//*}
      <Select label="Status" hasError helperText="This field is required">
        <Select.Option value="active">Active</Select.Option>
      </Select>
    </>
  );
}
```

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

### Modal Example - `@dt-dds/react-modal`

Source: https://context7.com/daimlertruck/dt-dds/llms.txt

Shows how to implement a confirmation modal using the `Modal`, `Overlay`, and `useModal` hook. The `Overlay` provides a backdrop, and `Modal.Header`, `Modal.Content`, and `Modal.Footer` structure the dialog.

```tsx
import { Modal, Overlay, useModal } from '@dt-dds/react-modal';
import { Button } from '@dt-dds/react-button';

function ConfirmDeleteModal() {
  const { isModalOpen, toggleModal } = useModal(false);

  return (
    <>
      <Button color="error" onClick={toggleModal}>
        Delete item
      </Button>

      <Overlay isOpen={isModalOpen} type="dark">
        <Modal onClickOutside={toggleModal}>
          <Modal.Header
            title="Confirm Deletion"
            subTitle="This action cannot be undone."
            onClose={toggleModal}
            hasBorder
          />
          <Modal.Content>
            <p>Are you sure you want to permanently delete this item?</p>
          </Modal.Content>
          <Modal.Footer>
            <Button variant="outlined" onClick={toggleModal}>Cancel</Button>
            <Button color="error" onClick={() => { deleteItem(); toggleModal(); }}>
              Delete
            </Button>
          </Modal.Footer>
        </Modal>
      </Overlay>
    </>
  );
}
```

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

### Install DT-DDS Themes Package

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/themes/README.md

Use this command to add the themes package to your project dependencies.

```bash
yarn add @dt-dds/themes
```

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

### Example Git Log with Conventional Commits

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/changeset-conventional-commits/README.md

Illustrates a git log output where commits adhere to the conventional commits specification.

```git
96c85c8 (HEAD -> main) chore: fix getting PR number on pipeline
c247c66 chore: fix pipeline when checking versions
2ad41a5 (@package/example@1.0.0) release: version packages
32455e1 fix: remove page components
eae07bf fix: PR preview link to target correct repository
```

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

### Basic Vertical Card Example

Source: https://github.com/daimlertruck/dt-dds/blob/main/docs/rfcs/0000-template.md

Demonstrates the basic usage of a vertical card component with an image, title, description, and a tag.

```tsx
import { Card, Tag } from '@your-design-system/react';

// Basic vertical card
<Card>
  <Card.Image src="..." alt="A descriptive text" />
  <Card.Content title="Card title" description="Lorem ipsum dolor sit amet.">
    <Tag label="Tag" />
  </Card.Content>
</Card>
```

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

### Link Component Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/link/README.md

Demonstrates how to import and use the Link component in a React application. It shows a basic example of rendering a link with an href attribute.

```APIDOC
## Link Component Usage

This section provides an example of how to import and use the `Link` component from the `@dt-dds/react-link` package.

### Example

```jsx
import { Link } from '@dt-dds/react-link';

export const App = () => {
  return <Link href='/'>Some text</Link>;
};
```
```

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

### Example Changelog Generation

Source: https://github.com/daimlertruck/dt-dds/blob/main/CONTRIBUTING.md

This markdown shows the default format for changelogs generated by Changesets based on conventional commits, including major, minor, and patch changes.

```markdown
# @package/example

## 1.0.0

### Major Changes

- fix(container)!: remove ability to specify the container background

### Minor Changes

- feat(button): add new property to enable different shadows

### Patch Changes

- docs: move Storybook to docs application
- docs: add support section in README
- docs: add Usage section on README
- fix: remove page components

```

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

### Example Git Log Without Tags

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/changeset-conventional-commits/README.md

Shows a git log when no tags have been created yet, considering all commits since the beginning.

```git
96c85c8 (HEAD -> main) chore: fix getting PR number on pipeline
c247c66 chore: fix pipeline when checking versions
2ad41a5 fix: remove page components
eae07bf fix: PR preview link to target correct repository
9a3b645 chore: change pool on pipeline
.
.
.
0239b33 initial commit
```

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

### Run New Custom Generator via Turbo CLI

Source: https://github.com/daimlertruck/dt-dds/blob/main/turbo/generators/INSTRUCTIONS.md

Execute your new custom generator from the project root using the `turbo gen` command followed by your generator's name. Interactive prompts will guide the process.

```bash
turbo gen new-custom-generator
```

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

### Horizontal Clickable Card Example

Source: https://github.com/daimlertruck/dt-dds/blob/main/docs/rfcs/0000-template.md

Shows how to implement a horizontal card that is clickable, including an image and content. Requires 'type="clickable"' and an 'onClick' handler.

```tsx
import { Card } from '@your-design-system/react';

// Horizontal clickable card
<Card orientation="horizontal" type="clickable" onClick={() => {}}>
  <Card.Image src="..." alt="..." />
  <Card.Content title="Card title" description="Description text." />
</Card>
```

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

### ARIA Roles and Attributes Example

Source: https://github.com/daimlertruck/dt-dds/blob/main/docs/rfcs/0000-template.md

Illustrates the use of ARIA roles and attributes for accessibility within a component's markup. Essential for screen reader compatibility.

```html
<div role="..." aria-label="..." aria-describedby="..." >
  <!-- Component markup with ARIA -->
</div>
```

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

### Pagination Component Setup - `@dt-dds/react-pagination`

Source: https://context7.com/daimlertruck/dt-dds/llms.txt

Shows the configuration of the Pagination component, including current page, total pages, items per page, and event handlers for page changes and items per page updates. It supports optional items-per-page selectors and item count displays.

```tsx
import { Pagination } from '@dt-dds/react-pagination';

function PaginatedList() {
  const [page, setPage] = React.useState(1);
  const [perPage, setPerPage] = React.useState(10);

  return (
    <Pagination
      currentPage={page}
      totalPages={Math.ceil(237 / perPage)}
      totalItems={237}
      itemsPerPage={perPage}
      onPageChange={setPage}
      onItemsPerPageChange={(n) => { setPerPage(n); setPage(1); }}
      showItemsPerPage
      showItemsInfo
      itemsPerPageOptions={[10, 25, 50]}
    />
  );
}

```

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

### Project Commands

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/stepper/README.md

Provides a list of common commands for building, developing, linting, and testing the package.

```bash
- `yarn build` - Build the package
- `yarn dev` - Run the package locally
- `yarn lint` - Lint all files within this package
- `yarn test` - Run all unit tests
- `yarn test:report` - Open the test coverage report
- `yarn test:update:snapshot` - Run all unit tests and update the snapshot
```

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

### Useful Commands for Package Management

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/changeset-conventional-commits/README.md

Common commands for linting, testing, and building the package.

```bash
yarn lint
yarn test
yarn build
```

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

### Build Process Overview

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/text-area/README.md

The package is compiled using tsup, producing JavaScript output in the /dist folder.

```bash
text-area
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

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

### Import and Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/changeset-conventional-commits/README.md

How to import the plugin and use its available methods in your project.

```APIDOC
## Import Plugin
```javascript
const changesetPlugin = require('changeset-conventional-commits');
```

## Available Methods
- `changesetPlugin.conventionalCommitChangeset()`
- `changesetPlugin.addTag()`
```

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

### Import and Use Plugin Methods

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/changeset-conventional-commits/README.md

How to import the plugin and access its methods for use as a script.

```javascript
const changesetPlugin = require('changeset-conventional-commits');
```

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

### Install Fonts Package with Yarn

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/fonts/README.md

Use this command to add the fonts package to your project dependencies.

```bash
yarn add @dt-dds/fonts
```

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

### Basic Backdrop Usage in React

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/backdrop/README.md

Demonstrates how to import and use the Backdrop component in a React application. It shows how to wrap content with the Backdrop.

```jsx
import { Backdrop } from '@dt-dds/react';

export const App = () => {
  return (
    <Backdrop>
      <div>Children here</div>
    </Backdrop>
  );
};

```

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

### Basic Dropdown Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/dropdown/README.md

Demonstrates how to import and use the Dropdown component with a list of options. Ensure the Dropdown.Option component is used for each selectable item.

```jsx
import { Dropdown } from '@dt-dds/react';

const OPTIONS = [
  { text: 'Option 1', value: '1' },
  { text: 'Option 2', value: '2' },
];

export const App = () => {
  return (
    <Dropdown>
      {options.map((option) => (
        <Dropdown.Option key={option.value}>{option.text}</Dropdown.Option>
      ))}
    </Dropdown>
  );
};
```

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

### Basic EmptyState Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/empty-state/README.md

Demonstrates how to import and use the EmptyState component with content, title, description, and an action button. Ensure necessary components like `Button` and `img` are available in your scope.

```jsx
import { EmptyState } from '@dt-dds/react';

export const App = () => {
  const title = 'Some Title';
  const description = 'Some Description';

  return (
    <EmptyState>
      <img />
      <EmptyState.Content title={title} description={description} />
      <Button onClick={() => {}} variant='solid'>
        Action
      </Button>
    </EmptyState>
  );
};
```

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

### Build Output Structure

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/modal/README.md

Illustrates the directory structure of the compiled output after running the build command, showing type definitions and JavaScript module formats.

```bash
modal
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

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

### SegmentedControl Usage Example

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/segmented-control/README.md

Demonstrates how to use the SegmentedControl component with options for 'List' and 'Gallery'. The 'Gallery' option is disabled. Labels are hidden by default.

```jsx
import { SegmentedControl } from '@dt-dds/react-segmented-control';

export const App = () => {
  return (
    <SegmentedControl
      selectedValue='list'
      showLabel={false}
      onChangeControl={handleChanges}
    >
      <SegmentedControl.Option label='List' value='list' iconCode='list' />
      <SegmentedControl.Option
        label='Gallery'
        value='gallery'
        iconCode='grid_view'
        disabled
      />
    </SegmentedControl>
  );
};

```

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

### App Header Package Structure

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/app-header/README.md

Illustrates the compiled output structure of the app-header package after running the build command. Includes type definitions and module formats.

```bash
app-header
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

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

### Basic Drawer Usage in React

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/drawer/README.md

Demonstrates how to import and use the Drawer component in a React application. It includes state management for visibility and basic structure with Header, Title, and Body.

```jsx
import { Drawer } from '@dt-dds/react';

export const App = () => {
  const [isDrawerVisible, setIsDrawerVisible] = useState(props.isVisible);

  const toggleDrawer = () => {
    setIsDrawerVisible((prevState) => !prevState);
  };

  return (
    <>
      <button onClick={toggleDrawer} type='button'>
        Open Drawer
      </button>

      <Drawer isVisible={isDrawerVisible} setIsVisible={setIsDrawerVisible}>
        <Drawer.Header>
          <Drawer.Title title='Drawer title' />
          <div>Drawer header content here.</div>
        </Drawer.Header>
        <Drawer.Body>
          <div>Drawer body content here.</div>
        </Drawer.Body>
      </Drawer>
    </>
  );
};
```

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

### Build Command for Tooltip Package

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/tooltip/README.md

Shows the command to build the Tooltip package using tsup. The output includes compiled JavaScript files in the /dist folder.

```bash
tooltip
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...

```

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

### Card Group with Radio Selection

Source: https://github.com/daimlertruck/dt-dds/blob/main/docs/rfcs/0000-template.md

Example of using Card.Group for radio button-style selection, where only one card can be selected at a time. Uses string values for selection.

```tsx
import { Card } from '@your-design-system/react';

// Group with radio selection (string values)
<Card.Group selectionType="radio" onChange={(value) => console.log(value)}>
  <Card value="a"><Card.Content title="Option A" /></Card>
  <Card value="b"><Card.Content title="Option B" /></Card>
  <Card value="c"><Card.Content title="Option C" /></Card>
</Card.Group>
```

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

### Package Build Output Structure

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/typography/README.md

Illustrates the directory structure and output files generated after building the typography package using tsup.

```bash
typography
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...

```

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

### Avatar with Custom Styling

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/avatar/README.md

Customize avatar appearance by targeting data attributes with CSS selectors. This example shows how to change the background color on hover for letter-type avatars.

```jsx
import { IconButton } from '@dt-dds/react-icon-button';
import { Avatar } from '@dt-dds/react-avatar';
import { css } from '@emotion/react';

export const CustomAvatarButton = () => {
  const avatarHoverStyles = css`
    &:hover:not(:disabled) {
      [data-avatar-type='letter'] {
        background-color: #a020f0;
      }
    }
  `;

  return (
    <IconButton ariaLabel='User' cssOverrides={avatarHoverStyles}>
      <Avatar title='John Doe' type='letter' customInitials='JD' />
    </IconButton>
  );
};

```

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

### IconButton with Avatar Component

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/icon-button/README.md

This example demonstrates using an IconButton to wrap an Avatar component, allowing users to interact with profile information. Provide an `ariaLabel` for clear accessibility.

```jsx
import { IconButton } from '@dt-dds/react-icon-button';
import { Avatar } from '@dt-dds/react-avatar';

export const AvatarButton = () => {
  return (
    <IconButton
      ariaLabel="User profile"
      onClick={() => console.log('Avatar clicked')}
    >
      <Avatar
        title="John Doe"
        type="letter"
        size="medium"
      />
    </IconButton>
  );
};

```

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

### Controlled Checkbox Examples

Source: https://context7.com/daimlertruck/dt-dds/llms.txt

Demonstrates a controlled checkbox with options for label, checked state, indeterminate state, error highlighting, and size variations. Requires React state management.

```tsx
import { Checkbox } from '@dt-dds/react-checkbox';

function ConsentForm() {
  const [accepted, setAccepted] = React.useState(false);
  const [partial, setPartial] = React.useState(false);

  return (
    <>
      <Checkbox
        label="I accept the terms and conditions"
        isChecked={accepted}
        onChange={(e) => setAccepted(e.target.checked)}
        isRequired
      />

      {/* Indeterminate (parent of a partially-selected group) */}
      <Checkbox
        label="Select all"
        isChecked={false}
        isIndeterminate={partial}
        onChange={() => setPartial(false)}
        size="large"
      />

      {/* Error state, no label (use aria-label) */}
      <Checkbox
        isChecked={false}
        hasError
        aria-label="Accept marketing emails"
        onChange={() => {}}
        size="small"
      />
    </>
  );
}
```

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

### Manual Theme Generation Command

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/themes/README.md

Run this command within the `packages/themes` directory to manually generate theme files from token definitions.

```bash
cd packages/themes
yarn build:theme
```

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

### Run Changeset Commands

Source: https://github.com/daimlertruck/dt-dds/blob/main/CONTRIBUTING.md

Execute the sequence of commands to add, version, and tag changesets during the release process.

```bash
yarn changesets:add && yarn changesets:version && yarn changesets:tag
```

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

### Basic Card Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/card/README.md

Demonstrates how to import and use the Card component with its Title and Detail sub-components.

```jsx
import { Card } from '@dt-dds/react';

export const App = () => {
  return (
    <Card>
      <Card.Title>Some Title</Card.Title>
      <Card.Detail>Some Description</Card.Detail>
    </Card>
  );
};

```

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

### Customizable Toast Provider

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/toast/README.md

Shows how to create a custom Toaster provider with an 'autoHide' prop to control toast visibility duration. This example defines a custom context and provider component.

```tsx
interface CallToastArgs {
  title: string;
  message: string;
  type: ToastType;
  autoHide: boolean;
}

export const ToasterContext = createContext({
  callToast: (args: CallToastArgs) => null,
});

const Toaster = ({ children }: { children: React.ReactNode }) => {
  const [toast, setToast] = useState<
    Partial<ToastProps> & { autoHide: boolean }
  >(null);

  const callToast = ({ title, message, type, autoHide }: CallToastArgs)
    =>
    setToast({
      id: Date.now().toString(),
      title,
      message,
      type,
      autoHide,
    });

  const close = () =>
    setToast((prevState) => ({ ...prevState, isVisible: false }));

  useEffect(() => {
    if (toast && toast.autoHide) {
      const timer = setTimeout(() => close(), 1000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  return (
    <ToasterContext.Provider value={{ callToast }}>
      {children}
      <div style={{ position: 'fixed', bottom: 10, left: 10 }}>
        {toast && (
          <Toast
            key={toast.id}
            id={toast.id}
            type={toast.type}
            title={toast.title}
            message={toast.message}
            isVisible={toast.isVisible}
            onClose={close}
          />
        )}
      </div>
    </ToasterContext.Provider>
  );
};

const App = () => {
  return (
    <Toaster>
      <MyComponent />
    </Toaster>
  );
};

const MyComponent = () => {
  const { callToast } = useContext(ToasterContext);

  return (
    <Button
      onClick={() =>
        callToast({
          message: 'myMEssage' + count,
          type: ToastType.Success,
          title: 'success',
          autoHide: false,
        })
      }
    >
      Clicked Me
    </Button>
  );
};

```

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

### Basic TextField Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/text-field/README.md

Demonstrates how to import and use the TextField component with a label, message, and maximum length.

```jsx
import { TextField } from '@dt-dds/react-text-field';

export const App = () => {
  return <TextField label='My Field' message='Helpful hint' maxLength={40} />;
};
```

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

### Spinner Loading Indicator Examples

Source: https://context7.com/daimlertruck/dt-dds/llms.txt

Illustrates the Spinner component for loading indicators, available in five sizes and two color schemes (positive/negative). Can optionally include a loading text label.

```tsx
import { Spinner } from '@dt-dds/react-spinner';

function LoadingStates() {
  return (
    <>
      {/* Default medium, positive */}
      <Spinner />

      {/* Large with label, on dark button */}
      <Spinner
        size="large"
        colorScheme="negative"
        loadingText="Uploading…"
      />

      {/* Extra-small inside a button (Button uses this internally) */}
      <Spinner size="extra-small" colorScheme="positive" />
    </>
  );
}
```

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

### Sidebar Package Structure

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/sidebar/README.md

Illustrates the output directory structure after compilation, including type definitions and different module formats.

```bash
sidebar
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

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

### TextField Examples - `@dt-dds/react-text-field`

Source: https://context7.com/daimlertruck/dt-dds/llms.txt

Demonstrates various configurations of the TextField component, including search type with clear button, required fields with error messages, suffix icons, and non-floating labels.

```tsx
import { TextField } from '@dt-dds/react-text-field';
import { Icon } from '@dt-dds/react-icon';

function SearchForm() {
  const [query, setQuery] = React.useState('');
  const [email, setEmail] = React.useState('');

  return (
    <>
      {/* Search type — shows clear (×) button when not empty *//*}
      <TextField
        label="Search"
        type="search"
        initialValue={query}
        onChange={(e) => setQuery(e.target.value)}
        onResetInput={() => setQuery('')}
      />

      {/* Required field with inline error message *//*}
      <TextField
        label="Email"
        type="email"
        required
        requiredMessage="Email address is required"
        hasError={email.length > 0 && !email.includes('@')}
        message={email.length > 0 && !email.includes('@') ? 'Invalid email' : ''}
        initialValue={email}
        onChange={(e) => setEmail(e.target.value)}
      />

      {/* With suffix icon add-on *//*}
      <TextField
        label="Password"
        type="password"
        variant="outlined"
        scale="compact"
        extraSuffix={{
          component: <Icon code="visibility" />,
          onClick: (value) => console.log('Toggle visibility, current:', value),
        }}
      />

      {/* Non-floating label (static label above the field) *//*}
      <TextField
        label="Notes"
        isFloatingLabel={false}
        backgroundFill="contrast"
        scale="standard"
      />
    </>
  );
}
```

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

### Basic Pagination Usage in React

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/pagination/README.md

Demonstrates how to integrate the Pagination component into a React application. It shows state management for current page and items per page, and how to handle page changes.

```jsx
import { Pagination } from '@dt-dds/react';

const Example = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  return (
    <Pagination
      currentPage={currentPage}
      totalPages={20}
      totalItems={200}
      itemsPerPage={itemsPerPage}
      onPageChange={setCurrentPage}
      onItemsPerPageChange={setItemsPerPage}
      showItemsPerPage
      showItemsInfo
    />
  );
};

```

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

### Icon Rendering Examples

Source: https://context7.com/daimlertruck/dt-dds/llms.txt

Shows how to render Material Symbols icons using the Icon component. Supports various sizes, colors, and style variants (outlined/sharp). Ensure the '@dt-dds/icons' code set is available.

```tsx
import { Icon } from '@dt-dds/react-icon';

// Available sizes: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
function IconExamples() {
  return (
    <>
      <Icon code="check_circle" size="large" />
      <Icon code="warning" size="medium" color="#FF6B35" />
      <Icon code="arrow_forward" size="small" variant="outlined" />
      <Icon code="close" size="extra-small" dataTestId="close-icon" />
    </>
  );
}
```

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

### Version Packages

Source: https://github.com/daimlertruck/dt-dds/blob/main/CONTRIBUTING.md

Command to bump package versions based on changeset files.

```bash
changeset version
```

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

### Drawer Compilation Output Structure

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/drawer/README.md

Illustrates the directory structure and output files generated after compiling the Drawer package using tsup.

```bash
drawer
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

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

### Custom Styling with cssOverrides

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/icon-button/README.md

Apply custom styles to an IconButton using the `cssOverrides` prop with Emotion. This allows for advanced visual customization while maintaining component flexibility. The example shows how to change the hover background color.

```jsx
import { IconButton } from '@dt-dds/react-icon-button';
import { Icon } from '@dt-dds/react-icon';
import { css } from '@emotion/react';

export const CustomButton = () => {
  const customStyles = css`
    &:hover:not(:disabled) {
      background-color: #ff5733;
    }
  `;

  return (
    <IconButton cssOverrides={customStyles}>
      <Icon code='star' />
    </IconButton>
  );
};

```

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

### Basic Box Component Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/box/README.md

Demonstrates how to import and use the Box component in a React application. It shows how to set a custom HTML element and apply inline styles.

```jsx
import { Box } from '@dt-dds/react';

export const App = () => {
  return (
    <Box element='div' style={{ gap: '10px' }}>
      <p>Content 1</p>
      <p>Content 2</p>
    </Box>
  );
};

```

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

### Accordion Component Examples - `@dt-dds/react-accordion`

Source: https://context7.com/daimlertruck/dt-dds/llms.txt

Shows how to implement the Accordion component for collapsible content. It supports various configurations like background fill, bottom borders, and disabled states. The `isOpen` prop controls the expanded state.

```tsx
import { Accordion } from '@dt-dds/react-accordion';
import { Typography } from '@dt-dds/react-typography';

function FaqList() {
  return (
    <>
      <Accordion
        headerContent={<Typography fontStyles="bodyLgBold">What is DT-DDS?</Typography>}
        isOpen={false}
        hasBackground
        hasBorderBottom
      >
        <Typography>
          DT-DDS is the Daimler Truck Digital Design System component library.
        </Typography>
      </Accordion>

      {/* Starts expanded, no background, disabled */}
      <Accordion
        headerContent={<Typography fontStyles="bodyLgBold">Restricted Section</Typography>}
        isOpen
        hasBackground={false}
        isDisabled
      >
        <Typography>This section cannot be collapsed.</Typography>
      </Accordion>
    </>
  );
}

```

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

### Backdrop Compilation Output Structure

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/backdrop/README.md

Illustrates the directory structure and output files generated after compiling the Backdrop package using tsup.

```bash
backdrop
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...

```

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

### Basic Stepper Usage with Different States

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/stepper/README.md

Demonstrates how to use the Stepper component with various predefined states like completed, incomplete, warning, error, and disabled. Ensure the Stepper component is imported.

```jsx
import { Stepper } from '@dt-dds/react-stepper';

export const App = () => {
  return (
    <Stepper>
      <Stepper.Step 
        title="Completed Step" 
        description="This step is done"
        state="completed" 
      />
      <Stepper.Step 
        title="Current Step" 
        description="Working on this"
        state="incomplete"
        isActive={true}
      />
      <Stepper.Step 
        title="Warning Step" 
        description="Needs attention"
        state="warning" 
      />
      <Stepper.Step 
        title="Error Step" 
        description="Something went wrong"
        state="error" 
      />
      <Stepper.Step 
        title="Disabled Step" 
        description="Not available yet"
        state="disabled" 
      />
    </Stepper>
  );
};
```

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

### Package Compilation Output

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/card/README.md

Illustrates the directory structure and output files generated after building the package using tsup.

```bash
card
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...

```

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

### Basic Tooltip Usage in React

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/tooltip/README.md

Demonstrates how to import and use the Tooltip component in a React application. It shows nesting Tooltip.Content within the main Tooltip component.

```jsx
import { Tooltip } from './Tooltip';

export const App = () => {
  return (
    <Tooltip>
      Hover over me
      <Tooltip.Content direction='top' background='full'>
        Some content
      </Tooltip.Content>
    </Tooltip>
  );
};

```

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

### Card Component Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/card/README.md

Demonstrates how to import and use the Card component along with its nested Title and Detail components.

```APIDOC
## Card Component Usage

### Description
This example shows how to import and render the `Card` component from the `@dt-dds/react` library. It includes basic usage with `Card.Title` and `Card.Detail`.

### Code
```jsx
import { Card } from '@dt-dds/react';

export const App = () => {
  return (
    <Card>
      <Card.Title>Some Title</Card.Title>
      <Card.Detail>Some Description</Card.Detail>
    </Card>
  );
};
```
```

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

### Build Process Compilation Output

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/label-field/README.md

Shows the directory structure and output files generated after running the build command. This includes type definitions and different module formats.

```bash
tag
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

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

### Basic Toggle Usage in React

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/toggle/README.md

Demonstrates how to import and use the Toggle component in a React application. It shows state management for the toggle's checked status and handling click events.

```jsx
import { ChangeEvent, useState } from 'react';
import { Toggle } from '@dt-dds/react';

export const App = () => {
  const [checked, setChecked] = React.useState(true);

  const handleClick = () => {
    setIsChecked((prev) => !prev);
  };

  return <Toggle isChecked={checked} onClick={handleClick} />;
};
```

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

### Compiled Output Structure

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/icon-button/README.md

This illustrates the directory structure and file types generated after running the build command, including type definitions and different module formats.

```bash
iconButton
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...

```

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

### Basic Radio Group Usage

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/radio/README.md

Demonstrates how to import and use the `Radio` and `RadioGroup` components to create a selectable list. Ensure `RadioGroup` has a `name` prop for proper group functionality.

```jsx
import { Radio, RadioGroup } from '@dt-dds/react';

export const App = () => {
  return (
    <RadioGroup onChange={onChange} name='group-name'>
      <Radio value='1' label='Label 1' isDefaultChecked={true} />
      <Radio value='2' label='Label 2' isDisabled={true} />
    </RadioGroup>
  );
};
```

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

### Divider Build Output Structure

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/divider/README.md

Illustrates the directory structure and output files generated after building the package using tsup. Includes type definitions and module formats.

```bash
divider
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

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

### Test Command

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/icon-button/README.md

Execute all unit tests within the package to ensure code correctness.

```bash
yarn test
```

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

### Basic Modal Usage with useModal Hook

Source: https://github.com/daimlertruck/dt-dds/blob/main/packages/react-packages/modal/README.md

Demonstrates how to use the `Modal`, `Overlay`, and `useModal` hook to create and manage a modal dialog. The `useModal` hook handles the open/close state, and the `Overlay` component wraps the `Modal` to control its visibility and background.

```jsx
import {
  Button,
  Modal,
  Overlay,
  TextField,
  useModal,
} from '@dt-dds/react';

export const App = () => {
  const { isModalOpen, toggleModal } = useModal(); // Handles modal open state

  const handleAction = () => null; // Main button action

  return (
    <>
      <button onClick={toggleModal}>Click me</button>

      <Overlay isOpen={isModalOpen}>
        <Modal onClickOutside={toggleModal}>
          <Modal.Header onClose={toggleModal}>Title</Modal.Header>
          <Modal.Content>
            <p>Some information here</p>
          </Modal.Content>
          <Modal.Footer>
            <Button
              variant='outlined'
              color='neutral'
              onClick={toggleModal}
              dataTestId='cancel'
            >
              Cancel
            </Button>
            <Button onClick={handleAction} dataTestId='action' />Action</Button>
          </Modal.Footer>
        </Modal>
      </Overlay>
    </>
  );
};
```