@gouno/ui 0.3.2

package/dist/core/select.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentLocale } from "./config-provider.js";
+import * as React from "react";
+import { Check, ChevronDown, X } from "lucide-react";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../components/primitives/popover.js";
+import { cn } from "../lib/utils.js";
+import { controlSizeClass } from "./control-types.js";
+function readOptions(children) {
+    const options = [];
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        const childProps = child.props;
+        if (child.type === React.Fragment) {
+            options.push(...readOptions(childProps.children));
+            return;
+        }
+        if (typeof child.type === "string" && child.type === "option") {
+            options.push({ value: String(childProps.value ?? childProps.children ?? ""), label: childProps.children, disabled: childProps.disabled });
+            return;
+        }
+        if (typeof child.type === "string" && child.type === "optgroup")
+            options.push(...readOptions(childProps.children));
+    });
+    return options;
+}
+export const Select = React.forwardRef(function Select({ locale, size = "middle", status, loading = false, placeholder, allowClear = false, onClear, mode = "single", showSearch = false, optionFilterProp = "label", maxTagCount, value, defaultValue, onChange, onSearch, name, id, required, disabled, children, className, ...props }, ref) {
+    const text = useComponentLocale("select", locale);
+    const generatedId = React.useId();
+    const baseId = id ?? `select-${generatedId}`;
+    const listboxId = `${baseId}-listbox`;
+    const searchRef = React.useRef(null);
+    const searchable = showSearch || mode === "tags";
+    const options = React.useMemo(() => readOptions(children), [children]);
+    const selectRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const initial = defaultValue === undefined ? (mode === "single" ? "" : []) : defaultValue;
+    const [innerValue, setInnerValue] = React.useState(initial);
+    const [open, setOpen] = React.useState(false);
+    const [search, setSearch] = React.useState("");
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    React.useImperativeHandle(ref, () => selectRef.current);
+    const selected = value === undefined ? innerValue : value;
+    const selectedValues = Array.isArray(selected) ? [...selected] : selected ? [selected] : [];
+    const selectedOptions = selectedValues.map((item) => options.find((option) => option.value === item) ?? { value: item, label: item });
+    const filteredOptions = options.filter((option) => {
+        if (!search)
+            return true;
+        const target = optionFilterProp === "value" ? option.value : String(option.label ?? "");
+        return target.toLowerCase().includes(search.toLowerCase());
+    });
+    React.useEffect(() => {
+        setActiveIndex((current) => Math.min(current, Math.max(0, filteredOptions.length - 1)));
+    }, [search, filteredOptions.length]);
+    const moveActive = (direction) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex((current) => {
+            for (let offset = 1; offset <= filteredOptions.length; offset += 1) {
+                const next = (current + direction * offset + filteredOptions.length) % filteredOptions.length;
+                if (!filteredOptions[next].disabled)
+                    return next;
+            }
+            return current;
+        });
+    };
+    const multi = mode !== "single";
+    const commit = (next, option) => { if (value === undefined)
+        setInnerValue(next); onChange?.(next, option); };
+    const choose = (option) => {
+        if (option.disabled || loading || disabled)
+            return;
+        if (multi) {
+            const next = selectedValues.includes(option.value) ? selectedValues.filter((item) => item !== option.value) : [...selectedValues, option.value];
+            commit(next, next.map((item) => options.find((entry) => entry.value === item) ?? { value: item, label: item }));
+            if (mode === "multiple")
+                setSearch("");
+            return;
+        }
+        commit(option.value, option);
+        setOpen(false);
+        setSearch("");
+    };
+    const clear = () => { if (disabled || loading)
+        return; commit(multi ? [] : "", []); onClear?.(); setSearch(""); setOpen(false); triggerRef.current?.focus(); };
+    const addTag = () => { const trimmed = search.trim(); if (!trimmed || selectedValues.includes(trimmed))
+        return; const option = { value: trimmed, label: trimmed }; commit([...selectedValues, trimmed], [...selectedOptions, option]); setSearch(""); };
+    const hasValue = selectedValues.length > 0;
+    const canClear = allowClear && hasValue && !disabled && !loading;
+    const display = multi ? null : selectedOptions[0]?.label;
+    const hiddenValue = multi ? selectedValues : selectedValues[0] ?? "";
+    const activeOptionId = open && filteredOptions[activeIndex] ? `${baseId}-option-${activeIndex}` : undefined;
+    const remove = (option) => {
+        if (disabled || loading || option.disabled)
+            return;
+        commit(selectedValues.filter((item) => item !== option.value), selectedOptions.filter((item) => item.value !== option.value));
+        triggerRef.current?.focus();
+    };
+    const selectActive = () => { const option = filteredOptions[activeIndex]; if (option)
+        choose(option); };
+    const resolvedPlaceholder = placeholder ?? text.placeholder;
+    return _jsxs("div", { className: "relative min-w-0", "data-slot": "select", children: [_jsxs("select", { ...props, id: id, name: name, required: required, disabled: disabled || loading, multiple: multi, value: hiddenValue, onChange: () => undefined, ref: selectRef, "aria-hidden": "true", tabIndex: -1, className: "pointer-events-none absolute inset-0 h-full w-full opacity-0", children: [children, selectedValues.filter((item) => !options.some((option) => option.value === item)).map((item) => _jsx("option", { value: item, children: item }, item))] }), _jsxs(Popover, { open: open, onOpenChange: (next) => { if (!disabled && !loading)
+                    setOpen(next); }, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { "data-slot": "select-control", className: cn("flex w-full min-w-0 items-center gap-2 rounded-md border border-border bg-input px-3 text-foreground focus-within:ring-2 focus-within:ring-ring", controlSizeClass(size), multi && "h-auto min-h-9 py-1", status === "error" && "border-destructive focus-within:ring-destructive", status === "warning" && "border-warning focus-within:ring-warning", (disabled || loading) && "cursor-not-allowed opacity-50", className), children: [multi && hasValue ? _jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap gap-1", "data-slot": "select-tags", children: [selectedOptions.slice(0, maxTagCount).map((option) => _jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-xs", children: [_jsx("span", { className: "truncate", children: option.label }), _jsx("button", { type: "button", disabled: disabled || loading || option.disabled, "aria-label": text.removeLabel(typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value), className: "shrink-0 rounded outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none", onClick: () => remove(option), children: _jsx(X, { "aria-hidden": "true", className: "size-3" }) })] }, option.value)), maxTagCount !== undefined && selectedOptions.length > maxTagCount ? _jsxs("span", { className: "text-xs text-muted-foreground", children: ["+", selectedOptions.length - maxTagCount] }) : null] }) : null, _jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { ref: triggerRef, type: "button", id: `${baseId}-trigger`, role: "combobox", "aria-haspopup": "listbox", "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": props["aria-describedby"], "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": !searchable ? activeOptionId : undefined, "aria-invalid": status === "error" || props["aria-invalid"] || undefined, "aria-busy": loading || undefined, disabled: disabled || loading, onKeyDown: (event) => {
+                                            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                                                event.preventDefault();
+                                                if (!open)
+                                                    setOpen(true);
+                                                else
+                                                    moveActive(event.key === "ArrowDown" ? 1 : -1);
+                                            }
+                                            else if (event.key === "Enter" || event.key === " ") {
+                                                event.preventDefault();
+                                                if (open)
+                                                    selectActive();
+                                                else
+                                                    setOpen(true);
+                                            }
+                                            else if (event.key === "Escape" && open) {
+                                                event.preventDefault();
+                                                setOpen(false);
+                                            }
+                                        }, className: cn("flex min-w-0 items-center gap-2 self-stretch text-left outline-none disabled:cursor-not-allowed", multi && hasValue ? "shrink-0" : "flex-1"), children: [_jsx("span", { className: cn("min-w-0 flex-1 truncate", !hasValue && "text-muted-foreground", multi && hasValue && "sr-only"), children: multi && hasValue ? selectedOptions.map((option) => typeof option.label === "string" ? option.label : option.value).join(", ") : display ?? resolvedPlaceholder }), _jsx(ChevronDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })] }) }), canClear ? _jsx("button", { type: "button", "aria-label": text.clearLabel, className: "flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring", onClick: clear, children: _jsx(X, { "aria-hidden": "true", className: "size-3.5" }) }) : null] }) }), _jsxs(PopoverContent, { role: "presentation", placement: "bottom-start", className: "w-[var(--radix-popover-trigger-width)] min-w-48 p-1", onOpenAutoFocus: (event) => { event.preventDefault(); if (searchable)
+                            searchRef.current?.focus();
+                        else
+                            triggerRef.current?.focus(); }, onCloseAutoFocus: (event) => { event.preventDefault(); triggerRef.current?.focus(); }, children: [searchable ? _jsx("div", { className: "p-1", children: _jsx("input", { ref: searchRef, role: "combobox", "aria-autocomplete": "list", "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": activeOptionId, value: search, onChange: (event) => { setSearch(event.target.value); setActiveIndex(0); onSearch?.(event.target.value); }, onKeyDown: (event) => {
+                                        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                                            event.preventDefault();
+                                            moveActive(event.key === "ArrowDown" ? 1 : -1);
+                                        }
+                                        else if (event.key === "Enter") {
+                                            event.preventDefault();
+                                            if (mode === "tags" && search.trim() && !filteredOptions.length)
+                                                addTag();
+                                            else
+                                                selectActive();
+                                        }
+                                        else if (event.key === "Escape") {
+                                            event.preventDefault();
+                                            setOpen(false);
+                                        }
+                                    }, placeholder: text.searchPlaceholder, "aria-label": text.searchLabel, className: "h-8 w-full rounded border border-border bg-input px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" }) }) : null, _jsx("div", { id: listboxId, role: "listbox", "aria-label": props["aria-label"] ?? text.searchLabel, "aria-labelledby": props["aria-labelledby"], "aria-multiselectable": multi || undefined, className: "max-h-60 overflow-y-auto", "data-slot": "select-list", children: filteredOptions.map((option, optionIndex) => { const checked = selectedValues.includes(option.value); const active = optionIndex === activeIndex; return _jsxs("div", { id: `${baseId}-option-${optionIndex}`, role: "option", "aria-selected": checked, "aria-disabled": option.disabled || undefined, onMouseDown: (event) => event.preventDefault(), onMouseEnter: () => { if (!option.disabled)
+                                        setActiveIndex(optionIndex); }, onClick: () => choose(option), className: cn("flex w-full cursor-default items-center gap-2 rounded px-2 py-1.5 text-left text-sm", !option.disabled && "hover:bg-accent", option.disabled && "opacity-50", active && "bg-accent", checked && "bg-accent/60"), children: [multi ? _jsx("span", { className: cn("flex size-4 items-center justify-center rounded border", checked && "border-primary bg-primary text-primary-foreground"), children: checked ? _jsx(Check, { "aria-hidden": "true", className: "size-3" }) : null }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label })] }, option.value); }) }), filteredOptions.length === 0 ? _jsx("div", { role: "status", className: "px-2 py-3 text-center text-sm text-muted-foreground", children: text.emptyText }) : null] })] })] });
+});

package/dist/core/selection-controls.d.ts

@@ -0,0 +1,12 @@
+import { type InputHTMLAttributes, type LabelHTMLAttributes, type ReactNode } from "react";
+export type CheckProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    label?: ReactNode;
+};
+export declare const Checkbox: (props: CheckProps) => import("react").JSX.Element;
+export declare const Radio: (props: CheckProps) => import("react").JSX.Element;
+export declare function Switch({ label, id, className, ...props }: CheckProps): import("react").JSX.Element;
+export declare const CheckboxField: import("react").ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLLabelElement>>;
+export declare function CheckboxGroup({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/core/selection-controls.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { FieldGroup, FieldLegend, FieldSet } from "../components/primitives/field.js";
+import { cn } from "../lib/utils.js";
+function CheckControl({ label, id, kind, className, ...props }) {
+    const generated = useId();
+    const controlId = id || generated;
+    const control = _jsx("input", { ...props, id: controlId, type: kind, className: cn("size-4 shrink-0 accent-primary disabled:opacity-50", className) });
+    return label ? _jsxs("label", { htmlFor: controlId, className: "flex items-center gap-2 text-sm", children: [control, _jsx("span", { children: label })] }) : control;
+}
+export const Checkbox = (props) => _jsx(CheckControl, { ...props, kind: "checkbox" });
+export const Radio = (props) => _jsx(CheckControl, { ...props, kind: "radio" });
+export function Switch({ label, id, className, ...props }) {
+    const generated = useId();
+    const controlId = id || generated;
+    return _jsxs("label", { className: cn("flex items-center gap-3", className), htmlFor: controlId, children: [_jsx("input", { ...props, id: controlId, type: "checkbox", role: "switch", className: "peer sr-only" }), _jsx("span", { className: "flex h-6 w-10 shrink-0 items-center rounded-full border border-border bg-secondary p-0.5 peer-checked:justify-end peer-checked:bg-primary peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ring peer-disabled:opacity-50", children: _jsx("span", { className: "size-4 rounded-full bg-background" }) }), label ? _jsx("span", { children: label }) : null] });
+}
+export const CheckboxField = forwardRef(function CheckboxField({ children, className, ...props }, ref) {
+    return (_jsx("label", { ...props, ref: ref, "data-slot": "checkbox-field", className: cn("flex items-center gap-2", className), children: children }));
+});
+export function CheckboxGroup({ label, children }) {
+    return _jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: label }), _jsx(FieldGroup, { className: "flex-row flex-wrap gap-4", children: children })] });
+}

package/dist/core/separator.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorVariant = "solid" | "dashed" | "dotted";
+export type SeparatorTitlePlacement = "start" | "center" | "end";
+export type SeparatorSemantic = "root" | "line" | "content";
+export type SeparatorClassNames = Partial<Record<SeparatorSemantic, string>>;
+export type SeparatorStyles = Partial<Record<SeparatorSemantic, CSSProperties>>;
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    /** Separator axis. */
+    orientation?: SeparatorOrientation;
+    /** Remove separator semantics when the line is purely visual. */
+    decorative?: boolean;
+    /** Line style. */
+    variant?: SeparatorVariant;
+    /** Optional horizontal title/content. Vertical separators remain line-only. */
+    children?: ReactNode;
+    /** Horizontal title placement when children are present. */
+    titlePlacement?: SeparatorTitlePlacement;
+    /** Semantic slot class overrides. */
+    classNames?: SeparatorClassNames;
+    /** Semantic slot style overrides. */
+    styles?: SeparatorStyles;
+}
+export declare const Separator: import("react").ForwardRefExoticComponent<SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/core/separator.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/utils.js";
+function lineClass(orientation, variant) {
+    if (orientation === "vertical") {
+        return cn("h-full min-h-4 w-0 shrink-0", variant === "solid" && "border-l border-solid border-border", variant === "dashed" && "border-l border-dashed border-border", variant === "dotted" && "border-l border-dotted border-border");
+    }
+    return cn("h-0 min-w-0 border-t border-border", variant === "solid" && "border-solid", variant === "dashed" && "border-dashed", variant === "dotted" && "border-dotted");
+}
+export const Separator = forwardRef(function Separator({ orientation = "horizontal", decorative = true, variant = "solid", children, titlePlacement = "center", className, classNames, style, styles, role, ...props }, ref) {
+    const hasContent = orientation === "horizontal" && children !== undefined && children !== null;
+    const semanticRole = role ?? (decorative ? "presentation" : "separator");
+    if (!hasContent) {
+        return (_jsx("div", { ...props, ref: ref, role: semanticRole, "aria-orientation": !decorative ? orientation : undefined, "data-slot": "separator", "data-orientation": orientation, "data-variant": variant, className: cn(orientation === "vertical" ? "inline-flex self-stretch" : "flex w-full items-center", classNames?.root, className), style: { ...styles?.root, ...style }, children: _jsx("span", { "aria-hidden": "true", "data-slot": "separator-line", className: cn(lineClass(orientation, variant), orientation === "horizontal" ? "w-full" : undefined, classNames?.line), style: styles?.line }) }));
+    }
+    return (_jsxs("div", { ...props, ref: ref, role: semanticRole, "aria-orientation": !decorative ? "horizontal" : undefined, "data-slot": "separator", "data-orientation": "horizontal", "data-variant": variant, "data-title-placement": titlePlacement, className: cn("flex w-full items-center gap-3", classNames?.root, className), style: { ...styles?.root, ...style }, children: [_jsx("span", { "aria-hidden": "true", "data-slot": "separator-line", className: cn(lineClass("horizontal", variant), titlePlacement === "center" && "flex-1", titlePlacement === "start" && "basis-[5%]", titlePlacement === "end" && "flex-1", classNames?.line), style: styles?.line }), _jsx("span", { "data-slot": "separator-content", className: cn("shrink-0 text-sm text-muted-foreground", classNames?.content), style: styles?.content, children: children }), _jsx("span", { "aria-hidden": "true", "data-slot": "separator-line", className: cn(lineClass("horizontal", variant), titlePlacement === "center" && "flex-1", titlePlacement === "start" && "flex-1", titlePlacement === "end" && "basis-[5%]", classNames?.line), style: styles?.line })] }));
+});

package/dist/core/slider.d.ts

@@ -0,0 +1,2 @@
+import { type InputHTMLAttributes } from "react";
+export declare const Slider: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/core/slider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils.js";
+export const Slider = forwardRef(function Slider({ className, value, defaultValue, min = 0, max = 100, step = 1, ...props }, ref) {
+    return (_jsx("input", { ...props, ref: ref, "data-slot": "slider", type: "range", value: value, defaultValue: defaultValue, min: min, max: max, step: step, className: cn("h-2 w-full cursor-pointer accent-primary outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className) }));
+});

package/dist/core/spin.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface SpinProps extends Omit<HTMLAttributes<HTMLDivElement>, "aria-busy" | "children"> {
+    spinning?: boolean;
+    tip?: ReactNode;
+    children?: ReactNode;
+}
+export declare const Spin: import("react").ForwardRefExoticComponent<SpinProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/core/spin.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/utils.js";
+import { Spinner } from "./spinner.js";
+export const Spin = forwardRef(function Spin({ spinning = true, tip, children, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, "data-slot": "spin", "aria-busy": spinning || undefined, className: cn("relative", className), children: [children, spinning ? (_jsxs("div", { "data-slot": "spin-overlay", className: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background/70", children: [_jsx(Spinner, { className: "size-5 text-primary" }), tip ? (_jsx("span", { "data-slot": "spin-tip", className: "text-sm text-muted-foreground", children: tip })) : null] })) : null] }));
+});

package/dist/core/spinner.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from "react";
+export type SpinnerProps = HTMLAttributes<HTMLSpanElement>;
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/core/spinner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/utils.js";
+export const Spinner = forwardRef(function Spinner({ className, "aria-hidden": ariaHidden = true, ...props }, ref) {
+    return (_jsx("span", { ...props, ref: ref, "aria-hidden": ariaHidden, "data-slot": "spinner", className: cn("inline-block size-4 animate-spin rounded-full border-2 border-current border-r-transparent", className) }));
+});

package/dist/core/splitter.d.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type SplitterOrientation = "horizontal" | "vertical";
+export interface SplitterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children?: ReactNode;
+    /** Initial panel share in percent when Splitter.defaultSizes is not provided. */
+    defaultSize?: number;
+    /** Minimum panel share in percent while resizing. */
+    min?: number;
+    /** Maximum panel share in percent while resizing. */
+    max?: number;
+    /** Disables both adjacent resize handles when false. */
+    resizable?: boolean;
+}
+export declare const SplitterPanel: import("react").ForwardRefExoticComponent<SplitterPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onResize"> {
+    /** Canonical compound content. Direct children should be SplitterPanel. */
+    children?: ReactNode;
+    orientation?: SplitterOrientation;
+    /** Controlled panel shares. Values are normalized to a 100 percent total. */
+    sizes?: readonly number[];
+    /** Uncontrolled initial panel shares. Values are normalized to a 100 percent total. */
+    defaultSizes?: readonly number[];
+    /** Canonical full-size-vector change callback. */
+    onSizesChange?: (sizes: readonly number[]) => void;
+    onResizeStart?: (sizes: readonly number[]) => void;
+    onResizeEnd?: (sizes: readonly number[]) => void;
+    /** Keyboard resize increment in percentage points. Shift multiplies it by five. */
+    step?: number;
+    /** @deprecated Prefer SplitterPanel children. */
+    first?: ReactNode;
+    /** @deprecated Prefer SplitterPanel children. */
+    second?: ReactNode;
+    /** @deprecated Prefer defaultSizes or SplitterPanel.defaultSize. */
+    defaultSize?: number;
+    /** @deprecated Prefer SplitterPanel.min. Applies to the legacy first panel. */
+    min?: number;
+    /** @deprecated Prefer SplitterPanel.max. Applies to the legacy first panel. */
+    max?: number;
+    /** @deprecated Use onSizesChange. Retained with the original first-panel number contract. */
+    onResize?: (size: number) => void;
+}
+export declare const Splitter: import("react").ForwardRefExoticComponent<SplitterProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Panel: import("react").ForwardRefExoticComponent<SplitterPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/core/splitter.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, cloneElement, forwardRef, isValidElement, useRef, useState, } from "react";
+import { cn } from "../lib/utils.js";
+export const SplitterPanel = forwardRef(function SplitterPanel({ defaultSize: _defaultSize, min: _min, max: _max, resizable = true, className, ...props }, ref) {
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "splitter-panel", "data-resizable": resizable || undefined, className: cn("min-h-0 min-w-0 overflow-auto", className) }));
+});
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function finitePercent(value, fallback) {
+    return value !== undefined && Number.isFinite(value)
+        ? clamp(value, 0, 100)
+        : fallback;
+}
+function equalSizes(count) {
+    if (count <= 0)
+        return [];
+    return Array.from({ length: count }, () => 100 / count);
+}
+function normalizeSizes(values, count) {
+    if (!values || values.length !== count)
+        return equalSizes(count);
+    const sanitized = values.map((value) => Number.isFinite(value) ? Math.max(0, value) : 0);
+    const total = sanitized.reduce((sum, value) => sum + value, 0);
+    if (total <= 0)
+        return equalSizes(count);
+    return sanitized.map((value) => (value / total) * 100);
+}
+function initialPanelSizes(panels, defaultSizes, legacyDefaultSize) {
+    if (defaultSizes)
+        return normalizeSizes(defaultSizes, panels.length);
+    if (legacyDefaultSize !== undefined && panels.length === 2) {
+        const first = finitePercent(legacyDefaultSize, 50);
+        return normalizeSizes([first, 100 - first], 2);
+    }
+    const declared = panels.map((panel) => panel.props.defaultSize);
+    if (!declared.some((value) => value !== undefined))
+        return equalSizes(panels.length);
+    const specifiedTotal = declared.reduce((sum, value) => sum + (value === undefined ? 0 : finitePercent(value, 0)), 0);
+    const unspecifiedCount = declared.filter((value) => value === undefined).length;
+    const remaining = Math.max(0, 100 - specifiedTotal);
+    const fallback = unspecifiedCount > 0 ? remaining / unspecifiedCount : 0;
+    return normalizeSizes(declared.map((value) => value === undefined ? fallback : finitePercent(value, 0)), panels.length);
+}
+function panelConfig(panel) {
+    const min = finitePercent(panel.props.min, 0);
+    const max = Math.max(min, finitePercent(panel.props.max, 100));
+    return {
+        min,
+        max,
+        resizable: panel.props.resizable !== false,
+        defaultSize: panel.props.defaultSize,
+    };
+}
+function assignRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+const SplitterRoot = forwardRef(function Splitter({ children, orientation = "horizontal", sizes, defaultSizes, onSizesChange, onResizeStart, onResizeEnd, step = 1, first, second, defaultSize, min, max, onResize, className, ...props }, forwardedRef) {
+    const childPanels = Children.toArray(children).filter((child) => isValidElement(child) && child.type === SplitterPanel);
+    const legacyMode = childPanels.length === 0 && (first !== undefined || second !== undefined);
+    const panels = legacyMode
+        ? [
+            _jsx(SplitterPanel, { min: min, max: max, children: first }, "legacy-first"),
+            _jsx(SplitterPanel, { children: second }, "legacy-second"),
+        ]
+        : childPanels;
+    const initial = initialPanelSizes(panels, defaultSizes, defaultSize);
+    const [internalSizes, setInternalSizes] = useState(initial);
+    const resolvedSizes = sizes
+        ? normalizeSizes(sizes, panels.length)
+        : internalSizes.length === panels.length
+            ? internalSizes
+            : initial;
+    const panelConfigs = panels.map(panelConfig);
+    const rootRef = useRef(null);
+    const currentSizesRef = useRef(resolvedSizes);
+    const proposedSizesRef = useRef(resolvedSizes);
+    const dragRef = useRef(null);
+    currentSizesRef.current = resolvedSizes;
+    if (!dragRef.current)
+        proposedSizesRef.current = resolvedSizes;
+    const vertical = orientation === "vertical";
+    const keyboardStep = Number.isFinite(step) ? Math.max(0.1, step) : 1;
+    const pairBounds = (index, source = currentSizesRef.current) => {
+        const pairTotal = source[index] + source[index + 1];
+        const left = panelConfigs[index];
+        const right = panelConfigs[index + 1];
+        return {
+            pairTotal,
+            minLeft: Math.max(left.min, pairTotal - right.max),
+            maxLeft: Math.min(left.max, pairTotal - right.min),
+        };
+    };
+    const commitResize = (index, requestedLeft, source) => {
+        const { pairTotal, minLeft, maxLeft } = pairBounds(index, source);
+        const nextLeft = clamp(requestedLeft, minLeft, maxLeft);
+        const next = [...source];
+        next[index] = nextLeft;
+        next[index + 1] = pairTotal - nextLeft;
+        proposedSizesRef.current = next;
+        if (!sizes) {
+            currentSizesRef.current = next;
+            setInternalSizes(next);
+        }
+        onSizesChange?.(next);
+        if (legacyMode)
+            onResize?.(next[0] ?? 0);
+        return next;
+    };
+    const canResize = (index) => panelConfigs[index]?.resizable !== false &&
+        panelConfigs[index + 1]?.resizable !== false;
+    const handlePointerDown = (index, event) => {
+        if (!canResize(index) || !rootRef.current)
+            return;
+        const startSizes = [...currentSizesRef.current];
+        dragRef.current = {
+            index,
+            startCoordinate: vertical ? event.clientY : event.clientX,
+            startSizes,
+        };
+        proposedSizesRef.current = startSizes;
+        if (typeof event.currentTarget.setPointerCapture === "function") {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        onResizeStart?.(startSizes);
+    };
+    const handlePointerMove = (index, event) => {
+        const drag = dragRef.current;
+        const root = rootRef.current;
+        if (!drag || drag.index !== index || !root)
+            return;
+        const rect = root.getBoundingClientRect();
+        const axisLength = vertical ? rect.height : rect.width;
+        if (axisLength <= 0)
+            return;
+        const coordinate = vertical ? event.clientY : event.clientX;
+        const delta = ((coordinate - drag.startCoordinate) / axisLength) * 100;
+        commitResize(index, drag.startSizes[index] + delta, drag.startSizes);
+    };
+    const finishPointerResize = (index, event) => {
+        const drag = dragRef.current;
+        if (!drag || drag.index !== index)
+            return;
+        if (typeof event.currentTarget.hasPointerCapture === "function" &&
+            event.currentTarget.hasPointerCapture(event.pointerId) &&
+            typeof event.currentTarget.releasePointerCapture === "function") {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        dragRef.current = null;
+        onResizeEnd?.([...proposedSizesRef.current]);
+    };
+    const handleKeyDown = (index, event) => {
+        if (!canResize(index))
+            return;
+        const direction = vertical
+            ? event.key === "ArrowDown"
+                ? 1
+                : event.key === "ArrowUp"
+                    ? -1
+                    : 0
+            : event.key === "ArrowRight"
+                ? 1
+                : event.key === "ArrowLeft"
+                    ? -1
+                    : 0;
+        const isBoundaryKey = event.key === "Home" || event.key === "End";
+        if (direction === 0 && !isBoundaryKey)
+            return;
+        event.preventDefault();
+        const startSizes = [...currentSizesRef.current];
+        const { minLeft, maxLeft } = pairBounds(index, startSizes);
+        const requested = event.key === "Home"
+            ? minLeft
+            : event.key === "End"
+                ? maxLeft
+                : startSizes[index] +
+                    direction * keyboardStep * (event.shiftKey ? 5 : 1);
+        onResizeStart?.(startSizes);
+        const next = commitResize(index, requested, startSizes);
+        onResizeEnd?.(next);
+    };
+    return (_jsx("div", { ...props, ref: (node) => {
+            rootRef.current = node;
+            assignRef(forwardedRef, node);
+        }, "data-slot": "splitter", "data-orientation": orientation, className: cn("flex min-h-32 min-w-0 overflow-hidden rounded-md border", vertical ? "flex-col" : "flex-row", className), children: panels.map((panel, index) => {
+            const size = resolvedSizes[index] ?? 0;
+            const nextPanel = panels[index + 1];
+            const disabled = nextPanel ? !canResize(index) : false;
+            const bounds = nextPanel ? pairBounds(index) : null;
+            const panelStyle = {
+                ...panel.props.style,
+                flexBasis: 0,
+                flexGrow: size,
+                flexShrink: 1,
+            };
+            return (_jsxs(Fragment, { children: [cloneElement(panel, { style: panelStyle }), nextPanel ? (_jsx("div", { role: "separator", "aria-orientation": vertical ? "horizontal" : "vertical", "aria-disabled": disabled || undefined, "aria-valuemin": bounds?.minLeft, "aria-valuemax": bounds?.maxLeft, "aria-valuenow": size, "aria-valuetext": `${Math.round(size * 10) / 10}%`, tabIndex: disabled ? -1 : 0, "data-slot": "splitter-handle", "data-disabled": disabled || undefined, onPointerDown: (event) => handlePointerDown(index, event), onPointerMove: (event) => handlePointerMove(index, event), onPointerUp: (event) => finishPointerResize(index, event), onPointerCancel: (event) => finishPointerResize(index, event), onKeyDown: (event) => handleKeyDown(index, event), className: cn("relative shrink-0 bg-border outline-none transition-colors", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", disabled
+                            ? "cursor-not-allowed opacity-50"
+                            : "hover:bg-primary/60", vertical
+                            ? "h-1 w-full cursor-row-resize"
+                            : "h-full w-1 cursor-col-resize") })) : null] }, panel.key ?? `splitter-panel-${index}`));
+        }) }));
+});
+export const Splitter = Object.assign(SplitterRoot, {
+    Panel: SplitterPanel,
+});

package/dist/core/statistic.d.ts

@@ -0,0 +1,12 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface StatisticProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "prefix" | "title"> {
+    /** Human-readable label for the metric. */
+    title: ReactNode;
+    /** Caller-owned displayed metric value. */
+    value: ReactNode;
+    /** Optional content rendered before the value. */
+    prefix?: ReactNode;
+    /** Optional content rendered after the value. */
+    suffix?: ReactNode;
+}
+export declare const Statistic: import("react").ForwardRefExoticComponent<StatisticProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/core/statistic.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/utils.js";
+export const Statistic = forwardRef(function Statistic({ title, value, prefix, suffix, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, "data-slot": "statistic", className: cn("space-y-1", className), children: [_jsx("div", { "data-slot": "statistic-title", className: "text-sm text-muted-foreground", children: title }), _jsxs("div", { "data-slot": "statistic-value", className: "text-2xl font-semibold", children: [prefix, value, suffix] })] }));
+});

package/dist/core/steps.d.ts

@@ -0,0 +1,54 @@
+import { type CSSProperties, type HTMLAttributes, type Key, type ReactNode, type Ref } from "react";
+export type StepsStatus = "wait" | "process" | "finish" | "error";
+export type StepsOrientation = "horizontal" | "vertical";
+export type StepsTitlePlacement = "horizontal" | "vertical";
+export type StepsType = "default" | "dot" | "inline" | "navigation" | "panel";
+export type StepsVariant = "filled" | "outlined";
+export type StepsSize = "small" | "middle";
+export interface StepItem {
+    key: Key;
+    title: ReactNode;
+    content?: ReactNode;
+    subTitle?: ReactNode;
+    icon?: ReactNode;
+    status?: StepsStatus;
+    disabled?: boolean;
+}
+export interface StepsIconRenderInfo {
+    index: number;
+    active: boolean;
+    status: StepsStatus;
+    item: StepItem;
+}
+export type StepsSemantic = "root" | "item" | "marker" | "connector" | "title" | "subTitle" | "content" | "progress";
+export interface StepsSemanticInfo {
+    props: Readonly<{
+        orientation: StepsOrientation;
+        titlePlacement: StepsTitlePlacement;
+        type: StepsType;
+        variant: StepsVariant;
+        size: StepsSize;
+    }>;
+}
+export type StepsClassNames = Partial<Record<StepsSemantic, string>> | ((info: StepsSemanticInfo) => Partial<Record<StepsSemantic, string>>);
+export type StepsStyles = Partial<Record<StepsSemantic, CSSProperties>> | ((info: StepsSemanticInfo) => Partial<Record<StepsSemantic, CSSProperties>>);
+export interface StepsProps extends Omit<HTMLAttributes<HTMLOListElement>, "children" | "onChange"> {
+    items: readonly StepItem[];
+    current?: number;
+    initial?: number;
+    orientation?: StepsOrientation;
+    titlePlacement?: StepsTitlePlacement;
+    type?: StepsType;
+    variant?: StepsVariant;
+    size?: StepsSize;
+    status?: StepsStatus;
+    percent?: number;
+    maxCount?: number;
+    responsive?: boolean;
+    iconRender?: (origin: ReactNode, info: StepsIconRenderInfo) => ReactNode;
+    onChange?: (current: number) => void;
+    classNames?: StepsClassNames;
+    styles?: StepsStyles;
+    ref?: Ref<HTMLOListElement>;
+}
+export declare function Steps({ items, current, initial, orientation, titlePlacement, type, variant, size, status, percent, maxCount, responsive, iconRender, onChange, classNames, styles, className, style, ref, ...props }: StepsProps): import("react").JSX.Element;