@kennycorrea/ui 0.11.3 → 1.6.1

package/dist/hooks/useControllableState.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef, useState } from 'react';
+/**
+ * The `value` / `defaultValue` / `onValueChange` pattern in one place, so every component that
+ * offers both modes behaves the same way: a controlled component never changes on its own,
+ * and an uncontrolled one still reports each change.
+ *
+ * Whether it is controlled is decided by the first render. Switching between the two is a
+ * bug in the caller, the same rule React applies to inputs.
+ */
+export function useControllableState({ value, defaultValue, onChange, }) {
+    const controlled = useRef(value !== undefined).current;
+    const [inner, setInner] = useState(defaultValue);
+    const current = controlled ? value : inner;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const set = useCallback((next) => {
+        if (!controlled)
+            setInner(next);
+        onChangeRef.current?.(next);
+    }, [controlled]);
+    return [current, set];
+}

package/dist/hooks/useElementWidth.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+/**
+ * The content width of an element, kept current with one ResizeObserver. `0` until measured,
+ * and where ResizeObserver does not exist (the server, some test environments), so callers
+ * should fall back to a sensible default.
+ */
+export declare function useElementWidth(ref: RefObject<HTMLElement | null>): number;

package/dist/hooks/useElementWidth.js

@@ -0,0 +1,22 @@
+import { useLayoutEffect, useState } from 'react';
+/**
+ * The content width of an element, kept current with one ResizeObserver. `0` until measured,
+ * and where ResizeObserver does not exist (the server, some test environments), so callers
+ * should fall back to a sensible default.
+ */
+export function useElementWidth(ref) {
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === 'undefined')
+            return;
+        setWidth(el.getBoundingClientRect().width);
+        const observer = new ResizeObserver(([entry]) => {
+            if (entry)
+                setWidth(entry.contentRect.width);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [ref]);
+    return width;
+}

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,18 @@
+import { type BreakpointOrInitial } from './breakpoints.js';
+/**
+ * Whether a media query matches, kept current as it changes.
+ *
+ * For switching *structure* (a dialog that becomes a sheet). A visual change belongs in CSS,
+ * where it needs no JavaScript and does not flash on hydration.
+ *
+ * On the server, and wherever `matchMedia` is missing, it returns `serverValue`. The default is
+ * `true` because the existing atoms render their desktop branch first.
+ */
+export declare function useMediaQuery(query: string, serverValue?: boolean): boolean;
+/**
+ * The largest breakpoint the viewport has reached, or `initial` below `xs`.
+ *
+ * On the server it returns `serverValue`, default `lg`, for the same desktop-first reason as
+ * {@link useMediaQuery}.
+ */
+export declare function useBreakpoint(serverValue?: BreakpointOrInitial): BreakpointOrInitial;

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,51 @@
+import { useMemo, useSyncExternalStore } from 'react';
+import { BREAKPOINTS, minWidth } from './breakpoints.js';
+function hasMatchMedia() {
+    return typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+}
+function subscribeTo(queries) {
+    return (onChange) => {
+        if (!hasMatchMedia())
+            return () => { };
+        const lists = queries.map((q) => window.matchMedia(q));
+        for (const l of lists)
+            l.addEventListener('change', onChange);
+        return () => {
+            for (const l of lists)
+                l.removeEventListener('change', onChange);
+        };
+    };
+}
+/**
+ * Whether a media query matches, kept current as it changes.
+ *
+ * For switching *structure* (a dialog that becomes a sheet). A visual change belongs in CSS,
+ * where it needs no JavaScript and does not flash on hydration.
+ *
+ * On the server, and wherever `matchMedia` is missing, it returns `serverValue`. The default is
+ * `true` because the existing atoms render their desktop branch first.
+ */
+export function useMediaQuery(query, serverValue = true) {
+    // A new subscribe function each render would make React resubscribe on every render.
+    const subscribe = useMemo(() => subscribeTo([query]), [query]);
+    return useSyncExternalStore(subscribe, () => (hasMatchMedia() ? window.matchMedia(query).matches : serverValue), () => serverValue);
+}
+const ORDER = Object.keys(BREAKPOINTS);
+const subscribeToBreakpoints = subscribeTo(ORDER.map(minWidth));
+/**
+ * The largest breakpoint the viewport has reached, or `initial` below `xs`.
+ *
+ * On the server it returns `serverValue`, default `lg`, for the same desktop-first reason as
+ * {@link useMediaQuery}.
+ */
+export function useBreakpoint(serverValue = 'lg') {
+    return useSyncExternalStore(subscribeToBreakpoints, () => {
+        if (!hasMatchMedia())
+            return serverValue;
+        let current = 'initial';
+        for (const bp of ORDER)
+            if (window.matchMedia(minWidth(bp)).matches)
+                current = bp;
+        return current;
+    }, () => serverValue);
+}

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 export * from './atoms/index.js';
+export * from './hooks/index.js';
 export * from './icons/index.js';
+export * from './molecules/index.js';
+export * from './organisms/index.js';
 export * from './primitives/index.js';
 export * from './strings.js';
+export * from './templates/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,5 +1,9 @@
 export * from './atoms/index.js';
+export * from './hooks/index.js';
 export * from './icons/index.js';
+export * from './molecules/index.js';
+export * from './organisms/index.js';
 export * from './primitives/index.js';
 export * from './strings.js';
+export * from './templates/index.js';
 export * from './utils/index.js';

package/dist/molecules/AccentPicker/AccentPicker.d.ts

@@ -0,0 +1,30 @@
+/** The part of a `createTheming` instance the picker uses. */
+export interface AccentStore<A extends string = string> {
+    readonly accents: readonly A[];
+    readAccent(): A;
+    storeAccent(accent: A): void;
+}
+export interface AccentPickerProps<A extends string = string> {
+    /** Radix colour names. Default: `theming.accents`. One of the two is required. */
+    accents?: readonly A[];
+    value?: A;
+    /** Initial value when uncontrolled. Default: `theming.readAccent()`, else the first accent. */
+    defaultValue?: A;
+    onValueChange?: (accent: A) => void;
+    /** A `createTheming` instance: supplies the list, reads the stored choice, stores new ones. */
+    theming?: AccentStore<A>;
+    /**
+     * Each swatch's accessible name. The fallback is the Radix colour name ("jade"), which is
+     * English and technical, so an app should pass its own words.
+     */
+    labels?: Partial<Record<A, string>>;
+    className?: string;
+}
+/**
+ * A row of colour swatches, one choice. Native radio inputs underneath, so arrow keys, the
+ * group's name and the checked state come from the browser.
+ *
+ * Like ThemeToggle it chooses and remembers; the app applies the accent to `<Theme
+ * accentColor>`. Each accent's Radix colour scale must be imported for its swatch to show.
+ */
+export declare function AccentPicker<A extends string = string>({ accents, value, defaultValue, onValueChange, theming, labels, className, }: AccentPickerProps<A>): import("react").JSX.Element;

package/dist/molecules/AccentPicker/AccentPicker.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * A row of colour swatches, one choice. Native radio inputs underneath, so arrow keys, the
+ * group's name and the checked state come from the browser.
+ *
+ * Like ThemeToggle it chooses and remembers; the app applies the accent to `<Theme
+ * accentColor>`. Each accent's Radix colour scale must be imported for its swatch to show.
+ */
+export function AccentPicker({ accents, value, defaultValue, onValueChange, theming, labels, className, }) {
+    const strings = useUiStrings();
+    const name = useId();
+    const list = accents ?? theming?.accents ?? [];
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue: defaultValue ?? theming?.readAccent() ?? list[0],
+        onChange: (next) => {
+            if (next === undefined)
+                return;
+            theming?.storeAccent(next);
+            onValueChange?.(next);
+        },
+    });
+    return (_jsxs("fieldset", { className: ['ui-accent-picker', className].filter(Boolean).join(' '), children: [_jsx("legend", { className: "ui-sr-only", children: strings.accent }), list.map((accent) => (_jsxs("label", { className: "ui-accent-picker__option", children: [_jsx("input", { type: "radio", className: "ui-accent-picker__input", name: name, value: accent, checked: current === accent, onChange: () => setCurrent(accent), "aria-label": labels?.[accent] ?? accent }), _jsx("span", { className: "ui-accent-picker__swatch", "aria-hidden": "true", style: { '--swatch': `var(--${accent}-9)` } })] }, accent)))] }));
+}

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

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

package/dist/molecules/AccentPicker/index.js

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

package/dist/molecules/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,27 @@
+import type { RenderLink } from '../../atoms/TextLink/TextLink.js';
+export interface BreadcrumbItem {
+    label: string;
+    /** Left out on the last item, which is the current page. */
+    href?: string;
+    render?: RenderLink;
+}
+export interface BreadcrumbsProps {
+    /** From the root to the current page. The last one is the current page. */
+    items: BreadcrumbItem[];
+    /**
+     * The most items shown before the middle ones fold into a menu. Default 4, minimum 3
+     * (first, menu, parent, current).
+     */
+    maxItems?: number;
+    /** Overrides the landmark's name (otherwise the `breadcrumbs` UI string). */
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * Where the current page sits: a `nav` landmark holding an ordered list, the last item marked
+ * `aria-current="page"`.
+ *
+ * Long trails fold their middle into a menu. Below 768px only the parent shows, as a back link,
+ * which is what a phone has room for and what people use breadcrumbs for there.
+ */
+export declare function Breadcrumbs({ items, maxItems, 'aria-label': ariaLabel, className, }: BreadcrumbsProps): import("react").JSX.Element | null;

package/dist/molecules/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeftIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { DropdownMenu as ThemedDropdownMenu } from '@radix-ui/themes';
+import { useUiStrings } from '../../strings.js';
+function crumbLink(item, className, extra) {
+    const children = (_jsxs(_Fragment, { children: [extra, item.label] }));
+    if (item.href === undefined)
+        return _jsx("span", { className: className, children: children });
+    const props = { href: item.href, className, children };
+    return item.render ? item.render(props) : _jsx("a", { ...props });
+}
+/**
+ * Where the current page sits: a `nav` landmark holding an ordered list, the last item marked
+ * `aria-current="page"`.
+ *
+ * Long trails fold their middle into a menu. Below 768px only the parent shows, as a back link,
+ * which is what a phone has room for and what people use breadcrumbs for there.
+ */
+export function Breadcrumbs({ items, maxItems = 4, 'aria-label': ariaLabel, className, }) {
+    const strings = useUiStrings();
+    if (items.length === 0)
+        return null;
+    const limit = Math.max(3, maxItems);
+    const fold = items.length > limit;
+    // Kept: the first item, and the last `limit - 2` (the menu takes one slot).
+    const tailStart = fold ? items.length - (limit - 2) : 1;
+    const hidden = fold ? items.slice(1, tailStart) : [];
+    const shown = fold ? [items[0], ...items.slice(tailStart)] : items;
+    const parentIndex = shown.length - 2;
+    return (_jsx("nav", { "aria-label": ariaLabel ?? strings.breadcrumbs, className: className, children: _jsx("ol", { className: "ui-breadcrumbs__list", children: shown.map((item, i) => {
+                const last = i === shown.length - 1;
+                const sep = i > 0 ? (_jsx("span", { className: "ui-breadcrumbs__sep", "aria-hidden": "true", children: "/" })) : null;
+                return (_jsxs(BreadcrumbEntry, { isParent: i === parentIndex, children: [sep, last ? (_jsx("span", { "aria-current": "page", children: item.label })) : (crumbLink(item, undefined, i === parentIndex ? (_jsx("span", { className: "ui-breadcrumbs__back", "aria-hidden": "true", children: _jsx(ChevronLeftIcon, {}) })) : null)), fold && i === 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-breadcrumbs__sep", "aria-hidden": "true", children: "/" }), _jsxs(ThemedDropdownMenu.Root, { children: [_jsx(ThemedDropdownMenu.Trigger, { children: _jsx("button", { type: "button", className: "ui-breadcrumbs__more", "aria-label": strings.showMoreBreadcrumbs, children: _jsx(DotsHorizontalIcon, { "aria-hidden": "true" }) }) }), _jsx(ThemedDropdownMenu.Content, { align: "start", children: hidden.map((h, j) => (_jsx(ThemedDropdownMenu.Item
+                                            // biome-ignore lint/suspicious/noArrayIndexKey: positional, labels can repeat.
+                                            , { asChild: h.href !== undefined, children: crumbLink(h) }, `${j}-${h.label}`))) })] })] })) : null] }, `${i}-${item.label}`));
+            }) }) }));
+}
+function BreadcrumbEntry({ isParent, children }) {
+    return (_jsx("li", { className: "ui-breadcrumbs__item", "data-parent": isParent ? '' : undefined, children: children }));
+}

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

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

package/dist/molecules/Breadcrumbs/index.js

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

package/dist/molecules/Calendar/Calendar.d.ts

@@ -0,0 +1,42 @@
+import { type DateRange, type IsoDate, type Weekday } from '../../utils/dates.js';
+interface CalendarCommon {
+    /** Earliest choosable date. */
+    min?: IsoDate;
+    /** Latest choosable date. */
+    max?: IsoDate;
+    /** Any other date that cannot be chosen (weekends, holidays). Still focusable, never chosen. */
+    isDateDisabled?: (date: IsoDate) => boolean;
+    /** Default: the `UiStringsProvider` locale, else the runtime's. */
+    locale?: string;
+    /** 0 = Sunday … 6 = Saturday. Default: the locale's own first day. */
+    weekStartsOn?: Weekday;
+    /** Months side by side. Default 1. */
+    numberOfMonths?: 1 | 2;
+    /** The first month shown, initially. Default: the selected date's month, else today's. */
+    defaultMonth?: IsoDate;
+    /** Moves focus into the grid on mount, as a picker opening should. */
+    autoFocus?: boolean;
+    className?: string;
+}
+export interface CalendarSingleProps extends CalendarCommon {
+    mode?: 'single';
+    value: IsoDate | null;
+    onValueChange: (value: IsoDate) => void;
+}
+export interface CalendarRangeProps extends CalendarCommon {
+    mode: 'range';
+    value: DateRange | null;
+    /** Called on both clicks: first with `to: null`, then with the whole range, in order. */
+    onValueChange: (value: DateRange) => void;
+}
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+/**
+ * A month grid for choosing a date or a range, following the WAI-ARIA date picker pattern.
+ *
+ * One Tab stop for the whole grid. Arrows move by a day or a week, Home/End go to the start or
+ * end of the week, PageUp/PageDown by a month (with Shift, by a year), Enter or Space chooses.
+ * Every day button is named with the full date, today is `aria-current="date"`, and the month
+ * heading is announced when it changes. Dates are ISO strings throughout; see `utils/dates`.
+ */
+export declare function Calendar(props: CalendarProps): import("react").JSX.Element;
+export {};

package/dist/molecules/Calendar/Calendar.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: the WAI-ARIA date picker pattern is a table with role="grid" and gridcells.
+// biome-ignore-all lint/a11y/useFocusableInteractive: each gridcell holds the focusable day button, as the pattern prescribes.
+// biome-ignore-all lint/suspicious/noArrayIndexKey: blank cells and weeks are positional within a fixed six-by-seven grid.
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useUiLocale, useUiStrings } from '../../strings.js';
+import { addDays, addMonths, clampDate, endOfWeek, firstDayOfWeek, formatIsoDate, isInRange, monthGrid, parseIsoDate, startOfMonth, startOfWeek, todayIso, weekdayNames, } from '../../utils/dates.js';
+/**
+ * A month grid for choosing a date or a range, following the WAI-ARIA date picker pattern.
+ *
+ * One Tab stop for the whole grid. Arrows move by a day or a week, Home/End go to the start or
+ * end of the week, PageUp/PageDown by a month (with Shift, by a year), Enter or Space chooses.
+ * Every day button is named with the full date, today is `aria-current="date"`, and the month
+ * heading is announced when it changes. Dates are ISO strings throughout; see `utils/dates`.
+ */
+export function Calendar(props) {
+    const { min, max, isDateDisabled, locale: localeProp, weekStartsOn: weekStartProp, numberOfMonths = 1, defaultMonth, autoFocus = false, className, } = props;
+    const strings = useUiStrings();
+    const providerLocale = useUiLocale();
+    const locale = localeProp ?? providerLocale;
+    const weekStartsOn = weekStartProp ?? firstDayOfWeek(locale);
+    const id = useId();
+    const selectedStart = props.mode === 'range' ? (props.value?.from ?? null) : (props.value ?? null);
+    const today = todayIso();
+    const [focused, setFocused] = useState(() => clampDate(selectedStart ?? defaultMonth ?? today, min, max));
+    const [visible, setVisible] = useState(() => startOfMonth(defaultMonth ?? focused));
+    const moveFocus = useRef(autoFocus);
+    const root = useRef(null);
+    const months = useMemo(() => Array.from({ length: numberOfMonths }, (_, i) => addMonths(visible, i)), [visible, numberOfMonths]);
+    const lastVisible = months[months.length - 1];
+    const names = useMemo(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
+    useEffect(() => {
+        if (!moveFocus.current)
+            return;
+        moveFocus.current = false;
+        root.current?.querySelector(`[data-date="${focused}"]`)?.focus();
+    }, [focused]);
+    const disabled = (date) => (!!min && date < min) || (!!max && date > max) || !!isDateDisabled?.(date);
+    const focusDate = (date) => {
+        const next = clampDate(date, min, max);
+        if (next < visible)
+            setVisible(startOfMonth(next));
+        else if (next.slice(0, 7) > lastVisible.slice(0, 7))
+            setVisible(startOfMonth(addMonths(next, -(numberOfMonths - 1))));
+        moveFocus.current = true;
+        setFocused(next);
+    };
+    const choose = (date) => {
+        if (disabled(date))
+            return;
+        setFocused(date);
+        if (props.mode === 'range') {
+            const current = props.value;
+            if (!current || current.to !== null)
+                props.onValueChange({ from: date, to: null });
+            else if (date < current.from)
+                props.onValueChange({ from: date, to: current.from });
+            else
+                props.onValueChange({ from: current.from, to: date });
+        }
+        else {
+            props.onValueChange(date);
+        }
+    };
+    const onKeyDown = (e, date) => {
+        const step = {
+            ArrowLeft: () => addDays(date, -1),
+            ArrowRight: () => addDays(date, 1),
+            ArrowUp: () => addDays(date, -7),
+            ArrowDown: () => addDays(date, 7),
+            Home: () => startOfWeek(date, weekStartsOn),
+            End: () => endOfWeek(date, weekStartsOn),
+            PageUp: () => addMonths(date, e.shiftKey ? -12 : -1),
+            PageDown: () => addMonths(date, e.shiftKey ? 12 : 1),
+        };
+        const go = step[e.key];
+        if (go) {
+            e.preventDefault();
+            focusDate(go());
+        }
+    };
+    const stepMonth = (delta) => {
+        const nextVisible = addMonths(visible, delta);
+        setVisible(nextVisible);
+        // Keep the grid's Tab stop on a visible day, without taking focus from the button.
+        setFocused(clampDate(addMonths(focused, delta), min, max));
+    };
+    // The grid's one Tab stop: the focused day when it is on screen, else the first shown day.
+    const tabStop = focused >= visible && focused.slice(0, 7) <= lastVisible.slice(0, 7) ? focused : visible;
+    const range = props.mode === 'range' ? props.value : null;
+    const singleValue = props.mode === 'range' ? null : props.value;
+    const prevDisabled = !!min && addMonths(visible, -1).slice(0, 7) < min.slice(0, 7);
+    const nextDisabled = !!max && addMonths(lastVisible, 1).slice(0, 7) > max.slice(0, 7);
+    return (_jsxs("div", { ref: root, className: ['ui-calendar', className].filter(Boolean).join(' '), children: [_jsxs("div", { className: "ui-calendar__nav", children: [_jsx("button", { type: "button", className: "ui-calendar__step", "aria-label": strings.previousMonth, disabled: prevDisabled, onClick: () => stepMonth(-1), children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "ui-calendar__step", "aria-label": strings.nextMonth, disabled: nextDisabled, onClick: () => stepMonth(1), children: _jsx(ChevronRightIcon, { "aria-hidden": "true" }) })] }), _jsx("div", { className: "ui-calendar__months", children: months.map((month, mi) => {
+                    const p = parseIsoDate(month);
+                    if (!p)
+                        return null;
+                    const titleId = `${id}-m${mi}`;
+                    const weeks = monthGrid(p.year, p.month, weekStartsOn);
+                    return (_jsxs("div", { className: "ui-calendar__month", children: [_jsx("div", { id: titleId, className: "ui-calendar__title", "aria-live": "polite", children: formatIsoDate(month, locale, { month: 'long', year: 'numeric' }) }), _jsxs("table", { role: "grid", "aria-labelledby": titleId, className: "ui-calendar__grid", children: [_jsx("thead", { children: _jsx("tr", { children: names.map((n) => (_jsx("th", { scope: "col", abbr: n.long, children: n.short }, n.long))) }) }), _jsx("tbody", { children: weeks.map((week) => (_jsx("tr", { children: week.map((date, di) => {
+                                                if (!date)
+                                                    return _jsx("td", {}, `e${di}`);
+                                                const isDisabled = disabled(date);
+                                                const selected = date === singleValue ||
+                                                    (range ? date === range.from || date === range.to : false);
+                                                const within = range ? isInRange(date, range) : false;
+                                                return (_jsx("td", { role: "gridcell", "aria-selected": selected || within, children: _jsx("button", { type: "button", className: "ui-calendar__day", "data-date": date, "data-selected": selected ? '' : undefined, "data-in-range": within && !selected ? '' : undefined, "data-range-start": range && date === range.from ? '' : undefined, "data-range-end": range && date === (range.to ?? '') ? '' : undefined, tabIndex: date === tabStop ? 0 : -1, "aria-label": formatIsoDate(date, locale, { dateStyle: 'full' }), "aria-current": date === today ? 'date' : undefined, "aria-disabled": isDisabled || undefined, onClick: () => choose(date), onKeyDown: (e) => onKeyDown(e, date), onFocus: () => setFocused(date), children: Number(date.slice(8)) }) }, date));
+                                            }) }, week.find(Boolean) ?? `${month}-${weeks.indexOf(week)}`))) })] })] }, month));
+                }) })] }));
+}

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

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

package/dist/molecules/Calendar/index.js

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

package/dist/molecules/DateInput/DateInput.d.ts

@@ -0,0 +1,35 @@
+import { type Breakpoint } from '../../hooks/breakpoints.js';
+import { type IsoDate, type Weekday } from '../../utils/dates.js';
+export interface DateInputProps {
+    value: IsoDate | null;
+    onValueChange: (value: IsoDate | null) => void;
+    min?: IsoDate;
+    max?: IsoDate;
+    isDateDisabled?: (date: IsoDate) => boolean;
+    locale?: string;
+    weekStartsOn?: Weekday;
+    /** The browser's own `<input type="date">` instead of the calendar. Typing works there. */
+    native?: boolean;
+    /** Below this the calendar opens in a bottom Sheet. Default `sm`. `false` keeps the popover. */
+    sheetBelow?: Breakpoint | false;
+    /** The trigger text while empty. Default: the `chooseDate` UI string. */
+    placeholder?: string;
+    /** How the chosen date reads on the trigger. Default `{ dateStyle: 'medium' }`. */
+    format?: Intl.DateTimeFormatOptions;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A date field: a button showing the date that opens a Calendar, in a popover on wide screens
+ * and a bottom sheet on narrow ones. Works inside `FormField`, which names it.
+ *
+ * The chosen date is in the button's description, not its name, so the label stays the name
+ * ("Due date") and the value is still read ("Wednesday 21 October 2026").
+ */
+export declare function DateInput({ value, onValueChange, min, max, isDateDisabled, locale: localeProp, weekStartsOn, native, sheetBelow, placeholder, format, disabled, invalid, required, id, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, className, }: DateInputProps): import("react").JSX.Element;

package/dist/molecules/DateInput/DateInput.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CalendarIcon } from '@radix-ui/react-icons';
+import { Button as ThemedButton, Popover as ThemedPopover } from '@radix-ui/themes';
+import { useId, useState } from 'react';
+import { Input } from '../../atoms/Input/Input.js';
+import { Sheet } from '../../atoms/Sheet/Sheet.js';
+import { minWidth } from '../../hooks/breakpoints.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { useUiLocale, useUiStrings } from '../../strings.js';
+import { formatIsoDate, isIsoDate } from '../../utils/dates.js';
+import { Calendar } from '../Calendar/Calendar.js';
+/**
+ * A date field: a button showing the date that opens a Calendar, in a popover on wide screens
+ * and a bottom sheet on narrow ones. Works inside `FormField`, which names it.
+ *
+ * The chosen date is in the button's description, not its name, so the label stays the name
+ * ("Due date") and the value is still read ("Wednesday 21 October 2026").
+ */
+export function DateInput({ value, onValueChange, min, max, isDateDisabled, locale: localeProp, weekStartsOn, native = false, sheetBelow = 'sm', placeholder, format = { dateStyle: 'medium' }, disabled, invalid, required, id, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, className, }) {
+    const strings = useUiStrings();
+    const providerLocale = useUiLocale();
+    const locale = localeProp ?? providerLocale;
+    const wide = useMediaQuery(minWidth(sheetBelow || 'xs'));
+    const [open, setOpen] = useState(false);
+    const valueId = useId();
+    const isInvalid = invalid || ariaInvalid === true || ariaInvalid === 'true';
+    if (native) {
+        return (_jsx(Input, { type: "date", id: id, value: value ?? '', min: min, max: max, disabled: disabled, required: required, invalid: isInvalid, "aria-describedby": describedBy, "aria-label": ariaLabel, className: className, onChange: (e) => onValueChange(isIsoDate(e.target.value) ? e.target.value : null) }));
+    }
+    const text = value ? formatIsoDate(value, locale, format) : (placeholder ?? strings.chooseDate);
+    const fullValue = value ? formatIsoDate(value, locale, { dateStyle: 'full' }) : '';
+    const trigger = (_jsxs(ThemedButton, { type: "button", variant: "surface", color: isInvalid ? 'red' : 'gray', id: id, disabled: disabled, "aria-haspopup": "dialog", "aria-label": ariaLabel, "aria-invalid": isInvalid || undefined, "aria-required": required || undefined, "aria-describedby": [value ? valueId : null, describedBy].filter(Boolean).join(' ') || undefined, className: ['ui-date-input', className].filter(Boolean).join(' '), "data-empty": value ? undefined : '', onClick: sheetBelow !== false && !wide ? () => setOpen(true) : undefined, children: [_jsx(CalendarIcon, { "aria-hidden": "true" }), _jsx("span", { "aria-hidden": value ? 'true' : undefined, children: text }), value ? (_jsx("span", { id: valueId, className: "ui-sr-only", children: fullValue })) : null] }));
+    const calendar = (_jsx(Calendar, { value: value, onValueChange: (next) => {
+            onValueChange(next);
+            setOpen(false);
+        }, min: min, max: max, isDateDisabled: isDateDisabled, locale: locale, weekStartsOn: weekStartsOn, autoFocus: true }));
+    if (sheetBelow !== false && !wide) {
+        return (_jsxs(_Fragment, { children: [trigger, _jsx(Sheet, { open: open, onOpenChange: setOpen, title: ariaLabel ?? strings.chooseDate, showCloseButton: true, children: calendar })] }));
+    }
+    return (_jsxs(ThemedPopover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(ThemedPopover.Trigger, { children: trigger }), _jsx(ThemedPopover.Content, { align: "start", "aria-label": ariaLabel ?? strings.chooseDate, children: calendar })] }));
+}

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

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

package/dist/molecules/DateInput/index.js

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

package/dist/molecules/EmptyState/EmptyState.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export interface EmptyStateProps {
+    /** A single icon, shown in a soft circle. Decorative. */
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** The way forward: "Create the first one", "Clear filters". */
+    action?: ReactNode;
+    secondaryAction?: ReactNode;
+    /** `sm` for inside a table or card. Default `md`. */
+    size?: 'sm' | 'md';
+    /** The title's heading level. Default `h2`; use `p` where a heading would break the outline. */
+    as?: 'h2' | 'h3' | 'p';
+    className?: string;
+}
+/**
+ * What a place shows when it has nothing in it yet. Says why, and offers the next step.
+ */
+export declare function EmptyState({ icon, title, description, action, secondaryAction, size, as: Title, className, }: EmptyStateProps): import("react").JSX.Element;

package/dist/molecules/EmptyState/EmptyState.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What a place shows when it has nothing in it yet. Says why, and offers the next step.
+ */
+export function EmptyState({ icon, title, description, action, secondaryAction, size = 'md', as: Title = 'h2', className, }) {
+    return (_jsxs("div", { className: ['ui-state', className].filter(Boolean).join(' '), "data-size": size, children: [icon ? (_jsx("span", { className: "ui-state__icon", "aria-hidden": "true", children: icon })) : null, _jsx(Title, { className: "ui-state__title", children: title }), description ? _jsx("p", { className: "ui-state__description", children: description }) : null, action || secondaryAction ? (_jsxs("div", { className: "ui-state__actions", children: [action, secondaryAction] })) : null] }));
+}

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

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

package/dist/molecules/EmptyState/index.js

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

package/dist/molecules/ErrorState/ErrorState.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface ErrorStateProps {
+    /** Default: the `somethingWentWrong` UI string. */
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Shows a retry button (the `retry` UI string). */
+    onRetry?: () => void;
+    /** Technical detail (an error id, a message) behind a disclosure. */
+    details?: ReactNode;
+    size?: 'sm' | 'md';
+    as?: 'h2' | 'h3' | 'p';
+    className?: string;
+}
+/**
+ * What a place shows when loading it failed. `role="alert"`, so a screen reader hears it when
+ * it replaces content that was loading.
+ */
+export declare function ErrorState({ title, description, onRetry, details, size, as: Title, className, }: ErrorStateProps): import("react").JSX.Element;

package/dist/molecules/ErrorState/ErrorState.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Button } from '../../atoms/Button/Button.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * What a place shows when loading it failed. `role="alert"`, so a screen reader hears it when
+ * it replaces content that was loading.
+ */
+export function ErrorState({ title, description, onRetry, details, size = 'md', as: Title = 'h2', className, }) {
+    const strings = useUiStrings();
+    return (_jsxs("div", { role: "alert", className: ['ui-state', className].filter(Boolean).join(' '), "data-size": size, "data-tone": "danger", children: [_jsx("span", { className: "ui-state__icon", "aria-hidden": "true", children: _jsx(ExclamationTriangleIcon, {}) }), _jsx(Title, { className: "ui-state__title", children: title ?? strings.somethingWentWrong }), description ? _jsx("p", { className: "ui-state__description", children: description }) : null, onRetry ? (_jsx("div", { className: "ui-state__actions", children: _jsx(Button, { variant: "secondary", onClick: onRetry, children: strings.retry }) })) : null, details ? (_jsxs("details", { className: "ui-state__details", children: [_jsx("summary", { children: strings.showDetails }), _jsx("pre", { children: details })] })) : null] }));
+}

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

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

package/dist/molecules/ErrorState/index.js

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