@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/lib/ansi.js

@@ -0,0 +1,438 @@
+/**
+ * ANSI SGR → styled segments, for terminal-ish text rendered in the UI (status lines, tool output).
+ *
+ * Only SGR (`ESC [ … m`) is interpreted; every other escape sequence (cursor moves, OSC titles and
+ * hyperlinks, DCS/APC/PM/SOS strings, C1 controls) is removed, and so are raw control characters and
+ * bidi overrides. The output is plain text plus a style object — render it with React text nodes,
+ * never as HTML.
+ */
+import { palette } from "../_bundled/tokens/index.js";
+const ESC = 0x1b;
+const BEL = 0x07;
+/** C1 introducers (8-bit forms of ESC [, ESC ], ESC P, ESC X, ESC ^, ESC _). */
+const C1_CSI = 0x9b;
+const C1_OSC = 0x9d;
+const C1_ST = 0x9c;
+const C1_STRING_INTRODUCERS = new Set([0x90, 0x98, 0x9e, 0x9f]);
+/** After ESC: `]` OSC, `P` DCS, `X` SOS, `^` PM, `_` APC — all run until ST (or BEL for OSC). */
+const STRING_FINALS = new Set(["]", "P", "X", "^", "_"]);
+/** Unicode bidi embeddings/overrides/isolates: they can visually reorder text, so they never render. */
+const isBidiControl = (code) => (code >= 0x202a && code <= 0x202e) ||
+    (code >= 0x2066 && code <= 0x2069) ||
+    code === 0x200e ||
+    code === 0x200f;
+/** Printable for our purposes: not C0 (except tab/newline), not DEL, not C1, not a bidi control. */
+const isPrintable = (code) => code === 0x09 ||
+    code === 0x0a ||
+    (code >= 0x20 && code !== 0x7f && (code < 0x80 || code > 0x9f) && !isBidiControl(code));
+/** Index just past a string sequence's terminator (ST `ESC \`, C1 ST or — for OSC — BEL), or the end. */
+function skipString(input, from) {
+    for (let i = from; i < input.length; i++) {
+        const code = input.charCodeAt(i);
+        if (code === BEL || code === C1_ST)
+            return i + 1;
+        if (code === ESC)
+            return input[i + 1] === "\\" ? i + 2 : i;
+    }
+    return input.length;
+}
+/**
+ * Reads a CSI body starting after `ESC [`. Returns the end index and, for well-formed SGR, its
+ * parameters. Malformed sequences end at the first byte outside the CSI grammar (that byte is kept).
+ */
+function readCsi(input, from) {
+    let i = from;
+    while (i < input.length) {
+        const code = input.charCodeAt(i);
+        if (code >= 0x30 && code <= 0x3f)
+            i++;
+        else
+            break;
+    }
+    const params = input.slice(from, i);
+    while (i < input.length) {
+        const code = input.charCodeAt(i);
+        if (code >= 0x20 && code <= 0x2f)
+            i++;
+        else
+            break;
+    }
+    const final = input.charCodeAt(i);
+    if (Number.isNaN(final) || final < 0x40 || final > 0x7e)
+        return { end: i, sgr: undefined };
+    const isSgr = final === 0x6d && i === from + params.length && /^[\d;:]*$/.test(params);
+    return { end: i + 1, sgr: isSgr ? params : undefined };
+}
+/** Index just past a non-CSI, non-string escape: `ESC` + intermediates (0x20–0x2F) + one final byte. */
+function skipEscape(input, from) {
+    let i = from;
+    while (i < input.length) {
+        const code = input.charCodeAt(i);
+        if (code >= 0x20 && code <= 0x2f)
+            i++;
+        else
+            break;
+    }
+    const final = input.charCodeAt(i);
+    return final >= 0x30 && final <= 0x7e ? i + 1 : i;
+}
+/** Handles one escape introducer at `i`; returns the next index and an SGR token when there is one. */
+function readEscape(input, i) {
+    const code = input.charCodeAt(i);
+    if (code === C1_CSI) {
+        const csi = readCsi(input, i + 1);
+        return { next: csi.end, sgr: csi.sgr };
+    }
+    if (code === C1_OSC || C1_STRING_INTRODUCERS.has(code))
+        return { next: skipString(input, i + 1), sgr: undefined };
+    // code === ESC
+    const after = input[i + 1];
+    if (after === "[") {
+        const csi = readCsi(input, i + 2);
+        return { next: csi.end, sgr: csi.sgr };
+    }
+    if (after !== undefined && STRING_FINALS.has(after))
+        return { next: skipString(input, i + 2), sgr: undefined };
+    return { next: skipEscape(input, i + 1), sgr: undefined };
+}
+function tokenize(input) {
+    const tokens = [];
+    let text = "";
+    let i = 0;
+    while (i < input.length) {
+        const code = input.charCodeAt(i);
+        if (code === ESC || code === C1_CSI || code === C1_OSC || C1_STRING_INTRODUCERS.has(code)) {
+            const { next, sgr } = readEscape(input, i);
+            if (sgr !== undefined) {
+                if (text !== "")
+                    tokens.push({ kind: "text", text });
+                text = "";
+                tokens.push({ kind: "sgr", params: sgr });
+            }
+            i = Math.max(next, i + 1);
+            continue;
+        }
+        if (isPrintable(code))
+            text += input[i];
+        i++;
+    }
+    if (text !== "")
+        tokens.push({ kind: "text", text });
+    return tokens;
+}
+const STYLE_KEYS = [
+    "bold",
+    "dim",
+    "italic",
+    "underline",
+    "strikethrough",
+    "inverse",
+    "fg",
+    "bg",
+];
+const byte = (value) => {
+    if (value === undefined || value === "")
+        return undefined;
+    const n = Number(value);
+    return Number.isInteger(n) && n >= 0 && n <= 255 ? n : undefined;
+};
+/**
+ * `38;5;n` / `38;2;r;g;b` (semicolon form, consuming following params) or `38:5:n` /
+ * `38:2:[cs]:r:g:b` (colon form, one param). Returns the color (if valid) and how many params it used.
+ */
+function readExtendedColor(params, at) {
+    const head = params[at] ?? "";
+    if (head.includes(":")) {
+        const parts = head.split(":");
+        if (parts[1] === "5")
+            return { color: paletteColor(byte(parts[2])), used: 1 };
+        if (parts[1] === "2") {
+            const rgb = parts.length >= 6 ? parts.slice(-3) : parts.slice(2, 5);
+            return { color: rgbColor(rgb), used: 1 };
+        }
+        return { color: undefined, used: 1 };
+    }
+    const mode = params[at + 1];
+    if (mode === "5")
+        return { color: paletteColor(byte(params[at + 2])), used: 3 };
+    if (mode === "2")
+        return { color: rgbColor(params.slice(at + 2, at + 5)), used: 5 };
+    return { color: undefined, used: mode === undefined ? 1 : 2 };
+}
+const paletteColor = (index) => index === undefined ? undefined : { type: "palette", index };
+function rgbColor(parts) {
+    const [r, g, b] = parts.map(byte);
+    return r === undefined || g === undefined || b === undefined ? undefined : { type: "rgb", r, g, b };
+}
+/** Flags and their resets: code → [property, on]. */
+const FLAGS = {
+    1: [["bold", true]],
+    2: [["dim", true]],
+    3: [["italic", true]],
+    4: [["underline", true]],
+    7: [["inverse", true]],
+    9: [["strikethrough", true]],
+    21: [["underline", true]],
+    22: [
+        ["bold", false],
+        ["dim", false],
+    ],
+    23: [["italic", false]],
+    24: [["underline", false]],
+    27: [["inverse", false]],
+    29: [["strikethrough", false]],
+};
+function setFlag(style, key, on) {
+    if (key === "fg" || key === "bg")
+        return;
+    if (on)
+        style[key] = true;
+    else
+        delete style[key];
+}
+/** Basic colors: 30–37 / 90–97 fg, 40–47 / 100–107 bg, 39 / 49 defaults. */
+function applyBasicColor(style, code) {
+    if (code >= 30 && code <= 37)
+        style.fg = { type: "palette", index: code - 30 };
+    else if (code >= 90 && code <= 97)
+        style.fg = { type: "palette", index: code - 90 + 8 };
+    else if (code >= 40 && code <= 47)
+        style.bg = { type: "palette", index: code - 40 };
+    else if (code >= 100 && code <= 107)
+        style.bg = { type: "palette", index: code - 100 + 8 };
+    else if (code === 39)
+        delete style.fg;
+    else if (code === 49)
+        delete style.bg;
+    else
+        return false;
+    return true;
+}
+/** Applies one simple (non-extended-color) SGR parameter to `style`. Unknown codes are ignored. */
+function applyCode(style, code, param) {
+    if (code === 0) {
+        for (const key of STYLE_KEYS)
+            delete style[key];
+        return;
+    }
+    if (code === 4 && param.startsWith("4:")) {
+        setFlag(style, "underline", param !== "4:0");
+        return;
+    }
+    const flags = FLAGS[code];
+    if (flags)
+        for (const [key, on] of flags)
+            setFlag(style, key, on);
+    else
+        applyBasicColor(style, code);
+}
+/** Applies one SGR parameter list to `style` (mutated). */
+function applySgr(style, raw) {
+    const params = raw === "" ? ["0"] : raw.split(";");
+    let i = 0;
+    while (i < params.length) {
+        const param = params[i] ?? "";
+        const code = Number(param.split(":")[0] || "0");
+        if (code === 38 || code === 48 || code === 58) {
+            const { color, used } = readExtendedColor(params, i);
+            if (color && code === 38)
+                style.fg = color;
+            if (color && code === 48)
+                style.bg = color;
+            i += used;
+        }
+        else {
+            applyCode(style, code, param);
+            i++;
+        }
+    }
+}
+const sameColor = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+const sameStyle = (a, b) => a.bold === b.bold &&
+    a.dim === b.dim &&
+    a.italic === b.italic &&
+    a.underline === b.underline &&
+    a.strikethrough === b.strikethrough &&
+    a.inverse === b.inverse &&
+    sameColor(a.fg, b.fg) &&
+    sameColor(a.bg, b.bg);
+/** Parses text with ANSI escapes into styled segments (adjacent equal styles merged, empty dropped). */
+export function parseAnsi(input) {
+    const segments = [];
+    const style = {};
+    for (const token of tokenize(input)) {
+        if (token.kind === "sgr") {
+            applySgr(style, token.params);
+            continue;
+        }
+        const snapshot = { ...style };
+        const last = segments.at(-1);
+        if (last && sameStyle(last.style, snapshot))
+            segments[segments.length - 1] = { ...last, text: last.text + token.text };
+        else
+            segments.push({ text: token.text, style: snapshot });
+    }
+    return segments;
+}
+/** The visible text only: every escape sequence and control character removed. */
+export function stripAnsi(input) {
+    return tokenize(input)
+        .map((token) => (token.kind === "text" ? token.text : ""))
+        .join("");
+}
+/* ------------------------------------------------------------------------------------------ */
+/* Colors → CSS                                                                               */
+/* ------------------------------------------------------------------------------------------ */
+/**
+ * The 16 named colors on theme tokens (ramp step 11 = legible text in both themes). Black and
+ * white follow the theme instead of being literal, so text never vanishes on the page background.
+ */
+const NAMED_FG = [
+    "var(--fg-muted)", // black
+    "var(--red-11)",
+    "var(--green-11)",
+    "var(--amber-11)",
+    "var(--blue-11)",
+    "var(--violet-11)",
+    "var(--persona-teal-fg)", // cyan
+    "var(--fg)", // white
+    "var(--fg-subtle)", // bright black (gray)
+    "var(--red-10)",
+    "var(--green-10)",
+    "var(--amber-11)",
+    "var(--blue-10)",
+    "var(--violet-10)",
+    "var(--persona-teal-fg)",
+    "var(--fg)", // bright white
+];
+const tint = (token, percent) => `color-mix(in oklab, var(${token}) ${percent}%, transparent)`;
+/** Backgrounds are tints, like the semantic `*-subtle` tokens, so text on them stays readable. */
+const NAMED_BG = [
+    tint("--gray-12", 14),
+    tint("--red-9", 16),
+    tint("--green-9", 16),
+    tint("--amber-9", 18),
+    tint("--blue-9", 16),
+    tint("--violet-9", 16),
+    tint("--persona-teal-solid", 18),
+    tint("--gray-12", 7),
+    tint("--gray-12", 10),
+    tint("--red-9", 22),
+    tint("--green-9", 22),
+    tint("--amber-9", 24),
+    tint("--blue-9", 22),
+    tint("--violet-9", 22),
+    tint("--persona-teal-solid", 24),
+    tint("--gray-12", 4),
+];
+const CUBE_LEVELS = [0, 95, 135, 175, 215, 255];
+const cubeLevel = (i) => CUBE_LEVELS[i] ?? 0;
+/** xterm 256-color cube (16–231) as rgb. */
+function cubeRgb(index) {
+    const n = index - 16;
+    return {
+        type: "rgb",
+        r: cubeLevel(Math.floor(n / 36)),
+        g: cubeLevel(Math.floor(n / 6) % 6),
+        b: cubeLevel(n % 6),
+    };
+}
+const hexRgb = (hex) => {
+    const n = Number.parseInt(hex.slice(1, 7), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+};
+const toHex = (rgb) => `#${rgb.map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+/** WCAG 2 relative luminance. */
+const luminance = (rgb) => {
+    const [r, g, b] = rgb.map((value) => {
+        const s = value / 255;
+        return s <= 0.040_45 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * (r ?? 0) + 0.7152 * (g ?? 0) + 0.0722 * (b ?? 0);
+};
+const contrast = (a, b) => {
+    const la = luminance(a);
+    const lb = luminance(b);
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+};
+const mixRgb = (a, b, t) => [
+    Math.round(a[0] + (b[0] - a[0]) * t),
+    Math.round(a[1] + (b[1] - a[1]) * t),
+    Math.round(a[2] + (b[2] - a[2]) * t),
+];
+/** WCAG AA for text. */
+const MIN_CONTRAST = 4.5;
+const SCHEMES = {
+    light: { paper: hexRgb(palette.light.gray[1]), ink: hexRgb(palette.light.gray[11]) },
+    dark: { paper: hexRgb(palette.dark.gray[1]), ink: hexRgb(palette.dark.gray[11]) },
+};
+/** The colour moved toward the ink just far enough to read at 4.5:1 on the paper. */
+function readable(color, { paper, ink }) {
+    const steps = 20;
+    for (let step = 0; step < steps; step += 1) {
+        const mixed = mixRgb(color, ink, step / steps);
+        if (contrast(mixed, paper) >= MIN_CONTRAST)
+            return mixed;
+    }
+    return ink;
+}
+/**
+ * A script's own colour (the 256-colour cube or truecolor) as text in this UI. It was picked for
+ * some terminal's background, not ours, so it keeps its hue but never reads under 4.5:1 in either
+ * scheme: terminals hold the same floor (xterm.js, VS Code's `minimumContrastRatio`).
+ * `light-dark()` picks by the element's colour scheme, so nested theme scopes work.
+ */
+const readableCss = (color) => {
+    const rgb = [color.r, color.g, color.b];
+    return `light-dark(${toHex(readable(rgb, SCHEMES.light))}, ${toHex(readable(rgb, SCHEMES.dark))})`;
+};
+/**
+ * CSS color for an ANSI color. Named colors and the 24-step grayscale ramp map onto theme tokens
+ * (grays become a mix of `--fg` and `--bg`, brighter = more prominent, as on a dark terminal).
+ * Cube and truecolor keep their hue: as text, held to 4.5:1 (`readableCss`); as a background, a
+ * tint like the named ones, so text on it stays readable.
+ */
+export function ansiColorToCss(color, layer) {
+    if (color.type === "rgb") {
+        return layer === "fg"
+            ? readableCss(color)
+            : `color-mix(in oklab, rgb(${color.r} ${color.g} ${color.b}) 22%, transparent)`;
+    }
+    const { index } = color;
+    if (index < 16)
+        return (layer === "fg" ? NAMED_FG : NAMED_BG)[index] ?? "currentColor";
+    if (index >= 232) {
+        const step = index - 232; // 0 (near black) … 23 (near white)
+        const percent = layer === "fg" ? Math.round(35 + (step / 23) * 65) : Math.round(4 + (step / 23) * 14);
+        return layer === "fg"
+            ? `color-mix(in oklab, var(--fg) ${percent}%, var(--bg))`
+            : `color-mix(in oklab, var(--gray-12) ${percent}%, transparent)`;
+    }
+    return ansiColorToCss(cubeRgb(index), layer);
+}
+/** Inline style for a segment (inverse swaps fg/bg, falling back to the theme's fg/bg). */
+export function ansiStyleToCss(style) {
+    const css = {};
+    let fg = style.fg === undefined ? undefined : ansiColorToCss(style.fg, "fg");
+    let bg = style.bg === undefined ? undefined : ansiColorToCss(style.bg, "bg");
+    if (style.inverse) {
+        const swappedFg = style.bg === undefined ? "var(--bg)" : ansiColorToCss(style.bg, "fg");
+        bg = style.fg === undefined ? "var(--fg)" : ansiColorToCss(style.fg, "fg");
+        fg = swappedFg;
+    }
+    // Dim reads quieter but never under 4.5:1: plain text takes fg-subtle, coloured text keeps its colour.
+    if (fg !== undefined)
+        css.color = fg;
+    else if (style.dim)
+        css.color = "var(--fg-subtle)";
+    if (bg !== undefined)
+        css.backgroundColor = bg;
+    if (style.bold)
+        css.fontWeight = 600;
+    if (style.italic)
+        css.fontStyle = "italic";
+    const lines = [style.underline && "underline", style.strikethrough && "line-through"].filter((line) => typeof line === "string");
+    if (lines.length > 0)
+        css.textDecorationLine = lines.join(" ");
+    return css;
+}

package/dist/lib/clock.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+/**
+ * The time source for every countdown, elapsed time and relative time the kit and its hosts show.
+ * The system clock is the default; tests and the catalog pass a {@link ManualClock} (the same idea
+ * as the orchestrator's injected `Clock`), so a fake-clock-driven screen renders consistent times.
+ */
+export interface Clock {
+    now(): number;
+    /** Calls `tick` roughly every `ms` until the returned function is called (idempotent). */
+    every(ms: number, tick: () => void): () => void;
+}
+export interface ManualClock extends Clock {
+    /** Moves time forward and notifies every subscriber once. */
+    advance(ms: number): void;
+    set(now: number): void;
+}
+/** A clock that only moves when told to. */
+export declare function createManualClock(start?: number): ManualClock;
+/** Provides the clock to everything below it that reads the time. */
+export declare function ClockProvider({ clock, children }: {
+    clock: Clock;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useClock(): Clock;
+/**
+ * Milliseconds left until `until` (epoch ms), re-rendering while it counts down and once more when
+ * it reaches zero. `undefined` when there's nothing to count down to. Stays subscribed (without
+ * re-rendering) after zero, so a clock that is set back — a test or replayed fixture — resumes.
+ */
+export declare function useCountdown(until: number | undefined): number | undefined;
+/** The current time, refreshed every `everyMs` while `live` (elapsed timers on running runs). */
+export declare function useNow(live: boolean, everyMs?: number): number;

package/dist/lib/clock.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+/** One interval per period, shared by every subscriber and running only while one listens. */
+const periods = new Map();
+const systemClock = {
+    now: () => Date.now(),
+    every: (ms, tick) => {
+        let period = periods.get(ms);
+        if (period === undefined) {
+            const ticks = new Set();
+            const timer = setInterval(() => {
+                for (const notify of ticks)
+                    notify();
+            }, ms);
+            period = { ticks, timer };
+            periods.set(ms, period);
+        }
+        const { ticks, timer } = period;
+        // Wrap so the same function subscribed twice stays two subscriptions.
+        const entry = () => tick();
+        ticks.add(entry);
+        return () => {
+            ticks.delete(entry);
+            if (ticks.size === 0 && periods.get(ms)?.timer === timer) {
+                clearInterval(timer);
+                periods.delete(ms);
+            }
+        };
+    },
+};
+/** A clock that only moves when told to. */
+export function createManualClock(start = 0) {
+    let now = start;
+    const ticks = new Set();
+    const notify = () => {
+        for (const tick of ticks)
+            tick();
+    };
+    return {
+        now: () => now,
+        every: (_ms, tick) => {
+            // Wrap so the same function subscribed twice stays two subscriptions.
+            const entry = () => tick();
+            ticks.add(entry);
+            return () => {
+                ticks.delete(entry);
+            };
+        },
+        advance: (ms) => {
+            now += ms;
+            notify();
+        },
+        set: (value) => {
+            now = value;
+            notify();
+        },
+    };
+}
+const ClockContext = createContext(systemClock);
+/** Provides the clock to everything below it that reads the time. */
+export function ClockProvider({ clock, children }) {
+    return _jsx(ClockContext, { value: clock, children: children });
+}
+export function useClock() {
+    return useContext(ClockContext);
+}
+/** Half a second keeps a ceil-rounded seconds display from skipping or stalling a digit. */
+const TICK_MS = 500;
+/**
+ * Milliseconds left until `until` (epoch ms), re-rendering while it counts down and once more when
+ * it reaches zero. `undefined` when there's nothing to count down to. Stays subscribed (without
+ * re-rendering) after zero, so a clock that is set back — a test or replayed fixture — resumes.
+ */
+export function useCountdown(until) {
+    const clock = useClock();
+    const [now, setNow] = useState(() => clock.now());
+    useEffect(() => {
+        if (until === undefined)
+            return undefined;
+        let settled = false;
+        const sync = () => {
+            const t = clock.now();
+            if (t < until || !settled)
+                setNow(t);
+            settled = t >= until;
+        };
+        sync();
+        return clock.every(TICK_MS, sync);
+    }, [clock, until]);
+    if (until === undefined)
+        return undefined;
+    return Math.max(0, until - now);
+}
+/** The current time, refreshed every `everyMs` while `live` (elapsed timers on running runs). */
+export function useNow(live, everyMs = 1000) {
+    const clock = useClock();
+    const [now, setNow] = useState(() => clock.now());
+    useEffect(() => {
+        setNow(clock.now());
+        if (!live)
+            return undefined;
+        return clock.every(everyMs, () => setNow(clock.now()));
+    }, [clock, live, everyMs]);
+    return now;
+}

package/dist/lib/cn.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from "clsx";
+/** Compose class names; later Tailwind classes win over conflicting earlier ones. */
+export declare function cn(...inputs: ClassValue[]): string;
+/** Base UI's `className`: a string, or a function of the part's state. */
+export type StateClassName<S> = string | ((state: S) => string | undefined) | undefined;
+/** Base UI's `className` for a part's state: the function's answer, or the string as it is. */
+export declare function resolveClassName<S>(className: StateClassName<S>, state: S): string | undefined;
+/** Merges a base class with Base UI's string-or-function `className`. */
+export declare function withBase<S>(base: string, className: StateClassName<S>): (state: S) => string;
+/** `tailwind-variants` configured with the kit's merge rules. */
+export declare const tv: import("tailwind-variants").TV;
+export type { VariantProps } from "tailwind-variants";

package/dist/lib/cn.js

@@ -0,0 +1,28 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import { createTV } from "tailwind-variants";
+/** Teach the class merger about the kit's custom theme keys so conflicts resolve correctly. */
+const twMergeConfig = {
+    extend: {
+        theme: {
+            text: ["2xs", "code", "xs", "sm", "base", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"],
+            shadow: ["xs", "sm", "md", "lg", "xl", "inset-edge"],
+            radius: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"],
+        },
+    },
+};
+const twMerge = extendTailwindMerge(twMergeConfig);
+/** Compose class names; later Tailwind classes win over conflicting earlier ones. */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+/** Base UI's `className` for a part's state: the function's answer, or the string as it is. */
+export function resolveClassName(className, state) {
+    return typeof className === "function" ? className(state) : className;
+}
+/** Merges a base class with Base UI's string-or-function `className`. */
+export function withBase(base, className) {
+    return (state) => cn(base, resolveClassName(className, state));
+}
+/** `tailwind-variants` configured with the kit's merge rules. */
+export const tv = createTV({ twMergeConfig });

package/dist/lib/control-props.d.ts

@@ -0,0 +1,21 @@
+/** A text control's own props, as a caller may set them. */
+export interface ControlProps {
+    readonly value?: string | undefined;
+    readonly defaultValue?: string | undefined;
+    readonly disabled?: boolean | undefined;
+    readonly id?: string | undefined;
+    readonly name?: string | undefined;
+    readonly autoFocus?: boolean | undefined;
+}
+/**
+ * Only the props the caller set, for Base UI's field control: one passed as `undefined` would override
+ * what a surrounding `<Field>` gives the control (its `id`, its `disabled`).
+ */
+export declare function givenControlProps({ value, defaultValue, disabled, id, name, autoFocus }: ControlProps): {
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    autoFocus?: boolean;
+};

package/dist/lib/control-props.js

@@ -0,0 +1,14 @@
+/**
+ * Only the props the caller set, for Base UI's field control: one passed as `undefined` would override
+ * what a surrounding `<Field>` gives the control (its `id`, its `disabled`).
+ */
+export function givenControlProps({ value, defaultValue, disabled, id, name, autoFocus }) {
+    return {
+        ...(value === undefined ? {} : { value }),
+        ...(defaultValue === undefined ? {} : { defaultValue }),
+        ...(disabled === undefined ? {} : { disabled }),
+        ...(id === undefined ? {} : { id }),
+        ...(name === undefined ? {} : { name }),
+        ...(autoFocus === undefined ? {} : { autoFocus }),
+    };
+}

package/dist/lib/direction.d.ts

@@ -0,0 +1,13 @@
+/**
+ * +1 left to right, -1 right to left: multiply a horizontal motion offset by it so things slide in
+ * from the side they would in the person's language (a step forward comes from the end edge). The
+ * direction is the one `UiI18nProvider` gives Base UI.
+ */
+export declare function useInlineSign(): 1 | -1;
+/**
+ * A horizontal arrow key as a left-to-right reader means it, given `useInlineSign()`'s sign: right to
+ * left, ArrowRight points toward the start of the line and ArrowLeft toward its end (WAI-ARIA APG), so
+ * they swap. A handler written for left to right (ArrowRight opens a tree node, moves to the next
+ * column) then follows the reading direction. Other keys pass through.
+ */
+export declare function logicalArrow(key: string, sign: 1 | -1): string;