@nanisoft/prism-ui 0.10.1 → 0.13.0

package/dist/components/ui/native-select.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+/**
+ * A native `<select>`, styled to match the rest of this package.
+ *
+ * **This is not a second Select, and the difference is which element is on the
+ * page.** The `Select` in this package is Base UI's: a `<button>` carrying
+ * `role="combobox"` and a popup list Base UI positions, types into and manages the
+ * keyboard for. It is a custom control, and everything it offers over the platform
+ * is the price of being one: it needs JavaScript to open, it cannot be operated by
+ * the mobile picker a reader expects when they tap a select on a phone, it is
+ * invisible to a right-click menu that offers "Save as", and it is a set of `div`s
+ * where the browser's own is one element with thirty years of platform behaviour
+ * behind it.
+ *
+ * So this Component renders the platform element. Everything the browser does with
+ * a `<select>` it still does: the wheel on Windows, the wheel on macOS and iOS,
+ * type-ahead on the first letter, the mobile picker, the form submission, and the
+ * context menu. The styling is the package's, so the control looks like its
+ * neighbours, and the appearance is suppressed so the drawn chevron is Prism's
+ * rather than the platform's.
+ *
+ * **When this is the right answer rather than the compromise it sounds like.** A
+ * native select is right when the platform's picker is better than anything this
+ * package could draw: a long list of plain strings on a phone, a form that must
+ * submit without JavaScript, a control inside a page that is already a form and
+ * gains nothing from a popup that is portalled and dismissed. It is wrong when the
+ * option needs to be more than a string, because an `<option>` holds text and
+ * nothing else: no description, no count, no state, no nested markup. That is the
+ * line, and the `Select` is on the other side of it.
+ *
+ * **The chevron is decoration and says so.** It is `aria-hidden` and it is not
+ * focusable, because the value is already announced by the platform control and a
+ * reader hearing "graphic" after every option set is a reader being told something
+ * about the drawing rather than about the value. The control is one tab stop and
+ * the browser owns its key handling entirely, which is the point.
+ *
+ * It is a server Component. A native select holds no state, runs no effect and
+ * attaches no handler, so a form of twenty of them costs no JavaScript at all,
+ * which is a real answer to the argument above rather than a footnote to it.
+ */
+function NativeSelect({ className, size = 'default', children, ...props }) {
+    return (_jsxs("div", { "data-slot": "native-select", className: "relative w-full", children: [_jsx("select", { "data-slot": "native-select-control", className: cn(
+                // `appearance-none` is what lets the chevron be drawn rather than
+                // inherited: the platform's own arrow is the one piece of this control
+                // that would otherwise belong to no design system, and the whole reason
+                // this Component exists is to take that over.
+                'border-input bg-background text-foreground w-full appearance-none rounded-md border ps-3 pe-9 text-sm outline-none', 'transition-[color,box-shadow,border-color] duration-fast ease-out', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:cursor-not-allowed disabled:opacity-50', 
+                // The font is inherited explicitly, because a `<select>` does not
+                // inherit one in every engine and a control in the platform's face
+                // beside text in Inter is a control nobody designed.
+                'font-inherit', size === 'sm' ? 'h-8' : 'h-9', className), ...props, children: children }), _jsx("span", { "data-slot": "native-select-icon", "aria-hidden": "true", className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 flex size-4 -translate-y-1/2 items-center justify-center", children: _jsx(ChevronDownIcon, { className: "size-4" }) })] }));
+}
+export { NativeSelect };

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

@@ -0,0 +1,186 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props the NavigationMenu 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 NavigationMenuProps extends Omit<ComponentProps<'nav'>, 'defaultValue'> {
+    /**
+     * The accessible name of this region of links.
+     *
+     * Required rather than defaulted, because the root renders a `<nav>`, and a
+     * `<nav>` with no name is a landmark a screen reader announces only as
+     * "navigation". A site header's primary links and a footer link list are both
+     * `<nav>`, and a reader moving between them is told nothing about which is
+     * which. The name is the caller's word and it is usually the region: primary,
+     * product, footer.
+     */
+    label: string;
+    /** The controlled value of the open group. */
+    value?: string | null;
+    /** The group open initially, for an uncontrolled menu. */
+    defaultValue?: string | null;
+    /** Called when the open group changes. */
+    onValueChange?: (value: string | null) => void;
+    /** Whether the groups stack. @defaultValue horizontal */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * How long the pointer must rest on a trigger before the group opens, in
+     * milliseconds.
+     *
+     * The default is short because this is a menu of links rather than of
+     * previews: the reader is about to take one of these addresses, and a rest
+     * followed by a long wait is a rest they will conclude did nothing.
+     *
+     * @defaultValue 50
+     */
+    delay?: number;
+    /** How long the group stays open after the pointer leaves it, in milliseconds. @defaultValue 50 */
+    closeDelay?: number;
+}
+/** The props NavigationMenuList forwards to Base UI. */
+export interface NavigationMenuListProps extends ComponentProps<'ul'> {
+}
+/**
+ * The props NavigationMenuItem 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 NavigationMenuItemProps extends ComponentProps<'li'> {
+    /** The value this item contributes to the root, and the value its trigger opens. */
+    value: string;
+}
+/** The props NavigationMenuTrigger forwards to Base UI. */
+export interface NavigationMenuTriggerProps extends ComponentProps<'button'> {
+}
+/** The props NavigationMenuContent forwards to Base UI. */
+export interface NavigationMenuContentProps extends ComponentProps<'div'> {
+    /**
+     * Whether the closed group stays in the DOM.
+     *
+     * A navigation menu is the one overlay here a crawler reads. Every other
+     * popup is unmounted when closed, and that is right for them, but a closed
+     * navigation group holding the links of a site header is the only place a
+     * reader, a crawler and a reader with JavaScript off all see the same set of
+     * addresses, so a consumer who needs the header to read the same either way
+     * turns this on and owns the layout shift that follows.
+     *
+     * @defaultValue false
+     */
+    keepMounted?: boolean;
+}
+/**
+ * The props NavigationMenuLink 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 NavigationMenuLinkProps extends ComponentProps<'a'> {
+    /**
+     * Whether this link is the page the reader is on.
+     *
+     * Required, and required for a reason a colour cannot express: a navigation
+     * menu that does not say where the reader is has made them guess. It is
+     * rendered as `aria-current="page"` rather than as a fill, so a reader who
+     * cannot distinguish the active colour still knows they are in the right
+     * place, and so the marking survives a theme change.
+     */
+    active?: boolean;
+    /** Whether taking the link closes the group. @defaultValue false */
+    closeOnClick?: boolean;
+}
+/** The props NavigationMenuIcon forwards to Base UI. */
+export interface NavigationMenuIconProps extends ComponentProps<'span'> {
+}
+/**
+ * The props NavigationMenuPortal forward 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 NavigationMenuPortalProps extends ComponentProps<'div'> {
+}
+/** The props NavigationMenuPositioner forwards to Base UI. */
+export interface NavigationMenuPositionerProps extends ComponentProps<'div'> {
+    /** The distance in pixels between the trigger and the group. @defaultValue 8 */
+    sideOffset?: number;
+    /** The offset in pixels along the alignment axis. @defaultValue 0 */
+    alignOffset?: number;
+}
+/** The props NavigationMenuPopup forwards to Base UI. */
+export interface NavigationMenuPopupProps extends ComponentProps<'nav'> {
+}
+/** The props NavigationMenuViewport forwards to Base UI. */
+export interface NavigationMenuViewportProps extends ComponentProps<'div'> {
+}
+/** The props NavigationMenuBackdrop forwards to Base UI. */
+export interface NavigationMenuBackdropProps extends ComponentProps<'div'> {
+}
+/**
+ * A list of links with groups that expand and collapse.
+ *
+ * **It knows it holds links, and that is what every part is for.** A link can be
+ * opened in a new tab, copied by address, middle-clicked and crawled; a command
+ * cannot do any of those, and a menu that renders a command where a reader
+ * expected a destination gives them a middle-click that does nothing. So
+ * `NavigationMenuLink` is the only interactive leaf here and it is a native
+ * anchor, there is no command part to reach for by mistake, and a caller who
+ * wants commands in a header is using a Menubar or a DropdownMenu instead.
+ * `active` is a required prop on the link because a navigation menu that does
+ * not say where the reader is has made them guess.
+ *
+ * **A closed group shows nothing, and that is deliberate.** The list is a
+ * `<ul>` of triggers, and the links live in a group that is only in the document
+ * while it is open. A reader with JavaScript off, and a crawler, therefore see
+ * the triggers and nothing else, which is why `NavigationMenuContent` takes
+ * `keepMounted` for the consumer who needs the header to read the same either
+ * way and owns the layout shift that follows. Do not put a destination only in
+ * a closed group.
+ *
+ * The bar is one Tab stop: Tab moves through the triggers and into the open
+ * group, Escape closes the group and returns focus to the trigger that opened
+ * it. Use a Menubar for an application window's commands and a DropdownMenu for
+ * a menu attached to one control.
+ */
+declare function NavigationMenu({ className, label, orientation, ...props }: NavigationMenuProps): import("react").JSX.Element;
+/** The row of group triggers. */
+declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react").JSX.Element;
+/** One group: a trigger and the links it opens. */
+declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
+/**
+ * The control that opens a group, and the only Tab stop for it.
+ *
+ * It is a real button and it owns the expanded state, so a reader knows the
+ * group is open before they enter it. The chevron rotates on the open state
+ * rather than on a timer, which is the only motion here: something happened and
+ * the reader can see that it did.
+ */
+declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
+/** The group of links a trigger opens. */
+declare function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps): import("react").JSX.Element;
+/**
+ * One destination, rendered as a native anchor.
+ *
+ * This is the only interactive leaf the Component ships, and the reason is the
+ * difference between a link and a command: a link carries an address, so the
+ * browser can open it in a new tab, copy it, and a crawler can follow it. A
+ * command has none of those, and a header that renders commands where a reader
+ * expected destinations is a header whose links cannot be shared.
+ */
+declare function NavigationMenuLink({ className, active, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
+/** The chevron slot, so a caller can put their own mark beside a trigger's words. */
+declare function NavigationMenuIcon({ className, ...props }: NavigationMenuIconProps): import("react").JSX.Element;
+/** The portal the open group is rendered into. */
+declare function NavigationMenuPortal({ ...props }: NavigationMenuPortalProps): import("react").JSX.Element;
+/** The positioned wrapper around the open group. */
+declare function NavigationMenuPositioner({ className, sideOffset, alignOffset, ...props }: NavigationMenuPositionerProps): import("react").JSX.Element;
+/** The surface the open group sits on. */
+declare function NavigationMenuPopup({ className, ...props }: NavigationMenuPopupProps): import("react").JSX.Element;
+/** The area one group's content is measured and animated in. */
+declare function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): import("react").JSX.Element;
+/** The scrim behind an open group, so the page behind does not read as live. */
+declare function NavigationMenuBackdrop({ className, ...props }: NavigationMenuBackdropProps): import("react").JSX.Element;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIcon, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuViewport, NavigationMenuBackdrop, };
+//# sourceMappingURL=navigation-menu.d.ts.map

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

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

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

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
+import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+/**
+ * A list of links with groups that expand and collapse.
+ *
+ * **It knows it holds links, and that is what every part is for.** A link can be
+ * opened in a new tab, copied by address, middle-clicked and crawled; a command
+ * cannot do any of those, and a menu that renders a command where a reader
+ * expected a destination gives them a middle-click that does nothing. So
+ * `NavigationMenuLink` is the only interactive leaf here and it is a native
+ * anchor, there is no command part to reach for by mistake, and a caller who
+ * wants commands in a header is using a Menubar or a DropdownMenu instead.
+ * `active` is a required prop on the link because a navigation menu that does
+ * not say where the reader is has made them guess.
+ *
+ * **A closed group shows nothing, and that is deliberate.** The list is a
+ * `<ul>` of triggers, and the links live in a group that is only in the document
+ * while it is open. A reader with JavaScript off, and a crawler, therefore see
+ * the triggers and nothing else, which is why `NavigationMenuContent` takes
+ * `keepMounted` for the consumer who needs the header to read the same either
+ * way and owns the layout shift that follows. Do not put a destination only in
+ * a closed group.
+ *
+ * The bar is one Tab stop: Tab moves through the triggers and into the open
+ * group, Escape closes the group and returns focus to the trigger that opened
+ * it. Use a Menubar for an application window's commands and a DropdownMenu for
+ * a menu attached to one control.
+ */
+function NavigationMenu({ className, label, orientation = 'horizontal', ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "aria-label": label, orientation: orientation, className: cn('relative flex max-w-max flex-1 items-center justify-center', 'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', className), ...props }));
+}
+/** The row of group triggers. */
+function NavigationMenuList({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn('flex flex-1 list-none items-center gap-1', 'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', className), ...props }));
+}
+/** One group: a trigger and the links it opens. */
+function NavigationMenuItem({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn('relative', className), ...props }));
+}
+/**
+ * The control that opens a group, and the only Tab stop for it.
+ *
+ * It is a real button and it owns the expanded state, so a reader knows the
+ * group is open before they enter it. The chevron rotates on the open state
+ * rather than on a timer, which is the only motion here: something happened and
+ * the reader can see that it did.
+ */
+function NavigationMenuTrigger({ className, children, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn('text-foreground group inline-flex h-9 items-center gap-1.5 rounded-md px-3 text-sm font-medium whitespace-nowrap outline-none', 'transition-[color,background-color,box-shadow] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[popup-open]:bg-accent/60 data-[popup-open]:text-accent-foreground', className), ...props, children: [children, _jsx(NavigationMenuIcon, { children: _jsx(ChevronDownIcon, { className: "size-4 transition-transform duration-base ease-out group-data-[popup-open]:rotate-180" }) })] }));
+}
+/** The group of links a trigger opens. */
+function NavigationMenuContent({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('p-2', className), ...props }));
+}
+/**
+ * One destination, rendered as a native anchor.
+ *
+ * This is the only interactive leaf the Component ships, and the reason is the
+ * difference between a link and a command: a link carries an address, so the
+ * browser can open it in a new tab, copy it, and a crawler can follow it. A
+ * command has none of those, and a header that renders commands where a reader
+ * expected destinations is a header whose links cannot be shared.
+ */
+function NavigationMenuLink({ className, active, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", active: active, className: cn('hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-[3px] block rounded-md px-3 py-2 text-sm outline-none', 'transition-[color,background-color,box-shadow] duration-fast ease-out', 'data-[active]:bg-accent data-[active]:text-accent-foreground data-[active]:font-medium', className), ...props }));
+}
+/** The chevron slot, so a caller can put their own mark beside a trigger's words. */
+function NavigationMenuIcon({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Icon, { "data-slot": "navigation-menu-icon", className: cn('flex size-4 items-center justify-center', className), ...props }));
+}
+/** The portal the open group is rendered into. */
+function NavigationMenuPortal({ ...props }) {
+    return _jsx(NavigationMenuPrimitive.Portal, { ...props });
+}
+/** The positioned wrapper around the open group. */
+function NavigationMenuPositioner({ className, sideOffset = 8, alignOffset = 0, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Positioner, { "data-slot": "navigation-menu-positioner", sideOffset: sideOffset, alignOffset: alignOffset, className: cn('z-50', className), ...props }));
+}
+/** The surface the open group sits on. */
+function NavigationMenuPopup({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Popup, { "data-slot": "navigation-menu-popup", className: cn('bg-popover text-popover-foreground origin-(--transform-origin) rounded-lg border p-2 shadow-md outline-none', 'transition-[opacity,transform] duration-base 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 }));
+}
+/** The area one group's content is measured and animated in. */
+function NavigationMenuViewport({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn('relative h-full w-full overflow-hidden', className), ...props }));
+}
+/** The scrim behind an open group, so the page behind does not read as live. */
+function NavigationMenuBackdrop({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Backdrop, { "data-slot": "navigation-menu-backdrop", className: cn('fixed inset-0 z-40 bg-background/40 transition-opacity duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0', className), ...props }));
+}
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIcon, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuViewport, NavigationMenuBackdrop, };

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

@@ -0,0 +1,111 @@
+/** The props the Number field accepts. */
+export interface NumberFieldProps {
+    /**
+     * The accessible names of the two steppers.
+     *
+     * Required, and required as a pair, because a stepper is an icon and an icon has
+     * no name. The words are the caller's because they are sentences a reader hears,
+     * and a Component that chose them would be shipping English into every consumer's
+     * form and would get "increase" wrong for at least one of the two.
+     */
+    labels: {
+        increment: string;
+        decrement: string;
+    };
+    /** The accessible name of the field, when no visible label is used. */
+    'aria-label'?: string;
+    /** The current value, when the field is controlled. */
+    value?: number | null;
+    /** The value the field starts at, for an uncontrolled field. */
+    defaultValue?: number | null;
+    /** Called with the value, or `null` when the field is emptied. */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * The smallest value the field will hold.
+     *
+     * A value below it is clamped, by typing, by the steppers and by a paste alike.
+     * Without a minimum there is nothing to clamp against, so this and `max` are what
+     * turn a number field from a text field that happens to accept digits into a
+     * control that holds a range.
+     */
+    min?: number;
+    /** The largest value the field will hold. */
+    max?: number;
+    /** The amount one press of a stepper changes the value by. @defaultValue 1 */
+    step?: number;
+    /**
+     * The unit shown after the number.
+     *
+     * A unit is a word in the reader's language and it is hidden from the
+     * accessibility tree, because a screen reader already says the unit when the
+     * caller puts it in the field's description. It is a prop because the Component
+     * does not know whether the reader measures in kilograms, pounds or seconds.
+     */
+    unit?: string;
+    /** How the value is written for display: grouping, decimals, and so on. */
+    format?: Intl.NumberFormatOptions;
+    /** Whether a value must be entered before the form submits. */
+    required?: boolean;
+    /** Whether the field ignores interaction. */
+    disabled?: boolean;
+    /** Whether the reader may see the value but not change it. */
+    readOnly?: boolean;
+    /** The form field name. The value is submitted under it. */
+    name?: string;
+    /** Identifies the form that owns the hidden input. */
+    form?: string;
+    /** The field's own id, so a label elsewhere can point at it. */
+    id?: string;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A numeric field that will not hold a value outside its own range.
+ *
+ * **Clamping is the Component, not the HTML.** A number field with a `max` that
+ * accepts a value past it is a field that will submit a number the caller has
+ * already said is impossible, and the browser's own range validation is no answer
+ * to that: it reports the problem after the reader has typed and leaves them with a
+ * value they cannot submit. So the value is clamped on every path that can produce
+ * one, typing, the steppers, a paste and a value that arrived from outside, and
+ * the field shows and submits only what is inside its range. Text that is not a
+ * number never becomes a value at all: the field refuses the character as it is
+ * typed, so a reader who mistypes a digit gets a shorter number rather than a
+ * number the server will reject.
+ *
+ * **It is one Component rather than a root, a group, an input and two steppers.**
+ * The range and the two ways of moving inside it are one contract, and a caller
+ * who composes the parts can leave out the steppers and get a field that clamps
+ * with no affordance to reach the middle of its own range. The parts Base UI owns
+ * are still what draw and what enforce; what this adds is the decision not to let
+ * them be rearranged into something else.
+ *
+ * **A value outside the range is clamped as it arrives rather than refused.** A
+ * controlled field whose `value` prop is out of range displays the clamped number,
+ * because the alternative is a field showing one number and submitting another.
+ * `onValueChange` is the authority: a consumer whose own state holds an
+ * out-of-range number has to take the clamped one back, and this Component will
+ * not rewrite a state it does not own.
+ *
+ * **The steppers are in the tab order.** Base UI takes them out of it, on the
+ * reasoning that the arrow keys already step the value and one field should be one
+ * Tab stop. A control that is announced and cannot be reached is worse than a
+ * second stop, so they are put back: three stops for one value, and the arrow keys
+ * still work for a reader who is typing through the form.
+ *
+ * **Empty is a value.** The field reports `null` when it is cleared, rather than
+ * zero, because zero is a number a reader may have meant and an empty field is
+ * not. A consumer that treats `null` as zero has made a decision this Component
+ * refuses to make for it.
+ *
+ * **The unit is decoration.** It is hidden from the accessibility tree and the
+ * caller describes the field once, in words, where a screen reader will reach it.
+ * Two announcements of the same unit is one too many, and the visible one is the
+ * one that was written in the reader's language by the reader's own product.
+ *
+ * Reachable by Tab, moved by the arrow keys and by its two steppers, and the whole
+ * field reads as one surface: one frame, one border, one focus colour.
+ */
+declare function NumberField({ labels, 'aria-label': ariaLabel, value, defaultValue, onValueChange, min, max, step, unit, format, required, disabled, readOnly, name, form, id, className, }: NumberFieldProps): import("react").JSX.Element;
+export { NumberField };
+//# sourceMappingURL=number-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/number-field.tsx"],"names":[],"mappings":"AAOA,0CAA0C;AAC1C,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;OAOG;IACH,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IAChD,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,kEAAkE;IAClE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;;;;;OAOG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,MAAM,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IACjC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,GAAG,EACH,GAAG,EACH,IAAQ,EACR,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,GACV,EAAE,gBAAgB,+BAsFlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

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

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+/**
+ * The value inside the field's own range, or nothing.
+ *
+ * Base UI clamps what the reader types and what the steppers reach, but it does
+ * not clamp a value that was already outside the range when it arrived, so this is
+ * the Component's own half of the promise. A field that accepted it would display
+ * and submit a number the caller has already said is impossible, and the browser's
+ * range validation answers that after the reader has typed, which is too late to
+ * be a control and too late to be a form.
+ */
+function clamp(value, min, max) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return null;
+    let out = value;
+    if (typeof min === 'number' && out < min)
+        out = min;
+    if (typeof max === 'number' && out > max)
+        out = max;
+    return out;
+}
+/**
+ * A numeric field that will not hold a value outside its own range.
+ *
+ * **Clamping is the Component, not the HTML.** A number field with a `max` that
+ * accepts a value past it is a field that will submit a number the caller has
+ * already said is impossible, and the browser's own range validation is no answer
+ * to that: it reports the problem after the reader has typed and leaves them with a
+ * value they cannot submit. So the value is clamped on every path that can produce
+ * one, typing, the steppers, a paste and a value that arrived from outside, and
+ * the field shows and submits only what is inside its range. Text that is not a
+ * number never becomes a value at all: the field refuses the character as it is
+ * typed, so a reader who mistypes a digit gets a shorter number rather than a
+ * number the server will reject.
+ *
+ * **It is one Component rather than a root, a group, an input and two steppers.**
+ * The range and the two ways of moving inside it are one contract, and a caller
+ * who composes the parts can leave out the steppers and get a field that clamps
+ * with no affordance to reach the middle of its own range. The parts Base UI owns
+ * are still what draw and what enforce; what this adds is the decision not to let
+ * them be rearranged into something else.
+ *
+ * **A value outside the range is clamped as it arrives rather than refused.** A
+ * controlled field whose `value` prop is out of range displays the clamped number,
+ * because the alternative is a field showing one number and submitting another.
+ * `onValueChange` is the authority: a consumer whose own state holds an
+ * out-of-range number has to take the clamped one back, and this Component will
+ * not rewrite a state it does not own.
+ *
+ * **The steppers are in the tab order.** Base UI takes them out of it, on the
+ * reasoning that the arrow keys already step the value and one field should be one
+ * Tab stop. A control that is announced and cannot be reached is worse than a
+ * second stop, so they are put back: three stops for one value, and the arrow keys
+ * still work for a reader who is typing through the form.
+ *
+ * **Empty is a value.** The field reports `null` when it is cleared, rather than
+ * zero, because zero is a number a reader may have meant and an empty field is
+ * not. A consumer that treats `null` as zero has made a decision this Component
+ * refuses to make for it.
+ *
+ * **The unit is decoration.** It is hidden from the accessibility tree and the
+ * caller describes the field once, in words, where a screen reader will reach it.
+ * Two announcements of the same unit is one too many, and the visible one is the
+ * one that was written in the reader's language by the reader's own product.
+ *
+ * Reachable by Tab, moved by the arrow keys and by its two steppers, and the whole
+ * field reads as one surface: one frame, one border, one focus colour.
+ */
+function NumberField({ labels, 'aria-label': ariaLabel, value, defaultValue = null, onValueChange, min, max, step = 1, unit, format, required = false, disabled = false, readOnly = false, name, form, id, className, }) {
+    return (_jsx(NumberFieldPrimitive.Root, { "data-slot": "number-field", className: cn('w-full', className), ...(value === undefined
+            ? { defaultValue: clamp(defaultValue, min, max) ?? undefined }
+            : { value: clamp(value, min, max) }), onValueChange: (next) => onValueChange?.(next), 
+        // The id belongs to the root, not to the input, because Base UI's steppers
+        // point their `aria-controls` at it and a dangling reference is a violation
+        // that reads, in a screen reader, as a control pointing at nothing.
+        id: id, min: min, max: max, step: step, required: required, disabled: disabled, readOnly: readOnly, name: name, ...(form === undefined ? null : { form }), ...(format === undefined ? null : { format }), children: _jsxs("div", { "data-slot": "number-field-group", 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'), children: [_jsx(NumberFieldPrimitive.Input, { "data-slot": "number-field-input", "aria-label": ariaLabel, className: cn('placeholder:text-muted-foreground flex h-9 min-w-0 flex-1 border-0 bg-transparent px-3 py-1 text-base shadow-none outline-none md:text-sm', 'focus-visible:border-0 focus-visible:ring-ring focus-visible:ring-[3px]') }), unit === undefined ? null : (_jsx("span", { "data-slot": "number-field-unit", "aria-hidden": "true", className: "text-muted-foreground flex shrink-0 items-center pr-2 text-sm", children: unit })), _jsxs("div", { "data-slot": "number-field-stepper", className: "border-input flex shrink-0 flex-col border-s", children: [_jsx(NumberFieldPrimitive.Increment, { "data-slot": "number-field-increment", "aria-label": labels.increment, 
+                            // Put back into the tab order on purpose; see the JSDoc.
+                            tabIndex: 0, className: cn('text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-1/2 items-center justify-center border-b px-2 outline-none', 'transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-40'), children: _jsx(ChevronUpIcon, { className: "size-3.5" }) }), _jsx(NumberFieldPrimitive.Decrement, { "data-slot": "number-field-decrement", "aria-label": labels.decrement, tabIndex: 0, className: cn('text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-1/2 items-center justify-center px-2 outline-none', 'transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-40'), children: _jsx(ChevronDownIcon, { className: "size-3.5" }) })] })] }) }));
+}
+export { NumberField };