@gouno/ui 0.3.2

package/dist/core/notification.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState, } from "react";
+const NotificationContext = createContext(null);
+const DEFAULT_DURATION = 4500;
+function resolveDuration(duration) {
+    if (duration === undefined)
+        return DEFAULT_DURATION;
+    if (!Number.isFinite(duration) || duration <= 0)
+        return DEFAULT_DURATION;
+    return duration;
+}
+export function NotificationProvider({ children, }) {
+    const [items, setItems] = useState([]);
+    const nextId = useRef(0);
+    const timers = useRef(new Map());
+    const open = useCallback((notice) => {
+        nextId.current += 1;
+        const id = nextId.current;
+        setItems((current) => [...current, { ...notice, id }]);
+        const timer = setTimeout(() => {
+            timers.current.delete(id);
+            setItems((current) => current.filter((item) => item.id !== id));
+        }, resolveDuration(notice.duration));
+        timers.current.set(id, timer);
+    }, []);
+    useEffect(() => () => {
+        for (const timer of timers.current.values())
+            clearTimeout(timer);
+        timers.current.clear();
+    }, []);
+    return (_jsxs(NotificationContext.Provider, { value: open, children: [children, _jsx("div", { "data-slot": "notification-region", className: "fixed right-4 top-4 z-[100] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2", children: items.map((item) => (_jsxs("section", { "data-slot": "notification", role: "status", "aria-atomic": "true", className: "rounded-lg border bg-popover p-4 shadow-overlay", children: [_jsx("strong", { children: item.title }), item.description ? (_jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: item.description })) : null] }, item.id))) })] }));
+}
+export function useNotification() {
+    const open = useContext(NotificationContext);
+    if (!open) {
+        throw new Error("useNotification must be used inside NotificationProvider");
+    }
+    return { open };
+}

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+export declare const Layout: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+export declare const LayoutHeader: ({ className, ...props }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element;
+export declare const LayoutSider: ({ className, ...props }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element;
+export declare const LayoutContent: ({ className, ...props }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element;
+export declare const LayoutFooter: ({ className, ...props }: HTMLAttributes<HTMLElement>) => import("react").JSX.Element;

package/dist/core/page-layout.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export const Layout = ({ className, ...props }) => _jsx("div", { ...props, className: cn("flex min-h-0 min-w-0 flex-1 flex-col bg-background", className) });
+export const LayoutHeader = ({ className, ...props }) => _jsx("header", { ...props, className: cn("flex min-h-14 items-center border-b px-5", className) });
+export const LayoutSider = ({ className, ...props }) => _jsx("aside", { ...props, className: cn("w-60 shrink-0 border-r bg-sidebar p-4", className) });
+export const LayoutContent = ({ className, ...props }) => _jsx("main", { ...props, className: cn("min-w-0 flex-1 p-5", className) });
+export const LayoutFooter = ({ className, ...props }) => _jsx("footer", { ...props, className: cn("border-t px-5 py-4 text-sm text-muted-foreground", className) });

package/dist/core/pagination.d.ts

@@ -0,0 +1,28 @@
+import type { PaginationLocale } from "./locale.js";
+import { type ReactNode } from "react";
+export interface PaginationProps {
+    locale?: Partial<PaginationLocale>;
+    page?: number;
+    defaultPage?: number;
+    total: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    onChange?: (page: number, pageSize: number) => void;
+    onShowSizeChange?: (page: number, pageSize: number) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+    showSizeChanger?: boolean;
+    pageSizeOptions?: number[];
+    showQuickJumper?: boolean;
+    showTotal?: (total: number, range: [number, number]) => ReactNode;
+    hideOnSinglePage?: boolean;
+    simple?: boolean;
+    showLessItems?: boolean;
+    size?: "small" | "middle";
+    align?: "start" | "center" | "end";
+    className?: string;
+    itemRender?: (page: number, type: "page" | "prev" | "next", originalElement: ReactNode) => ReactNode;
+    prevText?: ReactNode;
+    nextText?: ReactNode;
+}
+export declare function Pagination({ locale, page, defaultPage, total, pageSize, defaultPageSize, onChange, onShowSizeChange, disabled, ariaLabel, showSizeChanger, pageSizeOptions, showQuickJumper, showTotal, hideOnSinglePage, simple, showLessItems, size, align, className, itemRender, prevText, nextText, }: PaginationProps): import("react").JSX.Element | null;

package/dist/core/pagination.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentLocale } from "./config-provider.js";
+import { useState } from "react";
+import { Button } from "./button.js";
+import { cn } from "../lib/utils.js";
+const positiveInteger = (value, fallback) => Number.isFinite(value) && value > 0 ? Math.max(1, Math.floor(value)) : fallback;
+function pageItems(current, pages, less) {
+    const radius = less ? 1 : 2;
+    if (pages <= radius * 2 + 5)
+        return Array.from({ length: pages }, (_, i) => i + 1);
+    const start = Math.max(2, Math.min(current - radius, pages - radius * 2 - 1));
+    const end = Math.min(pages - 1, Math.max(current + radius, radius * 2 + 2));
+    const items = [1];
+    if (start > 2)
+        items.push("before");
+    for (let i = start; i <= end; i++)
+        items.push(i);
+    if (end < pages - 1)
+        items.push("after");
+    items.push(pages);
+    return items;
+}
+export function Pagination({ locale, page, defaultPage = 1, total, pageSize, defaultPageSize = 10, onChange, onShowSizeChange, disabled = false, ariaLabel, showSizeChanger = false, pageSizeOptions = [10, 20, 50, 100], showQuickJumper = false, showTotal, hideOnSinglePage = false, simple = false, showLessItems = false, size = "middle", align = "start", className, itemRender, prevText, nextText, }) {
+    const text = useComponentLocale("pagination", locale);
+    const previous = prevText === undefined ? text.prevText : prevText;
+    const next = nextText === undefined ? text.nextText : nextText;
+    const previousLabel = prevText !== undefined ? (typeof prevText === "string" ? prevText : undefined) : text.prevText;
+    const nextLabel = nextText !== undefined ? (typeof nextText === "string" ? nextText : undefined) : text.nextText;
+    const [internalPage, setInternalPage] = useState(defaultPage);
+    const [internalSize, setInternalSize] = useState(defaultPageSize);
+    const [jump, setJump] = useState("");
+    const count = Number.isFinite(total) ? Math.max(0, Math.floor(total)) : 0;
+    const resolvedSize = positiveInteger(pageSize ?? internalSize, 10);
+    const pages = Math.max(1, Math.ceil(count / resolvedSize));
+    const current = Math.min(pages, positiveInteger(page ?? internalPage, 1));
+    const range = count ? [(current - 1) * resolvedSize + 1, Math.min(current * resolvedSize, count)] : [0, 0];
+    const options = [...new Set([...pageSizeOptions.filter(n => Number.isInteger(n) && n > 0), resolvedSize])].sort((a, b) => a - b);
+    const update = (next, nextSize = resolvedSize) => {
+        if (disabled)
+            return;
+        const bounded = Math.min(Math.max(1, Math.ceil(count / nextSize)), positiveInteger(next, 1));
+        if (bounded === current && nextSize === resolvedSize)
+            return;
+        if (page === undefined)
+            setInternalPage(bounded);
+        if (pageSize === undefined)
+            setInternalSize(nextSize);
+        onChange?.(bounded, nextSize);
+    };
+    const submitJump = () => {
+        if (jump.trim() && Number.isFinite(Number(jump)))
+            update(Number(jump));
+        setJump("");
+    };
+    const button = (target, type, label, unavailable = false) => (_jsx(Button, { size: size === "small" ? "small" : "middle", variant: type === "page" && target === current ? "solid" : "outline", color: type === "page" && target === current ? "primary" : "default", disabled: disabled || unavailable, "aria-label": type === "page" ? text.pageLabel(target) : type === "prev" ? previousLabel : nextLabel, "aria-current": type === "page" && target === current ? "page" : undefined, onClick: () => update(target), children: itemRender ? itemRender(target, type, label) : label }, `${type}-${target}`));
+    if (hideOnSinglePage && pages === 1)
+        return null;
+    return (_jsxs("nav", { "aria-label": ariaLabel ?? text.ariaLabel, className: cn("flex flex-wrap items-center gap-2", align === "center" && "justify-center", align === "end" && "justify-end", className), children: [showTotal && _jsx("span", { className: "text-sm text-muted-foreground", children: showTotal(count, range) }), button(current - 1, "prev", previous, current <= 1), simple ? _jsxs("span", { className: "px-2 text-sm tabular-nums", "aria-live": "polite", children: [current, " / ", pages] }) : pageItems(current, pages, showLessItems).map(item => typeof item === "number"
+                ? button(item, "page", item)
+                : _jsx(Button, { size: "small", variant: "text", disabled: disabled, "aria-label": item === "before" ? text.jumpBackwardLabel : text.jumpForwardLabel, onClick: () => update(current + (item === "before" ? -5 : 5)), children: "\u2026" }, item)), button(current + 1, "next", next, current >= pages), !simple && _jsxs("span", { className: "sr-only", "aria-live": "polite", children: [current, " / ", pages] }), showSizeChanger && _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { className: "sr-only", children: text.pageSizeLabel }), _jsx("select", { className: "min-h-9 rounded-md border bg-background px-2 text-foreground", disabled: disabled, value: resolvedSize, onChange: event => {
+                            const nextSize = Number(event.target.value);
+                            const nextPage = Math.min(current, Math.max(1, Math.ceil(count / nextSize)));
+                            update(nextPage, nextSize);
+                            onShowSizeChange?.(nextPage, nextSize);
+                        }, children: options.map(option => _jsx("option", { value: option, children: text.pageSizeText(option) }, option)) })] }), showQuickJumper && _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: text.jumpText }), _jsx("input", { "aria-label": text.jumpLabel, className: "min-h-9 w-16 rounded-md border bg-background px-2 text-foreground", type: "number", min: 1, max: pages, disabled: disabled, value: jump, onChange: event => setJump(event.target.value), onBlur: submitJump, onKeyDown: event => { if (event.key === "Enter") {
+                            event.preventDefault();
+                            submitJump();
+                        } } })] })] }));
+}

package/dist/core/popconfirm.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export interface PopconfirmProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children" | "title"> {
+    title: string;
+    description?: string;
+    children: ReactElement;
+    okText: string;
+    cancelText: string;
+    danger?: boolean;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+    disabled?: boolean;
+}
+export declare const Popconfirm: import("react").ForwardRefExoticComponent<PopconfirmProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/core/popconfirm.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, } from "react";
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "../components/primitives/alert-dialog.js";
+import { Button } from "./button.js";
+export const Popconfirm = forwardRef(function Popconfirm({ title, description, children, okText, cancelText, danger = false, onConfirm, onCancel, disabled = false, onClick, className, ...props }, ref) {
+    const [open, setOpen] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const handleOpenChange = (nextOpen) => {
+        if (busy && !nextOpen)
+            return;
+        setOpen(nextOpen);
+    };
+    const handleTriggerClick = (event) => {
+        onClick?.(event);
+        if (disabled || busy || event.defaultPrevented)
+            return;
+        setOpen(true);
+    };
+    const handleCancel = () => {
+        if (busy)
+            return;
+        setOpen(false);
+        onCancel?.();
+    };
+    const handleConfirm = async () => {
+        if (busy)
+            return;
+        setBusy(true);
+        try {
+            await onConfirm?.();
+            setOpen(false);
+        }
+        catch {
+            // Keep the confirmation context visible. Product feedback belongs to
+            // the caller's onConfirm implementation rather than Core.
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [_jsx("span", { ...props, ref: ref, "data-slot": "popconfirm-trigger", "data-disabled": disabled || undefined, "aria-disabled": disabled || props["aria-disabled"] || undefined, className: className, onClick: handleTriggerClick, children: children }), _jsxs(AlertDialogContent, { "data-slot": "popconfirm-content", "aria-busy": busy || undefined, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), description ? (_jsx(AlertDialogDescription, { children: description })) : null] }), _jsxs(AlertDialogFooter, { children: [_jsx(Button, { disabled: busy, onClick: handleCancel, children: cancelText }), _jsx(Button, { loading: busy, variant: "solid", color: danger ? "error" : "primary", onClick: handleConfirm, children: okText })] })] })] }));
+});

package/dist/core/progress.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+}
+export declare function Progress({ value, max, className, ...props }: ProgressProps): import("react").JSX.Element;

package/dist/core/progress.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export function Progress({ value = 0, max = 100, className, ...props }) {
+    const normalizedMax = Number.isFinite(max) && max > 0 ? max : 100;
+    const normalizedValue = Number.isFinite(value) ? Math.min(normalizedMax, Math.max(0, value)) : 0;
+    const percent = (normalizedValue / normalizedMax) * 100;
+    return (_jsx("div", { role: "progressbar", "aria-valuenow": normalizedValue, "aria-valuemin": 0, "aria-valuemax": normalizedMax, ...props, "data-slot": "progress", className: cn("h-2 w-full overflow-hidden rounded-full bg-muted", className), children: _jsx("div", { "data-slot": "progress-indicator", className: "h-full bg-primary transition-all", style: { width: `${percent}%` } }) }));
+}

package/dist/core/public-props.d.ts

@@ -0,0 +1,82 @@
+import type { ComponentProps } from "react";
+import type { ChoiceButton, IconButtonLink, NavigationProvider } from "./button.js";
+import type { Icon } from "./icon.js";
+import type { SearchField } from "./input.js";
+import type { FieldGroup, FieldLabel, FieldLegend, FieldSet, FormField } from "./field.js";
+import type { Checkbox, CheckboxField, CheckboxGroup, Radio, Switch } from "./selection-controls.js";
+import type { FormActions, FormGrid, FormLayout, OverlayForm } from "./form.js";
+import type { Tab, TabList, TabPanel } from "./tabs.js";
+import type { Skeleton } from "./feedback.js";
+import type { Container } from "./layout-primitives.js";
+import type { Divider, Grid } from "./layout.js";
+import type { Breadcrumb } from "./breadcrumb.js";
+import type { Calendar } from "./calendar.js";
+import type { Carousel } from "./carousel.js";
+import type { Slider } from "./slider.js";
+import type { Rate } from "./rate.js";
+import type { Segmented } from "./segmented.js";
+import type { Collapse } from "./collapse.js";
+import type { Popover, PopoverAnchor, PopoverTrigger } from "../components/primitives/popover.js";
+import type { Tooltip, TooltipProvider, TooltipTrigger } from "../components/primitives/tooltip.js";
+import type { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../components/primitives/dropdown-menu.js";
+import type { Tree } from "./tree.js";
+import type { Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider } from "./page-layout.js";
+import type { InputOTP } from "./input-otp.js";
+/**
+ * Exact, runtime-derived props for public components whose implementation is a
+ * thin wrapper or compound primitive and therefore does not need a separate
+ * handwritten props contract. These aliases are type-only and cannot add a
+ * runtime dependency edge or drift away from the component implementation.
+ */
+export type IconButtonLinkProps = ComponentProps<typeof IconButtonLink>;
+export type ChoiceButtonProps = ComponentProps<typeof ChoiceButton>;
+export type NavigationProviderProps = ComponentProps<typeof NavigationProvider>;
+export type IconProps = ComponentProps<typeof Icon>;
+export type SearchFieldProps = ComponentProps<typeof SearchField>;
+export type FormFieldProps = ComponentProps<typeof FormField>;
+export type FieldGroupProps = ComponentProps<typeof FieldGroup>;
+export type FieldSetProps = ComponentProps<typeof FieldSet>;
+export type FieldLegendProps = ComponentProps<typeof FieldLegend>;
+export type FieldLabelProps = ComponentProps<typeof FieldLabel>;
+export type CheckboxProps = ComponentProps<typeof Checkbox>;
+export type RadioProps = ComponentProps<typeof Radio>;
+export type SwitchProps = ComponentProps<typeof Switch>;
+export type CheckboxFieldProps = ComponentProps<typeof CheckboxField>;
+export type CheckboxGroupProps = ComponentProps<typeof CheckboxGroup>;
+export type FormLayoutProps = ComponentProps<typeof FormLayout>;
+export type FormGridProps = ComponentProps<typeof FormGrid>;
+export type FormActionsProps = ComponentProps<typeof FormActions>;
+export type OverlayFormProps = ComponentProps<typeof OverlayForm>;
+export type TabListProps = ComponentProps<typeof TabList>;
+export type TabProps = ComponentProps<typeof Tab>;
+export type TabPanelProps = ComponentProps<typeof TabPanel>;
+export type SkeletonProps = ComponentProps<typeof Skeleton>;
+export type ContainerProps = ComponentProps<typeof Container>;
+export type DividerProps = ComponentProps<typeof Divider>;
+export type GridProps = ComponentProps<typeof Grid>;
+export type BreadcrumbProps = ComponentProps<typeof Breadcrumb>;
+export type CalendarProps = ComponentProps<typeof Calendar>;
+export type CarouselProps = ComponentProps<typeof Carousel>;
+export type SliderProps = ComponentProps<typeof Slider>;
+export type RateProps = ComponentProps<typeof Rate>;
+export type SegmentedProps = ComponentProps<typeof Segmented>;
+export type CollapseProps = ComponentProps<typeof Collapse>;
+export type PopoverProps = ComponentProps<typeof Popover>;
+export type PopoverTriggerProps = ComponentProps<typeof PopoverTrigger>;
+export type PopoverAnchorProps = ComponentProps<typeof PopoverAnchor>;
+export type TooltipProps = ComponentProps<typeof Tooltip>;
+export type TooltipTriggerProps = ComponentProps<typeof TooltipTrigger>;
+export type TooltipProviderProps = ComponentProps<typeof TooltipProvider>;
+export type DropdownMenuProps = ComponentProps<typeof DropdownMenu>;
+export type DropdownMenuTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
+export type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuContent>;
+export type DropdownMenuItemProps = ComponentProps<typeof DropdownMenuItem>;
+export type DropdownMenuSeparatorProps = ComponentProps<typeof DropdownMenuSeparator>;
+export type DropdownMenuLabelProps = ComponentProps<typeof DropdownMenuLabel>;
+export type TreeProps = ComponentProps<typeof Tree>;
+export type LayoutProps = ComponentProps<typeof Layout>;
+export type LayoutHeaderProps = ComponentProps<typeof LayoutHeader>;
+export type LayoutSiderProps = ComponentProps<typeof LayoutSider>;
+export type LayoutContentProps = ComponentProps<typeof LayoutContent>;
+export type LayoutFooterProps = ComponentProps<typeof LayoutFooter>;
+export type InputOTPProps = ComponentProps<typeof InputOTP>;

package/dist/core/public-props.js

@@ -0,0 +1 @@
+export {};

package/dist/core/qrcode.d.ts

@@ -0,0 +1,14 @@
+import { type CanvasHTMLAttributes } from "react";
+export type QRCodeErrorLevel = "L" | "M" | "Q" | "H";
+export interface QRCodeProps extends Omit<CanvasHTMLAttributes<HTMLCanvasElement>, "children" | "color" | "height" | "width"> {
+    value: string;
+    /** Rendered canvas width and height in CSS pixels. */
+    size?: number;
+    /** QR foreground color accepted by the renderer. */
+    color?: string;
+    /** QR background color accepted by the renderer. */
+    background?: string;
+    /** QR error-correction level. */
+    errorLevel?: QRCodeErrorLevel;
+}
+export declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/core/qrcode.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, } from "react";
+import QRCodeLib from "qrcode";
+export const QRCode = forwardRef(function QRCode({ value, size = 160, color = "#000000", background = "#ffffff", errorLevel = "M", role = "img", ...props }, ref) {
+    const canvasRef = useRef(null);
+    useImperativeHandle(ref, () => canvasRef.current);
+    useEffect(() => {
+        if (!canvasRef.current)
+            return;
+        void QRCodeLib.toCanvas(canvasRef.current, value, {
+            width: size,
+            color: { dark: color, light: background },
+            errorCorrectionLevel: errorLevel,
+        });
+    }, [background, color, errorLevel, size, value]);
+    return (_jsx("canvas", { ...props, ref: canvasRef, "data-slot": "qrcode", width: size, height: size, role: role }));
+});

package/dist/core/rate.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes } from "react";
+interface RateRuntimeProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "role" | "aria-disabled"> {
+    value?: number;
+    defaultValue?: number;
+    count?: number;
+    allowClear?: boolean;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+}
+export declare const Rate: import("react").ForwardRefExoticComponent<RateRuntimeProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/core/rate.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, } from "react";
+import { cn } from "../lib/utils.js";
+export const Rate = forwardRef(function Rate({ value, defaultValue = 0, count = 5, allowClear = true, disabled = false, onChange, className, ...props }, ref) {
+    const [inner, setInner] = useState(defaultValue);
+    const itemRefs = useRef([]);
+    const itemCount = Math.max(0, Math.floor(count));
+    const current = value ?? inner;
+    const focusValue = current >= 1 && current <= itemCount ? Math.round(current) : 1;
+    const commit = (next, allowToggle = true) => {
+        const result = allowToggle && allowClear && next === current ? 0 : next;
+        if (value === undefined)
+            setInner(result);
+        onChange?.(result);
+    };
+    const move = (from, delta) => {
+        if (itemCount === 0)
+            return;
+        const next = ((from - 1 + delta + itemCount) % itemCount) + 1;
+        commit(next, false);
+        itemRefs.current[next - 1]?.focus();
+    };
+    const handleKeyDown = (event, itemValue) => {
+        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            event.preventDefault();
+            move(itemValue, 1);
+        }
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            event.preventDefault();
+            move(itemValue, -1);
+        }
+        else if (event.key === "Home" && itemCount > 0) {
+            event.preventDefault();
+            commit(1, false);
+            itemRefs.current[0]?.focus();
+        }
+        else if (event.key === "End" && itemCount > 0) {
+            event.preventDefault();
+            commit(itemCount, false);
+            itemRefs.current[itemCount - 1]?.focus();
+        }
+    };
+    return (_jsx("div", { ...props, ref: ref, role: "radiogroup", "aria-disabled": disabled || undefined, "data-slot": "rate", className: cn("inline-flex gap-1", className), children: Array.from({ length: itemCount }, (_, index) => index + 1).map((itemValue) => (_jsx("button", { ref: (node) => {
+                itemRefs.current[itemValue - 1] = node;
+            }, type: "button", role: "radio", "aria-checked": itemValue === current, "aria-label": String(itemValue), tabIndex: !disabled && itemValue === focusValue ? 0 : -1, disabled: disabled, "data-slot": "rate-item", "data-value": itemValue, onClick: () => commit(itemValue), onKeyDown: (event) => handleKeyDown(event, itemValue), className: cn("inline-flex size-9 items-center justify-center rounded-md text-2xl outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", itemValue <= current
+                ? "text-warning"
+                : "text-muted-foreground/40"), children: _jsx("span", { "aria-hidden": "true", children: "\u2605" }) }, itemValue))) }));
+});

package/dist/core/result.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { HeadingLevel } from "./typography.js";
+export type ResultStatus = "success" | "error" | "info" | "warning";
+export interface ResultProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    status?: ResultStatus;
+    title: ReactNode;
+    description?: ReactNode;
+    extra?: ReactNode;
+    children?: ReactNode;
+    headingLevel?: HeadingLevel;
+}
+export declare function Result({ status, title, description, extra, children, headingLevel, className, ...props }: ResultProps): import("react").JSX.Element;

package/dist/core/result.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleCheck, CircleX, Info, TriangleAlert } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const statusIcons = {
+    success: _jsx(CircleCheck, { "aria-hidden": "true" }),
+    error: _jsx(CircleX, { "aria-hidden": "true" }),
+    info: _jsx(Info, { "aria-hidden": "true" }),
+    warning: _jsx(TriangleAlert, { "aria-hidden": "true" }),
+};
+const statusClassName = {
+    success: "bg-success-subtle text-success",
+    error: "bg-danger-subtle text-destructive",
+    info: "bg-info-subtle text-info",
+    warning: "bg-warning-subtle text-warning",
+};
+export function Result({ status = "info", title, description, extra, children, headingLevel = 2, className, ...props }) {
+    const Title = `h${headingLevel}`;
+    return (_jsxs("section", { ...props, "data-slot": "result", "data-status": status, className: cn("flex flex-col items-center gap-3 p-8 text-center", className), children: [_jsx("div", { "data-slot": "result-icon", "aria-hidden": "true", className: cn("flex size-12 items-center justify-center rounded-full [&_svg]:size-7", statusClassName[status]), children: statusIcons[status] }), _jsx(Title, { "data-slot": "result-title", className: cn("font-semibold tracking-tight text-foreground", headingLevel === 1 ? "text-2xl" : "text-xl"), children: title }), description != null ? (_jsx("div", { "data-slot": "result-description", className: "max-w-xl text-sm text-muted-foreground", children: description })) : null, extra != null ? _jsx("div", { "data-slot": "result-extra", children: extra }) : null, children != null ? (_jsx("div", { "data-slot": "result-content", className: "w-full", children: children })) : null] }));
+}

package/dist/core/segmented.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
+import type { ControlSize } from "./control-types.js";
+type SegmentedValue = string | number;
+type SegmentedOrientation = "horizontal" | "vertical";
+type SegmentedShape = "default" | "round";
+type SegmentedOption<T extends SegmentedValue> = {
+    value: T;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+};
+type SegmentedPropsInternal<T extends SegmentedValue> = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    options: readonly (T | SegmentedOption<T>)[];
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    disabled?: boolean;
+    block?: boolean;
+    orientation?: SegmentedOrientation;
+    size?: ControlSize;
+    shape?: SegmentedShape;
+    name?: string;
+};
+type SegmentedComponent = <T extends SegmentedValue = string>(props: SegmentedPropsInternal<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement | null;
+export declare const Segmented: SegmentedComponent;
+export {};

package/dist/core/segmented.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo, useState, } from "react";
+import { cn } from "../lib/utils.js";
+function normalizeOption(option) {
+    if (typeof option === "string" || typeof option === "number") {
+        return { value: option, label: String(option) };
+    }
+    return option;
+}
+const sizeClasses = {
+    small: "h-7 px-2 text-sm",
+    middle: "h-8 px-3 text-sm",
+    large: "h-10 px-4 text-base",
+};
+function SegmentedInner({ options, value, defaultValue, onChange, disabled = false, block = false, orientation = "horizontal", size = "middle", shape = "default", name, className, ...props }, ref) {
+    const normalized = useMemo(() => options.map(normalizeOption), [options]);
+    const firstEnabledValue = normalized.find((option) => !option.disabled)?.value;
+    const [internalValue, setInternalValue] = useState(() => defaultValue ?? firstEnabledValue);
+    const currentValue = value ?? internalValue ?? firstEnabledValue;
+    const generatedId = useId().replace(/:/g, "");
+    const groupName = name ?? `gouno-segmented-${generatedId}`;
+    const select = (nextValue) => {
+        if (Object.is(nextValue, currentValue))
+            return;
+        if (value === undefined)
+            setInternalValue(nextValue);
+        onChange?.(nextValue);
+    };
+    return (_jsx("div", { ...props, ref: ref, role: "radiogroup", "aria-orientation": orientation, "aria-disabled": disabled || undefined, "data-slot": "segmented", "data-size": size, "data-shape": shape, "data-orientation": orientation, className: cn("inline-flex max-w-full items-stretch gap-0.5 bg-muted p-0.5 text-muted-foreground", orientation === "vertical" && "flex-col", block && "w-full", shape === "round" ? "rounded-full" : "rounded-lg", className), children: normalized.map((option) => {
+            const optionDisabled = disabled || option.disabled;
+            const checked = Object.is(currentValue, option.value);
+            const accessibleName = typeof option.label === "string" || typeof option.label === "number"
+                ? String(option.label)
+                : String(option.value);
+            return (_jsxs("label", { "data-slot": "segmented-item", "data-disabled": optionDisabled ? "true" : undefined, className: cn("relative min-w-0 select-none", block && "flex-1", orientation === "vertical" && "w-full", optionDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", option.className), children: [_jsx("input", { className: "peer sr-only", type: "radio", name: groupName, value: String(option.value), checked: checked, "aria-checked": checked, disabled: optionDisabled, "aria-label": accessibleName, onChange: () => select(option.value) }), _jsxs("span", { "data-slot": "segmented-label", className: cn("flex min-w-0 items-center justify-center gap-1.5 whitespace-nowrap font-medium transition-[background-color,color,box-shadow]", "peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-control", "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1 peer-focus-visible:ring-offset-muted", !optionDisabled && "hover:text-foreground", shape === "round" ? "rounded-full" : "rounded-md", sizeClasses[size]), children: [option.icon ? _jsx("span", { "data-slot": "segmented-icon", "aria-hidden": "true", className: "flex shrink-0 items-center [&_svg]:size-4", children: option.icon }) : null, option.label !== undefined ? _jsx("span", { className: "min-w-0 truncate", children: option.label }) : null] })] }, `${typeof option.value}:${String(option.value)}`));
+        }) }));
+}
+export const Segmented = forwardRef(SegmentedInner);

package/dist/core/select.d.ts

@@ -0,0 +1,27 @@
+import type { SelectLocale } from "./locale.js";
+import * as React from "react";
+import { type ControlSize } from "./control-types.js";
+export type SelectMode = "single" | "multiple" | "tags";
+export interface SelectOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size" | "value" | "defaultValue" | "onChange" | "multiple"> {
+    locale?: Partial<SelectLocale>;
+    size?: ControlSize;
+    status?: "error" | "warning";
+    loading?: boolean;
+    placeholder?: string;
+    allowClear?: boolean;
+    onClear?: () => void;
+    mode?: SelectMode;
+    showSearch?: boolean;
+    optionFilterProp?: "label" | "value";
+    maxTagCount?: number;
+    value?: string | readonly string[];
+    defaultValue?: string | readonly string[];
+    onChange?: (value: string | string[], option: SelectOption | SelectOption[]) => void;
+    onSearch?: (value: string) => void;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;