aidos-ui 4.0.4 → 4.0.5

package/src/pages/Tabs.mdx

@@ -1,281 +0,0 @@
-import { Column } from "../Column";
-import { Row } from "../Row";
-import { Tabs } from "../Tabs";
-import { Badge } from "../Badge";
-import { Span } from "../Text";
-import { cssVar } from "../jss";
-
-# Tabs
-
-A horizontal tab navigation component with full keyboard support and ARIA compliance. Tabs can render as links or buttons and support custom styling, add-ons, and label rendering.
-
----
-
-## Props
-
-### Tabs
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `aria-controls` | `string` | Required | ID of the content panel this tab controls |
-| `tabs` | `Tab[]` | Required | Array of tab configurations |
-| `labelSize` | `Size` | `"large"` | Text size for tab labels |
-| `tabPadding` | `Padding` | `"medium"` | Padding inside each tab |
-| `gap` | `Gap` | `"none"` | Space between tabs |
-| `jssTab` | `JSS \| (data) => JSS` | - | Custom styles for tabs (can be conditional on selected state) |
-| `labelRenderer` | `(label: string) => ReactNode` | - | Custom label rendering function |
-
-### Tab object
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `label` | `string` | Required | Tab display text |
-| `href` | `string` | - | Link URL (renders as link if provided) |
-| `onClick` | `() => void` | - | Click handler (renders as button if no href) |
-| `selected` | `boolean` | `false` | Whether this tab is currently selected |
-| `addOn` | `ReactNode` | - | Additional element (e.g., badge, icon) |
-| `addOnPosition` | `"start" \| "end"` | `"start"` | Position of add-on relative to label |
-
----
-
-## Basic usage
-
-<Column gap="medium">
-  <Tabs
-    aria-controls="panel-1"
-    tabs={[
-      { href: "/Tabs", selected: true, label: "Tab 1" },
-      { href: "/Tabs", selected: false, label: "Tab 2" },
-      { href: "/Tabs", selected: false, label: "Tab 3" },
-    ]}
-  />
-</Column>
-
-```js
-<Tabs
-  aria-controls="panel-1"
-  tabs={[
-    { href: "/Tabs", selected: true, label: "Tab 1" },
-    { href: "/Tabs", selected: false, label: "Tab 2" },
-    { href: "/Tabs", selected: false, label: "Tab 3" },
-  ]}
-/>
-```
-
----
-
-## With add-ons
-
-Add badges, icons, or other elements to tabs:
-
-<Column gap="medium">
-  <Tabs
-    aria-controls="panel-2"
-    tabs={[
-      { href: "/Tabs", selected: false, label: "Messages" },
-      {
-        href: "/Tabs",
-        selected: true,
-        label: "Notifications",
-        addOn: <Badge jss={{ margin: cssVar("--spacing-m") }} color="negative" size="small" />,
-      },
-      { href: "/Tabs", selected: false, label: "Settings" },
-    ]}
-  />
-  <Tabs
-    aria-controls="panel-3"
-    tabs={[
-      { href: "/Tabs", selected: false, label: "Overview" },
-      { href: "/Tabs", selected: false, label: "Analytics" },
-      {
-        href: "/Tabs",
-        selected: true,
-        label: "New",
-        addOn: <Badge jss={{ margin: cssVar("--spacing-m") }} color="highlight" size="medium" />,
-        addOnPosition: "end",
-      },
-    ]}
-  />
-</Column>
-
-```js
-// Badge before label (default)
-<Tabs
-  aria-controls="panel"
-  tabs={[
-    { href: "/messages", selected: false, label: "Messages" },
-    {
-      href: "/notifications",
-      selected: true,
-      label: "Notifications",
-      addOn: <Badge color="negative" size="small" />,
-    },
-  ]}
-/>
-
-// Badge after label
-<Tabs
-  aria-controls="panel"
-  tabs={[
-    {
-      href: "/new",
-      selected: true,
-      label: "New",
-      addOn: <Badge color="highlight" size="medium" />,
-      addOnPosition: "end",
-    },
-  ]}
-/>
-```
-
----
-
-## Tabs as buttons
-
-Omit `href` to render tabs as buttons. Useful for in-page tab switching:
-
-<Column gap="medium">
-  <Tabs
-    aria-controls="panel-4"
-    tabs={[
-      { selected: true, label: "Details" },
-      { selected: false, label: "Reviews" },
-      { selected: false, label: "Related" },
-    ]}
-  />
-</Column>
-
-```js
-const [activeTab, setActiveTab] = useState("details");
-
-<Tabs
-  aria-controls="content-panel"
-  tabs={[
-    {
-      selected: activeTab === "details",
-      label: "Details",
-      onClick: () => setActiveTab("details"),
-    },
-    {
-      selected: activeTab === "reviews",
-      label: "Reviews",
-      onClick: () => setActiveTab("reviews"),
-    },
-    {
-      selected: activeTab === "related",
-      label: "Related",
-      onClick: () => setActiveTab("related"),
-    },
-  ]}
-/>
-```
-
----
-
-## Custom label rendering
-
-Use `labelRenderer` to customize how tab labels are displayed:
-
-<Column>
-  <Tabs
-    aria-controls="panel-5"
-    labelRenderer={(value) => value.split(" ").map((word, index) => index % 2 === 0 ? <strong key={index}>{word} </strong> : word + " ")}
-    tabs={[
-      { href: "/Tabs", selected: true, label: "Bold Tab 1" },
-      { href: "/Tabs", selected: false, label: "Bold Tab 2" },
-      { href: "/Tabs", selected: false, label: "Bold Tab 3" },
-    ]}
-  />
-</Column>
-
-```js
-<Tabs
-  aria-controls="panel"
-  labelRenderer={(label) => (
-    <>
-      <Icon icon="fa-star" size="small" />
-      {label}
-    </>
-  )}
-  tabs={[
-    { href: "/featured", selected: true, label: "Featured" },
-    { href: "/popular", selected: false, label: "Popular" },
-  ]}
-/>
-```
-
----
-
-## Custom tab styles
-
-Use `jssTab` for custom styling. It can be a static style object or a function that receives the tab's selected state:
-
-<Column>
-  <Tabs
-    aria-controls="panel-6"
-    jssTab={(data) => ({
-      borderBottom: data.selected ? "2px solid cyan" : "2px solid magenta",
-    })}
-    tabs={[
-      { href: "/Tabs", selected: true, label: "Styled Tab 1" },
-      { href: "/Tabs", selected: false, label: "Styled Tab 2" },
-      { href: "/Tabs", selected: false, label: "Styled Tab 3" },
-    ]}
-  />
-</Column>
-
-```js
-// Conditional styling based on selection
-<Tabs
-  aria-controls="panel"
-  jssTab={(data) => ({
-    borderBottom: data.selected
-      ? "3px solid var(--highlight)"
-      : "3px solid transparent",
-    backgroundColor: data.selected
-      ? "var(--light-highlight)"
-      : "transparent",
-  })}
-  tabs={tabs}
-/>
-
-// Static styling for all tabs
-<Tabs
-  aria-controls="panel"
-  jssTab={{ borderRadius: 8 }}
-  tabs={tabs}
-/>
-```
-
----
-
-## Keyboard navigation
-
-Tabs support full keyboard navigation:
-
-- **Arrow Left/Right**: Move focus between tabs
-- **Enter/Space**: Activate the focused tab
-- **Home**: Move to first tab
-- **End**: Move to last tab
-
----
-
-## Accessibility
-
-The Tabs component follows WAI-ARIA tab patterns:
-
-- Container has `role="tablist"`
-- Each tab has `role="tab"` and `aria-controls` pointing to its panel
-- Selected tab has `aria-selected="true"`
-- Content panel should have `role="tabpanel"` and matching `id`
-
-```js
-<Tabs
-  aria-controls="settings-panel"
-  tabs={tabs}
-/>
-
-<div id="settings-panel" role="tabpanel">
-  {/* Panel content */}
-</div>
-```

package/src/pages/Text.mdx

@@ -1,154 +0,0 @@
-import { Column } from "../Column";
-import { Row } from "../Row";
-import { Text, Span, P, H1, H2, H3, Li, Label } from "../Text";
-
-# Text
-
-The `Text` component is the foundation for all text rendering in the design system. It provides consistent typography with semantic color and size options.
-
----
-
-## Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `children` | `ReactNode` | Yes | - | Text content |
-| `color` | `TextColor` | No | `"primary"` | `"primary"`, `"secondary"`, `"highlight"`, `"negative"`, `"subtle"`, `"light"`, `"inherit"` |
-| `size` | `Size` | No | `"medium"` | `"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"`, `"xxlarge"`, `"xxxlarge"` |
-| `bold` | `boolean` | No | `false` | Bold font weight |
-| `ellipsis` | `boolean` | No | varies | Truncate text with ellipsis when overflow |
-| `align` | `"center"` \| `"none"` | No | `"none"` | Text alignment |
-| `type` | `TextType` | No | `"span"` | HTML element: `"span"`, `"p"`, `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"li"`, `"label"` |
-| `grow` | `boolean` | No | `false` | Allow text to grow in flex container |
-
----
-
-## Semantic components
-
-For most use cases, prefer the semantic wrapper components over the base `Text` component. They provide sensible defaults and render the appropriate HTML elements.
-
-<Column gap="medium">
-  <H1 tag="h2">H1 - Page titles</H1>
-  <H2 tag="h3">H2 - Section headings</H2>
-  <H3 tag="h4">H3 - Subsection headings</H3>
-  <P>P - Paragraph text for body content</P>
-  <Span>Span - Inline text (truncates by default)</Span>
-  <Li>Li - List items</Li>
-  <Label>Label - Form labels</Label>
-</Column>
-
-```js
-import { H1, H2, H3, P, Span, Li, Label } from "aidos-ui";
-
-<H1>Page Title</H1>           // xxlarge, renders <h1>
-<H2>Section Heading</H2>      // xlarge, renders <h2>
-<H3>Subsection</H3>           // large, renders <h3>
-<P>Body text paragraph</P>    // medium, renders <p>
-<Span>Inline text</Span>      // medium, renders <span>, ellipsis enabled
-<Li>List item</Li>            // medium, renders <li>
-<Label>Form label</Label>     // medium, renders <label>
-```
-
----
-
-## Sizes
-
-Text sizes map to CSS custom properties, ensuring consistency with the theme system.
-
-<Column gap="medium">
-  <Text size="xsmall">xsmall - Fine print, captions</Text>
-  <Text size="small">small - Secondary text, labels</Text>
-  <Text size="medium">medium - Body text (default)</Text>
-  <Text size="large">large - Emphasized text, H3</Text>
-  <Text size="xlarge">xlarge - Subheadings, H2</Text>
-  <Text size="xxlarge">xxlarge - Page titles, H1</Text>
-  <Text size="xxxlarge">xxxlarge - Hero text</Text>
-</Column>
-
-```js
-<Text size="xsmall">Fine print</Text>
-<Text size="small">Secondary text</Text>
-<Text size="medium">Body text</Text>
-<Text size="large">Emphasized</Text>
-<Text size="xlarge">Subheading</Text>
-<Text size="xxlarge">Title</Text>
-<Text size="xxxlarge">Hero</Text>
-```
-
----
-
-## Colors
-
-Semantic colors ensure text adapts correctly to light and dark themes.
-
-<Column gap="medium">
-  <Text color="primary">primary - Main content text</Text>
-  <Text color="secondary">secondary - Supporting text</Text>
-  <Text color="highlight">highlight - Links, accents, brand color</Text>
-  <Text color="negative">negative - Errors, warnings, destructive</Text>
-  <Text color="subtle">subtle - Disabled, placeholder text</Text>
-  <Text color="light">light - Text on dark backgrounds</Text>
-  <Text color="inherit">inherit - Inherits parent color</Text>
-</Column>
-
-```js
-<Text color="primary">Main content</Text>
-<Text color="secondary">Supporting info</Text>
-<Text color="highlight">Accent text</Text>
-<Text color="negative">Error message</Text>
-<Text color="subtle">Disabled text</Text>
-```
-
----
-
-## Bold text
-
-<Row gap="large">
-  <Text bold>Bold text for emphasis</Text>
-  <Text>Regular weight text</Text>
-</Row>
-
-```js
-<Text bold>Important information</Text>
-<Text>Regular text</Text>
-```
-
----
-
-## Ellipsis truncation
-
-By default, `Span` and `Label` components truncate text with ellipsis. Other components wrap by default.
-
-<Column gap="medium" jss={{ maxWidth: 300 }}>
-  <Span>
-    This span text will truncate with ellipsis when it overflows the container width
-  </Span>
-  <P>
-    This paragraph text will wrap to multiple lines when it exceeds the container width instead of truncating
-  </P>
-</Column>
-
-```js
-// Truncates by default
-<Span>Long text that will be truncated...</Span>
-
-// Force truncation on any text component
-<P ellipsis>This paragraph will truncate</P>
-
-// Disable truncation on span
-<Span ellipsis={false}>This span will wrap</Span>
-```
-
----
-
-## Custom HTML element
-
-Override the rendered HTML element while keeping the same styling using the `type` prop.
-
-```js
-// Render H1 styling but use h2 element (for accessibility)
-<H1 type="h2">Visually large, semantically h2</H1>
-
-// Render span styling as a label
-<Span type="label" htmlFor="email">Email address</Span>
-```

package/src/pages/TextInput.mdx

@@ -1,235 +0,0 @@
-import { Column } from "../Column";
-import { Row } from "../Row";
-import { Icon } from "../Icon";
-import { TextInput } from "../TextInput";
-
-# TextInput
-
-A styled text input field with support for icons and add-ons. Built on top of the native HTML input element with enhanced styling options.
-
----
-
-## Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `value` | `string` | Yes | - | Input value (controlled) |
-| `onValueChange` | `(value: string) => void` | No | - | Callback when value changes |
-| `placeholder` | `string` | No | - | Placeholder text |
-| `addOn` | `ReactNode` | No | - | Element displayed inside the input (typically an icon) |
-| `addOnPosition` | `"start"` \| `"end"` | No | `"start"` | Add-on placement |
-| `bare` | `boolean` | No | `false` | Minimal styling without border |
-| `size` | `Size` | No | `"medium"` | Font size (matches Button sizing) |
-| `padding` | `Padding` | No | `"medium"` | Internal padding |
-| `gap` | `Gap` | No | `"small"` | Space between add-on and input |
-| `disabled` | `boolean` | No | `false` | Disables the input |
-| `type` | `string` | No | `"text"` | HTML input type |
-| `jss` | `JSS` | No | - | Custom styles for the input element |
-| `jssRoot` | `JSS` | No | - | Custom styles for the container |
-
-Also accepts all standard HTML input attributes (`name`, `id`, `autoFocus`, `maxLength`, etc.).
-
----
-
-## Basic usage
-
-<Column gap="medium">
-  <TextInput
-    value=""
-    placeholder="Enter your name"
-    onValueChange={() => {}}
-  />
-  <TextInput
-    value="John Doe"
-    onValueChange={() => {}}
-  />
-</Column>
-
-```js
-const [name, setName] = useState("");
-
-<TextInput
-  value={name}
-  placeholder="Enter your name"
-  onValueChange={setName}
-/>
-```
-
----
-
-## With add-on
-
-Add icons to provide visual context. Icons can be placed at the start or end of the input.
-
-<Column gap="medium">
-  <TextInput
-    value="john@example.com"
-    addOn={<Icon icon="fa-envelope" color="primary" size="medium" />}
-    onValueChange={() => {}}
-  />
-  <TextInput
-    value=""
-    placeholder="Search..."
-    addOn={<Icon icon="fa-search" color="secondary" size="medium" />}
-    onValueChange={() => {}}
-  />
-  <TextInput
-    value="Secret"
-    placeholder="Password"
-    addOn={<Icon icon="fa-lock" color="secondary" size="medium" />}
-    addOnPosition="end"
-    type="password"
-    onValueChange={() => {}}
-  />
-</Column>
-
-```js
-// Icon at start (default)
-<TextInput
-  value={email}
-  addOn={<Icon icon="fa-envelope" color="primary" size="medium" />}
-  onValueChange={setEmail}
-/>
-
-// Icon at end
-<TextInput
-  value={password}
-  addOn={<Icon icon="fa-lock" color="secondary" size="medium" />}
-  addOnPosition="end"
-  type="password"
-  onValueChange={setPassword}
-/>
-```
-
----
-
-## Bare variant
-
-The `bare` variant removes the border for a minimal look. The background highlights on focus.
-
-<Column gap="medium">
-  <TextInput
-    bare
-    value=""
-    placeholder="Minimal input"
-    onValueChange={() => {}}
-  />
-  <TextInput
-    bare
-    value="With icon"
-    addOn={<Icon icon="fa-user" color="primary" size="medium" />}
-    onValueChange={() => {}}
-  />
-</Column>
-
-```js
-<TextInput
-  bare
-  value={value}
-  placeholder="Search"
-  addOn={<Icon icon="fa-search" color="secondary" size="medium" />}
-  onValueChange={setValue}
-/>
-```
-
----
-
-## Sizes
-
-The `size` prop controls font size and matches the Button component's sizing system.
-
-<Column gap="medium">
-  <TextInput
-    size="small"
-    value=""
-    placeholder="Small input"
-    onValueChange={() => {}}
-  />
-  <TextInput
-    size="medium"
-    value=""
-    placeholder="Medium input (default)"
-    onValueChange={() => {}}
-  />
-  <TextInput
-    size="large"
-    value=""
-    placeholder="Large input"
-    onValueChange={() => {}}
-  />
-</Column>
-
-```js
-<TextInput size="small" ... />
-<TextInput size="medium" ... />  // default
-<TextInput size="large" ... />
-```
-
----
-
-## Disabled state
-
-<Column gap="medium">
-  <TextInput
-    value="Disabled input"
-    disabled
-    onValueChange={() => {}}
-  />
-</Column>
-
-```js
-<TextInput
-  value="Cannot edit"
-  disabled
-  onValueChange={() => {}}
-/>
-```
-
----
-
-## Form integration
-
-TextInput works with standard form patterns and can be used with refs for form libraries.
-
-```js
-import { useRef } from "react";
-
-function Form() {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [value, setValue] = useState("");
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <TextInput
-        ref={inputRef}
-        name="email"
-        type="email"
-        value={value}
-        placeholder="Email address"
-        onValueChange={setValue}
-        addOn={<Icon icon="fa-envelope" color="primary" size="medium" />}
-      />
-    </form>
-  );
-}
-```
-
----
-
-## Accessibility
-
-- Uses native `<input>` element for full accessibility support
-- Focus states are clearly visible
-- Placeholder text is styled with sufficient contrast
-- Works with form labels using `id` and `htmlFor`
-
-```js
-<label htmlFor="email">Email</label>
-<TextInput
-  id="email"
-  name="email"
-  type="email"
-  value={email}
-  onValueChange={setEmail}
-/>
-```