@gouno/ui 0.3.2

package/dist/core/mentions.d.ts

@@ -0,0 +1,10 @@
+import { type TextareaProps } from "./textarea.js";
+export interface MentionsProps extends Omit<TextareaProps, "value" | "defaultValue" | "onChange" | "onSelect" | "role" | "aria-autocomplete" | "aria-controls" | "aria-activedescendant" | "aria-haspopup" | "aria-expanded"> {
+    options: readonly string[];
+    prefix?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSelect?: (value: string) => void;
+}
+export declare const Mentions: import("react").ForwardRefExoticComponent<MentionsProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/core/mentions.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState, } from "react";
+import { cn } from "../lib/utils.js";
+import { Textarea } from "./textarea.js";
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function findActiveMention(value, prefix) {
+    if (!prefix)
+        return null;
+    const match = value.match(new RegExp(`${escapeRegExp(prefix)}([^\\s]*)$`, "u"));
+    if (!match || match.index === undefined)
+        return null;
+    return { start: match.index, query: match[1] ?? "" };
+}
+export const Mentions = forwardRef(function Mentions({ options, prefix = "@", value, defaultValue = "", onChange, onSelect, className, disabled, readOnly, onFocus, onBlur, onKeyDown, ...props }, ref) {
+    const [inner, setInner] = useState(defaultValue);
+    const [focused, setFocused] = useState(false);
+    const [dismissed, setDismissed] = useState(false);
+    const [highlighted, setHighlighted] = useState(0);
+    const listboxId = useId();
+    const current = value ?? inner;
+    const activeMention = findActiveMention(current, prefix);
+    const query = activeMention?.query.toLocaleLowerCase() ?? "";
+    const matches = activeMention
+        ? options.filter((option) => option.toLocaleLowerCase().includes(query))
+        : [];
+    const activeIndex = matches.length === 0
+        ? -1
+        : Math.min(Math.max(highlighted, 0), matches.length - 1);
+    const popupOpen = focused &&
+        !dismissed &&
+        Boolean(activeMention) &&
+        matches.length > 0 &&
+        !disabled &&
+        !readOnly;
+    const update = (next) => {
+        if (value === undefined)
+            setInner(next);
+        onChange?.(next);
+    };
+    const choose = (option) => {
+        if (!activeMention || disabled || readOnly)
+            return;
+        const next = `${current.slice(0, activeMention.start)}${prefix}${option} `;
+        update(next);
+        onSelect?.(option);
+        setDismissed(true);
+        setHighlighted(0);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled || readOnly)
+            return;
+        if (event.key === "ArrowDown" && activeMention && matches.length > 0) {
+            event.preventDefault();
+            if (!popupOpen) {
+                setDismissed(false);
+                setHighlighted(0);
+            }
+            else {
+                setHighlighted((activeIndex + 1) % matches.length);
+            }
+        }
+        else if (event.key === "ArrowUp" &&
+            focused &&
+            activeMention &&
+            matches.length > 0) {
+            event.preventDefault();
+            if (!popupOpen) {
+                setDismissed(false);
+                setHighlighted(matches.length - 1);
+            }
+            else {
+                setHighlighted((activeIndex - 1 + matches.length) % matches.length);
+            }
+        }
+        else if (event.key === "Enter" && popupOpen && activeIndex >= 0) {
+            event.preventDefault();
+            const option = matches[activeIndex];
+            if (option !== undefined)
+                choose(option);
+        }
+        else if (event.key === "Escape" && popupOpen) {
+            event.preventDefault();
+            setDismissed(true);
+            setHighlighted(0);
+        }
+    };
+    return (_jsxs("div", { "data-slot": "mentions", className: "relative min-w-0", children: [_jsx(Textarea, { ...props, ref: ref, "data-slot": "mentions-input", value: current, disabled: disabled, readOnly: readOnly, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-controls": popupOpen ? listboxId : undefined, "aria-activedescendant": popupOpen && activeIndex >= 0
+                    ? `${listboxId}-option-${activeIndex}`
+                    : undefined, onFocus: (event) => {
+                    onFocus?.(event);
+                    if (!event.defaultPrevented && !disabled && !readOnly) {
+                        setFocused(true);
+                        setDismissed(false);
+                        setHighlighted(0);
+                    }
+                }, onBlur: (event) => {
+                    onBlur?.(event);
+                    setFocused(false);
+                    setDismissed(false);
+                    setHighlighted(0);
+                }, onKeyDown: handleKeyDown, onChange: (event) => {
+                    update(event.target.value);
+                    setDismissed(false);
+                    setHighlighted(0);
+                }, className: cn("min-h-24", className) }), popupOpen ? (_jsx("ul", { id: listboxId, role: "listbox", "data-slot": "mentions-popup", className: "absolute z-50 mt-1 max-h-48 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-overlay", children: matches.map((option, index) => (_jsxs("li", { id: `${listboxId}-option-${index}`, role: "option", "aria-selected": index === activeIndex, "data-slot": "mentions-option", "data-highlighted": index === activeIndex || undefined, className: cn("cursor-pointer rounded px-2 py-1.5 text-sm", index === activeIndex && "bg-accent text-accent-foreground", "hover:bg-accent hover:text-accent-foreground"), onMouseEnter: () => setHighlighted(index), onMouseDown: (event) => {
+                        event.preventDefault();
+                        choose(option);
+                    }, children: [prefix, option] }, `${option}-${index}`))) })) : null] }));
+});

package/dist/core/menu.d.ts

@@ -0,0 +1,79 @@
+import { type CSSProperties, type HTMLAttributes, type Key, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from "react";
+export type MenuMode = "vertical" | "horizontal" | "inline";
+export type MenuTriggerSubMenuAction = "hover" | "click";
+export interface MenuItem {
+    key: Key;
+    label: ReactNode;
+    type?: "item";
+    icon?: ReactNode;
+    disabled?: boolean;
+    title?: string;
+}
+export interface MenuSubMenuItem {
+    key: Key;
+    label: ReactNode;
+    type: "submenu";
+    children: readonly MenuNode[];
+    icon?: ReactNode;
+    disabled?: boolean;
+    title?: string;
+}
+export interface MenuItemGroup {
+    key: Key;
+    type: "group";
+    label?: ReactNode;
+    children: readonly MenuNode[];
+}
+export interface MenuDividerItem {
+    key: Key;
+    type: "divider";
+}
+export type MenuNode = MenuItem | MenuSubMenuItem | MenuItemGroup | MenuDividerItem;
+export interface MenuClickInfo {
+    key: Key;
+    keyPath: Key[];
+    item: MenuItem;
+    nativeEvent: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
+}
+export interface MenuSelectInfo extends MenuClickInfo {
+    selectedKeys: Key[];
+}
+export interface MenuExpandIconInfo {
+    item: MenuSubMenuItem;
+    open: boolean;
+    mode: MenuMode;
+}
+export type MenuSemantic = "root" | "list" | "item" | "icon" | "label" | "submenu" | "expandIcon" | "group" | "groupLabel" | "divider";
+export interface MenuSemanticInfo {
+    props: Readonly<{
+        mode: MenuMode;
+        multiple: boolean;
+        selectable: boolean;
+        inlineCollapsed: boolean;
+    }>;
+}
+export type MenuClassNames = Partial<Record<MenuSemantic, string>> | ((info: MenuSemanticInfo) => Partial<Record<MenuSemantic, string>>);
+export type MenuStyles = Partial<Record<MenuSemantic, CSSProperties>> | ((info: MenuSemanticInfo) => Partial<Record<MenuSemantic, CSSProperties>>);
+export interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "onClick" | "onSelect"> {
+    items: readonly MenuNode[];
+    selectedKeys?: readonly Key[];
+    defaultSelectedKeys?: readonly Key[];
+    openKeys?: readonly Key[];
+    defaultOpenKeys?: readonly Key[];
+    mode?: MenuMode;
+    multiple?: boolean;
+    selectable?: boolean;
+    inlineCollapsed?: boolean;
+    inlineIndent?: number;
+    triggerSubMenuAction?: MenuTriggerSubMenuAction;
+    forceSubMenuRender?: boolean;
+    expandIcon?: ReactNode | ((info: MenuExpandIconInfo) => ReactNode);
+    onClick?: (info: MenuClickInfo) => void;
+    onSelect?: (info: MenuSelectInfo) => void;
+    onDeselect?: (info: MenuSelectInfo) => void;
+    onOpenChange?: (openKeys: Key[]) => void;
+    classNames?: MenuClassNames;
+    styles?: MenuStyles;
+    ref?: Ref<HTMLElement>;
+}
+export declare function Menu({ items, selectedKeys, defaultSelectedKeys, openKeys, defaultOpenKeys, mode, multiple, selectable, inlineCollapsed, inlineIndent, triggerSubMenuAction, forceSubMenuRender, expandIcon, onClick, onSelect, onDeselect, onOpenChange, classNames, styles, className, style, onKeyDown, "aria-label": ariaLabel, ref, ...props }: MenuProps): import("react").JSX.Element;

package/dist/core/menu.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, } from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function isSubMenu(item) {
+    return item.type === "submenu";
+}
+function isGroup(item) {
+    return item.type === "group";
+}
+function isDivider(item) {
+    return item.type === "divider";
+}
+function keyToken(key) {
+    return `${typeof key === "number" ? "n" : "s"}:${String(key)}`;
+}
+function includesKey(keys, key) {
+    return keys.some((candidate) => candidate === key);
+}
+function uniqueKeys(keys) {
+    return Array.from(new Set(keys));
+}
+function collectVisibleFocusableKeys(items, openKeys) {
+    return items.flatMap((item) => {
+        if (isDivider(item))
+            return [];
+        if (isGroup(item))
+            return collectVisibleFocusableKeys(item.children, openKeys);
+        if (item.disabled)
+            return [];
+        return [
+            item.key,
+            ...(isSubMenu(item) && includesKey(openKeys, item.key)
+                ? collectVisibleFocusableKeys(item.children, openKeys)
+                : []),
+        ];
+    });
+}
+function collectKeyMap(items, map = new Map()) {
+    for (const item of items) {
+        map.set(keyToken(item.key), item.key);
+        if (isSubMenu(item) || isGroup(item))
+            collectKeyMap(item.children, map);
+    }
+    return map;
+}
+function assignRef(ref, value) {
+    if (!ref)
+        return;
+    if (typeof ref === "function") {
+        ref(value);
+        return;
+    }
+    ref.current = value;
+}
+function hasHiddenAncestor(element) {
+    let current = element;
+    while (current) {
+        if (current.hidden)
+            return true;
+        current = current.parentElement;
+    }
+    return false;
+}
+export function Menu({ items, selectedKeys, defaultSelectedKeys = [], openKeys, defaultOpenKeys = [], mode = "vertical", multiple = false, selectable = true, inlineCollapsed = false, inlineIndent = 24, triggerSubMenuAction = "click", forceSubMenuRender = false, expandIcon, onClick, onSelect, onDeselect, onOpenChange, classNames, styles, className, style, onKeyDown, "aria-label": ariaLabel, ref, ...props }) {
+    const rootRef = useRef(null);
+    const [innerSelectedKeys, setInnerSelectedKeys] = useState(() => uniqueKeys(defaultSelectedKeys));
+    const [innerOpenKeys, setInnerOpenKeys] = useState(() => uniqueKeys(defaultOpenKeys));
+    const actualSelectedKeys = selectedKeys ?? innerSelectedKeys;
+    const actualOpenKeys = openKeys ?? innerOpenKeys;
+    const visibleFocusableKeys = useMemo(() => collectVisibleFocusableKeys(items, actualOpenKeys), [items, actualOpenKeys]);
+    const keyMap = useMemo(() => collectKeyMap(items), [items]);
+    const [focusKey, setFocusKey] = useState(() => defaultSelectedKeys[0] ?? null);
+    const effectiveFocusKey = focusKey !== null && includesKey(visibleFocusableKeys, focusKey)
+        ? focusKey
+        : (visibleFocusableKeys[0] ?? null);
+    const normalizedInlineIndent = Number.isFinite(inlineIndent) ? Math.max(0, inlineIndent) : 24;
+    const collapsedInline = mode === "inline" && inlineCollapsed;
+    const semanticInfo = {
+        props: { mode, multiple, selectable, inlineCollapsed: collapsedInline },
+    };
+    const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
+    const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
+    const setSelected = (next) => {
+        const normalized = uniqueKeys(next);
+        if (selectedKeys === undefined)
+            setInnerSelectedKeys(normalized);
+        return normalized;
+    };
+    const setOpen = (next) => {
+        const normalized = uniqueKeys(next);
+        if (openKeys === undefined)
+            setInnerOpenKeys(normalized);
+        onOpenChange?.(normalized);
+        return normalized;
+    };
+    const toggleOpen = (key, nextOpen) => {
+        const currentlyOpen = includesKey(actualOpenKeys, key);
+        const shouldOpen = nextOpen ?? !currentlyOpen;
+        if (shouldOpen === currentlyOpen)
+            return;
+        setOpen(shouldOpen
+            ? [...actualOpenKeys, key]
+            : actualOpenKeys.filter((candidate) => candidate !== key));
+    };
+    const activateItem = (item, keyPath, nativeEvent) => {
+        const info = { key: item.key, keyPath, item, nativeEvent };
+        onClick?.(info);
+        if (!selectable || item.disabled)
+            return;
+        const selected = includesKey(actualSelectedKeys, item.key);
+        if (multiple && selected) {
+            const next = setSelected(actualSelectedKeys.filter((key) => key !== item.key));
+            onDeselect?.({ ...info, selectedKeys: next });
+            return;
+        }
+        const next = setSelected(multiple ? [...actualSelectedKeys, item.key] : [item.key]);
+        onSelect?.({ ...info, selectedKeys: next });
+    };
+    const focusByToken = (token) => {
+        if (!token)
+            return;
+        const nextKey = keyMap.get(token);
+        if (nextKey === undefined)
+            return;
+        setFocusKey(nextKey);
+        const nextElement = Array.from(rootRef.current?.querySelectorAll("[data-menu-key]") ?? []).find((element) => element.dataset.menuKey === token && !hasHiddenAncestor(element));
+        nextElement?.focus();
+    };
+    const visibleFocusableElements = () => Array.from(rootRef.current?.querySelectorAll("[data-menu-key]") ?? []).filter((element) => element.getAttribute("aria-disabled") !== "true" && !hasHiddenAncestor(element));
+    const moveFocus = (target, delta, sameDepth = false) => {
+        const targetDepth = target.dataset.menuDepth;
+        const elements = visibleFocusableElements().filter((element) => !sameDepth || element.dataset.menuDepth === targetDepth);
+        const index = elements.indexOf(target);
+        if (index < 0 || elements.length === 0)
+            return;
+        const next = elements[(index + delta + elements.length) % elements.length];
+        focusByToken(next.dataset.menuKey ?? null);
+    };
+    const focusBoundary = (toEnd) => {
+        const elements = visibleFocusableElements();
+        const next = toEnd ? elements[elements.length - 1] : elements[0];
+        focusByToken(next?.dataset.menuKey ?? null);
+    };
+    const handleRootKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const target = event.target instanceof HTMLElement ? event.target : null;
+        if (!target?.dataset.menuKey)
+            return;
+        const isHorizontalRoot = mode === "horizontal" && target.dataset.menuDepth === "0";
+        if (event.key === "Home" || event.key === "End") {
+            event.preventDefault();
+            focusBoundary(event.key === "End");
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            if (isHorizontalRoot) {
+                event.preventDefault();
+                moveFocus(target, 1, true);
+                return;
+            }
+            if (target.dataset.menuSubmenu === "true") {
+                const key = keyMap.get(target.dataset.menuKey);
+                if (key !== undefined) {
+                    event.preventDefault();
+                    toggleOpen(key, true);
+                }
+            }
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            const parentToken = target.dataset.menuParentKey;
+            if (parentToken) {
+                const parentKey = keyMap.get(parentToken);
+                if (parentKey !== undefined) {
+                    event.preventDefault();
+                    toggleOpen(parentKey, false);
+                    focusByToken(parentToken);
+                }
+                return;
+            }
+            if (isHorizontalRoot) {
+                event.preventDefault();
+                moveFocus(target, -1, true);
+            }
+            return;
+        }
+        if (event.key === "ArrowDown") {
+            if (isHorizontalRoot && target.dataset.menuSubmenu === "true") {
+                const key = keyMap.get(target.dataset.menuKey);
+                if (key !== undefined) {
+                    event.preventDefault();
+                    toggleOpen(key, true);
+                }
+                return;
+            }
+            event.preventDefault();
+            moveFocus(target, 1);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            moveFocus(target, -1);
+            return;
+        }
+        if (event.key === "Escape") {
+            const parentToken = target.dataset.menuParentKey;
+            if (parentToken) {
+                const parentKey = keyMap.get(parentToken);
+                if (parentKey !== undefined) {
+                    event.preventDefault();
+                    toggleOpen(parentKey, false);
+                    focusByToken(parentToken);
+                }
+            }
+        }
+    };
+    const renderNodes = (nodes, path = [], depth = 0, parentKey) => nodes.map((node) => {
+        if (isDivider(node)) {
+            return (_jsx("li", { role: "separator", "data-slot": "menu-divider", className: cn("my-1 h-px bg-border", semanticClassNames.divider), style: semanticStyles.divider }, node.key));
+        }
+        if (isGroup(node)) {
+            return (_jsxs("li", { role: "none", "data-slot": "menu-group", className: cn("min-w-0", semanticClassNames.group), style: semanticStyles.group, children: [node.label !== undefined ? (_jsx("div", { "data-slot": "menu-group-label", className: cn("px-3 py-1.5 text-xs font-medium text-muted-foreground", semanticClassNames.groupLabel), style: semanticStyles.groupLabel, children: node.label })) : null, _jsx("ul", { role: "group", className: "m-0 flex list-none flex-col gap-1 p-0", children: renderNodes(node.children, path, depth, parentKey) })] }, node.key));
+        }
+        const token = keyToken(node.key);
+        const parentToken = parentKey === undefined ? undefined : keyToken(parentKey);
+        const selected = includesKey(actualSelectedKeys, node.key);
+        const isFocused = effectiveFocusKey === node.key;
+        const itemPadding = mode === "inline" && !collapsedInline
+            ? { paddingInlineStart: `${12 + depth * normalizedInlineIndent}px` }
+            : undefined;
+        const label = (_jsx("span", { "data-slot": "menu-label", className: cn("min-w-0 flex-1 truncate", collapsedInline && "sr-only", semanticClassNames.label), style: semanticStyles.label, children: node.label }));
+        const icon = node.icon !== undefined ? (_jsx("span", { "aria-hidden": "true", "data-slot": "menu-icon", className: cn("flex size-4 shrink-0 items-center justify-center [&_svg]:size-4", semanticClassNames.icon), style: semanticStyles.icon, children: node.icon })) : null;
+        if (isSubMenu(node)) {
+            const open = includesKey(actualOpenKeys, node.key);
+            const popup = mode !== "inline" || collapsedInline;
+            const originExpandIcon = (_jsx(ChevronRight, { "aria-hidden": "true", className: cn("transition-transform", open && !popup && "rotate-90") }));
+            const resolvedExpandIcon = typeof expandIcon === "function"
+                ? expandIcon({ item: node, open, mode })
+                : (expandIcon ?? originExpandIcon);
+            const shouldRenderSubmenu = open || forceSubMenuRender;
+            return (_jsxs("li", { role: "none", "data-slot": "menu-submenu", className: cn("relative min-w-0", semanticClassNames.submenu), style: semanticStyles.submenu, onMouseEnter: triggerSubMenuAction === "hover" && !node.disabled
+                    ? () => toggleOpen(node.key, true)
+                    : undefined, onMouseLeave: triggerSubMenuAction === "hover" && !node.disabled
+                    ? () => toggleOpen(node.key, false)
+                    : undefined, children: [_jsxs("button", { type: "button", role: "menuitem", title: node.title, disabled: node.disabled, "aria-disabled": node.disabled || undefined, "aria-haspopup": "menu", "aria-expanded": open, "data-menu-key": token, "data-menu-parent-key": parentToken, "data-menu-submenu": "true", "data-menu-depth": depth, tabIndex: isFocused ? 0 : -1, onFocus: () => setFocusKey(node.key), onClick: () => {
+                            if (triggerSubMenuAction === "click")
+                                toggleOpen(node.key);
+                        }, className: cn("flex min-h-9 w-full min-w-0 items-center gap-2 rounded-md px-3 py-2 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", open && "bg-accent/70 text-accent-foreground", collapsedInline && "justify-center px-2", semanticClassNames.item), style: { ...semanticStyles.item, ...itemPadding }, children: [icon, label, _jsx("span", { "aria-hidden": "true", "data-slot": "menu-expand-icon", className: cn("ml-auto flex size-4 shrink-0 items-center justify-center [&_svg]:size-4", collapsedInline && "sr-only", semanticClassNames.expandIcon), style: semanticStyles.expandIcon, children: resolvedExpandIcon })] }), shouldRenderSubmenu ? (_jsx("ul", { role: "menu", hidden: !open, "aria-label": typeof node.label === "string" ? node.label : undefined, "data-slot": "menu-list", className: cn("m-0 list-none p-0", popup
+                            ? cn("absolute z-50 min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-overlay", mode === "horizontal" && depth === 0
+                                ? "left-0 top-full mt-1"
+                                : "left-full top-0 ml-1")
+                            : "mt-1 flex flex-col gap-1", semanticClassNames.list), style: semanticStyles.list, children: renderNodes(node.children, [...path, node.key], depth + 1, node.key) })) : null] }, node.key));
+        }
+        const role = multiple && selectable ? "menuitemcheckbox" : "menuitem";
+        const keyPath = [...path, node.key];
+        return (_jsx("li", { role: "none", className: "min-w-0", children: _jsxs("button", { type: "button", role: role, title: node.title, disabled: node.disabled, "aria-disabled": node.disabled || undefined, "aria-current": !multiple && selectable && selected ? "page" : undefined, "aria-checked": multiple && selectable ? selected : undefined, "data-menu-key": token, "data-menu-parent-key": parentToken, "data-menu-depth": depth, tabIndex: isFocused ? 0 : -1, onFocus: () => setFocusKey(node.key), onClick: (event) => activateItem(node, keyPath, event), className: cn("flex min-h-9 w-full min-w-0 items-center gap-2 rounded-md px-3 py-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", selected ? "bg-accent text-accent-foreground" : "text-foreground", collapsedInline && "justify-center px-2", semanticClassNames.item), style: { ...semanticStyles.item, ...itemPadding }, children: [icon, label] }) }, node.key));
+    });
+    return (_jsx("nav", { ...props, ref: (node) => {
+            rootRef.current = node;
+            assignRef(ref, node);
+        }, "aria-label": ariaLabel, "data-slot": "menu", "data-mode": mode, "data-inline-collapsed": collapsedInline || undefined, onKeyDown: handleRootKeyDown, className: cn("min-w-0", semanticClassNames.root, className), style: { ...semanticStyles.root, ...style }, children: _jsx("ul", { role: mode === "horizontal" ? "menubar" : "menu", "data-slot": "menu-list", className: cn("m-0 min-w-0 list-none p-0", mode === "horizontal" ? "flex items-center gap-1" : "flex flex-col gap-1", collapsedInline && "w-12", semanticClassNames.list), style: semanticStyles.list, children: renderNodes(items) }) }));
+}

package/dist/core/message.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+type MessageTone = "info" | "success" | "warning" | "error";
+type MessageOpen = (content: ReactNode, tone?: MessageTone) => void;
+export interface MessageProviderProps {
+    children: ReactNode;
+    duration?: number;
+}
+export declare function MessageProvider({ children, duration, }: MessageProviderProps): import("react").JSX.Element;
+export declare function useMessage(): {
+    open: MessageOpen;
+    info: (content: ReactNode) => void;
+    success: (content: ReactNode) => void;
+    warning: (content: ReactNode) => void;
+    error: (content: ReactNode) => void;
+};
+export {};

package/dist/core/message.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState, } from "react";
+const MessageContext = createContext(null);
+export function MessageProvider({ children, duration = 2500, }) {
+    const [items, setItems] = useState([]);
+    const nextId = useRef(0);
+    const timers = useRef(new Map());
+    const show = useCallback((content, tone = "info") => {
+        nextId.current += 1;
+        const id = nextId.current;
+        setItems((current) => [...current, { id, content, tone }]);
+        const timer = setTimeout(() => {
+            timers.current.delete(id);
+            setItems((current) => current.filter((item) => item.id !== id));
+        }, Math.max(0, duration));
+        timers.current.set(id, timer);
+    }, [duration]);
+    useEffect(() => () => {
+        for (const timer of timers.current.values())
+            clearTimeout(timer);
+        timers.current.clear();
+    }, []);
+    return (_jsxs(MessageContext.Provider, { value: show, children: [children, _jsx("div", { "data-slot": "message-region", className: "pointer-events-none fixed inset-x-0 top-4 z-[100] flex flex-col items-center gap-2", children: items.map((item) => (_jsx("div", { "data-slot": "message", "data-tone": item.tone, role: item.tone === "error" ? "alert" : "status", "aria-atomic": "true", className: "rounded-md border bg-popover px-4 py-2 text-sm shadow-overlay", children: item.content }, item.id))) })] }));
+}
+export function useMessage() {
+    const open = useContext(MessageContext);
+    if (!open)
+        throw new Error("useMessage must be used inside MessageProvider");
+    return {
+        open,
+        info: (content) => open(content, "info"),
+        success: (content) => open(content, "success"),
+        warning: (content) => open(content, "warning"),
+        error: (content) => open(content, "error"),
+    };
+}

package/dist/core/modal.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode, type CSSProperties } from "react";
+import { type ButtonProps } from "./button.js";
+export interface ModalProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    onClose?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    afterOpenChange?: (open: boolean) => void;
+    size?: "sm" | "md" | "lg" | "xl";
+    maxWidth?: string;
+    className?: string;
+    closeOnEsc?: boolean;
+    closeOnBackdrop?: boolean;
+    showCloseButton?: boolean;
+    "aria-label"?: string;
+    contentStyle?: CSSProperties;
+    loading?: boolean;
+    centered?: boolean;
+    mask?: boolean;
+    zIndex?: number;
+    destroyOnClose?: boolean;
+    onOk?: () => void | Promise<void>;
+    onCancel?: () => void;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+    confirmLoading?: boolean;
+    okButtonProps?: ButtonProps;
+    cancelButtonProps?: ButtonProps;
+    styles?: {
+        header?: CSSProperties;
+        body?: CSSProperties;
+        footer?: CSSProperties;
+        mask?: CSSProperties;
+    };
+}
+export declare function Modal({ open, defaultOpen, title, description, children, footer, onClose, onOpenChange, afterOpenChange, size, maxWidth, className, closeOnEsc, closeOnBackdrop, showCloseButton, "aria-label": ariaLabel, contentStyle, loading, centered, mask, zIndex, destroyOnClose, onOk, onCancel, okText, cancelText, confirmLoading, okButtonProps, cancelButtonProps, styles, }: ModalProps): import("react").JSX.Element;

package/dist/core/modal.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useRef, useState, } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "../components/primitives/dialog.js";
+import { Button } from "./button.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 Modal({ open, defaultOpen = false, title, description, children, footer, onClose, onOpenChange, afterOpenChange, size = "md", maxWidth, className, closeOnEsc = true, closeOnBackdrop = false, showCloseButton = true, "aria-label": ariaLabel, contentStyle, loading = false, centered = true, mask = true, zIndex = 50, destroyOnClose = true, onOk, onCancel, okText = "确定", cancelText = "取消", confirmLoading = false, okButtonProps, cancelButtonProps, styles, }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const previousFocus = useRef(null);
+    const controlled = open !== undefined;
+    const visible = open ?? internalOpen;
+    const hasBody = loading || children != null;
+    const retained = useOverlayBody(children, visible, destroyOnClose);
+    const changeOpen = (next) => {
+        if (!controlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+        if (!next) {
+            onCancel?.();
+            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]);
+    return (_jsxs(_Fragment, { children: [retained.portal, _jsx(Dialog, { open: visible, onOpenChange: changeOpen, children: _jsxs(DialogContent, { className: cn({
+                        sm: "sm:max-w-md",
+                        md: "sm:max-w-xl",
+                        lg: "sm:max-w-3xl",
+                        xl: "sm:max-w-5xl",
+                    }[size], !centered && "top-[10vh] translate-y-0", "max-h-[calc(100dvh-2rem)] overflow-y-auto", className), style: { maxWidth, zIndex, ...contentStyle }, mask: mask, zIndex: zIndex, maskStyle: styles?.mask, showCloseButton: showCloseButton, onEscapeKeyDown: (e) => {
+                        if (!closeOnEsc)
+                            e.preventDefault();
+                    }, onPointerDownOutside: (e) => {
+                        if (!closeOnBackdrop)
+                            e.preventDefault();
+                    }, onCloseAutoFocus: (e) => {
+                        if (previousFocus.current?.isConnected) {
+                            e.preventDefault();
+                            previousFocus.current.focus();
+                        }
+                    }, children: [_jsxs(DialogHeader, { style: styles?.header, children: [_jsx(DialogTitle, { className: title ? undefined : "sr-only", children: title || ariaLabel || closeText() }), description ? (_jsx(DialogDescription, { children: description })) : null] }), hasBody ? (_jsxs("div", { "data-slot": "modal-body", className: "min-w-0 py-2", 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 })] })) : null, (footer !== undefined ? footer !== null : Boolean(onOk)) && (_jsx("div", { className: "flex flex-wrap justify-end gap-3 border-t pt-4", style: styles?.footer, children: footer !== undefined ? (footer) : (_jsxs(_Fragment, { children: [_jsx(Button, { ...cancelButtonProps, disabled: confirmLoading || cancelButtonProps?.disabled, onClick: (event) => {
+                                            cancelButtonProps?.onClick?.(event);
+                                            if (!event.defaultPrevented)
+                                                changeOpen(false);
+                                        }, children: cancelText }), _jsx(Button, { variant: "solid", color: "primary", ...okButtonProps, loading: confirmLoading || okButtonProps?.loading, onClick: (event) => {
+                                            okButtonProps?.onClick?.(event);
+                                            if (!event.defaultPrevented)
+                                                void onOk?.();
+                                        }, children: okText })] })) }))] }) })] }));
+}

package/dist/core/notification.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export interface NotificationNotice {
+    title: ReactNode;
+    description?: ReactNode;
+    duration?: number;
+}
+export interface NotificationProviderProps {
+    children: ReactNode;
+}
+type NotificationOpen = (notice: NotificationNotice) => void;
+export declare function NotificationProvider({ children, }: NotificationProviderProps): import("react").JSX.Element;
+export declare function useNotification(): {
+    open: NotificationOpen;
+};
+export {};