@hackcove/ui 0.1.0 → 0.2.1

package/README.md

@@ -4,7 +4,7 @@ Hack Cove React components, written against Tailwind v4 utilities. They carry no
 with a `@hackcove/theme-*` package such as `@hackcove/theme-catppuccin-mocha`, or use them on their
 own for the default light look.
 
-Status: `0.x`, not yet published to npm. License: MIT.
+Status: `0.x`, published to npm. License: MIT.
 
 ## Install
 
@@ -40,6 +40,27 @@ export const Example = () => (
 - Typography roles (each pins size + weight, takes a `color` and an `as`): `Display`, `Lead`,
   `PageHeading`, `SectionHeading`, `SubsectionHeading`, `ModalHeading`, `Subtitle`, `Overline`,
   `Body`, `BodyStrong`, `Caption`.
+- Controls: `Button`, `buttonClass` (the classes of a `Button`, for a router's own `<Link>`), `IconButton` (a square button holding one icon; `label` is required and becomes its `aria-label` and `title`), `Input` (a text input; `icon` adds a leading icon inside the field), `Textarea` (a multi-line text input, `rows` defaults to 3), `Select` (a native `<select>` in the control look; takes `<option>` children and keeps the browser's arrow). `Checkbox` (a native checkbox with its label; `className` goes on the label, other props on the input). `CopyButton` (a small text button that writes `text` to the clipboard and swaps `label` ("copy") for `copiedLabel` ("copied"); every other button prop, `disabled` included, goes on the `<button>`). `CopyLine` (one line of mono text in a box with a `CopyButton` beside it; other props go on the root `<div>`). `Field` (a label above a control, `htmlFor` names the control's id; a `hint` sits under it, and an `error` replaces the hint with a `role="alert"` line). `Callout` (a tinted notice box; `tone` is `neutral`, `info` (default), `positive`, `warn` or `danger`; an optional `title` sits in bold above the body). `NavTabs` (a row of pill links in a `<nav>`; `items` are `{ label, href, active? }`, `label` names the landmark, the active one is filled and gets `aria-current="page"`). `navTabClass` (the classes of one tab, for a router's own `<Link>`). `Breadcrumbs` (a `<nav aria-label="Breadcrumb">` over an ordered list; `crumbs` are nodes, the last is the current page and gets `aria-current="page"`, and each crumb truncates). `crumbLinkClass` (the classes of a crumb that links, for a router's own `<Link>`). `KeyValueList` (a `<dl>` of label/value rows; each `KeyValue` takes a `label` and its value as children, the value right-aligned in tabular figures). `Kbd` (a keyboard key in mono; its border takes the surrounding text colour, so it reads on a filled button too). `ToggleChip` (an on/off filter pill; `pressed` sets `aria-pressed` and the filled look, `dot` adds a leading colour dot, and the caller toggles it in `onClick`). `FilterGroup` (a `<fieldset>` with a small uppercase `legend` over a wrapped row of its children, e.g. `ToggleChip`s; `className` goes on the fieldset).
+
+## Palette
+
+`palette.json` (in the repo, not in the package) lists the colour utilities the components may use,
+by role.
+
+| Role       | For                                                                   |
+| ---------- | --------------------------------------------------------------------- |
+| `surface`  | Cards and panels: the main background.                                |
+| `subtle`   | A step off the surface: table stripes, hover rows.                    |
+| `inset`    | A step deeper: wells, chips, pressed fills.                           |
+| `line`     | Borders and dividers.                                                 |
+| `ink`      | Text, from primary down to muted, plus input placeholders.            |
+| `accent`   | Primary actions, links, focus rings and controls; text on the accent. |
+| `positive` | Success: fill, text and border.                                       |
+| `warn`     | Caution: fill, text and border.                                       |
+| `danger`   | Errors and destructive actions: fill, text and border.                |
+| `info`     | Neutral notes: fill, text and border.                                 |
+
+A theme remaps every utility in `palette.json`; a component uses no colour utility outside it.
 
 ## Develop
 

package/dist/Breadcrumbs.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement, ReactNode } from "react";
+/** The classes of a crumb that links somewhere, for a router's own <Link>. The current page is plain text, not a link. */
+export declare const crumbLinkClass: string;
+/** `org / project / build / snapshot`: each crumb truncates, and the last is the current page. */
+export declare function Breadcrumbs({ crumbs, className, }: {
+    crumbs: ReactNode[];
+    className?: string;
+}): ReactElement;

package/dist/Breadcrumbs.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+/** The classes of a crumb that links somewhere, for a router's own <Link>. The current page is plain text, not a link. */
+export const crumbLinkClass = cx("rounded text-slate-500 hover:underline", focusRing);
+/** `org / project / build / snapshot`: each crumb truncates, and the last is the current page. */
+export function Breadcrumbs({ crumbs, className, }) {
+    const last = crumbs.length - 1;
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: cx("min-w-0", className), children: _jsx("ol", { className: "flex min-w-0 items-center gap-2 text-sm", children: crumbs.map((crumb, index) => (_jsxs("li", { "aria-current": index === last ? "page" : undefined, className: "flex min-w-0 items-center gap-2", children: [index > 0 && (_jsx("span", { "aria-hidden": "true", className: "text-slate-400", children: "/" })), _jsx("span", { className: cx("min-w-0 truncate", index === last ? "font-medium text-slate-900" : "text-slate-500"), children: crumb })] }, index))) }) }));
+}

package/dist/Button.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+export type ButtonVariant = "primary" | "outline" | "ghost";
+/** The classes of a Button, for a router's own <Link> that should look like one. */
+export declare function buttonClass(variant?: ButtonVariant): string;
+type ButtonProps = {
+    variant?: ButtonVariant;
+    /** Why the button cannot be pressed: disables it, sets it as the `title`, and greys it flat. */
+    disabledReason?: string | undefined;
+    /** The work is in flight: disabled, `aria-busy`, keeps its colour. Wins over `disabledReason`. */
+    busy?: boolean | undefined;
+    /** The label while `busy`, in place of the children. */
+    busyLabel?: string | undefined;
+} & ComponentPropsWithoutRef<"button">;
+/**
+ * A button in the primary, outline or ghost style. Defaults to `type="button"`. `disabledReason`
+ * and `busy` are the two disabled states that say more than a plain `disabled`, which keeps its
+ * half-opacity look.
+ */
+export declare function Button({ variant, disabledReason, busy, busyLabel, className, children, title, disabled, ...rest }: ButtonProps): ReactElement;
+export {};

package/dist/Button.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const SHAPE = "inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition";
+// A plain `disabled` washes out and ignores the pointer. Blocked and busy buttons are disabled too,
+// but they keep pointer events (the title shows, the cursor says why) and do not take this.
+const DISABLED_PLAIN = "disabled:pointer-events-none disabled:opacity-50";
+const VARIANT = {
+    primary: {
+        color: "border-violet-600 bg-violet-600 text-violet-50",
+        hover: "hover:bg-violet-700",
+    },
+    outline: { color: "border-violet-600 text-violet-600", hover: "hover:bg-violet-50" },
+    ghost: { color: "border-transparent text-slate-600", hover: "hover:bg-slate-100" },
+};
+// Blocked replaces the variant's colour and hover rather than overriding them, so no `!` is needed.
+const BLOCKED = "cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400";
+const BUSY = "cursor-progress opacity-85";
+/** The classes of a Button, for a router's own <Link> that should look like one. */
+export function buttonClass(variant = "primary") {
+    return cx(SHAPE, DISABLED_PLAIN, focusRing, VARIANT[variant].color, VARIANT[variant].hover);
+}
+/** The classes of a Button in a given state: blocked swaps the colour out, busy keeps it. */
+function stateClass(variant, blocked, busy) {
+    const { color } = VARIANT[variant];
+    if (blocked)
+        return cx(SHAPE, focusRing, BLOCKED);
+    if (busy)
+        return cx(SHAPE, focusRing, color, BUSY);
+    return buttonClass(variant);
+}
+/**
+ * A button in the primary, outline or ghost style. Defaults to `type="button"`. `disabledReason`
+ * and `busy` are the two disabled states that say more than a plain `disabled`, which keeps its
+ * half-opacity look.
+ */
+export function Button({ variant = "primary", disabledReason, busy = false, busyLabel, className, children, title, disabled, ...rest }) {
+    const blocked = disabledReason !== undefined && !busy;
+    return (_jsx("button", { type: "button", className: cx(stateClass(variant, blocked, busy), className), disabled: disabled || busy || blocked, "aria-busy": busy || undefined, title: blocked ? disabledReason : title, ...rest, children: busy && busyLabel ? busyLabel : children }));
+}

package/dist/Callout.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** The colour family of a callout. */
+export type CalloutTone = "neutral" | "info" | "positive" | "warn" | "danger";
+/** A tinted notice box, with an optional bold title above its body. */
+export declare function Callout({ tone, title, children, className, ...rest }: {
+    /** Defaults to "info". */
+    tone?: CalloutTone;
+    title?: ReactNode;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "title">): ReactElement;

package/dist/Callout.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+const TONES = {
+    neutral: "border-slate-200 bg-slate-50 text-slate-700",
+    info: "border-blue-200 bg-blue-50 text-blue-800",
+    positive: "border-emerald-200 bg-emerald-50 text-emerald-800",
+    warn: "border-amber-200 bg-amber-50 text-amber-800",
+    danger: "border-red-200 bg-red-50 text-red-800",
+};
+/** A tinted notice box, with an optional bold title above its body. */
+export function Callout({ tone = "info", title, children, className, ...rest }) {
+    return (_jsx("div", { className: cx("rounded-xl border p-4 text-sm", TONES[tone], className), ...rest, children: title ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-semibold", children: title }), _jsx("div", { className: "mt-1", children: children })] })) : (children) }));
+}

package/dist/Checkbox.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A native checkbox with its label. `className` goes on the label; every other prop goes on the input. */
+export declare function Checkbox({ label, className, ...rest }: {
+    label: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"input">, "type">): ReactElement;

package/dist/Checkbox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+/** A native checkbox with its label. `className` goes on the label; every other prop goes on the input. */
+export function Checkbox({ label, className, ...rest }) {
+    return (_jsxs("label", { className: cx("inline-flex cursor-pointer items-center gap-2 text-sm text-slate-700", className), children: [_jsx("input", { type: "checkbox", className: cx("h-4 w-4 accent-violet-600", focusRing), ...rest }), label] }));
+}

package/dist/CopyButton.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentPropsWithoutRef, type ReactElement } from "react";
+/** Writes `text` to the clipboard and swaps the label to `copiedLabel`. Defaults to `type="button"`. A refused or missing clipboard leaves the label on `label`. Every other button prop, `disabled` included, goes on the `<button>`. */
+export declare function CopyButton({ text, label, copiedLabel, onClick, className, ...rest }: {
+    text: string;
+    label?: string;
+    copiedLabel?: string;
+} & Omit<ComponentPropsWithoutRef<"button">, "children">): ReactElement;

package/dist/CopyButton.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx, focusRing } from "./cx.js";
+const BASE = `shrink-0 rounded px-1.5 py-0.5 font-sans text-xs text-slate-400 hover:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+/** Writes `text` to the clipboard and swaps the label to `copiedLabel`. Defaults to `type="button"`. A refused or missing clipboard leaves the label on `label`. Every other button prop, `disabled` included, goes on the `<button>`. */
+export function CopyButton({ text, label = "copy", copiedLabel = "copied", onClick, className, ...rest }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { type: "button", ...rest, className: cx(BASE, className), onClick: (event) => {
+            onClick?.(event);
+            // The rejection is swallowed on purpose: a denied write is not an error the page can act on.
+            navigator.clipboard?.writeText(text).then(() => setCopied(true), () => { });
+        }, children: copied ? copiedLabel : label }));
+}

package/dist/CopyLine.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** One line of mono text in a box, with a `CopyButton`: a command or a token to paste elsewhere. `className` and every other div prop go on the root `<div>`, so `data-testid` lands there; the `<code>` holds only `text`. */
+export declare function CopyLine({ text, className, ...rest }: {
+    text: string;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">): ReactElement;

package/dist/CopyLine.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from "./CopyButton.js";
+import { cx } from "./cx.js";
+const BOX = "flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-white px-2.5 py-2 font-mono text-[12.5px] text-slate-900";
+/** One line of mono text in a box, with a `CopyButton`: a command or a token to paste elsewhere. `className` and every other div prop go on the root `<div>`, so `data-testid` lands there; the `<code>` holds only `text`. */
+export function CopyLine({ text, className, ...rest }) {
+    return (_jsxs("div", { ...rest, className: cx(BOX, className), children: [_jsx("code", { className: "min-w-0 break-words", children: text }), _jsx(CopyButton, { text: text })] }));
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,25 @@
+import { type ReactElement, type ReactNode } from "react";
+declare const SIZE: {
+    readonly sm: "w-80";
+    readonly md: "w-110";
+};
+export type DialogProps = {
+    /** The dialog's accessible name, shown as its heading. */
+    title: ReactNode;
+    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;
+    /** `sm` is a list; `md` (the default) holds a form. */
+    size?: keyof typeof SIZE;
+    /** Called when the dialog closes: Esc, a click on the backdrop, or a `<form method="dialog">` submit. */
+    onClose: () => void;
+    className?: string;
+};
+/**
+ * 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, className, }: DialogProps): ReactElement;
+export {};

package/dist/Dialog.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { Subtitle, ModalHeading } from "./typography.js";
+const PANEL = "mx-auto mt-28 max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white p-0 text-slate-900 shadow-2xl backdrop:bg-slate-900/35";
+const SIZE = { sm: "w-80", md: "w-110" };
+/**
+ * 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, className, }) {
+    const dialog = useRef(null);
+    const titleId = useId();
+    useEffect(() => {
+        dialog.current?.showModal();
+    }, []);
+    return (_jsx("dialog", { ref: dialog, "aria-labelledby": titleId, onClose: onClose, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(PANEL, SIZE[size], className), children: _jsxs("div", { className: "p-5.5", children: [_jsx(ModalHeading, { id: titleId, children: title }), description && _jsx(Subtitle, { className: "mt-1", 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/Field.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement, ReactNode } from "react";
+/** A label above a control, with a hint or an error line under it. An error replaces the hint. */
+export declare function Field({ label, htmlFor, hint, error, children, className, }: {
+    label: ReactNode;
+    /** The id of the control inside; the label's htmlFor. */
+    htmlFor: string;
+    hint?: ReactNode;
+    /** Replaces the hint when set. */
+    error?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): ReactElement;

package/dist/Field.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A label above a control, with a hint or an error line under it. An error replaces the hint. */
+export function Field({ label, htmlFor, hint, error, children, className, }) {
+    let note = null;
+    if (error) {
+        note = (_jsx("p", { role: "alert", className: "text-xs text-red-700", children: error }));
+    }
+    else if (hint) {
+        note = _jsx("p", { className: "text-xs text-slate-500", children: hint });
+    }
+    return (_jsxs("div", { className: cx("flex flex-col gap-1.5", className), children: [_jsx("label", { htmlFor: htmlFor, className: "text-sm font-medium text-slate-700", children: label }), children, note] }));
+}

package/dist/FieldDialog.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement } from "react";
+export type FieldDialogProps = {
+    title: string;
+    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;
+    placeholder: string;
+    hint: string;
+    /** Said when the field is empty and the submit button is blocked. */
+    emptyReason: string;
+    submit: string;
+    busyLabel: string;
+    /** Gets the trimmed value. Resolving closes the dialog; a rejection shows its message in it. */
+    onSubmit: (value: string) => Promise<unknown>;
+    onClose: () => void;
+};
+/** 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, }: FieldDialogProps): ReactElement;

package/dist/FieldDialog.js

@@ -0,0 +1,32 @@
+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, onClose) {
+    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;
+        setError(null);
+        setBusy(true);
+        void onSubmit(value.trim()).then(onClose, (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, }) {
+    const id = useId();
+    const formId = `${id}-form`;
+    const { value, setValue, busy, error, empty, send } = useFieldSubmit(onSubmit, onClose);
+    return (_jsx(Dialog, { 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/FilterGroup.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. ToggleChip). Other props go on the fieldset. */
+export declare function FilterGroup({ legend, children, className, ...rest }: {
+    legend: ReactNode;
+} & ComponentPropsWithoutRef<"fieldset">): ReactElement;

package/dist/FilterGroup.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A labelled filter section: a small uppercase legend over a wrapped row of chips (e.g. ToggleChip). Other props go on the fieldset. */
+export function FilterGroup({ legend, children, className, ...rest }) {
+    return (_jsxs("fieldset", { className: cx("min-w-0", className), ...rest, children: [_jsx("legend", { className: "mb-2 text-xs font-medium tracking-wide text-slate-500 uppercase", children: legend }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: children })] }));
+}

package/dist/IconButton.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A square bordered button holding one icon. `label` is its accessible name and tooltip. Defaults to `type="button"`. */
+export declare function IconButton({ label, className, children, ...rest }: {
+    label: string;
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"button">, "children">): ReactElement;

package/dist/IconButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-500 transition hover:bg-slate-50 disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+/** A square bordered button holding one icon. `label` is its accessible name and tooltip. Defaults to `type="button"`. */
+export function IconButton({ label, className, children, ...rest }) {
+    return (_jsx("button", { type: "button", ...rest, "aria-label": label, title: label, className: cx(BASE, className), children: children }));
+}

package/dist/Input.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/** A text input. `icon` puts a leading icon inside the field (e.g. a search glass). */
+export declare function Input({ icon, className, ...rest }: {
+    icon?: ReactNode;
+} & ComponentPropsWithoutRef<"input">): ReactElement;

package/dist/Input.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A text input. `icon` puts a leading icon inside the field (e.g. a search glass). */
+export function Input({ icon, className, ...rest }) {
+    if (icon === undefined) {
+        return _jsx("input", { ...rest, className: cx(controlClass, "px-3", className) });
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-slate-400 [&>svg]:h-4 [&>svg]:w-4", children: icon }), _jsx("input", { ...rest, className: cx(controlClass, "pr-3 pl-9", className) })] }));
+}

package/dist/Kbd.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** A keyboard key. Its border takes the surrounding text colour, so it reads on a filled button and on plain text. */
+export declare function Kbd({ children, className, ...rest }: {
+    children: ReactNode;
+} & HTMLAttributes<HTMLElement>): ReactElement;

package/dist/Kbd.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A keyboard key. Its border takes the surrounding text colour, so it reads on a filled button and on plain text. */
+export function Kbd({ children, className, ...rest }) {
+    return (_jsx("kbd", { className: cx("rounded border border-current/30 px-1 font-mono text-xs leading-4", className), ...rest, children: children }));
+}

package/dist/KeyValueList.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** A definition list of label/value rows: each label on the left, its value right-aligned. */
+export declare function KeyValueList({ className, children, ...rest }: {
+    children: ReactNode;
+} & HTMLAttributes<HTMLDListElement>): ReactElement;
+/** One row of a KeyValueList: a label on the left, a right-aligned tabular value on the right. */
+export declare function KeyValue({ label, children, className, ...rest }: {
+    label: ReactNode;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>): ReactElement;

package/dist/KeyValueList.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A definition list of label/value rows: each label on the left, its value right-aligned. */
+export function KeyValueList({ className, children, ...rest }) {
+    return (_jsx("dl", { className: cx("flex flex-col gap-1.5 text-sm", className), ...rest, children: children }));
+}
+/** One row of a KeyValueList: a label on the left, a right-aligned tabular value on the right. */
+export function KeyValue({ label, children, className, ...rest }) {
+    return (_jsxs("div", { className: cx("flex justify-between gap-3", className), ...rest, children: [_jsx("dt", { className: "text-slate-600", children: label }), _jsx("dd", { className: "text-right tabular-nums", children: children })] }));
+}

package/dist/NavTabs.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement, ReactNode } from "react";
+/** One pill link in a NavTabs row. */
+export type NavTab = {
+    label: ReactNode;
+    href: string;
+    active?: boolean;
+};
+/** The classes of one tab, for a router's own <Link>. */
+export declare function navTabClass(active: boolean): string;
+/** A row of pill links where the active one is filled. Renders plain <a>; use navTabClass with a router's Link. */
+export declare function NavTabs({ items, label, className, }: {
+    items: NavTab[];
+    /** The accessible name of the nav landmark. */
+    label: string;
+    className?: string;
+}): ReactElement;

package/dist/NavTabs.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `rounded-lg px-3 py-1.5 transition ${focusRing}`;
+/** The classes of one tab, for a router's own <Link>. */
+export function navTabClass(active) {
+    return cx(BASE, active ? "bg-slate-100 font-medium text-slate-900" : "text-slate-600 hover:bg-slate-100");
+}
+/** A row of pill links where the active one is filled. Renders plain <a>; use navTabClass with a router's Link. */
+export function NavTabs({ items, label, className, }) {
+    return (_jsx("nav", { "aria-label": label, className: cx("flex flex-wrap gap-1 text-sm", className), children: items.map((item) => (_jsx("a", { href: item.href, className: navTabClass(!!item.active), "aria-current": item.active ? "page" : undefined, children: item.label }, item.href))) }));
+}

package/dist/Select.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** A native `<select>` styled like `Input`, keeping the browser's own arrow. */
+export declare function Select({ className, children, ...rest }: ComponentPropsWithoutRef<"select">): ReactElement;

package/dist/Select.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A native `<select>` styled like `Input`, keeping the browser's own arrow. */
+export function Select({ className, children, ...rest }) {
+    return (_jsx("select", { ...rest, className: cx(controlClass, "px-3", className), children: children }));
+}

package/dist/Textarea.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. */
+export declare function Textarea({ className, ...rest }: ComponentPropsWithoutRef<"textarea">): ReactElement;

package/dist/Textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. */
+export function Textarea({ className, ...rest }) {
+    return _jsx("textarea", { rows: 3, ...rest, className: cx(controlClass, "px-3", className) });
+}

package/dist/ToggleChip.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+/** An on/off pill button for filters. `pressed` sets its state; `dot` adds a leading colour dot. The caller toggles it in onClick. */
+export declare function ToggleChip({ pressed, dot, className, children, ...rest }: {
+    pressed: boolean;
+    /** A CSS colour for a leading dot (e.g. a category colour); no dot when omitted. */
+    dot?: string;
+} & ComponentPropsWithoutRef<"button">): ReactElement;

package/dist/ToggleChip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+const BASE = `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition ${focusRing}`;
+const OFF = "border-slate-200 bg-white text-slate-600 hover:border-violet-400";
+const ON = "border-violet-600 bg-violet-600 text-violet-50";
+/** An on/off pill button for filters. `pressed` sets its state; `dot` adds a leading colour dot. The caller toggles it in onClick. */
+export function ToggleChip({ pressed, dot, className, children, ...rest }) {
+    return (_jsxs("button", { type: "button", "aria-pressed": pressed, className: cx(BASE, pressed ? ON : OFF, className), ...rest, children: [dot && (_jsx("span", { "aria-hidden": "true", className: cx("h-1.5 w-1.5 rounded-full", pressed && "ring-1 ring-current"), style: { backgroundColor: dot } })), children] }));
+}

package/dist/control.d.ts

@@ -0,0 +1,2 @@
+/** Shared look of text controls; each control adds its own horizontal padding. */
+export declare const controlClass = "w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/control.js

@@ -0,0 +1,3 @@
+import { focusRing } from "./cx.js";
+/** Shared look of text controls; each control adds its own horizontal padding. */
+export const controlClass = `w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`;

package/dist/cx.d.ts

@@ -0,0 +1,4 @@
+/** Join class names, dropping falsy parts. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;
+/** The keyboard focus ring every interactive control shares. */
+export declare const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/cx.js

@@ -0,0 +1,6 @@
+/** Join class names, dropping falsy parts. */
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+/** The keyboard focus ring every interactive control shares. */
+export const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";

package/dist/index.d.ts

@@ -1,3 +1,21 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
+export { Button, buttonClass, type ButtonVariant } from "./Button.js";
+export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
+export { Callout, type CalloutTone } from "./Callout.js";
+export { Dialog, type DialogProps } from "./Dialog.js";
+export { IconButton } from "./IconButton.js";
+export { NavTabs, navTabClass, type NavTab } from "./NavTabs.js";
+export { ToggleChip } from "./ToggleChip.js";
+export { FilterGroup } from "./FilterGroup.js";
+export { Checkbox } from "./Checkbox.js";
+export { CopyButton } from "./CopyButton.js";
+export { CopyLine } from "./CopyLine.js";
+export { Field } from "./Field.js";
+export { FieldDialog, type FieldDialogProps } from "./FieldDialog.js";
+export { Input } from "./Input.js";
+export { Kbd } from "./Kbd.js";
+export { KeyValue, KeyValueList } from "./KeyValueList.js";
+export { Select } from "./Select.js";
+export { Textarea } from "./Textarea.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";

package/dist/index.js

@@ -1,3 +1,21 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
 export { Markdown } from "./Markdown.js";
+export { Button, buttonClass } from "./Button.js";
+export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
+export { Callout } from "./Callout.js";
+export { Dialog } from "./Dialog.js";
+export { IconButton } from "./IconButton.js";
+export { NavTabs, navTabClass } from "./NavTabs.js";
+export { ToggleChip } from "./ToggleChip.js";
+export { FilterGroup } from "./FilterGroup.js";
+export { Checkbox } from "./Checkbox.js";
+export { CopyButton } from "./CopyButton.js";
+export { CopyLine } from "./CopyLine.js";
+export { Field } from "./Field.js";
+export { FieldDialog } from "./FieldDialog.js";
+export { Input } from "./Input.js";
+export { Kbd } from "./Kbd.js";
+export { KeyValue, KeyValueList } from "./KeyValueList.js";
+export { Select } from "./Select.js";
+export { Textarea } from "./Textarea.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, } from "./typography.js";

package/dist/typography.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
 /** Colour token → slate/violet utility (remapped to Catppuccin Mocha in dark mode by theme.css). */
 const COLOR = {
     default: "text-slate-900", // Catppuccin text     #cdd6f4
@@ -7,9 +8,6 @@ const COLOR = {
     muted: "text-slate-400", // Catppuccin overlay2 #9399b2
     brand: "text-violet-600", // Catppuccin mauve    #cba6f7
 };
-function cx(...parts) {
-    return parts.filter(Boolean).join(" ");
-}
 /**
  * Build a semantic component that pins `variantClass` (size + weight + tracking)
  * and a default colour. The scale/weight for each role therefore lives in exactly

package/dist/ui.d.ts

@@ -3,9 +3,12 @@ export declare function PageTitle({ title, subtitle }: {
     title: string;
     subtitle?: string;
 }): import("react").JSX.Element;
-export declare function Card({ title, count, children, }: {
+/** A bordered panel with an optional title and count; `as` picks the element (default `section`). */
+export declare function Card({ title, count, as: Tag, className, children, }: {
     title?: string;
     count?: number;
+    as?: "section" | "article" | "div";
+    className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
 /** A coloured epic header row: a dot in the epic's colour + its label. */
@@ -13,9 +16,11 @@ export declare function EpicHeader({ color, label }: {
     color: string;
     label: string;
 }): import("react").JSX.Element;
-export declare function Pill({ children, tone, }: {
+/** A small tinted label; `dot` adds a leading dot in the pill's own text colour. */
+export declare function Pill({ children, tone, dot, }: {
     children: ReactNode;
     tone?: "slate" | "amber" | "emerald" | "blue" | "red";
+    dot?: boolean;
 }): import("react").JSX.Element;
 export declare function Empty({ children }: {
     children: ReactNode;

package/dist/ui.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
 // Small presentational primitives written against Tailwind's slate-based class vocabulary
 // (remapped to Catppuccin Mocha in dark mode by theme.css).
 export function PageTitle({ title, subtitle }) {
     return (_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight text-slate-900", children: title }), subtitle && _jsx("p", { className: "mt-1 text-sm text-slate-500", children: subtitle })] }));
 }
-export function Card({ title, count, children, }) {
-    return (_jsxs("section", { className: "rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", children: [title && (_jsxs("div", { className: "mb-3 flex items-baseline gap-2", children: [_jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-slate-400", children: title }), count !== undefined && (_jsx("span", { className: "text-xs font-medium text-slate-400", children: count }))] })), children] }));
+/** A bordered panel with an optional title and count; `as` picks the element (default `section`). */
+export function Card({ title, count, as: Tag = "section", className, children, }) {
+    return (_jsxs(Tag, { className: cx("rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", className), children: [title && (_jsxs("div", { className: "mb-3 flex items-baseline gap-2", children: [_jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-slate-400", children: title }), count !== undefined && (_jsx("span", { className: "text-xs font-medium text-slate-400", children: count }))] })), children] }));
 }
 /** A coloured epic header row: a dot in the epic's colour + its label. */
 export function EpicHeader({ color, label }) {
     return (_jsxs("div", { className: "mb-1.5 mt-3 flex items-center gap-2 first:mt-0", children: [_jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm font-semibold text-slate-700", children: label })] }));
 }
-export function Pill({ children, tone = "slate", }) {
+/** A small tinted label; `dot` adds a leading dot in the pill's own text colour. */
+export function Pill({ children, tone = "slate", dot = false, }) {
     const tones = {
         slate: "bg-slate-100 text-slate-600",
         amber: "bg-amber-50 text-amber-700",
@@ -19,7 +22,7 @@ export function Pill({ children, tone = "slate", }) {
         blue: "bg-blue-50 text-blue-700",
         red: "bg-red-50 text-red-900",
     };
-    return (_jsx("span", { className: `rounded-md px-1.5 py-0.5 text-xs font-medium ${tones[tone]}`, children: children }));
+    return (_jsxs("span", { className: cx("rounded-md px-1.5 py-0.5 text-xs font-medium", tones[tone], dot && "inline-flex items-center gap-1"), children: [dot && _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full bg-current" }), children] }));
 }
 export function Empty({ children }) {
     return _jsx("p", { className: "text-sm text-slate-400", children: children });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a @hackcove/theme-* package.",
   "license": "MIT",
   "repository": {
@@ -33,6 +33,7 @@
     "@types/bun": "1.4.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "tailwindcss": "^4.3.3",