@gouno/ui 0.3.2

package/dist/core/collapse.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useState, } from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function isKeyArray(value) {
+    return Array.isArray(value);
+}
+function normalizeActiveKeys(value, accordion) {
+    const keys = value === undefined ? [] : isKeyArray(value) ? [...value] : [value];
+    return accordion ? keys.slice(0, 1) : keys;
+}
+function includesKey(keys, key) {
+    return keys.some((candidate) => candidate === key);
+}
+function sameKeys(a, b) {
+    return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+function keyToken(key) {
+    return `${typeof key === "number" ? "n" : "s"}-${String(key)}`.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+const sizeClasses = {
+    small: {
+        header: "min-h-9 px-3 py-2 text-sm",
+        body: "px-3 pb-3 text-sm",
+    },
+    middle: {
+        header: "min-h-11 px-4 py-3 text-sm",
+        body: "px-4 pb-4 text-sm",
+    },
+    large: {
+        header: "min-h-13 px-5 py-4 text-base",
+        body: "px-5 pb-5 text-sm",
+    },
+};
+export function Collapse({ items, activeKey, defaultActiveKey, accordion = false, bordered = true, collapsible = "header", destroyOnHidden = false, expandIcon, expandIconPlacement = "start", ghost = false, size = "middle", onChange, classNames, styles, className, style, ref, ...props }) {
+    const instanceId = useId();
+    const [internalActiveKeys, setInternalActiveKeys] = useState(() => normalizeActiveKeys(defaultActiveKey, accordion));
+    const controlledActiveKeys = useMemo(() => normalizeActiveKeys(activeKey, accordion), [activeKey, accordion]);
+    const activeKeys = activeKey === undefined ? internalActiveKeys : controlledActiveKeys;
+    const [renderedKeys, setRenderedKeys] = useState(() => [
+        ...new Set([
+            ...normalizeActiveKeys(defaultActiveKey, accordion),
+            ...normalizeActiveKeys(activeKey, accordion),
+            ...items.filter((item) => item.forceRender).map((item) => item.key),
+        ]),
+    ]);
+    useEffect(() => {
+        const newlyVisible = [
+            ...activeKeys,
+            ...items.filter((item) => item.forceRender).map((item) => item.key),
+        ];
+        setRenderedKeys((keys) => {
+            const nextKeys = [...new Set([...keys, ...newlyVisible])];
+            return sameKeys(keys, nextKeys) ? keys : nextKeys;
+        });
+    }, [activeKeys, items]);
+    const semanticInfo = {
+        props: { accordion, bordered, ghost, size },
+    };
+    const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
+    const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
+    const commitActiveKeys = (nextKeys) => {
+        if (activeKey === undefined)
+            setInternalActiveKeys(nextKeys);
+        onChange?.(accordion ? (nextKeys[0] ?? []) : nextKeys);
+    };
+    const toggleItem = (item) => {
+        const active = includesKey(activeKeys, item.key);
+        const nextKeys = active
+            ? activeKeys.filter((key) => key !== item.key)
+            : accordion
+                ? [item.key]
+                : [...activeKeys, item.key];
+        if (!active) {
+            setRenderedKeys((keys) => includesKey(keys, item.key) ? keys : [...keys, item.key]);
+        }
+        commitActiveKeys(nextKeys);
+    };
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "collapse", "data-accordion": accordion || undefined, "data-size": size, "data-ghost": ghost || undefined, className: cn("min-w-0 overflow-hidden rounded-lg", bordered && !ghost && "border", !ghost && "bg-background", semanticClassNames.root, className), style: { ...semanticStyles.root, ...style }, children: items.map((item, index) => {
+            const active = includesKey(activeKeys, item.key);
+            const itemCollapsible = item.collapsible ?? collapsible;
+            const showArrow = item.showArrow ?? true;
+            const iconOnly = itemCollapsible === "icon";
+            const disabled = itemCollapsible === "disabled" || (iconOnly && !showArrow);
+            const token = keyToken(item.key);
+            const headerId = `${instanceId}-header-${token}`;
+            const labelId = `${instanceId}-label-${token}`;
+            const bodyId = `${instanceId}-body-${token}`;
+            const shouldRender = item.forceRender ||
+                active ||
+                (!destroyOnHidden && includesKey(renderedKeys, item.key));
+            const arrow = showArrow ? (_jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center [&_svg]:size-4", children: expandIcon ? (expandIcon({ active, item })) : (_jsx(ChevronRight, { className: cn("transition-transform duration-200", active && "rotate-90") })) })) : null;
+            const headerContent = (_jsxs(_Fragment, { children: [expandIconPlacement === "start" ? arrow : null, _jsx("span", { id: labelId, className: "min-w-0 flex-1 text-left font-medium", children: item.label }), expandIconPlacement === "end" ? arrow : null] }));
+            return (_jsxs("section", { "data-slot": "collapse-item", "data-active": active || undefined, className: cn("min-w-0", index > 0 && !ghost && "border-t", ghost && index > 0 && "border-t border-transparent", semanticClassNames.item), style: semanticStyles.item, children: [_jsxs("div", { "data-slot": "collapse-header", className: cn("flex min-w-0 items-center", sizeClasses[size].header, semanticClassNames.header, item.classNames?.header), style: { ...semanticStyles.header, ...item.styles?.header }, children: [iconOnly ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", id: headerId, "aria-expanded": active, "aria-controls": bodyId, disabled: disabled, "aria-label": active ? "Collapse panel" : "Expand panel", onClick: () => toggleItem(item), className: "mr-2 inline-flex size-7 shrink-0 items-center justify-center rounded-md outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", children: arrow }), _jsx("span", { id: labelId, className: "min-w-0 flex-1 font-medium", children: item.label })] })) : (_jsx("button", { type: "button", id: headerId, "aria-expanded": active, "aria-controls": bodyId, disabled: disabled, onClick: () => toggleItem(item), className: "flex min-w-0 flex-1 items-center gap-2 rounded-sm text-inherit outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", children: headerContent })), item.extra !== undefined && item.extra !== null ? (_jsx("div", { "data-slot": "collapse-extra", className: "ml-3 shrink-0", onClick: (event) => event.stopPropagation(), children: item.extra })) : null] }), shouldRender ? (_jsx("div", { id: bodyId, role: "region", "aria-labelledby": labelId, hidden: !active, "data-slot": "collapse-body", className: cn("text-muted-foreground", sizeClasses[size].body, semanticClassNames.body, item.classNames?.body), style: { ...semanticStyles.body, ...item.styles?.body }, children: item.children })) : null] }, item.key));
+        }) }));
+}

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

@@ -0,0 +1,9 @@
+import { type InputHTMLAttributes } from "react";
+import { type ControlSize } from "./control-types.js";
+export interface ColorPickerProps 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 ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/core/color-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 ColorPicker = forwardRef(function ColorPicker({ size = "middle", status, className, disabled, ...props }, ref) {
+    const ariaInvalid = status === "error" ? true : props["aria-invalid"];
+    return (_jsx("input", { ...props, ref: ref, type: "color", disabled: disabled, "aria-invalid": ariaInvalid, "data-slot": "color-picker", "data-status": status, className: cn("inline-block w-14 cursor-pointer rounded-md border border-border bg-input p-1 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/config-provider.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import { type ComponentLocale } from "./locale.js";
+export interface ConfigProviderProps {
+    children?: ReactNode;
+    /** Complete language pack. An omitted pack inherits the nearest provider. */
+    locale?: ComponentLocale;
+}
+export declare function ConfigProvider({ children, locale }: ConfigProviderProps): import("react").JSX.Element;
+/** Internal component integration; not a second public configuration API. */
+export declare function useComponentLocale<K extends Exclude<keyof ComponentLocale, "locale">>(component: K, override?: Partial<ComponentLocale[K]>): ComponentLocale[K];

package/dist/core/config-provider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { enUS } from "./locale.js";
+const LocaleContext = createContext(enUS);
+export function ConfigProvider({ children, locale }) {
+    const parent = useContext(LocaleContext);
+    return _jsx(LocaleContext.Provider, { value: locale ?? parent, children: children });
+}
+/** Internal component integration; not a second public configuration API. */
+export function useComponentLocale(component, override) {
+    const pack = useContext(LocaleContext);
+    const definedOverride = Object.fromEntries(Object.entries(override ?? {}).filter(([, value]) => value !== undefined));
+    return { ...enUS[component], ...pack[component], ...definedOverride };
+}

package/dist/core/control-types.d.ts

@@ -0,0 +1,2 @@
+export type ControlSize = "small" | "middle" | "large";
+export declare function controlSizeClass(size: ControlSize): string;

package/dist/core/control-types.js

@@ -0,0 +1,7 @@
+export function controlSizeClass(size) {
+    return {
+        small: "h-8 text-sm",
+        middle: "h-9 text-sm",
+        large: "h-11 text-base",
+    }[size];
+}

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

@@ -0,0 +1,13 @@
+import type { DatePickerLocale } from "./locale.js";
+import { type InputHTMLAttributes } from "react";
+import { type ControlSize } from "./control-types.js";
+export interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "defaultValue" | "onChange"> {
+    locale?: Partial<DatePickerLocale>;
+    value?: string;
+    defaultValue?: string;
+    size?: ControlSize;
+    status?: "error" | "warning";
+    allowClear?: boolean;
+    onChange?: (value: string, date: Date | null) => void;
+}
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/core/date-picker.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentLocale } from "./config-provider.js";
+import { forwardRef, useState } from "react";
+import { CalendarDays, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { controlSizeClass } from "./control-types.js";
+export const DatePicker = forwardRef(function DatePicker({ locale, value, defaultValue = "", size = "middle", status, allowClear = true, onChange, className, disabled, readOnly, ...props }, ref) {
+    const text = useComponentLocale("datePicker", locale);
+    const [inner, setInner] = useState(defaultValue);
+    const current = value === undefined ? inner : value;
+    const update = (next) => { if (value === undefined)
+        setInner(next); onChange?.(next, next ? new Date(`${next}T00:00:00`) : null); };
+    return _jsxs("span", { "data-slot": "date-picker", "data-status": status, className: cn("relative inline-flex w-full min-w-0 items-center rounded-md border border-border bg-input focus-within:ring-2 focus-within:ring-ring", status === "error" && "border-destructive", status === "warning" && "border-warning", disabled && "opacity-50", className), children: [_jsx(CalendarDays, { "aria-hidden": "true", className: "pointer-events-none absolute left-3 size-4 text-muted-foreground" }), _jsx("input", { ...props, ref: ref, type: "date", value: current, disabled: disabled, readOnly: readOnly, "aria-invalid": status === "error" || props["aria-invalid"] || undefined, className: cn("w-full min-w-0 appearance-none border-0 bg-transparent pl-9 outline-none", controlSizeClass(size), allowClear && current && !disabled && !readOnly ? "pr-9" : "pr-3"), onChange: (event) => update(event.target.value) }), allowClear && current && !disabled && !readOnly ? _jsx("button", { type: "button", "aria-label": text.clearLabel, className: "absolute right-2 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground", onClick: () => update(""), children: _jsx(X, { className: "size-3.5" }) }) : null] });
+});

package/dist/core/date-range-picker.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithRef, type HTMLAttributes, type ReactNode } from "react";
+import { type ControlSize } from "./control-types.js";
+export type DateRange = {
+    start?: string;
+    end?: string;
+};
+export type DateRangePickerInputProps = Omit<ComponentPropsWithRef<"input">, "type" | "value" | "defaultValue" | "onChange" | "size">;
+export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Controlled start date in native yyyy-mm-dd form. */
+    start?: string;
+    /** Controlled end date in native yyyy-mm-dd form. */
+    end?: string;
+    /** Reports the complete proposed range whenever either native input changes. */
+    onChange?: (range: DateRange) => void;
+    /** Shared Gouno control size for both date inputs. */
+    size?: ControlSize;
+    /** Shared validation state; error marks both inputs aria-invalid. */
+    status?: "error" | "warning";
+    /** Native attributes, ARIA naming and optional ref for the start input only. */
+    startInputProps?: DateRangePickerInputProps;
+    /** Native attributes, ARIA naming and optional ref for the end input only. */
+    endInputProps?: DateRangePickerInputProps;
+    /** Visual separator between the two date inputs. */
+    separator?: ReactNode;
+}
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/core/date-range-picker.js

@@ -0,0 +1,10 @@
+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";
+const dateInputClass = "min-w-0 flex-1 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";
+export const DateRangePicker = forwardRef(function DateRangePicker({ start, end, onChange, size = "middle", status, startInputProps, endInputProps, separator = "–", className, ...rootProps }, ref) {
+    const { className: startClassName, "aria-invalid": startAriaInvalid, ...startNativeProps } = startInputProps ?? {};
+    const { className: endClassName, "aria-invalid": endAriaInvalid, ...endNativeProps } = endInputProps ?? {};
+    return (_jsxs("div", { ...rootProps, ref: ref, "data-slot": "date-range-picker", "data-status": status, className: cn("flex w-full items-center gap-2", className), children: [_jsx("input", { ...startNativeProps, type: "date", value: start ?? "", "aria-invalid": status === "error" ? true : startAriaInvalid, "data-slot": "date-range-picker-start", className: cn(dateInputClass, controlSizeClass(size), status === "error" && "border-destructive", status === "warning" && "border-warning", startClassName), onChange: (event) => onChange?.({ start: event.currentTarget.value || undefined, end }) }), _jsx("span", { "aria-hidden": "true", "data-slot": "date-range-picker-separator", children: separator }), _jsx("input", { ...endNativeProps, type: "date", value: end ?? "", "aria-invalid": status === "error" ? true : endAriaInvalid, "data-slot": "date-range-picker-end", className: cn(dateInputClass, controlSizeClass(size), status === "error" && "border-destructive", status === "warning" && "border-warning", endClassName), onChange: (event) => onChange?.({ start, end: event.currentTarget.value || undefined }) })] }));
+});

package/dist/core/descriptions.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties, type HTMLAttributes, type Key, type ReactNode, type Ref } from "react";
+export type DescriptionsSize = "small" | "medium" | "large";
+export type DescriptionsLayout = "horizontal" | "vertical";
+export type DescriptionsBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type DescriptionsColumnCount = 1 | 2 | 3 | 4 | 5 | 6;
+export type DescriptionsColumn = DescriptionsColumnCount | Partial<Record<DescriptionsBreakpoint, DescriptionsColumnCount>>;
+export type DescriptionsSpanValue = DescriptionsColumnCount | "filled";
+export type DescriptionsSpan = DescriptionsSpanValue | Partial<Record<DescriptionsBreakpoint, DescriptionsSpanValue>>;
+export type DescriptionsSemantic = "root" | "header" | "title" | "extra" | "body" | "item" | "label" | "content";
+export interface DescriptionsItem {
+    key: Key;
+    label: ReactNode;
+    children: ReactNode;
+    span?: DescriptionsSpan;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface DescriptionsSemanticInfo {
+    props: Readonly<{
+        bordered: boolean;
+        colon: boolean;
+        layout: DescriptionsLayout;
+        size: DescriptionsSize;
+    }>;
+}
+export type DescriptionsClassNames = Partial<Record<DescriptionsSemantic, string>> | ((info: DescriptionsSemanticInfo) => Partial<Record<DescriptionsSemantic, string>>);
+export type DescriptionsStyles = Partial<Record<DescriptionsSemantic, CSSProperties>> | ((info: DescriptionsSemanticInfo) => Partial<Record<DescriptionsSemantic, CSSProperties>>);
+export interface DescriptionsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    title?: ReactNode;
+    extra?: ReactNode;
+    items?: readonly DescriptionsItem[];
+    bordered?: boolean;
+    colon?: boolean;
+    column?: DescriptionsColumn;
+    layout?: DescriptionsLayout;
+    size?: DescriptionsSize;
+    classNames?: DescriptionsClassNames;
+    styles?: DescriptionsStyles;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Descriptions({ title, extra, items, bordered, colon, column, layout, size, classNames, styles, className, style, ref, ...props }: DescriptionsProps): import("react").JSX.Element;

package/dist/core/descriptions.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { cn } from "../lib/utils.js";
+const baseColumns = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+};
+const smColumns = {
+    1: "sm:grid-cols-1",
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-3",
+    4: "sm:grid-cols-4",
+    5: "sm:grid-cols-5",
+    6: "sm:grid-cols-6",
+};
+const mdColumns = {
+    1: "md:grid-cols-1",
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-4",
+    5: "md:grid-cols-5",
+    6: "md:grid-cols-6",
+};
+const lgColumns = {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+    5: "lg:grid-cols-5",
+    6: "lg:grid-cols-6",
+};
+const xlColumns = {
+    1: "xl:grid-cols-1",
+    2: "xl:grid-cols-2",
+    3: "xl:grid-cols-3",
+    4: "xl:grid-cols-4",
+    5: "xl:grid-cols-5",
+    6: "xl:grid-cols-6",
+};
+const xxlColumns = {
+    1: "2xl:grid-cols-1",
+    2: "2xl:grid-cols-2",
+    3: "2xl:grid-cols-3",
+    4: "2xl:grid-cols-4",
+    5: "2xl:grid-cols-5",
+    6: "2xl:grid-cols-6",
+};
+const baseSpans = {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+    5: "col-span-5",
+    6: "col-span-6",
+};
+const smSpans = {
+    1: "sm:col-span-1",
+    2: "sm:col-span-2",
+    3: "sm:col-span-3",
+    4: "sm:col-span-4",
+    5: "sm:col-span-5",
+    6: "sm:col-span-6",
+};
+const mdSpans = {
+    1: "md:col-span-1",
+    2: "md:col-span-2",
+    3: "md:col-span-3",
+    4: "md:col-span-4",
+    5: "md:col-span-5",
+    6: "md:col-span-6",
+};
+const lgSpans = {
+    1: "lg:col-span-1",
+    2: "lg:col-span-2",
+    3: "lg:col-span-3",
+    4: "lg:col-span-4",
+    5: "lg:col-span-5",
+    6: "lg:col-span-6",
+};
+const xlSpans = {
+    1: "xl:col-span-1",
+    2: "xl:col-span-2",
+    3: "xl:col-span-3",
+    4: "xl:col-span-4",
+    5: "xl:col-span-5",
+    6: "xl:col-span-6",
+};
+const xxlSpans = {
+    1: "2xl:col-span-1",
+    2: "2xl:col-span-2",
+    3: "2xl:col-span-3",
+    4: "2xl:col-span-4",
+    5: "2xl:col-span-5",
+    6: "2xl:col-span-6",
+};
+const paddingBySize = {
+    small: "px-3 py-2",
+    medium: "px-4 py-3",
+    large: "px-5 py-4",
+};
+function columnClassName(column) {
+    if (typeof column === "number")
+        return baseColumns[column];
+    return cn(baseColumns[column.xs ?? 1], column.sm && smColumns[column.sm], column.md && mdColumns[column.md], column.lg && lgColumns[column.lg], column.xl && xlColumns[column.xl], column.xxl && xxlColumns[column.xxl]);
+}
+function spanClassName(span) {
+    if (!span)
+        return baseSpans[1];
+    if (span === "filled")
+        return "col-span-full";
+    if (typeof span === "number")
+        return baseSpans[span];
+    const base = span.xs ?? 1;
+    return cn(base === "filled" ? "col-span-full" : baseSpans[base], span.sm && (span.sm === "filled" ? "sm:col-span-full" : smSpans[span.sm]), span.md && (span.md === "filled" ? "md:col-span-full" : mdSpans[span.md]), span.lg && (span.lg === "filled" ? "lg:col-span-full" : lgSpans[span.lg]), span.xl && (span.xl === "filled" ? "xl:col-span-full" : xlSpans[span.xl]), span.xxl &&
+        (span.xxl === "filled" ? "2xl:col-span-full" : xxlSpans[span.xxl]));
+}
+export function Descriptions({ title, extra, items = [], bordered = false, colon = true, column = 3, layout = "horizontal", size = "large", classNames, styles, className, style, ref, ...props }) {
+    const semanticInfo = {
+        props: { bordered, colon, layout, size },
+    };
+    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": "descriptions", "data-size": size, "data-layout": layout, "data-bordered": bordered || undefined, className: cn("w-full min-w-0", semanticClassNames.root, className), style: { ...semanticStyles.root, ...style }, children: [title !== undefined || extra !== undefined ? (_jsxs("div", { "data-slot": "descriptions-header", className: cn("mb-4 flex min-w-0 items-start justify-between gap-4", semanticClassNames.header), style: semanticStyles.header, children: [_jsx("div", { "data-slot": "descriptions-title", className: cn("min-w-0 text-base font-semibold", semanticClassNames.title), style: semanticStyles.title, children: title }), extra !== undefined && extra !== null ? (_jsx("div", { "data-slot": "descriptions-extra", className: cn("shrink-0", semanticClassNames.extra), style: semanticStyles.extra, children: extra })) : null] })) : null, _jsx("dl", { "data-slot": "descriptions-body", className: cn("grid min-w-0", columnClassName(column), bordered
+                    ? "gap-px overflow-hidden rounded-lg border bg-border"
+                    : "gap-x-6 gap-y-4", semanticClassNames.body), style: semanticStyles.body, children: items.map((item) => (_jsxs("div", { "data-slot": "descriptions-item", className: cn("min-w-0", spanClassName(item.span), layout === "horizontal"
+                        ? "grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] items-stretch"
+                        : "flex flex-col", bordered && "bg-background", semanticClassNames.item, item.className), style: { ...semanticStyles.item, ...item.style }, children: [_jsxs("dt", { "data-slot": "descriptions-label", className: cn("min-w-0 text-muted-foreground", bordered ? cn(padding, "bg-muted/50 font-medium") : "font-medium", layout === "vertical" && !bordered && "mb-1", semanticClassNames.label), style: semanticStyles.label, children: [item.label, colon && layout === "horizontal" ? _jsx("span", { "aria-hidden": "true", children: ":" }) : null] }), _jsx("dd", { "data-slot": "descriptions-content", className: cn("min-w-0 break-words text-foreground", bordered && padding, semanticClassNames.content), style: semanticStyles.content, children: item.children })] }, item.key))) })] }));
+}

package/dist/core/drawer.d.ts

@@ -0,0 +1,9 @@
+import type { ModalProps } from "./modal.js";
+export type DrawerPlacement = "top" | "right" | "bottom" | "left";
+export interface DrawerProps extends Omit<ModalProps, "maxWidth" | "size" | "centered" | "onOk" | "onCancel" | "okText" | "cancelText" | "confirmLoading" | "okButtonProps" | "cancelButtonProps"> {
+    extra?: import("react").ReactNode;
+    placement?: DrawerPlacement;
+    width?: number | string;
+    height?: number | string;
+}
+export declare function Drawer({ open, defaultOpen, title, description, children, footer, onClose, onOpenChange, afterOpenChange, className, closeOnEsc, closeOnBackdrop, showCloseButton, "aria-label": ariaLabel, contentStyle, placement, width, height, loading, mask, zIndex, destroyOnClose, extra, styles, }: DrawerProps): import("react").JSX.Element;

package/dist/core/drawer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useRef, useState, } from "react";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "../components/primitives/sheet.js";
+import { useOverlayBody } from "../hooks/use-overlay-body.js";
+import { cn } from "../lib/utils.js";
+const closeText = () => typeof document !== "undefined" &&
+    document.documentElement.lang.startsWith("en")
+    ? "Close"
+    : "关闭";
+export function Drawer({ open, defaultOpen = false, title, description, children, footer, onClose, onOpenChange, afterOpenChange, className, closeOnEsc = true, closeOnBackdrop = true, showCloseButton = true, "aria-label": ariaLabel, contentStyle, placement = "right", width = 378, height = 378, loading = false, mask = true, zIndex = 50, destroyOnClose = true, extra, styles, }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const previousFocus = useRef(null);
+    const controlled = open !== undefined;
+    const visible = open ?? internalOpen;
+    const retained = useOverlayBody(children, visible, destroyOnClose);
+    const changeOpen = (next) => {
+        if (!controlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+        if (!next)
+            onClose?.();
+    };
+    useEffect(() => {
+        if (visible)
+            previousFocus.current =
+                document.activeElement instanceof HTMLElement
+                    ? document.activeElement
+                    : null;
+        return () => {
+            if (previousFocus.current?.isConnected)
+                previousFocus.current.focus();
+        };
+    }, [visible]);
+    const notifyOpenChange = useEffectEvent((next) => afterOpenChange?.(next));
+    useEffect(() => {
+        notifyOpenChange(visible);
+    }, [visible]);
+    const sidePlacement = placement === "left" || placement === "right";
+    const dimensionStyle = sidePlacement ? { width } : { height };
+    return (_jsxs(_Fragment, { children: [retained.portal, _jsx(Sheet, { open: visible, onOpenChange: changeOpen, children: _jsxs(SheetContent, { side: placement, showCloseButton: showCloseButton, className: cn("flex flex-col gap-0", sidePlacement ? "max-w-[calc(100vw-1rem)]" : "max-w-none", className), style: {
+                        ...dimensionStyle,
+                        maxWidth: sidePlacement ? "calc(100vw - 1rem)" : "100vw",
+                        maxHeight: "100dvh",
+                        zIndex,
+                        ...contentStyle,
+                    }, mask: mask, zIndex: zIndex, maskStyle: styles?.mask, onEscapeKeyDown: (event) => {
+                        if (!closeOnEsc)
+                            event.preventDefault();
+                    }, onPointerDownOutside: (event) => {
+                        if (!closeOnBackdrop)
+                            event.preventDefault();
+                    }, onCloseAutoFocus: (event) => {
+                        if (previousFocus.current?.isConnected) {
+                            event.preventDefault();
+                            previousFocus.current.focus();
+                        }
+                    }, children: [_jsxs(SheetHeader, { className: "border-b p-5 pr-12", style: styles?.header, children: [extra && _jsx("div", { className: "flex justify-end", children: extra }), _jsx(SheetTitle, { children: title || ariaLabel || closeText() }), description ? (_jsx(SheetDescription, { children: description })) : null] }), _jsxs("div", { className: "min-h-0 flex-1 overflow-auto p-5", style: styles?.body, "aria-busy": loading || undefined, children: [loading && (_jsx("div", { role: "status", className: "py-8 text-center text-sm text-muted-foreground", children: "\u52A0\u8F7D\u4E2D\u2026" })), _jsx("div", { hidden: loading, children: retained.body })] }), footer != null && (_jsx("div", { className: "flex flex-wrap justify-end gap-3 border-t p-5", style: styles?.footer, children: footer }))] }) })] }));
+}

package/dist/core/empty.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface EmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    icon?: ReactNode;
+}
+export declare function Empty({ title, description, action, icon, className, ...props }: EmptyProps): import("react").JSX.Element;

package/dist/core/empty.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export function Empty({ title, description, action, icon, className, ...props }) {
+    return (_jsxs("div", { ...props, "data-slot": "empty", className: cn("flex min-h-32 flex-col items-center justify-center gap-2 py-8 text-center", className), children: [icon ? _jsx("div", { "data-slot": "empty-icon", children: icon }) : null, title != null ? (_jsx("div", { "data-slot": "empty-title", className: "font-semibold text-foreground", children: title })) : null, description != null ? (_jsx("div", { "data-slot": "empty-description", className: "max-w-lg text-sm text-muted-foreground", children: description })) : null, action != null ? (_jsx("div", { "data-slot": "empty-action", className: "pt-1", children: action })) : null] }));
+}

package/dist/core/feedback.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from "react";
+import { Skeleton as PrimitiveSkeleton } from "../components/primitives/skeleton.js";
+type SkeletonProps = ComponentProps<typeof PrimitiveSkeleton>;
+export declare function Skeleton({ "aria-hidden": ariaHidden, ...props }: SkeletonProps): import("react").JSX.Element;
+export {};

package/dist/core/feedback.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton as PrimitiveSkeleton } from "../components/primitives/skeleton.js";
+export function Skeleton({ "aria-hidden": ariaHidden, ...props }) {
+    return _jsx(PrimitiveSkeleton, { ...props, "aria-hidden": ariaHidden ?? true });
+}

package/dist/core/field.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { FieldGroup, FieldLabel, FieldLegend, FieldSet } from "../components/primitives/field.js";
+export { FieldGroup, FieldSet, FieldLegend, FieldLabel };
+export interface FieldProps {
+    label: ReactNode;
+    children: ReactNode;
+    id?: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    className?: string;
+    hideLabel?: boolean;
+}
+export declare function Field({ label, children, id, hint, error, required, className, hideLabel }: FieldProps): import("react").JSX.Element;
+export declare const FormField: typeof Field;

package/dist/core/field.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useId } from "react";
+import { Field as FieldRoot, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "../components/primitives/field.js";
+import { cn } from "../lib/utils.js";
+export { FieldGroup, FieldSet, FieldLegend, FieldLabel };
+export function Field({ label, children, id, hint, error, required = false, className, hideLabel = false }) {
+    const generated = useId();
+    const child = isValidElement(children) ? children : null;
+    const controlId = id || child?.props.id || `field-${generated}`;
+    const hintId = hint ? `${controlId}-hint` : undefined;
+    const errorId = error ? `${controlId}-error` : undefined;
+    return (_jsxs(FieldRoot, { "data-invalid": error ? true : undefined, className: cn("field min-w-0", className), children: [_jsxs(FieldLabel, { htmlFor: controlId, className: hideLabel ? "sr-only" : undefined, children: [label, required ? _jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" }) : null] }), child ? cloneElement(child, {
+                id: controlId,
+                required: child.props.required ?? required,
+                "aria-describedby": [child.props["aria-describedby"], hintId, errorId].filter(Boolean).join(" ") || undefined,
+                "aria-invalid": child.props["aria-invalid"] || Boolean(error) || undefined,
+            }) : children, hint ? _jsx(FieldDescription, { id: hintId, children: hint }) : null, error ? _jsx(FieldError, { id: errorId, role: "alert", children: error }) : null] }));
+}
+export const FormField = Field;

package/dist/core/float-button.d.ts

@@ -0,0 +1,13 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode, Ref } from "react";
+export interface FloatButtonProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    icon: ReactNode;
+    tooltip?: ReactNode;
+    href?: string;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    rel?: string;
+    download?: boolean | string;
+    disabled?: boolean;
+    type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+}
+export declare function FloatButton({ icon, tooltip, href, target, rel, download, disabled, type, ref, className, onClick, tabIndex, ...props }: FloatButtonProps): import("react").JSX.Element;

package/dist/core/float-button.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/primitives/tooltip.js";
+import { cn } from "../lib/utils.js";
+const floatButtonClass = "fixed right-6 bottom-6 z-40 inline-flex size-12 items-center justify-center rounded-full border bg-popover text-foreground shadow-overlay transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+function withTooltip(trigger, tooltip) {
+    if (tooltip === undefined || tooltip === null)
+        return trigger;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: trigger }), _jsx(TooltipContent, { children: tooltip })] }) }));
+}
+export function FloatButton({ icon, tooltip, href, target, rel, download, disabled = false, type = "button", ref, className, onClick, tabIndex, ...props }) {
+    const content = (_jsx("span", { "data-slot": "float-button-icon", "aria-hidden": "true", children: icon }));
+    if (href !== undefined) {
+        return withTooltip(_jsx("a", { ...props, ref: ref, href: href, target: target, rel: rel, download: download, "aria-disabled": disabled ? true : props["aria-disabled"], tabIndex: disabled ? -1 : tabIndex, onClick: (event) => {
+                if (disabled) {
+                    event.preventDefault();
+                    return;
+                }
+                onClick?.(event);
+            }, "data-slot": "float-button", className: cn(floatButtonClass, disabled && "pointer-events-none opacity-50", className), children: content }), tooltip);
+    }
+    return withTooltip(_jsx("button", { ...props, ref: ref, type: type, disabled: disabled, tabIndex: tabIndex, onClick: (event) => onClick?.(event), "data-slot": "float-button", className: cn(floatButtonClass, "disabled:pointer-events-none disabled:opacity-50", className), children: content }), tooltip);
+}

package/dist/core/form.d.ts

@@ -0,0 +1,19 @@
+import { type FormEvent, type FormHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    layout?: "vertical" | "horizontal" | "inline";
+    disabled?: boolean;
+    loading?: boolean;
+    validateMessages?: Record<string, string>;
+    onFinish?: (formData: FormData, values: Record<string, FormDataEntryValue>) => void;
+    onFinishFailed?: (event: FormEvent<HTMLFormElement>) => void;
+}
+export declare function Form({ layout, disabled, loading, onFinish, onFinishFailed, onSubmit, className, children, validateMessages, ...props }: FormProps): import("react").JSX.Element;
+export declare function FormLayout({ className, ...props }: FormHTMLAttributes<HTMLFormElement>): import("react").JSX.Element;
+export declare function FormGrid({ columns, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+    columns?: 1 | 2 | 3 | 4 | 5;
+}): import("react").JSX.Element;
+export declare function FormActions({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function OverlayForm({ actions, actionClassName, children, ...props }: FormHTMLAttributes<HTMLFormElement> & {
+    actions: ReactNode;
+    actionClassName?: string;
+}): import("react").JSX.Element;