@flood-md/agent 0.2.9 → 0.2.10

package/dist/materials/component-section.md

@@ -0,0 +1,42 @@
+# Section
+
+A named document section with a compact heading, supporting description and optional actions.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Section, Text } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Section title="Project settings" description="Manage details your team shares." headingLevel={2}>
+        <Text as="p">Section content.</Text>
+      </Section>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Section renders a native section and heading. A generated heading ID labels the region; explicit id creates a deterministic heading ID. headingLevel follows the host document hierarchy.
+- The title and description share a close text column; actions align separately and wrap when necessary. It adds no surface or border. Compose Surface or another container inside when content needs its own background.
+- Original compatible addition in the unpublished 0.2.5 source candidate.
+- headingLevel chooses h2–h6 for the document outline; it does not set the visual scale. headingSize independently selects the existing Heading typography role (section by default).
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `title` | `string` | `Required` |
+| `description` | `ReactNode` | `—` |
+| `actions` | `ReactNode` | `—` |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `2` |
+| `headingSize` | `"display" \| "large" \| "page" \| "section"` | `"section"` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLElement>, "title">` | `Forwarded` |

package/dist/materials/component-segmented-control.md

@@ -0,0 +1,51 @@
+# SegmentedControl
+
+A compact single-value choice with native radio semantics and a shared inset surface.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, SegmentedControl } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <SegmentedControl label="Time range" name="period" defaultValue="day" options={[{value: "day", label: "Day"}, {value: "week", label: "Week"}, {value: "month", label: "Month"}]} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Uses original RadioGroup behavior and native inputs.
+- Arrow keys move focus and select; Home/End select endpoints, skipping disabled segments. Selecting the current value does not clear it.
+- Native name/form/required, reset and controlled values are preserved. Use actual tabs for tab panels, ToggleGroup for optional pressed actions.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `legendSize · 0.2.10` | `"label" \| "section"` | `—` |
+| `hideLabel · 0.2.3` | `boolean` | `—` |
+| `hint` | `ReactNode` | `—` |
+| `error` | `ReactNode` | `—` |
+| `message` | `ReactNode` | `—` |
+| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
+| `name` | `string` | `Required` |
+| `value` | `string` | `—` |
+| `defaultValue` | `string` | `—` |
+| `onValueChange` | `(value: string) => void` | `—` |
+| `orientation` | `"vertical" \| "horizontal"` | `"horizontal"` |
+| `required` | `boolean` | `—` |
+| `label` | `string` | `Required` |
+| `options` | `readonly ToggleOption[]` | `Required` |
+| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
+| `iconOnly` | `boolean` | `false` |
+| `fullWidth` | `boolean` | `false` |
+| `Native HTML props` | `Omit<Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" \| "defaultValue" \| "role">, "legend" \| "options">` | `Forwarded` |

package/dist/materials/component-select.md

@@ -0,0 +1,45 @@
+# Select
+
+A Flood choice field with its own popup and native form integration.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Field, Select } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Field label="Visibility">
+        {(control) => (
+          <Select {...control} name="visibility" defaultValue="private">
+            <option value="private">Private</option>
+            <option value="team">Team</option>
+          </Select>
+        )}
+      </Field>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Single selection uses a Flood trigger and listbox, including the popup. Native options and optgroups supply the choices; disabled choices cannot be selected.
+- Use arrows, Home/End and typing to navigate; Enter or Space confirms, Escape cancels. The popup scrolls active choices into view.
+- Select fills its Field; constrain the form or field wrapper. Multiple and numeric size greater than one use a native inline listbox rather than a popup.
+- A native form bridge preserves name, value/defaultValue, required, disabled, onChange and HTMLSelectElement ref. Inspect the matching guide for the visible focus contract.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
+| `invalid` | `boolean` | `—` |
+| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
+| `Native HTML props` | `SelectHTMLAttributes<HTMLSelectElement>` | `Forwarded` |

package/dist/materials/component-skeleton.md

@@ -0,0 +1,42 @@
+# Skeleton
+
+A decorative placeholder that reserves space for loading content.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Stack, Skeleton } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Stack gap="2">
+        <Skeleton width="65%" />
+        <Skeleton />
+        <Skeleton width="80%" />
+      </Stack>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Always hidden from assistive technology. The host owns loading announcements and aria-busy on the relevant region.
+- Width and height accept CSS dimensions; style overrides them. Match the final content geometry.
+- Animation can be disabled; reduced motion and forced colors disable the pulse. Available in 0.2.4.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `shape` | `"text" \| "rounded" \| "circle"` | `"text"` |
+| `width` | `CSSProperties["width"]` | `—` |
+| `height` | `CSSProperties["height"]` | `—` |
+| `animate` | `boolean` | `true` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLSpanElement>, "children" \| "role" \| "tabIndex" \| "aria-label" \| "aria-hidden">` | `Forwarded` |

package/dist/materials/component-skip-link.md

@@ -0,0 +1,37 @@
+# SkipLink
+
+A native skip-navigation link revealed on focus and aimed at a page content target.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, SkipLink } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <SkipLink href="#main-content" />
+      <main id="main-content" tabIndex={-1}>Page content</main>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Place SkipLink early in DOM order and point href at a nonempty same-page fragment. The target should have tabIndex=-1 (or already be focusable). Native fragment navigation updates the URL; the component then focuses and reveals the target.
+- It stays visually hidden until focused. The click handler respects prevented events, modifier navigation and new-window targets. Reduced motion uses immediate scrolling. It does not create a focus trap or change the target tabindex.
+- Original compatible addition in the unpublished 0.2.5 source candidate.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `href` | `string` | `Required` |
+| `children` | `Inherited native HTML prop` | `"Skip to content"` |
+| `Native HTML props` | `Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">` | `Forwarded` |

package/dist/materials/component-slider.md

@@ -0,0 +1,51 @@
+# Slider
+
+One value or an ordered range with native keyboard controls on a shared rail.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Slider } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Slider label="Price range" name="price" defaultValue={[25, 75]} min={0} max={100} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- value/defaultValue contain one number or an ordered pair. onValueChange returns a new array. Values snap to min-based steps and thumbs cannot cross; Tab order stays stable. Supply thumbLabels to translate or explain each handle.
+- Horizontal only. Direction follows the host, including RTL. Native range inputs retain keyboard behavior; pointer selection chooses the nearest handle. Names submit one or two entries; uncontrolled reset restores defaults.
+- hideLabel preserves the accessible legend; showValue only controls the visible numeric readout. Read-only prevents edits while keeping focus. Use hint/message/error for meaning beyond color. Touch assistive technology needs device testing. Available in 0.2.5.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `legendSize · 0.2.10` | `"label" \| "section"` | `—` |
+| `hideLabel · 0.2.3` | `boolean` | `—` |
+| `hint` | `ReactNode` | `—` |
+| `error` | `ReactNode` | `—` |
+| `message` | `ReactNode` | `—` |
+| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
+| `label` | `string` | `Required` |
+| `value` | `readonly number[]` | `—` |
+| `defaultValue` | `readonly number[]` | `[50]` |
+| `onValueChange` | `(value: number[]) => void` | `—` |
+| `min` | `number` | `0` |
+| `max` | `number` | `100` |
+| `step` | `number` | `1` |
+| `thumbLabels` | `readonly string[]` | `—` |
+| `showValue` | `boolean` | `true` |
+| `readOnly` | `boolean` | `false` |
+| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
+| `Native HTML props` | `Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "legend" \| "children" \| "defaultValue" \| "onChange">` | `Forwarded` |

package/dist/materials/component-spinner.md

@@ -0,0 +1,37 @@
+# Spinner
+
+A sized loading indicator with an optional accessible status label.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Spinner } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Spinner label="Loading workspace" />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Standalone indicators expose a status with a localizable label. Decorative indicators are hidden from assistive technology.
+- Button loading uses this indicator decoratively and keeps the button name. Do not announce every spinner in a busy area.
+- Use Progress when completion is measurable. Reduced motion stops rotation. Available in 0.2.4.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `label` | `string` | `"Loading"` |
+| `decorative` | `boolean` | `false` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLSpanElement>, "children" \| "role" \| "aria-label" \| "aria-hidden">` | `Forwarded` |

package/dist/materials/component-split.md

@@ -0,0 +1,40 @@
+# Split
+
+A responsive main-and-supporting layout with logical pane placement and container-based collapse.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Split, Text } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Split side="end" ratio="main" collapseAt="md" main={<Text as="p">Main content</Text>} aside={<Text as="p">Supporting content</Text>} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- main and aside are content slots in generic div panes; they do not introduce duplicate main landmarks. side places the supporting pane at logical start/end and preserves the same DOM reading order. ratio chooses equal panes or a 2:1 emphasis on main/aside.
+- Container queries collapse at sm=30rem, md=48rem or lg=64rem; never retains two columns. gap uses the spacing scale. This is layout composition, with no resizing gesture, saved pane sizes or splitter keyboard model.
+- Original compatible addition in the unpublished 0.2.5 source candidate.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `main` | `ReactNode` | `Required` |
+| `aside` | `ReactNode` | `Required` |
+| `side` | `"start" \| "end"` | `"end"` |
+| `ratio` | `"balanced" \| "main" \| "aside"` | `"main"` |
+| `collapseAt` | `"sm" \| "md" \| "lg" \| "never"` | `"md"` |
+| `gap` | `"0" \| "1" \| "2" \| "3" \| "4" \| "6" \| "8" \| "12"` | `"6"` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | `Forwarded` |

package/dist/materials/component-stack.md

@@ -0,0 +1,37 @@
+# Stack
+
+Vertical composition with spacing from the shared token scale.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Stack, Heading, Text } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Stack gap="4">
+        <Heading size="section">Project</Heading>
+        <Text as="p">One place for your work.</Text>
+      </Stack>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- The parent owns the gap between its children.
+- Spacing keys are strings and use rem. Flood does not reset the host root font size.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `gap` | `"0" \| "1" \| "2" \| "3" \| "4" \| "6" \| "8" \| "12"` | `"4"` |
+| `Native HTML props` | `HTMLAttributes<HTMLDivElement>` | `Forwarded` |

package/dist/materials/component-status-indicator.md

@@ -0,0 +1,38 @@
+# StatusIndicator
+
+A named state with a small decorative indicator, without a badge container.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, StatusIndicator } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <StatusIndicator tone="success" label="All systems operational" />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- The visible label carries meaning; the dot is decorative and color is never the only signal. Use announce to opt into a polite status live region for changing messages.
+- Static labels do not announce by default. Tone is independent of wording and size. Use Badge for categorical labels and Alert for a message requiring more explanation.
+- Compatible addition in 0.2.5. Uses existing Flood semantic tokens and relative geometry.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `label` | `string` | `Required` |
+| `tone` | `"neutral" \| "accent" \| "error" \| "warning" \| "success" \| "info"` | `"neutral"` |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `announce` | `boolean` | `false` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | `Forwarded` |

package/dist/materials/component-steps.md

@@ -0,0 +1,40 @@
+# Steps
+
+An ordered progress sequence with explicit current, completed, upcoming and error states.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Steps } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Steps label="Project setup" currentValue="access" items={[{value:"details",title:"Details"},{value:"access",title:"Access"},{value:"review",title:"Review"}]} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Steps renders an ordered list, not tabs. currentValue identifies aria-current=step; preceding steps default to complete and later steps to upcoming. Item status may explicitly mark complete/upcoming/error. Omitted currentValue starts at the first step.
+- Without onStepChange, steps are informative content. Providing it renders native step buttons; the host owns navigation and currentValue updates. Disabled items only affect those actions. Every state has text through customizable statusLabels; color and icons are additional cues. Horizontal presentation stacks in narrow viewports.
+- Original compatible addition in the unpublished 0.2.5 source candidate.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `label` | `string` | `Required` |
+| `items` | `readonly StepItem[]` | `Required` |
+| `currentValue` | `string` | `—` |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
+| `onStepChange` | `(value: string) => void` | `—` |
+| `statusLabels` | `{complete: string; current: string; upcoming: string; error: string}` | `—` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLOListElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |

package/dist/materials/component-surface.md

@@ -0,0 +1,37 @@
+# Surface
+
+A quiet container with semantic elevation and token-based padding.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Surface, Text } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Surface elevation="raised" padding="6">
+        <Text>Everything in its place.</Text>
+      </Surface>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Elevation describes appearance. Overlay does not create a dialog, portal or focus trap.
+- Prefer grouping and spacing before adding more nested containers.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `elevation` | `"default" \| "raised" \| "overlay"` | `"default"` |
+| `padding` | `"0" \| "1" \| "2" \| "3" \| "4" \| "6" \| "8" \| "12"` | `"6"` |
+| `Native HTML props` | `HTMLAttributes<HTMLDivElement>` | `Forwarded` |

package/dist/materials/component-switch.md

@@ -0,0 +1,35 @@
+# Switch
+
+A labeled on/off setting with native checkbox form behavior.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Switch } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Switch label="Email notifications" name="notifications" defaultChecked />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Switch uses a native checkbox with role="switch".
+- checked/defaultChecked, name/value, reset and disabled remain native. The component does not persist settings.
+- The control and visible label form one content-width unit with an 8px-at-16px-root internal gap. Use an explicit parent gap="4" (16px at that root) between units; the glyph keeps its token-defined size.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `label` | `ReactNode` | `Required` |
+| `Native HTML props` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "size">` | `Forwarded` |

package/dist/materials/component-table.md

@@ -0,0 +1,46 @@
+# Table
+
+A native data table with caption, density and a protected horizontal scroll area.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Table } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Table caption="Projects">
+        <thead><tr><th scope="col">Project</th><th scope="col" data-numeric>Members</th></tr></thead>
+        <tbody><tr><th scope="row">Flood</th><td data-numeric>12</td></tr></tbody>
+      </Table>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Caption is required and remains the accessible table name with hideCaption. Supply table sections and correct native header/cell associations.
+- Native table props, className/style and HTMLTableElement ref target the actual table. Set style.minWidth when horizontal overflow is preferable to compressed columns.
+- Flood ScrollArea owns horizontal scrolling and keyboard access. scrollLabel can name its viewport independently; dir and hidden apply to the containing scroll area too.
+- Use data-numeric on headers/cells for end alignment and tabular figures; data-align=start/center/end gives logical alignment. No automatic sorting, selection, pagination or data access.
+- Striped and compact/comfortable density are opt-in presentation. Available in 0.2.4.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `caption` | `string` | `Required` |
+| `children` | `ReactNode` | `Required` |
+| `hideCaption` | `boolean` | `false` |
+| `density` | `"compact" \| "comfortable"` | `"comfortable"` |
+| `striped` | `boolean` | `false` |
+| `scrollLabel` | `string` | `—` |
+| `cellVerticalAlign` | `"top" \| "middle" \| "bottom"` | `"middle"` |
+| `Native HTML props` | `Omit<TableHTMLAttributes<HTMLTableElement>, "children">` | `Forwarded` |

package/dist/materials/component-tabs.md

@@ -0,0 +1,43 @@
+# Tabs
+
+Connected tab buttons and retained content panels with roving keyboard focus.
+
+Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.
+
+## Example
+
+```tsx
+"use client";
+
+import { FloodRoot, Tabs } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Tabs label="Project sections" items={[{value:"overview",label:"Overview",content:"Project context."},{value:"activity",label:"Activity",content:"Recent updates."}]} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Arrow keys navigate enabled tabs; automatic activation is default, manual needs Enter/Space. Tab leaves the tablist. Horizontal direction follows RTL.
+- Inactive panels remain mounted but hidden. Keep form validation and persistent selection under host control. Invalid, missing or disabled selected values fall back to the first available item.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `label` | `string` | `Required` |
+| `items` | `readonly TabItem[]` | `Required` |
+| `value` | `string` | `—` |
+| `defaultValue` | `string` | `—` |
+| `onValueChange` | `(value: string) => void` | `—` |
+| `activationMode` | `"automatic" \| "manual"` | `"automatic"` |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |
+| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
+| `disabled` | `boolean` | `false` |
+| `iconOnly` | `boolean` | `false` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "defaultValue" \| "onChange">` | `Forwarded` |