@nanisoft/prism-ui 0.10.2 → 0.13.0

package/dist/components/ui/diff.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/** The bar and the text tint for each kind, from the existing semantic roles. */
+const KIND_BAR = {
+    // A context line has no bar at all rather than an empty one: a zero-width mark
+    // beside an unchanged line reads as "this changed a little", which is a claim
+    // about a line the diff is saying did not change.
+    context: 'bg-transparent',
+    added: 'bg-brand-ink',
+    removed: 'bg-destructive',
+};
+const KIND_TEXT = {
+    context: 'text-muted-foreground',
+    added: 'text-foreground',
+    removed: 'text-foreground',
+};
+/** How much of a line changed, as a fraction, clamped to the line it is on. */
+function density(line) {
+    if (line.changed === undefined || line.content.length === 0)
+        return 0;
+    const covered = line.changed.reduce((total, [start, end]) => {
+        const from = Math.max(0, Math.min(start, line.content.length));
+        const to = Math.max(0, Math.min(end, line.content.length));
+        return total + Math.max(0, to - from);
+    }, 0);
+    // Clamped, because two ranges that overlap would otherwise report more than the
+    // whole line changed and a bar past the end of its own gutter says nothing.
+    return Math.min(covered / line.content.length, 1);
+}
+/**
+ * The line's text with its changed runs emphasised, and the rest left alone.
+ *
+ * The emphasis is weight, not colour. A diff that tinted its changed words green
+ * and red would be leaning on the two hues a reader is most likely to be unable to
+ * distinguish, and the tint would also fight the line's own state colour. A bolder
+ * weight inside a line that is already marked as added or removed says what
+ * changed without adding a second colour channel, and it survives greyscale,
+ * which is the condition any encoding here has to survive eventually.
+ */
+function emphasised(line) {
+    const ranges = (line.changed ?? [])
+        .map(([start, end]) => [Math.max(0, start), Math.min(end, line.content.length)])
+        .filter(([start, end]) => end > start)
+        .sort((a, b) => a[0] - b[0]);
+    if (ranges.length === 0)
+        return line.content;
+    const parts = [];
+    let at = 0;
+    ranges.forEach(([start, end], index) => {
+        if (start > at)
+            parts.push(line.content.slice(at, start));
+        parts.push(_jsx("strong", { className: "font-semibold", children: line.content.slice(start, end) }, `${start}-${end}-${index}`));
+        at = end;
+    });
+    if (at < line.content.length)
+        parts.push(line.content.slice(at));
+    return parts;
+}
+/**
+ * A change, as lines with the numbers they had and the numbers they have.
+ *
+ * **The bar is change density, not a side marker.** A diff conventionally marks
+ * each line with a coloured wash and a rail, which tells a reader that a line
+ * changed and nothing about how much. Rewriting one identifier in a long line
+ * leaves the same mark as replacing the whole line, so the reader's eye, which is
+ * fast at finding saturated bands, is drawn to the least interesting change in the
+ * file. Here the bar's width is the fraction of the line that actually changed, so
+ * the eye goes to the line that was rewritten rather than the line that was
+ * touched, and the marks that used to be a wash become a measurement.
+ *
+ * **The line numbers carry the side, not the colour.** An added line has a new
+ * number and no old one; a removed line the reverse. That asymmetry is structural,
+ * it is how every diff reader a developer has ever used distinguishes the two, and
+ * it does not depend on distinguishing red from green. The colour is redundant on
+ * top of it, which is the right way round: the shape carries the meaning and the
+ * colour reinforces it.
+ *
+ * **It is a table, because a diff is two columns of numbers beside a column of
+ * text.** Row and column navigation, the count of lines, and the association
+ * between a line and its number all come from the semantics rather than from a
+ * grid of divs, and a reader moving by row hears the file the way they read it.
+ *
+ * **The changed words are emphasised by weight.** See the note on the helper: a
+ * diff that tinted them would spend the two hues a reader is most likely to be
+ * unable to tell apart, and weight survives greyscale.
+ */
+function Diff({ lines, label, labels, file, summary, className, empty, ...props }) {
+    if (lines.length === 0) {
+        // A diff with nothing in it is a state a caller reaches, and an empty grid
+        // with no words in it is a gap rather than a state.
+        return (_jsx("div", { "data-slot": "diff-empty", className: cn('text-muted-foreground text-sm', className), children: empty ?? null }));
+    }
+    const added = lines.filter((line) => (line.kind ?? 'context') === 'added').length;
+    const removed = lines.filter((line) => line.kind === 'removed').length;
+    return (_jsxs("div", { "data-slot": "diff", className: cn('border-border flex flex-col overflow-hidden rounded-md border', className), ...props, children: [_jsxs("div", { "data-slot": "diff-header", className: "border-border bg-muted/40 flex items-baseline justify-between gap-3 border-b px-3 py-2", children: [_jsx("span", { "data-slot": "diff-file", className: "text-foreground min-w-0 truncate text-sm font-medium", children: file ?? null }), summary === undefined ? (_jsx("span", { "data-slot": "diff-summary", className: "text-muted-foreground shrink-0 text-xs tabular-nums", "data-added": added, "data-removed": removed })) : (_jsx("span", { "data-slot": "diff-summary", className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: summary }))] }), _jsx("table", { "data-slot": "diff-table", "aria-label": label, className: "w-full table-fixed border-collapse", children: _jsx("tbody", { children: lines.map((line, index) => {
+                        const kind = line.kind ?? 'context';
+                        const share = density(line);
+                        return (_jsxs("tr", { "data-kind": kind, children: [_jsx("td", { "data-slot": "diff-old-number", className: "text-muted-foreground w-10 border-r border-transparent px-2 text-right align-top text-xs tabular-nums select-none", children: line.oldNumber ?? null }), _jsx("td", { "data-slot": "diff-new-number", className: "text-muted-foreground w-10 border-r border-transparent px-2 text-right align-top text-xs tabular-nums select-none", children: line.newNumber ?? null }), _jsx("td", { "data-slot": "diff-gutter", className: "w-1.5 border-r border-transparent p-0 align-stretch", children: kind === 'context' ? null : (_jsx("span", { "data-slot": "diff-bar", "aria-hidden": "true", className: cn('block h-full min-h-5 w-full', KIND_BAR[kind]), 
+                                        /*
+                                         * The floor applies only when the density is unknown, which is
+                                         * a changed line the caller gave no ranges for. It does not
+                                         * apply to a measured density, because a floor on a real
+                                         * measurement overstates it: a one-character change in a long
+                                         * line is half a percent, and drawing it at twelve percent
+                                         * would have the bar claim something the data does not say,
+                                         * which is the one thing a measurement is not allowed to do.
+                                         * The floor exists to keep a line with no reported ranges
+                                         * findable, and that is the only case it serves.
+                                         */
+                                        style: { width: `${(share > 0 ? share : 0.12) * 100}%` } })) }), _jsx("td", { "data-slot": "diff-content", "aria-label": labels[kind], className: cn('px-3 py-0.5 text-left font-mono text-xs leading-relaxed', KIND_TEXT[kind]), children: emphasised(line) })] }, `${kind}-${line.oldNumber ?? 'x'}-${line.newNumber ?? 'x'}-${index}`));
+                    }) }) })] }));
+}
+export { Diff };

package/dist/components/ui/dropdown-menu.d.ts

@@ -43,6 +43,24 @@ export interface DropdownMenuContentProps extends ComponentProps<'div'> {
  * crosses the package seam (ticket 07 section 6).
  */
 export interface DropdownMenuItemProps extends ComponentProps<'div'> {
+    /**
+     * The element the item is rendered as.
+     *
+     * Declared here rather than re-exported from Base UI so no upstream type crosses
+     * the package seam (ticket 07 section 6), and narrowed to the element form of
+     * the two Base UI accepts. The narrowing is stated because it is a narrowing:
+     * Base UI also takes a function of the props and the component's state, and that
+     * form is not forwarded, because typing it means naming Base UI's own prop and
+     * event types in a declaration a consumer reads. The element form is the one a
+     * menu of links needs, since the attributes that make a row a destination are
+     * the attributes of the anchor itself.
+     *
+     * It is here because a menu item is not always a command: an item that navigates
+     * has to BE the link, because a link nested inside a focusable item is two tab
+     * stops for one row, and a reader who middle-clicks a row that only looks like a
+     * link gets nothing.
+     */
+    render?: React.ReactElement;
     /** Whether the item aligns with the labels above it. @defaultValue false */
     inset?: boolean;
     /** Whether the item reads as a destructive action. @defaultValue default */

package/dist/components/ui/dropdown-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropdown-menu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/dropdown-menu.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const POPUP = 'bg-popover text-popover-foreground z-50 max-h-(--available-height) min-w-36 overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none transition-[opacity,transform] duration-fast ease-out data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0';
 const ITEM = 'focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4';
 /**

package/dist/components/ui/fact-list.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * A short list of named facts, as a definition list.
  *

package/dist/components/ui/field.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * The layout and labelling components that wrap a form control.
  *

package/dist/components/ui/form.d.ts

@@ -0,0 +1,151 @@
+import type { ComponentProps } from 'react';
+/** The props the Form accepts. */
+export interface FormProps extends Omit<ComponentProps<'form'>, 'onSubmit'> {
+    /**
+     * The errors the server returned, keyed by field name.
+     *
+     * This is the whole point of the binding. A submission fails and comes back with
+     * a record of what was wrong with it, and a form that cannot take that record has
+     * to either drop it or turn it into a banner above the form that the reader has to
+     * match to a field themselves. Passed here, each `FormField` named after the key
+     * renders it under the control that caused it, and the control is marked invalid.
+     * Pass an empty record to clear them: the errors are cleared as data, not by
+     * reloading the page. A key with no error is an absent key rather than a key
+     * holding nothing, because a record that says "this field is wrong" and does not
+     * say how is not one this can draw.
+     */
+    errors?: Record<string, string | string[]>;
+    /**
+     * Called with the field values when the form submits.
+     *
+     * The native submit event is prevented, so this is where a server action goes.
+     * Nothing is submitted to the browser and no navigation happens unless the caller
+     * does it.
+     */
+    onSubmit?: (values: Record<string, unknown>) => void;
+    /**
+     * Whether the browser's own validation bubbles are off. @defaultValue true
+     *
+     * On by default, because the binding reports validity on the field and a form
+     * that shows the browser's bubble and a styled message is two reports of one
+     * problem, in two places, in two voices.
+     */
+    noValidate?: boolean;
+}
+/** The props the Form field accepts. */
+export interface FormFieldProps extends ComponentProps<'div'> {
+    /**
+     * The name of the field, and the key its error arrives under.
+     *
+     * Required, and it is the join between the control's `name`, the key in the
+     * server's `errors` and the field the error is drawn under. A field that is not
+     * named cannot receive an error, so this is the one prop that makes the rest of
+     * the binding work.
+     */
+    name: string;
+    /**
+     * The rule the field is checked against, returning the message to show.
+     *
+     * The message is the caller's, because it is a sentence about their product's
+     * rules. Returning nothing means the value is valid.
+     */
+    validate?: (value: unknown) => string | string[] | null | void;
+    /** Whether the field is invalid, for a value a library of the caller's owns. */
+    invalid?: boolean;
+    /** Whether the field ignores interaction. */
+    disabled?: boolean;
+}
+/** The props the Form label accepts. */
+export interface FormLabelProps extends ComponentProps<'label'> {
+}
+/** The props the Form description accepts. */
+export interface FormDescriptionProps extends ComponentProps<'p'> {
+}
+/**
+ * The props the Form control accepts.
+ *
+ * Declared here rather than as `ComponentProps<typeof FieldPrimitive.Control>`,
+ * for the same reason `Progress` declares its own props rather than re-exporting
+ * Base UI's (ticket 07 section 6): an upstream type in the signature reaches the
+ * emitted declaration, and the surface gate fails a declaration file that names
+ * an upstream module. A consumer would then need Base UI resolvable to typecheck a
+ * Prism import, which is the seam the rule exists to keep closed.
+ *
+ * It is `ComponentProps<'input'>` because that is the element the control renders
+ * by default, and naming the element is more honest than naming a `div` and being
+ * wrong about every attribute. A caller who swaps the element for a select or a
+ * textarea passes that element's own attributes and the runtime does the rest; the
+ * type here is the default case, not a limit on what may be rendered.
+ */
+export interface FormControlProps extends ComponentProps<'input'> {
+}
+/** The props the Form error accepts. */
+export interface FormErrorProps extends ComponentProps<'div'> {
+    /**
+     * What the reader can do about the error, drawn after the message.
+     *
+     * The message and the way out are one unit. "That address is already registered"
+     * with nothing after it is a dead end, and the reader is left to guess whether
+     * they should sign in instead, change the address or ask somebody. So this
+     * Component renders both in the same live region: the recovery is announced with
+     * the problem rather than being something the reader has to find.
+     */
+    action?: React.ReactNode;
+}
+/**
+ * The form binding: a form, its fields, and the errors that came back from it.
+ *
+ * **`Field` is the layout; this is the wiring.** `Field` is presentational and says
+ * so: nothing in it generates an `id`, so the consumer owns the control's id and
+ * wires it to the label's `htmlFor` and to the description or error's `id` through
+ * `aria-describedby`. That is the right default for a layout, and it is a lot of
+ * hand-written ids in a form with eleven fields, none of which a reader can see
+ * and all of which a screen reader depends on. This module is the part that
+ * generates them: `FormField` owns the name, `FormControl` registers itself with
+ * the field, and `FormLabel` and `FormDescription` find the control and point at
+ * it. Nothing here changes how `Field` looks.
+ *
+ * **A server error arrives as data and lands under the control that caused it.**
+ * `errors` is a record keyed by field name and `FormField` is keyed by the same
+ * name, so the message a submission came back with is drawn under the control the
+ * reader has to fix, the control is marked invalid, and the message is added to the
+ * control's description so it is read out when the reader reaches the field. The
+ * errors clear when the record clears: a field that fixed itself still shows the
+ * server's complaint until the caller stops passing it, which is exactly as
+ * honest as it sounds.
+ *
+ * **The error and the way out are rendered together, in one live region.** The
+ * recovery is the half of an error that is usually missing. A `FormError` renders
+ * the message and then the caller's `action`, and the region is in the document
+ * before either of them is, because a live region inserted at the same moment as
+ * its content is not announced by every screen reader. The region is therefore
+ * present and empty while the field is valid, which is the cost of the reliable
+ * half.
+ *
+ * **Use a `FormControl` inside a `FormField`.** The control is the part that
+ * registers itself, which is what makes the label's `for` resolve and what puts the
+ * description and the error into the control's accessible description. A plain
+ * `Input` renders and submits perfectly well inside a `FormField` and is not
+ * registered, so its label points at an id that is on nothing and its error is
+ * never announced with it. That is the one rule this module asks for, and it is
+ * the rule `Field` deliberately leaves to the caller.
+ */
+declare function Form({ errors, onSubmit, noValidate, className, ...props }: FormProps): import("react").JSX.Element;
+/** One field's name, its rule and the control that answers to it. */
+declare function FormField({ name, validate, invalid, disabled, className, ...props }: FormFieldProps): import("react").JSX.Element;
+/** The control's accessible name, associated with it rather than placed near it. */
+declare function FormLabel({ className, ...props }: FormLabelProps): import("react").JSX.Element;
+/** The control itself, registered with the field so the label and errors find it. */
+declare function FormControl({ className, ...props }: FormControlProps): import("react").JSX.Element;
+/** A short helper line under the control, announced with the control itself. */
+declare function FormDescription({ className, ...props }: FormDescriptionProps): import("react").JSX.Element;
+/**
+ * The field's error and what to do about it, in one announced region.
+ *
+ * The region is always in the document and the message is not, because a live
+ * region that arrives with its content is missed by some screen readers. It is
+ * empty while the field is valid.
+ */
+declare function FormError({ className, action, ...props }: FormErrorProps): import("react").JSX.Element;
+export { Form, FormControl, FormDescription, FormError, FormField, FormLabel };
+//# sourceMappingURL=form.d.ts.map

package/dist/components/ui/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,kCAAkC;AAClC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACzE;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;IAC1C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IACpD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wCAAwC;AACxC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D;;;;;;;OAOG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9D,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wCAAwC;AACxC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,OAAO,CAAC;CAAG;AAElE,8CAA8C;AAC9C,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,GAAG,CAAC;CAAG;AAEpE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,OAAO,CAAC;CAAG;AAEpE,wCAAwC;AACxC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3D;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAUpF;AAED,qEAAqE;AACrE,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,+BAYhB;AAED,oFAAoF;AACpF,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAQzD;AAED,qFAAqF;AACrF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAc7D;AAED,gFAAgF;AAChF,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAQrE;AAED;;;;;;GAMG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAyBjE;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ui/form.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+import { Form as FormPrimitive } from '@base-ui/react/form';
+import { cn } from '../../lib/utils.js';
+/**
+ * The form binding: a form, its fields, and the errors that came back from it.
+ *
+ * **`Field` is the layout; this is the wiring.** `Field` is presentational and says
+ * so: nothing in it generates an `id`, so the consumer owns the control's id and
+ * wires it to the label's `htmlFor` and to the description or error's `id` through
+ * `aria-describedby`. That is the right default for a layout, and it is a lot of
+ * hand-written ids in a form with eleven fields, none of which a reader can see
+ * and all of which a screen reader depends on. This module is the part that
+ * generates them: `FormField` owns the name, `FormControl` registers itself with
+ * the field, and `FormLabel` and `FormDescription` find the control and point at
+ * it. Nothing here changes how `Field` looks.
+ *
+ * **A server error arrives as data and lands under the control that caused it.**
+ * `errors` is a record keyed by field name and `FormField` is keyed by the same
+ * name, so the message a submission came back with is drawn under the control the
+ * reader has to fix, the control is marked invalid, and the message is added to the
+ * control's description so it is read out when the reader reaches the field. The
+ * errors clear when the record clears: a field that fixed itself still shows the
+ * server's complaint until the caller stops passing it, which is exactly as
+ * honest as it sounds.
+ *
+ * **The error and the way out are rendered together, in one live region.** The
+ * recovery is the half of an error that is usually missing. A `FormError` renders
+ * the message and then the caller's `action`, and the region is in the document
+ * before either of them is, because a live region inserted at the same moment as
+ * its content is not announced by every screen reader. The region is therefore
+ * present and empty while the field is valid, which is the cost of the reliable
+ * half.
+ *
+ * **Use a `FormControl` inside a `FormField`.** The control is the part that
+ * registers itself, which is what makes the label's `for` resolve and what puts the
+ * description and the error into the control's accessible description. A plain
+ * `Input` renders and submits perfectly well inside a `FormField` and is not
+ * registered, so its label points at an id that is on nothing and its error is
+ * never announced with it. That is the one rule this module asks for, and it is
+ * the rule `Field` deliberately leaves to the caller.
+ */
+function Form({ errors, onSubmit, noValidate = true, className, ...props }) {
+    return (_jsx(FormPrimitive, { className: cn('flex w-full flex-col gap-6', className), noValidate: noValidate, ...(errors === undefined ? null : { errors }), onFormSubmit: (values) => onSubmit?.(values), ...props }));
+}
+/** One field's name, its rule and the control that answers to it. */
+function FormField({ name, validate, invalid, disabled, className, ...props }) {
+    return (_jsx(FieldPrimitive.Root, { "data-slot": "form-field", name: name, className: cn('flex w-full flex-col gap-1.5', className), ...(validate === undefined ? null : { validate }), ...(invalid === undefined ? null : { invalid }), ...(disabled === undefined ? null : { disabled }), ...props }));
+}
+/** The control's accessible name, associated with it rather than placed near it. */
+function FormLabel({ className, ...props }) {
+    return (_jsx(FieldPrimitive.Label, { "data-slot": "form-label", className: cn('text-foreground text-sm leading-none font-medium', className), ...props }));
+}
+/** The control itself, registered with the field so the label and errors find it. */
+function FormControl({ className, ...props }) {
+    return (_jsx(FieldPrimitive.Control, { "data-slot": "form-control", className: cn('border-input bg-background text-foreground placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] duration-fast ease-out outline-none md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
+}
+/** A short helper line under the control, announced with the control itself. */
+function FormDescription({ className, ...props }) {
+    return (_jsx(FieldPrimitive.Description, { "data-slot": "form-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+/**
+ * The field's error and what to do about it, in one announced region.
+ *
+ * The region is always in the document and the message is not, because a live
+ * region that arrives with its content is missed by some screen readers. It is
+ * empty while the field is valid.
+ */
+function FormError({ className, action, ...props }) {
+    return (_jsxs("div", { "data-slot": "form-error", role: "alert", className: cn('flex flex-col items-start gap-1', className), ...props, children: [_jsx(FieldPrimitive.Error, { "data-slot": "form-error-message", className: "text-destructive text-sm font-medium" }), action === undefined ? null : (_jsx(FieldPrimitive.Validity, { children: (state) => (state.validity.valid === false ? action : null) }))] }));
+}
+export { Form, FormControl, FormDescription, FormError, FormField, FormLabel };

package/dist/components/ui/hover-card.d.ts

@@ -0,0 +1,105 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props the HoverCard root forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface HoverCardProps {
+    /** The controlled open state. */
+    open?: boolean;
+    /** The initially open state, for an uncontrolled hover card. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** The trigger and the preview. */
+    children?: React.ReactNode;
+}
+/**
+ * The props HoverCardTrigger forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface HoverCardTriggerProps extends ComponentProps<'a'> {
+    /**
+     * How long the pointer must rest on the trigger before the card opens, in
+     * milliseconds.
+     *
+     * A prop and not a fixed number, because the delay is a decision about what
+     * counts as intent and a caller whose readers move differently, or whose
+     * pointer hardware reports a rest as a hover, has a different answer. What the
+     * Component refuses to do is decide that intent is instant, which is the
+     * failure a card with no delay always ships: the pointer crossing a line of
+     * text opens a surface, and a page of links becomes a page of flashes.
+     *
+     * @defaultValue 600
+     */
+    delay?: number;
+    /**
+     * How long the card stays open after the pointer leaves it, in milliseconds.
+     *
+     * This is the half that is easy to leave at zero and that punishes the reader
+     * who was about to get what they wanted. Moving from the trigger to the card
+     * crosses a gap, and a card that closes on the first pixel outside the trigger
+     * closes in the gap, so the reader who did everything right gets nothing. A
+     * generous close delay is what makes a rest on the trigger mean something.
+     *
+     * @defaultValue 300
+     */
+    closeDelay?: number;
+}
+/**
+ * The props HoverCardContent forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface HoverCardContentProps extends ComponentProps<'div'> {
+    /** Which side of the trigger the card is placed on. @defaultValue bottom */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** How the card aligns against the trigger. @defaultValue center */
+    align?: 'start' | 'center' | 'end';
+    /** The distance in pixels between the trigger and the card. @defaultValue 8 */
+    sideOffset?: number;
+}
+/**
+ * A preview of a destination, shown when the reader rests on a link.
+ *
+ * **The delay is the Component's decision, and the close delay is the half that
+ * matters.** A card with no open delay opens as the pointer crosses a line of
+ * text, so a page of links becomes a page of flashes and a reader learns that
+ * resting is punished. A card with no close delay is worse and quieter: the
+ * reader rests, waits, sees the card start to appear, moves toward it, and it
+ * vanishes in the gap between the trigger and the card, so the one reader who
+ * did everything right is the one who gets nothing. Both are delays here, and
+ * both are props, because how long a reader's pointer rests is a fact about the
+ * reader and not about the design system.
+ *
+ * **The preview is never the only copy of what it shows.** The trigger is a real
+ * anchor, so everything in the card is reachable at the destination without the
+ * card ever appearing, and a touch reader, who has no hover at all, is not
+ * missing anything. That is the honest way to express "the reader wants this"
+ * without punishing a reader on a slow device: the card is an accelerant for a
+ * reader with a pointer, and removing it costs the reader nothing. If a fact
+ * lives only in the card, it does not exist for half the people who can see it.
+ *
+ * The card is not a dialog. It takes no focus, traps nothing, and is not
+ * announced, because a screen reader is already moving through the link text and
+ * a surface that interrupted that to read a summary of it would be a worse
+ * version of the same information. For the same reason, put nothing in the card
+ * that is not also on the destination.
+ */
+declare function HoverCard({ ...props }: HoverCardProps): import("react").JSX.Element;
+/**
+ * The link the card previews. It is an anchor, and it navigates on its own.
+ *
+ * The href is what makes the card safe to add: the destination is reachable
+ * whether or not the card ever opens, so the delay can be as long as intent
+ * requires without costing a reader anything they cannot already get.
+ */
+declare function HoverCardTrigger({ className, delay, closeDelay, ...props }: HoverCardTriggerProps): import("react").JSX.Element;
+/** The floating preview surface. */
+declare function HoverCardContent({ className, side, align, sideOffset, ...props }: HoverCardContentProps): import("react").JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent };
+//# sourceMappingURL=hover-card.d.ts.map

package/dist/components/ui/hover-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hover-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,GAAG,CAAC;IAChE;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAClE,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAE9C;AAED;;;;;;GAMG;AACH,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,+BAe1F;AAED,oCAAoC;AACpC,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAwBvB;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/hover-card.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { cn } from '../../lib/utils.js';
+/**
+ * A preview of a destination, shown when the reader rests on a link.
+ *
+ * **The delay is the Component's decision, and the close delay is the half that
+ * matters.** A card with no open delay opens as the pointer crosses a line of
+ * text, so a page of links becomes a page of flashes and a reader learns that
+ * resting is punished. A card with no close delay is worse and quieter: the
+ * reader rests, waits, sees the card start to appear, moves toward it, and it
+ * vanishes in the gap between the trigger and the card, so the one reader who
+ * did everything right is the one who gets nothing. Both are delays here, and
+ * both are props, because how long a reader's pointer rests is a fact about the
+ * reader and not about the design system.
+ *
+ * **The preview is never the only copy of what it shows.** The trigger is a real
+ * anchor, so everything in the card is reachable at the destination without the
+ * card ever appearing, and a touch reader, who has no hover at all, is not
+ * missing anything. That is the honest way to express "the reader wants this"
+ * without punishing a reader on a slow device: the card is an accelerant for a
+ * reader with a pointer, and removing it costs the reader nothing. If a fact
+ * lives only in the card, it does not exist for half the people who can see it.
+ *
+ * The card is not a dialog. It takes no focus, traps nothing, and is not
+ * announced, because a screen reader is already moving through the link text and
+ * a surface that interrupted that to read a summary of it would be a worse
+ * version of the same information. For the same reason, put nothing in the card
+ * that is not also on the destination.
+ */
+function HoverCard({ ...props }) {
+    return _jsx(PreviewCardPrimitive.Root, { ...props });
+}
+/**
+ * The link the card previews. It is an anchor, and it navigates on its own.
+ *
+ * The href is what makes the card safe to add: the destination is reachable
+ * whether or not the card ever opens, so the delay can be as long as intent
+ * requires without costing a reader anything they cannot already get.
+ */
+function HoverCardTrigger({ className, delay, closeDelay, ...props }) {
+    return (_jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...(delay === undefined ? null : { delay }), ...(closeDelay === undefined ? null : { closeDelay }), className: cn('hover:decoration-foreground rounded-sm text-foreground underline decoration-muted-foreground underline-offset-2 outline-none', 'transition-colors duration-fast ease-out', 'focus-visible:ring-ring focus-visible:ring-[3px]', className), ...props }));
+}
+/** The floating preview surface. */
+function HoverCardContent({ className, side = 'bottom', align = 'center', sideOffset = 8, ...props }) {
+    return (_jsx(PreviewCardPrimitive.Portal, { children: _jsx(PreviewCardPrimitive.Positioner, { side: side, align: align, sideOffset: sideOffset, className: "z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn('bg-popover text-popover-foreground w-72 origin-(--transform-origin) rounded-md border p-4 shadow-md outline-none', 'transition-[opacity,transform] duration-fast ease-out', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[starting-style]:scale-95 data-[starting-style]:opacity-0', 'data-[ending-style]:scale-95 data-[ending-style]:opacity-0', className), ...props }) }) }));
+}
+export { HoverCard, HoverCardTrigger, HoverCardContent };