@db-ux/react-core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/agent/CustomSelect.md

@@ -1,81 +0,0 @@
-
-
-# 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

@@ -1,32 +0,0 @@
-
-
-# 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

@@ -1,87 +0,0 @@
-## 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

@@ -1,45 +0,0 @@
-
-
-# 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

@@ -1,31 +0,0 @@
-
-
-# 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

@@ -1,36 +0,0 @@
-
-
-# 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

@@ -1,50 +0,0 @@
-
-
-# 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;
-```

package/agent/Link.md

@@ -1,63 +0,0 @@
-
-
-# Link Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBLink } from "@db-ux/react-react-core-components";
-
-function Link(props: any) {
-  return (
-    <>
-      <h1>DBLink Documentation Examples</h1>
-      <h2>1. Default Link</h2>
-      <DBLink href="https://example.com">Default Link</DBLink>
-      <h2>2. Disabled Link</h2>
-      <DBLink href="https://example.com" disabled>
-        Disabled Link
-      </DBLink>
-      <h2>3. Target Variants</h2>
-      <DBLink href="https://example.com" target="_self">
-        Self Target
-      </DBLink>
-      <DBLink href="https://example.com" target="_blank">
-        Blank Target
-      </DBLink>
-      <h2>4. Custom Class</h2>
-      <DBLink href="https://example.com" className="my-custom-class">
-        Custom Class
-      </DBLink>
-      <h2>5. Rel Attribute</h2>
-      <DBLink href="https://example.com" rel="noopener noreferrer">
-        No Referrer
-      </DBLink>
-      <h2>6. Link Variants</h2>
-      <DBLink href="https://example.com" variant="adaptive">
-        Adaptive Variant
-      </DBLink>
-      <DBLink href="https://example.com" variant="brand">
-        Brand Variant
-      </DBLink>
-      <DBLink href="https://example.com" variant="inline">
-        Inline Variant
-      </DBLink>
-      <h2>7. Link Sizes</h2>
-      <DBLink href="https://example.com" size="medium">
-        Medium Size
-      </DBLink>
-      <DBLink href="https://example.com" size="small">
-        Small Size
-      </DBLink>
-      <h2>8. Link Content</h2>
-      <DBLink href="https://example.com" content="external">
-        External Content
-      </DBLink>
-      <DBLink href="https://example.com" content="internal">
-        Internal Content
-      </DBLink>
-    </>
-  );
-}
-
-export default Link;
-```

package/agent/Navigation.md

@@ -1,31 +0,0 @@
-
-
-# Navigation Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBNavigationItem } from "@db-ux/react-react-core-components";
-import { DBNavigation } from "@db-ux/react-react-core-components";
-
-function Navigation(props: any) {
-  return (
-    <>
-      <h1>DBNavigation Documentation Examples</h1>
-      <h2>1. Default Navigation</h2>
-      <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>
-    </>
-  );
-}
-
-export default Navigation;
-```

package/agent/NavigationItem.md

@@ -1,34 +0,0 @@
-
-
-# NavigationItem Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBNavigationItem } from "@db-ux/react-react-core-components";
-
-function NavigationItem(props: any) {
-  return (
-    <>
-      <h1>DBNavigationItem Documentation Examples</h1>
-      <h2>1. Default Navigation Item</h2>
-      <DBNavigationItem>Default Navigation Item</DBNavigationItem>
-      <h2>2. Active State</h2>
-      <DBNavigationItem active>Active Navigation Item</DBNavigationItem>
-      <h2>3. Disabled State</h2>
-      <DBNavigationItem disabled>Disabled Navigation Item</DBNavigationItem>
-      <h2>4. Sub-Navigation</h2>
-      <DBNavigationItem subNavigation={<div>Sub Navigation Content</div>}>
-        Navigation Item with Sub-Navigation
-      </DBNavigationItem>
-      <h2>5. Icon Support</h2>
-      <DBNavigationItem icon="user">Navigation Item with Icon</DBNavigationItem>
-      <h2>6. Custom Class</h2>
-      <DBNavigationItem className="custom-class">
-        Navigation Item with Custom Class
-      </DBNavigationItem>
-    </>
-  );
-}
-
-export default NavigationItem;
-```

package/agent/Notification.md

@@ -1,45 +0,0 @@
-
-
-# Notification Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBNotification } from "@db-ux/react-react-core-components";
-
-function Notification(props: any) {
-  return (
-    <>
-      <h1>DBNotification Documentation Examples</h1>
-      <h2>1. Default Notification</h2>
-      <DBNotification>Default Notification</DBNotification>
-      <h2>2. Semantic Variants</h2>
-      <DBNotification semantic="adaptive">Adaptive</DBNotification>
-      <DBNotification semantic="neutral">Neutral</DBNotification>
-      <DBNotification semantic="critical">Critical</DBNotification>
-      <DBNotification semantic="informational">Informational</DBNotification>
-      <DBNotification semantic="warning">Warning</DBNotification>
-      <DBNotification semantic="successful">Successful</DBNotification>
-      <h2>3. Variants</h2>
-      <DBNotification variant="docked">Docked</DBNotification>
-      <DBNotification variant="standalone">Standalone</DBNotification>
-      <DBNotification variant="overlay">Overlay</DBNotification>
-      <h2>4. Closeable</h2>
-      <DBNotification closeable>Closeable Notification</DBNotification>
-      <h2>5. Headline</h2>
-      <DBNotification headline="Important Update">
-        Notification with Headline
-      </DBNotification>
-      <h2>6. Timestamp</h2>
-      <DBNotification timestamp="10:30 AM">
-        Notification with Timestamp
-      </DBNotification>
-      <h2>7. Icon Support</h2>
-      <DBNotification icon="info">Notification with Icon</DBNotification>
-      <h2>8. Custom Class</h2>
-      <DBNotification className="my-custom-class">Custom Class</DBNotification>
-    </>
-  );
-}
-
-export default Notification;
-```

package/agent/Page.md

@@ -1,36 +0,0 @@
-
-
-# Page Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBPage } from "@db-ux/react-react-core-components";
-
-function Page(props: any) {
-  return (
-    <>
-      <h1>DBPage Documentation Examples</h1>
-      <h2>1. Default Page</h2>
-      <DBPage header={<DBHeader>Header Content</DBHeader>}
- >Main Page</DBPage>
-      <h2>2. Document Overflow Variants</h2>
-      <DBPage documentOverflow="hidden" header={<DBHeader>Header Content</DBHeader>}
- > Main Page with Hidden Overflow
-      </DBPage>
-      <DBPage documentOverflow="auto" header={<DBHeader>Header Content</DBHeader>}
- > Main Page with Auto Overflow
-      </DBPage>
-      <h2>3. Fade-In Effect</h2>
-      <DBPage fadeIn header={<DBHeader>Header Content</DBHeader>}
- >Main Page with Fade-In</DBPage>
-      <h2>4. Variant Examples</h2>
-      <DBPage variant="auto" header={<DBHeader>Header Content</DBHeader>}
- >Page with Auto Variant</DBPage>
-      <DBPage variant="fixed" header={<DBHeader>Header Content</DBHeader>}
- >Page with Fixed Variant</DBPage>
-    </>
-  );
-}
-
-export default Page;
-```

package/agent/Popover.md

@@ -1,55 +0,0 @@
-
-
-# Popover Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBButton } from "@db-ux/react-react-core-components";
-import { DBPopover } from "@db-ux/react-react-core-components";
-
-function Popover(props: any) {
-  return (
-    <>
-      <h1>DBPopover Documentation Examples</h1>
-      <h2>1. Default Popover</h2>
-      <DBPopover trigger={<DBButton>Hover on me to open Popover</DBButton>}>
-        Use any HTML code here like e.g. a <code>button</code>:
-        <button type="button">Test</button>
-      </DBPopover>
-      <h2>2. Placement Variants</h2>
-      <DBPopover placement="top" trigger={<DBButton>Top Placement</DBButton>}>
-        Popover with top placement
-      </DBPopover>
-      <DBPopover
-        placement="bottom"
-        trigger={<DBButton>Bottom Placement</DBButton>}
-      >
-        Popover with bottom placement
-      </DBPopover>
-      <h2>3. Delay Variants</h2>
-      <DBPopover delay="fast" trigger={<DBButton>Fast Delay</DBButton>}>
-        Popover with fast delay
-      </DBPopover>
-      <DBPopover delay="slow" trigger={<DBButton>Slow Delay</DBButton>}>
-        Popover with slow delay
-      </DBPopover>
-      <h2>4. Animation</h2>
-      <DBPopover animation trigger={<DBButton>With Animation</DBButton>}>
-        Popover with animation
-      </DBPopover>
-      <DBPopover animation={false} trigger={<DBButton>No Animation</DBButton>}>
-        Popover without animation
-      </DBPopover>
-      <h2>5. Width Variants</h2>
-      <DBPopover width="auto" trigger={<DBButton>Auto Width</DBButton>}>
-        Popover with auto width
-      </DBPopover>
-      <DBPopover width="fixed" trigger={<DBButton>Fixed Width</DBButton>}>
-        Popover with fixed width
-      </DBPopover>
-    </>
-  );
-}
-
-export default Popover;
-```

package/agent/Radio.md

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