@db-ux/react-core-components 3.1.17 → 3.1.18

package/README.md

@@ -59,6 +59,17 @@ import { DBButton } from '@db-ux/react-core-components';
 ...
 ```
 
+## Documentation for AI Agents
+
+We provide a documentation for every component in the DB UX Design System via `docs` folder.
+To consume those documentation for AI Agents (currently GitHub Copilot) the best way is to copy the `docs` folder into your project.
+
+We provide a [CLI tool (`@db-ux/agent-cli`)](https://www.npmjs.com/package/@db-ux/agent-cli) to do this automatically, which you can run with:
+
+```shell
+npx @db-ux/agent-cli
+```
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.

package/agent/Accordion.md

@@ -0,0 +1,47 @@
+
+
+# Accordion Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBAccordion } from "@db-ux/react-react-core-components";
+
+function Accordion(props: any) {
+  function getItems() {
+    return [
+      {
+        text: "Item 1 Content",
+        headlinePlain: "Item 1",
+        disabled: false,
+      },
+      {
+        text: "Item 2 Content",
+        headlinePlain: "Item 2",
+        disabled: true,
+      },
+    ];
+  }
+
+  return (
+    <>
+      <h1>DBAccordion Documentation Examples</h1>
+      <h2>1. Default Accordion</h2>
+      <DBAccordion>Default Accordion</DBAccordion>
+      <h2>2. Behavior Variants</h2>
+      <DBAccordion behavior="multiple">Multiple Behavior</DBAccordion>
+      <DBAccordion behavior="single">Single Behavior</DBAccordion>
+      <h2>3. Initial Open Index</h2>
+      <DBAccordion initOpenIndex={[0, 1]}>Initial Open Index</DBAccordion>
+      <h2>4. Items</h2>
+      <DBAccordion items={getItems()}>Accordion with Items</DBAccordion>
+      <h2>5. Name Attribute</h2>
+      <DBAccordion name="accordion-name">With Name</DBAccordion>
+      <h2>6. Variant Types</h2>
+      <DBAccordion variant="divider">Divider Variant</DBAccordion>
+      <DBAccordion variant="card">Card Variant</DBAccordion>
+    </>
+  );
+}
+
+export default Accordion;
+```

package/agent/AccordionItem.md

@@ -0,0 +1,36 @@
+
+
+# AccordionItem Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBAccordionItem } from "@db-ux/react-react-core-components";
+
+function AccordionItem(props: any) {
+  return (
+    <>
+      <h1>DBAccordionItem Documentation Examples</h1>
+      <h2>1. Default Accordion Item</h2>
+      <DBAccordionItem>Default Accordion Item</DBAccordionItem>
+      <h2>2. Initial State</h2>
+      <DBAccordionItem defaultOpen>Initially Open</DBAccordionItem>
+      <DBAccordionItem defaultOpen={false}>Initially Closed</DBAccordionItem>
+      <h2>3. Disabled State</h2>
+      <DBAccordionItem disabled>Disabled Accordion Item</DBAccordionItem>
+      <h2>4. Headline Variants</h2>
+      <DBAccordionItem headline={<strong>Custom Headline</strong>}>
+        With Custom Headline
+      </DBAccordionItem>
+      <DBAccordionItem headlinePlain="Plain Headline">
+        With Plain Headline
+      </DBAccordionItem>
+      <h2>5. Toggle Event</h2>
+      <DBAccordionItem onToggle={(open) => console.log("Toggled:", open)}>
+        With Toggle Event
+      </DBAccordionItem>
+    </>
+  );
+}
+
+export default AccordionItem;
+```

package/agent/Badge.md

@@ -0,0 +1,43 @@
+
+
+# Badge Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBBadge } from "@db-ux/react-react-core-components";
+
+function Badge(props: any) {
+  return (
+    <>
+      <h1>DBBadge Documentation Examples</h1>
+      <h2>1. Default Badge</h2>
+      <DBBadge>Default Badge</DBBadge>
+      <h2>2. Semantic Variants</h2>
+      <DBBadge semantic="adaptive">Adaptive</DBBadge>
+      <DBBadge semantic="neutral">Neutral</DBBadge>
+      <DBBadge semantic="critical">Critical</DBBadge>
+      <DBBadge semantic="informational">Informational</DBBadge>
+      <DBBadge semantic="warning">Warning</DBBadge>
+      <DBBadge semantic="successful">Successful</DBBadge>
+      <h2>3. Sizes</h2>
+      <DBBadge size="small">Small</DBBadge>
+      <DBBadge size="medium">Medium</DBBadge>
+      <h2>4. Emphasis Variants</h2>
+      <DBBadge emphasis="weak">Weak Emphasis</DBBadge>
+      <DBBadge emphasis="strong">Strong Emphasis</DBBadge>
+      <h2>5. Placement Variants</h2>
+      <DBBadge placement="inline">Inline</DBBadge>
+      <DBBadge placement="corner-top-left">Corner Top Left</DBBadge>
+      <DBBadge placement="corner-top-right">Corner Top Right</DBBadge>
+      <DBBadge placement="corner-center-left">Corner Center Left</DBBadge>
+      <DBBadge placement="corner-center-right">Corner Center Right</DBBadge>
+      <DBBadge placement="corner-bottom-left">Corner Bottom Left</DBBadge>
+      <DBBadge placement="corner-bottom-right">Corner Bottom Right</DBBadge>
+      <h2>6. Custom Label</h2>
+      <DBBadge label="Custom Label">With Custom Label</DBBadge>
+    </>
+  );
+}
+
+export default Badge;
+```

package/agent/Brand.md

@@ -0,0 +1,24 @@
+
+
+# Brand Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBBrand } from "@db-ux/react-react-core-components";
+
+function Brand(props: any) {
+  return (
+    <>
+      <h1>DBBrand Documentation Examples</h1>
+      <h2>1. Default Brand</h2>
+      <DBBrand>Default Brand</DBBrand>
+      <h2>2. Icon Visibility</h2>
+      <DBBrand showIcon={false}>Icon Hidden</DBBrand>
+      <h2>3. Custom Text</h2>
+      <DBBrand text="Custom Brand Text">With Custom Text</DBBrand>
+    </>
+  );
+}
+
+export default Brand;
+```

package/agent/Button.md

@@ -0,0 +1,60 @@
+
+
+# Button Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBButton } from "@db-ux/react-react-core-components";
+
+function Button(props: any) {
+  return (
+    <>
+      <h1>DBButton Documentation Examples</h1>
+      <h2>1. Default Button</h2>
+      <DBButton>Button</DBButton>
+      <h2>2. Variants</h2>
+      <DBButton variant="filled">Filled</DBButton>
+      <DBButton variant="outlined">Outlined</DBButton>
+      <DBButton variant="ghost">Ghost</DBButton>
+      <DBButton variant="brand">Brand</DBButton>
+      <h2>3. Sizes</h2>
+      <DBButton size="small">Small</DBButton>
+      <DBButton size="medium">Medium</DBButton>
+      <h2>4. Icon Only</h2>
+      <DBButton icon="check" noText />
+      <h2>5. Disabled</h2>
+      <DBButton disabled>Disabled</DBButton>
+      <h2>6. Button Types</h2>
+      <DBButton type="button">Type=button</DBButton>
+      <DBButton type="submit">Type=submit</DBButton>
+      <DBButton type="reset">Type=reset</DBButton>
+      <h2>7. Form Association</h2>
+      <form id="example-form">
+        <input name="exampleInput" placeholder="Example input" />
+      </form>
+      <DBButton form="example-form" type="submit">
+        Submit Form
+      </DBButton>
+      <h2>8. Name &amp; Value</h2>
+      <DBButton name="testName" value="testValue">
+        Name/Value
+      </DBButton>
+      <h2>9. Width</h2>
+      <DBButton width="full">Full width</DBButton>
+      <DBButton width="auto">Auto width</DBButton>
+      <h2>10. Icon Visibility</h2>
+      <DBButton icon="check" showIcon={false}>
+        Icon Hidden
+      </DBButton>
+      <h2>11. Custom Class</h2>
+      <DBButton className="my-custom-class">Custom Class</DBButton>
+      <h2>12. Click Event</h2>
+      <DBButton onClick={(event) => alert("Button clicked!")}>
+        Click Me
+      </DBButton>
+    </>
+  );
+}
+
+export default Button;
+```

package/agent/Card.md

@@ -0,0 +1,34 @@
+
+
+# Card Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBCard } from "@db-ux/react-react-core-components";
+
+function Card(props: any) {
+  return (
+    <>
+      <h1>DBCard Documentation Examples</h1>
+      <h2>1. Default Card</h2>
+      <DBCard>Default Card</DBCard>
+      <h2>2. Behaviors</h2>
+      <DBCard behavior="static">Static</DBCard>
+      <DBCard behavior="interactive">Interactive</DBCard>
+      <h2>3. Elevation Levels</h2>
+      <DBCard elevationLevel="1">Elevation Level 1</DBCard>
+      <DBCard elevationLevel="2">Elevation Level 2</DBCard>
+      <DBCard elevationLevel="3">Elevation Level 3</DBCard>
+      <h2>4. Custom Class</h2>
+      <DBCard className="my-custom-class">Custom Class</DBCard>
+      <h2>5. Spacing</h2>
+      <DBCard spacing="medium">Medium Spacing</DBCard>
+      <DBCard spacing="small">Small Spacing</DBCard>
+      <DBCard spacing="large">Large Spacing</DBCard>
+      <DBCard spacing="none">No Spacing</DBCard>
+    </>
+  );
+}
+
+export default Card;
+```

package/agent/Checkbox.md

@@ -0,0 +1,41 @@
+
+
+# Checkbox Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBCheckbox } from "@db-ux/react-react-core-components";
+
+function Checkbox(props: any) {
+  return (
+    <>
+      <h1>DBCheckbox Documentation Examples</h1>
+      <h2>1. Default Checkbox</h2>
+      <DBCheckbox label="Default Checkbox" />
+      <h2>2. Indeterminate State</h2>
+      <DBCheckbox label="Indeterminate Checkbox" indeterminate />
+      <h2>3. Sizes</h2>
+      <DBCheckbox size="small" label="Small Checkbox" />
+      <DBCheckbox size="medium" label="Medium Checkbox" />
+      <h2>4. Validation States</h2>
+      <DBCheckbox validation="valid" label="Valid Checkbox" />
+      <DBCheckbox validation="invalid" label="Invalid Checkbox" />
+      <DBCheckbox validation="no-validation" label="No Validation Checkbox" />
+      <h2>5. Disabled State</h2>
+      <DBCheckbox label="Disabled Checkbox" disabled />
+      <h2>6. Message Property Example</h2>
+      <DBCheckbox
+        label="Checkbox with Message"
+        message="This is a helper message."
+      />
+      <h2>7. Change Event Example</h2>
+      <DBCheckbox
+        label="Change Event"
+        onChange={(event) => console.log("Change event:", event.target.checked)}
+      />
+    </>
+  );
+}
+
+export default Checkbox;
+```

package/agent/CustomSelect.md

@@ -0,0 +1,81 @@
+
+
+# CustomSelect Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBCustomSelect } from "@db-ux/react-react-core-components";
+
+function CustomSelect(props: any) {
+  function getOptions() {
+    return [
+      {
+        value: "1",
+        label: "Option 1",
+        selected: false,
+      },
+      {
+        value: "2",
+        label: "Option 2",
+        disabled: true,
+      },
+      {
+        value: "3",
+        label: "Option 3",
+      },
+    ];
+  }
+
+  return (
+    <>
+      <h1>DBCustomSelect Documentation Examples</h1>
+      <h2>1. Default Custom Select</h2>
+      <DBCustomSelect label="Default Custom Select" options={getOptions()} />
+      <h2>3. Multiple Select</h2>
+      <DBCustomSelect
+        label="Multiple Custom Select"
+        multiple
+        options={getOptions()}
+      />
+      <h2>4. Disabled State</h2>
+      <DBCustomSelect
+        label="Disabled Custom Select"
+        disabled
+        options={getOptions()}
+      />
+      <h2>5. Validation States</h2>
+      <DBCustomSelect
+        validMessage="This is a valid selection"
+        validation="valid"
+        label="Valid Custom Select"
+        options={getOptions()}
+      />
+      <DBCustomSelect
+        invalidMessage="This is an invalid selection"
+        validation="invalid"
+        label="Invalid Custom Select"
+        options={getOptions()}
+      />
+      <DBCustomSelect
+        validation="no-validation"
+        label="No Validation Custom Select"
+        options={getOptions()}
+      />
+      <h2>6. Change Event Example</h2>
+      <DBCustomSelect
+        label="Change Event"
+        onChange={(event) => console.log("Change event:", event.target.value)}
+        options={getOptions()}
+      />
+      <h2>7. Placeholder Example</h2>
+      <DBCustomSelect
+        label="Custom Select with Placeholder"
+        placeholder="Select an option"
+        options={getOptions()}
+      />
+    </>
+  );
+}
+
+export default CustomSelect;
+```

package/agent/Divider.md

@@ -0,0 +1,32 @@
+
+
+# Divider Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBDivider } from "@db-ux/react-react-core-components";
+
+function Divider(props: any) {
+  return (
+    <>
+      <h1>DBDivider Documentation Examples</h1>
+      <h2>1. Default Divider</h2>
+      <DBDivider />
+      <h2>2. Margin Variants</h2>
+      <DBDivider margin="none" />
+      <DBDivider margin="_" />
+      <h2>3. Orientation Variants</h2>
+      <DBDivider variant="horizontal" />
+      <DBDivider variant="vertical" />
+      <h2>4. Emphasis Variants</h2>
+      <DBDivider emphasis="weak" />
+      <DBDivider emphasis="strong" />
+      <h2>5. Width Variants</h2>
+      <DBDivider width="full" />
+      <DBDivider width="auto" />
+    </>
+  );
+}
+
+export default Divider;
+```

package/agent/Drawer.md

@@ -0,0 +1,87 @@
+## CSS Properties
+
+| CSS Variable | Default | CSS Property | Description | Example |
+| --- | --- | --- | --- | --- |
+| `--db-drawer-max-height` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-block-size | Sets the maximum height of the drawer | — |
+| `--db-drawer-header-padding-block-end` | `#{map.get($spacing, "block")}` | padding-block-end | Controls the bottom padding inside the drawer header | — |
+| `--db-drawer-content-padding-inline` | `#{map.get($spacing, "inline")}` | padding-inline | Controls left/right padding inside the drawer content area | — |
+| `--db-drawer-max-width` | `calc(100% - #{variables.$db-spacing-fixed-xl})` | max-inline-size | Sets the maximum width of the drawer and some default values for the drawer | <pre>css - Wide drawer<br>.db-drawer-wide {<br>--db-drawer-max-width: 800px;<br>}<br>&lt;div class="db-drawer db-drawer-wide"&gt;<br>&lt;!-- wide drawer --&gt;<br>&lt;/div&gt;<br></pre> |
+
+
+# Drawer Examples (react)
+
+```tsx
+"use client";
+import * as React from "react";
+import { useState } from "react";
+import { DBButton } from "@db-ux/react-react-core-components";
+import { DBDrawer } from "@db-ux/react-react-core-components";
+
+function Drawer(props: any) {
+  const [open, setOpen] = useState<boolean>(() => false);
+
+  return (
+    <>
+      <h1>DBDrawer Documentation Examples</h1>
+      <h2>1. Default Drawer</h2>
+      <div>
+        <DBButton
+          onClick={(event) => {
+            setOpen(true);
+          }}
+        >
+          Open Me
+        </DBButton>
+        <DBDrawer
+          open={open}
+          onClose={(event) => {
+            setOpen(false);
+          }}
+          drawerHeader={<header>Optional drawer header</header>}
+        >
+          My Drawer content
+        </DBDrawer>
+      </div>
+      <h2>2. Drawer Variants</h2>
+      <div>
+        <DBButton
+          onClick={(event) => {
+            setOpen(true);
+          }}
+        >
+          Open Modal Drawer
+        </DBButton>
+        <DBDrawer
+          variant="modal"
+          open={open}
+          onClose={(event) => {
+            setOpen(false);
+          }}
+        >
+          Modal Drawer content
+        </DBDrawer>
+      </div>
+      <div>
+        <DBButton
+          onClick={(event) => {
+            setOpen(true);
+          }}
+        >
+          Open Inside Drawer
+        </DBButton>
+        <DBDrawer
+          variant="inside"
+          open={open}
+          onClose={(event) => {
+            setOpen(false);
+          }}
+        >
+          Inside Drawer content
+        </DBDrawer>
+      </div>
+    </>
+  );
+}
+
+export default Drawer;
+```

package/agent/Header.md

@@ -0,0 +1,45 @@
+
+
+# Header Examples (react)
+
+```tsx
+"use client";
+import * as React from "react";
+import { useState } from "react";
+import { DBNavigation } from "@db-ux/react-react-core-components";
+import { DBNavigationItem } from "@db-ux/react-react-core-components";
+import { DBHeader } from "@db-ux/react-react-core-components";
+
+function Header(props: any) {
+  const [drawerOpen, setDrawerOpen] = useState<boolean>(() => false);
+
+  return (
+    <>
+      <h1>DBHeader Documentation Examples</h1>
+      <h2>1. Default Header</h2>
+      <DBHeader
+        drawerOpen={drawerOpen}
+        onToggle={(open) => setDrawerOpen(open)}
+       brand={<DBBrand>My Awesome App</DBBrand>}
+ metaNavigation={<><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink></>}
+ primaryAction={<DBButton icon="magnifying_glass" variant="ghost" noText>Search</DBButton>}
+ secondaryAction={<><DBButton icon="x_placeholder" variant="ghost" noText>Profile</DBButton><DBButton icon="alert" variant="ghost" noText>Notification</DBButton><DBButton icon="help" variant="ghost" noText>Help</DBButton></>}
+ >
+        <DBNavigation>
+          <DBNavigationItem>
+            <a href="#">Navi-Item 1</a>
+          </DBNavigationItem>
+          <DBNavigationItem icon="x_placeholder">
+            <a href="#">Navi-Item 2</a>
+          </DBNavigationItem>
+          <DBNavigationItem disabled>
+            <a href="#">Navi-Item 3</a>
+          </DBNavigationItem>
+        </DBNavigation>
+      </DBHeader>
+    </>
+  );
+}
+
+export default Header;
+```

package/agent/Icon.md

@@ -0,0 +1,31 @@
+
+
+# Icon Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBIcon } from "@db-ux/react-react-core-components";
+
+function Icon(props: any) {
+  return (
+    <>
+      <h1>DBIcon Documentation Examples</h1>
+      <h2>1. Default Icon</h2>
+      <DBIcon>Default Icon</DBIcon>
+      <h2>2. Icon Variants</h2>
+      <DBIcon icon="user">User Icon</DBIcon>
+      <DBIcon icon="settings">Settings Icon</DBIcon>
+      <h2>3. Icon Weights</h2>
+      <DBIcon weight="16">16px Icon</DBIcon>
+      <DBIcon weight="24">24px Icon</DBIcon>
+      <DBIcon weight="32">32px Icon</DBIcon>
+      <h2>4. Custom Class</h2>
+      <DBIcon className="my-custom-class">Custom Class Icon</DBIcon>
+      <h2>5. Text Content</h2>
+      <DBIcon text="Icon with Text">Icon with Text</DBIcon>
+    </>
+  );
+}
+
+export default Icon;
+```

package/agent/Infotext.md

@@ -0,0 +1,36 @@
+
+
+# Infotext Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBInfotext } from "@db-ux/react-react-core-components";
+
+function Infotext(props: any) {
+  return (
+    <>
+      <h1>DBInfotext Documentation Examples</h1>
+      <h2>1. Default Infotext</h2>
+      <DBInfotext>Default Infotext</DBInfotext>
+      <h2>2. Semantic Variants</h2>
+      <DBInfotext semantic="adaptive">Adaptive</DBInfotext>
+      <DBInfotext semantic="neutral">Neutral</DBInfotext>
+      <DBInfotext semantic="critical">Critical</DBInfotext>
+      <DBInfotext semantic="informational">Informational</DBInfotext>
+      <DBInfotext semantic="warning">Warning</DBInfotext>
+      <DBInfotext semantic="successful">Successful</DBInfotext>
+      <h2>3. Sizes</h2>
+      <DBInfotext size="small">Small</DBInfotext>
+      <DBInfotext size="medium">Medium</DBInfotext>
+      <h2>4. Icon Visibility</h2>
+      <DBInfotext icon="info" showIcon={false}>
+        Icon Hidden
+      </DBInfotext>
+      <h2>5. Custom Class</h2>
+      <DBInfotext className="my-custom-class">Custom Class</DBInfotext>
+    </>
+  );
+}
+
+export default Infotext;
+```

package/agent/Input.md

@@ -0,0 +1,50 @@
+
+
+# Input Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBInput } from "@db-ux/react-react-core-components";
+
+function Input(props: any) {
+  return (
+    <>
+      <h1>DBInput Documentation Examples</h1>
+      <h2>1. Default Input</h2>
+      <DBInput label="Enter text here" />
+      <h2>2. Input Types</h2>
+      <DBInput type="text" label="Text Input" />
+      <DBInput type="email" label="Email Input" />
+      <DBInput type="password" label="Password Input" />
+      <DBInput type="number" label="Number Input" />
+      <h2>3. Sizes</h2>
+      <DBInput size="small" label="Small Input" />
+      <DBInput size="medium" label="Medium Input" />
+      <h2>4. Icon Support</h2>
+      <DBInput icon="search" label="Search Input" />
+      <DBInput iconLeading="user" label="Leading Icon" />
+      <DBInput iconTrailing="check" label="Trailing Icon" />
+      <h2>5. Validation States</h2>
+      <DBInput validation="valid" label="Valid Input" />
+      <DBInput validation="invalid" label="Invalid Input" />
+      <DBInput validation="no-validation" label="No Validation" />
+      <h2>6. Disabled State</h2>
+      <DBInput label="Disabled Input" disabled />
+      <h2>7. Custom Class</h2>
+      <DBInput className="my-custom-class" label="Custom Class" />
+      <h2>8. Placeholder Examples</h2>
+      <DBInput placeholder="Enter text here" label="With Placeholder" />
+      <DBInput placeholder="Search here" label="Search Placeholder" />
+      <h2>9. Input Event Example</h2>
+      <DBInput
+        label="Input Event"
+        onInput={(event) => console.log("Input event:", event.target.value)}
+      />
+      <h2>10. Message Property Example</h2>
+      <DBInput label="Input with Message" message="This is a helper message." />
+    </>
+  );
+}
+
+export default Input;
+```