aidos-ui 4.0.4 → 4.0.5

package/src/pages/List.mdx

@@ -1,262 +0,0 @@
-import { List } from "../List";
-import { ListItem } from "../ListItem";
-import { ListButtonItem } from "../ListButtonItem";
-import { ListLinkItem } from "../ListLinkItem";
-import { ListDivider } from "../ListDivider";
-import { Icon } from "../Icon";
-import { Sublist } from "../Sublist";
-import { Row } from "../Row";
-
-# List
-
-A container for displaying items in a vertical list. Lists support multiple item types, keyboard navigation, and can be styled with different visual treatments.
-
----
-
-## Props
-
-### List
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `ariaLabel` | `string` | Yes | - | Accessible label for the list |
-| `bare` | `boolean` | No | `false` | Minimal styling without background/borders |
-| `carded` | `boolean` | No | `true` | Rounded corners with full border |
-| `navigation` | `boolean` | No | `true` | Enable arrow key navigation |
-| `autofocus` | `boolean` | No | `false` | Focus first item on mount |
-
-### List item components
-
-- **`ListItem`** - Static, non-interactive item
-- **`ListButtonItem`** - Clickable button item
-- **`ListLinkItem`** - Navigation link item
-- **`ListDivider`** - Visual separator
-- **`ListHeaderItem`** - Section header
-- **`Sublist`** - Collapsible group of items
-
-All item components accept `TextPairing` props (`headline`, `body`, `addOn`, etc.).
-
----
-
-## Basic list
-
-The default list has a bordered card appearance with rounded corners.
-
-<List ariaLabel="Settings">
-  <ListItem
-    headline="Notifications"
-    body="Manage your notification preferences"
-    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
-  />
-  <ListButtonItem
-    color="secondary"
-    headline="Account"
-    body="Update your profile information"
-    addOn={<Icon color="primary" icon="fa-user" size="medium" />}
-    onClick={() => {}}
-  />
-  <ListLinkItem
-    href="/"
-    color="secondary"
-    headline="Help Center"
-    addOn={<Icon color="primary" icon="fa-question-circle" size="medium" />}
-    withDivider={false}
-  />
-</List>
-
-```js
-<List ariaLabel="Settings">
-  <ListItem
-    headline="Notifications"
-    body="Manage your notification preferences"
-    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
-  />
-  <ListButtonItem
-    color="secondary"
-    headline="Account"
-    onClick={() => {}}
-  />
-  <ListLinkItem
-    href="/help"
-    color="secondary"
-    headline="Help Center"
-    withDivider={false}
-  />
-</List>
-```
-
----
-
-## Edge-to-edge list
-
-Set `carded={false}` to remove rounded corners, useful for full-width layouts.
-
-<List carded={false} ariaLabel="Menu">
-  <ListButtonItem color="secondary" headline="Profile" onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Settings" onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Logout" onClick={() => {}} withDivider={false} />
-</List>
-
-```js
-<List carded={false} ariaLabel="Menu">
-  <ListButtonItem color="secondary" headline="Profile" onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Settings" onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Logout" onClick={() => {}} withDivider={false} />
-</List>
-```
-
----
-
-## Bare list
-
-The `bare` variant removes background and borders for a minimal appearance.
-
-<List bare ariaLabel="Navigation">
-  <ListButtonItem bare color="secondary" headline="Home" addOn={<Icon color="primary" icon="fa-home" size="medium" />} onClick={() => {}} />
-  <ListButtonItem bare color="secondary" headline="Projects" addOn={<Icon color="primary" icon="fa-folder" size="medium" />} onClick={() => {}} />
-  <ListLinkItem bare href="/" color="secondary" headline="Settings" selected addOn={<Icon color="highlight" icon="fa-cog" size="medium" />} withDivider={false} />
-</List>
-
-```js
-<List bare ariaLabel="Navigation">
-  <ListButtonItem
-    bare
-    color="secondary"
-    headline="Home"
-    addOn={<Icon color="primary" icon="fa-home" size="medium" />}
-    onClick={() => {}}
-  />
-  <ListLinkItem
-    bare
-    href="/settings"
-    color="secondary"
-    headline="Settings"
-    selected
-    withDivider={false}
-  />
-</List>
-```
-
----
-
-## Item colors
-
-ListButtonItem and ListLinkItem support semantic colors:
-
-<List ariaLabel="Actions">
-  <ListButtonItem color="positive" headline="Create new" addOn={<Icon color="highlight" icon="fa-plus" size="medium" />} onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Edit item" addOn={<Icon color="primary" icon="fa-pencil" size="medium" />} onClick={() => {}} />
-  <ListButtonItem color="negative" headline="Delete item" addOn={<Icon color="negative" icon="fa-trash" size="medium" />} onClick={() => {}} withDivider={false} />
-</List>
-
-```js
-<ListButtonItem color="positive" headline="Create" onClick={() => {}} />
-<ListButtonItem color="secondary" headline="Edit" onClick={() => {}} />
-<ListButtonItem color="negative" headline="Delete" onClick={() => {}} />
-```
-
----
-
-## Selected state
-
-Link items support a `selected` prop to indicate the current selection:
-
-<List bare ariaLabel="Pages">
-  <ListLinkItem bare href="/" color="secondary" headline="Dashboard" />
-  <ListLinkItem bare href="/" color="secondary" headline="Analytics" selected />
-  <ListLinkItem bare href="/" color="secondary" headline="Reports" withDivider={false} />
-</List>
-
-```js
-<ListLinkItem
-  bare
-  href="/analytics"
-  headline="Analytics"
-  selected={currentPage === "analytics"}
-/>
-```
-
----
-
-## Sublist
-
-Group related items with collapsible sections:
-
-<List bare ariaLabel="Documentation">
-  <Sublist label="Getting Started">
-    <ListItem headline="Installation" />
-    <ListItem headline="Quick Start" />
-    <ListItem headline="Configuration" />
-  </Sublist>
-  <Sublist label="Components">
-    <ListItem headline="Button" />
-    <ListItem headline="Input" />
-    <ListItem headline="List" />
-  </Sublist>
-</List>
-
-```js
-<List bare ariaLabel="Documentation">
-  <Sublist label="Getting Started">
-    <ListItem headline="Installation" />
-    <ListItem headline="Quick Start" />
-  </Sublist>
-  <Sublist label="Components">
-    <ListItem headline="Button" />
-    <ListItem headline="Input" />
-  </Sublist>
-</List>
-```
-
----
-
-## Keyboard navigation
-
-Lists support arrow key navigation by default (following [WAI-ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)):
-
-- **Arrow Up/Down** - Move between items
-- **Enter/Space** - Activate the focused item
-- **Home/End** - Jump to first/last item
-
-<List ariaLabel="Keyboard demo" navigation={true}>
-  <ListButtonItem color="secondary" headline="First item (use arrow keys)" onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Second item" onClick={() => {}} />
-  <ListButtonItem color="secondary" headline="Third item" onClick={() => {}} withDivider={false} />
-</List>
-
-Disable navigation with `navigation={false}` if items have their own focus management.
-
-```js
-// Keyboard navigation enabled (default)
-<List ariaLabel="Menu" navigation={true}>
-  ...
-</List>
-
-// Keyboard navigation disabled
-<List ariaLabel="Form fields" navigation={false}>
-  ...
-</List>
-```
-
----
-
-## Dividers
-
-List items include dividers by default. Remove with `withDivider={false}`:
-
-```js
-<List ariaLabel="Items">
-  <ListItem headline="With divider" />
-  <ListItem headline="With divider" />
-  <ListItem headline="No divider" withDivider={false} />
-</List>
-```
-
----
-
-## Accessibility
-
-- Uses `role="grid"` with `aria-label` for screen readers
-- Keyboard navigation follows WAI-ARIA grid pattern
-- Focus management with arrow keys, Home, and End
-- Proper focus indicators on keyboard navigation

package/src/pages/ListHeader.mdx

@@ -1,220 +0,0 @@
-import { List } from "../List";
-import { Icon } from "../Icon";
-import { ListItem } from "../ListItem";
-import { ListHeaderItem } from "../ListHeaderItem";
-import { Column } from "../Column";
-import { Span } from "../Text";
-
-# ListHeaderItem
-
-A specialized list item for section headers. Use to organize and visually separate groups within a list.
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `headline` | `string` | Required | Header text |
-| `body` | `string` | - | Optional secondary text |
-| `highlight` | `boolean` | `false` | Use accent background color |
-| `addOn` | `ReactNode` | - | Icon or element to display |
-| `addOnPosition` | `Position` | - | Position of the add-on |
-| `withDivider` | `boolean` | - | Show divider below header |
-
----
-
-## Basic usage
-
-<List ariaLabel="example">
-  <ListHeaderItem headline="Section A" />
-  <ListItem headline="Item 1" body="Description" />
-  <ListItem headline="Item 2" body="Description" />
-  <ListHeaderItem headline="Section B" />
-  <ListItem headline="Item 3" body="Description" />
-  <ListItem withDivider={false} headline="Item 4" body="Description" />
-</List>
-
-```js
-<List ariaLabel="example">
-  <ListHeaderItem headline="Section A" />
-  <ListItem headline="Item 1" body="Description" />
-  <ListItem headline="Item 2" body="Description" />
-  <ListHeaderItem headline="Section B" />
-  <ListItem headline="Item 3" body="Description" />
-  <ListItem headline="Item 4" body="Description" />
-</List>
-```
-
----
-
-## Styles
-
-### Standard headers
-
-<List ariaLabel="example">
-  <ListHeaderItem headline="Header" />
-  <ListItem headline="Headline 1" body="Body 1" />
-  <ListHeaderItem
-    headline="Header"
-    addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
-  />
-  <ListItem headline="Headline 2" body="Body 2" />
-  <ListHeaderItem highlight headline="Header" />
-  <ListItem headline="Headline 3" body="Body 3" />
-  <ListHeaderItem
-    highlight
-    headline="Header"
-    addOn={<Icon icon="fa-chain-broken" size="medium" color="light" />}
-  />
-  <ListItem withDivider={false} headline="Headline 4" body="Body 3" />
-</List>
-
-```js
-// Plain header
-<ListHeaderItem headline="Header" />
-
-// With icon
-<ListHeaderItem
-  headline="Header"
-  addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
-/>
-
-// Highlighted (accent background)
-<ListHeaderItem highlight headline="Header" />
-
-// Highlighted with icon
-<ListHeaderItem
-  highlight
-  headline="Header"
-  addOn={<Icon icon="fa-chain-broken" size="medium" color="light" />}
-/>
-```
-
----
-
-## Bare list headers
-
-In bare lists, headers have no background:
-
-<List bare ariaLabel="example">
-  <ListHeaderItem headline="Header" />
-  <ListItem headline="Headline 1" body="Body 1" />
-  <ListHeaderItem
-    headline="Header"
-    addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
-  />
-  <ListItem headline="Headline 2" body="Body 2" />
-  <ListHeaderItem highlight headline="Header" />
-  <ListItem headline="Headline 3" body="Body 3" />
-  <ListHeaderItem
-    highlight
-    headline="Header"
-    addOn={<Icon icon="fa-chain-broken" size="medium" color="highlight" />}
-  />
-  <ListItem withDivider={false} headline="Headline 4" body="Body 3" />
-</List>
-
-```js
-<List bare ariaLabel="example">
-  <ListHeaderItem headline="Header" />
-  <ListItem headline="Item" body="Description" />
-
-  {/* Highlighted in bare mode uses highlight text color instead */}
-  <ListHeaderItem highlight headline="Header" />
-  <ListItem headline="Item" body="Description" />
-</List>
-```
-
----
-
-## With icons
-
-Add context with icons:
-
-```js
-// Category header
-<ListHeaderItem
-  headline="Documents"
-  addOn={<Icon icon="fa-folder" size="medium" color="primary" />}
-/>
-
-// Status header
-<ListHeaderItem
-  headline="Pending"
-  addOn={<Icon icon="fa-clock-o" size="medium" color="warning" />}
-/>
-
-// Alert header (highlighted)
-<ListHeaderItem
-  highlight
-  headline="Urgent"
-  addOn={<Icon icon="fa-exclamation" size="medium" color="light" />}
-/>
-```
-
----
-
-## Common patterns
-
-### Grouped settings
-
-```js
-<List ariaLabel="Settings">
-  <ListHeaderItem headline="Account" />
-  <ListButtonItem headline="Profile" onClick={() => {}} />
-  <ListButtonItem headline="Password" onClick={() => {}} />
-
-  <ListHeaderItem headline="Preferences" />
-  <ListButtonItem headline="Theme" onClick={() => {}} />
-  <ListButtonItem headline="Language" onClick={() => {}} />
-
-  <ListHeaderItem headline="Danger Zone" highlight />
-  <ListButtonItem headline="Delete Account" color="negative" onClick={() => {}} />
-</List>
-```
-
-### Alphabetical grouping
-
-```js
-<List ariaLabel="Contacts">
-  <ListHeaderItem headline="A" />
-  <ListItem headline="Alice Anderson" />
-  <ListItem headline="Andrew Adams" />
-
-  <ListHeaderItem headline="B" />
-  <ListItem headline="Bob Brown" />
-  <ListItem headline="Betty Baker" />
-</List>
-```
-
-### Category browser
-
-```js
-<List ariaLabel="Categories">
-  <ListHeaderItem
-    headline="Popular"
-    addOn={<Icon icon="fa-fire" color="warning" />}
-  />
-  <ListButtonItem headline="Technology" onClick={() => {}} />
-  <ListButtonItem headline="Design" onClick={() => {}} />
-
-  <ListHeaderItem
-    headline="Recent"
-    addOn={<Icon icon="fa-clock-o" color="secondary" />}
-  />
-  <ListButtonItem headline="Science" onClick={() => {}} />
-  <ListButtonItem headline="Art" onClick={() => {}} />
-</List>
-```
-
----
-
-## Styling behavior
-
-| Context | Standard Header | Highlighted Header |
-|---------|----------------|-------------------|
-| Regular list | Gray background | Accent background |
-| Bare list | No background | Accent text color |
-
-The component automatically adapts based on the parent list's `bare` prop.

package/src/pages/Popover.mdx

@@ -1,223 +0,0 @@
-import { Popover, PopoverTrigger } from "../Popover";
-import { Icon } from "../Icon";
-import { Button } from "../Button";
-import { List } from "../List";
-import { ListButtonItem } from "../ListButtonItem";
-import { Row } from "../Row";
-import { Column } from "../Column";
-
-# Popover
-
-A floating panel that appears next to a trigger element. Unlike tooltips, popovers can contain interactive content like menus, forms, or action lists.
-
----
-
-## Props
-
-### PopoverTrigger
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `PopoverComponent` | `(props: { close: () => void } & Input) => JSX.Element` | Yes | Component to render in the popover |
-| `children` | `(props: { toggle: (input: Input) => void }) => JSX.Element` | Yes | Render function for the trigger element |
-| `jss` | `JSS` | No | Custom styles for the wrapper |
-| `jssDialog` | `JSS` | No | Custom styles for the popover dialog |
-| `grow` | `boolean` | No | Allow wrapper to grow |
-| `shrink` | `boolean` | No | Allow wrapper to shrink |
-| `tag` | `keyof HTMLElementTagNameMap` | No | HTML tag for the wrapper |
-
-### Popover
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `children` | `ReactNode` | Yes | Popover content |
-| `close` | `() => void` | Yes | Function to close the popover |
-
----
-
-## Basic usage
-
-Use `PopoverTrigger` to create a button that opens a popover with interactive options:
-
-<Row padding="large">
-  <PopoverTrigger
-    PopoverComponent={({ close }) => (
-      <Popover close={close}>
-        <List bare ariaLabel="Options">
-          <ListButtonItem bare headline="Edit" onClick={() => close()} color="secondary" />
-          <ListButtonItem bare headline="Duplicate" onClick={() => close()} color="secondary" />
-          <ListButtonItem bare headline="Delete" onClick={() => close()} color="negative" withDivider={false} />
-        </List>
-      </Popover>
-    )}
-  >
-    {({ toggle }) => (
-      <Button color="positive" onClick={() => toggle(undefined)}>
-        Show Options
-      </Button>
-    )}
-  </PopoverTrigger>
-</Row>
-
-```js
-<PopoverTrigger
-  PopoverComponent={({ close }) => (
-    <Popover close={close}>
-      <List bare ariaLabel="Options">
-        <ListButtonItem
-          bare
-          headline="Edit"
-          onClick={() => close()}
-          color="secondary"
-        />
-        <ListButtonItem
-          bare
-          headline="Duplicate"
-          onClick={() => close()}
-          color="secondary"
-        />
-        <ListButtonItem
-          bare
-          headline="Delete"
-          onClick={() => close()}
-          color="negative"
-          withDivider={false}
-        />
-      </List>
-    </Popover>
-  )}
->
-  {({ toggle }) => (
-    <Button color="positive" onClick={() => toggle(undefined)}>
-      Show Options
-    </Button>
-  )}
-</PopoverTrigger>
-```
-
----
-
-## Passing data to popover
-
-Use TypeScript generics to pass data when opening the popover:
-
-```js
-interface Item {
-  id: string;
-  name: string;
-}
-
-<PopoverTrigger<Item>
-  PopoverComponent={({ close, id, name }) => (
-    <Popover close={close}>
-      <Column padding="medium" gap="small">
-        <P>Edit: {name}</P>
-        <Button color="positive" onClick={() => {
-          saveItem(id);
-          close();
-        }}>
-          Save
-        </Button>
-      </Column>
-    </Popover>
-  )}
->
-  {({ toggle }) => (
-    <Button
-      color="primary"
-      onClick={() => toggle({ id: "123", name: "My Item" })}
-    >
-      Edit Item
-    </Button>
-  )}
-</PopoverTrigger>
-```
-
----
-
-## Behavior
-
-- **Toggle on click**: Clicking the trigger opens/closes the popover
-- **Focus management**: Focus moves into the popover when opened
-- **Focus trap**: Tab cycles through focusable elements within the popover
-- **Escape to close**: Pressing Escape closes the popover
-- **Outside click**: Clicking outside closes the popover
-- **Focus restoration**: Focus returns to the trigger when closed
-
----
-
-## Common patterns
-
-### Dropdown menu
-
-```js
-<PopoverTrigger
-  PopoverComponent={({ close }) => (
-    <Popover close={close}>
-      <List bare ariaLabel="Menu">
-        <ListButtonItem bare headline="Profile" onClick={() => close()} />
-        <ListButtonItem bare headline="Settings" onClick={() => close()} />
-        <ListButtonItem bare headline="Logout" onClick={() => close()} color="negative" />
-      </List>
-    </Popover>
-  )}
->
-  {({ toggle }) => (
-    <IconButton
-      bare
-      icon="fa-ellipsis-v"
-      size="medium"
-      color="secondary"
-      onClick={() => toggle(undefined)}
-    />
-  )}
-</PopoverTrigger>
-```
-
-### Action confirmation
-
-```js
-<PopoverTrigger
-  PopoverComponent={({ close }) => (
-    <Popover close={close}>
-      <Column padding="medium" gap="medium">
-        <P>Are you sure you want to delete?</P>
-        <Row gap="small" justify="end">
-          <Button bare color="primary" onClick={close}>Cancel</Button>
-          <Button color="negative" onClick={() => {
-            deleteItem();
-            close();
-          }}>Delete</Button>
-        </Row>
-      </Column>
-    </Popover>
-  )}
->
-  {({ toggle }) => (
-    <Button color="negative" onClick={() => toggle(undefined)}>
-      Delete
-    </Button>
-  )}
-</PopoverTrigger>
-```
-
----
-
-## Accessibility
-
-- Uses `<dialog>` element with `.show()` for proper popover behavior
-- Focus is trapped within the popover
-- Escape key closes the popover
-- Focus returns to the trigger when closed
-- Tab navigation cycles through focusable elements
-
----
-
-## Popover vs Dialog vs Tooltip
-
-| Popover | Dialog | Tooltip |
-|---------|--------|---------|
-| Positioned near trigger | Centered on screen | Positioned near trigger |
-| Light interactions | Complex workflows | Text only |
-| Partial page blocking | Full page blocking | No blocking |
-| Menus, quick actions | Forms, confirmations | Hints, labels |