@kennycorrea/ui 0.11.4 → 1.6.1

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';

package/dist/organisms/AuthForms/index.js

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

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

@@ -0,0 +1,36 @@
+import { type FormEvent, type ReactNode } from 'react';
+/** What every auth form takes besides its own labels. */
+export interface AuthFormBaseProps<Field extends string> {
+    /**
+     * Field messages from your validation or your server, by field. After a submit, focus moves
+     * to the first field that has one.
+     */
+    errors?: Partial<Record<Field, string>>;
+    /** A message about the whole attempt ("Those details did not match"). Announced as an alert. */
+    formError?: string;
+    /** Disables the submit button and shows its spinner while a request is in flight. */
+    pending?: boolean;
+    /** Under the form: "No account? Sign up", legal links. */
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * The ids for a form's fields, and focus on the first invalid one after each submit.
+ *
+ * Focus moves only in answer to a submit, never when `errors` changes for another reason, so a
+ * field validated as the person types does not pull the cursor away from where they are.
+ */
+export declare function useAuthForm<Field extends string>(fields: readonly Field[], errors: Partial<Record<Field, string>> | undefined): {
+    ids: Record<Field, string>;
+    markSubmitted: () => void;
+};
+export declare function AuthFormShell({ label, onSubmit, formError, submitLabel, pending, footer, className, children, }: {
+    label: string;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    formError?: string;
+    submitLabel: string;
+    pending?: boolean;
+    footer?: ReactNode;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/organisms/AuthForms/shared.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+import { Alert } from '../../atoms/Alert/Alert.js';
+import { Button } from '../../atoms/Button/Button.js';
+/**
+ * The ids for a form's fields, and focus on the first invalid one after each submit.
+ *
+ * Focus moves only in answer to a submit, never when `errors` changes for another reason, so a
+ * field validated as the person types does not pull the cursor away from where they are.
+ */
+export function useAuthForm(fields, errors) {
+    const base = useId();
+    const ids = Object.fromEntries(fields.map((f) => [f, `${base}-${f}`]));
+    const submitted = useRef(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: ids and fields are stable for the form's lifetime.
+    useEffect(() => {
+        if (!submitted.current || !errors)
+            return;
+        const first = fields.find((f) => errors[f]);
+        if (!first)
+            return;
+        submitted.current = false;
+        document.getElementById(ids[first])?.focus();
+    }, [errors]);
+    const markSubmitted = () => {
+        submitted.current = true;
+    };
+    return { ids, markSubmitted };
+}
+export function AuthFormShell({ label, onSubmit, formError, submitLabel, pending, footer, className, children, }) {
+    return (_jsxs("form", { noValidate: true, "aria-label": label, className: ['ui-auth-form', className].filter(Boolean).join(' '), onSubmit: (e) => {
+            e.preventDefault();
+            if (!pending)
+                onSubmit(e);
+        }, children: [formError ? _jsx(Alert, { type: "error", body: formError }) : null, children, _jsx(Button, { type: "submit", size: "touch", fullWidth: true, loading: pending, children: submitLabel }), footer ? _jsx("div", { className: "ui-auth-form__footer", children: footer }) : null] }));
+}

package/dist/organisms/BulkActionBar/BulkActionBar.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export interface BulkAction {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Red, for the one that deletes or cancels. */
+    destructive?: boolean;
+    disabled?: boolean;
+}
+export interface BulkActionBarProps {
+    selectedCount: number;
+    actions: BulkAction[];
+    onAction: (id: string) => void;
+    onClear: () => void;
+    className?: string;
+}
+/**
+ * What to do with the selected rows: a floating toolbar that appears while anything is
+ * selected and sticks to the bottom of the content, above the TabBar on small screens.
+ *
+ * A Radix `Toolbar`, so its buttons are one Tab stop with arrow keys between them. The count
+ * sits in a polite live region that stays in the page while the bar is hidden, so a screen
+ * reader hears the selection change.
+ */
+export declare function BulkActionBar({ selectedCount, actions, onAction, onClear, className, }: BulkActionBarProps): import("react").JSX.Element;

package/dist/organisms/BulkActionBar/BulkActionBar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Cross2Icon } from '@radix-ui/react-icons';
+import * as Toolbar from '@radix-ui/react-toolbar';
+import { Button as ThemedButton } from '@radix-ui/themes';
+import { useUiStrings } from '../../strings.js';
+/**
+ * What to do with the selected rows: a floating toolbar that appears while anything is
+ * selected and sticks to the bottom of the content, above the TabBar on small screens.
+ *
+ * A Radix `Toolbar`, so its buttons are one Tab stop with arrow keys between them. The count
+ * sits in a polite live region that stays in the page while the bar is hidden, so a screen
+ * reader hears the selection change.
+ */
+export function BulkActionBar({ selectedCount, actions, onAction, onClear, className, }) {
+    const strings = useUiStrings();
+    const count = strings.selectedCount(selectedCount);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-sr-only", "aria-live": "polite", children: selectedCount > 0 ? count : '' }), selectedCount > 0 ? (_jsxs(Toolbar.Root, { "aria-label": strings.bulkActions, className: ['ui-bulk-bar', className].filter(Boolean).join(' '), children: [_jsx("span", { className: "ui-bulk-bar__count", "aria-hidden": "true", children: count }), actions.map((action) => (_jsx(Toolbar.Button, { asChild: true, disabled: action.disabled, children: _jsxs(ThemedButton, { size: "2", variant: action.destructive ? 'solid' : 'soft', color: action.destructive ? 'red' : undefined, onClick: () => onAction(action.id), children: [action.icon, action.label] }) }, action.id))), _jsx(Toolbar.Button, { asChild: true, children: _jsxs(ThemedButton, { size: "2", variant: "ghost", color: "gray", onClick: onClear, children: [_jsx(Cross2Icon, { "aria-hidden": "true" }), strings.clearSelection] }) })] })) : null] }));
+}

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

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

package/dist/organisms/BulkActionBar/index.js

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