@nanisoft/prism-ui 0.10.2 → 0.13.0

package/dist/components/ui/input-group.d.ts

@@ -0,0 +1,99 @@
+import type { ComponentProps } from 'react';
+import { Input } from './input.js';
+/**
+ * Where an addon sits in the group, and what its border does about it.
+ *
+ * The addon keeps its own border on the outer edge only, because the group
+ * already draws the edge it shares with the control. Two borders on the same line
+ * read as a seam down the middle of one field, which is the opposite of what
+ * joining them was for.
+ */
+declare const ADDON_POSITION: {
+    readonly prefix: "rounded-s-md border-e-0";
+    readonly suffix: "rounded-e-md border-s-0";
+};
+/** The props the Input group accepts. */
+export interface InputGroupProps extends ComponentProps<'div'> {
+    /**
+     * Whether the group ignores interaction.
+     *
+     * Drawn rather than set: the group's own `disabled` attribute would disable the
+     * control in the middle of it without the reader's pointer ever touching it, and
+     * a `<div>` cannot be disabled. Put `disabled` on the control and the group dims
+     * itself.
+     */
+    disabled?: boolean;
+}
+/** The props the Input group addon accepts. */
+export interface InputGroupAddonProps extends ComponentProps<'div'> {
+    /** Which end of the group the addon sits on. @defaultValue prefix */
+    position?: keyof typeof ADDON_POSITION;
+}
+/** The props the Input group input accepts. */
+export type InputGroupInputProps = ComponentProps<typeof Input>;
+/** The props the Input group button accepts. */
+export interface InputGroupButtonProps extends ComponentProps<'button'> {
+    /** Which end of the group the button sits on. @defaultValue suffix */
+    position?: keyof typeof ADDON_POSITION;
+}
+/**
+ * Related controls drawn as one field: a prefix, a suffix, a unit, an action.
+ *
+ * **The addons are part of the field, not beside it.** They share one border, one
+ * height, one corner radius and one focus colour, because the thing they decorate
+ * is the field and a reader who sees three boxes has been given three things to
+ * reason about where they were given one. A currency symbol and the number it
+ * belongs to are one field with two parts, and the Component draws them as one
+ * field.
+ *
+ * **The frame answers the focus, the control draws the ring.** The group is a
+ * `div`: it is never focused and it has nothing to ring. It turns its border to the
+ * ring token when anything inside it has focus, and the control, which is the
+ * element that actually has focus, keeps `Input`'s own full-strength ring. Two
+ * indicators would be two things to read, and putting the ring on a wrapper that
+ * is not the thing being operated is how a focus indicator ends up drawn around
+ * the wrong box.
+ *
+ * **Use `InputGroupInput` inside it rather than `Input`.** A bordered `Input`
+ * inside a bordered group draws a second border inside the first, and the caller
+ * should not have to know that `border-0 shadow-none` is the fix. The rest of the
+ * surface is plain divs and buttons, so a caller can put any control in the middle
+ * once they know they have to take its border off.
+ *
+ * It is presentational: it renders no state of its own, has no hooks and no event
+ * handlers, so it is a server Component and a consumer's field costs no client
+ * JavaScript for the frame. Pair it with a `Label` above it and the control inside
+ * is the only thing that needs a name.
+ */
+declare function InputGroup({ className, disabled, ...props }: InputGroupProps): import("react").JSX.Element;
+/**
+ * A static run of words or an icon inside the group: a unit, a prefix, a currency
+ * symbol, a field name.
+ *
+ * It carries no accessible name of its own and none is needed: the text inside it
+ * is read in place, and the control it belongs to is named by the label above the
+ * group. Use `InputGroupButton` when the part has to be operated, so it gets a
+ * name and a focus ring of its own.
+ */
+declare function InputGroupAddon({ className, position, ...props }: InputGroupAddonProps): import("react").JSX.Element;
+/**
+ * The control in the middle of the group, without a border of its own.
+ *
+ * A thin composition over `Input` rather than a variant of it, so the field keeps
+ * every behaviour a plain `Input` has, including its focus ring, its `aria-invalid`
+ * border and its disabled state. Only the border and the shadow are dropped,
+ * because the group already draws both.
+ */
+declare function InputGroupInput({ className, ...props }: InputGroupInputProps): import("react").JSX.Element;
+/**
+ * An operable part inside the group: clear the field, reveal a password, open a
+ * picker.
+ *
+ * A button rather than an addon, because the moment the part can be operated it
+ * needs its own accessible name, its own focus ring and its own press feedback,
+ * and an addon has none of the three. The name is a prop, as it is everywhere:
+ * "Clear" is a word this package does not get to choose for a consumer's product.
+ */
+declare function InputGroupButton({ className, position, type, ...props }: InputGroupButtonProps): import("react").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput };
+//# sourceMappingURL=input-group.d.ts.map

package/dist/components/ui/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAG/B;;;;;;;GAOG;AACH,QAAA,MAAM,cAAc;;;CAGV,CAAA;AAEV,yCAAyC;AACzC,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC5D;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,+CAA+C;AAC/C,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACjE,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,OAAO,cAAc,CAAA;CACvC;AAED,+CAA+C;AAC/C,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAA;AAE/D,gDAAgD;AAChD,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACrE,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,OAAO,cAAc,CAAA;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAgB7E;AAED;;;;;;;;GAQG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,QAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAa1F;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAQrE;AAED;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAmB,EACnB,IAAe,EACf,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAiBvB;AAED,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/input-group.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from './input.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * Where an addon sits in the group, and what its border does about it.
+ *
+ * The addon keeps its own border on the outer edge only, because the group
+ * already draws the edge it shares with the control. Two borders on the same line
+ * read as a seam down the middle of one field, which is the opposite of what
+ * joining them was for.
+ */
+const ADDON_POSITION = {
+    prefix: 'rounded-s-md border-e-0',
+    suffix: 'rounded-e-md border-s-0',
+};
+/**
+ * Related controls drawn as one field: a prefix, a suffix, a unit, an action.
+ *
+ * **The addons are part of the field, not beside it.** They share one border, one
+ * height, one corner radius and one focus colour, because the thing they decorate
+ * is the field and a reader who sees three boxes has been given three things to
+ * reason about where they were given one. A currency symbol and the number it
+ * belongs to are one field with two parts, and the Component draws them as one
+ * field.
+ *
+ * **The frame answers the focus, the control draws the ring.** The group is a
+ * `div`: it is never focused and it has nothing to ring. It turns its border to the
+ * ring token when anything inside it has focus, and the control, which is the
+ * element that actually has focus, keeps `Input`'s own full-strength ring. Two
+ * indicators would be two things to read, and putting the ring on a wrapper that
+ * is not the thing being operated is how a focus indicator ends up drawn around
+ * the wrong box.
+ *
+ * **Use `InputGroupInput` inside it rather than `Input`.** A bordered `Input`
+ * inside a bordered group draws a second border inside the first, and the caller
+ * should not have to know that `border-0 shadow-none` is the fix. The rest of the
+ * surface is plain divs and buttons, so a caller can put any control in the middle
+ * once they know they have to take its border off.
+ *
+ * It is presentational: it renders no state of its own, has no hooks and no event
+ * handlers, so it is a server Component and a consumer's field costs no client
+ * JavaScript for the frame. Pair it with a `Label` above it and the control inside
+ * is the only thing that needs a name.
+ */
+function InputGroup({ className, disabled = false, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", "data-disabled": disabled || undefined, "aria-disabled": disabled || undefined, className: cn('border-input bg-background focus-within:border-ring flex w-full items-stretch rounded-md border shadow-xs', 'transition-[color,box-shadow] duration-fast ease-out', 'has-[input:disabled]:opacity-50', disabled && 'opacity-50', className), ...props }));
+}
+/**
+ * A static run of words or an icon inside the group: a unit, a prefix, a currency
+ * symbol, a field name.
+ *
+ * It carries no accessible name of its own and none is needed: the text inside it
+ * is read in place, and the control it belongs to is named by the label above the
+ * group. Use `InputGroupButton` when the part has to be operated, so it gets a
+ * name and a focus ring of its own.
+ */
+function InputGroupAddon({ className, position = 'prefix', ...props }) {
+    return (_jsx("div", { "data-slot": "input-group-addon", "data-position": position, className: cn('bg-muted text-muted-foreground border-input flex shrink-0 items-center border px-2.5 text-sm', ADDON_POSITION[position], className), ...props }));
+}
+/**
+ * The control in the middle of the group, without a border of its own.
+ *
+ * A thin composition over `Input` rather than a variant of it, so the field keeps
+ * every behaviour a plain `Input` has, including its focus ring, its `aria-invalid`
+ * border and its disabled state. Only the border and the shadow are dropped,
+ * because the group already draws both.
+ */
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-input", className: cn('flex-1 border-0 shadow-none focus-visible:border-0', className), ...props }));
+}
+/**
+ * An operable part inside the group: clear the field, reveal a password, open a
+ * picker.
+ *
+ * A button rather than an addon, because the moment the part can be operated it
+ * needs its own accessible name, its own focus ring and its own press feedback,
+ * and an addon has none of the three. The name is a prop, as it is everywhere:
+ * "Clear" is a word this package does not get to choose for a consumer's product.
+ */
+function InputGroupButton({ className, position = 'suffix', type = 'button', ...props }) {
+    return (_jsx("button", { type: type, "data-slot": "input-group-button", "data-position": position, className: cn('border-input text-muted-foreground hover:bg-accent hover:text-accent-foreground flex shrink-0 items-center justify-center border px-2.5 text-sm outline-none', 'transition-[color,background-color] duration-fast ease-out', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', ADDON_POSITION[position], className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput };

package/dist/components/ui/input.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 single-line text control.
  *

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

@@ -0,0 +1,113 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * One row: what a reader is being shown, and what they can do about it.
+ *
+ * The anatomy is fixed by this type rather than assembled from slots, because the
+ * order is the row. Media leads, the text block holds a primary and a secondary
+ * line, the value sits after it and the actions sit last. A row whose parts can
+ * be rearranged is four parts and a decision, and every list that hand-rolled its
+ * own row made that decision slightly differently; that is the drift this
+ * Component exists to end.
+ *
+ * `href` is what makes the row reachable, and it is a first-class field rather
+ * than a property of the trailing slot, because a row whose only way to be
+ * followed is a kebab menu in the corner is a row that hides its own content from
+ * a reader who is not looking for a menu.
+ */
+export type ItemEntry = {
+    /**
+     * A stable key for the row.
+     *
+     * Required, because the common list this row lives in reorders, filters and
+     * replaces itself, and a row keyed by index has a reader's focus and a screen
+     * reader's announcement land on a different row when one is inserted above it.
+     */
+    id: string;
+    /** The primary line: the name of the thing this row is about. */
+    title: ReactNode;
+    /**
+     * The secondary line under it, in the muted ink.
+     *
+     * Omit it rather than passing an empty string. A row with no secondary line is
+     * one line tall; a row with an empty second line is one line tall with the
+     * reader looking for the thing that is not there.
+     */
+    description?: ReactNode;
+    /** A short value that belongs to the row but is not part of its name. */
+    meta?: ReactNode;
+    /** Where the row goes. Omit it for a row that is read rather than followed. */
+    href?: string;
+    /**
+     * A thumbnail, an avatar, a status mark. Whatever it is, it is clipped to a
+     * fixed square so a row's height is the same whichever media a caller passes.
+     */
+    media?: ReactNode;
+    /**
+     * The controls at the trailing edge.
+     *
+     * These are *in addition to* whatever `href` reaches, never instead of it. A
+     * row whose only destination is an action is a row whose content is only
+     * reachable by a reader who guesses that the controls are the content, and a
+     * caller who has no destination should omit this rather than reach for it.
+     */
+    actions?: ReactNode;
+    /**
+     * Marks the row as the current one.
+     *
+     * Marked with `aria-current` as well as with the surface, because a selected
+     * row that is only a different colour is invisible to a reader who cannot
+     * separate the two inks, and this is the same rule the Timeline's states and the
+     * ProductSwitcher's member follow.
+     */
+    selected?: boolean;
+};
+/** The props the Item accepts. */
+export interface ItemProps extends Omit<ComponentProps<'div'>, 'children' | 'title'> {
+    /** The row's own content. See `ItemEntry` for what a row is made of. */
+    entry: ItemEntry;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A row in a list or a set: media, a text block, a value and trailing controls.
+ *
+ * **It is the row, and the list is the caller's.** That is the one decision worth
+ * making here, and it is a decision against making this a data-driven list. An
+ * Item renders one row and nothing about what encloses it, because the same row
+ * appears in a `<ul>`, in a definition list, in a card grid and in a table cell,
+ * and a Component that owned the list would have to own all four. A caller writes
+ * the list element its content actually is and puts rows in it; what they stop
+ * writing is the row.
+ *
+ * So a caller writes `<li><Item key={id} entry={row} /></li>` and gets a real list
+ * item, the count and the position in the accessibility tree, and a row whose
+ * geometry cannot drift from the row below it. The wrapper is one element, and
+ * the row is the part that was being re-derived in every list in this package.
+ *
+ * **The trailing controls are never the only route to the row.** `href` is a
+ * field on the row rather than something the actions have to carry, so the
+ * primary line is a real anchor a reader can tab to, see where it goes before
+ * taking it, and open in a new context. A row of forty with its only destination
+ * behind a kebab menu is a list a screen reader user cannot read, because the
+ * menu's contents are not in the document until the menu is open.
+ *
+ * **The title is not stretched over the whole row.** The obvious treatment for a
+ * clickable row is an anchor with `position: absolute; inset: 0` and the actions
+ * raised above it, which makes the entire row a hit target. It is refused for the
+ * focus indicator: the ring belongs to the anchor, and an anchor stretched over a
+ * row is a box that has sized itself to the text inside it, so the ring a keyboard
+ * reader sees is a ring around the words rather than around the thing they are
+ * about. Prism's rings are per element at full strength, and a ring that does not
+ * bound the thing it names is not an indicator.
+ *
+ * **The selected row is marked, not only tinted.** `aria-current` carries the
+ * state and the surface repeats it for a reader who reads by eye, which is the
+ * same order the whole package keeps meaning in: the attribute is the fact and
+ * the colour is the reminder.
+ *
+ * It is a server Component. It holds no state, runs no effect and attaches no
+ * handler, so a list of two hundred rows costs no JavaScript at all.
+ */
+declare function Item({ entry, className, ...props }: ItemProps): import("react").JSX.Element;
+export { Item };
+//# sourceMappingURL=item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/ui/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;;OAMG;IACH,EAAE,EAAE,MAAM,CAAA;IACV,iEAAiE;IACjE,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,kCAAkC;AAClC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClF,wEAAwE;IACxE,KAAK,EAAE,SAAS,CAAA;IAChB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAyFtD;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/ui/item.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * A row in a list or a set: media, a text block, a value and trailing controls.
+ *
+ * **It is the row, and the list is the caller's.** That is the one decision worth
+ * making here, and it is a decision against making this a data-driven list. An
+ * Item renders one row and nothing about what encloses it, because the same row
+ * appears in a `<ul>`, in a definition list, in a card grid and in a table cell,
+ * and a Component that owned the list would have to own all four. A caller writes
+ * the list element its content actually is and puts rows in it; what they stop
+ * writing is the row.
+ *
+ * So a caller writes `<li><Item key={id} entry={row} /></li>` and gets a real list
+ * item, the count and the position in the accessibility tree, and a row whose
+ * geometry cannot drift from the row below it. The wrapper is one element, and
+ * the row is the part that was being re-derived in every list in this package.
+ *
+ * **The trailing controls are never the only route to the row.** `href` is a
+ * field on the row rather than something the actions have to carry, so the
+ * primary line is a real anchor a reader can tab to, see where it goes before
+ * taking it, and open in a new context. A row of forty with its only destination
+ * behind a kebab menu is a list a screen reader user cannot read, because the
+ * menu's contents are not in the document until the menu is open.
+ *
+ * **The title is not stretched over the whole row.** The obvious treatment for a
+ * clickable row is an anchor with `position: absolute; inset: 0` and the actions
+ * raised above it, which makes the entire row a hit target. It is refused for the
+ * focus indicator: the ring belongs to the anchor, and an anchor stretched over a
+ * row is a box that has sized itself to the text inside it, so the ring a keyboard
+ * reader sees is a ring around the words rather than around the thing they are
+ * about. Prism's rings are per element at full strength, and a ring that does not
+ * bound the thing it names is not an indicator.
+ *
+ * **The selected row is marked, not only tinted.** `aria-current` carries the
+ * state and the surface repeats it for a reader who reads by eye, which is the
+ * same order the whole package keeps meaning in: the attribute is the fact and
+ * the colour is the reminder.
+ *
+ * It is a server Component. It holds no state, runs no effect and attaches no
+ * handler, so a list of two hundred rows costs no JavaScript at all.
+ */
+function Item({ entry, className, ...props }) {
+    const { id, title, description, meta, href, media, actions, selected } = entry;
+    const hasActions = actions !== undefined && actions !== null && actions !== false;
+    return (_jsxs("div", { "data-slot": "item", "data-item": id, "data-selected": selected ? 'true' : undefined, "aria-current": selected ? 'true' : undefined, className: cn('flex items-center gap-3 px-3 py-2', 
+        // The row is only interactive when there is something to interact with, so
+        // the hover surface is conditional. A hover tint on a row that does
+        // nothing is a promise the row does not keep, and a reader learns to
+        // ignore the tint on every row in the list.
+        href === undefined ? '' : 'hover:bg-muted', selected ? 'bg-muted' : '', className), ...props, children: [media === undefined || media === null || media === false ? null : (
+            /*
+             * Media is left in the accessibility tree. An avatar and a thumbnail both
+             * carry information a row's text does not, and hiding the slot would make
+             * the caller's `alt` unreachable; a caller whose media really is
+             * decoration passes an `aria-hidden` image and decides that for itself,
+             * which is the only party that knows.
+             */
+            _jsx("div", { "data-slot": "item-media", className: "bg-muted flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full [&_img]:object-cover", children: media })), _jsxs("div", { "data-slot": "item-content", className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { "data-slot": "item-title", className: "min-w-0 truncate text-sm font-medium", children: href === undefined ? (title) : (_jsx("a", { "data-slot": "item-link", href: href, className: cn('hover:underline focus-visible:ring-ring rounded-sm outline-none focus-visible:ring-[3px]'), children: title })) }), description === undefined || description === null || description === false ? null : (_jsx("span", { "data-slot": "item-description", className: "text-muted-foreground min-w-0 truncate text-sm", children: description }))] }), meta === undefined || meta === null || meta === false ? null : (_jsx("span", { "data-slot": "item-meta", className: "text-muted-foreground shrink-0 text-sm tabular-nums", children: meta })), hasActions ? (_jsx("div", { "data-slot": "item-actions", className: "flex shrink-0 items-center gap-1", children: actions })) : null] }));
+}
+export { Item };

package/dist/components/ui/kbd.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * An inline label for a keyboard key or shortcut.
  *

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

@@ -0,0 +1,58 @@
+import type { ComponentProps } from 'react';
+/** The props the Label accepts. */
+export interface LabelProps extends ComponentProps<'label'> {
+    /**
+     * Whether the control this label names has to be filled in.
+     *
+     * It draws a mark and it says nothing to a screen reader, because the control's
+     * own `required` is what is announced. A mark that were read out would reach a
+     * reader as the field's name followed by a glyph, which is a name with a
+     * decoration on the end of it, and it is the wrong place for a requirement: the
+     * requirement is enforced by the control and reported by it.
+     *
+     * Put `required` on the control as well as here. This prop is what the reader
+     * can see; that one is what the form enforces.
+     */
+    required?: boolean;
+    /**
+     * The mark that shows a required field.
+     *
+     * A default rather than a fixed character, because the convention is the
+     * reader's: an asterisk, a word, a dagger, nothing at all and a note in the
+     * legend instead. A Component that chose one would ship one locale's convention
+     * into every consumer's product.
+     */
+    requiredText?: string;
+    /**
+     * Whether the control this label names is unavailable.
+     *
+     * The label dims with the control rather than staying at full strength, because
+     * a label at full strength over a greyed field reads as a field that has merely
+     * been styled. It is a statement about the field the reader is looking at, and
+     * the two states should not disagree.
+     */
+    disabled?: boolean;
+}
+/**
+ * The accessible name of a control, on its own.
+ *
+ * **`FieldLabel` is this, inside a field.** A label is needed wherever a control
+ * is, and a form binding is one place: a dialog's single input, a table's filter
+ * row, a settings line that has no group around it because there is nothing to
+ * group. `FieldLabel` draws the same thing and is the right choice beside a
+ * `Field`; this is the right choice when there is no field, and taking the field
+ * apart to get at its label would be rearranging a layout to reach one element of
+ * it.
+ *
+ * **It is a native `<label>` and the association is programmatic.** Pass the
+ * control's `id` as `htmlFor` so the name is attached rather than merely adjacent,
+ * because adjacent text is not a name: it is read by nobody when the reader tabs
+ * to the control, and a visible label with no `for` is a caption.
+ *
+ * **It is a server Component.** It reads props and renders, so a form built from
+ * it costs no client JavaScript for its labels, and that is most of what a form
+ * is.
+ */
+declare function Label({ className, required, requiredText, disabled, children, ...props }: LabelProps): import("react").JSX.Element;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,mCAAmC;AACnC,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,OAAO,CAAC;IACzD;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,QAAgB,EAChB,YAAkB,EAClB,QAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,+BAuBZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/label.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/**
+ * The accessible name of a control, on its own.
+ *
+ * **`FieldLabel` is this, inside a field.** A label is needed wherever a control
+ * is, and a form binding is one place: a dialog's single input, a table's filter
+ * row, a settings line that has no group around it because there is nothing to
+ * group. `FieldLabel` draws the same thing and is the right choice beside a
+ * `Field`; this is the right choice when there is no field, and taking the field
+ * apart to get at its label would be rearranging a layout to reach one element of
+ * it.
+ *
+ * **It is a native `<label>` and the association is programmatic.** Pass the
+ * control's `id` as `htmlFor` so the name is attached rather than merely adjacent,
+ * because adjacent text is not a name: it is read by nobody when the reader tabs
+ * to the control, and a visible label with no `for` is a caption.
+ *
+ * **It is a server Component.** It reads props and renders, so a form built from
+ * it costs no client JavaScript for its labels, and that is most of what a form
+ * is.
+ */
+function Label({ className, required = false, requiredText = '*', disabled = false, children, ...props }) {
+    return (_jsxs("label", { "data-slot": "label", "data-required": required || undefined, "data-disabled": disabled || undefined, className: cn('text-foreground text-sm leading-none font-medium', 
+        // No fill of its own, so there is no ink of its own to state: the label
+        // inherits whatever the surface it sits on already uses.
+        disabled && 'text-muted-foreground', className), ...props, children: [children, required ? (_jsx("span", { "data-slot": "label-required", "aria-hidden": "true", className: "text-destructive ms-1", children: requiredText })) : null] }));
+}
+export { Label };

package/dist/components/ui/live-region.d.ts

@@ -72,6 +72,15 @@ export interface LiveRegionProps extends Omit<ComponentProps<'div'>, 'children'>
  * receives what has arrived and announces it. That split is the same one the
  * documentation Page makes with its navigation, and the reason Prism stays
  * transport-agnostic and no consumer inherits a connection it did not ask for.
+ *
+ * **It is a server Component.** It reads its props, it holds no state, it runs no
+ * hook and it takes no event handler, so the client directive would be a claim
+ * about work this Component does not do. A live region is announced by the
+ * browser's own mutation observer rather than by JavaScript, which is the whole
+ * reason it is a good primitive: it works in a server-rendered page. A consumer
+ * that needs to pass an event handler to it does so from their own client
+ * boundary, which is the ordinary arrangement and is not this Component's to
+ * declare.
  */
 declare function LiveRegion({ className, children, politeness, busy, label, ...props }: LiveRegionProps): import("react").JSX.Element | null;
 export { LiveRegion };

package/dist/components/ui/live-region.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"live-region.d.ts","sourceRoot":"","sources":["../../../src/components/ui/live-region.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,WAAW,CAAA;AAEnD,yCAAyC;AACzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC9E;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,UAAqB,EACrB,IAAY,EACZ,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,sCAiCjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"live-region.d.ts","sourceRoot":"","sources":["../../../src/components/ui/live-region.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,WAAW,CAAA;AAEnD,yCAAyC;AACzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC9E;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,UAAqB,EACrB,IAAY,EACZ,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,sCAiCjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/ui/live-region.js

@@ -1,6 +1,5 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * A region that announces what just changed in it.
  *
@@ -21,6 +20,15 @@ import { cn } from '../../lib/utils';
  * receives what has arrived and announces it. That split is the same one the
  * documentation Page makes with its navigation, and the reason Prism stays
  * transport-agnostic and no consumer inherits a connection it did not ask for.
+ *
+ * **It is a server Component.** It reads its props, it holds no state, it runs no
+ * hook and it takes no event handler, so the client directive would be a claim
+ * about work this Component does not do. A live region is announced by the
+ * browser's own mutation observer rather than by JavaScript, which is the whole
+ * reason it is a good primitive: it works in a server-rendered page. A consumer
+ * that needs to pass an event handler to it does so from their own client
+ * boundary, which is the ordinary arrangement and is not this Component's to
+ * declare.
  */
 function LiveRegion({ className, children, politeness = 'polite', busy = false, label, ...props }) {
     // An empty region is not a region. Rendering the element with nothing in it

package/dist/components/ui/mark.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * The ranges as merged runs, with anything malformed dropped.
  *