@gouno/ui 0.3.2

package/dist/core/steps.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import {} from "react";
+import { Check, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function clampPercent(value) {
+    if (value === undefined || !Number.isFinite(value))
+        return undefined;
+    return Math.min(100, Math.max(0, value));
+}
+function resolveStatus(item, index, current, currentStatus) {
+    if (item.status)
+        return item.status;
+    if (index < current)
+        return "finish";
+    if (index === current)
+        return currentStatus;
+    return "wait";
+}
+function visibleSteps(items, current, maxCount) {
+    const all = items.map((item, index) => ({ kind: "item", item, index }));
+    const limit = maxCount === undefined ? undefined : Math.floor(maxCount);
+    if (!limit || limit < 3 || items.length <= limit)
+        return all;
+    if (current <= Math.floor((limit - 1) / 2)) {
+        return [
+            ...all.slice(0, limit - 1),
+            { kind: "ellipsis", key: "steps-ellipsis-end" },
+        ];
+    }
+    if (current >= items.length - Math.ceil((limit - 1) / 2)) {
+        return [
+            { kind: "ellipsis", key: "steps-ellipsis-start" },
+            ...all.slice(items.length - (limit - 1)),
+        ];
+    }
+    const windowSize = limit - 2;
+    const start = Math.max(0, Math.min(current - Math.floor(windowSize / 2), items.length - windowSize));
+    return [
+        { kind: "ellipsis", key: "steps-ellipsis-start" },
+        ...all.slice(start, start + windowSize),
+        { kind: "ellipsis", key: "steps-ellipsis-end" },
+    ];
+}
+function defaultMarker(item, index, initial, status, type) {
+    if (item.icon)
+        return item.icon;
+    if (type === "dot")
+        return null;
+    if (status === "finish")
+        return _jsx(Check, { "aria-hidden": "true" });
+    if (status === "error")
+        return _jsx(X, { "aria-hidden": "true" });
+    return initial + index + 1;
+}
+export function Steps({ items, current = 0, initial = 0, orientation = "horizontal", titlePlacement = "horizontal", type = "default", variant = "filled", size = "middle", status = "process", percent, maxCount, responsive = true, iconRender, onChange, classNames, styles, className, style, ref, ...props }) {
+    const effectiveTitlePlacement = type === "dot" ? "vertical" : titlePlacement;
+    const semanticInfo = {
+        props: {
+            orientation,
+            titlePlacement: effectiveTitlePlacement,
+            type,
+            variant,
+            size,
+        },
+    };
+    const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
+    const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
+    const entries = visibleSteps(items, current, maxCount);
+    const normalizedPercent = clampPercent(percent);
+    return (_jsx("ol", { ...props, ref: ref, "data-slot": "steps", "data-orientation": orientation, "data-type": type, "data-variant": variant, className: cn("m-0 min-w-0 list-none p-0", orientation === "vertical"
+            ? "flex flex-col gap-1"
+            : "flex items-start gap-2 overflow-x-auto", responsive &&
+            orientation === "horizontal" &&
+            "max-[531px]:flex-col max-[531px]:overflow-visible", semanticClassNames.root, className), style: { ...semanticStyles.root, ...style }, children: entries.map((entry, visibleIndex) => {
+            if (entry.kind === "ellipsis") {
+                return (_jsx("li", { "aria-disabled": "true", "data-slot": "steps-item", "data-ellipsis": "true", className: cn("flex min-h-8 min-w-10 shrink-0 items-center justify-center text-sm text-muted-foreground", orientation === "horizontal" && "self-start", semanticClassNames.item), style: semanticStyles.item, children: _jsx("span", { children: "\u2026" }) }, entry.key));
+            }
+            const { item, index } = entry;
+            const itemStatus = resolveStatus(item, index, current, status);
+            const active = index === current;
+            const clickable = Boolean(onChange) && !item.disabled;
+            const originMarker = defaultMarker(item, index, initial, itemStatus, type);
+            const marker = iconRender?.(originMarker, {
+                index,
+                active,
+                status: itemStatus,
+                item,
+            }) ?? originMarker;
+            const showProgress = active &&
+                itemStatus === "process" &&
+                type === "default" &&
+                normalizedPercent !== undefined;
+            const hasConnector = visibleIndex < entries.length - 1;
+            const body = (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "steps-marker", className: cn("relative z-[1] flex shrink-0 items-center justify-center rounded-full border text-xs font-medium [&_svg]:size-3.5", type === "dot"
+                            ? "mt-1.5 size-2 border-current p-0"
+                            : size === "small"
+                                ? "size-5"
+                                : "size-7", variant === "filled" && itemStatus === "process" && "border-primary bg-primary text-primary-foreground", variant === "filled" && itemStatus === "finish" && "border-primary/20 bg-primary/10 text-primary", variant === "filled" && itemStatus === "wait" && "border-muted bg-muted text-muted-foreground", variant === "filled" && itemStatus === "error" && "border-destructive/20 bg-destructive/10 text-destructive", variant === "outlined" && itemStatus === "process" && "border-primary bg-background text-primary", variant === "outlined" && itemStatus === "finish" && "border-primary/50 bg-background text-primary", variant === "outlined" && itemStatus === "wait" && "border-border bg-background text-muted-foreground", variant === "outlined" && itemStatus === "error" && "border-destructive bg-background text-destructive", type === "dot" && itemStatus === "process" && "bg-primary", type === "dot" && itemStatus === "finish" && "bg-primary/70", type === "dot" && itemStatus === "wait" && "bg-muted-foreground/30", type === "dot" && itemStatus === "error" && "bg-destructive", semanticClassNames.marker), style: semanticStyles.marker, children: marker }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("span", { "data-slot": "steps-title", className: cn("min-w-0 truncate font-medium", size === "small" ? "text-xs" : "text-sm", itemStatus === "wait" ? "text-muted-foreground" : "text-foreground", itemStatus === "error" && "text-destructive", semanticClassNames.title), style: semanticStyles.title, children: item.title }), item.subTitle !== undefined ? (_jsx("span", { "data-slot": "steps-subtitle", className: cn("shrink-0 text-xs text-muted-foreground", semanticClassNames.subTitle), style: semanticStyles.subTitle, children: item.subTitle })) : null] }), item.content !== undefined ? (_jsx("div", { "data-slot": "steps-content", className: cn("mt-1 text-xs text-muted-foreground", semanticClassNames.content), style: semanticStyles.content, children: item.content })) : null, showProgress ? (_jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": normalizedPercent, "data-slot": "steps-progress", className: cn("mt-2 h-1 w-full overflow-hidden rounded-full bg-muted", semanticClassNames.progress), style: semanticStyles.progress, children: _jsx("span", { className: "block h-full rounded-full bg-primary transition-[width]", style: { width: `${normalizedPercent}%` } }) })) : null] })] }));
+            return (_jsxs("li", { "data-slot": "steps-item", "data-status": itemStatus, "data-active": active ? "true" : undefined, className: cn("relative min-w-0", orientation === "horizontal" ? "min-w-36 flex-1" : "w-full pb-3", type === "panel" && "rounded-lg border border-border p-3", type === "navigation" && active && "border-b-2 border-primary", item.disabled && "opacity-60", semanticClassNames.item), style: semanticStyles.item, children: [hasConnector && type !== "panel" && type !== "navigation" && type !== "inline" ? (_jsx("span", { "aria-hidden": "true", "data-slot": "steps-connector", className: cn("absolute bg-border", orientation === "horizontal"
+                            ? cn(size === "small" ? "left-5 top-2.5" : "left-7 top-3.5", "right-0 h-px")
+                            : cn(size === "small" ? "left-2.5 top-5" : "left-3.5 top-7", "bottom-0 w-px"), semanticClassNames.connector), style: semanticStyles.connector })) : null, clickable ? (_jsx("button", { type: "button", disabled: item.disabled, "aria-current": active ? "step" : undefined, onClick: () => {
+                            if (index !== current)
+                                onChange?.(index);
+                        }, className: cn("relative z-[2] flex w-full min-w-0 items-start gap-2 rounded-md text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", effectiveTitlePlacement === "vertical" && "flex-col items-start", type === "inline" && "items-center py-1"), children: body })) : (_jsx("div", { "aria-current": active ? "step" : undefined, "aria-disabled": item.disabled || undefined, className: cn("relative z-[2] flex min-w-0 items-start gap-2", effectiveTitlePlacement === "vertical" && "flex-col items-start", type === "inline" && "items-center py-1"), children: body }))] }, item.key));
+        }) }));
+}

package/dist/core/tabs.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps, ReactNode } from "react";
+import * as Primitive from "../components/primitives/tabs.js";
+import type { ControlSize } from "./control-types.js";
+export type TabsType = "line" | "card";
+export type TabsPosition = "top" | "right" | "bottom" | "left";
+export interface TabItem<T extends string = string> {
+    key: T;
+    label: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+type TabsRootProps = ComponentProps<typeof Primitive.Tabs>;
+export interface TabsProps<T extends string = string> extends Omit<TabsRootProps, "defaultValue" | "onChange" | "onValueChange" | "orientation" | "value"> {
+    activeKey?: T;
+    defaultActiveKey?: T;
+    items?: readonly TabItem<T>[];
+    onChange?: (activeKey: T) => void;
+    type?: TabsType;
+    size?: ControlSize;
+    tabPosition?: TabsPosition;
+    centered?: boolean;
+    tabBarExtraContent?: ReactNode;
+    /** @deprecated Use the standard `aria-label` attribute. Retained until product artifact migration. */
+    ariaLabel?: string;
+}
+export declare function Tabs<T extends string = string>({ activeKey, defaultActiveKey, items, onChange, type, size, tabPosition, centered, tabBarExtraContent, className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ariaLabel: legacyAriaLabel, ...props }: TabsProps<T>): import("react").JSX.Element;
+export declare function TabList({ className, type, size, tabPosition, centered, extra, style, children, ...props }: Omit<ComponentProps<typeof Primitive.TabsList>, "variant"> & {
+    type?: TabsType;
+    size?: ControlSize;
+    tabPosition?: TabsPosition;
+    centered?: boolean;
+    extra?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Tab({ className, size, tabPosition, ...props }: ComponentProps<typeof Primitive.TabsTrigger> & {
+    size?: ControlSize;
+    tabPosition?: TabsPosition;
+}): import("react").JSX.Element;
+export declare function TabPanel({ className, ...props }: ComponentProps<typeof Primitive.TabsContent>): import("react").JSX.Element;
+export {};

package/dist/core/tabs.js

@@ -0,0 +1,80 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as Primitive from "../components/primitives/tabs.js";
+import { cn } from "../lib/utils.js";
+const gapBySize = {
+    small: 16,
+    middle: 24,
+    large: 28,
+};
+const triggerSizeClass = {
+    small: "!h-8 px-1.5 !py-0 text-sm",
+    middle: "!h-10 px-2 !py-0 text-sm",
+    large: "!h-11 px-2.5 !py-0 text-base",
+};
+function orientationFor(position) {
+    return position === "left" || position === "right" ? "vertical" : "horizontal";
+}
+function flexDirectionFor(position) {
+    return {
+        top: "column",
+        bottom: "column-reverse",
+        left: "row",
+        right: "row-reverse",
+    }[position];
+}
+function listEdgeClass(position) {
+    switch (position) {
+        case "bottom":
+            return "w-full border-t border-border/70";
+        case "left":
+            return "h-fit w-48 shrink-0 border-r border-border/70";
+        case "right":
+            return "h-fit w-48 shrink-0 border-l border-border/70";
+        default:
+            return "w-full border-b border-border/70";
+    }
+}
+function lineIndicatorPositionClass(position) {
+    switch (position) {
+        case "bottom":
+            return "[&::after]:!top-0 [&::after]:!bottom-auto";
+        case "right":
+            return "[&::after]:!left-0 [&::after]:!right-auto";
+        default:
+            return "";
+    }
+}
+function cardTriggerPositionClass(position) {
+    switch (position) {
+        case "bottom":
+            return "group-data-[variant=default]/tabs-list:!rounded-t-none group-data-[variant=default]/tabs-list:!rounded-b-md group-data-[variant=default]/tabs-list:!border-t-0";
+        case "left":
+            return "group-data-[variant=default]/tabs-list:!rounded-r-none group-data-[variant=default]/tabs-list:!rounded-l-md group-data-[variant=default]/tabs-list:!border-r-0";
+        case "right":
+            return "group-data-[variant=default]/tabs-list:!rounded-l-none group-data-[variant=default]/tabs-list:!rounded-r-md group-data-[variant=default]/tabs-list:!border-l-0";
+        default:
+            return "group-data-[variant=default]/tabs-list:!rounded-b-none group-data-[variant=default]/tabs-list:!rounded-t-md group-data-[variant=default]/tabs-list:!border-b-0";
+    }
+}
+export function Tabs({ activeKey, defaultActiveKey, items, onChange, type = "line", size = "middle", tabPosition = "top", centered = false, tabBarExtraContent, className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ariaLabel: legacyAriaLabel, ...props }) {
+    const firstEnabledKey = items?.find((item) => !item.disabled)?.key;
+    const orientation = orientationFor(tabPosition);
+    const resolvedDefaultKey = defaultActiveKey ?? (activeKey === undefined ? firstEnabledKey : undefined);
+    return (_jsxs(Primitive.Tabs, { ...props, value: activeKey, defaultValue: resolvedDefaultKey, onValueChange: (next) => onChange?.(next), orientation: orientation, "data-tab-position": tabPosition, "data-tab-type": type, "data-tab-size": size, className: cn("gap-5", className), style: { ...style, flexDirection: flexDirectionFor(tabPosition) }, children: [items ? (_jsx(TabList, { "aria-label": ariaLabel ?? legacyAriaLabel, "aria-labelledby": ariaLabelledBy, type: type, size: size, tabPosition: tabPosition, centered: centered, extra: tabBarExtraContent, children: items.map((item) => (_jsxs(Tab, { value: item.key, disabled: item.disabled, size: size, tabPosition: tabPosition, children: [item.icon, item.label] }, item.key))) })) : null, items?.map((item) => item.children === undefined ? null : (_jsx(TabPanel, { value: item.key, children: item.children }, item.key))), children] }));
+}
+export function TabList({ className, type = "line", size = "middle", tabPosition = "top", centered = false, extra, style, children, ...props }) {
+    const vertical = tabPosition === "left" || tabPosition === "right";
+    return (_jsxs(Primitive.TabsList, { ...props, variant: type === "line" ? "line" : "default", "data-tab-position": tabPosition, className: cn("max-w-full justify-start !rounded-none !bg-transparent !p-0", vertical
+            ? "max-h-full flex-col items-stretch overflow-x-hidden overflow-y-auto"
+            : "overflow-x-auto overflow-y-hidden", listEdgeClass(tabPosition), className), style: {
+            ...style,
+            gap: type === "card" ? 4 : gapBySize[size],
+            justifyContent: centered && !extra ? "center" : "flex-start",
+        }, children: [children, extra ? (_jsx("span", { className: cn("shrink-0", vertical ? "mt-2" : "ml-auto pl-4"), children: extra })) : null] }));
+}
+export function Tab({ className, size = "middle", tabPosition = "top", ...props }) {
+    return (_jsx(Primitive.TabsTrigger, { ...props, "data-tab-position": tabPosition, className: cn("!flex-none font-medium transition-colors", triggerSizeClass[size], "group-data-[variant=line]/tabs-list:!rounded-none group-data-[variant=line]/tabs-list:!border-0 group-data-[variant=line]/tabs-list:!bg-transparent group-data-[variant=line]/tabs-list:!px-0 group-data-[variant=line]/tabs-list:!shadow-none", "group-data-[variant=line]/tabs-list:text-muted-foreground group-data-[variant=line]/tabs-list:hover:text-foreground group-data-[variant=line]/tabs-list:data-[state=active]:!bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:text-primary", "group-data-[variant=line]/tabs-list:after:bg-primary group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", "group-data-[variant=default]/tabs-list:border group-data-[variant=default]/tabs-list:border-border/70 group-data-[variant=default]/tabs-list:bg-muted/35 group-data-[variant=default]/tabs-list:data-[state=active]:bg-background group-data-[variant=default]/tabs-list:data-[state=active]:text-foreground", lineIndicatorPositionClass(tabPosition), cardTriggerPositionClass(tabPosition), className) }));
+}
+export function TabPanel({ className, ...props }) {
+    return _jsx(Primitive.TabsContent, { ...props, className: cn("min-w-0 flex-1", className) });
+}

package/dist/core/tag.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
+export type TagColor = "default" | "primary" | "success" | "warning" | "error" | "info";
+export interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color" | "onChange"> {
+    /** A semantic color, or a CSS color string for a custom background. */
+    color?: TagColor | string;
+    icon?: ReactNode;
+    bordered?: boolean;
+    closable?: boolean;
+    closeIcon?: ReactNode;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    checkable?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+}
+export declare function Tag({ color, icon, bordered, closable, closeIcon, onClose, checkable, checked, defaultChecked, onChange, disabled, children, className, style, ...props }: TagProps): import("react").JSX.Element;
+export type CheckableTagProps = Omit<TagProps, "checkable">;
+export declare function CheckableTag(props: CheckableTagProps): import("react").JSX.Element;

package/dist/core/tag.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const colorClass = {
+    success: "border-success/30 bg-success-subtle text-success",
+    warning: "border-warning/30 bg-warning-subtle text-warning",
+    error: "border-destructive/30 bg-danger-subtle text-destructive",
+    info: "border-info/30 bg-info-subtle text-info",
+    primary: "border-primary/30 bg-accent text-accent-foreground",
+    default: "border-border bg-muted text-muted-foreground",
+};
+function isSemanticColor(color) {
+    return typeof color === "string" && color in colorClass;
+}
+export function Tag({ color = "default", icon, bordered = true, closable, closeIcon, onClose, checkable, checked, defaultChecked = false, onChange, disabled, children, className, style, ...props }) {
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const selected = checked ?? internalChecked;
+    const semanticColor = isSemanticColor(color);
+    const classes = cn("inline-flex min-h-6 items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium", bordered && "border", semanticColor ? colorClass[color] : "text-white", checkable && "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", checkable && selected && "border-primary bg-primary text-primary-foreground", disabled && "pointer-events-none opacity-50", className);
+    const content = _jsxs(_Fragment, { children: [icon ? _jsx("span", { className: "inline-flex [&_svg]:size-3.5", "aria-hidden": "true", children: icon }) : null, _jsx("span", { children: children }), closable ? _jsx("button", { type: "button", "aria-label": `关闭 ${String(children ?? "标签")}`, disabled: disabled, className: "-mr-1 inline-flex rounded p-0.5 hover:bg-black/10", onClick: (event) => { event.stopPropagation(); onClose?.(event); }, children: closeIcon ?? _jsx(X, { className: "size-3" }) }) : null] });
+    if (checkable)
+        return _jsx("button", { ...props, type: "button", role: "checkbox", "aria-checked": selected, disabled: disabled, className: classes, style: { ...style, backgroundColor: selected || semanticColor ? undefined : color }, onClick: () => { const next = !selected; if (checked === undefined)
+                setInternalChecked(next); onChange?.(next); }, children: content });
+    return _jsx("span", { ...props, className: classes, style: { ...style, backgroundColor: semanticColor ? undefined : color }, children: content });
+}
+export function CheckableTag(props) {
+    return _jsx(Tag, { ...props, checkable: true });
+}

package/dist/core/textarea.d.ts

@@ -0,0 +1,8 @@
+import { type TextareaHTMLAttributes } from "react";
+import type { ControlSize } from "./control-types.js";
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    size?: ControlSize;
+    status?: "error" | "warning";
+    showCount?: boolean;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/core/textarea.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState, } from "react";
+import { Textarea as PrimitiveTextarea } from "../components/primitives/textarea.js";
+import { cn } from "../lib/utils.js";
+export const Textarea = forwardRef(function Textarea({ size = "middle", status, showCount, maxLength, value, defaultValue, onChange, className, "aria-describedby": describedBy, ...props }, ref) {
+    const [count, setCount] = useState(() => String(value ?? defaultValue ?? "").length);
+    const countId = useId();
+    return (_jsxs("span", { className: "block min-w-0", children: [_jsx(PrimitiveTextarea, { ...props, ref: ref, value: value, defaultValue: defaultValue, maxLength: maxLength, onChange: (event) => {
+                    setCount(event.target.value.length);
+                    onChange?.(event);
+                }, "aria-invalid": status === "error" || props["aria-invalid"] || undefined, "aria-describedby": [describedBy, showCount ? countId : undefined]
+                    .filter(Boolean)
+                    .join(" ") || undefined, "data-size": size, "data-status": status, className: cn(size === "small" && "min-h-16", size === "large" && "min-h-28 text-base", status === "warning" && "border-warning focus-visible:ring-warning", className) }), showCount ? (_jsxs("span", { id: countId, className: "mt-1 block text-right text-xs text-muted-foreground", "aria-live": "polite", children: [value !== undefined ? String(value).length : count, maxLength !== undefined ? ` / ${maxLength}` : ""] })) : null] }));
+});

package/dist/core/time-picker.d.ts

@@ -0,0 +1,9 @@
+import { type InputHTMLAttributes } from "react";
+import { type ControlSize } from "./control-types.js";
+export interface TimePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Gouno control size. Native input's numeric size attribute is intentionally not exposed. */
+    size?: ControlSize;
+    /** Validation state only; business copy remains caller-owned. */
+    status?: "error" | "warning";
+}
+export declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/core/time-picker.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils.js";
+import { controlSizeClass } from "./control-types.js";
+export const TimePicker = forwardRef(function TimePicker({ size = "middle", status, className, disabled, ...props }, ref) {
+    const ariaInvalid = status === "error" ? true : props["aria-invalid"];
+    return (_jsx("input", { ...props, ref: ref, type: "time", disabled: disabled, "aria-invalid": ariaInvalid, "data-slot": "time-picker", "data-status": status, className: cn("w-full min-w-0 rounded-md border border-border bg-input px-3 text-foreground outline-none transition-[border-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", controlSizeClass(size), status === "error" && "border-destructive", status === "warning" && "border-warning", className) }));
+});

package/dist/core/timeline.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties, type HTMLAttributes, type Key, type ReactNode, type Ref } from "react";
+export type TimelineMode = "start" | "alternate" | "end";
+export type TimelineOrientation = "vertical" | "horizontal";
+export type TimelineVariant = "filled" | "outlined";
+export type TimelinePlacement = "start" | "end";
+export type TimelineSemantic = "root" | "item" | "wrapper" | "icon" | "section" | "header" | "title" | "content" | "rail";
+export interface TimelineItem {
+    key: Key;
+    title?: ReactNode;
+    content?: ReactNode;
+    icon?: ReactNode;
+    color?: string;
+    loading?: boolean;
+    placement?: TimelinePlacement;
+}
+export interface TimelineSemanticInfo {
+    props: Readonly<{
+        mode: TimelineMode;
+        orientation: TimelineOrientation;
+        reverse: boolean;
+        variant: TimelineVariant;
+    }>;
+}
+export type TimelineClassNames = Partial<Record<TimelineSemantic, string>> | ((info: TimelineSemanticInfo) => Partial<Record<TimelineSemantic, string>>);
+export type TimelineStyles = Partial<Record<TimelineSemantic, CSSProperties>> | ((info: TimelineSemanticInfo) => Partial<Record<TimelineSemantic, CSSProperties>>);
+export interface TimelineProps extends Omit<HTMLAttributes<HTMLOListElement>, "children"> {
+    items: readonly TimelineItem[];
+    mode?: TimelineMode;
+    orientation?: TimelineOrientation;
+    reverse?: boolean;
+    titleSpan?: number | string;
+    variant?: TimelineVariant;
+    classNames?: TimelineClassNames;
+    styles?: TimelineStyles;
+    ref?: Ref<HTMLOListElement>;
+}
+export declare function Timeline({ items, mode, orientation, reverse, titleSpan, variant, classNames, styles, className, style, ref, ...props }: TimelineProps): import("react").JSX.Element;

package/dist/core/timeline.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { cn } from "../lib/utils.js";
+import { Spinner } from "./spinner.js";
+function resolveColorStyle(color) {
+    if (!color)
+        return undefined;
+    return { "--timeline-color": color };
+}
+export function Timeline({ items, mode = "start", orientation = "vertical", reverse = false, titleSpan = 12, variant = "outlined", classNames, styles, className, style, ref, ...props }) {
+    const orderedItems = reverse ? [...items].reverse() : items;
+    const semanticInfo = {
+        props: { mode, orientation, reverse, variant },
+    };
+    const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
+    const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
+    const titleSize = typeof titleSpan === "number" ? `${titleSpan}rem` : titleSpan;
+    return (_jsx("ol", { ...props, ref: ref, "data-slot": "timeline", "data-mode": mode, "data-orientation": orientation, "data-variant": variant, className: cn("m-0 list-none p-0 text-sm", orientation === "vertical"
+            ? "flex flex-col gap-0"
+            : "grid auto-cols-fr grid-flow-col overflow-x-auto pb-2", semanticClassNames.root, className), style: {
+            ...(orientation === "vertical"
+                ? { "--timeline-title-span": titleSize }
+                : undefined),
+            ...semanticStyles.root,
+            ...style,
+        }, children: orderedItems.map((item, index) => {
+            const automaticPlacement = mode === "end"
+                ? "end"
+                : mode === "alternate" && index % 2 === 1
+                    ? "end"
+                    : "start";
+            const placement = item.placement ?? automaticPlacement;
+            const last = index === orderedItems.length - 1;
+            return (_jsx("li", { "data-slot": "timeline-item", "data-placement": placement, "data-loading": item.loading || undefined, className: cn("relative min-w-0", orientation === "vertical"
+                    ? "grid min-h-14 grid-cols-[minmax(0,var(--timeline-title-span))_1.5rem_minmax(0,1fr)] gap-x-3 pb-5 last:pb-0"
+                    : "grid min-w-44 grid-rows-[auto_1.5rem_auto] gap-y-2 px-2 text-center first:pl-0 last:pr-0", semanticClassNames.item), style: { ...resolveColorStyle(item.color), ...semanticStyles.item }, children: _jsxs("div", { "data-slot": "timeline-wrapper", className: cn("contents", semanticClassNames.wrapper), style: semanticStyles.wrapper, children: [_jsx("div", { "data-slot": "timeline-header", className: cn("min-w-0 text-muted-foreground", orientation === "vertical"
+                                ? cn("row-start-1 pt-0.5", placement === "start" ? "col-start-1 text-right" : "col-start-3 text-left")
+                                : "col-start-1 row-start-1", semanticClassNames.header), style: semanticStyles.header, children: item.title !== undefined && item.title !== null ? (_jsx("div", { "data-slot": "timeline-title", className: cn("break-words", semanticClassNames.title), style: semanticStyles.title, children: item.title })) : null }), _jsx("div", { "data-slot": "timeline-icon", "aria-hidden": item.loading || item.icon ? undefined : true, className: cn("relative z-10 flex items-center justify-center", orientation === "vertical"
+                                ? "col-start-2 row-start-1 size-6"
+                                : "col-start-1 row-start-2 mx-auto size-6", semanticClassNames.icon), style: semanticStyles.icon, children: item.loading ? (_jsx(Spinner, { className: "size-4" })) : item.icon ? (_jsx("span", { className: "flex size-5 items-center justify-center rounded-full bg-background text-[var(--timeline-color,var(--primary))]", children: item.icon })) : (_jsx("span", { className: cn("block size-3 rounded-full border-2", variant === "filled"
+                                    ? "border-[var(--timeline-color,var(--primary))] bg-[var(--timeline-color,var(--primary))]"
+                                    : "border-[var(--timeline-color,var(--primary))] bg-background") })) }), !last ? (_jsx("span", { "data-slot": "timeline-rail", "aria-hidden": "true", className: cn("absolute bg-border", orientation === "vertical"
+                                ? "bottom-0 left-[calc(var(--timeline-title-span)+1.5rem)] top-5 w-px -translate-x-1/2"
+                                : "left-1/2 right-[-50%] top-[calc(100%-2.25rem)] h-px", semanticClassNames.rail), style: semanticStyles.rail })) : null, _jsx("div", { "data-slot": "timeline-section", className: cn("min-w-0", orientation === "vertical"
+                                ? cn("row-start-1", placement === "start" ? "col-start-3" : "col-start-1 text-right")
+                                : "col-start-1 row-start-3", semanticClassNames.section), style: semanticStyles.section, children: item.content !== undefined && item.content !== null ? (_jsx("div", { "data-slot": "timeline-content", className: cn("break-words text-foreground", semanticClassNames.content), style: semanticStyles.content, children: item.content })) : null })] }) }, item.key));
+        }) }));
+}

package/dist/core/tour.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode, type Ref } from "react";
+export interface TourStep {
+    title: ReactNode;
+    description?: ReactNode;
+}
+export interface TourProps {
+    open: boolean;
+    steps: readonly TourStep[];
+    current?: number;
+    onChange?: (current: number) => void;
+    onClose: () => void;
+    previousText: string;
+    nextText: string;
+    finishText: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Tour({ open, steps, current, onChange, onClose, previousText, nextText, finishText, className, ref, }: TourProps): import("react").JSX.Element | null;

package/dist/core/tour.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../components/primitives/dialog.js";
+import { Button } from "./button.js";
+import { cn } from "../lib/utils.js";
+function normalizeIndex(index, length) {
+    if (length <= 0 || !Number.isFinite(index))
+        return 0;
+    return Math.min(Math.max(Math.trunc(index), 0), length - 1);
+}
+export function Tour({ open, steps, current, onChange, onClose, previousText, nextText, finishText, className, ref, }) {
+    const [innerCurrent, setInnerCurrent] = useState(0);
+    const restoreFocusRef = useRef(null);
+    const controlled = current !== undefined;
+    const index = normalizeIndex(controlled ? current : innerCurrent, steps.length);
+    const step = steps[index];
+    useEffect(() => {
+        if (!open && !controlled)
+            setInnerCurrent(0);
+    }, [controlled, open]);
+    const moveTo = (nextIndex) => {
+        const normalized = normalizeIndex(nextIndex, steps.length);
+        if (!controlled)
+            setInnerCurrent(normalized);
+        onChange?.(normalized);
+    };
+    const finish = () => {
+        if (!controlled)
+            setInnerCurrent(0);
+        onClose();
+    };
+    if (!open || !step)
+        return null;
+    return (_jsx(Dialog, { open: open, onOpenChange: (nextOpen) => {
+            if (!nextOpen)
+                onClose();
+        }, children: _jsxs(DialogContent, { ref: ref, showCloseButton: false, "data-slot": "tour-content", "data-step-index": index, onPointerDownOutside: (event) => event.preventDefault(), onOpenAutoFocus: () => {
+                const activeElement = document.activeElement;
+                restoreFocusRef.current =
+                    activeElement instanceof HTMLElement && activeElement !== document.body
+                        ? activeElement
+                        : null;
+            }, onCloseAutoFocus: (event) => {
+                const restoreFocusTarget = restoreFocusRef.current;
+                restoreFocusRef.current = null;
+                if (!restoreFocusTarget?.isConnected)
+                    return;
+                event.preventDefault();
+                restoreFocusTarget.focus();
+            }, className: cn("top-auto bottom-6 left-1/2 w-80 max-w-[calc(100vw-2rem)] -translate-x-1/2 translate-y-0 sm:max-w-[calc(100vw-2rem)]", className), children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: step.title }), step.description ? (_jsx(DialogDescription, { children: step.description })) : null] }), _jsxs("div", { className: "text-xs text-muted-foreground", "data-slot": "tour-progress", children: [index + 1, " / ", steps.length] }), _jsxs(DialogFooter, { children: [index > 0 ? (_jsx(Button, { size: "small", onClick: () => moveTo(index - 1), children: previousText })) : null, index < steps.length - 1 ? (_jsx(Button, { size: "small", variant: "solid", color: "primary", onClick: () => moveTo(index + 1), children: nextText })) : (_jsx(Button, { size: "small", variant: "solid", color: "primary", onClick: finish, children: finishText }))] })] }) }));
+}

package/dist/core/transfer.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface TransferItem {
+    key: string;
+    title: ReactNode;
+    disabled?: boolean;
+}
+export interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    dataSource: readonly TransferItem[];
+    targetKeys?: readonly string[];
+    defaultTargetKeys?: readonly string[];
+    onChange?: (keys: string[]) => void;
+    titles?: readonly [ReactNode, ReactNode];
+    operations?: readonly [string, string];
+    disabled?: boolean;
+}
+export declare const Transfer: import("react").ForwardRefExoticComponent<TransferProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/core/transfer.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo, useState, } from "react";
+import { Button } from "./button.js";
+import { cn } from "../lib/utils.js";
+const compatibilityOperations = ["→", "←"];
+export const Transfer = forwardRef(function Transfer({ dataSource, targetKeys, defaultTargetKeys = [], onChange, titles, operations = compatibilityOperations, disabled = false, className, ...props }, ref) {
+    const [inner, setInner] = useState(defaultTargetKeys);
+    const [selected, setSelected] = useState([]);
+    const sourceLabelId = useId();
+    const targetLabelId = useId();
+    const current = targetKeys ?? inner;
+    const targetKeySet = useMemo(() => new Set(current), [current]);
+    const itemByKey = useMemo(() => new Map(dataSource.map((item) => [item.key, item])), [dataSource]);
+    const sourceItems = dataSource.filter((item) => !targetKeySet.has(item.key));
+    const targetItems = dataSource.filter((item) => targetKeySet.has(item.key));
+    const movableSourceKeys = selected.filter((key) => {
+        const item = itemByKey.get(key);
+        return item && !item.disabled && !targetKeySet.has(key);
+    });
+    const movableTargetKeys = selected.filter((key) => {
+        const item = itemByKey.get(key);
+        return item && !item.disabled && targetKeySet.has(key);
+    });
+    const commit = (keys, movedKeys) => {
+        if (targetKeys === undefined)
+            setInner(keys);
+        onChange?.(keys);
+        const moved = new Set(movedKeys);
+        setSelected((previous) => previous.filter((key) => !moved.has(key)));
+    };
+    const toggle = (key, checked) => {
+        setSelected((previous) => checked
+            ? previous.includes(key)
+                ? previous
+                : [...previous, key]
+            : previous.filter((value) => value !== key));
+    };
+    const renderList = (items, side, labelId, title) => {
+        const labelled = title !== undefined && title !== null;
+        return (_jsxs("div", { role: labelled ? "group" : undefined, "aria-labelledby": labelled ? labelId : undefined, "data-slot": `transfer-${side}`, className: "min-w-0 rounded-md border bg-background", children: [labelled ? (_jsx("div", { id: labelId, "data-slot": "transfer-title", className: "border-b px-3 py-2 text-sm font-medium", children: title })) : null, _jsx("div", { "data-slot": "transfer-list", className: "max-h-48 overflow-auto p-2", children: items.map((item) => (_jsxs("label", { "data-slot": "transfer-item", className: cn("flex items-center gap-2 rounded p-1 text-sm", !disabled && !item.disabled && "hover:bg-accent", (disabled || item.disabled) && "opacity-50"), children: [_jsx("input", { type: "checkbox", disabled: disabled || item.disabled, checked: selected.includes(item.key), onChange: (event) => toggle(item.key, event.target.checked) }), _jsx("span", { children: item.title })] }, item.key))) })] }));
+    };
+    return (_jsxs("div", { ...props, ref: ref, "data-slot": "transfer", "data-disabled": disabled || undefined, "aria-disabled": disabled || undefined, className: cn("grid min-w-0 gap-3 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] sm:items-center", className), children: [renderList(sourceItems, "source", sourceLabelId, titles?.[0]), _jsxs("div", { "data-slot": "transfer-operations", className: "flex justify-center gap-2 sm:flex-col", children: [_jsx(Button, { size: "small", disabled: disabled || movableSourceKeys.length === 0, onClick: () => commit([
+                            ...current,
+                            ...movableSourceKeys.filter((key) => !targetKeySet.has(key)),
+                        ], movableSourceKeys), children: operations[0] }), _jsx(Button, { size: "small", disabled: disabled || movableTargetKeys.length === 0, onClick: () => commit(current.filter((key) => !movableTargetKeys.includes(key)), movableTargetKeys), children: operations[1] })] }), renderList(targetItems, "target", targetLabelId, titles?.[1])] }));
+});

package/dist/core/tree-select.d.ts

@@ -0,0 +1,19 @@
+import { type SelectHTMLAttributes } from "react";
+import { type ControlSize } from "./control-types.js";
+export interface TreeSelectNode {
+    value: string;
+    title: string;
+    disabled?: boolean;
+    children?: readonly TreeSelectNode[];
+}
+export interface TreeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "value" | "defaultValue" | "multiple" | "onChange"> {
+    treeData: readonly TreeSelectNode[];
+    value?: string | readonly string[];
+    defaultValue?: string | readonly string[];
+    onChange?: (value: string | string[]) => void;
+    placeholder?: string;
+    multiple?: boolean;
+    size?: ControlSize;
+    status?: "error" | "warning";
+}
+export declare const TreeSelect: import("react").ForwardRefExoticComponent<TreeSelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/core/tree-select.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../lib/utils.js";
+import { controlSizeClass } from "./control-types.js";
+function flatten(nodes, depth = 0) {
+    return nodes.flatMap((node) => [
+        { ...node, depth },
+        ...flatten(node.children ?? [], depth + 1),
+    ]);
+}
+export const TreeSelect = forwardRef(function TreeSelect({ treeData, value, defaultValue, onChange, placeholder, disabled = false, multiple = false, size = "middle", status, className, ...props }, ref) {
+    const nodes = flatten(treeData);
+    const invalid = status === "error" ? true : props["aria-invalid"];
+    return (_jsxs("select", { ...props, ref: ref, multiple: multiple, disabled: disabled, value: value, defaultValue: defaultValue, "aria-disabled": disabled || props["aria-disabled"] || undefined, "aria-invalid": invalid, "data-slot": "tree-select", "data-status": status, onChange: (event) => onChange?.(multiple
+            ? Array.from(event.currentTarget.selectedOptions, (option) => option.value)
+            : event.currentTarget.value), className: cn("rounded-md border border-border bg-input px-3 outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", controlSizeClass(size), multiple && "h-auto min-h-24 py-2", status === "error" &&
+            "border-destructive focus-visible:ring-destructive", status === "warning" &&
+            "border-warning focus-visible:ring-warning", className), children: [!multiple && placeholder !== undefined ? (_jsx("option", { value: "", disabled: true, "data-slot": "tree-select-placeholder", children: placeholder })) : null, nodes.map((node) => (_jsx("option", { value: node.value, disabled: node.disabled, "data-slot": "tree-select-option", "data-depth": node.depth, children: `${"\u00A0\u00A0".repeat(node.depth)}${node.title}` }, node.value)))] }));
+});