@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/pack-switcher.d.ts

@@ -0,0 +1,221 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { PackId } from '../../theming/index.js';
+/**
+ * One pack a reader may put the page into.
+ *
+ * The two facts Prism needs and the one it does not. The id is the machine value
+ * and it is a `PackId` rather than a string, so a caller cannot offer a pack the
+ * token build never emitted. The name is the words a reader reads beside the
+ * mark, and it is the caller's because the word for a pack is the caller's: one
+ * product says "Appearance", another says "Brand colour", and neither is Prism's
+ * to pick. The description is Prism's least used field and it is the reason a
+ * switcher can be a settings row rather than a row of discs.
+ */
+export type PackSwitcherPack = {
+    /**
+     * The pack id, taken from the published set in `@nanisoft/prism-ui/theming`.
+     *
+     * Required, and typed rather than a string so a caller who renames a pack or
+     * spells it from memory gets a compile error instead of a button that switches
+     * to a pack no emitted rule matches. Nothing is written to the document from
+     * here: the id travels to the caller's `onChange` and the caller's handler is
+     * what applies it.
+     */
+    id: PackId;
+    /**
+     * The pack's name, in the words a reader of this product would use.
+     *
+     * Required, and a `string` because it is written into the `aria-label` of the
+     * mark and an accessible name is a string. There is no default and no generated
+     * name: the six packs Prism ships have no display name in the token source, so
+     * a name here is a word somebody chose, and a Component that supplied one would
+     * be shipping a word into a consumer's interface that the consumer cannot find
+     * to change.
+     */
+    name: string;
+    /**
+     * A sentence saying what this pack is, for a row that has room for one.
+     *
+     * Optional, and it makes the options taller, which is a real cost rather than a
+     * free extra: a compact chooser in a site header passes none of these and gets a
+     * row of chips, while a settings page passes them all and gets a list a reader
+     * can choose from rather than discriminate between. Omitted, the option is the
+     * mark and the name and nothing else.
+     */
+    description?: ReactNode;
+};
+/**
+ * The props a `PackSwitcher` takes.
+ *
+ * The element's own props are forwarded, and three of them are handled here
+ * rather than inherited. `children` is removed because the switcher draws its
+ * children from `packs` and a caller who passed any would be reaching past the
+ * list. `onChange` is removed because the group reports the selected pack's id
+ * and the element's own `onChange` is a form event this Component does not
+ * forward to anything. `defaultValue` is declared rather than removed, which is
+ * the same move `radio-group` makes and the reason is below it.
+ */
+export interface PackSwitcherProps extends Omit<ComponentProps<'div'>, 'onChange' | 'children'> {
+    /**
+     * There is no uncontrolled form, so the element's own `defaultValue` is not
+     * offered either.
+     *
+     * The underlying group declares it as a narrower type than the element does, so
+     * inheriting the element's version is a shape mismatch rather than a missing
+     * feature, and a switcher that rendered a pack the reader never chose because a
+     * form said so is a switcher that has repainted the page on its own. Pass
+     * `activePack`.
+     */
+    defaultValue?: never;
+    /**
+     * The packs a reader may choose from, in the order a reader should meet them.
+     *
+     * Required, and there is no default list. Prism ships six packs and could ship
+     * their names, and does not, because a name is a word in a consumer's interface
+     * rather than a value in the token source: "default" is a pack id whose display
+     * name in a product might be "Standard", "Neutral" or "As shipped", and a
+     * Component that decided would be wrong in at least two of those. The cost is
+     * real and it is paid on every call site: a consumer writes its list once, in
+     * its own language, and a consumer that wants to offer four of the six writes
+     * four. An empty list renders nothing at all, which is the same answer
+     * `ProductSwitcher` gives.
+     */
+    packs: readonly PackSwitcherPack[];
+    /**
+     * The pack the page is in, which is the option drawn as selected.
+     *
+     * Required, because a switcher that does not know where it is cannot mark where
+     * it is and would render a row of controls with no current state, which is a
+     * control a screen reader announces as an unanswered question.
+     *
+     * **An `activePack` that is not in `packs` marks nothing, and that is a state
+     * rather than a throw.** A site whose own default is a pack it does not offer a
+     * choice between is a real thing: it is the neutral base pack in a product that
+     * only wants to offer the five pastels, and it is the first load of a page whose
+     * stored pack has been retired. Throwing would take down a settings page over a
+     * list, and the honest rendering is a switcher with nothing selected, which a
+     * reader sees as a chooser they have not answered. The fix is the caller's list,
+     * and the Component does not guess which pack to select in place of the answer.
+     */
+    activePack: PackId;
+    /**
+     * Called with a pack's `id` when the reader selects that pack.
+     *
+     * Required, and the reason this Component exists is that it does not own what
+     * happens next. Applying a pack is a consumer's decision, because the three
+     * honest ways to do it are three consumer's decisions: the provider's `setPack`,
+     * which writes the two document attributes and persists the choice; a
+     * `data-pack` attribute on one subtree, which themes a preview and nothing else;
+     * and a value in a URL or a form, which is what a shared link and a checkout
+     * both need. A Component that took the provider's hook would own all three by
+     * deciding which one it is, and a Component that wrote the attribute itself
+     * would be a second writer of the two attributes, which is the race
+     * `data-theme-origin` exists to record rather than to have.
+     *
+     * The cost is stated rather than hidden. Every caller writes the wiring, which
+     * for the common case is three lines: a piece of state, a `setPack` from the
+     * provider's hook, and this handler. A caller who wants the switcher to persist
+     * the choice across a reload has to ask for the provider, and a caller who
+     * wants it in a URL has to write a parameter of their own. In exchange the
+     * Component is the one shape that works in all three, and the six-pack list
+     * arrives as data rather than as a hardcoded row.
+     */
+    onChange: (pack: PackId) => void;
+    /**
+     * The chooser's own accessible name, drawn as no visible text.
+     *
+     * Required, and not defaulted, for the reason every accessible name in this
+     * package is a prop: a consumer whose product calls them packs, palettes,
+     * brand colours or house styles announces the wrong word in every language but
+     * the one it was written in. The name is the radio group's name and it is not
+     * visible because the option names are the visible words; a caller who wants a
+     * visible heading puts one above the switcher and passes the same string, which
+     * is a `Field` and a `FieldLabel` rather than a prop here.
+     */
+    label: string;
+    /**
+     * The drawn size of every mark, so a set shows one size rather than a mix.
+     * @defaultValue 'sm'
+     */
+    swatchSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether each mark draws the pack's dark mode beside the mode the page is in.
+     * @defaultValue true
+     *
+     * `PackSwatch`'s own flag, passed straight through, and the answer is the same
+     * one it gives: a pack is two axes and a reader choosing between packs has to
+     * see both, because a pack's light and dark values are not one palette with the
+     * brightness turned down. Turn it off for a chooser in a header where the row
+     * has no vertical room, and pay for it: the reader then has to leave the row to
+     * see what the pack looks like in the other mode.
+     */
+    showModes?: boolean;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+}
+/**
+ * A control that changes which pack the page is drawn in, over a list the caller
+ * supplies.
+ *
+ * **It is the answer `PackSwatch` names in its own documentation.** That
+ * Component says a caller who wants a pack chooser has to build the chooser
+ * around six images rather than getting one, and that the answer is upstream, in a
+ * Component that owns the switching. This is that Component, and the reason the
+ * gap was worth closing is measured rather than asserted: the mark, the current
+ * marking, the keyboard model and the change to the page are four separate things,
+ * and a consumer who composes them by hand gets four chances to make a control
+ * that looks like it changes the pack and does not.
+ *
+ * **The set is a radio group, because exactly one of them is always the pack the
+ * page is in and choosing either of any two leaves the same state as choosing the
+ * other.** That is the definition of a single-choice set, and the alternatives
+ * were each worse in a way a reader pays for. A row of toggle buttons takes one
+ * tab stop per pack and announces a group of toggles, so a reader who has learned
+ * that the arrow keys move inside a radio group has to learn a different model in
+ * this row. A list of links moves the page, which is the wrong consequence for a
+ * setting: the pack is a preference and a preference that navigates is a
+ * preference a reader cannot set on the page they are reading. A `Select` would be
+ * right for forty packs and wrong for six, and the count of packs is a fact about
+ * the token build rather than about a consumer's product.
+ *
+ * **The selected option carries `aria-checked` and the fill repeats it.** The
+ * order is the one the whole package keeps: the attribute is the fact and the
+ * colour is the reminder, so a reader who cannot separate `primary` from
+ * `background` and a reader using a screen reader are told the same thing. It is
+ * also why the unselected option is a quiet outline rather than a tinted surface,
+ * because a row in which five options carry a fill and one carries a stronger fill
+ * is a row where the reader is looking for the odd one out.
+ *
+ * **The mark is `PackSwatch` and the mark is hidden from assistive technology.**
+ * The swatch is a picture of a palette whose name is already the option's name,
+ * so it is wrapped in `aria-hidden` rather than left to be read: an option
+ * announced as "Blush image, Blush, radio button, selected, 1 of 6" says the
+ * word twice and the reader has to work out which half is the name. The visible
+ * words name the control, the `PackSwatch` shows what the choice looks like, and
+ * the two cannot disagree because the mark is generated from the same id as the
+ * selection. The cost is that `PackSwatch` requires a `label` this Component
+ * passes and no reader ever hears, which is a prop whose purpose is documented
+ * where the mark is drawn rather than here.
+ *
+ * **One pack per press and no transition between packs.** The change is a
+ * repaint of every token on the page, which is the consequence the reader asked
+ * for, and a cross-fade between the two palettes would be two hundred milliseconds
+ * of movement nobody asked for and could not act on. Motion is by token and this
+ * Component uses the hover and focus feedback the rest of the package uses, and
+ * nothing else.
+ *
+ * **It carries no directive about where the pack goes, and it is a client
+ * Component because the callback is one.** The directive is unconditional for the
+ * reason `AddressBook01` gives in full: a surface that attaches a handler belongs
+ * in the client graph, and the boundary sits on the module rather than in a leaf so
+ * that a consumer composing a server page finds it in one place they can see. The
+ * cost is that a consumer who has already resolved the active pack from a stored
+ * value and passes a handler that writes to nothing still puts this whole module
+ * in their client bundle, where a static row of six images would have shipped no
+ * JavaScript at all. That is the price of the Component owning the selection, the
+ * marking and the keyboard model rather than leaving three of them to every
+ * consumer.
+ */
+declare function PackSwitcher({ packs, activePack, onChange, label, swatchSize, showModes, className, ...props }: PackSwitcherProps): import("react").JSX.Element | null;
+export { PackSwitcher };
+//# sourceMappingURL=pack-switcher.d.ts.map

package/dist/components/ui/pack-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pack-switcher.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pack-switcher.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAG3C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;;OAQG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;;;;OASG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;CACxB,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC5D;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAA;IAClC;;;;;;;;;;;;;;;OAeG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC;;;;;;;;;;OAUG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC/B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,KAAK,EACL,UAAiB,EACjB,SAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,sCAmFnB;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ui/pack-switcher.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { PackSwatch } from './pack-swatch.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A control that changes which pack the page is drawn in, over a list the caller
+ * supplies.
+ *
+ * **It is the answer `PackSwatch` names in its own documentation.** That
+ * Component says a caller who wants a pack chooser has to build the chooser
+ * around six images rather than getting one, and that the answer is upstream, in a
+ * Component that owns the switching. This is that Component, and the reason the
+ * gap was worth closing is measured rather than asserted: the mark, the current
+ * marking, the keyboard model and the change to the page are four separate things,
+ * and a consumer who composes them by hand gets four chances to make a control
+ * that looks like it changes the pack and does not.
+ *
+ * **The set is a radio group, because exactly one of them is always the pack the
+ * page is in and choosing either of any two leaves the same state as choosing the
+ * other.** That is the definition of a single-choice set, and the alternatives
+ * were each worse in a way a reader pays for. A row of toggle buttons takes one
+ * tab stop per pack and announces a group of toggles, so a reader who has learned
+ * that the arrow keys move inside a radio group has to learn a different model in
+ * this row. A list of links moves the page, which is the wrong consequence for a
+ * setting: the pack is a preference and a preference that navigates is a
+ * preference a reader cannot set on the page they are reading. A `Select` would be
+ * right for forty packs and wrong for six, and the count of packs is a fact about
+ * the token build rather than about a consumer's product.
+ *
+ * **The selected option carries `aria-checked` and the fill repeats it.** The
+ * order is the one the whole package keeps: the attribute is the fact and the
+ * colour is the reminder, so a reader who cannot separate `primary` from
+ * `background` and a reader using a screen reader are told the same thing. It is
+ * also why the unselected option is a quiet outline rather than a tinted surface,
+ * because a row in which five options carry a fill and one carries a stronger fill
+ * is a row where the reader is looking for the odd one out.
+ *
+ * **The mark is `PackSwatch` and the mark is hidden from assistive technology.**
+ * The swatch is a picture of a palette whose name is already the option's name,
+ * so it is wrapped in `aria-hidden` rather than left to be read: an option
+ * announced as "Blush image, Blush, radio button, selected, 1 of 6" says the
+ * word twice and the reader has to work out which half is the name. The visible
+ * words name the control, the `PackSwatch` shows what the choice looks like, and
+ * the two cannot disagree because the mark is generated from the same id as the
+ * selection. The cost is that `PackSwatch` requires a `label` this Component
+ * passes and no reader ever hears, which is a prop whose purpose is documented
+ * where the mark is drawn rather than here.
+ *
+ * **One pack per press and no transition between packs.** The change is a
+ * repaint of every token on the page, which is the consequence the reader asked
+ * for, and a cross-fade between the two palettes would be two hundred milliseconds
+ * of movement nobody asked for and could not act on. Motion is by token and this
+ * Component uses the hover and focus feedback the rest of the package uses, and
+ * nothing else.
+ *
+ * **It carries no directive about where the pack goes, and it is a client
+ * Component because the callback is one.** The directive is unconditional for the
+ * reason `AddressBook01` gives in full: a surface that attaches a handler belongs
+ * in the client graph, and the boundary sits on the module rather than in a leaf so
+ * that a consumer composing a server page finds it in one place they can see. The
+ * cost is that a consumer who has already resolved the active pack from a stored
+ * value and passes a handler that writes to nothing still puts this whole module
+ * in their client bundle, where a static row of six images would have shipped no
+ * JavaScript at all. That is the price of the Component owning the selection, the
+ * marking and the keyboard model rather than leaving three of them to every
+ * consumer.
+ */
+function PackSwitcher({ packs, activePack, onChange, label, swatchSize = 'sm', showModes = true, className, ...props }) {
+    if (packs.length === 0)
+        return null;
+    return (_jsx(RadioGroupPrimitive, { "data-slot": "pack-switcher", "aria-label": label, value: activePack, onValueChange: (next) => {
+            /*
+             * The cast is total rather than a guess. This Component is the only thing
+             * in the tree that set a radio's value, and every value it set was a
+             * member's `id`, which is a `PackId`. The compiler cannot see that, so the
+             * assertion is written here where the reason is, rather than hidden in a
+             * signature a consumer reads.
+             */
+            onChange(next);
+        }, className: cn('flex flex-wrap items-center gap-2', className), ...props, children: packs.map((pack) => (_jsxs(RadioPrimitive.Root, { value: pack.id, "data-slot": "pack-switcher-option", className: cn(
+            // The selected option states both halves of its surface, which is the
+            // Stated Ink Rule and not a preference: an option that set only a fill
+            // would inherit whatever ink happened to be behind it, and the token
+            // gate measures token pairs rather than what a Component leaves out.
+            'border-border bg-background text-foreground hover:bg-muted', 'data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground', 
+            // The span Base UI's radio renders, so the row is composed here and the
+            // `max-w-full` is what lets the name truncate rather than widen the row.
+            'inline-flex min-w-0 max-w-full items-center gap-2 rounded-full border px-2 py-1 text-sm font-medium', 'transition-colors duration-fast ease-out', 'outline-none focus-visible:ring-ring focus-visible:ring-[3px]'), children: [_jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center", children: _jsx(PackSwatch, { pack: pack.id, label: pack.name, showModes: showModes, size: swatchSize }) }), _jsxs("span", { "data-slot": "pack-switcher-option-text", className: "flex min-w-0 flex-col", children: [_jsx("span", { "data-slot": "pack-switcher-option-name", className: "truncate", children: pack.name }), pack.description === undefined ||
+                            pack.description === null ||
+                            pack.description === false ? null : (_jsx("span", { "data-slot": "pack-switcher-option-description", className: "text-muted-foreground text-pretty text-xs font-normal", children: pack.description }))] })] }, pack.id))) }));
+}
+export { PackSwitcher };

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

@@ -21,6 +21,19 @@ declare function PaginationItem({ className, ...props }: ComponentProps<'li'>):
  *
  * Renders a native `<a>`; set `isActive` on the current page so it is marked
  * with `aria-current="page"`.
+ *
+ * **The coarse-pointer floor, and it is a step with `min-w-11` beside it, which is
+ * the arrangement `button.tsx` states.** Every size here is a height, and the width of
+ * a page link is its content: a one-digit link at `h-11` with `px-3` is 20 pixels
+ * wide, so growing the height alone would leave it under the floor across. The three
+ * sized arms therefore take `pointer-coarse:h-11 pointer-coarse:min-w-11` and the
+ * `icon` arm takes `pointer-coarse:size-11`, which is the same split `Button` makes
+ * between its content-sized and icon sizes.
+ *
+ * The consequence worth stating: `PaginationPrevious` and `PaginationNext` pass
+ * `size="default"` and override the padding to `px-2.5`, so on a phone they are an
+ * icon and a hidden word. Their width comes from the content and is under 44 without
+ * `min-w-11`, which is why it is here rather than only on the `icon` arm.
  */
 declare function PaginationLink({ className, isActive, size, ...props }: ComponentProps<'a'> & {
     isActive?: boolean;
@@ -52,6 +65,15 @@ declare function PaginationNext({ className, text, label, ...props }: ComponentP
  *
  * It is hidden from assistive technology because the page links around it
  * already name the range, and it is not focusable.
+ *
+ * **The coarse-pointer floor is deliberately absent here, and the reason is worth
+ * stating because this element is 36px square and looks like every other finding in
+ * this sweep.** It is a `<span aria-hidden="true">`: it is not a target, it takes no
+ * focus, it is announced by nothing, and a press on it falls through to the page
+ * behind it. Growing it would move the ellipsis three pixels and pay the floor on
+ * something no reader is aiming at. The links on either side of it are the targets
+ * and they take the floor in `PaginationLink`. The floor is a claim about targets a
+ * finger is asked to hit, and this is not one. See DESIGN.md, The coarse-pointer floor.
  */
 declare function PaginationEllipsis({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, };

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,KAAK,cAAc,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAEtD;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAoB,EACpB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAS5C;AAED,0CAA0C;AAC1C,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAQvE;AAED,wEAAwE;AACxE,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAEpE;AAED;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,+BAoBrE;AAED;;;;;;;GAOG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAiB,EACjB,KAAiC,EACjC,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3E;AAED;;;;GAIG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAa,EACb,KAA6B,EAC7B,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3E;AAED;;;;;GAKG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,+BAW1E;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,KAAK,cAAc,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAEtD;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAoB,EACpB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAS5C;AAED,0CAA0C;AAC1C,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAQvE;AAED,wEAAwE;AACxE,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAEpE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,+BAoBrE;AAED;;;;;;;GAOG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAiB,EACjB,KAAiC,EACjC,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3E;AAED;;;;GAIG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAa,EACb,KAA6B,EAC7B,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3E;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,+BAW1E;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,kBAAkB,GACnB,CAAA"}

package/dist/components/ui/pagination.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * The control that moves between pages of a paged collection.
  *
@@ -26,9 +26,22 @@ function PaginationItem({ className, ...props }) {
  *
  * Renders a native `<a>`; set `isActive` on the current page so it is marked
  * with `aria-current="page"`.
+ *
+ * **The coarse-pointer floor, and it is a step with `min-w-11` beside it, which is
+ * the arrangement `button.tsx` states.** Every size here is a height, and the width of
+ * a page link is its content: a one-digit link at `h-11` with `px-3` is 20 pixels
+ * wide, so growing the height alone would leave it under the floor across. The three
+ * sized arms therefore take `pointer-coarse:h-11 pointer-coarse:min-w-11` and the
+ * `icon` arm takes `pointer-coarse:size-11`, which is the same split `Button` makes
+ * between its content-sized and icon sizes.
+ *
+ * The consequence worth stating: `PaginationPrevious` and `PaginationNext` pass
+ * `size="default"` and override the padding to `px-2.5`, so on a phone they are an
+ * icon and a hidden word. Their width comes from the content and is under 44 without
+ * `min-w-11`, which is why it is here rather than only on the `icon` arm.
  */
 function PaginationLink({ className, isActive, size = 'icon', ...props }) {
-    return (_jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive ? 'true' : undefined, className: cn('inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap outline-none transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50', size === 'default' && 'h-9 px-4 py-2', size === 'sm' && 'h-8 px-3', size === 'lg' && 'h-10 px-6', size === 'icon' && 'size-9', isActive
+    return (_jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive ? 'true' : undefined, className: cn('inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap outline-none transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50', size === 'default' && 'h-9 px-4 py-2 pointer-coarse:h-11 pointer-coarse:min-w-11', size === 'sm' && 'h-8 px-3 pointer-coarse:h-11 pointer-coarse:min-w-11', size === 'lg' && 'h-10 px-6 pointer-coarse:h-11 pointer-coarse:min-w-11', size === 'icon' && 'size-9 pointer-coarse:size-11', isActive
             ? 'border-border bg-background text-foreground border'
             : 'text-foreground hover:bg-accent hover:text-accent-foreground', className), ...props }));
 }
@@ -56,6 +69,15 @@ function PaginationNext({ className, text = 'Next', label = 'Go to the next page
  *
  * It is hidden from assistive technology because the page links around it
  * already name the range, and it is not focusable.
+ *
+ * **The coarse-pointer floor is deliberately absent here, and the reason is worth
+ * stating because this element is 36px square and looks like every other finding in
+ * this sweep.** It is a `<span aria-hidden="true">`: it is not a target, it takes no
+ * focus, it is announced by nothing, and a press on it falls through to the page
+ * behind it. Growing it would move the ellipsis three pixels and pay the floor on
+ * something no reader is aiming at. The links on either side of it are the targets
+ * and they take the floor in `PaginationLink`. The floor is a claim about targets a
+ * finger is asked to hit, and this is not one. See DESIGN.md, The coarse-pointer floor.
  */
 function PaginationEllipsis({ className, ...props }) {
     return (_jsx("span", { "data-slot": "pagination-ellipsis", "aria-hidden": "true", className: cn('flex size-9 items-center justify-center', className), ...props, children: _jsx(MoreHorizontal, { className: "size-4" }) }));

package/dist/components/ui/password-field.d.ts

@@ -0,0 +1,122 @@
+import { type ReactNode } from 'react';
+/** The props the Password field accepts. */
+export interface PasswordFieldProps {
+    /**
+     * The password as the caller holds it.
+     *
+     * Required, and the field is controlled because of it, for the same reason the
+     * search field is: a value the Component cannot see is a value it cannot hand
+     * to a reveal control, to a clear control or to a form on submit.
+     */
+    value: string;
+    /**
+     * Called with the password as the reader changes it.
+     *
+     * Required. There is no uncontrolled arm here, because a password field with
+     * no caller holding its value cannot be submitted by a server action and
+     * cannot be cleared when the reader has given up on the form.
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * The field's visible name, drawn above the control.
+     *
+     * Required, and a node rather than a string because a sign-in form's label
+     * often carries more than one word: a product name, a hint about which of two
+     * accounts it belongs to. The accessible name comes from the same node through
+     * the label element.
+     */
+    label: ReactNode;
+    /**
+     * A short helper line under the control, announced with it.
+     *
+     * Replaced by `error` while the field is invalid rather than stacked under it,
+     * so the reader has one instruction at a time.
+     */
+    description?: ReactNode;
+    /**
+     * What is wrong with the entry, drawn in the destructive token and announced
+     * as it appears. Also marks the control `aria-invalid`.
+     *
+     * Never write the entered value into an error about a password. The message
+     * is the caller's sentence about their own product.
+     */
+    error?: ReactNode;
+    /**
+     * The accessible name of the control while the password is hidden.
+     *
+     * Required, and a prop because a screen reader reads it. A reveal control that
+     * says "Show password" in a product whose interface is in another language is
+     * the exact defect `check-block-copy` was written to end: the control looks
+     * localised because the icon is the same everywhere, and the half a reader
+     * actually hears is English.
+     */
+    revealLabel: string;
+    /**
+     * The accessible name of the control while the password is showing.
+     *
+     * Required for the same reason as `revealLabel`, and it is a second sentence
+     * rather than a state flag because the name has to describe what pressing the
+     * control will do, not what is currently true.
+     */
+    hideLabel: string;
+    /**
+     * The form field name the platform's password manager offers to save.
+     *
+     * Defaults to `current-password`, which is the right answer for a sign-in and
+     * the wrong one for a new password, a confirmation and a change. Pass
+     * `new-password` for the last three: a password manager that offers to save a
+     * new password as if the reader were signing in produces an account nobody can
+     * sign into.
+     */
+    autoComplete?: string;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A password input with a reveal toggle.
+ *
+ * **The reveal control is a Component and not a caller's own button.** A toggle
+ * a consumer writes is a `<button>` with three things that can each be wrong in
+ * a way nothing on screen shows. Leave `type` off and it is a submit button by
+ * default, so pressing it on a form that submits on enter posts the form, and
+ * the reader's half-typed password is sent before they have read a character of
+ * it. Give it no accessible name and it is announced as "button", so the only
+ * way a keyboard or screen reader user finds it is by counting buttons. Give it
+ * a real name in one language and ship it into a product in another. All three
+ * are silent, all three typecheck, and none of them is visible in a screenshot
+ * of the field, which is where this defect is normally caught. So the button is
+ * here, with `type="button"` already set, a name the caller wrote, and the
+ * `type` toggle on the input already wired.
+ *
+ * **The two names are props rather than a label and a boolean.** The alternative
+ * was one name, "Show password", plus `aria-pressed` to carry the state. It is a
+ * real pattern and it needs a sentence for the state that no one asked for, and
+ * it is wrong in a way that is easy to miss: a name that describes the current
+ * state rather than the next action means the reader has to combine what the
+ * control is with what pressing it will do, every time. Two names are two
+ * sentences for the caller to write, which is a cost, and it buys a control
+ * whose announced name is always the thing it does next.
+ *
+ * **The reveal state is local and is not reported.** Nothing outside this
+ * Component needs to know whether a password is currently on screen: the value
+ * is the same either way, the field submits the same either way, and a
+ * `revealed` prop would be a second source of truth for a fact that only this
+ * control cares about. What a consumer does need is to be able to clear the
+ * field, and it can, because the field is controlled and `onValueChange` takes an
+ * empty string.
+ *
+ * **The `autoComplete` default is right for a sign-in and wrong for everything
+ * else.** `current-password` is a platform hint, and the platform uses it to
+ * decide whether to offer to fill a field it already knows and whether to offer
+ * to save the entry. Getting it wrong on a registration form produces an account
+ * whose password the browser will not offer to sign in with. The default is
+ * there so the common case is right without a prop, and the JSDoc above says
+ * plainly that the other three cases have to say so.
+ *
+ * It needs the client directive because it holds one piece of state, the reveal
+ * toggle, and that state is what a server render cannot know: whether a reader
+ * has looked at their own password is decided after the HTML is sent.
+ */
+declare function PasswordField({ value, onValueChange, label, description, error, revealLabel, hideLabel, autoComplete, className, }: PasswordFieldProps): import("react").JSX.Element;
+export { PasswordField };
+//# sourceMappingURL=password-field.d.ts.map

package/dist/components/ui/password-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/password-field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAMvD,4CAA4C;AAC5C,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC;;;;;;;OAOG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;OAQG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,aAAa,EACb,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,EACX,SAAS,EACT,YAAiC,EACjC,SAAS,GACV,EAAE,kBAAkB,+BAmDpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/password-field.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import { useId, useState } from 'react';
+import { Field, FieldDescription, FieldError, FieldLabel } from './field.js';
+import { InputGroup, InputGroupButton, InputGroupInput } from './input-group.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A password input with a reveal toggle.
+ *
+ * **The reveal control is a Component and not a caller's own button.** A toggle
+ * a consumer writes is a `<button>` with three things that can each be wrong in
+ * a way nothing on screen shows. Leave `type` off and it is a submit button by
+ * default, so pressing it on a form that submits on enter posts the form, and
+ * the reader's half-typed password is sent before they have read a character of
+ * it. Give it no accessible name and it is announced as "button", so the only
+ * way a keyboard or screen reader user finds it is by counting buttons. Give it
+ * a real name in one language and ship it into a product in another. All three
+ * are silent, all three typecheck, and none of them is visible in a screenshot
+ * of the field, which is where this defect is normally caught. So the button is
+ * here, with `type="button"` already set, a name the caller wrote, and the
+ * `type` toggle on the input already wired.
+ *
+ * **The two names are props rather than a label and a boolean.** The alternative
+ * was one name, "Show password", plus `aria-pressed` to carry the state. It is a
+ * real pattern and it needs a sentence for the state that no one asked for, and
+ * it is wrong in a way that is easy to miss: a name that describes the current
+ * state rather than the next action means the reader has to combine what the
+ * control is with what pressing it will do, every time. Two names are two
+ * sentences for the caller to write, which is a cost, and it buys a control
+ * whose announced name is always the thing it does next.
+ *
+ * **The reveal state is local and is not reported.** Nothing outside this
+ * Component needs to know whether a password is currently on screen: the value
+ * is the same either way, the field submits the same either way, and a
+ * `revealed` prop would be a second source of truth for a fact that only this
+ * control cares about. What a consumer does need is to be able to clear the
+ * field, and it can, because the field is controlled and `onValueChange` takes an
+ * empty string.
+ *
+ * **The `autoComplete` default is right for a sign-in and wrong for everything
+ * else.** `current-password` is a platform hint, and the platform uses it to
+ * decide whether to offer to fill a field it already knows and whether to offer
+ * to save the entry. Getting it wrong on a registration form produces an account
+ * whose password the browser will not offer to sign in with. The default is
+ * there so the common case is right without a prop, and the JSDoc above says
+ * plainly that the other three cases have to say so.
+ *
+ * It needs the client directive because it holds one piece of state, the reveal
+ * toggle, and that state is what a server render cannot know: whether a reader
+ * has looked at their own password is decided after the HTML is sent.
+ */
+function PasswordField({ value, onValueChange, label, description, error, revealLabel, hideLabel, autoComplete = 'current-password', className, }) {
+    const [revealed, setRevealed] = useState(false);
+    const generated = useId();
+    const inputId = `${generated}-input`;
+    const invalid = error !== undefined;
+    const descriptionId = description === undefined ? undefined : `${generated}-description`;
+    const errorId = invalid ? `${generated}-error` : undefined;
+    // The error comes first when both are present, so the reader hears what is
+    // wrong before the background detail, which is the order the two are drawn in.
+    const describedBy = errorId === undefined
+        ? descriptionId
+        : descriptionId === undefined
+            ? errorId
+            : `${errorId} ${descriptionId}`;
+    return (_jsx("div", { "data-slot": "password-field", className: cn('flex w-full flex-col', className), children: _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: inputId, children: label }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { id: inputId, type: revealed ? 'text' : 'password', value: value, onChange: (event) => onValueChange(event.target.value), autoComplete: autoComplete, "aria-invalid": invalid || undefined, "aria-describedby": describedBy }), _jsx(InputGroupButton, { "data-slot": "password-field-reveal", "aria-label": revealed ? hideLabel : revealLabel, onClick: () => setRevealed((was) => !was), children: revealed ? (_jsx(EyeOffIcon, { className: "size-4", "aria-hidden": "true" })) : (_jsx(EyeIcon, { className: "size-4", "aria-hidden": "true" })) })] }), invalid ? _jsx(FieldError, { id: errorId, children: error }) : null, descriptionId === undefined ? null : (_jsx(FieldDescription, { id: descriptionId, children: description }))] }) }));
+}
+export { PasswordField };