@flood-md/agent 0.2.9 → 0.2.11

package/dist/materials/component-file-input.md

@@ -0,0 +1,45 @@
+# FileInput
+
+A native file picker with a compact selection summary and one clear action.
+
+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, FileInput } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Field label="Attachments" hint="Choose files from your device.">
+        {control => <FileInput {...control} name="attachments" multiple />}
+      </Field>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- The browser owns FileList, native name/form/required/accept/multiple/capture behavior and the input ref. onChange retains the native event; onFilesChange receives a fresh array after selection or clear. No controlled value/defaultValue or readOnly mode is supplied.
+- clearable defaults to true. Localize placeholder and clearLabel. Clear restores input focus and empties the native selection; form reset clears the summary without emitting a change. Disabled includes inherited fieldset behavior. Cancelling the chooser preserves selection.
+- File names are shown as text, shortened visually when needed. This component only selects files; the host owns upload, progress and validation. accept is a chooser hint, not file validation. Available in 0.2.5.
+- Multiple selection shows a compact count and a collapsible list with full file names and localized sizes. Removing one file updates the native FileList and preserves keyboard focus; clearable=false hides both individual and global removal. Translate selectionLabel/removeFileLabel. In multiple mode, choosing again appends files. Repeated files are deduplicated by name, size, type, lastModified and relative path. Single mode replaces its selection.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
+| `invalid` | `boolean` | `—` |
+| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
+| `clearable` | `boolean` | `true` |
+| `clearLabel` | `string` | `"Clear files"` |
+| `selectionLabel` | `string` | `—` |
+| `removeFileLabel` | `string` | `—` |
+| `onFilesChange` | `(files: readonly File[]) => void` | `—` |
+| `Native HTML props` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "value" \| "defaultValue" \| "children" \| "readOnly">` | `Forwarded` |

package/dist/materials/component-file-item.md

@@ -0,0 +1,48 @@
+# FileItem
+
+A named file row with size, type, thumbnail and independent 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, FileList, FileItem } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <FileList label="Attachments">
+        <FileItem name="Brand guidelines.pdf" size={2400000} mimeType="PDF" />
+      </FileList>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Render inside FileList or another native list.
+- No file reading, object URL creation or uploading is performed.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `name` | `string` | `Required` |
+| `size` | `number` | `—` |
+| `mimeType` | `string` | `—` |
+| `format` | `string \| null` | `—` |
+| `thumbnail` | `ReactNode` | `—` |
+| `description` | `ReactNode` | `—` |
+| `href` | `string` | `—` |
+| `download` | `boolean` | `—` |
+| `onPreview` | `() => void` | `—` |
+| `onRemove` | `() => void` | `—` |
+| `disabled` | `boolean` | `—` |
+| `labels` | `FileActionLabels` | `—` |
+| `formatSize` | `(bytes: number) => string` | `—` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLLIElement>, "children" \| "title">` | `Forwarded` |

package/dist/materials/component-file-list.md

@@ -0,0 +1,39 @@
+# FileList
+
+A named native list of file rows.
+
+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, FileList, FileItem } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <FileList label="Attachments">
+        <FileItem name="Brand guidelines.pdf" size={2400000} mimeType="PDF" />
+        <FileItem name="Logo.svg" size={18400} mimeType="SVG" />
+      </FileList>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- List contents and file identities are host owned. Narrow list containers adapt media, copy and actions without hiding primitive anatomy, including on a wide screen.
+- Use stable host IDs for React keys; a name is not a unique file identity.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `density` | `"compact" \| "comfortable"` | `—` |
+| `dividers` | `boolean` | `—` |
+| `label` | `string` | `Required` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLUListElement>, "role">` | `Forwarded` |

package/dist/materials/component-file-meta.md

@@ -0,0 +1,36 @@
+# FileMeta
+
+A compact combined file-format and byte-size chip.
+
+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, FileMeta } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <FileMeta format="PDF" size={2400000} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- The format label is display metadata, not validated MIME detection.
+- Size uses SI units; formatSize customizes the text. Missing values do not create empty chip slots. Long metadata may wrap inside its single Badge at enlarged or constrained widths.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `format` | `string` | `—` |
+| `size` | `number` | `—` |
+| `formatSize` | `(bytes: number) => string` | `—` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | `Forwarded` |

package/dist/materials/component-filter-condition.md

@@ -0,0 +1,53 @@
+# FilterCondition
+
+One controlled filter predicate composed from property, operator and value controls.
+
+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, FilterCondition } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <FilterCondition label="Condition 1"
+        properties={[{id:"status",label:"Status",options:[{value:"active",label:"Active"},{value:"paused",label:"Paused"}]}]}
+        value={{property:"status",operator:"is",values:["active"]}}
+        onValueChange={(condition) => console.log(condition)} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Compose one finite-choice condition from Fieldset, Field, Grid, Select, MultiSelect and IconButton. sm is the default; all controls share controlSize.
+- value and onValueChange are controlled. Changing the property proposes an empty values array; changing the operator preserves selected values. Empty values are an incomplete draft, never an instruction to match every record.
+- The host owns query evaluation, duplicate-property policy, Apply/Cancel, validation and focus after removing the row. onRemove is optional; no removal slot is reserved when omitted.
+- label names the condition group. hideLabel defaults to true; property/operator/value controls retain their accessible names. labels customizes control names, operator text, placeholder and removal text.
+- A wide host uses one row with a wider value track. Container-based reflow follows the space available to this row, including inside a popup or drawer. No extra background or border is added.
+- This version supports finite enumerated values and is/is-not predicates. Date, text, numeric operators, nested groups, remote fetching and query execution are not part of this component.
+
+## 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` |
+| `properties` | `readonly FilterConditionProperty[]` | `Required` |
+| `value` | `FilterConditionValue` | `Required` |
+| `onValueChange` | `(value: FilterConditionValue) => void` | `Required` |
+| `onRemove` | `() => void` | `—` |
+| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
+| `labels` | `Partial<Record<"property" \| "operator" \| "values" \| "include" \| "exclude" \| "placeholder" \| "remove", string>>` | `—` |
+| `Native HTML props` | `Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" \| "legend" \| "onChange">` | `Forwarded` |

package/dist/materials/component-filter-group.md

@@ -0,0 +1,55 @@
+# FilterGroup
+
+A flat controlled group of filter conditions with matching and row management.
+
+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, FilterGroup } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <FilterGroup label="Project conditions"
+        properties={[{id:"status",label:"Status",options:[{value:"active",label:"Active"},{value:"paused",label:"Paused"}]}]}
+        value={{match:"all",conditions:[]}} onValueChange={(filters) => console.log(filters)} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Composes FilterCondition, SegmentedControl, Fieldset, Stack, Inline, Button and IconSlot. The group adds no separate material or decorative nested container.
+- value and onValueChange are controlled. Stable condition IDs survive row edits and removals; new rows propose an enabled available property and empty values. Empty values remain an incomplete draft.
+- All/any is shown only with at least two conditions. Removing rows preserves the selected match value. An empty group offers Add condition; it does not invent an onboarding message.
+- Duplicate properties are prevented for new choices by default. allowDuplicateProperties enables them; maxConditions optionally limits additions. Existing accepted rows are never silently deleted when constraints change. Add remains visible and disabled when no additions are available.
+- Accepted additions focus the new property control. Accepted removal focuses a surviving neighbour or Add. Refused controlled proposals do not move focus or mutate accepted conditions; delayed acceptance must not steal focus from a different target.
+- label names the group, hideLabel defaults to true, labels localizes group controls, and conditionLabels localizes each row. controlSize defaults to sm; disabled blocks all edits.
+- The host owns Apply/Cancel, accepted query evaluation, persistence, validation and server semantics. This is a flat finite-choice editor, not a nested query engine.
+
+## 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` |
+| `properties` | `readonly FilterConditionProperty[]` | `Required` |
+| `value` | `FilterGroupValue` | `Required` |
+| `onValueChange` | `(value: FilterGroupValue) => void` | `Required` |
+| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `—` |
+| `allowDuplicateProperties` | `boolean` | `—` |
+| `maxConditions` | `number` | `—` |
+| `labels` | `Partial<Record<"match" \| "all" \| "any" \| "add" \| "condition", string>>` | `—` |
+| `conditionLabels` | `FilterConditionProps["labels"]` | `—` |
+| `Native HTML props` | `Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "children" \| "legend" \| "onChange">` | `Forwarded` |

package/dist/materials/component-flood-root.md

@@ -0,0 +1,33 @@
+# FloodRoot
+
+An explicit scope for the neutral dark foundations profile.
+
+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, Text } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Text>Your workspace starts here.</Text>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Import @flood-md/react/styles.css once at the application entry.
+- This root selects neutral/dark locally. Legacy controls outside it keep their earlier theme behavior.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `Native HTML props` | `HTMLAttributes<HTMLDivElement>` | `Forwarded` |

package/dist/materials/component-grid.md

@@ -0,0 +1,38 @@
+# Grid
+
+An adaptive content grid with optional fixed columns.
+
+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, Grid, Surface } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Grid minItemWidth="16rem" gap="4"><Surface>First</Surface><Surface>Second</Surface></Grid>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Default auto-fit columns clamp their minimum to available width, so narrow parents retain a single column.
+- Explicit columns retain their count; choose this deliberately. minItemWidth applies only to automatic columns and accepts a CSS length.
+- Cells remain ordinary content, not an ARIA grid. Use native tables for tabular relationships and host media/container queries for deliberate breakpoints.
+- Available in 0.2.4; use matching installed declarations.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `columns` | `1 \| 2 \| 3 \| 4 \| 6 \| 12` | `—` |
+| `minItemWidth` | `string` | `—` |
+| `gap` | `"0" \| "1" \| "2" \| "3" \| "4" \| "6" \| "8" \| "12"` | `"4"` |
+| `Native HTML props` | `HTMLAttributes<HTMLDivElement>` | `Forwarded` |

package/dist/materials/component-heading.md

@@ -0,0 +1,38 @@
+# Heading
+
+Semantic heading levels with an independent visual 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 } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Stack gap="4">
+        <Heading level={2} size="page">Workspace settings</Heading>
+        <Heading level={3} size="section">Notifications</Heading>
+      </Stack>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Choose level for document structure and size for appearance.
+- Display is a large marketing role. Keep page and section sizes for ordinary product interfaces.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` |
+| `size` | `"display" \| "large" \| "page" \| "section"` | `"page"` |
+| `Native HTML props` | `HTMLAttributes<HTMLHeadingElement>` | `Forwarded` |

package/dist/materials/component-hover-card.md

@@ -0,0 +1,48 @@
+# HoverCard
+
+A focusable preview that opens on hover, keyboard focus or explicit activation.
+
+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, HoverCard, Button, Text, Link } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <HoverCard title="Alex Morgan" trigger={props => <Button {...props} variant="subtle">Alex Morgan</Button>}>
+        <Text as="p" size="compact">Designer at Flood.</Text>
+        <Link href="https://github.com/tillwithered">View profile</Link>
+      </HoverCard>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Interactive content belongs to a named dialog preview, not a tooltip.
+- Click pins the preview; keyboard and touch users can activate the trigger.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `title` | `ReactNode` | `Required` |
+| `trigger` | `(props: OverlayTriggerProps) => ReactNode` | `Required` |
+| `children` | `ReactNode` | `Required` |
+| `side` | `"top" \| "bottom" \| "left" \| "right"` | `—` |
+| `align` | `"start" \| "center" \| "end"` | `—` |
+| `open` | `boolean` | `—` |
+| `defaultOpen` | `boolean` | `—` |
+| `onOpenChange` | `(open: boolean) => void` | `—` |
+| `openDelay` | `number` | `—` |
+| `closeDelay` | `number` | `—` |
+| `disabled` | `boolean` | `—` |
+| `closeLabel` | `string` | `—` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "title" \| "role">` | `Forwarded` |

package/dist/materials/component-icon-button.md

@@ -0,0 +1,43 @@
+# IconButton
+
+An icon-only action with a required accessible name.
+
+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, IconButton } from "@flood-md/react";
+import { Plus } from "lucide-react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <IconButton label="Add idea">
+        <Plus />
+      </IconButton>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Provide a meaningful action label, rather than the name of the glyph.
+- Supply a licensed SVG. IconButton wraps it in a decorative IconSlot sized to the control.
+- Connect onClick to your host action. The interactive preview adds a local count; the basic usage snippet only shows composition.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `variant` | `"solid" \| "subtle" \| "outline" \| "ghost"` | `"subtle"` |
+| `tone` | `"default" \| "danger"` | `—` |
+| `size` | `"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `"md"` |
+| `loading` | `boolean` | `—` |
+| `label` | `string` | `Required` |
+| `iconSize` | `"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `size` |
+| `Native HTML props` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label">` | `Forwarded` |

package/dist/materials/component-icon-slot.md

@@ -0,0 +1,37 @@
+# IconSlot
+
+Consistent geometry for a host-supplied SVG icon.
+
+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, IconSlot } from "@flood-md/react";
+import { ArrowRight } from "lucide-react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <IconSlot size="md"><ArrowRight /></IconSlot>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- No glyph pack ships in the React package. Keep the license of the host's icon artwork.
+- Without label the slot is decorative. With label it exposes role="img" and an accessible name.
+- Use an SVG rather than a text character. Avoid inline SVG sizing styles that override the slot.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `size` | `"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `"md"` |
+| `label` | `string` | `—` |
+| `Native HTML props` | `HTMLAttributes<HTMLSpanElement>` | `Forwarded` |

package/dist/materials/component-image-preview.md

@@ -0,0 +1,50 @@
+# ImagePreview
+
+A single-image preview in Flood Dialog with loading and failure feedback.
+
+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, ImagePreview, Button } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <ImagePreview title="Flood mark" src="/flood-mark.png" alt="Pink Flood mark"
+        trigger={props => <Button {...props} variant="subtle">Preview image</Button>} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Loads the image only while its dialog content is mounted.
+- The host owns trusted URLs, object URL lifetime and download permissions.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `title` | `string` | `Required` |
+| `trigger` | `(props: OverlayTriggerProps) => ReactNode` | `Required` |
+| `open` | `boolean` | `—` |
+| `defaultOpen` | `boolean` | `—` |
+| `onOpenChange` | `(open: boolean) => void` | `—` |
+| `disabled` | `boolean` | `—` |
+| `closeLabel` | `string` | `—` |
+| `closeOnOutsideClick` | `boolean` | `—` |
+| `initialFocusRef` | `RefObject<HTMLElement \| null>` | `—` |
+| `src` | `string` | `Required` |
+| `alt` | `string` | `Required` |
+| `caption` | `ReactNode` | `—` |
+| `downloadHref` | `string` | `—` |
+| `downloadLabel` | `string` | `—` |
+| `loadingLabel` | `string` | `—` |
+| `errorLabel` | `string` | `—` |
+| `Native HTML props` | `Omit<Omit<HTMLAttributes<HTMLDialogElement>, "children" \| "title" \| "role">, "children" \| "description">` | `Forwarded` |

package/dist/materials/component-image.md

@@ -0,0 +1,37 @@
+# Image
+
+A native responsive image with explicit alternative text and media fitting.
+
+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, Image } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Image src="/flood-mark.png" alt="Flood logo" width={160} height={160} fit="contain" />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- alt is required; an empty string is appropriate for decorative imagery beside equivalent visible content.
+- Native src/srcSet/sizes/loading/decoding/dimensions, handlers and HTMLImageElement ref are preserved. Supply width/height or AspectRatio to reserve geometry.
+- fit cover/contain changes object-fit, not fetching, optimization or fallback behavior. Avatar composes Image with its own load/fallback lifecycle.
+- Available in 0.2.4; use matching installed declarations.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `alt` | `string` | `Required` |
+| `fit` | `"cover" \| "contain"` | `"cover"` |
+| `Native HTML props` | `Omit<ImgHTMLAttributes<HTMLImageElement>, "alt">` | `Forwarded` |

package/dist/materials/component-inline-code.md

@@ -0,0 +1,36 @@
+# InlineCode
+
+A small monospace code fragment that participates in running text.
+
+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, Text, InlineCode } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Text as="p">Import <InlineCode>@/ui/button</InlineCode> in your project.</Text>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Native code semantics, bundled monospace stack and a quiet inline surface. Content is text; no HTML parsing or syntax highlighting is performed.
+- wrap defaults to true for long identifiers. wrap=false preserves the fragment on one line and the host must manage overflow. Use CodeSnippet for blocks of code and Kbd for keyboard input.
+- Compatible addition in 0.2.5. Uses existing Flood semantic tokens and relative geometry.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` |
+| `wrap` | `boolean` | `true` |
+| `Native HTML props` | `HTMLAttributes<HTMLElement>` | `Forwarded` |