@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/filter-bar.js

@@ -0,0 +1,350 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * A list's filters as data: fields the list can be narrowed by, each a `kind` with its own
+ * operators, and the filters set on them as `{ field, operator, values }` with string values, so
+ * they round-trip through a URL. `FilterBar` shows the set ones as removable chips beside an Add
+ * filter builder (field, then operator and values); `FilterValueEditor` is the builder's second step
+ * alone, such as a column head's "Filter by". Nothing here filters rows: `matchesFilter` tests one
+ * value for a list that filters on the client.
+ */
+import { CaretDownIcon, CaretLeftIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { css, cx } from "#primitives/css";
+import { Button, IconButton } from "./button.js";
+import { CheckboxItem } from "./checkbox-item.js";
+import { useControllableState } from "./controllable-state.js";
+import { Divider } from "./data-display.js";
+import { icon } from "./icon.js";
+import { Input, SearchField } from "./input.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.js";
+import { Popover } from "./overlays.js";
+export const defaultFilterOperators = {
+    text: ["contains", "does_not_contain", "is"],
+    select: ["is", "is_not"],
+    multi: ["is_any_of", "is_none_of"],
+    number: ["equals", "greater_than", "less_than", "between"],
+    date: ["after", "before", "between"],
+};
+const multiValueOperators = ["is_any_of", "is_none_of"];
+export function operatorsOf(field) {
+    return field.operators ?? defaultFilterOperators[field.kind];
+}
+/** `filters` with `filter` in its field's place, or without that field when it sets nothing. */
+export function replaceFilter(filters, filter) {
+    const others = filters.filter((candidate) => candidate.field !== filter.field);
+    return filter.values.some((value) => value !== "") ? [...others, filter] : others;
+}
+/**
+ * Whether one value passes a filter: a string or number, a list of them (any may match), or a
+ * `yyyy-mm-dd` date. A filter without values passes everything.
+ */
+export function matchesFilter(value, filter) {
+    const values = filter.values.filter((candidate) => candidate !== "");
+    if (values.length === 0)
+        return true;
+    const own = (Array.isArray(value) ? value : value === null || value === undefined ? [] : [value]).map(String);
+    const [first = "", second = ""] = values;
+    const number = (text) => Number(text);
+    switch (filter.operator) {
+        case "is":
+        case "is_any_of":
+            return own.some((candidate) => values.includes(candidate));
+        case "is_not":
+        case "is_none_of":
+            return !own.some((candidate) => values.includes(candidate));
+        case "contains":
+            return own.some((candidate) => candidate.toLowerCase().includes(first.toLowerCase()));
+        case "does_not_contain":
+            return !own.some((candidate) => candidate.toLowerCase().includes(first.toLowerCase()));
+        case "equals":
+            return own.some((candidate) => number(candidate) === number(first));
+        case "greater_than":
+            return own.some((candidate) => number(candidate) > number(first));
+        case "less_than":
+            return own.some((candidate) => number(candidate) < number(first));
+        case "before":
+            return own.some((candidate) => candidate < first);
+        case "after":
+            return own.some((candidate) => candidate > first);
+        case "between":
+            return own.some((candidate) => typeof value === "number" || (Array.isArray(value) && typeof value[0] === "number")
+                ? number(candidate) >= number(first) && (!second || number(candidate) <= number(second))
+                : candidate >= first && (!second || candidate <= second));
+    }
+}
+/** A `yyyy-mm-dd` date as a local day, so it reads as the day it names in every zone. */
+function localDay(isoDate) {
+    const [year, month, day] = isoDate.split("-").map(Number);
+    return new Date(year, (month || 1) - 1, day || 1);
+}
+/** How a filter reads on its chip: the operator, then its values by their labels. */
+export function describeFilter(field, filter, locale) {
+    const labelOf = (value) => field.options?.find((option) => option.value === value)?.label ??
+        (field.kind === "date" ? locale.formatDate(localDay(value)) : value);
+    const values = filter.values.filter((value) => value !== "").map(labelOf);
+    return {
+        operator: locale.labels.filters.chipOperators[filter.operator],
+        values: filter.operator === "between"
+            ? locale.labels.filters.betweenValues(values[0] ?? "", values[1] ?? "")
+            : values.join(", "),
+    };
+}
+const chip = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    maxWidth: "100%",
+    height: "control.compact",
+    paddingInlineStart: "control.compactInline",
+    paddingInlineEnd: "control.iconGap",
+    borderRadius: "pill",
+    background: "bg.raised",
+    color: "fg.muted",
+    fontSize: "caption",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    whiteSpace: "nowrap",
+});
+const chipBody = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.tightGap",
+    minWidth: "0",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    letterSpacing: "inherit",
+    cursor: "pointer",
+    borderRadius: "control",
+    _focusVisible: { focusRing: "outer" },
+    "& svg": { flexShrink: "0" },
+});
+const chipValue = css({ color: "fg.primary", overflow: "hidden", textOverflow: "ellipsis" });
+const chipRemove = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "control.clear",
+    height: "control.clear",
+    padding: "none",
+    border: "0",
+    borderRadius: "round",
+    background: "transparent",
+    color: "fg.muted",
+    cursor: "pointer",
+    _hover: { color: "fg.primary", background: "bg.hover" },
+    _focusVisible: { focusRing: "outer" },
+});
+/** One set filter: the field and operator muted, its values in full; the text reopens it. */
+export function FilterChip({ label, icon: fieldIcon, operator, values, onEdit, onRemove, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    return (_jsxs("span", { ...props, className: cx(chip, className), "data-ciridae-ui": "", "data-edge": "glass", children: [_jsxs("button", { type: "button", className: chipBody, onClick: onEdit, children: [fieldIcon, label, " ", operator, _jsx("span", { className: chipValue, children: values })] }), _jsx("button", { type: "button", className: chipRemove, "aria-label": labels.filters.remove(label), onClick: onRemove, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }));
+}
+const bar = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    minHeight: "control.default",
+});
+const chips = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    minWidth: "0",
+});
+const tools = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    marginInlineStart: "auto",
+});
+const builder = css({ display: "flex", flexDirection: "column", width: "300px", maxWidth: "100%" });
+const fieldItem = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    width: "100%",
+    minHeight: "control.compact",
+    paddingInline: "menu.itemInline",
+    border: "0",
+    borderRadius: "control",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    textAlign: "start",
+    cursor: "pointer",
+    _hover: { background: "bg.hover" },
+    _focusVisible: { background: "bg.hover", outline: "none" },
+    "& svg": { color: "fg.muted", width: "icon.small", height: "icon.small" },
+});
+const groupLabel = css({
+    paddingBlockStart: "control.block",
+    paddingBlockEnd: "layout.tightGap",
+    paddingInline: "menu.itemInline",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const searchWrap = css({ padding: "layout.tightGap" });
+const noMatches = css({
+    paddingBlock: "control.block",
+    paddingInline: "menu.itemInline",
+    color: "fg.muted",
+    fontSize: "caption",
+});
+/**
+ * The set filters as chips, Clear all, and the Add filter builder: pick a field, then its operator
+ * and values, which apply as they are picked. Pressing a chip reopens the builder on its field.
+ * `children` sit after Add filter, such as the list's search. Controlled with `value` /
+ * `onValueChange`, and the builder's `open` / `onOpenChange` when the page opens it too.
+ */
+export function FilterBar({ fields, value, defaultValue = [], onValueChange, open: ownOpen, onOpenChange, children, className, ...props }) {
+    const locale = useCiridaeLocale();
+    const { labels } = locale;
+    const [filters, setFilters] = useControllableState(value, defaultValue, onValueChange && ((next) => onValueChange([...next])));
+    const [open, setOpen] = useControllableState(ownOpen, false, onOpenChange);
+    const [editing, setEditing] = useState(null);
+    const fieldOf = (key) => fields.find((field) => field.key === key);
+    const changeOpen = (next) => {
+        setOpen(next);
+        if (!next)
+            setEditing(null);
+    };
+    return (_jsxs("div", { ...props, className: cx(bar, className), "data-ciridae-ui": "", children: [filters.length > 0 && (_jsx("div", { className: chips, children: filters.map((filter) => {
+                    const field = fieldOf(filter.field);
+                    if (!field)
+                        return null;
+                    const described = describeFilter(field, filter, locale);
+                    return (_jsx(FilterChip, { label: field.label, operator: described.operator, values: described.values, onEdit: () => {
+                            setEditing(field.key);
+                            setOpen(true);
+                        }, onRemove: () => setFilters(filters.filter((candidate) => candidate.field !== filter.field)) }, filter.field));
+                }) })), _jsxs("div", { className: tools, children: [filters.length > 0 && (_jsx(Button, { variant: "ghost", onClick: () => setFilters([]), children: labels.filters.clearAll })), _jsx(Popover, { open: open, onOpenChange: changeOpen, density: "compact", trigger: _jsx(Button, { variant: "ghost", icon: _jsx(PlusIcon, { className: icon({ size: "small" }) }), onClick: () => setEditing(null), children: labels.filters.addFilter }), children: open && (_jsx(FilterBuilder, { fields: fields, startField: editing, filters: filters, onChange: (filter) => setFilters(replaceFilter(filters, filter)) }, editing ?? "")) }), children] })] }));
+}
+function FilterBuilder({ fields, startField, filters, onChange, }) {
+    const { labels } = useCiridaeLocale();
+    const [fieldKey, setFieldKey] = useState(startField);
+    const [query, setQuery] = useState("");
+    const field = fields.find((candidate) => candidate.key === fieldKey);
+    if (field) {
+        return (_jsx("div", { className: builder, children: _jsx(FilterValueEditor, { field: field, value: filters.find((filter) => filter.field === field.key), onChange: onChange, onBack: () => setFieldKey(null) }) }));
+    }
+    const matching = fields.filter((candidate) => candidate.label.toLowerCase().includes(query.trim().toLowerCase()));
+    const groups = [];
+    for (const candidate of matching) {
+        const group = groups.find((existing) => existing.label === candidate.group);
+        if (group)
+            group.fields.push(candidate);
+        else
+            groups.push({ label: candidate.group, fields: [candidate] });
+    }
+    return (_jsxs("div", { className: builder, children: [_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", "aria-label": labels.filters.filterBy, placeholder: labels.filters.filterBy, value: query, onChange: (event) => setQuery(event.target.value) }) }), groups.map((group, index) => (_jsxs("div", { className: css({ display: "grid" }), children: [index > 0 && _jsx(Divider, { inset: "menu" }), group.label && _jsx("span", { className: groupLabel, children: group.label }), group.fields.map((candidate) => (_jsxs("button", { type: "button", className: fieldItem, onClick: () => {
+                            setFieldKey(candidate.key);
+                            setQuery("");
+                        }, children: [candidate.icon, candidate.label] }, candidate.key)))] }, group.label ?? ""))), matching.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noFields })] }));
+}
+const editorHeader = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minHeight: "control.small",
+    padding: "layout.tightGap",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const operatorTrigger = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    height: "control.small",
+    paddingInlineStart: "control.compactInline",
+    paddingInlineEnd: "control.iconInline",
+    border: "0",
+    borderRadius: "action",
+    background: "bg.raised",
+    color: "fg.primary",
+    font: "inherit",
+    fontSize: "caption",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    cursor: "pointer",
+    _focusVisible: { focusRing: "outer" },
+});
+const fixedOperator = css({ color: "fg.muted", fontSize: "caption" });
+const valueList = css({ display: "grid", maxHeight: "240px", overflowY: "auto" });
+const inputs = css({ display: "grid", gap: "layout.tightGap", padding: "layout.tightGap" });
+const editorFooter = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    paddingBlock: "layout.tightGap",
+    paddingInlineStart: "menu.itemInline",
+    paddingInlineEnd: "layout.tightGap",
+    color: "fg.muted",
+    fontSize: "code",
+    letterSpacing: "compact",
+});
+/**
+ * One field's operator and values, reporting every change so the list follows along. `onBack`
+ * adds the way back to the builder's field list; without it the field is fixed, as under a
+ * column head.
+ */
+export function FilterValueEditor({ field, value, onChange, onBack, }) {
+    const { labels } = useCiridaeLocale();
+    const operators = operatorsOf(field);
+    const [operator, setOperator] = useState(value?.operator ?? operators[0]);
+    const [values, setValues] = useState(value?.values ?? []);
+    const [query, setQuery] = useState("");
+    const report = (nextOperator, nextValues) => {
+        setOperator(nextOperator);
+        setValues(nextValues);
+        onChange({ field: field.key, operator: nextOperator, values: nextValues });
+    };
+    const multiple = multiValueOperators.includes(operator);
+    const options = field.options?.filter((option) => option.label.toLowerCase().includes(query.trim().toLowerCase()));
+    const operatorLabel = labels.filters.operators[operator];
+    const picked = values.filter((candidate) => candidate !== "").length;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: editorHeader, children: [onBack && (_jsx(IconButton, { "aria-label": labels.filters.backToFields, size: "compact", variant: "ghost", onClick: onBack, children: _jsx(CaretLeftIcon, { className: icon({ size: "small" }) }) })), _jsx("span", { className: css({ paddingInlineStart: onBack ? "0" : "menu.itemInline" }), children: field.label }), operators.length > 1 ? (_jsx(Menu, { trigger: _jsxs("button", { type: "button", className: operatorTrigger, "data-ciridae-ui": "", "data-edge": "glass", children: [operatorLabel, _jsx(CaretDownIcon, { className: icon({ size: "small" }) })] }), items: operators.map((candidate) => ({
+                            label: labels.filters.operators[candidate],
+                            checked: candidate === operator,
+                            onSelect: () => {
+                                const keepsValues = multiValueOperators.includes(candidate) === multiple && candidate !== "between";
+                                report(candidate, keepsValues ? values : values.slice(0, 1));
+                            },
+                        })) })) : (_jsx("span", { className: fixedOperator, children: operatorLabel }))] }), options ? (_jsxs(_Fragment, { children: [field.options && field.options.length > 6 && (_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", "aria-label": labels.filters.searchValues(field.label), placeholder: labels.filters.searchValues(field.label), value: query, onChange: (event) => setQuery(event.target.value) }) })), _jsxs("div", { className: valueList, children: [options.map((option) => (_jsxs(CheckboxItem, { checked: values.includes(option.value), onCheckedChange: (checked) => report(operator, multiple
+                                    ? checked
+                                        ? [...values, option.value]
+                                        : values.filter((candidate) => candidate !== option.value)
+                                    : checked
+                                        ? [option.value]
+                                        : []), meta: option.count, children: [option.icon, option.label] }, option.value))), options.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noValues })] })] })) : (_jsx("div", { className: inputs, children: (operator === "between" ? [0, 1] : [0]).map((index) => (_jsx(Input, { type: field.kind === "date" ? "date" : field.kind === "number" ? "number" : "text", "aria-label": operator === "between"
+                        ? index === 0
+                            ? labels.filters.from
+                            : labels.filters.to
+                        : labels.filters.value, placeholder: operator === "between"
+                        ? index === 0
+                            ? labels.filters.from
+                            : labels.filters.to
+                        : labels.filters.value, value: values[index] ?? "", onChange: (event) => {
+                        const next = [...values];
+                        next[index] = event.target.value;
+                        report(operator, next);
+                    } }, index))) })), _jsx(Divider, { inset: "menu" }), _jsxs("div", { className: editorFooter, children: [options
+                        ? `${labels.filters.selectedCount(picked)} · ${labels.filters.updatesAsYouPick}`
+                        : labels.filters.updatesAsYouPick, _jsx(Button, { variant: "ghost", onClick: () => report(operator, []), children: labels.common.clear })] })] }));
+}

package/dist/components/form-controls.d.ts

@@ -0,0 +1,53 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ComponentProps, ReactNode } from "react";
+export declare const checkMark: import("../../../src/styled-system/types/index.js").RecipeRuntimeFn<{
+    shape: {
+        box: {
+            borderRadius: "control";
+        };
+        round: {
+            borderRadius: "round";
+        };
+    };
+    focus: {
+        ring: {
+            _focusVisible: {
+                focusRing: "outer";
+            };
+        };
+        row: {
+            _focusVisible: {
+                outline: "none";
+            };
+        };
+    };
+}>;
+export declare const checkIndicator: string;
+export declare function Checkbox({ children, className, wrapperClassName, ...props }: Omit<ComponentProps<typeof BaseCheckbox.Root>, "children" | "className"> & {
+    children?: ReactNode;
+    className?: string;
+    wrapperClassName?: string;
+}): import("@types/react").JSX.Element;
+export declare function Textarea({ className, ...props }: ComponentProps<"textarea">): import("@types/react").JSX.Element;
+export declare const radioDot: string;
+export type RadioGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "children" | "defaultValue" | "name" | "onValueChange" | "value"> & {
+    name: string;
+    options: readonly (SelectOption & {
+        meta?: ReactNode;
+    })[];
+    label: string;
+    /** `inline` wraps the choices along a line; `menu` stacks them as a menu's rows, each meta at its end. */
+    layout?: "inline" | "menu";
+    className?: string;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare function RadioGroup({ name, options, label: groupLabel, defaultValue, value, onValueChange, layout, className, ...props }: RadioGroupProps): import("@types/react").JSX.Element;
+type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export {};

package/dist/components/form-controls.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { CheckIcon, MinusIcon } from "@phosphor-icons/react";
+import { css, cva, cx } from "#primitives/css";
+import { useFieldControl } from "./field-context.js";
+/*
+ * The one mark for a checkbox and a radio: a glass well in dark, a near-white one in light, that
+ * fills with the primary face once on. Hover darkens the edge of an empty mark and the face of a
+ * filled one. The ring is a variant, because a row that holds the mark draws its own ring instead.
+ */
+export const checkMark = cva({
+    base: {
+        flexShrink: "0",
+        width: "control.checkbox",
+        height: "control.checkbox",
+        display: "inline-grid",
+        placeItems: "center",
+        padding: "none",
+        border: "1px solid token(colors.border.mark)",
+        background: "bg.check",
+        color: "bg.canvas",
+        _light: { color: "fg.onAccent" },
+        cursor: "pointer",
+        transitionProperty: "background, border-color",
+        transitionDuration: "fast",
+        // Pointing anywhere at a row's label marks the box it would tick.
+        "&:is(label:hover > *, label:hover *, :hover):not([data-disabled])": {
+            borderColor: "fg.muted",
+        },
+        "&[data-checked], &[data-indeterminate]": {
+            background: "bg.primary",
+            borderColor: "transparent",
+        },
+        "&:is([data-checked], [data-indeterminate]):is(label:hover > *, label:hover *, :hover):not([data-disabled])": {
+            background: "bg.primaryHover",
+            borderColor: "transparent",
+        },
+        "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
+    },
+    variants: {
+        shape: { box: { borderRadius: "control" }, round: { borderRadius: "round" } },
+        focus: {
+            ring: { _focusVisible: { focusRing: "outer" } },
+            /* The row around the mark shows focus, so the mark itself draws nothing. */
+            row: { _focusVisible: { outline: "none" } },
+        },
+    },
+    defaultVariants: { shape: "box", focus: "ring" },
+});
+const label = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    color: "fg.primary",
+    fontSize: "caption",
+    fontWeight: "normal",
+    cursor: "pointer",
+});
+export const checkIndicator = css({
+    display: "inline-flex",
+    lineHeight: "1",
+    fontSize: "icon.compact",
+});
+export function Checkbox({ children, className, wrapperClassName, ...props }) {
+    return (_jsxs("label", { className: cx(label, wrapperClassName), "data-ciridae-ui": "", children: [_jsx(BaseCheckbox.Root, { ...props, className: cx(checkMark(), className), children: _jsx(BaseCheckbox.Indicator, { className: checkIndicator, children: props.indeterminate ? _jsx(MinusIcon, { weight: "bold" }) : _jsx(CheckIcon, { weight: "bold" }) }) }), children] }));
+}
+const textarea = css({
+    width: "100%",
+    minHeight: "field.textarea",
+    resize: "vertical",
+    paddingBlock: "field.block",
+    paddingInline: "control.compactInline",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "control",
+    background: "bg.field",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "body",
+    _placeholder: { color: "fg.subtle" },
+    _focusVisible: { focusRing: "outer" },
+    "&[aria-invalid=true], &[data-invalid]": { borderColor: "border.error" },
+    "&:disabled, &[data-disabled]": {
+        background: "bg.fieldDisabled",
+        opacity: "disabled",
+        cursor: "not-allowed",
+    },
+});
+export function Textarea({ className, ...props }) {
+    const fieldIds = useFieldControl(props);
+    return (_jsx("textarea", { ...props, ...fieldIds, className: cx(textarea, className), "data-ciridae-ui": "" }));
+}
+const radios = css({ display: "flex", gap: "layout.contentGap", flexWrap: "wrap" });
+// A menu's rows: one choice a line, the option's meta at its end, as in a popover's small form.
+const menuRadios = css({ display: "grid" });
+const menuRadio = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minHeight: "control.compact",
+    paddingInline: "menu.itemInline",
+    borderRadius: "control",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    cursor: "pointer",
+    _hover: { background: "bg.hover" },
+    "&:has([data-disabled])": { opacity: "disabled", cursor: "not-allowed" },
+});
+const menuRadioMeta = css({ marginInlineStart: "auto", color: "fg.muted" });
+export const radioDot = css({
+    width: "indicator.radio",
+    height: "indicator.radio",
+    borderRadius: "round",
+    background: "currentColor",
+});
+export function RadioGroup({ name, options, label: groupLabel, defaultValue, value, onValueChange, layout = "inline", className, ...props }) {
+    return (_jsx(BaseRadioGroup, { ...props, className: cx(layout === "menu" ? menuRadios : radios, className), "aria-label": props["aria-label"] ?? groupLabel, "data-ciridae-ui": "", defaultValue: defaultValue, name: name, onValueChange: (nextValue) => onValueChange?.(String(nextValue)), value: value, children: options.map((option) => (_jsxs("label", { className: layout === "menu" ? menuRadio : label, children: [_jsx(BaseRadio.Root, { className: checkMark({ shape: "round" }), disabled: option.disabled, value: option.value, children: _jsx(BaseRadio.Indicator, { className: radioDot }) }), option.label, option.meta !== undefined && _jsx("span", { className: menuRadioMeta, children: option.meta })] }, option.value))) }));
+}

package/dist/components/form-layout.d.ts

@@ -0,0 +1,32 @@
+import { type ButtonProps } from "./button.js";
+import type { ComponentProps, ReactNode } from "react";
+/**
+ * Stacked form fields. Validation is the form library's, never the browser's, so this always
+ * carries `noValidate`.
+ */
+export declare function Form({ className, ...props }: ComponentProps<"form">): import("@types/react").JSX.Element;
+export declare function FormActions({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/**
+ * A label round a `FieldLabel`, its control and any `FieldError`: the label names the control it
+ * holds, and while `invalid` the control is marked and described by the error, so `Input`,
+ * `Textarea`, `Select` and `Combobox` inside need no ids of their own.
+ */
+export declare function Field({ className, htmlFor, invalid, ...props }: ComponentProps<"label"> & {
+    invalid?: boolean;
+}): import("@types/react").JSX.Element;
+export declare function FieldLabel({ children }: {
+    children: ReactNode;
+}): import("@types/react").JSX.Element;
+/** The field's error; its id is the one the field's control is described by. */
+export declare function FieldError({ id, children }: {
+    id?: string;
+    children: ReactNode;
+}): import("@types/react").JSX.Element;
+export declare function SegmentedControl({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export type SegmentedOptionProps = Omit<ButtonProps, "variant" | "type" | "aria-pressed"> & {
+    selected: boolean;
+    /** Shown muted after the label, such as how many items the option lists. */
+    count?: number;
+};
+/** One option of a `SegmentedControl`. */
+export declare function SegmentedOption({ selected, count, children, ...props }: SegmentedOptionProps): import("@types/react").JSX.Element;

package/dist/components/form-layout.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useId, useMemo } from "react";
+import { css, cx } from "#primitives/css";
+import { Button } from "./button.js";
+import { FieldControlContext } from "./field-context.js";
+import { useInToolbar } from "./layout.js";
+const field = css({ display: "grid", gap: "control.iconGap", minWidth: "0", fontSize: "caption" });
+const labelText = css({ color: "fg.muted" });
+const errorText = css({ margin: "none", color: "accent.red", fontSize: "caption" });
+const segmented = css({
+    display: "inline-flex",
+    alignSelf: "flex-start",
+    padding: "control.trackInset",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "pill",
+    // Children follow the track's own shape, so the selected pill nests inside it. Ghost text is
+    // white in dark, so the track mutes every option and lets only the selected one, on the accent
+    // wash, read fully.
+    "& > *": { borderColor: "transparent!", borderRadius: "pill", color: "fg.muted!" },
+    "& > [aria-pressed=true]": {
+        background: "bg.selected",
+        color: "fg.primary!",
+    },
+    // In a toolbar the whole track, not each option, is a small button's height.
+    "&[data-density=compact] > *": {
+        height: "calc(token(sizes.control.compact) - 2 * (token(spacing.control.trackInset) + token(sizes.border.hairline)))",
+    },
+});
+const countText = css({ color: "fg.muted", fontVariantNumeric: "tabular-nums" });
+const formStack = css({ display: "grid", gap: "layout.clusterGap", minWidth: "0" });
+const formActions = css({
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "layout.controlGap",
+});
+/**
+ * Stacked form fields. Validation is the form library's, never the browser's, so this always
+ * carries `noValidate`.
+ */
+export function Form({ className, ...props }) {
+    return _jsx("form", { noValidate: true, ...props, className: cx(formStack, className), "data-ciridae-ui": "" });
+}
+export function FormActions({ className, ...props }) {
+    return _jsx("div", { ...props, className: cx(formActions, className), "data-ciridae-ui": "" });
+}
+/**
+ * A label round a `FieldLabel`, its control and any `FieldError`: the label names the control it
+ * holds, and while `invalid` the control is marked and described by the error, so `Input`,
+ * `Textarea`, `Select` and `Combobox` inside need no ids of their own.
+ */
+export function Field({ className, htmlFor, invalid = false, ...props }) {
+    const generatedId = useId();
+    const controlId = htmlFor ?? `${generatedId}-control`;
+    const fieldControl = useMemo(() => ({ controlId, descriptionId: invalid ? `${controlId}-error` : undefined, invalid }), [controlId, invalid]);
+    return (_jsx(FieldControlContext, { value: fieldControl, children: _jsx("label", { ...props, htmlFor: htmlFor, className: cx(field, className), "data-ciridae-ui": "" }) }));
+}
+export function FieldLabel({ children }) {
+    return _jsx("span", { className: labelText, children: children });
+}
+/** The field's error; its id is the one the field's control is described by. */
+export function FieldError({ id, children }) {
+    const field = useContext(FieldControlContext);
+    return (_jsx("p", { id: id ?? (field ? `${field.controlId}-error` : undefined), role: "alert", className: errorText, children: children }));
+}
+export function SegmentedControl({ className, ...props }) {
+    const inToolbar = useInToolbar();
+    return (_jsx("div", { ...props, className: cx(segmented, className), "data-density": inToolbar ? "compact" : undefined, "data-ciridae-ui": "" }));
+}
+/** One option of a `SegmentedControl`. */
+export function SegmentedOption({ selected, count, children, ...props }) {
+    return (_jsxs(Button, { ...props, type: "button", variant: "ghost", "aria-pressed": selected, children: [children, count !== undefined && _jsx("span", { className: countText, children: count })] }));
+}

package/dist/components/hotkeys.d.ts

@@ -0,0 +1,27 @@
+import { type CustomHotkeys } from "@tanstack/react-hotkeys";
+import { type ReactNode } from "react";
+export { defineAppHotkeys, detectPlatform, formatForDisplay, HotkeysProvider, useAppHotkeyList, useAppHotkeys, useCustomHotkeys, useHotkey, useHotkeyHint, useHotkeyRecorder, useHotkeyRegistrations, useHotkeys, useKeyHold, } from "@tanstack/react-hotkeys";
+export type { AppHotkey, CustomHotkeys, Hotkey, HotkeyChord, HotkeyMeta, RegisterableHotkey, UseHotkeyDefinition, } from "@tanstack/react-hotkeys";
+/** The scope of the hotkeys registered inside `AppShell`. */
+export declare const PAGE_HOTKEY_SCOPE = "page";
+/** Gives the hotkeys registered inside it to the page, paused while an overlay is open. */
+export declare function PageHotkeys({ children }: {
+    children: ReactNode;
+}): import("@types/react").JSX.Element;
+/**
+ * An overlay's keyboard: while mounted (and `enabled`), only the hotkeys registered inside it and
+ * the global ones fire, so the top overlay owns the keyboard and the page under it pauses.
+ */
+export declare function HotkeyLayer({ enabled, children }: {
+    enabled?: boolean;
+    children: ReactNode;
+}): import("@types/react").JSX.Element;
+/**
+ * The person's rebound hotkeys, kept in `localStorage` as JSON under `storageKey`, as the root
+ * `HotkeysProvider`'s `customHotkeys` and `onCustomHotkeysChange`. Entries that are no hotkey are
+ * dropped with a warning.
+ */
+export declare function storedCustomHotkeys(storageKey: string): {
+    customHotkeys: CustomHotkeys;
+    onCustomHotkeysChange: (customHotkeys: CustomHotkeys) => void;
+};