@flood-md/agent 0.2.8 → 0.2.10

package/dist/materials/component-error-summary.md

@@ -0,0 +1,40 @@
+# ErrorSummary
+
+A linked validation summary that focuses host-owned invalid fields.
+
+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, ErrorSummary } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <ErrorSummary title="Review the form" errors={[{id:"project",fieldId:"project",message:"Enter a project name."}]} />
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- The host supplies errors; ErrorSummary does not infer validation or submit a form. Each entry links to an exact field ID.
+- Normal activation focuses the target while modifier navigation remains native. onSelect can cancel the action before focus moves.
+- announcement defaults to off. autoFocus opts into focus on appearance, not on every error update, and suppresses duplicate live announcements. Empty errors render nothing. Introduced in 0.2.7.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `title` | `string` | `Required` |
+| `errors` | `readonly ErrorSummaryItem[]` | `Required` |
+| `description` | `ReactNode` | `—` |
+| `announcement` | `"off" \| "polite" \| "assertive"` | `"off"` |
+| `autoFocus` | `boolean` | `false` |
+| `onSelect` | `(error: ErrorSummaryItem, event: ReactMouseEvent<HTMLAnchorElement>) => void` | `—` |
+| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "title" \| "onSelect" \| "role" \| "aria-live">` | `Forwarded` |

package/dist/materials/component-field.md

@@ -0,0 +1,46 @@
+# Field
+
+The association between a visible label, its input and supporting messages.
+
+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, Input } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Field label="Project name" required hint="Visible to your team.">
+        {(control) => <Input {...control} name="project" />}
+      </Field>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Spread the supplied control props onto one Input or Textarea.
+- Field merges describedBy with hint/error IDs and forwards native required through its function child.
+- The host owns validation rules. Compose Field in a client component in Next.js.
+- Field is not a generic native div wrapper and does not forward a ref.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
+| `message` | `ReactNode` | `—` |
+| `id` | `string` | `—` |
+| `label` | `ReactNode` | `Required` |
+| `hideLabel · 0.2.3` | `boolean` | `false` |
+| `hint` | `ReactNode` | `—` |
+| `error` | `ReactNode` | `—` |
+| `required` | `boolean` | `—` |
+| `describedBy` | `string` | `—` |
+| `children` | `(props: FieldControlProps) => ReactNode` | `Required` |

package/dist/materials/component-fieldset.md

@@ -0,0 +1,46 @@
+# Fieldset
+
+A native group with a legend, shared descriptions and disabled 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, Fieldset, Checkbox } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Fieldset legend="Notifications" hint="Choose the updates you want.">
+        <Checkbox label="Product updates" name="updates" defaultChecked />
+        <Checkbox label="Release notes" name="releases" />
+      </Fieldset>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Uses a real fieldset and legend, with a ref to HTMLFieldSetElement. Disabled descendants retain native form semantics.
+- The browser exempts controls in the first legend from inherited disabling. Avoid interactive legend contents unless this is intentional.
+- hint, message, error and external aria-describedby IDs are merged without duplicates. Error takes precedence over an advisory status.
+- Group status describes the group; it does not mark every child invalid, manage selected values or implement a RadioGroup/CheckboxGroup.
+- legendSize="section" gives an independent form section a 1rem semibold title and a 1rem body inset. The default "label" remains a compact choice caption; neither option changes native group semantics.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `legend` | `ReactNode` | `Required` |
+| `legendSize · 0.2.10` | `"label" \| "section"` | `"label"` |
+| `hideLabel · 0.2.3` | `boolean` | `false` |
+| `hint` | `ReactNode` | `—` |
+| `error` | `ReactNode` | `—` |
+| `message` | `ReactNode` | `—` |
+| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
+| `Native HTML props` | `FieldsetHTMLAttributes<HTMLFieldSetElement>` | `Forwarded` |

package/dist/materials/component-figure.md

@@ -0,0 +1,36 @@
+# Figure
+
+A native figure that keeps media and its caption together.
+
+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, Figure, Surface } from "@flood-md/react";
+import "@flood-md/react/styles.css";
+
+export function Example() {
+  return (
+    <FloodRoot>
+      <Figure caption="A calm foundation for the next idea."><Surface padding="6">Project preview</Surface></Figure>
+    </FloodRoot>
+  );
+}
+```
+
+## Design notes
+
+- Composes native figure and figcaption. The host supplies the image, chart, code or other self-contained content, including its own alt text or accessible name.
+- captionPosition controls DOM reading order as well as placement. Caption content may contain links. Native hidden, dir, lang, style and ref target the figure.
+- Compatible addition in 0.2.5. Uses existing Flood semantic tokens and relative geometry.
+
+## API reference
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `caption` | `ReactNode` | `—` |
+| `captionPosition` | `"before" \| "after"` | `"after"` |
+| `Native HTML props` | `HTMLAttributes<HTMLElement>` | `Forwarded` |

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-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,41 @@
+# 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"` |
+| `size` | `"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `"md"` |
+| `loading` | `boolean` | `—` |
+| `label` | `string` | `Required` |
+| `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` |