@gouno/ui 0.3.2

package/dist/core/calendar.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { IconButton } from "./icon-button.js";
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function sameDay(a, b) {
+    return startOfDay(a).getTime() === startOfDay(b).getTime();
+}
+function sameMonth(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function addMonths(date, amount) {
+    return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function addYears(date, amount) {
+    return new Date(date.getFullYear() + amount, date.getMonth(), 1);
+}
+function rangeState(date, range) {
+    if (!range)
+        return undefined;
+    if (sameDay(date, range[0]))
+        return "start";
+    if (sameDay(date, range[1]))
+        return "end";
+    return undefined;
+}
+function isOutsideRange(date, range) {
+    if (!range)
+        return false;
+    const time = startOfDay(date).getTime();
+    return time < startOfDay(range[0]).getTime() || time > startOfDay(range[1]).getTime();
+}
+function getWeekNumber(date) {
+    const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    const day = target.getUTCDay() || 7;
+    target.setUTCDate(target.getUTCDate() + 4 - day);
+    const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1));
+    return Math.ceil(((target.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
+function defaultLocale() {
+    return typeof document !== "undefined" && document.documentElement.lang
+        ? document.documentElement.lang
+        : undefined;
+}
+function localizedLabel(en, zh) {
+    return typeof document !== "undefined" &&
+        document.documentElement.lang.startsWith("en")
+        ? en
+        : zh;
+}
+export function Calendar({ value, defaultValue, mode, defaultMode = "month", fullscreen = true, showWeek = false, disabledDate, validRange, locale = defaultLocale(), cellRender, fullCellRender, headerRender, onChange, onPanelChange, onSelect, classNames, styles, className, style, ref, ...props }) {
+    const today = useMemo(() => startOfDay(new Date()), []);
+    const [internalValue, setInternalValue] = useState(() => startOfDay(defaultValue ?? value ?? today));
+    const selectedValue = value ? startOfDay(value) : internalValue;
+    const [panelDate, setPanelDate] = useState(() => selectedValue);
+    const [internalMode, setInternalMode] = useState(defaultMode);
+    const activeMode = mode ?? internalMode;
+    useEffect(() => {
+        if (value)
+            setPanelDate(startOfDay(value));
+    }, [value]);
+    const semanticInfo = {
+        props: { mode: activeMode, fullscreen, showWeek },
+    };
+    const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
+    const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
+    const format = (date, options) => new Intl.DateTimeFormat(locale || undefined, options).format(date);
+    const isDisabled = (date) => isOutsideRange(date, validRange) || Boolean(disabledDate?.(date));
+    const changePanel = (nextDate, nextMode = activeMode) => {
+        setPanelDate(nextDate);
+        if (mode === undefined)
+            setInternalMode(nextMode);
+        onPanelChange?.(nextDate, nextMode);
+    };
+    const selectDate = (date, source) => {
+        if (isDisabled(date))
+            return;
+        const normalized = startOfDay(date);
+        if (value === undefined)
+            setInternalValue(normalized);
+        setPanelDate(normalized);
+        onSelect?.(normalized, { source });
+        if (!sameDay(normalized, selectedValue))
+            onChange?.(normalized);
+    };
+    const monthCells = useMemo(() => {
+        const first = new Date(panelDate.getFullYear(), panelDate.getMonth(), 1);
+        const mondayOffset = (first.getDay() + 6) % 7;
+        const start = new Date(first.getFullYear(), first.getMonth(), 1 - mondayOffset);
+        return Array.from({ length: 42 }, (_, index) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + index));
+    }, [panelDate]);
+    const weekdayLabels = useMemo(() => {
+        const monday = new Date(2024, 0, 1);
+        return Array.from({ length: 7 }, (_, index) => format(new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + index), { weekday: "short" }));
+    }, [locale]);
+    const moveFocus = (event, date) => {
+        const amount = event.key === "ArrowLeft"
+            ? -1
+            : event.key === "ArrowRight"
+                ? 1
+                : event.key === "ArrowUp"
+                    ? -7
+                    : event.key === "ArrowDown"
+                        ? 7
+                        : 0;
+        if (!amount)
+            return;
+        event.preventDefault();
+        const next = new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+        const key = `${next.getFullYear()}-${next.getMonth()}-${next.getDate()}`;
+        event.currentTarget
+            .closest('[data-slot="calendar"]')
+            ?.querySelector(`[data-calendar-date="${key}"]`)
+            ?.focus();
+    };
+    const renderCell = (date, originNode, cellMode) => {
+        const info = {
+            originNode,
+            today,
+            mode: cellMode,
+            range: rangeState(date, validRange),
+        };
+        if (fullCellRender)
+            return fullCellRender(date, info);
+        if (cellRender)
+            return cellRender(date, info);
+        return originNode;
+    };
+    const defaultHeader = (_jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [_jsx(IconButton, { variant: "text", label: format(activeMode === "month" ? addMonths(panelDate, -1) : addYears(panelDate, -1), { year: "numeric", month: activeMode === "month" ? "long" : undefined }), icon: _jsx(ChevronLeft, { "aria-hidden": "true" }), onClick: () => changePanel(activeMode === "month" ? addMonths(panelDate, -1) : addYears(panelDate, -1)) }), _jsx(Button, { variant: "text", onClick: () => changePanel(panelDate, activeMode === "month" ? "year" : "month"), "aria-label": activeMode === "month"
+                    ? localizedLabel("Switch to year view", "切换到年份视图")
+                    : localizedLabel("Switch to month view", "切换到月份视图"), children: format(panelDate, activeMode === "month"
+                    ? { year: "numeric", month: "long" }
+                    : { year: "numeric" }) }), _jsx(IconButton, { variant: "text", label: format(activeMode === "month" ? addMonths(panelDate, 1) : addYears(panelDate, 1), { year: "numeric", month: activeMode === "month" ? "long" : undefined }), icon: _jsx(ChevronRight, { "aria-hidden": "true" }), onClick: () => changePanel(activeMode === "month" ? addMonths(panelDate, 1) : addYears(panelDate, 1)) })] }));
+    return (_jsxs("div", { ...props, ref: ref, "data-slot": "calendar", "data-mode": activeMode, "data-fullscreen": fullscreen || undefined, className: cn("w-full min-w-0 text-sm", !fullscreen && "rounded-lg border bg-background p-3", semanticClassNames.root, className), style: { ...semanticStyles.root, ...style }, children: [_jsx("div", { "data-slot": "calendar-header", className: cn("mb-4", semanticClassNames.header), style: semanticStyles.header, children: headerRender
+                    ? headerRender({
+                        value: panelDate,
+                        mode: activeMode,
+                        onChange: (next) => changePanel(startOfDay(next)),
+                        onModeChange: (nextMode) => changePanel(panelDate, nextMode),
+                    })
+                    : defaultHeader }), _jsx("div", { "data-slot": "calendar-body", className: cn("min-w-0", semanticClassNames.body), style: semanticStyles.body, children: activeMode === "month" ? (_jsxs("div", { role: "grid", "aria-label": format(panelDate, { year: "numeric", month: "long" }), className: cn("grid gap-px overflow-hidden rounded-lg border bg-border", showWeek ? "grid-cols-[auto_repeat(7,minmax(0,1fr))]" : "grid-cols-7"), children: [showWeek ? (_jsx("div", { role: "columnheader", "data-slot": "calendar-week-header", className: cn("bg-muted/50 p-2 text-center text-xs font-medium text-muted-foreground", semanticClassNames.weekHeader), style: semanticStyles.weekHeader, children: "#" })) : null, weekdayLabels.map((label) => (_jsx("div", { role: "columnheader", className: "bg-muted/50 p-2 text-center text-xs font-medium text-muted-foreground", children: label }, label))), Array.from({ length: 6 }, (_, row) => {
+                            const week = monthCells.slice(row * 7, row * 7 + 7);
+                            const weekNumber = getWeekNumber(week[0]);
+                            return [
+                                showWeek ? (_jsx("div", { role: "rowheader", "data-slot": "calendar-week-number", className: cn("flex items-center justify-center bg-muted/30 px-2 text-xs text-muted-foreground", semanticClassNames.weekNumber), style: semanticStyles.weekNumber, children: weekNumber }, `week-${weekNumber}`)) : null,
+                                ...week.map((date) => {
+                                    const outside = !sameMonth(date, panelDate);
+                                    const selected = sameDay(date, selectedValue);
+                                    const current = sameDay(date, today);
+                                    const disabled = isDisabled(date);
+                                    const key = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+                                    const originNode = (_jsx("button", { type: "button", "data-calendar-date": key, disabled: disabled, "aria-selected": selected, "aria-current": current ? "date" : undefined, "aria-label": format(date, {
+                                            weekday: "long",
+                                            year: "numeric",
+                                            month: "long",
+                                            day: "numeric",
+                                        }), onClick: () => selectDate(date, "date"), onKeyDown: (event) => moveFocus(event, date), className: cn("flex min-h-20 w-full flex-col items-end rounded-none bg-background p-2 text-left outline-none transition-colors hover:bg-accent focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40", outside && "text-muted-foreground/60", selected && "bg-primary/10"), children: _jsx("span", { className: cn("flex size-7 items-center justify-center rounded-full", selected && "bg-primary text-primary-foreground", current && !selected && "ring-1 ring-primary text-primary"), children: date.getDate() }) }));
+                                    return (_jsx("div", { role: "gridcell", "data-slot": "calendar-cell", "data-outside": outside || undefined, className: cn("min-w-0 bg-background", semanticClassNames.cell), style: semanticStyles.cell, children: _jsx("div", { "data-slot": "calendar-cell-inner", className: cn("h-full", semanticClassNames.cellInner), style: semanticStyles.cellInner, children: renderCell(date, originNode, "month") }) }, key));
+                                }),
+                            ];
+                        })] })) : (_jsx("div", { role: "grid", "aria-label": format(panelDate, { year: "numeric" }), className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: 12 }, (_, month) => {
+                        const date = new Date(panelDate.getFullYear(), month, 1);
+                        const disabled = Array.from({ length: new Date(date.getFullYear(), month + 1, 0).getDate() }, (_, day) => new Date(date.getFullYear(), month, day + 1)).every(isDisabled);
+                        const selected = sameMonth(date, selectedValue);
+                        const originNode = (_jsx("button", { type: "button", disabled: disabled, "aria-selected": selected, "aria-label": format(date, { month: "long" }), className: cn("min-h-20 w-full rounded-md border bg-background p-3 text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40", selected && "border-primary bg-primary/10"), onClick: () => {
+                                const next = new Date(date.getFullYear(), date.getMonth(), selectedValue.getDate());
+                                const normalized = next.getMonth() === date.getMonth()
+                                    ? next
+                                    : new Date(date.getFullYear(), date.getMonth() + 1, 0);
+                                selectDate(normalized, "month");
+                                changePanel(normalized, "month");
+                            }, children: format(date, { month: "long" }) }));
+                        return (_jsx("div", { role: "gridcell", "data-slot": "calendar-cell", className: cn("min-w-0", semanticClassNames.cell), style: semanticStyles.cell, children: _jsx("div", { "data-slot": "calendar-cell-inner", className: cn(semanticClassNames.cellInner), style: semanticStyles.cellInner, children: renderCell(date, originNode, "year") }) }, month));
+                    }) })) })] }));
+}

package/dist/core/card.d.ts

@@ -0,0 +1,30 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+export type CardVariant = "default" | "subtle" | "elevated";
+export type CardPadding = "none" | "sm" | "base" | "lg";
+/** A visual grouping surface. `interactive` only adds hover styling; use a
+ * semantic button or link as the host when the whole card performs an action. */
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    variant?: CardVariant;
+    padding?: CardPadding;
+    interactive?: boolean;
+}
+export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    children?: ReactNode;
+}
+export type CardTitleProps = HTMLAttributes<HTMLHeadingElement>;
+export type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Retained for compatibility; CardContent does not add padding itself. */
+    flush?: boolean;
+}
+export type CardFooterProps = HTMLAttributes<HTMLElement>;
+export declare function Card({ as: Component, variant, padding, interactive, className, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardHeader({ title, description, action, children, className, ...props }: CardHeaderProps): import("react").JSX.Element;
+export declare const CardTitle: ({ className, ...props }: CardTitleProps) => import("react").JSX.Element;
+export declare const CardDescription: ({ className, ...props }: CardDescriptionProps) => import("react").JSX.Element;
+export declare const CardContent: ({ className, flush: _flush, ...props }: CardContentProps) => import("react").JSX.Element;
+export declare const CardFooter: ({ className, ...props }: CardFooterProps) => import("react").JSX.Element;

package/dist/core/card.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export function Card({ as: Component = "div", variant = "default", padding = "base", interactive = false, className, ...props }) {
+    return _jsx(Component, { ...props, "data-slot": "card", className: cn("min-w-0 rounded-lg border bg-card text-card-foreground flex flex-col gap-5", padding === "sm" ? "p-4" : padding === "lg" ? "p-8" : padding === "none" ? "p-0" : "p-6", variant === "default" && "shadow-surface", variant === "subtle" && "bg-muted", variant === "elevated" && "bg-raised shadow-raised", interactive && "cursor-pointer transition-[border-color,box-shadow,transform] hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-raised", className) });
+}
+export function CardHeader({ title, description, action, children, className, ...props }) {
+    return _jsx("header", { ...props, "data-slot": "card-header", className: cn("flex items-start justify-between gap-3", className), children: children !== undefined ? children : _jsxs(_Fragment, { children: [_jsxs("div", { children: [title !== undefined ? _jsx(CardTitle, { children: title }) : null, description !== undefined ? _jsx(CardDescription, { children: description }) : null] }), action] }) });
+}
+export const CardTitle = ({ className, ...props }) => _jsx("h3", { ...props, "data-slot": "card-title", className: cn("text-base font-semibold", className) });
+export const CardDescription = ({ className, ...props }) => _jsx("p", { ...props, "data-slot": "card-description", className: cn("mt-1 text-sm text-muted-foreground", className) });
+export const CardContent = ({ className, flush: _flush, ...props }) => _jsx("div", { ...props, "data-slot": "card-content", className: cn("min-w-0", className) });
+export const CardFooter = ({ className, ...props }) => _jsx("footer", { ...props, "data-slot": "card-footer", className: cn("flex flex-wrap items-center gap-3", className) });

package/dist/core/carousel.d.ts

@@ -0,0 +1,49 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from "react";
+export type CarouselEffect = "scrollx" | "fade";
+export type CarouselDotPlacement = "top" | "bottom" | "start" | "end";
+export type CarouselSemantic = "root" | "viewport" | "track" | "slide" | "arrows" | "prevArrow" | "nextArrow" | "dots" | "dot";
+export interface CarouselAutoplayConfig {
+    dotDuration?: boolean;
+}
+export interface CarouselRef {
+    goTo: (slide: number, dontAnimate?: boolean) => void;
+    next: () => void;
+    prev: () => void;
+}
+export interface CarouselSemanticInfo {
+    props: Readonly<{
+        activeIndex: number;
+        arrows: boolean;
+        dots: boolean;
+        effect: CarouselEffect;
+        dotPlacement: CarouselDotPlacement;
+    }>;
+}
+export type CarouselClassNames = Partial<Record<CarouselSemantic, string>> | ((info: CarouselSemanticInfo) => Partial<Record<CarouselSemantic, string>>);
+export type CarouselStyles = Partial<Record<CarouselSemantic, CSSProperties>> | ((info: CarouselSemanticInfo) => Partial<Record<CarouselSemantic, CSSProperties>>);
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    items: readonly ReactNode[];
+    activeIndex?: number;
+    defaultActiveIndex?: number;
+    arrows?: boolean;
+    dots?: boolean;
+    dotPlacement?: CarouselDotPlacement;
+    autoplay?: boolean | CarouselAutoplayConfig;
+    autoplaySpeed?: number;
+    adaptiveHeight?: boolean;
+    draggable?: boolean;
+    effect?: CarouselEffect;
+    infinite?: boolean;
+    speed?: number;
+    easing?: string;
+    waitForAnimate?: boolean;
+    pauseOnHover?: boolean;
+    pauseOnFocus?: boolean;
+    beforeChange?: (current: number, next: number) => void;
+    afterChange?: (current: number) => void;
+    onChange?: (current: number) => void;
+    classNames?: CarouselClassNames;
+    styles?: CarouselStyles;
+    ref?: Ref<CarouselRef>;
+}
+export declare function Carousel({ items, activeIndex, defaultActiveIndex, arrows, dots, dotPlacement, autoplay, autoplaySpeed, adaptiveHeight, draggable, effect, infinite, speed, easing, waitForAnimate, pauseOnHover, pauseOnFocus, beforeChange, afterChange, onChange, classNames, styles, className, style, ref, "aria-label": ariaLabel, ...props }: CarouselProps): import("react").JSX.Element | null;

package/dist/core/carousel.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { IconButton } from "./icon-button.js";
+function localizedLabel(en, zh) {
+    return typeof document !== "undefined" &&
+        document.documentElement.lang.startsWith("en")
+        ? en
+        : zh;
+}
+function normalizeIndex(index, count, infinite) {
+    if (!count)
+        return 0;
+    if (infinite)
+        return ((index % count) + count) % count;
+    return Math.min(count - 1, Math.max(0, index));
+}
+export function Carousel({ items, activeIndex, defaultActiveIndex = 0, arrows = false, dots = true, dotPlacement = "bottom", autoplay = false, autoplaySpeed = 3000, adaptiveHeight = false, draggable = false, effect = "scrollx", infinite = true, speed = 500, easing = "ease", waitForAnimate = false, pauseOnHover = true, pauseOnFocus = true, beforeChange, afterChange, onChange, classNames, styles, className, style, ref, "aria-label": ariaLabel, ...props }) {
+    const count = items.length;
+    const controlled = activeIndex !== undefined;
+    const [internalIndex, setInternalIndex] = useState(() => normalizeIndex(defaultActiveIndex, count, infinite));
+    const current = normalizeIndex(controlled ? activeIndex : internalIndex, count, infinite);
+    const [animating, setAnimating] = useState(false);
+    const [paused, setPaused] = useState(false);
+    const pointerStart = useRef(null);
+    const animationTimer = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (animationTimer.current)
+                clearTimeout(animationTimer.current);
+        };
+    }, []);
+    const goTo = (target, dontAnimate = false) => {
+        if (!count || (waitForAnimate && animating))
+            return;
+        const nextIndex = normalizeIndex(target, count, infinite);
+        if (nextIndex === current)
+            return;
+        beforeChange?.(current, nextIndex);
+        if (!controlled)
+            setInternalIndex(nextIndex);
+        onChange?.(nextIndex);
+        if (dontAnimate || speed <= 0) {
+            setAnimating(false);
+            afterChange?.(nextIndex);
+            return;
+        }
+        setAnimating(true);
+        if (animationTimer.current)
+            clearTimeout(animationTimer.current);
+        animationTimer.current = setTimeout(() => {
+            setAnimating(false);
+            afterChange?.(nextIndex);
+        }, speed);
+    };
+    const next = () => {
+        if (!infinite && current >= count - 1)
+            return;
+        goTo(current + 1);
+    };
+    const prev = () => {
+        if (!infinite && current <= 0)
+            return;
+        goTo(current - 1);
+    };
+    useImperativeHandle(ref, () => ({ goTo, next, prev }), [current, count, infinite, animating]);
+    useEffect(() => {
+        if (!autoplay || paused || count < 2)
+            return;
+        if (typeof window !== "undefined" &&
+            window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+            return;
+        }
+        const timer = window.setInterval(next, Math.max(250, autoplaySpeed));
+        return () => window.clearInterval(timer);
+    }, [autoplay, autoplaySpeed, paused, current, count, infinite, animating]);
+    if (!count)
+        return null;
+    const semanticInfo = {
+        props: { activeIndex: current, arrows, dots, effect, dotPlacement },
+    };
+    const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
+    const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
+    const autoplayConfig = typeof autoplay === "object" ? autoplay : undefined;
+    const arrowNodes = arrows ? (_jsxs("div", { "data-slot": "carousel-arrows", className: cn("pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-2", semanticClassNames.arrows), style: semanticStyles.arrows, children: [_jsx(IconButton, { variant: "outline", size: "small", label: localizedLabel("Previous slide", "上一张"), icon: _jsx(ChevronLeft, { "aria-hidden": "true" }), onClick: prev, disabled: !infinite && current === 0, className: cn("pointer-events-auto", semanticClassNames.prevArrow), style: semanticStyles.prevArrow }), _jsx(IconButton, { variant: "outline", size: "small", label: localizedLabel("Next slide", "下一张"), icon: _jsx(ChevronRight, { "aria-hidden": "true" }), onClick: next, disabled: !infinite && current === count - 1, className: cn("pointer-events-auto", semanticClassNames.nextArrow), style: semanticStyles.nextArrow })] })) : null;
+    const dotNodes = dots ? (_jsx("div", { "data-slot": "carousel-dots", role: "tablist", "aria-label": localizedLabel("Choose slide", "选择轮播项"), className: cn("z-20 flex items-center justify-center gap-2", (dotPlacement === "top" || dotPlacement === "bottom") && "px-3 py-2", (dotPlacement === "start" || dotPlacement === "end") &&
+            "absolute inset-y-0 flex-col px-2", dotPlacement === "top" && "order-first", dotPlacement === "start" && "left-0", dotPlacement === "end" && "right-0", semanticClassNames.dots), style: semanticStyles.dots, children: items.map((_, index) => {
+            const selected = index === current;
+            return (_jsx("button", { type: "button", role: "tab", "aria-selected": selected, "aria-label": `${localizedLabel("Slide", "第")} ${index + 1}`, onClick: () => goTo(index), "data-slot": "carousel-dot", className: cn("relative h-2 overflow-hidden rounded-full bg-muted-foreground/30 outline-none transition-[width,background-color] focus-visible:ring-2 focus-visible:ring-ring", selected ? "w-8 bg-primary" : "w-2 hover:bg-muted-foreground/60", semanticClassNames.dot), style: semanticStyles.dot, children: selected && autoplay && autoplayConfig?.dotDuration ? (_jsx("span", { "aria-hidden": "true", className: "absolute inset-y-0 left-0 bg-primary-foreground/50", style: {
+                        width: "100%",
+                        transformOrigin: "left",
+                        animation: `gouno-carousel-dot ${Math.max(250, autoplaySpeed)}ms linear`,
+                    } })) : null }, index));
+        }) })) : null;
+    return (_jsxs("div", { ...props, "data-slot": "carousel", role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel ?? localizedLabel("Carousel", "轮播"), "data-effect": effect, "data-dot-placement": dotPlacement, className: cn("relative flex min-w-0 flex-col", semanticClassNames.root, className), style: { ...semanticStyles.root, ...style }, onMouseEnter: (event) => {
+            if (pauseOnHover)
+                setPaused(true);
+            props.onMouseEnter?.(event);
+        }, onMouseLeave: (event) => {
+            if (pauseOnHover)
+                setPaused(false);
+            props.onMouseLeave?.(event);
+        }, onFocusCapture: (event) => {
+            if (pauseOnFocus)
+                setPaused(true);
+            props.onFocusCapture?.(event);
+        }, onBlurCapture: (event) => {
+            if (pauseOnFocus &&
+                !event.currentTarget.contains(event.relatedTarget)) {
+                setPaused(false);
+            }
+            props.onBlurCapture?.(event);
+        }, children: [dotPlacement === "top" ? dotNodes : null, _jsxs("div", { "data-slot": "carousel-viewport", className: cn("relative min-w-0 overflow-hidden rounded-lg", adaptiveHeight && "transition-[height]", semanticClassNames.viewport), style: semanticStyles.viewport, onPointerDown: (event) => {
+                    if (!draggable)
+                        return;
+                    pointerStart.current = {
+                        id: event.pointerId,
+                        x: event.clientX,
+                        y: event.clientY,
+                    };
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                }, onPointerUp: (event) => {
+                    const start = pointerStart.current;
+                    pointerStart.current = null;
+                    if (!draggable || !start || start.id !== event.pointerId)
+                        return;
+                    const dx = event.clientX - start.x;
+                    const dy = event.clientY - start.y;
+                    if (Math.abs(dx) < 40 || Math.abs(dx) < Math.abs(dy))
+                        return;
+                    if (dx < 0)
+                        next();
+                    else
+                        prev();
+                }, onPointerCancel: () => {
+                    pointerStart.current = null;
+                }, children: [_jsx("div", { "data-slot": "carousel-track", className: cn("relative flex min-w-0", effect === "fade" && "grid", semanticClassNames.track), style: {
+                            ...(effect === "scrollx"
+                                ? {
+                                    width: `${count * 100}%`,
+                                    transform: `translateX(-${(current * 100) / count}%)`,
+                                    transitionProperty: "transform",
+                                    transitionDuration: `${speed}ms`,
+                                    transitionTimingFunction: easing,
+                                }
+                                : undefined),
+                            ...semanticStyles.track,
+                        }, children: items.map((item, index) => {
+                            const selected = index === current;
+                            return (_jsx("div", { "data-slot": "carousel-slide", role: "group", "aria-roledescription": "slide", "aria-label": `${index + 1} / ${count}`, "aria-hidden": !selected, className: cn("min-w-0", effect === "scrollx" && "shrink-0", effect === "fade" &&
+                                    "col-start-1 row-start-1 transition-opacity", effect === "fade" &&
+                                    (selected
+                                        ? "z-10 opacity-100"
+                                        : "pointer-events-none opacity-0"), semanticClassNames.slide), style: {
+                                    ...(effect === "scrollx" ? { width: `${100 / count}%` } : undefined),
+                                    ...(effect === "fade"
+                                        ? {
+                                            transitionDuration: `${speed}ms`,
+                                            transitionTimingFunction: easing,
+                                        }
+                                        : undefined),
+                                    ...semanticStyles.slide,
+                                }, children: item }, index));
+                        }) }), arrowNodes] }), dotPlacement === "bottom" ? dotNodes : null, dotPlacement === "start" || dotPlacement === "end" ? dotNodes : null] }));
+}

package/dist/core/cascader.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes } from "react";
+import { type ControlSize } from "./control-types.js";
+export interface CascaderOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    children?: readonly CascaderOption[];
+}
+export interface CascaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "role" | "aria-disabled"> {
+    options: readonly CascaderOption[];
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onChange?: (value: string[], selected: CascaderOption[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: ControlSize;
+    status?: "error" | "warning";
+}
+export declare const Cascader: import("react").ForwardRefExoticComponent<CascaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/core/cascader.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState, } from "react";
+import { cn } from "../lib/utils.js";
+import { controlSizeClass } from "./control-types.js";
+function resolveSelected(options, path) {
+    const selected = [];
+    let items = options;
+    for (const value of path) {
+        const option = items.find((item) => item.value === value);
+        if (!option)
+            break;
+        selected.push(option);
+        items = option.children ?? [];
+    }
+    return selected;
+}
+export const Cascader = forwardRef(function Cascader({ options, value, defaultValue = [], onChange, placeholder, disabled = false, size = "middle", status, className, ...props }, ref) {
+    const [inner, setInner] = useState(defaultValue);
+    const current = value ?? inner;
+    const invalid = status === "error" ? true : props["aria-invalid"];
+    const levels = useMemo(() => {
+        const result = [options];
+        let items = options;
+        for (const selectedValue of current) {
+            const selected = items.find((item) => item.value === selectedValue);
+            if (!selected?.children?.length)
+                break;
+            items = selected.children;
+            result.push(items);
+        }
+        return result;
+    }, [options, current]);
+    const update = (level, selectedValue) => {
+        const next = selectedValue
+            ? [...current.slice(0, level), selectedValue]
+            : [...current.slice(0, level)];
+        const selected = resolveSelected(options, next);
+        if (value === undefined)
+            setInner(next);
+        onChange?.(next, selected);
+    };
+    return (_jsx("div", { ...props, ref: ref, role: "group", "aria-disabled": disabled || undefined, "aria-invalid": invalid, "data-slot": "cascader", "data-status": status, className: cn("flex flex-wrap gap-2", className), children: levels.map((items, level) => (_jsxs("select", { "data-slot": "cascader-select", "data-level": level, disabled: disabled, value: current[level] ?? "", "aria-label": String(level + 1), "aria-invalid": invalid, onChange: (event) => update(level, event.currentTarget.value), className: cn("min-w-32 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), status === "error" &&
+                "border-destructive focus-visible:ring-destructive", status === "warning" &&
+                "border-warning focus-visible:ring-warning"), children: [_jsx("option", { value: "", children: placeholder ?? "" }), items.map((item) => (_jsx("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value)))] }, level))) }));
+});

package/dist/core/code-block.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Canonical source text used for both display input and clipboard copy. */
+    code: string;
+    /** Optional language label. Syntax rendering remains caller-owned through renderCode. */
+    language?: string;
+    /** Whether to expose the copy action. */
+    copyable?: boolean;
+    /** Accessible and visible label for the copy action. */
+    copyLabel?: string;
+    /** Accessible and visible label shown after a successful copy. */
+    copiedLabel?: string;
+    /** Optional presentation hook for syntax highlighting. Receives the exact canonical code string. */
+    renderCode?: (code: string) => ReactNode;
+}
+export declare function CodeBlock({ code, language, copyable, copyLabel, copiedLabel, renderCode, className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/core/code-block.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+async function copyText(value) {
+    if (navigator.clipboard?.writeText) {
+        try {
+            await navigator.clipboard.writeText(value);
+            return;
+        }
+        catch {
+            // Fall back to the document copy path for restricted clipboard contexts.
+        }
+    }
+    const textarea = document.createElement("textarea");
+    textarea.value = value;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const copied = document.execCommand("copy");
+    textarea.remove();
+    if (!copied)
+        throw new Error("Unable to copy code");
+}
+export function CodeBlock({ code, language, copyable = true, copyLabel = "复制代码", copiedLabel = "代码已复制", renderCode, className, ...props }) {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = window.setTimeout(() => setCopied(false), 1800);
+        return () => window.clearTimeout(timer);
+    }, [copied]);
+    const showToolbar = Boolean(language) || copyable;
+    const handleCopy = async () => {
+        try {
+            await copyText(code);
+            setCopied(true);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    return (_jsxs("div", { ...props, "data-slot": "code-block", "data-language": language || undefined, className: cn("min-w-0 overflow-hidden rounded-lg border bg-card", className), children: [showToolbar ? (_jsxs("div", { "data-slot": "code-block-toolbar", className: "flex min-h-10 items-center justify-between gap-3 border-b bg-muted/40 px-3", children: [language ? (_jsx("span", { "data-slot": "code-block-language", className: "min-w-0 truncate font-mono text-xs uppercase tracking-wide text-muted-foreground", children: language })) : (_jsx("span", { "aria-hidden": "true" })), copyable ? (_jsx(Button, { type: "button", size: "small", variant: "text", className: "h-8 shrink-0 px-2 text-xs text-muted-foreground", "aria-label": copied ? copiedLabel : copyLabel, icon: copied ? _jsx(Check, { className: "size-3.5" }) : _jsx(Copy, { className: "size-3.5" }), onClick: () => void handleCopy(), children: _jsx("span", { "aria-live": "polite", children: copied ? copiedLabel : copyLabel }) })) : null] })) : null, _jsx("pre", { "data-slot": "code-block-pre", className: "m-0 max-w-full overflow-auto bg-background p-4 font-mono text-sm leading-6 text-foreground [tab-size:2]", children: _jsx("code", { "data-slot": "code-block-code", children: renderCode ? renderCode(code) : code }) })] }));
+}

package/dist/core/collapse.d.ts

@@ -0,0 +1,49 @@
+import { type CSSProperties, type HTMLAttributes, type Key, type ReactNode, type Ref } from "react";
+export type CollapseSize = "small" | "middle" | "large";
+export type CollapseCollapsible = "header" | "icon" | "disabled";
+export type CollapseExpandIconPlacement = "start" | "end";
+export type CollapseActiveKey = Key | readonly Key[];
+export interface CollapseItem {
+    key: Key;
+    label: ReactNode;
+    children: ReactNode;
+    extra?: ReactNode;
+    collapsible?: CollapseCollapsible;
+    forceRender?: boolean;
+    showArrow?: boolean;
+    classNames?: Partial<Record<"header" | "body", string>>;
+    styles?: Partial<Record<"header" | "body", CSSProperties>>;
+}
+export interface CollapseExpandIconInfo {
+    active: boolean;
+    item: CollapseItem;
+}
+export type CollapseSemantic = "root" | "item" | "header" | "body";
+export interface CollapseSemanticInfo {
+    props: Readonly<{
+        accordion: boolean;
+        bordered: boolean;
+        ghost: boolean;
+        size: CollapseSize;
+    }>;
+}
+export type CollapseClassNames = Partial<Record<CollapseSemantic, string>> | ((info: CollapseSemanticInfo) => Partial<Record<CollapseSemantic, string>>);
+export type CollapseStyles = Partial<Record<CollapseSemantic, CSSProperties>> | ((info: CollapseSemanticInfo) => Partial<Record<CollapseSemantic, CSSProperties>>);
+export interface CollapseProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    items: readonly CollapseItem[];
+    activeKey?: CollapseActiveKey;
+    defaultActiveKey?: CollapseActiveKey;
+    accordion?: boolean;
+    bordered?: boolean;
+    collapsible?: CollapseCollapsible;
+    destroyOnHidden?: boolean;
+    expandIcon?: (info: CollapseExpandIconInfo) => ReactNode;
+    expandIconPlacement?: CollapseExpandIconPlacement;
+    ghost?: boolean;
+    size?: CollapseSize;
+    onChange?: (activeKey: Key | Key[]) => void;
+    classNames?: CollapseClassNames;
+    styles?: CollapseStyles;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Collapse({ items, activeKey, defaultActiveKey, accordion, bordered, collapsible, destroyOnHidden, expandIcon, expandIconPlacement, ghost, size, onChange, classNames, styles, className, style, ref, ...props }: CollapseProps): import("react").JSX.Element;