@setsquare/ui 0.1.0

package/dist/ui/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/ui/tag.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAiB,MAAM,WAAW,CAAC;AAStD;;;GAGG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAY;IACzD,OAAO,CACL,gBAAM,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,aAClC,IAAI,IAAI,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,EACpC,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/ui/text-field.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { type TextFieldProps as RACTextFieldProps } from 'react-aria-components';
+import { type FieldWidth } from './field.js';
+export interface TextFieldProps extends Omit<RACTextFieldProps, 'className' | 'children' | 'validate'> {
+    label: string;
+    /** Hint: what to enter and in what format. */
+    description?: ReactNode;
+    /** Overrides the validation message. Usually leave it to `validate` / `requiredMessage`. */
+    errorMessage?: string;
+    /** Default "Enter <label>". */
+    requiredMessage?: string;
+    validate?: (value: string) => string | string[] | true | null | undefined;
+    placeholder?: string;
+    width?: FieldWidth;
+    className?: string;
+}
+/**
+ * Single-line text input. Pass `autoComplete` for anything about the user (email, name, organization,
+ * tel, postal-code…) so browsers can fill it and assistive tech can identify it (WCAG 1.3.5).
+ */
+export declare function TextField({ label, description, errorMessage, requiredMessage, validate, placeholder, width, className, ...props }: TextFieldProps): import("react").JSX.Element;
+export interface TextAreaProps extends TextFieldProps {
+    rows?: number;
+}
+/** Multi-line text. Grows with its rows; never resizes narrower than its field. */
+export declare function TextArea({ label, description, errorMessage, requiredMessage, validate, placeholder, width, rows, className, ...props }: TextAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=text-field.d.ts.map

package/dist/ui/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/ui/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAWL,KAAK,UAAU,EAChB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,iBAAiB,EACjB,WAAW,GAAG,UAAU,GAAG,UAAU,CACtC;IACC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,KAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,+BAsBhB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mFAAmF;AACnF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,KAAY,EACZ,IAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,+BAoBf"}

package/dist/ui/text-field.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, TextArea as RACTextArea, TextField as RACTextField, } from 'react-aria-components';
+import { cn } from '../lib/cn.js';
+import { FieldDescription, FieldError, FieldLabel, fieldStack, fieldBox, fieldInput, fieldWidths, lcFirst, textAreaStyles, withRequired, } from './field.js';
+/**
+ * Single-line text input. Pass `autoComplete` for anything about the user (email, name, organization,
+ * tel, postal-code…) so browsers can fill it and assistive tech can identify it (WCAG 1.3.5).
+ */
+export function TextField({ label, description, errorMessage, requiredMessage, validate, placeholder, width = 'full', className, ...props }) {
+    return (_jsxs(RACTextField, { ...props, validate: withRequired(props.isRequired, requiredMessage ?? `Enter ${lcFirst(label)}`, (v) => !v?.trim(), validate), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { requiredMessage: requiredMessage ?? `Enter ${lcFirst(label)}`, children: errorMessage }), _jsx("div", { className: fieldBox, children: _jsx(Input, { placeholder: placeholder, className: fieldInput }) })] }));
+}
+/** Multi-line text. Grows with its rows; never resizes narrower than its field. */
+export function TextArea({ label, description, errorMessage, requiredMessage, validate, placeholder, width = 'lg', rows = 4, className, ...props }) {
+    return (_jsxs(RACTextField, { ...props, validate: withRequired(props.isRequired, requiredMessage ?? `Enter ${lcFirst(label)}`, (v) => !v?.trim(), validate), className: cn(fieldStack, fieldWidths[width], className), children: [_jsx(FieldLabel, { isRequired: props.isRequired, children: label }), description && _jsx(FieldDescription, { children: description }), _jsx(FieldError, { requiredMessage: requiredMessage ?? `Enter ${lcFirst(label)}`, children: errorMessage }), _jsx(RACTextArea, { rows: rows, placeholder: placeholder, className: textAreaStyles })] }));
+}
+//# sourceMappingURL=text-field.js.map

package/dist/ui/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/ui/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EACL,KAAK,EACL,QAAQ,IAAI,WAAW,EACvB,SAAS,IAAI,YAAY,GAE1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,EACV,WAAW,EACX,OAAO,EACP,cAAc,EACd,YAAY,GAEb,MAAM,YAAY,CAAC;AAmBpB;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,KAAK,GAAG,MAAM,EACd,SAAS,EACT,GAAG,KAAK,EACO;IACf,OAAO,CACL,MAAC,YAAY,OACP,KAAK,EACT,QAAQ,EAAE,YAAY,CACpB,KAAK,CAAC,UAAU,EAChB,eAAe,IAAI,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,EAC5C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EACjB,QAAQ,CACT,EACD,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,aAExD,KAAC,UAAU,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAc,EAC7D,WAAW,IAAI,KAAC,gBAAgB,cAAE,WAAW,GAAoB,EAClE,KAAC,UAAU,IAAC,eAAe,EAAE,eAAe,IAAI,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,YACtE,YAAY,GACF,EACb,cAAK,SAAS,EAAE,QAAQ,YACtB,KAAC,KAAK,IAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,GAAI,GACtD,IACO,CAChB,CAAC;AACJ,CAAC;AAMD,mFAAmF;AACnF,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,QAAQ,EACR,WAAW,EACX,KAAK,GAAG,IAAI,EACZ,IAAI,GAAG,CAAC,EACR,SAAS,EACT,GAAG,KAAK,EACM;IACd,OAAO,CACL,MAAC,YAAY,OACP,KAAK,EACT,QAAQ,EAAE,YAAY,CACpB,KAAK,CAAC,UAAU,EAChB,eAAe,IAAI,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,EAC5C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EACjB,QAAQ,CACT,EACD,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,aAExD,KAAC,UAAU,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,YAAG,KAAK,GAAc,EAC7D,WAAW,IAAI,KAAC,gBAAgB,cAAE,WAAW,GAAoB,EAClE,KAAC,UAAU,IAAC,eAAe,EAAE,eAAe,IAAI,SAAS,OAAO,CAAC,KAAK,CAAC,EAAE,YACtE,YAAY,GACF,EACb,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,GAAI,IACnE,CAChB,CAAC;AACJ,CAAC"}

package/dist/ui/text-link.d.ts

@@ -0,0 +1,17 @@
+import { type LinkProps as RACLinkProps } from 'react-aria-components';
+export interface TextLinkProps extends Omit<RACLinkProps, 'className'> {
+    /**
+     * 'brand' (default) for links in body text. 'inherit' takes the colour around it, for a link inside an
+     * alert, an error message or any ground brand isn't checked against — the underline still marks it.
+     */
+    tone?: 'brand' | 'inherit';
+    className?: string;
+}
+/**
+ * A link in running text: underlined, because colour alone can't mark a link here (brand is under 3:1 against
+ * body text in every theme), with a thicker underline on hover and the focus ring. It stays inline, so it
+ * wraps with the sentence and falls under 2.5.8's and 2.5.5's Inline exception. For navigation use the
+ * sidebar, menus or breadcrumbs; for a link that looks like a button, LinkButton.
+ */
+export declare const TextLink: import("react").ForwardRefExoticComponent<TextLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=text-link.d.ts.map

package/dist/ui/text-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.d.ts","sourceRoot":"","sources":["../../src/ui/text-link.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IACpE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,6GAWnB,CAAC"}

package/dist/ui/text-link.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Link as RACLink } from 'react-aria-components';
+import { cn } from '../lib/cn.js';
+/**
+ * A link in running text: underlined, because colour alone can't mark a link here (brand is under 3:1 against
+ * body text in every theme), with a thicker underline on hover and the focus ring. It stays inline, so it
+ * wraps with the sentence and falls under 2.5.8's and 2.5.5's Inline exception. For navigation use the
+ * sidebar, menus or breadcrumbs; for a link that looks like a button, LinkButton.
+ */
+export const TextLink = forwardRef(function TextLink({ tone = 'brand', className, ...props }, ref) {
+    return (_jsx(RACLink, { ref: ref, ...props, className: cn('text-link', tone === 'brand' ? 'text-brand' : 'text-inherit', className) }));
+});
+//# sourceMappingURL=text-link.js.map

package/dist/ui/text-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.js","sourceRoot":"","sources":["../../src/ui/text-link.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkC,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAWlC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAmC,SAAS,QAAQ,CACpF,EAAE,IAAI,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvC,GAAG;IAEH,OAAO,CACL,KAAC,OAAO,IACN,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,SAAS,CAAC,GACvF,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/ui/theme-switcher.d.ts

@@ -0,0 +1,26 @@
+import { type ConformanceLevel, type ThemeOptions, type ThemePreference } from './theme.js';
+export interface ThemeSwitcherProps extends ThemeOptions {
+    /** Also offer AA and AAA, as the docs site does. */
+    level?: boolean;
+    /**
+     * What to show before the page has read the stored choice, as the server renders it. With `storage="cookie"`,
+     * pass the cookie's value from the server. Default: `defaultTheme`.
+     */
+    initialTheme?: ThemePreference;
+    /** The level to show before the page has read it. Default `aa`. */
+    initialLevel?: ConformanceLevel;
+    /** After a change, with the choice, whether the page is now dark, and the level. */
+    onChange?: (state: {
+        theme: ThemePreference;
+        resolved: 'light' | 'dark';
+        level: ConformanceLevel;
+    }) => void;
+    className?: string;
+}
+/**
+ * Light, Dark and System, and optionally AA and AAA: segmented controls that set `<html>` and keep the choice
+ * where ThemeScript reads it before the next page paints. System follows the operating system as it changes.
+ * Use the same options as the page's ThemeScript.
+ */
+export declare function ThemeSwitcher({ level: offerLevel, initialTheme, initialLevel, onChange, className, ...options }: ThemeSwitcherProps): import("react").JSX.Element;
+//# sourceMappingURL=theme-switcher.d.ts.map

package/dist/ui/theme-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.d.ts","sourceRoot":"","sources":["../../src/ui/theme-switcher.tsx"],"names":[],"mappings":"AAKA,OAAO,EAOL,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,mEAAmE;IACnE,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QACjB,KAAK,EAAE,eAAe,CAAC;QACvB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;QAC3B,KAAK,EAAE,gBAAgB,CAAC;KACzB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,UAAkB,EACzB,YAAY,EACZ,YAAmB,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,OAAO,EACX,EAAE,kBAAkB,+BA+CpB"}

package/dist/ui/theme-switcher.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useSyncExternalStore } from 'react';
+import { cn } from '../lib/cn.js';
+import { Segment, SegmentedControl } from './segmented-control.js';
+import { applyLevel, applyTheme, readLevel, readTheme, resolveTheme, subscribeTheme, } from './theme.js';
+/**
+ * Light, Dark and System, and optionally AA and AAA: segmented controls that set `<html>` and keep the choice
+ * where ThemeScript reads it before the next page paints. System follows the operating system as it changes.
+ * Use the same options as the page's ThemeScript.
+ */
+export function ThemeSwitcher({ level: offerLevel = false, initialTheme, initialLevel = 'aa', onChange, className, ...options }) {
+    const { storage, key, levelKey, defaultTheme } = options;
+    const subscribe = useCallback((cb) => subscribeTheme(cb, { storage, key, levelKey, defaultTheme }), [storage, key, levelKey, defaultTheme]);
+    const theme = useSyncExternalStore(subscribe, () => readTheme(options), () => initialTheme ?? defaultTheme ?? 'system');
+    const level = useSyncExternalStore(subscribe, readLevel, () => initialLevel);
+    const report = (t, l) => onChange?.({ theme: t, resolved: resolveTheme(t), level: l });
+    return (_jsxs("div", { className: cn('flex flex-wrap items-center gap-2', className), children: [_jsxs(SegmentedControl, { "aria-label": "Theme", selectedKeys: [theme], onSelectionChange: (keys) => {
+                    const next = [...keys][0];
+                    if (next !== 'light' && next !== 'dark' && next !== 'system')
+                        return;
+                    applyTheme(next, options);
+                    report(next, level);
+                }, children: [_jsx(Segment, { id: "light", children: "Light" }), _jsx(Segment, { id: "dark", children: "Dark" }), _jsx(Segment, { id: "system", children: "System" })] }), offerLevel && (_jsxs(SegmentedControl, { "aria-label": "Conformance level", selectedKeys: [level], onSelectionChange: (keys) => {
+                    const next = [...keys][0];
+                    if (next !== 'aa' && next !== 'aaa')
+                        return;
+                    applyLevel(next, options);
+                    report(theme, next);
+                }, children: [_jsx(Segment, { id: "aa", children: "AA" }), _jsx(Segment, { id: "aaa", children: "AAA" })] }))] }));
+}
+//# sourceMappingURL=theme-switcher.js.map

package/dist/ui/theme-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.js","sourceRoot":"","sources":["../../src/ui/theme-switcher.tsx"],"names":[],"mappings":"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"}

package/dist/ui/theme.d.ts

@@ -0,0 +1,54 @@
+export type ThemePreference = 'light' | 'dark' | 'system';
+export type ConformanceLevel = 'aa' | 'aaa';
+export interface ThemeOptions {
+    /**
+     * Where the choice is kept. `localStorage` (default): in this browser, read by the script before the first
+     * paint. `cookie`: sent with every request as well, so the server can render `<html>` with it.
+     */
+    storage?: 'localStorage' | 'cookie';
+    /** The key, or the cookie's name. Letters, digits, `-` and `_`. Default `setsquare-ui-theme`. */
+    key?: string;
+    /** The key for the level, when the page offers AA and AAA. Default `setsquare-ui-level`. */
+    levelKey?: string;
+    /** What to show before anyone chooses. Default `system`: follow the operating system. */
+    defaultTheme?: ThemePreference;
+}
+/** Dispatched on window when this tab changes the theme or level; `storage` only fires in other tabs. */
+export declare const THEME_CHANGE_EVENT = "setsquare-ui:theme-change";
+/**
+ * The script that puts the stored theme and level on `<html>` before the first paint: `class="dark"`,
+ * `color-scheme`, and `data-conformance` when a level was chosen. Inline it in `<head>` (ThemeScript does),
+ * where it runs before anything is drawn. It reads nothing but the stored choice and the colour-scheme media
+ * query, and a storage the browser refuses leaves the page as the server rendered it.
+ */
+export declare function themeScript(options?: ThemeOptions): string;
+/**
+ * The script's hash, `sha256-…`, for a Content-Security-Policy that lists inline scripts by hash
+ * (`script-src 'sha256-…'`) rather than allowing them all. The same options give the same hash.
+ */
+export declare function themeScriptHash(options?: ThemeOptions): Promise<string>;
+export interface ThemeScriptProps extends ThemeOptions {
+    /** The request's CSP nonce, for a policy that allows inline scripts by nonce. */
+    nonce?: string;
+}
+/**
+ * The theme script as an element, for `<head>` in the root layout. Give `<html>` `suppressHydrationWarning`:
+ * the script changes its class and style before React hydrates it.
+ */
+export declare function ThemeScript({ nonce, ...options }: ThemeScriptProps): import("react").JSX.Element;
+/** The stored theme, or the default when there is none. Browser only. */
+export declare function readTheme(options?: ThemeOptions): ThemePreference;
+/** The level `<html>` shows. Browser only. */
+export declare function readLevel(): ConformanceLevel;
+/** Whether the page is dark: the theme, with `system` resolved by the colour-scheme media query. */
+export declare function resolveTheme(theme: ThemePreference): 'light' | 'dark';
+/** Puts a theme on `<html>` and keeps it, as the script will on the next page. Browser only. */
+export declare function applyTheme(theme: ThemePreference, options?: ThemeOptions): void;
+/** Puts a conformance level on `<html>` and keeps it. Browser only. */
+export declare function applyLevel(level: ConformanceLevel, options?: ThemeOptions): void;
+/**
+ * Calls back when the theme or level may have changed: this tab, another tab, or the operating system's
+ * colour scheme while the theme is `system`. Browser only.
+ */
+export declare function subscribeTheme(onChange: () => void, options?: ThemeOptions): () => void;
+//# sourceMappingURL=theme.d.ts.map

package/dist/ui/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/ui/theme.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAC;IACpC,iGAAiG;IACjG,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yFAAyF;IACzF,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC;AAID,yGAAyG;AACzG,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAe9D;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAO1D;AAED;;;GAGG;AACH,wBAAsB,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,CAM7E;AAED,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,EAAE,gBAAgB,+BAElE;AAwBD,yEAAyE;AACzE,wBAAgB,SAAS,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,eAAe,CAMjE;AAED,8CAA8C;AAC9C,wBAAgB,SAAS,IAAI,gBAAgB,CAE5C;AAED,oGAAoG;AACpG,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,GAAG,MAAM,CAGrE;AASD,gGAAgG;AAChG,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAK/E;AAED,uEAAuE;AACvE,wBAAgB,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAKhF;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,IAAI,CAmBvF"}

package/dist/ui/theme.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const KEY = /^[\w-]+$/;
+const PREFERENCES = ['light', 'dark', 'system'];
+/** Dispatched on window when this tab changes the theme or level; `storage` only fires in other tabs. */
+export const THEME_CHANGE_EVENT = 'setsquare-ui:theme-change';
+function settings(options = {}) {
+    const storage = options.storage ?? 'localStorage';
+    const key = options.key ?? 'setsquare-ui-theme';
+    const levelKey = options.levelKey ?? 'setsquare-ui-level';
+    const defaultTheme = options.defaultTheme ?? 'system';
+    for (const k of [key, levelKey])
+        if (!KEY.test(k))
+            throw new Error(`Theme keys are letters, digits, - and _ only; "${k}" isn't one.`);
+    if (!PREFERENCES.includes(defaultTheme))
+        throw new Error(`defaultTheme is light, dark or system, not "${defaultTheme}".`);
+    return { storage, key, levelKey, defaultTheme };
+}
+/**
+ * The script that puts the stored theme and level on `<html>` before the first paint: `class="dark"`,
+ * `color-scheme`, and `data-conformance` when a level was chosen. Inline it in `<head>` (ThemeScript does),
+ * where it runs before anything is drawn. It reads nothing but the stored choice and the colour-scheme media
+ * query, and a storage the browser refuses leaves the page as the server rendered it.
+ */
+export function themeScript(options) {
+    const { storage, key, levelKey, defaultTheme } = settings(options);
+    const read = storage === 'cookie'
+        ? `function g(k){var m=document.cookie.match(new RegExp('(?:^|; )'+k+'=([^;]*)'));return m?m[1]:null}`
+        : `function g(k){return localStorage.getItem(k)}`;
+    return `(function(){try{${read}var d=document.documentElement,t=g('${key}'),l=g('${levelKey}');if(t!=='light'&&t!=='dark'&&t!=='system')t='${defaultTheme}';var n=t==='dark'||(t==='system'&&matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle('dark',n);d.style.colorScheme=n?'dark':'light';if(l==='aa'||l==='aaa')d.setAttribute('data-conformance',l)}catch(e){}})();`;
+}
+/**
+ * The script's hash, `sha256-…`, for a Content-Security-Policy that lists inline scripts by hash
+ * (`script-src 'sha256-…'`) rather than allowing them all. The same options give the same hash.
+ */
+export async function themeScriptHash(options) {
+    const bytes = new TextEncoder().encode(themeScript(options));
+    const digest = new Uint8Array(await globalThis.crypto.subtle.digest('SHA-256', bytes));
+    let binary = '';
+    for (const b of digest)
+        binary += String.fromCharCode(b);
+    return `sha256-${btoa(binary)}`;
+}
+/**
+ * The theme script as an element, for `<head>` in the root layout. Give `<html>` `suppressHydrationWarning`:
+ * the script changes its class and style before React hydrates it.
+ */
+export function ThemeScript({ nonce, ...options }) {
+    return _jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: themeScript(options) } });
+}
+function readStored(name, storage) {
+    try {
+        if (storage === 'cookie') {
+            const m = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+            return m ? m[1] : null;
+        }
+        return window.localStorage.getItem(name);
+    }
+    catch {
+        return null;
+    }
+}
+function writeStored(name, value, storage) {
+    try {
+        if (storage === 'cookie')
+            document.cookie = `${name}=${value}; path=/; max-age=31536000; samesite=lax`;
+        else
+            window.localStorage.setItem(name, value);
+    }
+    catch {
+        // Refused: the choice holds for this page view and isn't remembered.
+    }
+}
+/** The stored theme, or the default when there is none. Browser only. */
+export function readTheme(options) {
+    const { storage, key, defaultTheme } = settings(options);
+    const stored = readStored(key, storage);
+    return PREFERENCES.includes(stored)
+        ? stored
+        : defaultTheme;
+}
+/** The level `<html>` shows. Browser only. */
+export function readLevel() {
+    return document.documentElement.getAttribute('data-conformance') === 'aaa' ? 'aaa' : 'aa';
+}
+/** Whether the page is dark: the theme, with `system` resolved by the colour-scheme media query. */
+export function resolveTheme(theme) {
+    if (theme !== 'system')
+        return theme;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+function paint(theme) {
+    const dark = resolveTheme(theme) === 'dark';
+    const root = document.documentElement;
+    root.classList.toggle('dark', dark);
+    root.style.colorScheme = dark ? 'dark' : 'light';
+}
+/** Puts a theme on `<html>` and keeps it, as the script will on the next page. Browser only. */
+export function applyTheme(theme, options) {
+    const { storage, key } = settings(options);
+    paint(theme);
+    writeStored(key, theme, storage);
+    window.dispatchEvent(new Event(THEME_CHANGE_EVENT));
+}
+/** Puts a conformance level on `<html>` and keeps it. Browser only. */
+export function applyLevel(level, options) {
+    const { storage, levelKey } = settings(options);
+    document.documentElement.setAttribute('data-conformance', level);
+    writeStored(levelKey, level, storage);
+    window.dispatchEvent(new Event(THEME_CHANGE_EVENT));
+}
+/**
+ * Calls back when the theme or level may have changed: this tab, another tab, or the operating system's
+ * colour scheme while the theme is `system`. Browser only.
+ */
+export function subscribeTheme(onChange, options) {
+    const { storage, levelKey } = settings(options);
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    // The operating system changed scheme, or another tab chose: show it here too.
+    const follow = () => {
+        paint(readTheme(options));
+        const level = readStored(levelKey, storage);
+        if (level === 'aa' || level === 'aaa')
+            document.documentElement.setAttribute('data-conformance', level);
+        onChange();
+    };
+    window.addEventListener(THEME_CHANGE_EVENT, onChange);
+    window.addEventListener('storage', follow);
+    query.addEventListener('change', follow);
+    return () => {
+        window.removeEventListener(THEME_CHANGE_EVENT, onChange);
+        window.removeEventListener('storage', follow);
+        query.removeEventListener('change', follow);
+    };
+}
+//# sourceMappingURL=theme.js.map

package/dist/ui/theme.js.map

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

package/dist/ui/toast.d.ts

@@ -0,0 +1,34 @@
+import { UNSTABLE_ToastQueue as ToastQueue } from 'react-aria-components';
+export type ToastTone = 'success' | 'info' | 'warning' | 'danger';
+export interface ToastContent {
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    /** One action, usually Undo or View. A toast with an action never times out. */
+    action?: {
+        label: string;
+        onAction: () => void;
+    };
+}
+export declare const toastQueue: ToastQueue<ToastContent>;
+/**
+ * Show a toast. Routine confirmations time out after --toast-timeout (8s at AA, never at AAA),
+ * paused while hovered or focused. Errors and toasts with an action stay until dismissed.
+ * Returns the key, for toastQueue.close(key).
+ */
+export declare function toast(content: ToastContent, options?: {
+    timeout?: number | 'persistent';
+}): string;
+/**
+ * Render once, near the root. A labelled landmark ("Notifications") at the bottom right — bottom centre
+ * on phones; F6 moves focus into it, and each toast is announced when it arrives.
+ *
+ * Toasts that stay (errors, anything with an action) must not cover the control that has focus. The stack's
+ * height is published as --toast-region-height; ShellMain and the page use it as bottom scroll padding (and
+ * room to scroll into), so a focused control is scrolled clear of the stack rather than hidden behind it. With
+ * the right panel open beside the page, the stack moves left of the panel, whose footer can't scroll.
+ */
+export declare function Toaster({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=toast.d.ts.map

package/dist/ui/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/ui/toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,mBAAmB,IAAI,UAAU,EAElC,MAAM,uBAAuB,CAAC;AAS/B,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAElE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gFAAgF;IAChF,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;CAClD;AAED,eAAO,MAAM,UAAU,0BAAwD,CAAC;AAEhF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAA;CAAO,UAQ7F;AA8BD;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BA8D5D"}

package/dist/ui/toast.js

@@ -0,0 +1,69 @@
+// React Aria's toast is still UNSTABLE_ in react-aria-components: this file is the only place that imports it.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, UNSTABLE_Toast as RACToast, UNSTABLE_ToastContent as RACToastContent, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, } from 'react-aria-components';
+import { useCallback, useRef } from 'react';
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { readMs } from '../lib/tokens.js';
+import { useOptionalShell } from '../shell/dashboard-shell.js';
+import { Button } from './button.js';
+export const toastQueue = new ToastQueue({ maxVisibleToasts: 3 });
+/**
+ * Show a toast. Routine confirmations time out after --toast-timeout (8s at AA, never at AAA),
+ * paused while hovered or focused. Errors and toasts with an action stay until dismissed.
+ * Returns the key, for toastQueue.close(key).
+ */
+export function toast(content, options = {}) {
+    const persistent = options.timeout === 'persistent' || content.tone === 'danger' || !!content.action;
+    const ms = typeof options.timeout === 'number' ? options.timeout : readMs('--toast-timeout', 8000);
+    return toastQueue.add(content, {
+        timeout: persistent || ms <= 0 ? undefined : Math.max(ms, 5000),
+    });
+}
+const tones = {
+    success: { icon: 'text-success', Icon: CircleCheck },
+    info: { icon: 'text-brand', Icon: Info },
+    warning: { icon: 'text-warning', Icon: TriangleAlert },
+    danger: { icon: 'text-destructive', Icon: CircleAlert },
+};
+/** Publishes the toast stack's height as --toast-region-height, so scroll padding can keep focus clear of it. */
+function useRegionHeight() {
+    const observer = useRef(null);
+    return useCallback((el) => {
+        const root = document.documentElement;
+        observer.current?.disconnect();
+        if (!el) {
+            root.style.setProperty('--toast-region-height', '0px');
+            return;
+        }
+        const set = () => root.style.setProperty('--toast-region-height', `${Math.ceil(el.getBoundingClientRect().height)}px`);
+        set();
+        observer.current = new ResizeObserver(set);
+        observer.current.observe(el);
+    }, []);
+}
+/**
+ * Render once, near the root. A labelled landmark ("Notifications") at the bottom right — bottom centre
+ * on phones; F6 moves focus into it, and each toast is announced when it arrives.
+ *
+ * Toasts that stay (errors, anything with an action) must not cover the control that has focus. The stack's
+ * height is published as --toast-region-height; ShellMain and the page use it as bottom scroll padding (and
+ * room to scroll into), so a focused control is scrolled clear of the stack rather than hidden behind it. With
+ * the right panel open beside the page, the stack moves left of the panel, whose footer can't scroll.
+ */
+export function Toaster({ className }) {
+    const regionRef = useRegionHeight();
+    // With the right panel open beside the page, the stack sits left of it: the panel's footer doesn't scroll,
+    // so nothing could move its buttons clear of a toast.
+    const shell = useOptionalShell();
+    const clearOfPanel = !!shell?.panelOpen && shell.panelMode === 'inline';
+    return (_jsx(ToastRegion, { ref: regionRef, queue: toastQueue, className: cn('fixed right-4 bottom-4 z-(--z-popover) flex w-[min(24rem,calc(100vw-2rem))] flex-col-reverse gap-2 rounded-lg outline-none data-focus-visible:focus-ring', clearOfPanel && 'right-[calc(var(--panel-width)+1.5rem)]', className), children: ({ toast: t }) => {
+            const tone = tones[t.content.tone ?? 'success'];
+            return (_jsxs(RACToast, { toast: t, className: "flex items-start gap-3 rounded-lg border border-border bg-popover py-3 pr-2 pl-3 text-sm text-popover-foreground shadow-(--shadow-lg) outline-none data-focus-visible:focus-ring motion-safe:animate-[setsquare-toast_var(--duration-enter)_var(--ease-standard)]", children: [_jsx(tone.Icon, { "aria-hidden": "true", className: cn('mt-px size-5 shrink-0', tone.icon) }), _jsxs(RACToastContent, { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(Text, { slot: "title", className: "font-semibold", children: t.content.title }), t.content.description && (_jsx(Text, { slot: "description", className: "text-[13px] leading-5 text-muted-foreground", children: t.content.description })), t.content.action && (_jsx("div", { className: "mt-2", children: _jsx(Button, { variant: "outline", visualSize: "sm", onPress: () => {
+                                        t.content.action.onAction();
+                                        toastQueue.close(t.key);
+                                    }, children: t.content.action.label }) }))] }), _jsx(Button, { slot: "close", "aria-label": "Dismiss", variant: "ghost", visualSize: "icon-sm", className: "-my-0.5 shrink-0", children: _jsx(X, { "aria-hidden": "true" }) })] }));
+        } }));
+}
+//# sourceMappingURL=toast.js.map

package/dist/ui/toast.js.map

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

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,10 @@
+import { TooltipTrigger, type TooltipProps as RACTooltipProps } from 'react-aria-components';
+import type { ReactNode } from 'react';
+export interface TooltipProps extends Omit<RACTooltipProps, 'className' | 'children'> {
+    className?: string;
+    children: ReactNode;
+}
+/** Short label shown on hover and keyboard focus; dismissed with Escape. Never the only place information lives. */
+export declare function Tooltip({ className, offset, children, ...props }: TooltipProps): import("react").JSX.Element;
+export { TooltipTrigger };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/ui/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,cAAc,EACd,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,UAAU,CAAC;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,oHAAoH;AACpH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,MAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAalF;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/ui/tooltip.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as RACTooltip, TooltipTrigger, } from 'react-aria-components';
+import { cn } from '../lib/cn.js';
+/** Short label shown on hover and keyboard focus; dismissed with Escape. Never the only place information lives. */
+export function Tooltip({ className, offset = 6, children, ...props }) {
+    return (_jsx(RACTooltip, { ...props, offset: offset, className: cn('z-(--z-popover) max-w-64 rounded-md bg-foreground px-2 py-1 text-[13px] leading-5 font-medium text-background shadow-(--shadow-lg)', className), children: children }));
+}
+export { TooltipTrigger };
+//# sourceMappingURL=tooltip.js.map

package/dist/ui/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/ui/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,cAAc,GAEf,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAOlC,oHAAoH;AACpH,MAAM,UAAU,OAAO,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IACjF,OAAO,CACL,KAAC,UAAU,OACL,KAAK,EACT,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CACX,oIAAoI,EACpI,SAAS,CACV,YAEA,QAAQ,GACE,CACd,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}