@kennycorrea/ui 0.11.3 → 1.6.1

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;

package/dist/molecules/SearchField/SearchField.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cross2Icon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { IconButton, Kbd, TextField } from '@radix-ui/themes';
+import { useEffect, useRef, useState } from 'react';
+import { Input } from '../../atoms/Input/Input.js';
+import { useUiStrings } from '../../strings.js';
+function isEditable(el) {
+    if (!(el instanceof HTMLElement))
+        return false;
+    return el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName);
+}
+/**
+ * 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 function SearchField({ value, defaultValue = '', onValueChange, debounceMs = 0, placeholder, 'aria-label': ariaLabel, shortcut, size, id, className, }) {
+    const strings = useUiStrings();
+    const [text, setText] = useState(value ?? defaultValue);
+    const inputRef = useRef(null);
+    const timer = useRef(undefined);
+    const report = useRef(onValueChange);
+    report.current = onValueChange;
+    useEffect(() => {
+        if (value !== undefined)
+            setText(value);
+    }, [value]);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    useEffect(() => {
+        if (!shortcut)
+            return;
+        const onKey = (e) => {
+            if (e.key !== shortcut || e.metaKey || e.ctrlKey || e.altKey || isEditable(e.target))
+                return;
+            e.preventDefault();
+            inputRef.current?.focus();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [shortcut]);
+    const change = (next, immediate = false) => {
+        setText(next);
+        clearTimeout(timer.current);
+        if (immediate || debounceMs <= 0)
+            report.current(next);
+        else
+            timer.current = setTimeout(() => report.current(next), debounceMs);
+    };
+    return (_jsxs(Input, { ref: inputRef, id: id, type: "search", size: size, value: text, placeholder: placeholder, "aria-label": ariaLabel ?? strings.search, "aria-keyshortcuts": shortcut, className: className, onChange: (e) => change(e.target.value), onKeyDown: (e) => {
+            if (e.key === 'Escape' && text) {
+                e.preventDefault();
+                change('', true);
+            }
+        }, children: [_jsx(TextField.Slot, { children: _jsx(MagnifyingGlassIcon, { "aria-hidden": "true" }) }), _jsx(TextField.Slot, { children: text ? (_jsx(IconButton, { type: "button", size: "1", variant: "ghost", color: "gray", "aria-label": strings.clearSearch, onClick: () => {
+                        change('', true);
+                        inputRef.current?.focus();
+                    }, children: _jsx(Cross2Icon, {}) })) : shortcut ? (_jsx(Kbd, { className: "ui-search__kbd", "aria-hidden": "true", children: shortcut })) : null })] }));
+}

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

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

package/dist/molecules/SearchField/index.js

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

package/dist/molecules/StatGroup/StatGroup.d.ts

@@ -0,0 +1,21 @@
+import { type ScrollStripBreakpoint } from '../../atoms/ScrollStrip/ScrollStrip.js';
+import { type StatTileProps } from '../../atoms/StatTile/StatTile.js';
+export interface StatGroupItem extends StatTileProps {
+    /** React key. Defaults to the label when it is a string, else the index. */
+    id?: string;
+}
+export interface StatGroupProps {
+    items: StatGroupItem[];
+    /** Grid columns from `gridFrom`. Default: the number of items, at most 4. */
+    columns?: number;
+    /** Below this the tiles scroll sideways; from it they are a grid. Default `md`. */
+    gridFrom?: ScrollStripBreakpoint;
+    /** Names the scrollable region (otherwise the `scrollableRegion` UI string). */
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A row of KPI tiles: a swipeable strip on a phone, a grid from `gridFrom`. A `ScrollStrip` of
+ * `StatTile`s, so both keep their own behaviour and accessibility.
+ */
+export declare function StatGroup({ items, columns, gridFrom, 'aria-label': ariaLabel, className, }: StatGroupProps): import("react").JSX.Element;

package/dist/molecules/StatGroup/StatGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScrollStrip } from '../../atoms/ScrollStrip/ScrollStrip.js';
+import { StatTile } from '../../atoms/StatTile/StatTile.js';
+/**
+ * A row of KPI tiles: a swipeable strip on a phone, a grid from `gridFrom`. A `ScrollStrip` of
+ * `StatTile`s, so both keep their own behaviour and accessibility.
+ */
+export function StatGroup({ items, columns, gridFrom = 'md', 'aria-label': ariaLabel, className, }) {
+    return (_jsx(ScrollStrip, { gridFrom: gridFrom, columns: columns ?? Math.min(items.length, 4), "aria-label": ariaLabel, className: className, children: items.map(({ id, ...tile }, i) => (_jsx(StatTile, { ...tile }, id ?? (typeof tile.label === 'string' ? tile.label : `stat-${i}`)))) }));
+}

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

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

package/dist/molecules/StatGroup/index.js

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

package/dist/molecules/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,23 @@
+import type { Theme } from '../../utils/theme.js';
+/** The part of a `createTheming` instance the toggle uses. */
+export interface ThemeStore {
+    readTheme(): Theme;
+    storeTheme(theme: Theme): void;
+}
+export interface ThemeToggleProps {
+    value?: Theme;
+    /** Initial value when uncontrolled. Default: `theming.readTheme()`, else `system`. */
+    defaultValue?: Theme;
+    onValueChange?: (theme: Theme) => void;
+    /** A `createTheming` instance: reads the stored choice and stores each new one. */
+    theming?: ThemeStore;
+    size?: 'sm' | 'md';
+    fullWidth?: boolean;
+}
+/**
+ * System / Light / Dark, as a segmented control.
+ *
+ * It chooses and remembers; it does not apply. Pass the value on to Radix's `<Theme
+ * appearance>` (or `applyTheme`) in `onValueChange`, because the app owns its `<Theme>`.
+ */
+export declare function ThemeToggle({ value, defaultValue, onValueChange, theming, size, fullWidth, }: ThemeToggleProps): import("react").JSX.Element;

package/dist/molecules/ThemeToggle/ThemeToggle.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SegmentedControl } from '../../atoms/SegmentedControl/SegmentedControl.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * System / Light / Dark, as a segmented control.
+ *
+ * It chooses and remembers; it does not apply. Pass the value on to Radix's `<Theme
+ * appearance>` (or `applyTheme`) in `onValueChange`, because the app owns its `<Theme>`.
+ */
+export function ThemeToggle({ value, defaultValue, onValueChange, theming, size, fullWidth, }) {
+    const strings = useUiStrings();
+    const [current, setCurrent] = useControllableState({
+        value,
+        defaultValue: defaultValue ?? theming?.readTheme() ?? 'system',
+        onChange: (next) => {
+            theming?.storeTheme(next);
+            onValueChange?.(next);
+        },
+    });
+    return (_jsx(SegmentedControl, { "aria-label": strings.appearance, size: size, fullWidth: fullWidth, value: current, onValueChange: (v) => setCurrent(v), options: [
+            { value: 'system', label: strings.system },
+            { value: 'light', label: strings.light },
+            { value: 'dark', label: strings.dark },
+        ] }));
+}

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

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

package/dist/molecules/ThemeToggle/index.js

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

package/dist/molecules/UserMenu/UserMenu.d.ts

@@ -0,0 +1,20 @@
+import { type ActionMenuItem } from '../../atoms/ActionMenu/ActionMenu.js';
+import type { Breakpoint } from '../../hooks/breakpoints.js';
+export interface UserMenuProps {
+    name: string;
+    /** Shown under the name in the sheet heading on small screens. */
+    email?: string;
+    avatarSrc?: string;
+    /** Profile, settings, sign out… Same shape as `ActionMenu`'s items. */
+    items: ActionMenuItem[];
+    onSelect: (id: string) => void;
+    /** Passed to ActionMenu. Default `sm`. */
+    sheetBelow?: Breakpoint | false;
+}
+/**
+ * The signed-in person's avatar and name, opening their account actions.
+ *
+ * Below 768px the name is visually hidden (still read out) and only the avatar shows, and the
+ * menu becomes a sheet headed by the name and email.
+ */
+export declare function UserMenu({ name, email, avatarSrc, items, onSelect, sheetBelow }: UserMenuProps): import("react").JSX.Element;

package/dist/molecules/UserMenu/UserMenu.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionMenu } from '../../atoms/ActionMenu/ActionMenu.js';
+import { Avatar } from '../../atoms/Avatar/Avatar.js';
+import { useUiStrings } from '../../strings.js';
+/**
+ * The signed-in person's avatar and name, opening their account actions.
+ *
+ * Below 768px the name is visually hidden (still read out) and only the avatar shows, and the
+ * menu becomes a sheet headed by the name and email.
+ */
+export function UserMenu({ name, email, avatarSrc, items, onSelect, sheetBelow }) {
+    const strings = useUiStrings();
+    return (_jsx(ActionMenu, { items: items, onSelect: onSelect, sheetBelow: sheetBelow, title: _jsxs(_Fragment, { children: [name, email ? _jsx("span", { className: "block text-sm font-normal text-ink-muted", children: email }) : null] }), trigger: _jsxs("button", { type: "button", className: "ui-user-menu__trigger", children: [_jsx("span", { "aria-hidden": "true", className: "inline-flex", children: _jsx(Avatar, { src: avatarSrc, name: name }) }), _jsx("span", { className: "ui-user-menu__name", children: name }), _jsxs("span", { className: "ui-sr-only", children: [", ", strings.userMenu] })] }) }));
+}

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

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

package/dist/molecules/UserMenu/index.js

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

package/dist/molecules/index.d.ts

@@ -0,0 +1,21 @@
+export * from './AccentPicker/index.js';
+export * from './Breadcrumbs/index.js';
+export * from './Calendar/index.js';
+export * from './DateInput/index.js';
+export * from './EmptyState/index.js';
+export * from './ErrorState/index.js';
+export * from './ErrorSummary/index.js';
+export * from './FilterChips/index.js';
+export * from './FilterPopover/index.js';
+export * from './FormActions/index.js';
+export * from './FormField/index.js';
+export * from './FormSection/index.js';
+export * from './KeyValueList/index.js';
+export * from './LoadingState/index.js';
+export * from './NavItem/index.js';
+export * from './Pagination/index.js';
+export * from './PasswordInput/index.js';
+export * from './SearchField/index.js';
+export * from './StatGroup/index.js';
+export * from './ThemeToggle/index.js';
+export * from './UserMenu/index.js';

package/dist/molecules/index.js

@@ -0,0 +1,21 @@
+export * from './AccentPicker/index.js';
+export * from './Breadcrumbs/index.js';
+export * from './Calendar/index.js';
+export * from './DateInput/index.js';
+export * from './EmptyState/index.js';
+export * from './ErrorState/index.js';
+export * from './ErrorSummary/index.js';
+export * from './FilterChips/index.js';
+export * from './FilterPopover/index.js';
+export * from './FormActions/index.js';
+export * from './FormField/index.js';
+export * from './FormSection/index.js';
+export * from './KeyValueList/index.js';
+export * from './LoadingState/index.js';
+export * from './NavItem/index.js';
+export * from './Pagination/index.js';
+export * from './PasswordInput/index.js';
+export * from './SearchField/index.js';
+export * from './StatGroup/index.js';
+export * from './ThemeToggle/index.js';
+export * from './UserMenu/index.js';

package/dist/organisms/AppShell/AppShell.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type TabBarProps } from '../../atoms/TabBar/TabBar.js';
+import { type Breakpoint } from '../../hooks/breakpoints.js';
+export interface AppShellProps {
+    /** A `Sidebar`. */
+    sidebar: ReactNode;
+    /** A `Topbar`, above the content. */
+    topbar?: ReactNode;
+    /**
+     * A bottom TabBar for small screens, hidden from `breakpoint` up. Optional: the off-canvas
+     * sidebar is always available through the Topbar's menu button.
+     */
+    mobileNav?: Omit<TabBarProps, 'hideFrom'>;
+    children: ReactNode;
+    /** From here up the sidebar is a persistent column. Default `md` (1024px). */
+    breakpoint?: Breakpoint;
+    /** Controlled open state of the off-canvas sidebar. */
+    navOpen?: boolean;
+    onNavOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * The admin frame: sidebar, topbar and content, with a skip link to the content.
+ *
+ * Wide screens get a two-column grid with a sticky sidebar. Narrow ones get one column, the
+ * sidebar off-canvas behind the Topbar's menu button, and optionally a bottom TabBar. The
+ * shell is at least the dynamic viewport's height, so the browser's own bars do not cut it off.
+ */
+export declare function AppShell({ sidebar, topbar, mobileNav, children, breakpoint, navOpen: navOpenProp, onNavOpenChange, className, }: AppShellProps): import("react").JSX.Element;

package/dist/organisms/AppShell/AppShell.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+import { TabBar, TabBarSpacer } from '../../atoms/TabBar/TabBar.js';
+import { minWidth } from '../../hooks/breakpoints.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { useUiStrings } from '../../strings.js';
+import { ShellContext } from './context.js';
+/**
+ * The admin frame: sidebar, topbar and content, with a skip link to the content.
+ *
+ * Wide screens get a two-column grid with a sticky sidebar. Narrow ones get one column, the
+ * sidebar off-canvas behind the Topbar's menu button, and optionally a bottom TabBar. The
+ * shell is at least the dynamic viewport's height, so the browser's own bars do not cut it off.
+ */
+export function AppShell({ sidebar, topbar, mobileNav, children, breakpoint = 'md', navOpen: navOpenProp, onNavOpenChange, className, }) {
+    const strings = useUiStrings();
+    const wide = useMediaQuery(minWidth(breakpoint));
+    const [ownOpen, setOwnOpen] = useState(false);
+    const mainId = useId();
+    const navOpen = navOpenProp ?? ownOpen;
+    const setNavOpen = (open) => {
+        if (navOpenProp === undefined)
+            setOwnOpen(open);
+        onNavOpenChange?.(open);
+    };
+    // Widening the window with the panel open closes it for good, rather than leaving it open
+    // behind the persistent sidebar to reappear the next time the window narrows.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: setNavOpen is rebuilt every render; only these two values decide.
+    useEffect(() => {
+        if (wide && navOpen)
+            setNavOpen(false);
+    }, [wide, navOpen]);
+    return (_jsx(ShellContext.Provider, { value: { breakpoint, wide, navOpen: navOpen && !wide, setNavOpen }, children: _jsxs("div", { className: ['ui-shell', className].filter(Boolean).join(' '), "data-wide": wide ? '' : undefined, "data-tabbar": mobileNav && !wide ? '' : undefined, children: [_jsx("a", { className: "ui-skip-link", href: `#${mainId}`, children: strings.skipToContent }), sidebar, _jsxs("div", { className: "ui-shell__main", children: [topbar, _jsx("main", { id: mainId, tabIndex: -1, className: "ui-shell__content", children: children }), mobileNav ? (_jsxs(_Fragment, { children: [_jsx(TabBarSpacer, { hideFrom: breakpoint }), _jsx(TabBar, { ...mobileNav, hideFrom: breakpoint })] })) : null] })] }) }));
+}

package/dist/organisms/AppShell/context.d.ts

@@ -0,0 +1,14 @@
+import type { Breakpoint } from '../../hooks/breakpoints.js';
+/**
+ * What AppShell shares with the Sidebar and Topbar inside it: whether the screen is wide enough
+ * for a persistent sidebar, and the open state of the off-canvas one when it is not.
+ */
+export interface ShellContextValue {
+    breakpoint: Breakpoint;
+    wide: boolean;
+    navOpen: boolean;
+    setNavOpen: (open: boolean) => void;
+}
+export declare const ShellContext: import("react").Context<ShellContextValue | null>;
+/** `null` outside an AppShell; Sidebar and Topbar then manage themselves. */
+export declare function useShell(): ShellContextValue | null;

package/dist/organisms/AppShell/context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+export const ShellContext = createContext(null);
+/** `null` outside an AppShell; Sidebar and Topbar then manage themselves. */
+export function useShell() {
+    return useContext(ShellContext);
+}

package/dist/organisms/AppShell/index.d.ts

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

package/dist/organisms/AppShell/index.js

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

package/dist/organisms/AuthForms/AuthForms.d.ts

@@ -0,0 +1,83 @@
+import { type ReactNode } from 'react';
+import { type AuthFormBaseProps } from './shared.js';
+export interface LoginValues {
+    identifier: string;
+    password: string;
+    remember: boolean;
+}
+export interface LoginFormProps extends AuthFormBaseProps<'identifier' | 'password'> {
+    onSubmit: (values: LoginValues) => void;
+    labels: {
+        /** Names the form. */
+        form: string;
+        identifier: string;
+        password: string;
+        submit: string;
+        /** With it, a "remember me" checkbox. */
+        remember?: string;
+    };
+    /** `email` (the default) or `username`. Both use `autocomplete="username"`. */
+    identifierType?: 'email' | 'username';
+    /** A "Forgot password?" link, shown under the password field. */
+    forgotPassword?: ReactNode;
+    defaultValues?: Partial<LoginValues>;
+}
+export declare function LoginForm({ onSubmit, labels, identifierType, forgotPassword, defaultValues, errors, formError, pending, footer, className, }: LoginFormProps): import("react").JSX.Element;
+export interface SignupValues {
+    name: string;
+    email: string;
+    password: string;
+    acceptedTerms: boolean;
+}
+export interface SignupFormProps extends AuthFormBaseProps<'name' | 'email' | 'password' | 'acceptedTerms'> {
+    onSubmit: (values: SignupValues) => void;
+    labels: {
+        form: string;
+        /** With it, a name field. */
+        name?: string;
+        email: string;
+        password: string;
+        /** The rules, shown under the password field and linked to it. */
+        passwordHint?: string;
+        /** With it, a required checkbox; may contain links to the terms. */
+        terms?: ReactNode;
+        submit: string;
+    };
+    defaultValues?: Partial<SignupValues>;
+}
+export declare function SignupForm({ onSubmit, labels, defaultValues, errors, formError, pending, footer, className, }: SignupFormProps): import("react").JSX.Element;
+export interface ForgotPasswordFormProps extends AuthFormBaseProps<'email'> {
+    onSubmit: (values: {
+        email: string;
+    }) => void;
+    labels: {
+        form: string;
+        email: string;
+        submit: string;
+        /** Shown once `sent`: "If that address has an account, a link is on its way." */
+        sent: string;
+    };
+    /**
+     * The request went out. Shows `labels.sent` as a status message and keeps the form, so the
+     * person can correct the address or ask again. Word `labels.sent` so it does not reveal
+     * whether the address has an account.
+     */
+    sent?: boolean;
+    defaultEmail?: string;
+}
+export declare function ForgotPasswordForm({ onSubmit, labels, sent, defaultEmail, errors, formError, pending, footer, className, }: ForgotPasswordFormProps): import("react").JSX.Element;
+export interface ResetPasswordValues {
+    password: string;
+    confirmPassword: string;
+}
+export interface ResetPasswordFormProps extends AuthFormBaseProps<'password' | 'confirmPassword'> {
+    onSubmit: (values: ResetPasswordValues) => void;
+    labels: {
+        form: string;
+        password: string;
+        confirmPassword: string;
+        passwordHint?: string;
+        submit: string;
+    };
+}
+export declare function ResetPasswordForm({ onSubmit, labels, errors, formError, pending, footer, className, }: ResetPasswordFormProps): import("react").JSX.Element;

package/dist/organisms/AuthForms/AuthForms.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Alert } from '../../atoms/Alert/Alert.js';
+import { Checkbox } from '../../atoms/Checkbox/Checkbox.js';
+import { Input } from '../../atoms/Input/Input.js';
+import { FormField } from '../../molecules/FormField/FormField.js';
+import { PasswordInput } from '../../molecules/PasswordInput/PasswordInput.js';
+import { AuthFormShell, useAuthForm } from './shared.js';
+const LOGIN_FIELDS = ['identifier', 'password'];
+export function LoginForm({ onSubmit, labels, identifierType = 'email', forgotPassword, defaultValues, errors, formError, pending, footer, className, }) {
+    const { ids, markSubmitted } = useAuthForm(LOGIN_FIELDS, errors);
+    const [values, setValues] = useState({
+        identifier: '',
+        password: '',
+        remember: false,
+        ...defaultValues,
+    });
+    const set = (k, v) => setValues((s) => ({ ...s, [k]: v }));
+    return (_jsxs(AuthFormShell, { label: labels.form, submitLabel: labels.submit, formError: formError, pending: pending, footer: footer, className: className, onSubmit: () => {
+            markSubmitted();
+            onSubmit(values);
+        }, children: [_jsx(FormField, { id: ids.identifier, label: labels.identifier, required: true, error: errors?.identifier, children: _jsx(Input, { type: identifierType === 'email' ? 'email' : 'text', inputMode: identifierType === 'email' ? 'email' : undefined, autoComplete: "username", autoCapitalize: "none", spellCheck: false, value: values.identifier, onChange: (e) => set('identifier', e.target.value) }) }), _jsx(FormField, { id: ids.password, label: labels.password, required: true, error: errors?.password, children: _jsx(PasswordInput, { autoComplete: "current-password", value: values.password, onChange: (e) => set('password', e.target.value) }) }), forgotPassword || labels.remember ? (_jsxs("div", { className: "ui-auth-form__row", children: [labels.remember ? (_jsx(FormField, { label: labels.remember, layout: "inline", children: _jsx(Checkbox, { checked: values.remember, onCheckedChange: (c) => set('remember', c === true) }) })) : (_jsx("span", {})), forgotPassword] })) : null] }));
+}
+const SIGNUP_FIELDS = ['name', 'email', 'password', 'acceptedTerms'];
+export function SignupForm({ onSubmit, labels, defaultValues, errors, formError, pending, footer, className, }) {
+    const { ids, markSubmitted } = useAuthForm(SIGNUP_FIELDS, errors);
+    const [values, setValues] = useState({
+        name: '',
+        email: '',
+        password: '',
+        acceptedTerms: false,
+        ...defaultValues,
+    });
+    const set = (k, v) => setValues((s) => ({ ...s, [k]: v }));
+    return (_jsxs(AuthFormShell, { label: labels.form, submitLabel: labels.submit, formError: formError, pending: pending, footer: footer, className: className, onSubmit: () => {
+            markSubmitted();
+            onSubmit(values);
+        }, children: [labels.name ? (_jsx(FormField, { id: ids.name, label: labels.name, required: true, error: errors?.name, children: _jsx(Input, { autoComplete: "name", value: values.name, onChange: (e) => set('name', e.target.value) }) })) : null, _jsx(FormField, { id: ids.email, label: labels.email, required: true, error: errors?.email, children: _jsx(Input, { type: "email", inputMode: "email", autoComplete: "email", autoCapitalize: "none", spellCheck: false, value: values.email, onChange: (e) => set('email', e.target.value) }) }), _jsx(FormField, { id: ids.password, label: labels.password, hint: labels.passwordHint, required: true, error: errors?.password, children: _jsx(PasswordInput, { autoComplete: "new-password", value: values.password, onChange: (e) => set('password', e.target.value) }) }), labels.terms ? (_jsx(FormField, { id: ids.acceptedTerms, label: labels.terms, layout: "inline", required: true, error: errors?.acceptedTerms, children: _jsx(Checkbox, { checked: values.acceptedTerms, onCheckedChange: (c) => set('acceptedTerms', c === true) }) })) : null] }));
+}
+const FORGOT_FIELDS = ['email'];
+export function ForgotPasswordForm({ onSubmit, labels, sent = false, defaultEmail = '', errors, formError, pending, footer, className, }) {
+    const { ids, markSubmitted } = useAuthForm(FORGOT_FIELDS, errors);
+    const [email, setEmail] = useState(defaultEmail);
+    return (_jsxs(AuthFormShell, { label: labels.form, submitLabel: labels.submit, formError: formError, pending: pending, footer: footer, className: className, onSubmit: () => {
+            markSubmitted();
+            onSubmit({ email });
+        }, children: [sent ? _jsx(Alert, { type: "success", body: labels.sent }) : null, _jsx(FormField, { id: ids.email, label: labels.email, required: true, error: errors?.email, children: _jsx(Input, { type: "email", inputMode: "email", autoComplete: "email", autoCapitalize: "none", spellCheck: false, value: email, onChange: (e) => setEmail(e.target.value) }) })] }));
+}
+const RESET_FIELDS = ['password', 'confirmPassword'];
+export function ResetPasswordForm({ onSubmit, labels, errors, formError, pending, footer, className, }) {
+    const { ids, markSubmitted } = useAuthForm(RESET_FIELDS, errors);
+    const [values, setValues] = useState({ password: '', confirmPassword: '' });
+    return (_jsxs(AuthFormShell, { label: labels.form, submitLabel: labels.submit, formError: formError, pending: pending, footer: footer, className: className, onSubmit: () => {
+            markSubmitted();
+            onSubmit(values);
+        }, children: [_jsx(FormField, { id: ids.password, label: labels.password, hint: labels.passwordHint, required: true, error: errors?.password, children: _jsx(PasswordInput, { autoComplete: "new-password", value: values.password, onChange: (e) => setValues((v) => ({ ...v, password: e.target.value })) }) }), _jsx(FormField, { id: ids.confirmPassword, label: labels.confirmPassword, required: true, error: errors?.confirmPassword, children: _jsx(PasswordInput, { autoComplete: "new-password", value: values.confirmPassword, onChange: (e) => setValues((v) => ({ ...v, confirmPassword: e.target.value })) }) })] }));
+}

package/dist/organisms/AuthForms/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AuthForms.js';
+export type { AuthFormBaseProps } from './shared.js';