@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/primitives/tag/TagsField.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { cn } from "../../foundations/variants.js";
+import { fieldGroupStyles, listOptionStyles } from "../field/aria.js";
+import { useFieldIds } from "../field/context.js";
+import { ReadValue } from "../field/Field.js";
+import { useFormMode } from "../field/mode.js";
+import { Popover } from "../overlay/Popover.js";
+import { tagChoices, withoutTag, withTag, } from "./choices.js";
+import { Tags } from "./Tags.js";
+import { Plus } from "lucide-react";
+import { useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { ComboBox as AriaComboBox, ComboBoxStateContext, Group, Input, ListBox, ListBoxItem, useFilter, useLocale, } from "react-aria-components";
+/* ==================================================================== *
+ *  TAGSFIELD — a many2many written as chips: the categories of a customer, the labels of an
+ *  invoice.
+ *
+ *  Context: the read form of this value is `Tags` — a strip of chips. Editing it is the same
+ *  strip plus ONE way in: the chips stay where they are read (removable with their × or
+ *  Backspace), and an input right after the last one adds the next. A separate «add tag»
+ *  button that opens a list would be two controls for one value, and a multi-select with
+ *  checkboxes hides what is chosen behind a closed field — the opposite of a many2many,
+ *  whose whole point is that the categories are seen.
+ *
+ *  ── React Aria's tag group and React Aria's combobox, side by side ──
+ *
+ *  The chips are `Tags` (React Aria's `TagGroup`): one tab stop, arrows between chips,
+ *  Backspace or Delete removes the focused one. The input is React Aria's `ComboBox`: typing
+ *  filters in the copy table's locale («exportacion» finds «exportación»), arrows walk the
+ *  list, Enter adds. Two additions are ours, both what a person who types tags expects:
+ *  while typing, the FIRST match is marked, so Enter adds it (typing «may» and Enter is the
+ *  whole gesture, and the row it takes is the tinted one); and Backspace in the empty input
+ *  removes the last chip.
+ *
+ *  The chosen tags never come back as options — choosing «mayorista» twice is a duplicate,
+ *  not a choice. «Create «…»» is offered only when `onCreate` is given and the text names no
+ *  existing tag (see `tagChoices`).
+ *
+ *  The value is a plain `string[]` of ids, in the order they were added — what the backend
+ *  stores in a many2many, never React Aria's `Selection`.
+ * ==================================================================== */
+/** The key of the «create» row. Not an id: it cannot collide with one. */
+const CREATE = "\u0000create";
+/** The chosen tags as chips, in the order of `value`. An id missing from `options` is still
+ *  drawn (as itself): hiding it would hide data the record has. */
+function chosenOptions(options, value) {
+    const byId = new Map(options.map((option) => [option.value, option]));
+    return value.map((id) => byId.get(id) ?? { value: id, label: id });
+}
+/**
+ * A many2many as removable chips plus an inline combobox that adds one more.
+ *
+ * Works inside `<Field label=…>`: the field's label names both the input and the strip of
+ * chips, and its hint and error describe the input. In read mode it is `Tags`.
+ */
+export function TagsField({ mode, ...props }) {
+    if (useFormMode(mode) === "read") {
+        const chosen = chosenOptions(props.options, props.value);
+        if (chosen.length === 0)
+            return _jsx(ReadValue, { value: null });
+        return (_jsx("span", { className: "flex min-h-(--size-control-md) items-center", children: _jsx(Tags, { items: chosen.map((option) => ({
+                    id: option.value,
+                    label: option.label,
+                    ...(option.tone === undefined ? {} : { tone: option.tone }),
+                })) }) }));
+    }
+    /* The filter reads the locale from React Aria's context, so the box that provides it has
+       to be ABOVE the component that asks for it. */
+    return (_jsx(AriaLocale, { children: _jsx(EditableTagsField, { ...props }) }));
+}
+function EditableTagsField({ value, onChange, options, onCreate, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
+    const { id, labelledBy, describedBy, invalid } = useFieldIds({
+        id: ownId,
+        describedBy: ownDescribedBy,
+        invalid: ownInvalid,
+    });
+    const copy = useUiCopy();
+    const { contains } = useFilter({ sensitivity: "base" });
+    const { locale } = useLocale();
+    const collator = useMemo(() => new Intl.Collator(locale, { sensitivity: "base", usage: "search" }), [locale]);
+    const [text, setText] = useState("");
+    const boxRef = useRef(null);
+    const [width, setWidth] = useState(null);
+    const inputRef = useRef(null);
+    /* The value after an `await` is the one of THEN, not the one of the render that started
+       creating: a tag removed meanwhile must not come back. */
+    const latest = useRef(value);
+    latest.current = value;
+    const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled);
+    const listed = create === null
+        ? available
+        : [
+            ...available,
+            { value: CREATE, label: fillCopy(copy.inlineEdit.createTag, { name: create }) },
+        ];
+    const commit = (key) => {
+        if (key === null)
+            return;
+        const chosen = String(key);
+        setText("");
+        if (chosen !== CREATE) {
+            onChange?.(withTag(latest.current, chosen));
+            return;
+        }
+        if (create === null || onCreate === undefined)
+            return;
+        void Promise.resolve(onCreate(create)).then((created) => onChange?.(withTag(latest.current, created)));
+    };
+    const remove = (tagId) => {
+        const next = withoutTag(value, tagId);
+        onChange?.(next);
+        /* The last chip leaves and takes its strip with it: the focus goes to the input instead
+           of falling to the page. */
+        if (next.length === 0)
+            inputRef.current?.focus();
+    };
+    const chips = chosenOptions(options, value).map((option) => ({
+        id: option.value,
+        label: option.label,
+        ...(option.tone === undefined ? {} : { tone: option.tone }),
+        ...(disabled ? {} : { onRemove: () => remove(option.value) }),
+    }));
+    return (
+    /* The chips sit beside the combobox, not inside it: React Aria builds the combobox's
+       list from what it holds, and a tag group in there is read as part of that list. The
+       popover is anchored to the whole box and as wide as it — the list continues the field,
+       and the input alone is a sliver after the last chip. */
+    _jsxs(Group, { ref: boxRef, isDisabled: disabled, isInvalid: invalid, className: (state) => fieldGroupStyles({
+            ...state,
+            /* The box grows with the chips: five categories wrap to a second line instead of
+               scrolling out of sight. */
+            className: "h-auto min-h-(--size-control-md) flex-wrap gap-1 py-1 pl-1.5",
+        }), children: [chips.length === 0 ? null : (_jsx(Tags, { items: chips, ...(labelledBy === undefined
+                    ? ariaLabel === undefined
+                        ? {}
+                        : { label: ariaLabel }
+                    : { labelledBy }) })), _jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, items: listed, selectedKey: null, onSelectionChange: commit, inputValue: text, onInputChange: setText, 
+                /* Arriving at the field shows what can still be added, the way a many2one opens its
+                   list on focus. With every tag chosen and no text there is nothing to show, and the
+                   list stays closed. */
+                menuTrigger: "focus", onOpenChange: (isOpen) => {
+                    if (isOpen)
+                        setWidth(boxRef.current?.getBoundingClientRect().width ?? null);
+                }, isInvalid: invalid, isDisabled: disabled, className: "flex min-w-24 flex-1", children: [_jsx(TagInput, { inputRef: inputRef, placeholder: value.length === 0 ? (placeholder ?? copy.inlineEdit.addTag) : undefined, firstKey: listed[0]?.value ?? null, onTake: commit, onBackspace: () => {
+                            const last = value.at(-1);
+                            if (last !== undefined)
+                                onChange?.(withoutTag(value, last));
+                        }, empty: text === "" }), _jsx(Popover, { triggerRef: boxRef, ...(width === null
+                            ? {}
+                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsx("span", { className: "truncate", children: item.label })) })) }) })] })] }));
+}
+/** The input after the chips. It reads the combobox's state to know whether the keyboard
+ *  marked an option — Enter with nothing marked takes the first match. */
+function TagInput({ inputRef, placeholder, firstKey, onTake, onBackspace, empty, }) {
+    const state = useContext(ComboBoxStateContext);
+    /* While typing, the first match is MARKED — so the row Enter is going to take is the row
+       the eye sees tinted, not a guess. Only when the keyboard has not marked another one. */
+    const open = state?.isOpen === true;
+    useEffect(() => {
+        if (state === null || !open || empty || firstKey === null)
+            return;
+        const focused = state.selectionManager.focusedKey;
+        if (focused === null || state.collection.getItem(focused) === null) {
+            state.selectionManager.setFocusedKey(firstKey);
+        }
+    }, [state, open, empty, firstKey]);
+    const onKeyDown = (event) => {
+        if (event.key === "Backspace" && empty) {
+            onBackspace();
+            return;
+        }
+        if (event.key !== "Enter" || empty || firstKey === null)
+            return;
+        if (state?.selectionManager.focusedKey != null)
+            return;
+        /* Stopped in the capture phase, so React Aria's own Enter — «commit nothing, reset the
+           text» — does not run after ours. */
+        event.preventDefault();
+        event.stopPropagation();
+        state?.close();
+        onTake(firstKey);
+    };
+    return (_jsx(Input, { ref: inputRef, placeholder: placeholder, onKeyDownCapture: onKeyDown, className: "h-(--size-control-sm) min-w-0 flex-1 bg-transparent px-1 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed" }));
+}

package/dist/primitives/tag/choices.d.ts

@@ -0,0 +1,38 @@
+import type { Tone } from "../../foundations/types.js";
+/**
+ * One tag that can be put on a record: what is stored (`value`, the id) and what is read
+ * (`label`), plus the tone it MEANS when it means something.
+ *
+ * Context: the same plain shape as `ChoiceOption` — the categories of a customer and the
+ * labels of an invoice come from data, and the ids go back to the backend as they came.
+ */
+export interface TagOption {
+    value: string;
+    label: string;
+    /** Neutral by default: «mayorista» classifies, it does not warn. */
+    tone?: Tone;
+}
+/** How the typed text is compared — the locale's, handed in by the component. */
+export type TagMatch = {
+    /** `label` contains `query`, ignoring case and accents. */
+    contains: (label: string, query: string) => boolean;
+    /** `a` and `b` are the same word, ignoring case and accents. */
+    same: (a: string, b: string) => boolean;
+};
+/**
+ * What the inline input offers for a given text.
+ *
+ * Context: pure and outside the component because it is the contract of the field — the
+ * chosen ones never come back as options (choosing «mayorista» twice is a duplicate, not a
+ * choice), the typed text filters, and «create» is offered only when the text names NO
+ * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
+ * ends up with both.
+ */
+export declare function tagChoices(options: readonly TagOption[], value: readonly string[], text: string, match: TagMatch, creatable: boolean): {
+    available: TagOption[];
+    create: string | null;
+};
+/** The value with one more id at the end; the same value when it is already there. */
+export declare function withTag(value: readonly string[], id: string): string[];
+/** The value without that id. */
+export declare function withoutTag(value: readonly string[], id: string): string[];

package/dist/primitives/tag/choices.js

@@ -0,0 +1,26 @@
+/**
+ * What the inline input offers for a given text.
+ *
+ * Context: pure and outside the component because it is the contract of the field — the
+ * chosen ones never come back as options (choosing «mayorista» twice is a duplicate, not a
+ * choice), the typed text filters, and «create» is offered only when the text names NO
+ * existing tag, chosen or not: creating «Mayorista» next to «mayorista» is how a catalog
+ * ends up with both.
+ */
+export function tagChoices(options, value, text, match, creatable) {
+    const chosen = new Set(value);
+    const query = text.trim();
+    const available = options.filter((option) => !chosen.has(option.value) && (query === "" || match.contains(option.label, query)));
+    const create = creatable && query !== "" && !options.some((option) => match.same(option.label, query))
+        ? query
+        : null;
+    return { available, create };
+}
+/** The value with one more id at the end; the same value when it is already there. */
+export function withTag(value, id) {
+    return value.includes(id) ? [...value] : [...value, id];
+}
+/** The value without that id. */
+export function withoutTag(value, id) {
+    return value.filter((one) => one !== id);
+}

package/dist/primitives/tag/index.d.ts

@@ -0,0 +1,4 @@
+export { StatusDot, Tag } from "./Tag.js";
+export { type TagItem, Tags } from "./Tags.js";
+export { type TagOption } from "./choices.js";
+export { TagsField, type TagsFieldProps } from "./TagsField.js";

package/dist/primitives/tag/index.js

@@ -0,0 +1,8 @@
+/* Saying a state without writing a sentence: the capsule and the dot. */
+export { StatusDot, Tag } from "./Tag.js";
+/* La tira de fichas: la misma en la barra, en el desplegable y en cualquier
+   lugar donde se dibuje una lista de palabras cortas. */
+export { Tags } from "./Tags.js";
+/* El many2many: las fichas elegidas más una entrada que agrega la siguiente. */
+export {} from "./choices.js";
+export { TagsField } from "./TagsField.js";

package/dist/primitives/toolbar/Toolbar.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export declare function Toolbar({ label, children, orientation, }: {
+    /** What the group is, read aloud on entering it: «Acciones de las líneas». A screen with
+     *  two toolbars is two unnamed groups otherwise. */
+    label: string;
+    children: ReactNode;
+    orientation?: "horizontal" | "vertical";
+}): import("react").JSX.Element;
+/** A hairline between two groups of a `Toolbar`, across its direction. */
+export declare function ToolbarSeparator({ orientation, }: {
+    /** `vertical` (the default) splits a horizontal toolbar; `horizontal`, a vertical one. */
+    orientation?: "horizontal" | "vertical";
+}): import("react").JSX.Element;

package/dist/primitives/toolbar/Toolbar.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "../../foundations/variants.js";
+import { Separator as AriaSeparator, Toolbar as AriaToolbar, } from "react-aria-components";
+/**
+ * A row of controls that is ONE stop for the keyboard: the actions above an editable table,
+ * the bar of a rich-text editor.
+ *
+ * Context: a table with eight actions above it costs eight Tabs before reaching the first
+ * cell. Inside a toolbar Tab enters and leaves the group once, and the arrows move between
+ * its controls — the way every desktop application has always worked. React Aria does the
+ * moving by walking the DOM for focusable elements, so the system's own `Button` and
+ * `IconButton` (plain native buttons) work inside it as they are, with nothing to forward.
+ *
+ * It draws no box of its own: it sits on whatever surface it is placed, like the actions of a
+ * record header. The gap is the one between buttons of a row; a `ToolbarSeparator` splits
+ * the groups (edit · insert · export) so a long bar still reads as a few decisions.
+ */
+const toolbar = tv({
+    base: "flex gap-1",
+    variants: {
+        orientation: {
+            horizontal: "flex-row flex-wrap items-center",
+            vertical: "flex-col items-start",
+        },
+    },
+});
+export function Toolbar({ label, children, orientation = "horizontal", }) {
+    return (_jsx(AriaToolbar, { "aria-label": label, orientation: orientation, className: (state) => toolbar({ orientation: state.orientation }), children: children }));
+}
+/** A hairline between two groups of a `Toolbar`, across its direction. */
+export function ToolbarSeparator({ orientation = "vertical", }) {
+    return (_jsx(AriaSeparator, { orientation: orientation, className: orientation === "vertical"
+            ? "mx-1 h-(--size-icon-lg) w-px shrink-0 border-none bg-line-strong forced-colors:bg-[ButtonBorder]"
+            : "my-1 h-px w-full border-none bg-line-strong forced-colors:bg-[ButtonBorder]" }));
+}

package/dist/primitives/toolbar/index.d.ts

@@ -0,0 +1 @@
+export { Toolbar, ToolbarSeparator } from "./Toolbar.js";

package/dist/primitives/toolbar/index.js

@@ -0,0 +1,2 @@
+/* LA BARRA DE HERRAMIENTAS — un grupo de controles que se recorre con las flechas. */
+export { Toolbar, ToolbarSeparator } from "./Toolbar.js";

package/dist/primitives/tree/Tree.d.ts

@@ -0,0 +1,56 @@
+import { type LucideIcon } from "lucide-react";
+/** One record of the hierarchy. With `children` it is a group that folds. */
+export interface TreeItem {
+    id: string;
+    label: string;
+    /** What reads beside the name, at the right, in tabular figures: a balance, a stock, a
+     *  count. Already formatted — the tree does not know a currency from a unit. */
+    meta?: string;
+    icon?: LucideIcon;
+    children?: readonly TreeItem[];
+    /** It cannot be chosen — a view account that groups others and takes no entries. It still
+     *  folds and opens. */
+    disabled?: boolean;
+}
+/** One name or the other: a tree with no name is announced as a lone «tree». */
+type TreeName = {
+    /** The accessible name: «Plan de cuentas». */
+    label: string;
+    labelledBy?: never;
+} | {
+    /** The id of a visible heading that names the tree — the label of the `Field` it lives
+     *  in. */
+    labelledBy: string;
+    label?: never;
+};
+export type TreeProps = TreeName & {
+    items: readonly TreeItem[];
+    /** The groups open right now. Pass it with `onExpandedChange` to own the expansion. */
+    expanded?: readonly string[];
+    /** The groups that start open, when the tree owns its expansion. */
+    defaultExpanded?: readonly string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** `none` reads; `single` chooses one record (a category, a location); `multiple` a set. */
+    selectionMode?: "none" | "single" | "multiple";
+    /** The chosen ids — a list in both modes, like every other control, so a screen does not
+     *  switch shapes when one becomes many. */
+    selected?: readonly string[];
+    defaultSelected?: readonly string[];
+    onSelectedChange?: (ids: string[]) => void;
+    /** Open the record: Enter, or a click (a double click when the tree chooses one). Without
+     *  it, a click on a group folds or opens it. */
+    onAction?: (id: string) => void;
+    /** What an empty tree says. By default, the copy table's `tree.empty`. */
+    empty?: string;
+};
+/**
+ * A hierarchy of records — the chart of accounts, product categories, warehouse locations —
+ * with its groups that fold, a figure per row, and one or many rows to choose.
+ *
+ * Context: the keyboard is React Aria's `Tree`: arrows walk the visible rows, → opens a group
+ * and ← folds it (or goes up to the parent), Home and End jump, and typing a name moves to it.
+ * Escape does NOT clear the selection: the tree often lives in a dialog or a popover, and
+ * Escape there means «close» — clearing the choice on the way out would lose it without a word.
+ */
+export declare function Tree({ items, label, labelledBy, expanded, defaultExpanded, onExpandedChange, selectionMode, selected, defaultSelected, onSelectedChange, onAction, empty, }: TreeProps): import("react").JSX.Element;
+export {};

package/dist/primitives/tree/Tree.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { cn, focusRing, tv } from "../../foundations/variants.js";
+import { Check, ChevronRight } from "lucide-react";
+import { Button as AriaButton, Checkbox as AriaCheckbox, Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent, } from "react-aria-components";
+const row = tv({
+    extend: focusRing,
+    base: "group relative flex min-w-0 cursor-default items-center rounded-control text-meta text-ink -outline-offset-2 select-none forced-color-adjust-none",
+    variants: {
+        isSelected: {
+            true: "bg-primary/10 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        },
+        isHovered: { true: "" },
+    },
+    compoundVariants: [{ isSelected: false, isHovered: true, class: "bg-ink/4" }],
+});
+/* The chevron column is exactly one indent step wide, so a child's chevron lands under its
+   parent's name and the levels read as columns, not as a ragged edge. */
+const chevronButton = tv({
+    extend: focusRing,
+    base: "inline-flex size-(--spacing-indent) shrink-0 items-center justify-center rounded-mark text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink pressed:bg-ink/10",
+});
+/** Every id of the hierarchy that can be chosen — what «select all» means here. */
+function choosable(items) {
+    return items.flatMap((item) => [
+        ...(item.disabled === true ? [] : [item.id]),
+        ...choosable(item.children ?? []),
+    ]);
+}
+/**
+ * A hierarchy of records — the chart of accounts, product categories, warehouse locations —
+ * with its groups that fold, a figure per row, and one or many rows to choose.
+ *
+ * Context: the keyboard is React Aria's `Tree`: arrows walk the visible rows, → opens a group
+ * and ← folds it (or goes up to the parent), Home and End jump, and typing a name moves to it.
+ * Escape does NOT clear the selection: the tree often lives in a dialog or a popover, and
+ * Escape there means «close» — clearing the choice on the way out would lose it without a word.
+ */
+export function Tree({ items, label, labelledBy, expanded, defaultExpanded, onExpandedChange, selectionMode = "none", selected, defaultSelected, onSelectedChange, onAction, empty, }) {
+    const copy = useUiCopy();
+    const density = useDensity();
+    const pad = byDensity(density, "py-1.5 pe-2", "py-0.5 pe-1.5");
+    const many = selectionMode === "multiple";
+    const onSelectionChange = (keys) => onSelectedChange?.(keys === "all" ? choosable(items) : [...keys].map(String));
+    const render = (node, level) => {
+        const children = node.children ?? [];
+        const group = children.length > 0;
+        const Icon = node.icon;
+        /* Each level is one indent step; the first one keeps a sliver of the row's own padding so
+           the chevron is not glued to the edge of its tint. */
+        const indent = {
+            paddingInlineStart: `calc(var(--spacing) * 1 + var(--spacing-indent) * ${level - 1})`,
+        };
+        return (_jsxs(AriaTreeItem, { id: node.id, textValue: node.label, isDisabled: node.disabled === true, className: ({ isSelected, isHovered, isFocusVisible }) => cn(row({ isSelected, isHovered, isFocusVisible }), pad), style: indent, children: [_jsx(TreeItemContent, { children: ({ isExpanded, isSelected }) => (_jsxs(_Fragment, { children: [group ? (_jsx(AriaButton, { slot: "chevron", className: ({ isFocusVisible }) => chevronButton({ isFocusVisible }), children: _jsx(ChevronRight, { className: `size-(--size-icon-sm) transition-transform duration-(--duration-quick) ease-(--ease-out) ${isExpanded ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }) })) : (_jsx("span", { "aria-hidden": true, className: "size-(--spacing-indent) shrink-0" })), _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [many ? _jsx(SelectionCheck, {}) : null, Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true })), _jsx("span", { className: cn("min-w-0 flex-1 truncate", group ? "font-medium" : "", isSelected ? "font-medium" : "", node.disabled === true && selectionMode !== "none" ? "text-muted" : ""), children: node.label }), node.meta === undefined ? null : (_jsx("span", { className: "shrink-0 ps-3 text-right tabular-nums whitespace-nowrap text-muted", children: node.meta })), selectionMode === "single" && isSelected ? (_jsx(Check, { className: "size-(--size-icon-sm) shrink-0 text-primary forced-colors:text-[HighlightText]", strokeWidth: 2.5, "aria-hidden": true })) : null] })] })) }), children.map((child) => render(child, level + 1))] }, node.id));
+    };
+    return (_jsx(AriaLocale, { children: _jsx(AriaTree, { ...(labelledBy === undefined
+                ? { "aria-label": label }
+                : { "aria-labelledby": labelledBy }), selectionMode: selectionMode, 
+            /* One to choose: a click chooses and a double click opens. Many: the click opens and
+               the check chooses. See the header. */
+            selectionBehavior: selectionMode === "single" ? "replace" : "toggle", disabledBehavior: "selection", escapeKeyBehavior: "none", ...(selected === undefined ? {} : { selectedKeys: selected }), ...(defaultSelected === undefined ? {} : { defaultSelectedKeys: defaultSelected }), ...(expanded === undefined ? {} : { expandedKeys: expanded }), ...(defaultExpanded === undefined ? {} : { defaultExpandedKeys: defaultExpanded }), ...(onExpandedChange === undefined
+                ? {}
+                : { onExpandedChange: (keys) => onExpandedChange([...keys].map(String)) }), ...(onSelectedChange === undefined ? {} : { onSelectionChange }), ...(onAction === undefined ? {} : { onAction: (key) => onAction(String(key)) }), renderEmptyState: () => (_jsx("p", { className: "px-2 py-3 text-meta text-muted", children: empty ?? copy.tree.empty })), className: "flex w-full min-w-0 flex-col gap-px outline-0", children: items.map((item) => render(item, 1)) }) }));
+}
+/* The check of a row when many can be chosen. It is React Aria's `selection` slot: it toggles
+   the row and never opens it. Drawn like `Checkbox`'s box so a check reads as one thing. */
+function SelectionCheck() {
+    return (_jsx(AriaCheckbox, { slot: "selection", className: "group/check inline-flex shrink-0 outline-0", children: ({ isSelected, isFocusVisible }) => (_jsx("span", { "aria-hidden": true, className: cn("inline-flex size-4 items-center justify-center rounded-mark border transition-colors duration-(--duration-instant) forced-color-adjust-none", isSelected
+                ? "border-primary bg-primary text-surface forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+                : "border-line-strong bg-surface text-transparent forced-colors:border-[ButtonBorder]", focusRing({ isFocusVisible })), children: _jsx(Check, { className: "size-3", strokeWidth: 2.5 }) })) }));
+}

package/dist/primitives/tree/index.d.ts

@@ -0,0 +1 @@
+export { Tree, type TreeItem, type TreeProps } from "./Tree.js";

package/dist/primitives/tree/index.js

@@ -0,0 +1,3 @@
+/* A hierarchy of records — the chart of accounts, categories, locations: read, folded and
+   chosen from. Not the app's menu: that is `NavigationTree`. */
+export { Tree } from "./Tree.js";

package/dist/primitives/value/Copyable.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from "react";
+/**
+ * UN VALOR QUE SE COPIA.
+ *
+ * Context: la mitad de los valores de este producto existen para pegarse en otro
+ * lado —un NIT, un CUF de factura, una referencia bancaria, un código de
+ * autorización de 26 caracteres—. Seleccionarlos a mano falla justo con los que
+ * más importa no equivocar: son largos, van en monoespaciada y se cortan.
+ *
+ * ── Confirma, y por eso el estado vive acá ──────────────────────────
+ *
+ * Copiar no tiene efecto visible: el portapapeles está afuera de la pantalla. Un
+ * botón que no contesta se aprieta tres veces «por las dudas». Por eso el ícono
+ * pasa a un tilde por dos segundos — lo mínimo para creerle sin quedarse
+ * mirando.
+ *
+ * ── Y puede fallar ──────────────────────────────────────────────────
+ *
+ * `navigator.clipboard` no existe fuera de un contexto seguro, y en algunos
+ * navegadores exige un permiso que se puede negar. Se contempla: si falla, el
+ * botón lo dice en vez de fingir que copió. Una confirmación falsa es peor que
+ * ninguna, porque alguien pega lo que tenía antes y no se entera.
+ */
+export type CopyableProps = {
+    /** Lo que se copia. Siempre texto: el portapapeles no tiene tipos. */
+    value: string;
+    /** Cómo se ve, si no es el valor tal cual. Un fingerprint se muestra cortado y
+     *  se copia entero, que es justamente por qué las dos cosas son props
+     *  distintas. */
+    children?: ReactNode;
+    /** El valor es de máquina: id, hash, clave. Sin esto, tipografía normal. */
+    mono?: boolean;
+    /** Sólo el botón, sin el valor al lado. Para una celda o un encabezado donde
+     *  el valor ya está dibujado. */
+    bare?: boolean;
+};
+/**
+ * The button alone, for a value that is only known when it is pressed — what a field shows
+ * at that moment (`Field`'s copy button reads it from the screen). `Copyable` is this
+ * button next to its value.
+ */
+export declare function CopyButton({ value, label, }: {
+    /** The text, or how to get it at the moment of the press. */
+    value: string | (() => string);
+    /** Its name at rest. Defaults to the copy table's «Copiar». */
+    label?: string;
+}): import("react").JSX.Element;
+export declare function Copyable({ value, children, mono, bare }: CopyableProps): import("react").JSX.Element;

package/dist/primitives/value/Copyable.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Check, Copy } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+/** Cuánto dura el tilde. Dos segundos: alcanza para verlo sin que el botón se
+ *  quede en un estado que ya no es cierto. */
+const CONFIRMED_FOR = 2000;
+/**
+ * The button alone, for a value that is only known when it is pressed — what a field shows
+ * at that moment (`Field`'s copy button reads it from the screen). `Copyable` is this
+ * button next to its value.
+ */
+export function CopyButton({ value, label, }) {
+    const copy = useUiCopy();
+    const [state, setState] = useState("idle");
+    const timer = useRef(null);
+    /* Se limpia al desmontar: sin esto, copiar y cerrar el panel antes de los dos
+       segundos deja un `setState` apuntando a un componente que ya no existe. */
+    useEffect(() => () => {
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+    }, []);
+    async function run() {
+        if (timer.current !== null)
+            clearTimeout(timer.current);
+        const text = typeof value === "function" ? value() : value;
+        if (text.trim() === "") {
+            /* Nothing on screen to copy: said, not a check mark over an empty clipboard. */
+            setState("empty");
+            timer.current = setTimeout(() => setState("idle"), CONFIRMED_FOR);
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(text);
+            setState("done");
+        }
+        catch {
+            /* Sin portapapeles —contexto no seguro, permiso negado— se DICE. Fingir
+               que copió hace que alguien pegue lo que tenía antes sin enterarse. */
+            setState("failed");
+        }
+        timer.current = setTimeout(() => setState("idle"), CONFIRMED_FOR);
+    }
+    const said = state === "done"
+        ? copy.copyable.done
+        : state === "failed"
+            ? copy.copyable.failed
+            : state === "empty"
+                ? copy.copyable.empty
+                : (label ?? copy.copyable.label);
+    return (_jsx("button", { type: "button", onClick: (e) => {
+            /* Inside a row that opens or a link: copying is not opening. */
+            e.stopPropagation();
+            void run();
+        }, "aria-label": said, title: said, className: `inline-flex shrink-0 items-center justify-center rounded-control p-0.5 transition-colors duration-(--duration-instant) ${state === "done"
+            ? "text-good"
+            : state === "failed" || state === "empty"
+                ? "text-bad"
+                : "text-muted hover:bg-ink/6 hover:text-ink"}`, children: state === "done" ? (_jsx(Check, { className: "size-(--size-icon-sm)", strokeWidth: 2.5 })) : (_jsx(Copy, { className: "size-(--size-icon-sm)", strokeWidth: 2 })) }));
+}
+export function Copyable({ value, children, mono = false, bare = false }) {
+    const button = _jsx(CopyButton, { value: value });
+    if (bare)
+        return button;
+    return (
+    /* El botón aparece con el puntero y ocupa lugar SIEMPRE: si apareciera de la
+       nada, el valor se correría al pasar por encima, y un texto que se mueve
+       cuando vas a seleccionarlo es peor que no tener botón. */
+    _jsxs("span", { className: "group/copy inline-flex min-w-0 items-center gap-1", children: [_jsx("span", { className: `min-w-0 truncate ${mono ? "font-mono" : ""}`, children: children ?? value }), _jsx("span", { className: "opacity-0 transition-opacity duration-(--duration-instant) group-hover/copy:opacity-100 focus-within:opacity-100", children: button })] }));
+}

package/dist/primitives/value/Fecha.d.ts

@@ -0,0 +1,12 @@
+export declare function formatRelative(when: Date, now?: Date): string;
+export declare function formatDateTime(when: Date): string;
+export declare function DateValue({ when, format, 
+/** So it can be tested: without this, a story with «hace 2 min» changes its
+ *  text every minute and no snapshot works as a reference. */
+now, }: {
+    when: Date | string | number;
+    /** `relative` for lists and logs; `exact` when the datum gets compared or
+     *  copied; `date` when the time of day means nothing. */
+    format?: "relative" | "exact" | "date";
+    now?: Date;
+}): import("react").JSX.Element;