aidos-ui 4.0.4 → 4.0.6

package/src/pages/Card.mdx

@@ -1,147 +0,0 @@
-import { Card } from "../Card";
-import { Button } from "../Button";
-import { TextInput } from "../TextInput";
-import { Column } from "../Column";
-import { Row } from "../Row";
-import { H2, H3, P, Span } from "../Text";
-import { Icon } from "../Icon";
-
-# Card
-
-A container component that groups related content with a distinct visual treatment. Cards provide elevation, background, and rounded corners to create visual hierarchy.
-
----
-
-## Props
-
-Card extends all FlexLayout props:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `padding` | `Padding` | `"large"` | Internal padding |
-| `gap` | `Gap` | `"large"` | Space between children |
-| `direction` | `"row"` \| `"column"` | `"column"` | Flex direction |
-| `align` | `Align` | - | Cross-axis alignment |
-| `justify` | `Justify` | - | Main-axis alignment |
-| `grow` | `boolean` | - | Allow card to grow |
-
----
-
-## Basic card
-
-<Card>
-  <H3>Card title</H3>
-  <P>Cards group related content together with visual distinction from the surrounding interface.</P>
-</Card>
-
-```js
-<Card>
-  <H3>Card title</H3>
-  <P>Card content goes here...</P>
-</Card>
-```
-
----
-
-## Contact form example
-
-<Card>
-  <H3>Contact Us</H3>
-  <P>Send us a message and we'll get back to you soon.</P>
-  <TextInput
-    placeholder="Your email"
-    value=""
-    type="email"
-    onValueChange={() => {}}
-  />
-  <TextInput
-    placeholder="Your message"
-    value=""
-    onValueChange={() => {}}
-  />
-  <Button color="positive" onClick={() => {}}>
-    Send Message
-  </Button>
-</Card>
-
-```js
-<Card>
-  <H3>Contact Us</H3>
-  <P>Send us a message and we'll get back to you soon.</P>
-  <TextInput
-    placeholder="Your email"
-    value={email}
-    type="email"
-    onValueChange={setEmail}
-  />
-  <TextInput
-    placeholder="Your message"
-    value={message}
-    onValueChange={setMessage}
-  />
-  <Button color="positive" onClick={handleSubmit}>
-    Send Message
-  </Button>
-</Card>
-```
-
----
-
-## Custom padding and gap
-
-<Row gap="medium">
-  <Card padding="small" gap="small">
-    <Span>Small padding</Span>
-    <Span color="secondary">Compact layout</Span>
-  </Card>
-  <Card padding="xlarge" gap="medium">
-    <Span>Large padding</Span>
-    <Span color="secondary">Spacious layout</Span>
-  </Card>
-</Row>
-
-```js
-<Card padding="small" gap="small">
-  <Span>Compact card</Span>
-</Card>
-
-<Card padding="xlarge" gap="large">
-  <Span>Spacious card</Span>
-</Card>
-```
-
----
-
-## Horizontal card
-
-Use `direction="row"` for horizontal layouts:
-
-<Card direction="row" align="center" gap="medium">
-  <Icon icon="fa-user" color="highlight" size="xlarge" />
-  <Column gap="none">
-    <Span bold>John Doe</Span>
-    <Span color="secondary" size="small">Software Engineer</Span>
-  </Column>
-</Card>
-
-```js
-<Card direction="row" align="center" gap="medium">
-  <Icon icon="fa-user" color="highlight" size="xlarge" />
-  <Column gap="none">
-    <Span bold>John Doe</Span>
-    <Span color="secondary" size="small">Software Engineer</Span>
-  </Column>
-</Card>
-```
-
----
-
-## Use cases
-
-Cards are useful for:
-
-- **Forms** - Group related inputs together
-- **Profiles** - Display user or item information
-- **Summaries** - Highlight key metrics or stats
-- **Actions** - Group related actions with context
-- **Content sections** - Separate distinct content areas

package/src/pages/Checkbox.mdx

@@ -1,131 +0,0 @@
-import { Checkbox } from "../Checkbox";
-import { StaticCheckbox } from "../StaticCheckbox";
-import { Column } from "../Column";
-import { Row } from "../Row";
-import { Span } from "../Text";
-
-# Checkbox
-
-A styled checkbox input with custom visual appearance. Built on native HTML checkbox for full accessibility support.
-
----
-
-## Props
-
-### Checkbox
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `checked` | `boolean` | Yes | - | Whether the checkbox is checked |
-| `onClick` | `() => void` | Yes | - | Called when checkbox is toggled |
-| `size` | `Size` | Yes | - | `"small"` (16px), `"medium"` (20px), `"large"` (24px) |
-
-Also accepts standard HTML input attributes.
-
-### StaticCheckbox
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `checked` | `boolean` | Yes | - | Whether the checkbox appears checked |
-| `size` | `Size` | Yes | - | `"small"`, `"medium"`, `"large"` |
-
----
-
-## Sizes
-
-<Row padding="medium" gap="xlarge" justify="center" align="center">
-  <Column gap="small" align="center">
-    <Checkbox size="small" checked={true} onClick={() => {}} />
-    <Span size="small" color="secondary">small</Span>
-  </Column>
-  <Column gap="small" align="center">
-    <Checkbox size="medium" checked={true} onClick={() => {}} />
-    <Span size="small" color="secondary">medium</Span>
-  </Column>
-  <Column gap="small" align="center">
-    <Checkbox size="large" checked={true} onClick={() => {}} />
-    <Span size="small" color="secondary">large</Span>
-  </Column>
-</Row>
-
-```js
-<Checkbox size="small" checked={checked} onClick={toggle} />
-<Checkbox size="medium" checked={checked} onClick={toggle} />
-<Checkbox size="large" checked={checked} onClick={toggle} />
-```
-
----
-
-## States
-
-<Row padding="medium" gap="xlarge" justify="center" align="center">
-  <Column gap="small" align="center">
-    <Checkbox size="medium" checked={false} onClick={() => {}} />
-    <Span size="small" color="secondary">unchecked</Span>
-  </Column>
-  <Column gap="small" align="center">
-    <Checkbox size="medium" checked={true} onClick={() => {}} />
-    <Span size="small" color="secondary">checked</Span>
-  </Column>
-</Row>
-
-```js
-const [checked, setChecked] = useState(false);
-
-<Checkbox
-  size="medium"
-  checked={checked}
-  onClick={() => setChecked(!checked)}
-/>
-```
-
----
-
-## StaticCheckbox
-
-Use `StaticCheckbox` when you need just the visual appearance without the underlying `<input>` element. Useful when the checkbox is part of a larger interactive component.
-
-<Row padding="medium" gap="large" justify="center" align="center">
-  <StaticCheckbox size="small" checked={true} />
-  <StaticCheckbox size="medium" checked={true} />
-  <StaticCheckbox size="large" checked={true} />
-</Row>
-
-```js
-// Visual only - no input element
-<StaticCheckbox size="medium" checked={isSelected} />
-
-// Used within a custom list item
-<ListButtonItem
-  headline="Option"
-  addOn={<StaticCheckbox size="medium" checked={selected} />}
-  onClick={toggleSelection}
-/>
-```
-
----
-
-## With label
-
-Checkboxes are typically paired with labels for better UX:
-
-```js
-<Row gap="small" align="center">
-  <Checkbox
-    size="medium"
-    checked={agreed}
-    onClick={() => setAgreed(!agreed)}
-  />
-  <Span>I agree to the terms and conditions</Span>
-</Row>
-```
-
----
-
-## Accessibility
-
-- Uses native `<input type="checkbox">` for full keyboard and screen reader support
-- Visual checkbox is layered over the hidden input
-- Focus ring appears on keyboard navigation
-- Press animation provides tactile feedback
-- `aria-checked` attribute reflects current state

package/src/pages/Dialog.mdx

@@ -1,197 +0,0 @@
-import { DialogTrigger } from "../examples/ExampleDialog.tsx";
-import { Button } from "../Button";
-
-# Dialog
-
-A modal dialog component that overlays the main UI. Dialogs trap focus and prevent interaction with the underlying content, following accessibility best practices.
-
----
-
-## Props
-
-### Dialog component
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `label` | `string` | Yes | Dialog title displayed in the header |
-| `children` | `ReactNode` | Yes | Dialog content |
-| `close` | `() => void` | Yes | Function to close the dialog |
-
-### useDialog hook
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `DialogComponent` | `(props: { close: () => void } & Input) => JSX.Element` | Component to render inside the dialog |
-| `options.closeOnOutsideClick` | `boolean` | Whether clicking outside closes the dialog |
-
-Returns:
-- `open(input?: Input)` - Function to open the dialog with optional input data
-- `close()` - Function to close the dialog programmatically
-
----
-
-## Basic usage
-
-Click the button to open a dialog:
-
-<DialogTrigger />
-
-```js
-import { Dialog, useDialog } from "aidos-ui";
-
-function MyDialog({ close }) {
-  return (
-    <Dialog close={close} label="Settings">
-      <Row padding="medium" align="center" justify="space-between">
-        <Span>Dark mode</Span>
-        <DarkModeToggle />
-      </Row>
-    </Dialog>
-  );
-}
-
-function App() {
-  const { open } = useDialog(
-    ({ close }) => <MyDialog close={close} />,
-    { closeOnOutsideClick: true }
-  );
-
-  return (
-    <Button color="positive" onClick={() => open()}>
-      Open Settings
-    </Button>
-  );
-}
-```
-
----
-
-## Passing data to dialog
-
-Use TypeScript generics to pass data when opening the dialog:
-
-```js
-interface UserData {
-  name: string;
-  email: string;
-}
-
-function EditUserDialog({ close, name, email }: { close: () => void } & UserData) {
-  return (
-    <Dialog close={close} label="Edit User">
-      <Column padding="medium" gap="medium">
-        <TextInput value={name} onValueChange={() => {}} />
-        <TextInput value={email} onValueChange={() => {}} />
-        <Button color="positive" onClick={close}>
-          Save
-        </Button>
-      </Column>
-    </Dialog>
-  );
-}
-
-function App() {
-  const { open } = useDialog<UserData>(
-    ({ close, name, email }) => (
-      <EditUserDialog close={close} name={name} email={email} />
-    ),
-    { closeOnOutsideClick: false }
-  );
-
-  return (
-    <Button
-      color="primary"
-      onClick={() => open({ name: "John", email: "john@example.com" })}
-    >
-      Edit User
-    </Button>
-  );
-}
-```
-
----
-
-## Dialog options
-
-### Close on outside click
-
-Control whether clicking the backdrop closes the dialog:
-
-```js
-// Dialog closes when clicking outside
-const { open } = useDialog(
-  ({ close }) => <MyDialog close={close} />,
-  { closeOnOutsideClick: true }
-);
-
-// Dialog stays open until explicitly closed
-const { open } = useDialog(
-  ({ close }) => <MyDialog close={close} />,
-  { closeOnOutsideClick: false }
-);
-```
-
----
-
-## Closing the dialog
-
-Dialogs can be closed in several ways:
-
-1. **Close button** - Built into the Dialog header
-2. **Escape key** - Native dialog behavior
-3. **Outside click** - When `closeOnOutsideClick: true`
-4. **Programmatically** - Using the `close` function
-
-```js
-function ConfirmDialog({ close, onConfirm }) {
-  return (
-    <Dialog close={close} label="Confirm">
-      <Column padding="medium" gap="medium">
-        <P>Are you sure you want to proceed?</P>
-        <Row gap="medium" justify="end">
-          <Button bare color="primary" onClick={close}>
-            Cancel
-          </Button>
-          <Button
-            color="positive"
-            onClick={() => {
-              onConfirm();
-              close();
-            }}
-          >
-            Confirm
-          </Button>
-        </Row>
-      </Column>
-    </Dialog>
-  );
-}
-```
-
----
-
-## Setup
-
-The `DialogProvider` must wrap your app to enable dialogs. This is typically included in the `Providers` component:
-
-```js
-import { Providers } from "aidos-ui";
-
-function App() {
-  return (
-    <Providers>
-      {/* Your app content */}
-    </Providers>
-  );
-}
-```
-
----
-
-## Accessibility
-
-- Uses native `<dialog>` element with `showModal()` for proper modal behavior
-- Focus is trapped within the dialog
-- Escape key closes the dialog
-- Focus returns to the triggering element when closed
-- Backdrop prevents interaction with underlying content

package/src/pages/FlexLayout.mdx

@@ -1,211 +0,0 @@
-import { Column } from "../Column";
-import { Row } from "../Row";
-import { Badge } from "../Badge";
-import { BaseView } from "../BaseView";
-import { Span } from "../Text";
-import { cssVar } from "../jss";
-
-# FlexLayout
-
-`Row` and `Column` are the primary layout components, providing a simple API for flexbox layouts without writing custom styles.
-
----
-
-## Row
-
-Arranges children horizontally (flex-direction: row).
-
-<Row gap="medium" padding="medium" jss={{ border: `1px solid ${cssVar("--divider")}`, borderRadius: 8 }}>
-  <Badge />
-  <Badge />
-  <Badge />
-</Row>
-
-```js
-<Row gap="medium" padding="medium">
-  <Badge />
-  <Badge />
-  <Badge />
-</Row>
-```
-
----
-
-## Column
-
-Arranges children vertically (flex-direction: column).
-
-<Column gap="medium" padding="medium" jss={{ border: `1px solid ${cssVar("--divider")}`, borderRadius: 8 }}>
-  <Badge />
-  <Badge />
-  <Badge />
-</Column>
-
-```js
-<Column gap="medium" padding="medium">
-  <Badge />
-  <Badge />
-  <Badge />
-</Column>
-```
-
----
-
-## Props
-
-Both `Row` and `Column` accept the same props:
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `gap` | `Gap` | - | Space between children: `"none"`, `"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"` |
-| `padding` | `Padding` | - | Internal padding (same values as gap) |
-| `justify` | `Justify` | - | Main axis alignment: `"start"`, `"end"`, `"center"`, `"space-between"`, `"space-around"`, `"space-evenly"` |
-| `align` | `Align` | - | Cross axis alignment: `"start"`, `"end"`, `"center"`, `"stretch"`, `"baseline"` |
-| `grow` | `boolean` | `false` | Allow element to grow (flex-grow: 1) |
-| `shrink` | `boolean` | `false` | Allow element to shrink (flex-shrink: 1) |
-| `wrap` | `boolean` | `false` | Allow items to wrap |
-
----
-
-## Justify content
-
-Control how items are distributed along the main axis:
-
-<Column gap="medium">
-  <Row justify="start" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row justify="center" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row justify="end" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row justify="space-between" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row justify="space-around" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row justify="space-evenly" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-</Column>
-
-```js
-<Row justify="start">...</Row>
-<Row justify="center">...</Row>
-<Row justify="end">...</Row>
-<Row justify="space-between">...</Row>
-<Row justify="space-around">...</Row>
-<Row justify="space-evenly">...</Row>
-```
-
----
-
-## Align items
-
-Control how items are aligned on the cross axis:
-
-<Row gap="medium">
-  <Row align="start" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}`, height: 80 }}>
-    <Badge />
-  </Row>
-  <Row align="center" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}`, height: 80 }}>
-    <Badge />
-  </Row>
-  <Row align="end" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}`, height: 80 }}>
-    <Badge />
-  </Row>
-  <Row align="stretch" padding="small" jss={{ border: `1px solid ${cssVar("--highlight")}`, height: 80 }}>
-    <BaseView jss={{ backgroundColor: cssVar("--highlight"), width: 16 }} />
-  </Row>
-</Row>
-
-```js
-<Row align="start">...</Row>
-<Row align="center">...</Row>
-<Row align="end">...</Row>
-<Row align="stretch">...</Row>
-```
-
----
-
-## Gap sizes
-
-<Column gap="medium">
-  <Row gap="none" jss={{ border: `1px solid ${cssVar("--divider")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row gap="small" jss={{ border: `1px solid ${cssVar("--divider")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row gap="medium" jss={{ border: `1px solid ${cssVar("--divider")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row gap="large" jss={{ border: `1px solid ${cssVar("--divider")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-  <Row gap="xlarge" jss={{ border: `1px solid ${cssVar("--divider")}` }}>
-    <Badge /><Badge /><Badge />
-  </Row>
-</Column>
-
-```js
-<Row gap="none">...</Row>    // 0px
-<Row gap="xsmall">...</Row>  // 4px
-<Row gap="small">...</Row>   // 8px
-<Row gap="medium">...</Row>  // 12px
-<Row gap="large">...</Row>   // 16px
-<Row gap="xlarge">...</Row>  // 24px
-```
-
----
-
-## Grow and shrink
-
-Control how items expand or contract:
-
-<Row gap="medium" jss={{ border: `1px solid ${cssVar("--divider")}` }}>
-  <BaseView padding="medium" jss={{ backgroundColor: cssVar("--highlight") }}>
-    <Span color="light">Fixed</Span>
-  </BaseView>
-  <BaseView grow padding="medium" jss={{ backgroundColor: cssVar("--secondary-background") }}>
-    <Span>Grows to fill space</Span>
-  </BaseView>
-  <BaseView padding="medium" jss={{ backgroundColor: cssVar("--highlight") }}>
-    <Span color="light">Fixed</Span>
-  </BaseView>
-</Row>
-
-```js
-<Row>
-  <BaseView>Fixed width</BaseView>
-  <BaseView grow>Fills remaining space</BaseView>
-  <BaseView>Fixed width</BaseView>
-</Row>
-```
-
----
-
-## Nesting layouts
-
-Combine Row and Column for complex layouts:
-
-```js
-<Column gap="medium" padding="medium">
-  <Row justify="space-between" align="center">
-    <Span>Title</Span>
-    <Button color="primary" onClick={() => {}}>Action</Button>
-  </Row>
-  <Row gap="medium">
-    <Column grow gap="small">
-      <Span>Main content</Span>
-      <P>Description text here...</P>
-    </Column>
-    <Column gap="small">
-      <Span>Sidebar</Span>
-    </Column>
-  </Row>
-</Column>
-```