@hackcove/ui-react 0.0.0-stage → 0.8.0

package/dist/DateField.js

@@ -0,0 +1,100 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDate as CalendarDateClass, DateFormatter, } from "@internationalized/date";
+import { useContext, useEffect } from "react";
+import { DateField as AriaDateField, DateFieldStateContext, DateInput, DateSegment, FieldError, I18nProvider, Label, Text, } from "react-aria-components";
+import { cx, focusRing } from "./cx.js";
+import { CalendarDateField } from "./DateFieldCalendar.js";
+import { toISODate } from "./isoDate.js";
+import { ShownInput, useShownDate } from "./shownDate.js";
+/** Fixed, whatever the browser's locale: DD/MM/YYYY and Monday-first weeks. */
+export const LOCALE = "en-GB";
+const MONTHS = new DateFormatter(LOCALE, { month: "long", timeZone: "UTC" });
+export const MONTH_OPTIONS = Array.from({ length: 12 }, (_, i) => ({
+    month: i + 1,
+    name: MONTHS.format(new Date(Date.UTC(2000, i, 1))),
+}));
+function readSegments(segments) {
+    const editable = segments.filter((segment) => segment.isEditable);
+    const blank = editable.filter((segment) => segment.isPlaceholder).length;
+    const none = { typed: "", impossible: null, partial: blank > 0 && blank < editable.length };
+    if (editable.length === 0 || blank > 0)
+        return none;
+    const part = (type) => editable.find((s) => s.type === type)?.value ?? 0;
+    const [day, month, year] = [part("day"), part("month"), part("year")];
+    if (day < 1 || month < 1 || year < 1)
+        return none;
+    const first = new CalendarDateClass(year, month, 1);
+    const days = first.calendar.getDaysInMonth(first);
+    if (day <= days)
+        return { ...none, typed: toISODate(first.set({ day })) };
+    return {
+        ...none,
+        impossible: `${MONTH_OPTIONS[month - 1]?.name ?? ""} ${year} has ${days} days.`,
+    };
+}
+/** One segment. The day segment also reports what the segments show to the field. */
+export function FieldSegment({ segment, onRead, }) {
+    const state = useContext(DateFieldStateContext);
+    const { typed, impossible, partial } = readSegments(state?.segments ?? []);
+    useEffect(() => onRead?.({ typed, impossible, partial }), [typed, impossible, partial, onRead]);
+    return (_jsx(DateSegment, { segment: segment, className: ({ isFocused, isPlaceholder, isInvalid, type }) => {
+            if (type === "literal")
+                return "text-slate-400";
+            let tone = "text-slate-900";
+            if (isFocused)
+                tone = "bg-violet-50 text-violet-600";
+            else if (isPlaceholder)
+                tone = "text-slate-400";
+            else if (isInvalid)
+                tone = "text-red-700";
+            return cx("rounded px-0.5 tabular-nums outline-none", tone);
+        }, children: ({ isPlaceholder, placeholder, text }) => (isPlaceholder ? placeholder.toUpperCase() : text) }));
+}
+export function frameClass({ isInvalid, isFocusWithin, isDisabled, }) {
+    let tone = "border-slate-300 bg-white text-slate-900 hover:border-violet-400";
+    if (isInvalid)
+        tone = "border-red-200 bg-red-50 text-red-700";
+    else if (isFocusWithin)
+        tone = "border-violet-600 bg-white text-slate-900";
+    return cx("flex w-full items-center rounded-lg border transition", tone, isDisabled && "opacity-50");
+}
+/** The props that force a field invalid: an impossible date, `isInvalid`, or an `error` from outside. Spread onto the React Aria field after the rest. */
+export function forcedInvalid({ impossible, isInvalid, error, }) {
+    return impossible || isInvalid || error ? { isInvalid: true } : {};
+}
+/** The label, the description or the error line: the shared outside of both components. */
+export function Notes({ description, errorMessage, error, impossible, isInvalid, }) {
+    return (_jsxs(_Fragment, { children: [!isInvalid && description ? (_jsx(Text, { slot: "description", className: "text-xs text-slate-500", children: description })) : null, _jsx(FieldError, { className: "text-xs text-red-700", children: ({ validationErrors }) => error ? (_jsx("span", { role: "alert", children: error })) : ((errorMessage ?? impossible ?? validationErrors.join(" "))) })] }));
+}
+/** A `DateField`'s padding and text, by `size`: the heights of an `Input`. */
+const FIELD_SIZE = {
+    sm: "py-1 pl-2 pr-2 text-xs",
+    md: "py-2 pl-2.5 pr-2.5 text-sm",
+    lg: "py-2.5 pl-3 pr-3 text-base",
+};
+export const labelClass = "text-sm font-medium text-slate-700";
+/** A small icon button inside a date field or calendar, without its box size. */
+export const iconButtonLook = `inline-flex shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 disabled:opacity-50 ${focusRing}`;
+export const iconButtonClass = `${iconButtonLook} h-7 w-7`;
+/**
+ * A segmented DD / MM / YYYY date input. Values are `CalendarDate`s; `name` posts it as
+ * `YYYY-MM-DD`. `calendar` adds a calendar button that opens a month view in a popover, at the
+ * same height as the plain field; `defaultOpen` opens it on mount.
+ */
+export function DateField({ calendar, defaultOpen, ...field }) {
+    if (calendar) {
+        return _jsx(CalendarDateField, { ...field, ...(defaultOpen === undefined ? {} : { defaultOpen }) });
+    }
+    return _jsx(PlainDateField, { ...field });
+}
+function PlainDateField({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, name, size = "md", ...rest }) {
+    const { inner, setInner, shown, impossible, onRead, validate, leaving, onBlurCapture, onLeft } = useShownDate({
+        value,
+        defaultValue,
+        onChange,
+        minValue: rest.minValue,
+        maxValue: rest.maxValue,
+        isRequired: rest.isRequired,
+    });
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDateField, { ...rest, value: inner, onChange: setInner, validate: validate, ...forcedInvalid({ impossible, isInvalid: invalidProp, error }), isReadOnly: leaving, onBlur: onLeft, granularity: "day", shouldForceLeadingZeros: true, className: "flex flex-col gap-1.5", children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(DateInput, { className: (state) => cx(frameClass(state), FIELD_SIZE[size]), children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: impossible, isInvalid: isInvalid })] })) }) }));
+}

package/dist/DateFieldCalendar.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from "react";
+import { type FieldProps } from "./DateField.js";
+/** The body of `<DateField calendar>`: the field with a calendar button that opens a month view in a popover. */
+export declare function CalendarDateField({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, name, size, ...rest }: FieldProps & {
+    defaultOpen?: boolean;
+}): ReactElement;

package/dist/DateFieldCalendar.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useState } from "react";
+import { Button, DatePicker as AriaDatePicker, DateFieldContext, DateInput, Group, I18nProvider, Label, } from "react-aria-components";
+import { cx } from "./cx.js";
+import { CalendarPopover, calendarIcon } from "./DateCalendar.js";
+import { FieldSegment, LOCALE, forcedInvalid, Notes, frameClass, iconButtonLook, labelClass, } from "./DateField.js";
+import { ShownInput, useShownDate } from "./shownDate.js";
+/** The picker's padding, text and calendar button, by `size`. The button sets the height, so the padding is less than a `DateField`'s. */
+const PICKER_SIZE = {
+    sm: { frame: "py-0.5 pl-2 pr-0.5 text-xs", button: "h-5 w-5" },
+    md: { frame: "py-1 pl-2.5 pr-1 text-sm", button: "h-7 w-7" },
+    lg: { frame: "py-1.5 pl-3 pr-1.5 text-base", button: "h-8 w-8" },
+};
+/**
+ * The picker's input, read-only while `leaving`. Only the field: a read-only picker would also
+ * disable the calendar button that focus may be moving to.
+ */
+function PickerInput({ leaving, onLeft, children, }) {
+    const field = useContext(DateFieldContext);
+    return (_jsx(DateFieldContext.Provider, { value: { ...field, isReadOnly: leaving, onBlur: onLeft }, children: children }));
+}
+/** The body of `<DateField calendar>`: the field with a calendar button that opens a month view in a popover. */
+export function CalendarDateField({ label, description, errorMessage, error, isInvalid: invalidProp, value, defaultValue, onChange, name, size = "md", ...rest }) {
+    const { inner, setInner, shown, impossible, onRead, validate, leaving, onBlurCapture, onLeft } = useShownDate({
+        value,
+        defaultValue,
+        onChange,
+        minValue: rest.minValue,
+        maxValue: rest.maxValue,
+        isRequired: rest.isRequired,
+    });
+    const [dialog, setDialog] = useState(undefined);
+    const findDialog = useCallback((el) => setDialog(el?.closest("dialog") ?? undefined), []);
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDatePicker, { ...rest, ref: findDialog, value: inner, onChange: setInner, validate: validate, ...forcedInvalid({ impossible, isInvalid: invalidProp, error }), granularity: "day", shouldForceLeadingZeros: true, className: "flex flex-col gap-1.5", children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1", PICKER_SIZE[size].frame), children: [_jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(PickerInput, { leaving: leaving, onLeft: onLeft, children: _jsx(DateInput, { className: "flex flex-1", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }), _jsx(Button, { className: cx(iconButtonLook, PICKER_SIZE[size].button), children: calendarIcon })] }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: impossible, isInvalid: isInvalid }), _jsx(CalendarPopover, { container: dialog })] })) }) }));
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+import type { Size } from "./size.js";
+export type DialogProps = {
+    /** The dialog's accessible name, shown as its heading. */
+    title: ReactNode;
+    /** A muted line under the title. */
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Actions under the body, right-aligned. A submit button here can reach a form in the body with its `form` attribute. */
+    footer?: ReactNode;
+    /**
+     * The panel's width: `sm` (320px) is a list, `md` (440px) holds a form, `lg` (640px) a wider
+     * form or a table.
+     * @default md
+     */
+    size?: Size;
+    /** Called when the dialog closes: Esc, a click on the backdrop, or a `<form method="dialog">` submit. */
+    onClose: () => void;
+} & Passthrough;
+/**
+ * A modal on the browser's own `<dialog>`: it is opened with `showModal()` on mount, so render it
+ * only while it is open. The page behind goes inert, Esc closes it and focus stays inside; a click
+ * on the backdrop (the `<dialog>` element itself, not its contents) closes it too.
+ */
+export declare function Dialog({ title, description, children, footer, size, onClose, ...rest }: DialogProps): ReactElement;

package/dist/Dialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { useModal } from "./modal.js";
+import { HeaderText, SectionHeading } from "./typography.js";
+const PANEL = "mx-auto mt-28 max-w-[calc(100vw-2rem)] overflow-visible rounded-2xl border border-slate-200 bg-white p-0 text-slate-900 shadow-2xl -translate-y-2 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-200 open:translate-y-0 open:opacity-100 starting:open:-translate-y-2 starting:open:opacity-0 backdrop:bg-slate-900/35 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200 open:backdrop:opacity-100 starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none";
+const SIZE = { sm: "w-80", md: "w-110", lg: "w-160" };
+/**
+ * A modal on the browser's own `<dialog>`: it is opened with `showModal()` on mount, so render it
+ * only while it is open. The page behind goes inert, Esc closes it and focus stays inside; a click
+ * on the backdrop (the `<dialog>` element itself, not its contents) closes it too.
+ */
+export function Dialog({ title, description, children, footer, size = "md", onClose, ...rest }) {
+    const dialog = useRef(null);
+    const titleId = useId();
+    const closed = useModal(dialog, onClose);
+    return (_jsx("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(PANEL, SIZE[size]), children: _jsxs("div", { className: "p-5.5", children: [_jsx(SectionHeading, { id: titleId, children: title }), description && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: description }) })), children && _jsx("div", { className: "mt-4", children: children }), footer && _jsx("div", { className: "mt-5 flex justify-end gap-2", children: footer })] }) }));
+}

package/dist/Disclosure.d.ts

@@ -0,0 +1,15 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/**
+ * A summary line with a chevron over a body that opens and closes under it. The summary is a
+ * button with `aria-expanded`, and Enter and Space toggle it; the body is hidden while closed.
+ * It starts closed; `defaultOpen` starts it open. It keeps its own state.
+ */
+export declare function Disclosure({ summary, defaultOpen, children, ...rest }: {
+    /** The always-visible line: the button that toggles the body. */
+    summary: ReactNode;
+    /** Starts with the body showing. */
+    defaultOpen?: boolean | undefined;
+    /** The body, shown while open. */
+    children: ReactNode;
+} & Passthrough): ReactElement;

package/dist/Disclosure.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Disclosure as AriaDisclosure, DisclosurePanel } from "react-aria-components";
+import { Chevron } from "./Chevron.js";
+import { focusRing } from "./cx.js";
+/**
+ * A summary line with a chevron over a body that opens and closes under it. The summary is a
+ * button with `aria-expanded`, and Enter and Space toggle it; the body is hidden while closed.
+ * It starts closed; `defaultOpen` starts it open. It keeps its own state.
+ */
+export function Disclosure({ summary, defaultOpen = false, children, ...rest }) {
+    return (_jsx("div", { ...rest, children: _jsx(AriaDisclosure, { defaultExpanded: defaultOpen, children: ({ isExpanded }) => (_jsxs(_Fragment, { children: [_jsxs(Button, { slot: "trigger", className: `flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 text-left text-sm font-medium text-slate-900 hover:text-violet-700 ${focusRing}`, children: [_jsx(Chevron, { open: isExpanded }), summary] }), _jsx(DisclosurePanel, { className: "pt-1 pb-2 pl-6 text-sm text-slate-700", children: children })] })) }) }));
+}

package/dist/Divider.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes, ReactElement } from "react";
+import type { Unstyled } from "./props.js";
+/** A hairline rule in the theme's line colour: between a heading and its content, or above a footer. Space around it is the layout's. */
+export declare function Divider(props: Unstyled<Omit<HTMLAttributes<HTMLHRElement>, "children">>): ReactElement;

package/dist/Divider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A hairline rule in the theme's line colour: between a heading and its content, or above a footer. Space around it is the layout's. */
+export function Divider(props) {
+    return _jsx("hr", { ...props, className: "border-t border-slate-200/70" });
+}

package/dist/Drawer.d.ts

@@ -0,0 +1,29 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+declare const SIZE: {
+    readonly sm: "w-80";
+    readonly md: "w-110";
+    readonly lg: "w-160";
+};
+export type DrawerProps = {
+    /** The drawer's accessible name, shown as its heading. */
+    title: ReactNode;
+    children?: ReactNode;
+    /** Actions pinned under the scrolling body, right-aligned. */
+    footer?: ReactNode;
+    /** `md` (the default) holds a form or a record; `sm` is narrower and `lg` wider. */
+    size?: keyof typeof SIZE;
+    /** Called when the drawer closes: Esc, a click on the scrim or the close button. */
+    onClose: () => void;
+    /** The accessible name of the close button. */
+    closeLabel?: string;
+} & Passthrough;
+/**
+ * A modal slide-over anchored to the right edge, on the browser's own `<dialog>`: it is opened
+ * with `showModal()` on mount, so render it only while it is open. The page behind goes inert, Esc
+ * closes it and focus stays inside; a click on the scrim (the `<dialog>` element itself, not its
+ * contents) closes it too. The header holds the title and a close button; the body scrolls between
+ * it and an optional pinned `footer`.
+ */
+export declare function Drawer({ title, children, footer, size, onClose, closeLabel, ...rest }: DrawerProps): ReactElement;
+export {};

package/dist/Drawer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { useModal } from "./modal.js";
+import { SectionHeading } from "./typography.js";
+const PANEL = "fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none max-w-full flex-col overflow-hidden border-l border-slate-200 bg-white p-0 text-slate-900 shadow-2xl translate-x-full transition-[translate,overlay,display] transition-discrete duration-200 open:flex open:translate-x-0 starting:open:translate-x-full backdrop:bg-slate-900/35 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-200 open:backdrop:opacity-100 starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none";
+const SIZE = { sm: "w-80", md: "w-110", lg: "w-160" };
+/**
+ * A modal slide-over anchored to the right edge, on the browser's own `<dialog>`: it is opened
+ * with `showModal()` on mount, so render it only while it is open. The page behind goes inert, Esc
+ * closes it and focus stays inside; a click on the scrim (the `<dialog>` element itself, not its
+ * contents) closes it too. The header holds the title and a close button; the body scrolls between
+ * it and an optional pinned `footer`.
+ */
+export function Drawer({ title, children, footer, size = "md", onClose, closeLabel = "Close", ...rest }) {
+    const dialog = useRef(null);
+    const titleId = useId();
+    const closed = useModal(dialog, onClose);
+    return (_jsxs("dialog", { ...rest, ref: dialog, "aria-labelledby": titleId, onClose: closed, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(PANEL, SIZE[size]), children: [_jsxs("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-5.5 py-3.5", children: [_jsx(SectionHeading, { id: titleId, children: title }), _jsx(IconButton, { label: closeLabel, onClick: () => dialog.current?.close(), children: _jsx(Icon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: "M5.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 10l-4.72 4.72a.75.75 0 1 0 1.06 1.06L10 11.06l4.72 4.72a.75.75 0 1 0 1.06-1.06L11.06 10l4.72-4.72a.75.75 0 0 0-1.06-1.06L10 8.94 5.28 4.22Z" }) }) }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-5.5 py-4", children: children }), footer && (_jsx("footer", { className: "flex shrink-0 justify-end gap-2 border-t border-slate-200 px-5.5 py-3.5", children: footer }))] }));
+}

package/dist/EmptyState.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/**
+ * What a list or a page shows when there is nothing in it yet: a centred `title`, the `children`
+ * as the explanation under it (a `Text as="p"`, then `Steps` for a "get started" list), and
+ * `actions` (buttons, links) in a centred row at the bottom. A named `<section>`. For one muted
+ * line inside a card, use `Text as="p" color="muted"`. `level` is the title's heading level (default 2): one below the
+ * page's own heading, so the empty state inside a `SectionHeading` section is a 3.
+ */
+export declare function EmptyState({ title, level, children, actions, ...rest }: {
+    /** The heading, centred: what is missing ("No projects yet"). It names the section. */
+    title: ReactNode;
+    /** The title's heading level, 2 to 6. It does not change how the title looks. */
+    level?: 2 | 3 | 4 | 5 | 6 | undefined;
+    children?: ReactNode;
+    /** Buttons or links in a centred row at the bottom. */
+    actions?: ReactNode;
+} & Passthrough): ReactElement;

package/dist/EmptyState.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { SectionHeading } from "./typography.js";
+/**
+ * What a list or a page shows when there is nothing in it yet: a centred `title`, the `children`
+ * as the explanation under it (a `Text as="p"`, then `Steps` for a "get started" list), and
+ * `actions` (buttons, links) in a centred row at the bottom. A named `<section>`. For one muted
+ * line inside a card, use `Text as="p" color="muted"`. `level` is the title's heading level (default 2): one below the
+ * page's own heading, so the empty state inside a `SectionHeading` section is a 3.
+ */
+export function EmptyState({ title, level = 2, children, actions, ...rest }) {
+    const titleId = useId();
+    return (_jsxs("section", { ...rest, "aria-labelledby": titleId, className: "mx-auto flex w-full max-w-xl flex-col items-center gap-4 py-8 text-center", children: [_jsx(SectionHeading, { as: `h${level}`, id: titleId, children: title }), children != null && (_jsx("div", { className: "flex w-full flex-col items-center gap-5", children: children })), actions != null && _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: actions })] }));
+}

package/dist/Field.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/** The line under a control or a row: an error (`role="alert"`) replaces the hint; neither draws nothing. */
+export declare function fieldNote(hint: ReactNode, error: ReactNode): ReactElement | null;
+/**
+ * A label above a control, with a hint or an error line under it. An error replaces the hint.
+ * Inside a `FormGrid`, `span="full"` runs the field across both columns.
+ */
+export declare function Field({ label, htmlFor, hint, error, span, children, ...rest }: {
+    /** The text above the control. */
+    label: ReactNode;
+    /** The id of the control inside; the label's htmlFor. */
+    htmlFor: string;
+    /** A muted line under the control that says more. */
+    hint?: ReactNode;
+    /** Replaces the hint when set. */
+    error?: ReactNode;
+    /** `full` spans every column of a `FormGrid`; unset takes one. It does nothing outside a `FormGrid`. */
+    span?: "full" | undefined;
+    children: ReactNode;
+} & Passthrough): ReactElement;

package/dist/Field.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** The line under a control or a row: an error (`role="alert"`) replaces the hint; neither draws nothing. */
+export function fieldNote(hint, error) {
+    if (error) {
+        return (_jsx("p", { role: "alert", className: "text-xs text-red-700", children: error }));
+    }
+    if (hint) {
+        return _jsx("p", { className: "text-xs text-slate-500", children: hint });
+    }
+    return null;
+}
+/**
+ * A label above a control, with a hint or an error line under it. An error replaces the hint.
+ * Inside a `FormGrid`, `span="full"` runs the field across both columns.
+ */
+export function Field({ label, htmlFor, hint, error, span, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: cx("flex flex-col gap-1.5", span === "full" && "col-span-full"), children: [_jsx("label", { htmlFor: htmlFor, className: "text-sm font-medium text-slate-700", children: label }), children, fieldNote(hint, error)] }));
+}

package/dist/FieldDialog.d.ts

@@ -0,0 +1,28 @@
+import { type ReactElement } from "react";
+import type { Passthrough } from "./props.js";
+export type FieldDialogProps = {
+    /** The dialog's heading and accessible name. */
+    title: string;
+    /** A muted line under the title. */
+    description?: string;
+    /** The visible label above the field. */
+    label: string;
+    /** The field's accessible name, when it says more than the visible label. */
+    inputLabel: string;
+    /** The field's placeholder. */
+    placeholder: string;
+    /** A muted line under the field; `emptyReason` takes its place while the field is empty. */
+    hint: string;
+    /** Said when the field is empty and the submit button is blocked. */
+    emptyReason: string;
+    /** The submit button's text. */
+    submit: string;
+    /** What the submit button says while `onSubmit` runs. */
+    busyLabel: string;
+    /** Gets the trimmed value. Resolving closes the dialog; a rejection shows its message in it. */
+    onSubmit: (value: string) => Promise<unknown>;
+    /** Called when the dialog closes: Cancel, Esc, the backdrop, or a resolved `onSubmit`. */
+    onClose: () => void;
+} & Passthrough;
+/** A `Dialog` with one text field and Cancel / submit buttons. Render it only while open. */
+export declare function FieldDialog({ title, description, label, inputLabel, placeholder, hint, emptyReason, submit, busyLabel, onSubmit, onClose, ...rest }: FieldDialogProps): ReactElement;

package/dist/FieldDialog.js

@@ -0,0 +1,34 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button } from "./Button.js";
+import { Dialog } from "./Dialog.js";
+import { Field } from "./Field.js";
+import { Input } from "./Input.js";
+/** The field's value and its in-flight state; `send` is the form's submit handler. */
+function useFieldSubmit(onSubmit) {
+    const [value, setValue] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const empty = value.trim().length === 0;
+    const send = (event) => {
+        event.preventDefault();
+        if (empty || busy)
+            return;
+        // Close the <dialog> itself, so it animates out before `onClose` unmounts it.
+        const dialog = event.currentTarget.closest("dialog");
+        setError(null);
+        setBusy(true);
+        void onSubmit(value.trim()).then(() => dialog?.close(), (e) => {
+            setBusy(false);
+            setError(e instanceof Error ? e.message : String(e));
+        });
+    };
+    return { value, setValue, busy, error, empty, send };
+}
+/** A `Dialog` with one text field and Cancel / submit buttons. Render it only while open. */
+export function FieldDialog({ title, description, label, inputLabel, placeholder, hint, emptyReason, submit, busyLabel, onSubmit, onClose, ...rest }) {
+    const id = useId();
+    const formId = `${id}-form`;
+    const { value, setValue, busy, error, empty, send } = useFieldSubmit(onSubmit);
+    return (_jsx(Dialog, { ...rest, title: title, description: description, onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: (event) => event.currentTarget.closest("dialog")?.close(), children: "Cancel" }), _jsx(Button, { type: "submit", form: formId, disabledReason: empty ? emptyReason : undefined, busy: busy, busyLabel: busyLabel, children: submit })] }), children: _jsx("form", { id: formId, onSubmit: send, children: _jsx(Field, { label: label, htmlFor: id, hint: empty ? emptyReason : hint, error: error ?? undefined, children: _jsx(Input, { autoFocus: true, id: id, "aria-label": inputLabel, placeholder: placeholder, value: value, onChange: (e) => setValue(e.target.value), autoComplete: "off" }) }) }) }));
+}

package/dist/FileDrop.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+/**
+ * A dashed drop zone around a file input. The input covers the whole zone, invisible, so a click
+ * opens the file dialog and a file dragged onto it is taken by the browser as it is by any file
+ * input. `children` is the prompt; show the chosen file's name there from `onChange`. The label also shows
+ * the keyboard focus ring, the input being invisible. Every prop (`accept`, `multiple`, `name`, `disabled`, `onChange`) goes on the input.
+ */
+export declare function FileDrop({ size, children, ...rest }: {
+    /**
+     * `sm` is a compact chip or tile: dense padding; `lg` is one step roomier than `md`.
+     * @default md
+     */
+    size?: Size;
+    children: ReactNode;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"input">, "type" | "children" | "size" | "width">>): ReactElement;

package/dist/FileDrop.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+const PAD = { sm: "px-3 py-2", md: "px-4 py-6", lg: "px-5 py-8" };
+/**
+ * A dashed drop zone around a file input. The input covers the whole zone, invisible, so a click
+ * opens the file dialog and a file dragged onto it is taken by the browser as it is by any file
+ * input. `children` is the prompt; show the chosen file's name there from `onChange`. The label also shows
+ * the keyboard focus ring, the input being invisible. Every prop (`accept`, `multiple`, `name`, `disabled`, `onChange`) goes on the input.
+ */
+export function FileDrop({ size = "md", children, ...rest }) {
+    return (_jsxs("label", { className: cx("relative flex items-center justify-center rounded-lg border border-dashed border-slate-300 text-center text-sm text-slate-500 transition hover:border-violet-400 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-violet-600", PAD[size], rest.disabled && "opacity-50"), children: [_jsx("input", { type: "file", className: "absolute inset-0 h-full w-full cursor-pointer rounded-lg opacity-0 disabled:cursor-not-allowed", ...rest }), children] }));
+}

package/dist/FilterGroup.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+/** A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. `Button variant="outline" pressed`). Other props go on the fieldset. */
+export declare function FilterGroup({ legend, children, ...rest }: {
+    /** The section's name, a small uppercase legend over the chips. */
+    legend: ReactNode;
+} & Unstyled<ComponentPropsWithoutRef<"fieldset">>): ReactElement;

package/dist/FilterGroup.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Overline } from "./typography.js";
+/** A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. `Button variant="outline" pressed`). Other props go on the fieldset. */
+export function FilterGroup({ legend, children, ...rest }) {
+    return (_jsxs("fieldset", { ...rest, className: "min-w-0", children: [_jsx(Overline, { as: "legend", children: legend }), _jsx("div", { className: "mt-2 flex flex-wrap gap-1.5", children: children })] }));
+}

package/dist/FormRow.d.ts

@@ -0,0 +1,42 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/** Relative widths in a `FormRow`: a field of `span` 2 is twice as wide as one of `span` 1. */
+export type FormRowSpan = 1 | 2 | 3 | 4;
+/**
+ * Two columns of `Field`s from `md`, one below it. A `Field` takes one column; `span="full"` runs
+ * it across both, and a `FormRow` is always full width.
+ */
+export declare function FormGrid({ children, ...rest }: {
+    children: ReactNode;
+} & Passthrough): ReactElement;
+/**
+ * An inline-edit row: several controls side by side with proportional widths (`FormRowField`
+ * `span` 1 to 4), an optional `action` after them (a save button), and one `hint` or `error` line
+ * under the whole row. Every control sits on the bottom edge, so the action lines up with them
+ * whatever the labels do. Under `md` the fields and the action stack.
+ *
+ * The row owns the note, so the fields beside each other keep their height: a `FormRowField` has
+ * no `hint` or `error` of its own.
+ */
+export declare function FormRow({ action, hint, error, children, ...rest }: {
+    /** A button or two after the last field. It keeps its own width. */
+    action?: ReactNode;
+    /** One muted line under the whole row. */
+    hint?: ReactNode;
+    /** Replaces the hint when set, as `Field`'s does. */
+    error?: ReactNode;
+    children: ReactNode;
+} & Passthrough): ReactElement;
+/** A compact label over one control, for a `FormRow`. `span` is its share of the row (1 default). */
+export declare function FormRowField({ label, htmlFor, span, children, ...rest }: {
+    /** The small label above the control. */
+    label: ReactNode;
+    /** The id of the control inside; the label's htmlFor. */
+    htmlFor: string;
+    /**
+     * The field's share of the row, 1 to 4: a `span` of 2 is twice as wide as a 1.
+     * @default 1
+     */
+    span?: FormRowSpan | undefined;
+    children: ReactNode;
+} & Passthrough): ReactElement;

package/dist/FormRow.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { fieldNote } from "./Field.js";
+const SPAN = {
+    1: "md:flex-1",
+    2: "md:flex-2",
+    3: "md:flex-3",
+    4: "md:flex-4",
+};
+/**
+ * Two columns of `Field`s from `md`, one below it. A `Field` takes one column; `span="full"` runs
+ * it across both, and a `FormRow` is always full width.
+ */
+export function FormGrid({ children, ...rest }) {
+    return (_jsx("div", { ...rest, className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: children }));
+}
+/**
+ * An inline-edit row: several controls side by side with proportional widths (`FormRowField`
+ * `span` 1 to 4), an optional `action` after them (a save button), and one `hint` or `error` line
+ * under the whole row. Every control sits on the bottom edge, so the action lines up with them
+ * whatever the labels do. Under `md` the fields and the action stack.
+ *
+ * The row owns the note, so the fields beside each other keep their height: a `FormRowField` has
+ * no `hint` or `error` of its own.
+ */
+export function FormRow({ action, hint, error, children, ...rest }) {
+    const note = fieldNote(hint, error);
+    return (_jsxs("div", { ...rest, className: "col-span-full flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-end", children: [children, action && _jsx("div", { className: "flex items-center gap-2 md:shrink-0", children: action })] }), note] }));
+}
+/** A compact label over one control, for a `FormRow`. `span` is its share of the row (1 default). */
+export function FormRowField({ label, htmlFor, span = 1, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: cx("flex min-w-0 flex-col gap-1", SPAN[span]), children: [_jsx("label", { htmlFor: htmlFor, className: "text-xs font-medium text-slate-700", children: label }), children] }));
+}

package/dist/Icon.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+import type { Size } from "./size.js";
+import { type TextTone } from "./typography.js";
+/**
+ * One inline icon: an `<svg>` child sized to a fixed box (sm 14px, md 16px, lg 20px) and drawn in
+ * `currentColor`, so it takes the text colour around it unless a `tone` says otherwise. It is
+ * decorative (`aria-hidden`) by default; a `label` makes it an image with that name, for an icon
+ * that carries meaning no text beside it says.
+ */
+export declare function Icon({ size, tone, label, children, ...rest }: Passthrough & {
+    /** The box: sm 14px, md 16px (the default), lg 20px. */
+    size?: Size;
+    /** A text tone, or `inherit` (the default) for the colour of the text around it. */
+    tone?: TextTone | "inherit";
+    /** Names the icon (`role="img"`). Without one the icon is hidden from assistive tech. */
+    label?: string;
+    /** The `<svg>`, drawn in `currentColor`; it fills the box. */
+    children: ReactNode;
+}): ReactElement;

package/dist/Icon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { TEXT_TONE } from "./typography.js";
+const BOX = { sm: "size-3.5", md: "size-4", lg: "size-5" };
+/**
+ * One inline icon: an `<svg>` child sized to a fixed box (sm 14px, md 16px, lg 20px) and drawn in
+ * `currentColor`, so it takes the text colour around it unless a `tone` says otherwise. It is
+ * decorative (`aria-hidden`) by default; a `label` makes it an image with that name, for an icon
+ * that carries meaning no text beside it says.
+ */
+export function Icon({ size = "md", tone = "inherit", label, children, ...rest }) {
+    return (_jsx("span", { ...rest, ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }), className: cx("inline-flex shrink-0 [&>svg]:size-full", BOX[size], tone !== "inherit" && TEXT_TONE[tone]), children: children }));
+}