@gouno/ui 0.3.2

package/dist/core/input-number.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentLocale } from "./config-provider.js";
+import { forwardRef, useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { controlSizeClass } from "./control-types.js";
+function normalize(value, min, max, precision) {
+    if (value === null || !Number.isFinite(value))
+        return null;
+    const bounded = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, value));
+    return precision === undefined
+        ? bounded
+        : Number(bounded.toFixed(Number.isFinite(precision)
+            ? Math.max(0, Math.min(100, Math.trunc(precision)))
+            : 0));
+}
+export const InputNumber = forwardRef(function InputNumber({ locale, value, defaultValue = null, min, max, step = 1, precision, size = "middle", status, controls = true, keyboard = true, formatter, parser = (display) => (display.trim() === "" ? null : Number(display)), onChange, onStep, className, disabled, readOnly, ...props }, ref) {
+    const text = useComponentLocale("inputNumber", locale);
+    const [inner, setInner] = useState(() => normalize(defaultValue, min, max, precision));
+    const current = value === undefined ? inner : value;
+    const [draft, setDraft] = useState(null);
+    const displayValue = draft && Object.is(draft.value, current)
+        ? draft.text
+        : formatter
+            ? formatter(current)
+            : (current ?? "");
+    const commit = (next) => {
+        const normalized = normalize(next, min, max, precision);
+        if (value === undefined)
+            setInner(normalized);
+        onChange?.(normalized);
+        return normalized;
+    };
+    const changeBy = (direction) => {
+        if (disabled || readOnly)
+            return;
+        setDraft(null);
+        const offset = direction === "up" ? step : -step;
+        const next = commit((current ?? 0) + offset);
+        if (next !== null)
+            onStep?.(next, { offset, type: direction });
+    };
+    return (_jsxs("span", { "data-slot": "input-number", "data-status": status, className: cn("relative inline-flex w-full min-w-0 overflow-hidden rounded-md border border-border bg-input focus-within:ring-2 focus-within:ring-ring", status === "error" && "border-destructive", status === "warning" && "border-warning", disabled && "cursor-not-allowed opacity-50", className), children: [_jsx("input", { ...props, ref: ref, type: "text", inputMode: "decimal", role: "spinbutton", value: displayValue, disabled: disabled, readOnly: readOnly, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": current ?? undefined, "aria-invalid": status === "error" || props["aria-invalid"] || undefined, className: cn("min-w-0 flex-1 border-0 bg-transparent px-3 outline-none", controlSizeClass(size), controls && "pr-10"), onChange: (event) => {
+                    if (disabled || readOnly)
+                        return;
+                    const text = event.target.value;
+                    const parsed = parser(text);
+                    if (parsed !== null && !Number.isFinite(parsed)) {
+                        setDraft({ text, value: current });
+                        return;
+                    }
+                    const next = commit(parsed);
+                    setDraft({ text, value: next });
+                }, onBlur: (event) => {
+                    setDraft(null);
+                    props.onBlur?.(event);
+                }, onKeyDown: (event) => {
+                    props.onKeyDown?.(event);
+                    if (!keyboard || event.defaultPrevented)
+                        return;
+                    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                        event.preventDefault();
+                        changeBy(event.key === "ArrowUp" ? "up" : "down");
+                    }
+                } }), controls ? (_jsxs("span", { className: "absolute inset-y-0 right-0 flex w-8 flex-col border-l", children: [_jsx("button", { type: "button", tabIndex: -1, "aria-label": text.increaseLabel, disabled: disabled ||
+                            readOnly ||
+                            (max !== undefined && current !== null && current >= max), className: "flex min-h-0 flex-1 items-center justify-center border-b hover:bg-muted disabled:opacity-40", onClick: () => changeBy("up"), children: _jsx(ChevronUp, { className: "size-3" }) }), _jsx("button", { type: "button", tabIndex: -1, "aria-label": text.decreaseLabel, disabled: disabled ||
+                            readOnly ||
+                            (min !== undefined && current !== null && current <= min), className: "flex min-h-0 flex-1 items-center justify-center hover:bg-muted disabled:opacity-40", onClick: () => changeBy("down"), children: _jsx(ChevronDown, { className: "size-3" }) })] })) : null] }));
+});

package/dist/core/input-otp.d.ts

@@ -0,0 +1,14 @@
+import { type HTMLAttributes } from "react";
+import type { ControlSize } from "./control-types.js";
+interface InputOTPRuntimeProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "role" | "aria-disabled"> {
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    mask?: boolean;
+    size?: ControlSize;
+    status?: "error" | "warning";
+}
+export declare const InputOTP: import("react").ForwardRefExoticComponent<InputOTPRuntimeProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/core/input-otp.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, } from "react";
+import { cn } from "../lib/utils.js";
+const inputSizeClass = {
+    small: "size-8 text-sm",
+    middle: "size-9 text-base",
+    large: "size-11 text-lg",
+};
+export const InputOTP = forwardRef(function InputOTP({ length = 6, value, defaultValue = "", onChange, disabled = false, mask = false, size = "middle", status, className, ...props }, ref) {
+    const itemCount = Math.max(1, Math.floor(length));
+    const [inner, setInner] = useState(defaultValue.replace(/\D/g, "").slice(0, itemCount));
+    const itemRefs = useRef([]);
+    const canonicalValue = (value ?? inner).replace(/\D/g, "").slice(0, itemCount);
+    const current = canonicalValue.padEnd(itemCount, " ");
+    const invalid = status === "error" ? true : props["aria-invalid"];
+    const commit = (next) => {
+        const normalized = next.replace(/[^\d ]/g, "").slice(0, itemCount).trimEnd();
+        if (value === undefined)
+            setInner(normalized);
+        onChange?.(normalized);
+    };
+    const writeAt = (index, raw) => {
+        const digit = raw.replace(/\D/g, "").slice(-1);
+        const chars = current.split("");
+        chars[index] = digit || " ";
+        commit(chars.join(""));
+        if (digit && index < itemCount - 1)
+            itemRefs.current[index + 1]?.focus();
+    };
+    const pasteAt = (event, index) => {
+        const digits = event.clipboardData
+            .getData("text")
+            .replace(/\D/g, "")
+            .slice(0, itemCount - index);
+        if (!digits)
+            return;
+        event.preventDefault();
+        const chars = current.split("");
+        for (let offset = 0; offset < digits.length; offset += 1) {
+            chars[index + offset] = digits[offset] ?? " ";
+        }
+        commit(chars.join(""));
+        const nextIndex = Math.min(index + digits.length, itemCount - 1);
+        itemRefs.current[nextIndex]?.focus();
+    };
+    const handleKeyDown = (event, index) => {
+        if (event.key === "Backspace" && !current[index]?.trim() && index > 0) {
+            event.preventDefault();
+            const chars = current.split("");
+            chars[index - 1] = " ";
+            commit(chars.join(""));
+            itemRefs.current[index - 1]?.focus();
+        }
+        else if (event.key === "ArrowLeft" && index > 0) {
+            event.preventDefault();
+            itemRefs.current[index - 1]?.focus();
+        }
+        else if (event.key === "ArrowRight" && index < itemCount - 1) {
+            event.preventDefault();
+            itemRefs.current[index + 1]?.focus();
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            itemRefs.current[0]?.focus();
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            itemRefs.current[itemCount - 1]?.focus();
+        }
+    };
+    return (_jsx("div", { ...props, ref: ref, role: "group", "aria-disabled": disabled || undefined, "aria-invalid": invalid, "data-slot": "input-otp", "data-status": status, className: cn("flex gap-2", className), children: Array.from({ length: itemCount }, (_, index) => (_jsx("input", { ref: (node) => {
+                itemRefs.current[index] = node;
+            }, "data-slot": "input-otp-input", "data-index": index, inputMode: "numeric", pattern: "[0-9]*", autoComplete: index === 0 ? "one-time-code" : "off", type: mask ? "password" : "text", maxLength: 1, disabled: disabled, value: current[index]?.trim() || "", "aria-label": String(index + 1), "aria-invalid": invalid, onChange: (event) => writeAt(index, event.target.value), onPaste: (event) => pasteAt(event, index), onKeyDown: (event) => handleKeyDown(event, index), className: cn("rounded-md border bg-input text-center outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", inputSizeClass[size], status === "error" &&
+                "border-destructive focus-visible:ring-destructive/30", status === "warning" &&
+                "border-warning focus-visible:ring-warning/30") }, index))) }));
+});

package/dist/core/input.d.ts

@@ -0,0 +1,14 @@
+import type { InputLocale } from "./locale.js";
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import { type ControlSize } from "./control-types.js";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    locale?: Partial<InputLocale>;
+    size?: ControlSize;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    allowClear?: boolean;
+    status?: "error" | "warning";
+    onClear?: () => void;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const SearchField: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/core/input.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentLocale } from "./config-provider.js";
+import { forwardRef, useEffect, useState, useRef, useImperativeHandle, } from "react";
+import { Search } from "lucide-react";
+import { Input as PrimitiveInput } from "../components/primitives/input.js";
+import { cn } from "../lib/utils.js";
+import { controlSizeClass } from "./control-types.js";
+export const Input = forwardRef(function Input({ locale, size = "middle", prefix, suffix, allowClear, status, onClear, className, disabled, readOnly, value, defaultValue, onChange, ...props }, ref) {
+    const text = useComponentLocale("input", locale);
+    const suffixRef = useRef(null);
+    const [suffixWidth, setSuffixWidth] = useState(16);
+    useEffect(() => {
+        const element = suffixRef.current;
+        if (!element)
+            return;
+        const measure = () => setSuffixWidth(element.getBoundingClientRect().width);
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [suffix]);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    const [inner, setInner] = useState(() => defaultValue ?? "");
+    const current = value === undefined ? inner : value;
+    const clearable = allowClear && !disabled && !readOnly && String(current ?? "").length > 0;
+    const control = (_jsx(PrimitiveInput, { ...props, ref: inputRef, value: current, disabled: disabled, readOnly: readOnly, onChange: (event) => {
+            if (value === undefined)
+                setInner(event.target.value);
+            onChange?.(event);
+        }, "aria-invalid": status === "error" || props["aria-invalid"] || undefined, "data-status": status, style: { paddingRight: suffix ? suffixWidth + (clearable ? 44 : 24) : undefined, ...props.style }, className: cn("bg-input text-foreground placeholder:text-muted-foreground", controlSizeClass(size), prefix && "pl-9", (suffix || clearable) && "pr-9", status === "warning" && "border-warning focus-visible:ring-warning", className) }));
+    if (!prefix && !suffix && !allowClear)
+        return control;
+    return (_jsxs("span", { "data-slot": "input-group", className: "relative block min-w-0", children: [prefix ? (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted-foreground [&_svg]:size-4", children: prefix })) : null, control, clearable ? (_jsx("button", { type: "button", "aria-label": text.clearLabel, className: "absolute right-2 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground", onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                    const input = inputRef.current;
+                    if (input) {
+                        const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+                        setter?.call(input, "");
+                        input.dispatchEvent(new Event("input", { bubbles: true }));
+                        input.focus();
+                    }
+                    if (value === undefined)
+                        setInner("");
+                    onClear?.();
+                }, children: "\u00D7" })) : null, suffix ? (_jsx("span", { ref: suffixRef, "data-slot": "input-suffix", className: cn("max-w-[40%] truncate absolute top-1/2 z-10 -translate-y-1/2 text-muted-foreground [&_svg]:size-4", clearable ? "right-9" : "right-3"), children: suffix })) : null] }));
+});
+export const SearchField = forwardRef(function SearchField({ className, ...props }, ref) {
+    return (_jsx(Input, { ...props, ref: ref, type: props.type || "search", prefix: _jsx(Search, {}), className: className }));
+});

package/dist/core/kbd.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from "react";
+export type KbdProps = HTMLAttributes<HTMLElement>;
+/**
+ * Semantic keyboard-input label. Kbd intentionally stays a thin native
+ * element: shortcut grouping, separators and platform-specific copy remain
+ * caller-owned content rather than hidden component behavior.
+ */
+export declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;

package/dist/core/kbd.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * Semantic keyboard-input label. Kbd intentionally stays a thin native
+ * element: shortcut grouping, separators and platform-specific copy remain
+ * caller-owned content rather than hidden component behavior.
+ */
+export const Kbd = forwardRef(function Kbd({ className, ...props }, ref) {
+    return (_jsx("kbd", { ...props, ref: ref, "data-slot": "kbd", className: cn("inline-flex min-h-5 items-center justify-center rounded border bg-muted px-1.5 py-0.5 font-mono text-xs leading-none text-foreground", className) }));
+});

package/dist/core/layout-primitives.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    gap?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Stack({ direction, gap, className, style, ref, ...props }: StackProps): import("react").JSX.Element;
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Container({ className, ref, ...props }: ContainerProps): import("react").JSX.Element;

package/dist/core/layout-primitives.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export function Stack({ direction = "column", gap = 16, className, style, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "stack", style: { gap, ...style }, className: cn("flex", direction === "column" && "flex-col", direction === "row-reverse" && "flex-row-reverse", direction === "column-reverse" && "flex-col-reverse", className) }));
+}
+export function Container({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "container", className: cn("mx-auto w-full max-w-7xl px-4", className) }));
+}

package/dist/core/layout.d.ts

@@ -0,0 +1,71 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+/** @deprecated Prefer canonical `Separator`; retained for established Core compatibility. */
+export declare const Divider: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type SpaceAlign = "start" | "end" | "center" | "baseline" | "stretch";
+export interface SpaceProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+    gap?: "xs" | "sm" | "md" | "lg" | "xl" | number;
+    align?: SpaceAlign;
+    wrap?: boolean;
+    block?: boolean;
+    split?: ReactNode;
+    children?: ReactNode;
+}
+export declare const Space: import("react").ForwardRefExoticComponent<SpaceProps & import("react").RefAttributes<HTMLDivElement>>;
+export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type FlexJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+export type FlexGap = "xs" | "sm" | "md" | "lg" | "xl" | number;
+export type FlexWrap = boolean | "nowrap" | "wrap" | "wrap-reverse";
+export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: FlexDirection;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    gap?: FlexGap;
+    wrap?: FlexWrap;
+    flex?: CSSProperties["flex"];
+    children?: ReactNode;
+}
+export declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Grid: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    columns?: 1 | 2 | 3 | 4 | "auto";
+    gap?: "sm" | "md" | "lg" | number;
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type GridSpan = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+export type GridBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type RowAlign = "top" | "middle" | "bottom" | "stretch";
+export type RowJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+export type RowGutter = number | [number, number];
+export interface RowProps extends HTMLAttributes<HTMLDivElement> {
+    gutter?: RowGutter;
+    align?: RowAlign;
+    justify?: RowJustify;
+    wrap?: boolean;
+}
+export declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ColSize {
+    span?: GridSpan;
+    offset?: GridSpan;
+    order?: number;
+    push?: GridSpan;
+    pull?: GridSpan;
+}
+export type ColBreakpointValue = GridSpan | ColSize;
+export interface ColProps extends HTMLAttributes<HTMLDivElement> {
+    span?: GridSpan;
+    offset?: GridSpan;
+    order?: number;
+    push?: GridSpan;
+    pull?: GridSpan;
+    flex?: CSSProperties["flex"];
+    xs?: ColBreakpointValue;
+    sm?: ColBreakpointValue;
+    md?: ColBreakpointValue;
+    lg?: ColBreakpointValue;
+    xl?: ColBreakpointValue;
+    xxl?: ColBreakpointValue;
+}
+export declare const Col: import("react").ForwardRefExoticComponent<ColProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/core/layout.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment, createContext, forwardRef, useContext, } from "react";
+import { cn } from "../lib/utils.js";
+/** @deprecated Prefer canonical `Separator`; retained for established Core compatibility. */
+export const Divider = forwardRef(function Divider({ orientation = "horizontal", className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, ...props, "data-slot": "divider", className: cn(orientation === "vertical" ? "h-full w-px" : "h-px w-full", "shrink-0 bg-border", className) }));
+});
+export const Space = forwardRef(function Space({ orientation = "horizontal", gap: gapValue = "md", align, wrap = false, block = false, split, children, className, ...props }, ref) {
+    const gap = typeof gapValue === "number"
+        ? `[gap:${gapValue}px]`
+        : { xs: "gap-1", sm: "gap-2", md: "gap-3", lg: "gap-4", xl: "gap-6" }[gapValue];
+    const items = Array.isArray(children) ? children : [children];
+    const content = split
+        ? items.flatMap((child, index) => index === 0
+            ? [child]
+            : [_jsx(Fragment, { children: split }, `space-split-${index}`), child])
+        : children;
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "space", "data-orientation": orientation, "data-block": block || undefined, className: cn("flex min-w-0", orientation === "vertical" ? "flex-col" : "flex-row", align === "start" && "items-start", align === "end" && "items-end", align === "center" && "items-center", align === "baseline" && "items-baseline", align === "stretch" && "items-stretch", gap, wrap && "flex-wrap", block && "w-full", className), children: content }));
+});
+const flexGapClass = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6",
+};
+export const Flex = forwardRef(function Flex({ direction = "row", align, justify, gap = "md", wrap = false, flex, children, className, style, ...props }, ref) {
+    const numericGap = typeof gap === "number" ? Math.max(0, gap) : undefined;
+    const resolvedWrap = wrap === true ? "wrap" : wrap === false ? "nowrap" : wrap;
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "flex", "data-direction": direction, "data-wrap": resolvedWrap, className: cn("flex min-w-0", direction === "column" && "flex-col", direction === "row-reverse" && "flex-row-reverse", direction === "column-reverse" && "flex-col-reverse", align === "start" && "items-start", align === "center" && "items-center", align === "end" && "items-end", align === "stretch" && "items-stretch", align === "baseline" && "items-baseline", justify === "center" && "justify-center", justify === "end" && "justify-end", justify === "space-between" && "justify-between", justify === "space-around" && "justify-around", justify === "space-evenly" && "justify-evenly", resolvedWrap === "wrap" && "flex-wrap", resolvedWrap === "wrap-reverse" && "flex-wrap-reverse", typeof gap === "number" ? undefined : flexGapClass[gap], className), style: {
+            ...style,
+            ...(numericGap !== undefined ? { gap: numericGap } : undefined),
+            ...(flex !== undefined ? { flex } : undefined),
+        }, children: children }));
+});
+export const Grid = forwardRef(function Grid({ columns = "auto", gap = "md", children, className, style, ...props }, ref) {
+    const numericGap = typeof gap === "number" ? Math.max(0, gap) : undefined;
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "grid", "data-columns": columns, className: cn("grid", columns === "auto"
+            ? "grid-cols-[repeat(auto-fit,minmax(180px,1fr))]"
+            : `grid-cols-${columns}`, typeof gap === "number" ? undefined : gap === "sm" ? "gap-2" : gap === "lg" ? "gap-6" : "gap-4", className), style: { ...style, ...(numericGap !== undefined ? { gap: numericGap } : undefined) }, children: children }));
+});
+const RowGutterContext = createContext(0);
+export const Row = forwardRef(function Row({ gutter = 0, align = "top", justify = "start", wrap = true, className, style, children, ...props }, ref) {
+    const [horizontalRaw, verticalRaw] = Array.isArray(gutter) ? gutter : [gutter, 0];
+    const horizontal = Math.max(0, horizontalRaw);
+    const vertical = Math.max(0, verticalRaw);
+    return (_jsx(RowGutterContext.Provider, { value: horizontal, children: _jsx("div", { ...props, ref: ref, "data-slot": "row", "data-gutter-x": horizontal, "data-gutter-y": vertical, className: cn("flex min-w-0", wrap ? "flex-wrap" : "flex-nowrap", align === "top" && "items-start", align === "middle" && "items-center", align === "bottom" && "items-end", align === "stretch" && "items-stretch", justify === "center" && "justify-center", justify === "end" && "justify-end", justify === "space-between" && "justify-between", justify === "space-around" && "justify-around", justify === "space-evenly" && "justify-evenly", className), style: {
+                ...style,
+                ...(horizontal > 0 ? { marginInline: -horizontal / 2 } : undefined),
+                ...(vertical > 0 ? { rowGap: vertical } : undefined),
+            }, children: children }) }));
+});
+function gridUnit(value, fallback) {
+    return Math.min(24, Math.max(0, Math.round(value ?? fallback)));
+}
+function breakpointSize(value) {
+    return typeof value === "number" ? { span: value } : (value ?? {});
+}
+function resolveColSize(previous, value) {
+    const next = breakpointSize(value);
+    return {
+        span: gridUnit(next.span, previous.span),
+        offset: gridUnit(next.offset, previous.offset),
+        order: next.order ?? previous.order,
+        push: gridUnit(next.push, previous.push),
+        pull: gridUnit(next.pull, previous.pull),
+    };
+}
+function percent(value) {
+    return `${(value / 24) * 100}%`;
+}
+export const Col = forwardRef(function Col({ span = 24, offset = 0, order = 0, push = 0, pull = 0, flex, xs, sm, md, lg, xl, xxl, className, style, ...props }, ref) {
+    const horizontalGutter = useContext(RowGutterContext);
+    const initial = {
+        span: gridUnit(span, 24),
+        offset: gridUnit(offset, 0),
+        order,
+        push: gridUnit(push, 0),
+        pull: gridUnit(pull, 0),
+    };
+    const base = resolveColSize(initial, xs);
+    const smSize = resolveColSize(base, sm);
+    const mdSize = resolveColSize(smSize, md);
+    const lgSize = resolveColSize(mdSize, lg);
+    const xlSize = resolveColSize(lgSize, xl);
+    const xxlSize = resolveColSize(xlSize, xxl);
+    const variables = {
+        "--gouno-col-basis": percent(base.span),
+        "--gouno-col-offset": percent(base.offset),
+        "--gouno-col-shift": percent(base.push - base.pull),
+        "--gouno-col-order": base.order,
+        "--gouno-col-sm-basis": percent(smSize.span),
+        "--gouno-col-sm-offset": percent(smSize.offset),
+        "--gouno-col-sm-shift": percent(smSize.push - smSize.pull),
+        "--gouno-col-sm-order": smSize.order,
+        "--gouno-col-md-basis": percent(mdSize.span),
+        "--gouno-col-md-offset": percent(mdSize.offset),
+        "--gouno-col-md-shift": percent(mdSize.push - mdSize.pull),
+        "--gouno-col-md-order": mdSize.order,
+        "--gouno-col-lg-basis": percent(lgSize.span),
+        "--gouno-col-lg-offset": percent(lgSize.offset),
+        "--gouno-col-lg-shift": percent(lgSize.push - lgSize.pull),
+        "--gouno-col-lg-order": lgSize.order,
+        "--gouno-col-xl-basis": percent(xlSize.span),
+        "--gouno-col-xl-offset": percent(xlSize.offset),
+        "--gouno-col-xl-shift": percent(xlSize.push - xlSize.pull),
+        "--gouno-col-xl-order": xlSize.order,
+        "--gouno-col-xxl-basis": percent(xxlSize.span),
+        "--gouno-col-xxl-offset": percent(xxlSize.offset),
+        "--gouno-col-xxl-shift": percent(xxlSize.push - xxlSize.pull),
+        "--gouno-col-xxl-order": xxlSize.order,
+    };
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "col", "data-span": base.span, "data-sm-span": smSize.span, "data-md-span": mdSize.span, "data-lg-span": lgSize.span, "data-xl-span": xlSize.span, "data-xxl-span": xxlSize.span, className: cn("min-w-0", className), style: {
+            ...style,
+            ...variables,
+            ...(horizontalGutter > 0 ? { paddingInline: horizontalGutter / 2 } : undefined),
+            ...(flex !== undefined ? { flex, maxWidth: "none" } : undefined),
+        } }));
+});

package/dist/core/list.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties, type HTMLAttributes, type Key, type ReactNode, type Ref } from "react";
+export type ListSize = "small" | "medium" | "large";
+export type ListItemLayout = "horizontal" | "vertical";
+export type ListSemantic = "root" | "header" | "body" | "item" | "empty" | "footer" | "loadMore";
+export interface ListLocale {
+    emptyText?: ReactNode;
+}
+export interface ListSemanticInfo {
+    props: Readonly<{
+        size: ListSize;
+        bordered: boolean;
+        split: boolean;
+        itemLayout: ListItemLayout;
+        loading: boolean;
+        empty: boolean;
+    }>;
+}
+export type ListClassNames = Partial<Record<ListSemantic, string>> | ((info: ListSemanticInfo) => Partial<Record<ListSemantic, string>>);
+export type ListStyles = Partial<Record<ListSemantic, CSSProperties>> | ((info: ListSemanticInfo) => Partial<Record<ListSemantic, CSSProperties>>);
+export interface ListProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, "aria-busy" | "children"> {
+    dataSource?: readonly T[];
+    renderItem: (item: T, index: number) => ReactNode;
+    rowKey: keyof T | ((item: T) => Key);
+    bordered?: boolean;
+    split?: boolean;
+    size?: ListSize;
+    itemLayout?: ListItemLayout;
+    loading?: boolean;
+    header?: ReactNode;
+    footer?: ReactNode;
+    loadMore?: ReactNode;
+    locale?: ListLocale;
+    classNames?: ListClassNames;
+    styles?: ListStyles;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function List<T = unknown>({ dataSource, renderItem, rowKey, bordered, split, size, itemLayout, loading, header, footer, loadMore, locale, classNames, styles, className, style, ref, ...props }: ListProps<T>): import("react").JSX.Element;

package/dist/core/list.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { cn } from "../lib/utils.js";
+import { Spin } from "./spin.js";
+const paddingBySize = {
+    small: "px-3 py-2",
+    medium: "px-4 py-3",
+    large: "px-5 py-4",
+};
+function defaultEmptyText() {
+    return typeof document !== "undefined" &&
+        document.documentElement.lang.startsWith("en")
+        ? "No data"
+        : "暂无数据";
+}
+function resolveRowKey(item, rowKey) {
+    if (typeof rowKey === "function")
+        return rowKey(item);
+    const value = item?.[rowKey];
+    if (typeof value === "string" || typeof value === "number")
+        return value;
+    throw new TypeError(`List rowKey "${String(rowKey)}" must resolve to a string or number.`);
+}
+export function List({ dataSource = [], renderItem, rowKey, bordered = false, split = true, size = "medium", itemLayout = "horizontal", loading = false, header, footer, loadMore, locale, classNames, styles, className, style, ref, ...props }) {
+    const empty = dataSource.length === 0;
+    const semanticInfo = {
+        props: { size, bordered, split, itemLayout, loading, empty },
+    };
+    const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
+    const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
+    const padding = paddingBySize[size];
+    return (_jsxs("div", { ...props, ref: ref, "data-slot": "list", "data-size": size, "data-layout": itemLayout, "data-bordered": bordered || undefined, "data-split": split || undefined, className: cn("w-full min-w-0 text-sm text-foreground", bordered && "overflow-hidden rounded-lg border bg-background", semanticClassNames.root, className), style: { ...semanticStyles.root, ...style }, children: [header !== undefined && header !== null ? (_jsx("div", { "data-slot": "list-header", className: cn(padding, "font-medium", bordered && "border-b", semanticClassNames.header), style: semanticStyles.header, children: header })) : null, _jsx(Spin, { spinning: loading, children: empty ? (_jsx("div", { "data-slot": "list-empty", className: cn(padding, "text-center text-muted-foreground", semanticClassNames.empty), style: semanticStyles.empty, children: locale?.emptyText ?? defaultEmptyText() })) : (_jsx("ul", { "data-slot": "list-body", className: cn("min-w-0", split && "divide-y", semanticClassNames.body), style: semanticStyles.body, children: dataSource.map((item, index) => (_jsx("li", { "data-slot": "list-item", className: cn(padding, itemLayout === "horizontal"
+                            ? "flex min-w-0 items-start gap-4"
+                            : "flex min-w-0 flex-col gap-2", semanticClassNames.item), style: semanticStyles.item, children: renderItem(item, index) }, resolveRowKey(item, rowKey)))) })) }), loadMore !== undefined && loadMore !== null ? (_jsx("div", { "data-slot": "list-load-more", className: cn(padding, "flex justify-center", bordered && "border-t", semanticClassNames.loadMore), style: semanticStyles.loadMore, children: loadMore })) : null, footer !== undefined && footer !== null ? (_jsx("div", { "data-slot": "list-footer", className: cn(padding, bordered && "border-t", semanticClassNames.footer), style: semanticStyles.footer, children: footer })) : null] }));
+}

package/dist/core/locale.d.ts

@@ -0,0 +1,48 @@
+/** Generic component copy only. Product labels and content remain caller-owned. */
+export interface InputLocale {
+    clearLabel: string;
+}
+export interface DatePickerLocale {
+    clearLabel: string;
+}
+export interface InputNumberLocale {
+    increaseLabel: string;
+    decreaseLabel: string;
+}
+export interface SelectLocale {
+    clearLabel: string;
+    searchLabel: string;
+    searchPlaceholder: string;
+    emptyText: string;
+    removeLabel: (label: string) => string;
+}
+export interface UploadLocale {
+    fileListLabel: string;
+    removeLabel: (fileName: string) => string;
+}
+export interface PaginationLocale {
+    pageLabel: (page: number) => string;
+    jumpBackwardLabel: string;
+    jumpForwardLabel: string;
+    pageSizeLabel: string;
+    pageSizeText: (size: number) => string;
+    jumpText: string;
+    jumpLabel: string;
+}
+export interface ComponentLocale {
+    readonly locale: string;
+    readonly input: Readonly<InputLocale>;
+    readonly datePicker: Readonly<DatePickerLocale>;
+    readonly inputNumber: Readonly<InputNumberLocale>;
+    readonly select: Readonly<SelectLocale & {
+        placeholder: string;
+    }>;
+    readonly upload: Readonly<UploadLocale>;
+    readonly pagination: Readonly<PaginationLocale & {
+        ariaLabel: string;
+        prevText: string;
+        nextText: string;
+    }>;
+}
+export declare const enUS: ComponentLocale;
+export declare const zhCN: ComponentLocale;

package/dist/core/locale.js

@@ -0,0 +1,32 @@
+export const enUS = {
+    locale: "en-US",
+    input: { clearLabel: "Clear input" },
+    datePicker: { clearLabel: "Clear date" },
+    inputNumber: { increaseLabel: "Increase", decreaseLabel: "Decrease" },
+    select: {
+        placeholder: "Please select", clearLabel: "Clear selection", searchLabel: "Search options",
+        searchPlaceholder: "Search", emptyText: "No options", removeLabel: (label) => `Remove ${label}`,
+    },
+    upload: { fileListLabel: "Selected files", removeLabel: (name) => `Remove ${name}` },
+    pagination: {
+        ariaLabel: "Pagination", prevText: "Previous", nextText: "Next", pageLabel: (page) => `Page ${page}`,
+        jumpBackwardLabel: "Jump backward", jumpForwardLabel: "Jump forward", pageSizeLabel: "Page size",
+        pageSizeText: (size) => `${size} / page`, jumpText: "Go to", jumpLabel: "Go to page",
+    },
+};
+export const zhCN = {
+    locale: "zh-CN",
+    input: { clearLabel: "清除输入" },
+    datePicker: { clearLabel: "清除日期" },
+    inputNumber: { increaseLabel: "增加", decreaseLabel: "减少" },
+    select: {
+        placeholder: "请选择", clearLabel: "清除选择", searchLabel: "搜索选项",
+        searchPlaceholder: "搜索", emptyText: "暂无选项", removeLabel: (label) => `移除 ${label}`,
+    },
+    upload: { fileListLabel: "已选择文件", removeLabel: (name) => `移除 ${name}` },
+    pagination: {
+        ariaLabel: "分页", prevText: "上一页", nextText: "下一页", pageLabel: (page) => `第 ${page} 页`,
+        jumpBackwardLabel: "向前跳页", jumpForwardLabel: "向后跳页", pageSizeLabel: "每页条数",
+        pageSizeText: (size) => `${size} 条 / 页`, jumpText: "跳至", jumpLabel: "跳转到页码",
+    },
+};