@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/shortcut-recorder.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useUiLocale, useUiStrings } from "../i18n/provider.js";
+import { cn } from "../lib/cn.js";
+import { keyGlyph } from "../lib/keycaps.js";
+import { isMacPlatform } from "../lib/keys.js";
+import { formatList } from "../lib/text.js";
+import { useLatest } from "../lib/use-latest.js";
+import { Button } from "./button.js";
+import { Shortcut } from "./kbd.js";
+/** A modifier pressed on its own is the start of a combination, not a refused press. */
+const MODIFIER_KEYS = new Set(["Alt", "AltGraph", "Control", "Meta", "Shift"]);
+/**
+ * Records a keyboard shortcut. Change starts recording and the next combination becomes the
+ * shortcut; Escape, a second click on Change or focus leaving it stops without one. While recording,
+ * every key press is the recorder's: the app's own shortcuts don't act on it. A press that can't be a
+ * shortcut says what it needs; the state and the recorded keys are announced.
+ */
+export function ShortcutRecorder({ keys, parse, needs, onRecord, children, className, }) {
+    const t = useUiStrings().shortcutRecorder;
+    const kbd = useUiStrings().kbd;
+    const locale = useUiLocale();
+    const [recording, setRecording] = useState(false);
+    const [refused, setRefused] = useState(false);
+    const latest = useLatest({ parse, onRecord });
+    const record = (on) => {
+        setRecording(on);
+        setRefused(false);
+    };
+    useEffect(() => {
+        if (!recording)
+            return undefined;
+        // Capture on the window: the press reaches the recorder before any other key handler, wherever
+        // focus is (WebKit doesn't focus a clicked button).
+        const onKeyDown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.repeat || MODIFIER_KEYS.has(event.key))
+                return;
+            if (event.key === "Escape") {
+                setRecording(false);
+                setRefused(false);
+                return;
+            }
+            const shortcut = latest.current.parse(event);
+            if (shortcut === undefined) {
+                setRefused(true);
+                return;
+            }
+            setRecording(false);
+            setRefused(false);
+            latest.current.onRecord(shortcut);
+        };
+        window.addEventListener("keydown", onKeyDown, true);
+        return () => window.removeEventListener("keydown", onKeyDown, true);
+    }, [recording]);
+    const mac = isMacPlatform();
+    // "⌥, ⌘, ⌃ or ⇧" on a Mac, "Alt, Ctrl or Shift" elsewhere, joined the way the language joins them.
+    const modifiers = formatList(needs.modifiers.map((key) => keyGlyph(key, mac, kbd)), locale, "disjunction");
+    const hint = needs.functionKey === true ? t.needsModifierOrFunctionKey({ modifiers }) : t.needsModifier({ modifiers });
+    return (_jsxs("div", { "data-slot": "shortcut-recorder", className: cn("flex flex-col items-end", className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-live": "polite", className: "text-sm text-fg-muted", children: recording ? t.recording : keys === null ? t.off : _jsx(Shortcut, { keys: keys, spoken: true }) }), _jsx(Button, { size: "sm", variant: "secondary", "aria-pressed": recording, onClick: (event) => {
+                            // Focused, so focus leaving it stops the recording (WebKit doesn't focus a clicked button).
+                            event.currentTarget.focus();
+                            record(!recording);
+                        }, onBlur: () => record(false), children: t.change }), !recording && children] }), _jsx("span", { "aria-live": "polite", className: "text-xs text-fg-subtle", children: refused && _jsx("span", { className: "mt-1 block", children: hint }) })] }));
+}

package/dist/components/skeleton.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const skeleton: import("tailwind-variants").TVReturnType<{
+    shape: {
+        rect: "rounded-md";
+        circle: "rounded-full";
+        text: "h-[0.8em] rounded-[0.25em]";
+    };
+}, undefined, string[], {
+    shape: {
+        rect: "rounded-md";
+        circle: "rounded-full";
+        text: "h-[0.8em] rounded-[0.25em]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    shape: {
+        rect: "rounded-md";
+        circle: "rounded-full";
+        text: "h-[0.8em] rounded-[0.25em]";
+    };
+}, undefined>>;
+export interface SkeletonProps extends ComponentProps<"span">, VariantProps<typeof skeleton> {
+    /** Lines of text (implies the text shape); the last one is shorter. */
+    lines?: number;
+}
+/**
+ * Loading placeholder. Size it with classes (`h-8 w-40`, `size-8`). Decorative — mark the loading
+ * region itself with `aria-busy` and announce completion there.
+ */
+export declare function Skeleton({ shape, lines, className, style, ...props }: SkeletonProps): import("react").JSX.Element;
+export {};

package/dist/components/skeleton.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, tv } from "../lib/cn.js";
+const skeleton = tv({
+    base: [
+        // A tint of the ink, not a surface color: it shows on any surface in both themes (in dark mode
+        // a raised card is the same gray as `bg-muted`, so placeholders on it vanished).
+        "block shrink-0 bg-fg/8",
+        // A soft highlight drifts across on the shared shimmer rhythm (2.2s, ease-in-out).
+        "bg-[linear-gradient(100deg,transparent_35%,color-mix(in_oklab,var(--fg)_5%,transparent)_50%,transparent_65%)]",
+        "bg-size-[250%_100%] bg-no-repeat animate-shimmer",
+        "motion-reduce:animate-none motion-reduce:bg-none",
+    ],
+    variants: {
+        shape: {
+            rect: "rounded-md",
+            circle: "rounded-full",
+            text: "h-[0.8em] rounded-[0.25em]",
+        },
+    },
+    defaultVariants: { shape: "rect" },
+});
+/** Width pattern for multi-line text so paragraphs look written, not ruled. */
+const LINE_WIDTHS = ["100%", "94%", "97%", "88%", "92%"];
+/**
+ * Loading placeholder. Size it with classes (`h-8 w-40`, `size-8`). Decorative — mark the loading
+ * region itself with `aria-busy` and announce completion there.
+ */
+export function Skeleton({ shape, lines = 1, className, style, ...props }) {
+    if (lines > 1) {
+        return (_jsx("span", { "data-slot": "skeleton", "aria-hidden": true, className: cn("flex w-full flex-col gap-[0.6em]", className), style: style, ...props, children: Array.from({ length: lines }, (_, i) => i).map((line) => (_jsx("span", { className: skeleton({ shape: "text" }), style: { width: line === lines - 1 ? "62%" : LINE_WIDTHS[line % LINE_WIDTHS.length] } }, line))) }));
+    }
+    return (_jsx("span", { "data-slot": "skeleton", "aria-hidden": true, className: cn(skeleton({ shape }), shape === "text" && "w-full", className), style: style, ...props }));
+}

package/dist/components/slider.d.ts

@@ -0,0 +1,138 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { type ComponentProps, type ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const sliderStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            control: string;
+            track: string;
+            thumb: string;
+        };
+        md: {
+            control: string;
+            track: string;
+            thumb: string;
+        };
+    };
+    tooltip: {
+        never: {
+            bubble: string;
+        };
+        active: {
+            bubble: string[];
+        };
+        always: {
+            bubble: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string[];
+    bubble: string[];
+    tick: string;
+    marks: string;
+}, undefined, {
+    size: {
+        sm: {
+            control: string;
+            track: string;
+            thumb: string;
+        };
+        md: {
+            control: string;
+            track: string;
+            thumb: string;
+        };
+    };
+    tooltip: {
+        never: {
+            bubble: string;
+        };
+        active: {
+            bubble: string[];
+        };
+        always: {
+            bubble: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string[];
+    bubble: string[];
+    tick: string;
+    marks: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            control: string;
+            track: string;
+            thumb: string;
+        };
+        md: {
+            control: string;
+            track: string;
+            thumb: string;
+        };
+    };
+    tooltip: {
+        never: {
+            bubble: string;
+        };
+        active: {
+            bubble: string[];
+        };
+        always: {
+            bubble: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string[];
+    bubble: string[];
+    tick: string;
+    marks: string;
+}>>;
+export interface SliderMark {
+    value: number;
+    /** Text under the track; also announced when the thumb sits on this value. */
+    label?: string;
+}
+export interface SliderProps extends Omit<ComponentProps<typeof BaseSlider.Root>, "children">, VariantProps<typeof sliderStyles> {
+    /** Visible label above the track. */
+    label?: ReactNode;
+    /** Show the formatted value(s) opposite the label. */
+    showValue?: boolean;
+    /** Formats values for the header, tooltip and screen readers. Defaults to `Intl.NumberFormat`. */
+    formatValue?: (value: number) => string;
+    /**
+     * Accessible names per thumb, e.g. `["Minimum", "Maximum"]`. A single thumb is named by the
+     * slider's `aria-label`; a range keeps it on the group.
+     */
+    thumbLabels?: readonly string[];
+    /** Snap points rendered as ticks (and labels) along the track. */
+    marks?: readonly SliderMark[];
+}
+/**
+ * Ink-filled slider. Pass an array value for a range. `tooltip="active"` floats the value over
+ * the thumb while hovered, focused or dragged.
+ */
+export declare function Slider({ size, tooltip, label, showValue, formatValue, thumbLabels, marks, className, "aria-label": ariaLabel, ...props }: SliderProps): import("react").JSX.Element;
+export {};

package/dist/components/slider.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { useMemo } from "react";
+import { useUiLocale } from "../i18n/provider.js";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+const sliderStyles = tv({
+    slots: {
+        root: "flex w-full min-w-0 flex-col gap-2 data-disabled:opacity-45",
+        header: "flex items-baseline justify-between gap-3",
+        label: "text-sm font-medium text-fg select-none",
+        value: "text-sm text-fg-muted tabular",
+        control: "relative flex w-full touch-none select-none items-center data-disabled:pointer-events-none",
+        track: "relative w-full rounded-full bg-border select-none",
+        indicator: "rounded-full bg-primary select-none",
+        thumb: [
+            "group/thumb relative rounded-full border border-border-strong bg-white shadow-sm outline-none select-none",
+            "ring-0 ring-primary/10 dark:ring-white/12",
+            "transition-[box-shadow,scale] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy)",
+            "hover:ring-4 data-dragging:scale-110 data-dragging:ring-4",
+            "has-[:focus-visible]:ring-4 has-[:focus-visible]:ring-focus/45",
+            "motion-reduce:transition-none motion-reduce:data-dragging:scale-100",
+        ],
+        bubble: [
+            "pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-md px-1.5 py-0.5",
+            "bg-gray-12 text-xs font-medium text-gray-1 tabular shadow-md",
+            "origin-bottom transition-[opacity,scale] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy) motion-reduce:transition-none",
+        ],
+        tick: "pointer-events-none absolute top-1/2 size-1 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 rounded-full transition-colors",
+        marks: "relative h-4 w-full text-xs text-fg-subtle select-none",
+    },
+    variants: {
+        size: {
+            sm: { control: "h-5", track: "h-[3px]", thumb: "size-3.5" },
+            md: { control: "h-6", track: "h-1", thumb: "size-4" },
+        },
+        tooltip: {
+            never: { bubble: "hidden" },
+            active: {
+                bubble: [
+                    "scale-90 opacity-0",
+                    "group-hover/thumb:scale-100 group-hover/thumb:opacity-100",
+                    "group-data-dragging/thumb:scale-100 group-data-dragging/thumb:opacity-100",
+                    "group-has-[:focus-visible]/thumb:scale-100 group-has-[:focus-visible]/thumb:opacity-100",
+                ],
+            },
+            always: { bubble: "scale-100 opacity-100" },
+        },
+    },
+    defaultVariants: { size: "md", tooltip: "never" },
+});
+/**
+ * Ink-filled slider. Pass an array value for a range. `tooltip="active"` floats the value over
+ * the thumb while hovered, focused or dragged.
+ */
+export function Slider({ size, tooltip, label, showValue = false, formatValue, thumbLabels, marks, className, "aria-label": ariaLabel, ...props }) {
+    const styles = sliderStyles({ size, tooltip });
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const initial = props.value ?? props.defaultValue;
+    const thumbCount = Array.isArray(initial) ? initial.length : 1;
+    // The provider's locale unless the caller passes one (Base UI formats the value with it too).
+    const uiLocale = useUiLocale();
+    const locale = props.locale ?? uiLocale;
+    // One formatter per locale and options: a slider re-renders on every pointer move while dragging.
+    const numberFormat = useMemo(() => new Intl.NumberFormat(locale, props.format), [locale, props.format]);
+    const format = formatValue ?? ((value) => numberFormat.format(value));
+    const markLabel = (value) => marks?.find((mark) => mark.value === value)?.label;
+    const percent = (value) => ((value - min) / (max - min || 1)) * 100;
+    // The range input is what a screen reader names; the group around it is not.
+    const thumbName = (index) => {
+        const name = thumbLabels?.[index] ?? (thumbCount === 1 ? ariaLabel : undefined);
+        return name === undefined ? {} : { "aria-label": name };
+    };
+    return (_jsxs(BaseSlider.Root, { "data-slot": "slider", className: (state) => styles.root({ className: resolveClassName(className, state) }), ...props, ...(thumbCount > 1 && ariaLabel !== undefined ? { "aria-label": ariaLabel } : {}), locale: locale, children: [(label !== undefined || showValue) && (_jsxs("div", { className: styles.header(), children: [label !== undefined && _jsx(BaseSlider.Label, { className: styles.label(), children: label }), showValue && (_jsx(BaseSlider.Value, { className: cn(styles.value(), "ms-auto"), children: (_formatted, values) => values.map((value) => markLabel(value) ?? format(value)).join(" – ") }))] })), _jsx(BaseSlider.Control, { className: styles.control(), children: _jsxs(BaseSlider.Track, { className: styles.track(), render: (trackProps, state) => {
+                        const low = thumbCount > 1 ? Math.min(...state.values) : min;
+                        const high = Math.max(...state.values);
+                        return (_jsxs("div", { ...trackProps, children: [trackProps.children, marks?.map((mark) => {
+                                    const active = mark.value >= low && mark.value <= high;
+                                    return (_jsx("span", { "aria-hidden": true, className: cn(styles.tick(), active ? "bg-primary-fg/70" : "bg-fg-faint"), style: { insetInlineStart: `${percent(mark.value)}%` } }, mark.value));
+                                })] }));
+                    }, children: [_jsx(BaseSlider.Indicator, { className: styles.indicator() }), Array.from({ length: thumbCount }, (_, index) => (_jsx(BaseSlider.Thumb
+                        // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional by definition.
+                        , { index: index, className: styles.thumb(), getAriaValueText: (formatted, value) => markLabel(value) ?? (formatValue ? format(value) : formatted), ...thumbName(index), render: (thumbProps, state) => {
+                                const value = state.values[index] ?? min;
+                                return (_jsxs("div", { ...thumbProps, children: [thumbProps.children, _jsx("span", { "aria-hidden": true, className: styles.bubble(), children: markLabel(value) ?? format(value) })] }));
+                            } }, index)))] }) }), marks?.some((mark) => mark.label !== undefined) && (_jsx("div", { "aria-hidden": true, className: styles.marks(), children: marks.map((mark) => {
+                    const at = percent(mark.value);
+                    // Pinned inside the track at its ends, centred under the value between them; mirrored
+                    // in a right-to-left layout, where Base UI runs the slider from the right.
+                    const shift = at <= 0
+                        ? "translate-x-0"
+                        : at >= 100
+                            ? "-translate-x-full rtl:translate-x-full"
+                            : "-translate-x-1/2 rtl:translate-x-1/2";
+                    return (_jsx("span", { className: cn("absolute top-0 whitespace-nowrap", shift), style: { insetInlineStart: `${at}%` }, children: mark.label }, mark.value));
+                }) }))] }));
+}

package/dist/components/spinner.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const spinner: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "size-3";
+        sm: "size-3.5";
+        md: "size-4";
+        lg: "size-5";
+        xl: "size-6";
+    };
+}, undefined, "inline-block shrink-0 animate-spin motion-reduce:animate-[spin_2.4s_linear_infinite]", {
+    size: {
+        xs: "size-3";
+        sm: "size-3.5";
+        md: "size-4";
+        lg: "size-5";
+        xl: "size-6";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "size-3";
+        sm: "size-3.5";
+        md: "size-4";
+        lg: "size-5";
+        xl: "size-6";
+    };
+}, undefined>>;
+export interface SpinnerProps extends Omit<ComponentProps<"svg">, "children">, VariantProps<typeof spinner> {
+    /** Accessible label; omit when a surrounding element already announces the busy state. */
+    label?: string;
+}
+/**
+ * Minimal busy indicator: a quarter arc over a faint track, for buttons, inline loads and small
+ * regions. A region that holds placeholders while it loads is a `LoadingRegion`.
+ */
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react").JSX.Element;
+export {};

package/dist/components/spinner.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, tv } from "../lib/cn.js";
+const spinner = tv({
+    base: "inline-block shrink-0 animate-spin motion-reduce:animate-[spin_2.4s_linear_infinite]",
+    variants: {
+        size: { xs: "size-3", sm: "size-3.5", md: "size-4", lg: "size-5", xl: "size-6" },
+    },
+    defaultVariants: { size: "md" },
+});
+/**
+ * Minimal busy indicator: a quarter arc over a faint track, for buttons, inline loads and small
+ * regions. A region that holds placeholders while it loads is a `LoadingRegion`.
+ */
+export function Spinner({ size, label, className, ...props }) {
+    return (_jsxs("svg", { "data-slot": "spinner", viewBox: "0 0 16 16", fill: "none", className: cn(spinner({ size }), className), role: label ? "status" : "img", "aria-label": label, "aria-hidden": label ? undefined : true, ...props, children: [_jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeOpacity: "0.18", strokeWidth: "1.5" }), _jsx("path", { d: "M8 1.75A6.25 6.25 0 0 1 14.25 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+}

package/dist/components/switch.d.ts

@@ -0,0 +1,59 @@
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+export declare const switchStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        /** 16 × 28 — dense rows, menus. */
+        sm: {
+            track: string;
+            thumb: string[];
+        };
+        /** 20 × 36 — settings rows. */
+        md: {
+            track: string;
+            thumb: string[];
+        };
+    };
+}, {
+    track: string[];
+    thumb: string[];
+}, undefined, {
+    size: {
+        /** 16 × 28 — dense rows, menus. */
+        sm: {
+            track: string;
+            thumb: string[];
+        };
+        /** 20 × 36 — settings rows. */
+        md: {
+            track: string;
+            thumb: string[];
+        };
+    };
+}, {
+    track: string[];
+    thumb: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        /** 16 × 28 — dense rows, menus. */
+        sm: {
+            track: string;
+            thumb: string[];
+        };
+        /** 20 × 36 — settings rows. */
+        md: {
+            track: string;
+            thumb: string[];
+        };
+    };
+}, {
+    track: string[];
+    thumb: string[];
+}>>;
+export interface SwitchProps extends Omit<ComponentProps<typeof BaseSwitch.Root>, "children">, VariantProps<typeof switchStyles> {
+    /** Visible label to the right of the switch. For settings rows prefer <Field orientation="horizontal">. */
+    label?: ReactNode;
+    description?: ReactNode;
+}
+/** Ink toggle with a springy thumb that stretches while pressed. */
+export declare function Switch({ size, label, description, className, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/switch.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+const spring = "duration-(--duration-spring-snappy) ease-(--ease-spring-snappy) motion-reduce:transition-none";
+export const switchStyles = tv({
+    slots: {
+        track: [
+            "group/switch relative inline-flex shrink-0 items-center rounded-full p-0.5 outline-none touch-target",
+            "bg-border-strong [box-shadow:inset_0_1px_1px_var(--shadow-1)]",
+            `transition-[background-color,box-shadow] ${spring}`,
+            "hover:bg-fg-faint/80 focus-visible:ring-focus",
+            "data-checked:bg-primary data-checked:hover:bg-primary-hover",
+            "data-invalid:data-unchecked:[box-shadow:inset_0_0_0_1px_var(--danger-border)]",
+            "data-disabled:pointer-events-none data-disabled:opacity-45 data-readonly:pointer-events-none",
+        ],
+        // The thumb starts at the track's start edge and slides toward its end: right in a left-to-right
+        // language, left in a right-to-left one.
+        thumb: [
+            "pointer-events-none block rounded-full bg-white shadow-sm dark:bg-gray-11",
+            "data-checked:bg-primary-fg",
+            `transition-[translate,scale,background-color] ${spring}`,
+        ],
+    },
+    variants: {
+        size: {
+            /** 16 × 28 — dense rows, menus. */
+            sm: {
+                track: "h-4 w-7",
+                thumb: [
+                    "h-3 w-3 data-checked:translate-x-3 rtl:data-checked:-translate-x-3",
+                    "group-active/switch:scale-x-115",
+                ],
+            },
+            /** 20 × 36 — settings rows. */
+            md: {
+                track: "h-5 w-9",
+                thumb: [
+                    "h-4 w-4 data-checked:translate-x-4 rtl:data-checked:-translate-x-4",
+                    "group-active/switch:scale-x-115",
+                ],
+            },
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/** Ink toggle with a springy thumb that stretches while pressed. */
+export function Switch({ size, label, description, className, ...props }) {
+    const styles = switchStyles({ size });
+    const control = (_jsx(BaseSwitch.Root, { "data-slot": "switch", className: (state) => styles.track({
+            className: cn((label !== undefined || description !== undefined) && (size === "sm" ? "mt-[3px]" : "mt-px"), resolveClassName(className, state)),
+        }), ...props, children: _jsx(BaseSwitch.Thumb, { className: styles.thumb() }) }));
+    if (label === undefined && description === undefined)
+        return control;
+    return (_jsxs("label", { "data-slot": "switch-label", className: "inline-flex max-w-full cursor-default select-none items-start gap-2.5 has-data-disabled:opacity-45", children: [control, _jsxs("span", { className: "flex min-w-0 flex-col", children: [label !== undefined && _jsx("span", { className: "text-base text-fg", children: label }), description !== undefined && _jsx("span", { className: "text-sm text-fg-subtle", children: description })] })] }));
+}

package/dist/components/tab-strip.d.ts

@@ -0,0 +1,29 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import type { ComponentProps, ReactNode } from "react";
+export interface TabStripProps {
+    /** The selected tab's value; `null` when none is. */
+    readonly value: string | null;
+    readonly onValueChange: (value: string) => void;
+    /** The strip's name for assistive technology ("Terminals", "Browser tabs"). */
+    readonly "aria-label": string;
+    readonly className?: string | undefined;
+    readonly children: ReactNode;
+}
+/**
+ * Document tabs over one view: the browser pane's pages, the terminals, the side pane's kinds. Base
+ * UI Tabs give every strip one keyboard model: Tab reaches the selected tab, the arrow keys (and Home
+ * and End) move between tabs, Enter or Space selects one. There are no panels: the caller shows the
+ * selected tab's view. Tabs may close (`TabStripTab` `onClose`) and carry their own handlers (rename
+ * on F2 or a double click).
+ */
+export declare function TabStrip({ value, onValueChange, className, children, ...props }: TabStripProps): import("react").JSX.Element;
+export interface TabStripTabProps extends Omit<ComponentProps<typeof BaseTabs.Tab>, "value" | "render" | "nativeButton" | "className"> {
+    readonly value: string;
+    /** Closes the tab: its ×, Delete or Backspace while the tab has focus, and a middle click. */
+    readonly onClose?: (() => void) | undefined;
+    /** What the × does, as its tooltip ("Close Terminal 2"). */
+    readonly closeLabel?: string | undefined;
+    readonly className?: string | undefined;
+}
+/** One tab: what the caller puts in it (an icon and a label, or a rename field), then its × button. */
+export declare function TabStripTab({ onClose, closeLabel, className, children, onKeyDown, onAuxClick, ...props }: TabStripTabProps): import("react").JSX.Element;

package/dist/components/tab-strip.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+/**
+ * Document tabs over one view: the browser pane's pages, the terminals, the side pane's kinds. Base
+ * UI Tabs give every strip one keyboard model: Tab reaches the selected tab, the arrow keys (and Home
+ * and End) move between tabs, Enter or Space selects one. There are no panels: the caller shows the
+ * selected tab's view. Tabs may close (`TabStripTab` `onClose`) and carry their own handlers (rename
+ * on F2 or a double click).
+ */
+export function TabStrip({ value, onValueChange, className, children, ...props }) {
+    return (_jsx(BaseTabs.Root, { "data-slot": "tab-strip", value: value, onValueChange: (next) => {
+            if (typeof next === "string")
+                onValueChange(next);
+        }, className: cn("flex min-w-0", className), children: _jsx(BaseTabs.List, { "aria-label": props["aria-label"], className: "flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto scrollbar-none", children: children }) }));
+}
+/** One tab: what the caller puts in it (an icon and a label, or a rename field), then its × button. */
+export function TabStripTab({ onClose, closeLabel, className, children, onKeyDown, onAuxClick, ...props }) {
+    return (_jsxs(BaseTabs.Tab, { "data-slot": "tab-strip-tab", nativeButton: false, 
+        // A div: the tab holds its own × target.
+        render: _jsx("div", {}), onKeyDown: (event) => {
+            if (onClose !== undefined &&
+                event.target === event.currentTarget &&
+                (event.key === "Delete" || event.key === "Backspace")) {
+                event.preventDefault();
+                onClose();
+                return;
+            }
+            onKeyDown?.(event);
+        }, ...(onClose === undefined ? {} : { "aria-keyshortcuts": "Delete" }), onAuxClick: (event) => {
+            if (onClose !== undefined && event.button === 1) {
+                event.preventDefault();
+                onClose();
+            }
+            onAuxClick?.(event);
+        }, className: cn("group/tab relative flex h-7 shrink-0 cursor-default select-none items-center gap-1.5 rounded-md ps-2 text-sm outline-none", "text-fg-subtle transition-colors duration-(--duration-fast) hover:bg-hover hover:text-fg focus-visible:ring-focus", "data-active:bg-selected data-active:text-fg [&>svg]:size-3.5 [&>svg]:shrink-0", onClose === undefined ? "pe-2" : "pe-1", className), ...props, children: [children, onClose !== undefined && (_jsx("span", { "aria-hidden": true, "data-slot": "tab-strip-close", title: closeLabel, onClick: (event) => {
+                    event.stopPropagation();
+                    onClose();
+                }, className: cn("grid size-5 shrink-0 place-items-center rounded-sm text-fg-subtle hover:bg-hover hover:text-fg", "opacity-0 transition-opacity duration-(--duration-fast) group-hover/tab:opacity-100 group-data-active/tab:opacity-100"), children: _jsx(X, { className: "size-3" }) }))] }));
+}

package/dist/components/tabs.d.ts

@@ -0,0 +1,13 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { type ComponentProps } from "react";
+export type TabsVariant = "underline" | "pill";
+export interface TabsProps extends ComponentProps<typeof BaseTabs.Root> {
+    variant?: TabsVariant;
+}
+/** Root. `variant` styles every List/Tab inside it. */
+export declare function Tabs({ variant, className, ...props }: TabsProps): import("react").JSX.Element;
+/** The strip of tabs. Renders the sliding indicator automatically. */
+export declare function TabsList({ className, children, ...props }: ComponentProps<typeof BaseTabs.List>): import("react").JSX.Element;
+export declare function TabsTab({ className, ...props }: ComponentProps<typeof BaseTabs.Tab>): import("react").JSX.Element;
+/** Content for one tab; fades and rises in when it becomes active. */
+export declare function TabsPanel({ className, ...props }: ComponentProps<typeof BaseTabs.Panel>): import("react").JSX.Element;