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

package/agent/Link.md

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

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

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

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

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

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

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

package/agent/Section.md

@@ -0,0 +1,32 @@
+
+
+# Section Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBSection } from "@db-ux/react-react-core-components";
+
+function Section(props: any) {
+  return (
+    <>
+      <h1>DBSection Documentation Examples</h1>
+      <h2>1. Default Section</h2>
+      <DBSection>Default Section</DBSection>
+      <h2>2. Spacing Variants</h2>
+      <DBSection spacing="medium">Medium Spacing</DBSection>
+      <DBSection spacing="small">Small Spacing</DBSection>
+      <DBSection spacing="large">Large Spacing</DBSection>
+      <DBSection spacing="none">No Spacing</DBSection>
+      <h2>3. Container Width</h2>
+      <DBSection width="full">Full Width</DBSection>
+      <DBSection width="medium">Medium Width</DBSection>
+      <DBSection width="large">Large Width</DBSection>
+      <DBSection width="small">Small Width</DBSection>
+      <h2>4. Custom Class</h2>
+      <DBSection className="my-custom-class">Custom Class</DBSection>
+    </>
+  );
+}
+
+export default Section;
+```

package/agent/Select.md

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

package/agent/Stack.md

@@ -0,0 +1,46 @@
+
+
+# Stack Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBStack } from "@db-ux/react-react-core-components";
+
+function Stack(props: any) {
+  return (
+    <>
+      <h1>DBStack Documentation Examples</h1>
+      <h2>1. Default Stack</h2>
+      <DBStack>Default Stack</DBStack>
+      <h2>2. Variants</h2>
+      <DBStack variant="simple">Simple Variant</DBStack>
+      <DBStack variant="divider">Divider Variant</DBStack>
+      <h2>3. Directions</h2>
+      <DBStack direction="row">Row Direction</DBStack>
+      <DBStack direction="column">Column Direction</DBStack>
+      <h2>4. Alignment</h2>
+      <DBStack alignment="stretch">Stretch Alignment</DBStack>
+      <DBStack alignment="start">Start Alignment</DBStack>
+      <DBStack alignment="end">End Alignment</DBStack>
+      <DBStack alignment="center">Center Alignment</DBStack>
+      <h2>5. Justify Content</h2>
+      <DBStack justifyContent="space-between">Space Between</DBStack>
+      <DBStack justifyContent="start">Start Justify</DBStack>
+      <DBStack justifyContent="end">End Justify</DBStack>
+      <DBStack justifyContent="center">Center Justify</DBStack>
+      <h2>6. Gap Spacing</h2>
+      <DBStack gap="medium">Medium Gap</DBStack>
+      <DBStack gap="small">Small Gap</DBStack>
+      <DBStack gap="large">Large Gap</DBStack>
+      <DBStack gap="none">No Gap</DBStack>
+      <h2>7. Wrap</h2>
+      <DBStack wrap>Wrap Enabled</DBStack>
+      <DBStack wrap={false}>Wrap Disabled</DBStack>
+      <h2>8. Custom Class</h2>
+      <DBStack className="my-custom-class">Custom Class</DBStack>
+    </>
+  );
+}
+
+export default Stack;
+```

package/agent/Switch.md

@@ -0,0 +1,41 @@
+
+
+# Switch Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBSwitch } from "@db-ux/react-react-core-components";
+
+function Switch(props: any) {
+  return (
+    <>
+      <h1>DBSwitch Documentation Examples</h1>
+      <h2>1. Default Switch</h2>
+      <DBSwitch label="Default Switch" />
+      <h2>2. Visual Aid</h2>
+      <DBSwitch label="Switch with Visual Aid" visualAid />
+      <DBSwitch label="Switch without Visual Aid" visualAid={false} />
+      <h2>3. Sizes</h2>
+      <DBSwitch size="small" label="Small Switch" />
+      <DBSwitch size="medium" label="Medium Switch" />
+      <h2>4. Validation States</h2>
+      <DBSwitch validation="valid" label="Valid Switch" />
+      <DBSwitch validation="invalid" label="Invalid Switch" />
+      <DBSwitch validation="no-validation" label="No Validation Switch" />
+      <h2>5. Disabled State</h2>
+      <DBSwitch label="Disabled Switch" disabled />
+      <h2>6. Icon Support</h2>
+      <DBSwitch icon="check" label="Switch with Icon" />
+      <DBSwitch iconLeading="user" label="Switch with Leading Icon" />
+      <DBSwitch iconTrailing="arrow" label="Switch with Trailing Icon" />
+      <h2>7. Change Event Example</h2>
+      <DBSwitch
+        label="Change Event"
+        onChange={(event) => console.log("Change event:", event.target.checked)}
+      />
+    </>
+  );
+}
+
+export default Switch;
+```

package/agent/TabItem.md

@@ -0,0 +1,34 @@
+
+
+# TabItem Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBTabItem } from "@db-ux/react-react-core-components";
+
+function TabItem(props: any) {
+  return (
+    <>
+      <h1>DBTabItem Documentation Examples</h1>
+      <h2>1. Default Tab Item</h2>
+      <DBTabItem>Default Tab Item</DBTabItem>
+      <h2>2. Active State</h2>
+      <DBTabItem active>Active Tab Item</DBTabItem>
+      <h2>3. Disabled State</h2>
+      <DBTabItem disabled>Disabled Tab Item</DBTabItem>
+      <h2>4. Icon Variants</h2>
+      <DBTabItem icon="user">Tab Item with Icon</DBTabItem>
+      <DBTabItem iconLeading="arrow-left">Tab Item with Leading Icon</DBTabItem>
+      <DBTabItem iconTrailing="arrow-right">
+        Tab Item with Trailing Icon
+      </DBTabItem>
+      <h2>5. Label Property</h2>
+      <DBTabItem label="Tab Item Label">Tab Item with Label</DBTabItem>
+      <h2>6. No Text</h2>
+      <DBTabItem icon="user" noText />
+    </>
+  );
+}
+
+export default TabItem;
+```

package/agent/Tabs.md

@@ -0,0 +1,75 @@
+
+
+# Tabs Examples (react)
+
+```tsx
+import * as React from "react";
+import { DBTabItem } from "@db-ux/react-react-core-components";
+import { DBTabList } from "@db-ux/react-react-core-components";
+import { DBTabPanel } from "@db-ux/react-react-core-components";
+import { DBTabs } from "@db-ux/react-react-core-components";
+
+function Tabs(props: any) {
+  return (
+    <>
+      <h1>DBTabs Documentation Examples</h1>
+      <h2>1. Default Tabs</h2>
+      <DBTabs>
+        <DBTabList>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
+        </DBTabList>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
+      </DBTabs>
+      <h2>2. Behavior Variants</h2>
+      <DBTabs behavior="scrollbar">
+        <DBTabList>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
+        </DBTabList>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
+      </DBTabs>
+      <DBTabs behavior="arrows">
+        <DBTabList>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
+        </DBTabList>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
+      </DBTabs>
+      <h2>3. Initial Selected Index</h2>
+      <DBTabs initialSelectedIndex={1}>
+        <DBTabList>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
+        </DBTabList>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
+      </DBTabs>
+      <h2>4. Initial Selected Mode</h2>
+      <DBTabs initialSelectedMode="manually">
+        <DBTabList>
+          <DBTabItem>Tab 1</DBTabItem>
+          <DBTabItem>Tab 2</DBTabItem>
+          <DBTabItem>Tab 3</DBTabItem>
+        </DBTabList>
+        <DBTabPanel>Tab Panel 1</DBTabPanel>
+        <DBTabPanel>Tab Panel 2</DBTabPanel>
+        <DBTabPanel>Tab Panel 3</DBTabPanel>
+      </DBTabs>
+    </>
+  );
+}
+
+export default Tabs;
+```