@kennycorrea/ui 0.11.4 → 1.6.1

package/dist/molecules/FilterPopover/FilterPopover.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MixerHorizontalIcon } from '@radix-ui/react-icons';
+import { Popover as ThemedPopover } from '@radix-ui/themes';
+import { Button } from '../../atoms/Button/Button.js';
+import { Sheet } from '../../atoms/Sheet/Sheet.js';
+import { minWidth } from '../../hooks/breakpoints.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * A "Filters" button that opens the filter controls: a popover anchored to the button on wide
+ * screens, a bottom sheet on narrow ones, where a popover would be cramped and hard to reach.
+ */
+export function FilterPopover({ label, activeCount = 0, children, onApply, onReset, open, defaultOpen = false, onOpenChange, sheetBelow = 'sm', }) {
+    const strings = useUiStrings();
+    const wide = useMediaQuery(minWidth(sheetBelow || 'xs'));
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const title = label ?? strings.filters;
+    const footer = onApply || onReset ? (_jsxs(_Fragment, { children: [onReset ? (_jsx(Button, { variant: "ghost", onClick: onReset, children: strings.reset })) : null, onApply ? (_jsx(Button, { onClick: () => {
+                    onApply();
+                    setOpen(false);
+                }, children: strings.apply })) : null] })) : null;
+    const trigger = (_jsxs(Button, { variant: "outline", onClick: sheetBelow !== false && !wide ? () => setOpen(true) : undefined, children: [_jsx(MixerHorizontalIcon, { "aria-hidden": "true" }), title, activeCount > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-count", "aria-hidden": "true", children: activeCount }), _jsxs("span", { className: "ui-sr-only", children: [", ", strings.activeCount(activeCount)] })] })) : null] }));
+    if (sheetBelow !== false && !wide) {
+        return (_jsxs(_Fragment, { children: [trigger, _jsx(Sheet, { open: isOpen, onOpenChange: setOpen, title: title, footer: footer, showCloseButton: true, children: _jsx("div", { className: "flex flex-col gap-3", children: children }) })] }));
+    }
+    return (_jsxs(ThemedPopover.Root, { open: isOpen, onOpenChange: setOpen, children: [_jsx(ThemedPopover.Trigger, { children: trigger }), _jsxs(ThemedPopover.Content, { align: "start", className: "w-80 max-w-[calc(100vw-1.5rem)] p-0", "aria-label": title, children: [_jsx("div", { className: "ui-filter-popover__body", children: children }), footer ? _jsx("div", { className: "ui-filter-popover__footer", children: footer }) : null] })] }));
+}

package/dist/molecules/FilterPopover/index.d.ts

@@ -0,0 +1 @@
+export * from './FilterPopover.js';

package/dist/molecules/FilterPopover/index.js

@@ -0,0 +1 @@
+export * from './FilterPopover.js';

package/dist/molecules/FormActions/FormActions.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface FormActionsProps {
+    /** The buttons, in reading order: cancel before save. */
+    children: ReactNode;
+    /** Default `end`. `between` puts the first child at the start and the rest at the end. */
+    align?: 'start' | 'end' | 'between';
+    /**
+     * Below 768px, pins the row to the bottom of the screen on the bar material, with buttons
+     * sharing the width, so saving a long form never needs a scroll back down. It sits above an
+     * AppShell's TabBar. Default `true`.
+     */
+    sticky?: boolean;
+    className?: string;
+}
+/** The row of buttons that ends a form. */
+export declare function FormActions({ children, align, sticky, className, }: FormActionsProps): import("react").JSX.Element;

package/dist/molecules/FormActions/FormActions.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The row of buttons that ends a form. */
+export function FormActions({ children, align = 'end', sticky = true, className, }) {
+    return (_jsx("div", { className: ['ui-form-actions', className].filter(Boolean).join(' '), "data-align": align, "data-sticky": sticky ? '' : undefined, children: children }));
+}

package/dist/molecules/FormActions/index.d.ts

@@ -0,0 +1 @@
+export * from './FormActions.js';

package/dist/molecules/FormActions/index.js

@@ -0,0 +1 @@
+export * from './FormActions.js';

package/dist/molecules/FormField/FormField.d.ts

@@ -0,0 +1,52 @@
+import { type ReactElement, type ReactNode } from 'react';
+/** The ids and states a control needs, for wiring one up by hand with the render form. */
+export interface FormFieldControlProps {
+    id: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: true;
+    required?: boolean;
+}
+export interface FormFieldProps {
+    label: ReactNode;
+    /** Help that stays visible. Linked with `aria-describedby`. */
+    hint?: ReactNode;
+    /** The validation message. Marks the control invalid and is linked with `aria-describedby`. */
+    error?: ReactNode;
+    required?: boolean;
+    /** Defaults to a generated id. */
+    id?: string;
+    /**
+     * `stacked` (label above, the default) or `inline` (control first, label beside it), which is
+     * the right shape for a Checkbox or Switch.
+     */
+    layout?: 'stacked' | 'inline';
+    /**
+     * One control. Input, Textarea and Select get `invalid` (their red state); anything else gets
+     * `aria-invalid`. Or a function, given {@link FormFieldControlProps}, for a control that needs
+     * them placed somewhere else.
+     */
+    children: ReactElement | ((control: FormFieldControlProps) => ReactNode);
+    className?: string;
+}
+/**
+ * A label, a control, a hint and an error, wired together: the label names the control, the
+ * hint and error describe it, and the error marks it invalid.
+ *
+ * The error is text with an icon, never colour alone. It is not a live region: announcing each
+ * field's error as it appears is noisy, and `ErrorSummary` says it once, on submit.
+ */
+export declare function FormField({ label, hint, error, required, id: idProp, layout, children, className, }: FormFieldProps): import("react").JSX.Element;
+export interface FormFieldsetProps {
+    /** Names the group: "Notifications", "Plan". */
+    legend: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    /** Checkboxes, a RadioGroup, several related fields. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A `fieldset` for controls that answer one question together. The legend names the group;
+ * hint and error describe it.
+ */
+export declare function FormFieldset({ legend, hint, error, children, className }: FormFieldsetProps): import("react").JSX.Element;

package/dist/molecules/FormField/FormField.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { cloneElement, isValidElement, useId } from 'react';
+import { Input } from '../../atoms/Input/Input.js';
+import { Label } from '../../atoms/Label/Label.js';
+import { Select } from '../../atoms/Select/Select.js';
+import { Textarea } from '../../atoms/Textarea/Textarea.js';
+import { PasswordInput } from '../PasswordInput/PasswordInput.js';
+const INVALID_PROP = new Set([Input, Textarea, Select, PasswordInput]);
+/**
+ * A label, a control, a hint and an error, wired together: the label names the control, the
+ * hint and error describe it, and the error marks it invalid.
+ *
+ * The error is text with an icon, never colour alone. It is not a live region: announcing each
+ * field's error as it appears is noisy, and `ErrorSummary` says it once, on submit.
+ */
+export function FormField({ label, hint, error, required, id: idProp, layout = 'stacked', children, className, }) {
+    const auto = useId();
+    const id = idProp ?? auto;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(' ');
+    const control = {
+        id,
+        'aria-describedby': describedBy || undefined,
+        'aria-invalid': error ? true : undefined,
+        required: required || undefined,
+    };
+    let rendered;
+    if (typeof children === 'function') {
+        rendered = children(control);
+    }
+    else if (isValidElement(children)) {
+        // The house fields set `aria-invalid` themselves from `invalid`, along with their red state.
+        // Passing the key at all, even as undefined, would override theirs, so it is left out.
+        const { 'aria-invalid': ariaInvalid, ...rest } = control;
+        const props = INVALID_PROP.has(children.type)
+            ? { ...rest, invalid: !!error }
+            : { ...rest, ...(ariaInvalid ? { 'aria-invalid': ariaInvalid } : {}) };
+        rendered = cloneElement(children, props);
+    }
+    else {
+        rendered = children;
+    }
+    const labelEl = (_jsx(Label, { htmlFor: id, required: required, children: label }));
+    const hintEl = hint ? (_jsx("p", { id: hintId, className: "ui-field__hint", children: hint })) : null;
+    const errorEl = error ? _jsx(FieldError, { id: errorId, children: error }) : null;
+    return (_jsx("div", { className: ['ui-field', className].filter(Boolean).join(' '), "data-layout": layout, children: layout === 'inline' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-field__control", children: rendered }), _jsxs("span", { className: "ui-field__text", children: [labelEl, hintEl, errorEl] })] })) : (_jsxs(_Fragment, { children: [labelEl, hintEl, rendered, errorEl] })) }));
+}
+function FieldError({ id, children }) {
+    return (_jsxs("p", { id: id, className: "ui-field__error", children: [_jsx(ExclamationTriangleIcon, { "aria-hidden": "true" }), _jsx("span", { children: children })] }));
+}
+/**
+ * A `fieldset` for controls that answer one question together. The legend names the group;
+ * hint and error describe it.
+ */
+export function FormFieldset({ legend, hint, error, children, className }) {
+    const id = useId();
+    const describedBy = [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("fieldset", { className: ['ui-fieldset', className].filter(Boolean).join(' '), "aria-describedby": describedBy || undefined, children: [_jsx("legend", { className: "ui-fieldset__legend", children: legend }), hint ? (_jsx("p", { id: `${id}-hint`, className: "ui-field__hint", children: hint })) : null, children, error ? _jsx(FieldError, { id: `${id}-error`, children: error }) : null] }));
+}

package/dist/molecules/FormField/index.d.ts

@@ -0,0 +1 @@
+export * from './FormField.js';

package/dist/molecules/FormField/index.js

@@ -0,0 +1 @@
+export * from './FormField.js';

package/dist/molecules/FormSection/FormSection.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+export interface FormSectionProps {
+    title: ReactNode;
+    /** Why these fields matter, or what they change. */
+    description?: ReactNode;
+    /** FormFields. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A titled group of fields: a `section` named by its `h2`. From 720px of its own width the
+ * title and description sit in a column beside the fields; narrower, above them.
+ */
+export declare function FormSection({ title, description, children, className }: FormSectionProps): import("react").JSX.Element;

package/dist/molecules/FormSection/FormSection.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+/**
+ * A titled group of fields: a `section` named by its `h2`. From 720px of its own width the
+ * title and description sit in a column beside the fields; narrower, above them.
+ */
+export function FormSection({ title, description, children, className }) {
+    const titleId = useId();
+    return (_jsx("section", { "aria-labelledby": titleId, className: ['ui-form-section', className].filter(Boolean).join(' '), children: _jsxs("div", { className: "ui-form-section__grid", children: [_jsxs("div", { children: [_jsx("h2", { id: titleId, className: "ui-form-section__title", children: title }), description ? _jsx("p", { className: "ui-form-section__description", children: description }) : null] }), _jsx("div", { className: "ui-form-section__fields", children: children })] }) }));
+}

package/dist/molecules/FormSection/index.d.ts

@@ -0,0 +1 @@
+export * from './FormSection.js';

package/dist/molecules/FormSection/index.js

@@ -0,0 +1 @@
+export * from './FormSection.js';

package/dist/molecules/KeyValueList/KeyValueList.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { Responsive } from '../../atoms/Card/Card.js';
+export interface KeyValueItem {
+    /** React key. Defaults to the label when it is a string. */
+    id?: string;
+    label: ReactNode;
+    value: ReactNode;
+}
+export interface KeyValueListProps {
+    items: KeyValueItem[];
+    /**
+     * Label beside value, or above it. Default: above on phones, beside from `sm` (768px), in
+     * Radix's responsive-prop shape.
+     */
+    orientation?: Responsive<'horizontal' | 'vertical'>;
+    className?: string;
+}
+/**
+ * Labelled facts about one thing: the side panel of a detail page. Radix Themes' `DataList`
+ * (a description list underneath), with items as data and a phone-first default orientation.
+ */
+export declare function KeyValueList({ items, orientation, className, }: KeyValueListProps): import("react").JSX.Element;

package/dist/molecules/KeyValueList/KeyValueList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataList } from '@radix-ui/themes';
+/**
+ * Labelled facts about one thing: the side panel of a detail page. Radix Themes' `DataList`
+ * (a description list underneath), with items as data and a phone-first default orientation.
+ */
+export function KeyValueList({ items, orientation = { initial: 'vertical', sm: 'horizontal' }, className, }) {
+    return (_jsx(DataList.Root, { orientation: orientation, className: className, children: items.map((item, i) => (_jsxs(DataList.Item, { children: [_jsx(DataList.Label, { children: item.label }), _jsx(DataList.Value, { children: item.value })] }, item.id ?? (typeof item.label === 'string' ? item.label : `kv-${i}`)))) }));
+}

package/dist/molecules/KeyValueList/index.d.ts

@@ -0,0 +1 @@
+export * from './KeyValueList.js';

package/dist/molecules/KeyValueList/index.js

@@ -0,0 +1 @@
+export * from './KeyValueList.js';

package/dist/molecules/LoadingState/LoadingState.d.ts

@@ -0,0 +1,20 @@
+export type LoadingStateVariant = 'spinner' | 'rows' | 'cards';
+export interface LoadingStateProps {
+    /**
+     * `spinner` when the shape of what is coming is unknown; `rows` and `cards` draw its shape,
+     * so nothing jumps when it arrives. Default `spinner`.
+     */
+    variant?: LoadingStateVariant;
+    /** How many rows or cards to draw. Default 5 rows, 3 cards. */
+    count?: number;
+    /** Overrides the announced text (otherwise the `loading` UI string). */
+    label?: string;
+    className?: string;
+}
+/**
+ * A placeholder while something loads. Announced once (`role="status"`); the skeleton shapes
+ * themselves are hidden from screen readers.
+ *
+ * For a table, `DataTable state="loading"` draws skeleton rows inside the table itself.
+ */
+export declare function LoadingState({ variant, count, label, className }: LoadingStateProps): import("react").JSX.Element;

package/dist/molecules/LoadingState/LoadingState.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton as ThemedSkeleton } from '@radix-ui/themes';
+import { Card } from '../../atoms/Card/Card.js';
+import { SkeletonText } from '../../atoms/Skeleton/Skeleton.js';
+import { Spinner } from '../../atoms/Spinner/Spinner.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * A placeholder while something loads. Announced once (`role="status"`); the skeleton shapes
+ * themselves are hidden from screen readers.
+ *
+ * For a table, `DataTable state="loading"` draws skeleton rows inside the table itself.
+ */
+export function LoadingState({ variant = 'spinner', count, label, className }) {
+    const strings = useUiStrings();
+    const cls = ['ui-loading', className].filter(Boolean).join(' ');
+    if (variant === 'spinner') {
+        return (_jsx("div", { className: cls, "data-variant": "spinner", children: _jsx(Spinner, { label: label }) }));
+    }
+    const n = count ?? (variant === 'rows' ? 5 : 3);
+    const keys = Array.from({ length: n }, (_, i) => `k${i}`);
+    return (_jsx("div", { className: cls, "data-variant": variant, role: "status", "aria-label": label ?? strings.loading, children: keys.map((key) => variant === 'rows' ? (_jsxs("div", { "aria-hidden": "true", className: "flex items-center gap-3", children: [_jsx(ThemedSkeleton, { width: "32px", height: "32px", style: { borderRadius: 8 } }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx(ThemedSkeleton, { height: "0.875rem", width: "55%" }), _jsx(ThemedSkeleton, { height: "0.75rem", width: "35%" })] })] }, key)) : (_jsx(Card, { "aria-hidden": "true", className: "p-4", children: _jsx(SkeletonText, { lines: 3 }) }, key))) }));
+}

package/dist/molecules/LoadingState/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingState.js';

package/dist/molecules/LoadingState/index.js

@@ -0,0 +1 @@
+export * from './LoadingState.js';

package/dist/molecules/NavItem/NavItem.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import type { RenderLink } from '../../atoms/TextLink/TextLink.js';
+export interface NavItemProps {
+    /** React key when the item is rendered from data. Defaults to `label`. */
+    id?: string;
+    label: string;
+    icon?: ReactNode;
+    /** A link. Without it (and without `items`) the item is a button. */
+    href?: string;
+    /** Wraps a router link. Receives the props to spread, like every `render` in this library. */
+    render?: RenderLink;
+    /** The current page: highlighted, and `aria-current="page"`. */
+    active?: boolean;
+    /** A number shows a count (99+ caps); `true` shows a dot. */
+    badge?: number | boolean;
+    /** What the badge means, for screen readers ("3 unread"). A dot is silent without it. */
+    badgeLabel?: string;
+    onClick?: () => void;
+    /** Child items: the item becomes a disclosure that shows them. One level deep. */
+    items?: NavItemProps[];
+    /** Whether a group starts open. Default: open when one of its children is active. */
+    defaultOpen?: boolean;
+}
+/**
+ * One entry in a navigation list: a link, a button, or a group of child links.
+ *
+ * Renders an `<li>`, so put it inside a `<ul>` (Sidebar does). Inside a collapsed Sidebar the
+ * label stays in the accessible name and is also shown as a tooltip, and a group opens its
+ * children as a menu beside the rail, since there is no room to expand it in place.
+ */
+export declare function NavItem(item: NavItemProps): import("react").JSX.Element;

package/dist/molecules/NavItem/NavItem.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { DropdownMenu as ThemedDropdownMenu } from '@radix-ui/themes';
+import { useId, useState } from 'react';
+import { Tooltip } from '../../atoms/Tooltip/Tooltip.js';
+import { useNavContext } from './context.js';
+function badgeText(badge) {
+    if (badge === undefined || badge === false || badge === 0)
+        return null;
+    if (badge === true)
+        return '';
+    return badge > 99 ? '99+' : String(badge);
+}
+/** The inside of an item: icon, label, badge. Shared by links, buttons and group toggles. */
+function ItemContent({ item, trailing }) {
+    const text = badgeText(item.badge);
+    return (_jsxs(_Fragment, { children: [item.icon ? (_jsx("span", { className: "ui-nav-item__icon", "aria-hidden": "true", children: item.icon })) : null, _jsx("span", { className: "ui-nav-item__label", children: item.label }), text !== null ? (_jsx("span", { className: "ui-nav-item__badge", "data-dot": text === '' ? '' : undefined, "aria-hidden": item.badgeLabel ? 'true' : text === '' ? 'true' : undefined, children: text })) : null, item.badgeLabel && text !== null ? (_jsxs("span", { className: "ui-sr-only", children: [", ", item.badgeLabel] })) : null, trailing] }));
+}
+/** A link or a button, depending on what the item has. */
+function ItemControl({ item, onNavigate }) {
+    const onClick = () => {
+        item.onClick?.();
+        onNavigate?.();
+    };
+    const children = _jsx(ItemContent, { item: item });
+    if (item.href !== undefined) {
+        const props = {
+            href: item.href,
+            className: 'ui-nav-item',
+            'aria-current': item.active ? 'page' : undefined,
+            onClick,
+            children,
+        };
+        return item.render ? item.render(props) : _jsx("a", { ...props });
+    }
+    return (_jsx("button", { type: "button", className: "ui-nav-item", "aria-current": item.active ? 'page' : undefined, onClick: onClick, children: children }));
+}
+/**
+ * One entry in a navigation list: a link, a button, or a group of child links.
+ *
+ * Renders an `<li>`, so put it inside a `<ul>` (Sidebar does). Inside a collapsed Sidebar the
+ * label stays in the accessible name and is also shown as a tooltip, and a group opens its
+ * children as a menu beside the rail, since there is no room to expand it in place.
+ */
+export function NavItem(item) {
+    const { collapsed, onNavigate } = useNavContext();
+    const childActive = item.items?.some((c) => c.active) ?? false;
+    const [open, setOpen] = useState(item.defaultOpen ?? childActive);
+    const listId = useId();
+    if (!item.items) {
+        return (_jsx("li", { children: _jsx(Tooltip, { label: collapsed ? item.label : undefined, children: _jsx(ItemControl, { item: item, onNavigate: onNavigate }) }) }));
+    }
+    if (collapsed) {
+        return (_jsx("li", { children: _jsxs(ThemedDropdownMenu.Root, { children: [_jsx(ThemedDropdownMenu.Trigger, { children: _jsx("button", { type: "button", className: "ui-nav-item", "aria-current": childActive ? 'page' : undefined, children: _jsx(ItemContent, { item: item }) }) }), _jsxs(ThemedDropdownMenu.Content, { side: "right", align: "start", children: [_jsx(ThemedDropdownMenu.Label, { children: item.label }), item.items.map((child) => (_jsx(ThemedDropdownMenu.Item, { asChild: child.href !== undefined, onSelect: () => {
+                                    if (child.href === undefined) {
+                                        child.onClick?.();
+                                        onNavigate?.();
+                                    }
+                                }, children: child.href !== undefined
+                                    ? (child.render ?? ((p) => _jsx("a", { ...p })))({
+                                        href: child.href,
+                                        'aria-current': child.active ? 'page' : undefined,
+                                        onClick: () => {
+                                            child.onClick?.();
+                                            onNavigate?.();
+                                        },
+                                        children: child.label,
+                                    })
+                                    : child.label }, child.id ?? child.label)))] })] }) }));
+    }
+    return (_jsxs("li", { children: [_jsx("button", { type: "button", className: "ui-nav-item", "aria-expanded": open, "aria-controls": listId, onClick: () => setOpen((o) => !o), children: _jsx(ItemContent, { item: item, trailing: _jsx("span", { className: "ui-nav-item__chevron", "aria-hidden": "true", children: _jsx(ChevronDownIcon, {}) }) }) }), _jsx("ul", { id: listId, className: "ui-nav-group__items", hidden: !open, children: item.items.map((child) => (_jsx("li", { children: _jsx(ItemControl, { item: child, onNavigate: onNavigate }) }, child.id ?? child.label))) })] }));
+}

package/dist/molecules/NavItem/context.d.ts

@@ -0,0 +1,14 @@
+/**
+ * What a NavItem needs from the navigation around it. Provided by `Sidebar`; a NavItem outside
+ * one gets the defaults (expanded, nothing to close).
+ *
+ * Not exported from the package: it is the contract between the two components, not API.
+ */
+export interface NavContextValue {
+    /** The sidebar is an icon rail: labels become tooltips. */
+    collapsed: boolean;
+    /** Called after any item is activated, so an off-canvas panel can close. */
+    onNavigate?: () => void;
+}
+export declare const NavContext: import("react").Context<NavContextValue>;
+export declare function useNavContext(): NavContextValue;

package/dist/molecules/NavItem/context.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const NavContext = createContext({ collapsed: false });
+export function useNavContext() {
+    return useContext(NavContext);
+}

package/dist/molecules/NavItem/index.d.ts

@@ -0,0 +1 @@
+export * from './NavItem.js';

package/dist/molecules/NavItem/index.js

@@ -0,0 +1 @@
+export * from './NavItem.js';

package/dist/molecules/Pagination/Pagination.d.ts

@@ -0,0 +1,32 @@
+export type PaginationEntry = number | 'gap-start' | 'gap-end';
+/**
+ * The page numbers to show: always the first and last, `siblings` either side of the current
+ * one, and a gap marker wherever pages are skipped. A gap of exactly one page shows that page
+ * instead, since "…" would take the same room and say less; for the same reason a short run
+ * (up to `2 * siblings + 5` pages) shows every page.
+ */
+export declare function paginationRange(page: number, pageCount: number, siblings?: number): PaginationEntry[];
+export interface PaginationProps {
+    /** 1-based. */
+    page: number;
+    onPageChange: (page: number) => void;
+    /** Either this, or `total` with `pageSize`. */
+    pageCount?: number;
+    /** The number of items across all pages. With `pageSize`, also shows "1–25 of 500". */
+    total?: number;
+    pageSize?: number;
+    /** Shows a rows-per-page select. Needs `onPageSizeChange`. */
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+    /** Pages shown either side of the current one. Default 1. */
+    siblings?: number;
+    className?: string;
+}
+/**
+ * Page navigation for a list or table, controlled: it never changes page by itself.
+ *
+ * A `nav` landmark. At 520px of its own width or more it shows numbered pages; narrower, just
+ * previous / "Page 2 of 10" / next, and the rows-per-page select is dropped. Both are in the
+ * markup and CSS shows one, so nothing re-renders on resize.
+ */
+export declare function Pagination({ page, onPageChange, pageCount: pageCountProp, total, pageSize, pageSizeOptions, onPageSizeChange, siblings, className, }: PaginationProps): import("react").JSX.Element;

package/dist/molecules/Pagination/Pagination.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { useId } from 'react';
+import { Label } from '../../atoms/Label/Label.js';
+import { Select } from '../../atoms/Select/Select.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * The page numbers to show: always the first and last, `siblings` either side of the current
+ * one, and a gap marker wherever pages are skipped. A gap of exactly one page shows that page
+ * instead, since "…" would take the same room and say less; for the same reason a short run
+ * (up to `2 * siblings + 5` pages) shows every page.
+ */
+export function paginationRange(page, pageCount, siblings = 1) {
+    if (pageCount <= 0)
+        return [];
+    // When every page fits in the slots a gapped range would take anyway, show them all.
+    if (pageCount <= 2 * siblings + 5)
+        return Array.from({ length: pageCount }, (_, i) => i + 1);
+    const current = Math.min(Math.max(page, 1), pageCount);
+    const start = Math.max(2, current - siblings);
+    const end = Math.min(pageCount - 1, current + siblings);
+    const out = [1];
+    if (start === 3)
+        out.push(2);
+    else if (start > 3)
+        out.push('gap-start');
+    for (let p = start; p <= end; p++)
+        out.push(p);
+    if (end === pageCount - 2)
+        out.push(pageCount - 1);
+    else if (end < pageCount - 2)
+        out.push('gap-end');
+    if (pageCount > 1)
+        out.push(pageCount);
+    return out;
+}
+/**
+ * Page navigation for a list or table, controlled: it never changes page by itself.
+ *
+ * A `nav` landmark. At 520px of its own width or more it shows numbered pages; narrower, just
+ * previous / "Page 2 of 10" / next, and the rows-per-page select is dropped. Both are in the
+ * markup and CSS shows one, so nothing re-renders on resize.
+ */
+export function Pagination({ page, onPageChange, pageCount: pageCountProp, total, pageSize, pageSizeOptions, onPageSizeChange, siblings = 1, className, }) {
+    const strings = useUiStrings();
+    const sizeId = useId();
+    const pageCount = Math.max(1, pageCountProp ?? (total !== undefined && pageSize ? Math.ceil(total / pageSize) : 1));
+    const current = Math.min(Math.max(page, 1), pageCount);
+    const go = (p) => {
+        if (p !== current && p >= 1 && p <= pageCount)
+            onPageChange(p);
+    };
+    const range = total !== undefined && pageSize && total > 0
+        ? strings.rangeOf((current - 1) * pageSize + 1, Math.min(current * pageSize, total), total)
+        : null;
+    return (_jsx("nav", { "aria-label": strings.pagination, className: ['ui-pagination', className].filter(Boolean).join(' '), children: _jsxs("div", { className: "ui-pagination__bar", children: [range ? _jsx("span", { className: "tabular-nums", children: range }) : _jsx("span", {}), pageSizeOptions && onPageSizeChange && pageSize ? (_jsxs("span", { className: "ui-pagination__size", children: [_jsx(Label, { htmlFor: sizeId, children: strings.rowsPerPage }), _jsx(Select, { id: sizeId, value: String(pageSize), onValueChange: (v) => onPageSizeChange(Number(v)), options: pageSizeOptions.map((n) => ({ value: String(n), label: String(n) })) })] })) : null, _jsxs("span", { className: "ui-pagination__nav", children: [_jsx("button", { type: "button", className: "ui-pagination__page", "aria-label": strings.previousPage, disabled: current <= 1, onClick: () => go(current - 1), children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsx("ul", { className: "ui-pagination__pages", children: paginationRange(current, pageCount, siblings).map((entry) => typeof entry === 'number' ? (_jsx("li", { children: _jsx("button", { type: "button", className: "ui-pagination__page", "aria-label": strings.goToPage(entry), "aria-current": entry === current ? 'page' : undefined, onClick: () => go(entry), children: entry }) }, entry)) : (_jsx("li", { className: "ui-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, entry))) }), _jsx("span", { className: "ui-pagination__compact", children: strings.pageOf(current, pageCount) }), _jsx("button", { type: "button", className: "ui-pagination__page", "aria-label": strings.nextPage, disabled: current >= pageCount, onClick: () => go(current + 1), children: _jsx(ChevronRightIcon, { "aria-hidden": "true" }) })] })] }) }));
+}

package/dist/molecules/Pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination.js';

package/dist/molecules/Pagination/index.js

@@ -0,0 +1 @@
+export * from './Pagination.js';

package/dist/molecules/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,14 @@
+import { type InputProps } from '../../atoms/Input/Input.js';
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'autoComplete'> {
+    /**
+     * `current-password` to sign in, `new-password` to create one. Required, because password
+     * managers rely on it to fill the right one and to offer a strong new one.
+     */
+    autoComplete: 'current-password' | 'new-password';
+}
+/**
+ * A password field with a show/hide toggle. The toggle is a pressed/unpressed button with one
+ * name (the `showPassword` UI string). Showing turns off spellcheck and autocapitalisation
+ * as well, so the text never reaches a dictionary.
+ */
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/molecules/PasswordInput/PasswordInput.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
+import { IconButton, TextField } from '@radix-ui/themes';
+import { forwardRef, useState } from 'react';
+import { Input } from '../../atoms/Input/Input.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * A password field with a show/hide toggle. The toggle is a pressed/unpressed button with one
+ * name (the `showPassword` UI string). Showing turns off spellcheck and autocapitalisation
+ * as well, so the text never reaches a dictionary.
+ */
+export const PasswordInput = forwardRef(function PasswordInput({ autoComplete, children, ...props }, ref) {
+    const strings = useUiStrings();
+    const [visible, setVisible] = useState(false);
+    return (_jsxs(Input, { ref: ref, type: visible ? 'text' : 'password', autoComplete: autoComplete, autoCapitalize: "none", autoCorrect: "off", spellCheck: false, ...props, children: [children, _jsx(TextField.Slot, { side: "right", children: _jsx(IconButton, { type: "button", size: "1", variant: "ghost", color: "gray", "aria-label": strings.showPassword, "aria-pressed": visible, onClick: () => setVisible((v) => !v), children: visible ? _jsx(EyeClosedIcon, {}) : _jsx(EyeOpenIcon, {}) }) })] }));
+});

package/dist/molecules/PasswordInput/index.d.ts

@@ -0,0 +1 @@
+export * from './PasswordInput.js';

package/dist/molecules/PasswordInput/index.js

@@ -0,0 +1 @@
+export * from './PasswordInput.js';

package/dist/molecules/SearchField/SearchField.d.ts

@@ -0,0 +1,24 @@
+import { type InputSize } from '../../atoms/Input/Input.js';
+export interface SearchFieldProps {
+    /** Controlled text. */
+    value?: string;
+    defaultValue?: string;
+    /** Called with the text, after `debounceMs` of no typing. Clearing reports at once. */
+    onValueChange: (value: string) => void;
+    /** Default 0 (every keystroke). 200–300 suits a search that hits a server. */
+    debounceMs?: number;
+    placeholder?: string;
+    /** The accessible name. Default: the `search` UI string. */
+    'aria-label'?: string;
+    /** A single key that focuses the field from anywhere on the page, e.g. `/`. */
+    shortcut?: string;
+    size?: InputSize;
+    id?: string;
+    className?: string;
+}
+/**
+ * A search input with a magnifier, a clear button once there is text, Escape to clear, and an
+ * optional page-wide shortcut key. The shortcut hint is hidden on touch screens, which have no
+ * keyboard to press it on, and once the field has text.
+ */
+export declare function SearchField({ value, defaultValue, onValueChange, debounceMs, placeholder, 'aria-label': ariaLabel, shortcut, size, id, className, }: SearchFieldProps): import("react").JSX.Element;