@gouno/ui 0.3.2

package/dist/core/tree.d.ts

@@ -0,0 +1,89 @@
+import { type ChangeEvent, type CSSProperties, type HTMLAttributes, type Key, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from "react";
+export interface TreeNode {
+    key: Key;
+    title: ReactNode;
+    children?: readonly TreeNode[];
+    disabled?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    disableCheckbox?: boolean;
+    icon?: ReactNode | ((info: TreeNodeRenderInfo) => ReactNode);
+    isLeaf?: boolean;
+}
+export interface TreeNodeRenderInfo {
+    node: TreeNode;
+    expanded: boolean;
+    selected: boolean;
+    checked: boolean;
+    halfChecked: boolean;
+    loading: boolean;
+    disabled: boolean;
+}
+export interface TreeExpandInfo {
+    expanded: boolean;
+    node: TreeNode;
+}
+export interface TreeSelectInfo {
+    selected: boolean;
+    selectedNodes: TreeNode[];
+    node: TreeNode;
+    nativeEvent: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+}
+export interface TreeCheckInfo {
+    checked: boolean;
+    checkedNodes: TreeNode[];
+    halfCheckedKeys: Key[];
+    node: TreeNode;
+    nativeEvent: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLDivElement>;
+}
+export type TreeCheckedKeys = readonly Key[] | {
+    checked: readonly Key[];
+    halfChecked: readonly Key[];
+};
+export type TreeSemantic = "root" | "item" | "switcher" | "checkbox" | "icon" | "title" | "group";
+export interface TreeSemanticInfo {
+    props: Readonly<{
+        checkable: boolean;
+        multiple: boolean;
+        disabled: boolean;
+        showLine: boolean;
+        blockNode: boolean;
+    }>;
+}
+export type TreeClassNames = Partial<Record<TreeSemantic, string>> | ((info: TreeSemanticInfo) => Partial<Record<TreeSemantic, string>>);
+export type TreeStyles = Partial<Record<TreeSemantic, CSSProperties>> | ((info: TreeSemanticInfo) => Partial<Record<TreeSemantic, CSSProperties>>);
+export interface TreeProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onLoad" | "onSelect"> {
+    treeData: readonly TreeNode[];
+    expandedKeys?: readonly Key[];
+    defaultExpandedKeys?: readonly Key[];
+    defaultExpandAll?: boolean;
+    selectedKeys?: readonly Key[];
+    defaultSelectedKeys?: readonly Key[];
+    checkedKeys?: TreeCheckedKeys;
+    defaultCheckedKeys?: readonly Key[];
+    loadedKeys?: readonly Key[];
+    checkable?: boolean;
+    checkStrictly?: boolean;
+    multiple?: boolean;
+    selectable?: boolean;
+    disabled?: boolean;
+    blockNode?: boolean;
+    showIcon?: boolean;
+    showLine?: boolean;
+    icon?: ReactNode | ((info: TreeNodeRenderInfo) => ReactNode);
+    switcherIcon?: ReactNode | ((info: TreeNodeRenderInfo) => ReactNode);
+    switcherLoadingIcon?: ReactNode;
+    titleRender?: (node: TreeNode) => ReactNode;
+    filterTreeNode?: (node: TreeNode) => boolean;
+    loadData?: (node: TreeNode) => Promise<void>;
+    onExpand?: (expandedKeys: Key[], info: TreeExpandInfo) => void;
+    onSelect?: (selectedKeys: Key[], info: TreeSelectInfo) => void;
+    onCheck?: (checkedKeys: TreeCheckedKeys, info: TreeCheckInfo) => void;
+    onLoad?: (loadedKeys: Key[], info: {
+        node: TreeNode;
+    }) => void;
+    classNames?: TreeClassNames;
+    styles?: TreeStyles;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Tree({ treeData, expandedKeys, defaultExpandedKeys, defaultExpandAll, selectedKeys, defaultSelectedKeys, checkedKeys, defaultCheckedKeys, loadedKeys, checkable, checkStrictly, multiple, selectable, disabled, blockNode, showIcon, showLine, icon, switcherIcon, switcherLoadingIcon, titleRender, filterTreeNode, loadData, onExpand, onSelect, onCheck, onLoad, classNames, styles, className, style, ref, ...props }: TreeProps): import("react").JSX.Element;

package/dist/core/tree.js

@@ -0,0 +1,386 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+function keyToken(key) {
+    return `${typeof key === "number" ? "n" : "s"}:${String(key)}`;
+}
+function keyIncludes(keys, key) {
+    return keys.some((candidate) => candidate === key);
+}
+function flattenAll(nodes, parentKey, level = 1) {
+    return nodes.flatMap((node, index) => [
+        { node, parentKey, level, index },
+        ...flattenAll(node.children ?? [], node.key, level + 1),
+    ]);
+}
+function flattenVisible(nodes, expanded, parentKey, level = 1) {
+    return nodes.flatMap((node, index) => {
+        const entry = { node, parentKey, level, index };
+        return [
+            entry,
+            ...(keyIncludes(expanded, node.key)
+                ? flattenVisible(node.children ?? [], expanded, node.key, level + 1)
+                : []),
+        ];
+    });
+}
+function branchKeys(nodes) {
+    return flattenAll(nodes)
+        .filter(({ node }) => Boolean(node.children?.length) || node.isLeaf === false)
+        .map(({ node }) => node.key);
+}
+function uniqueKeys(keys) {
+    return Array.from(new Set(keys));
+}
+function isStrictCheckedKeys(value) {
+    return !Array.isArray(value);
+}
+function rawCheckedKeys(value) {
+    if (!value)
+        return [];
+    return isStrictCheckedKeys(value) ? value.checked : value;
+}
+function checkedNodesFor(keys, entries) {
+    const set = new Set(keys);
+    return entries.filter(({ node }) => set.has(node.key)).map(({ node }) => node);
+}
+function resolveNodeIcon(source, info) {
+    return typeof source === "function" ? source(info) : source;
+}
+function resolveSwitcherIcon(source, info) {
+    if (source)
+        return typeof source === "function" ? source(info) : source;
+    return info.expanded ? (_jsx(ChevronDown, { "aria-hidden": "true" })) : (_jsx(ChevronRight, { "aria-hidden": "true" }));
+}
+function titleId(key, level, index) {
+    const safeKey = keyToken(key).replace(/[^a-zA-Z0-9_-]/g, "-");
+    return `gouno-tree-title-${level}-${index}-${safeKey}`;
+}
+export function Tree({ treeData, expandedKeys, defaultExpandedKeys = [], defaultExpandAll = false, selectedKeys, defaultSelectedKeys = [], checkedKeys, defaultCheckedKeys = [], loadedKeys, checkable = false, checkStrictly = false, multiple = false, selectable = true, disabled = false, blockNode = false, showIcon = false, showLine = false, icon, switcherIcon, switcherLoadingIcon, titleRender, filterTreeNode, loadData, onExpand, onSelect, onCheck, onLoad, classNames, styles, className, style, ref, ...props }) {
+    const rootRef = useRef(null);
+    const allEntries = useMemo(() => flattenAll(treeData), [treeData]);
+    const entryByKey = useMemo(() => new Map(allEntries.map((entry) => [entry.node.key, entry])), [allEntries]);
+    const orderByKey = useMemo(() => new Map(allEntries.map((entry, index) => [entry.node.key, index])), [allEntries]);
+    const [internalExpandedKeys, setInternalExpandedKeys] = useState(() => uniqueKeys(defaultExpandAll
+        ? [...branchKeys(treeData), ...defaultExpandedKeys]
+        : defaultExpandedKeys));
+    const activeExpandedKeys = expandedKeys ?? internalExpandedKeys;
+    const [internalSelectedKeys, setInternalSelectedKeys] = useState(() => uniqueKeys(defaultSelectedKeys));
+    const activeSelectedKeys = selectedKeys ?? internalSelectedKeys;
+    const [internalCheckedKeys, setInternalCheckedKeys] = useState(() => uniqueKeys(defaultCheckedKeys));
+    const incomingCheckedKeys = checkedKeys
+        ? rawCheckedKeys(checkedKeys)
+        : internalCheckedKeys;
+    const [internalLoadedKeys, setInternalLoadedKeys] = useState([]);
+    const activeLoadedKeys = loadedKeys ?? internalLoadedKeys;
+    const [loadingKeys, setLoadingKeys] = useState([]);
+    const semanticInfo = {
+        props: { checkable, multiple, disabled, showLine, blockNode },
+    };
+    const semanticClassNames = typeof classNames === "function" ? classNames(semanticInfo) : (classNames ?? {});
+    const semanticStyles = typeof styles === "function" ? styles(semanticInfo) : (styles ?? {});
+    const conductedCheckedKeys = useMemo(() => {
+        if (checkStrictly)
+            return uniqueKeys(incomingCheckedKeys);
+        const checked = new Set();
+        const addDescendants = (node) => {
+            if (!node.disabled && !node.disableCheckbox && node.checkable !== false) {
+                checked.add(node.key);
+            }
+            for (const child of node.children ?? [])
+                addDescendants(child);
+        };
+        for (const key of incomingCheckedKeys) {
+            const entry = entryByKey.get(key);
+            if (entry)
+                addDescendants(entry.node);
+        }
+        for (const { node } of [...allEntries].reverse()) {
+            if (node.disabled || node.disableCheckbox || node.checkable === false)
+                continue;
+            const eligibleChildren = (node.children ?? []).filter((child) => !child.disabled && !child.disableCheckbox && child.checkable !== false);
+            if (eligibleChildren.length &&
+                eligibleChildren.every((child) => checked.has(child.key))) {
+                checked.add(node.key);
+            }
+        }
+        return allEntries
+            .filter(({ node }) => checked.has(node.key))
+            .map(({ node }) => node.key);
+    }, [allEntries, checkStrictly, entryByKey, incomingCheckedKeys]);
+    const halfCheckedKeys = useMemo(() => {
+        if (checkStrictly) {
+            return checkedKeys && isStrictCheckedKeys(checkedKeys)
+                ? [...checkedKeys.halfChecked]
+                : [];
+        }
+        const checked = new Set(conductedCheckedKeys);
+        const half = new Set();
+        for (const { node } of [...allEntries].reverse()) {
+            if (checked.has(node.key))
+                continue;
+            const children = (node.children ?? []).filter((child) => !child.disabled && !child.disableCheckbox && child.checkable !== false);
+            if (children.some((child) => checked.has(child.key) || half.has(child.key))) {
+                half.add(node.key);
+            }
+        }
+        return allEntries
+            .filter(({ node }) => half.has(node.key))
+            .map(({ node }) => node.key);
+    }, [allEntries, checkStrictly, checkedKeys, conductedCheckedKeys]);
+    const visibleEntries = useMemo(() => flattenVisible(treeData, activeExpandedKeys), [activeExpandedKeys, treeData]);
+    const initialFocusKey = activeSelectedKeys.find((key) => visibleEntries.some(({ node }) => node.key === key)) ?? visibleEntries[0]?.node.key;
+    const [focusKey, setFocusKey] = useState(initialFocusKey);
+    const setRootRef = (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    const focusNode = (key) => {
+        if (key === undefined)
+            return;
+        setFocusKey(key);
+        queueMicrotask(() => {
+            const token = keyToken(key);
+            const candidates = rootRef.current?.querySelectorAll("[data-tree-key]") ?? [];
+            Array.from(candidates)
+                .find((element) => element.dataset.treeKey === token)
+                ?.focus();
+        });
+    };
+    const sortKeys = (keys) => Array.from(new Set(keys)).sort((a, b) => (orderByKey.get(a) ?? Number.MAX_SAFE_INTEGER) -
+        (orderByKey.get(b) ?? Number.MAX_SAFE_INTEGER));
+    const requestLoad = async (node) => {
+        if (!loadData ||
+            node.isLeaf === true ||
+            keyIncludes(activeLoadedKeys, node.key) ||
+            keyIncludes(loadingKeys, node.key)) {
+            return;
+        }
+        setLoadingKeys((keys) => uniqueKeys([...keys, node.key]));
+        try {
+            await loadData(node);
+            const nextLoadedKeys = sortKeys([...activeLoadedKeys, node.key]);
+            if (loadedKeys === undefined)
+                setInternalLoadedKeys(nextLoadedKeys);
+            onLoad?.(nextLoadedKeys, { node });
+        }
+        finally {
+            setLoadingKeys((keys) => keys.filter((key) => key !== node.key));
+        }
+    };
+    const setExpanded = (node, expanded) => {
+        const nextKeys = expanded
+            ? sortKeys([...activeExpandedKeys, node.key])
+            : activeExpandedKeys.filter((key) => key !== node.key);
+        if (expandedKeys === undefined)
+            setInternalExpandedKeys(nextKeys);
+        onExpand?.(nextKeys, { expanded, node });
+        if (expanded)
+            void requestLoad(node);
+    };
+    const selectNode = (node, event) => {
+        const nodeDisabled = disabled || node.disabled;
+        if (nodeDisabled || !selectable || node.selectable === false)
+            return;
+        const currentlySelected = keyIncludes(activeSelectedKeys, node.key);
+        const additive = multiple && (event.metaKey || event.ctrlKey);
+        const nextKeys = !multiple || !additive
+            ? currentlySelected && multiple
+                ? []
+                : [node.key]
+            : currentlySelected
+                ? activeSelectedKeys.filter((key) => key !== node.key)
+                : sortKeys([...activeSelectedKeys, node.key]);
+        if (selectedKeys === undefined)
+            setInternalSelectedKeys(nextKeys);
+        onSelect?.(nextKeys, {
+            selected: keyIncludes(nextKeys, node.key),
+            selectedNodes: checkedNodesFor(nextKeys, allEntries),
+            node,
+            nativeEvent: event,
+        });
+    };
+    const setChecked = (node, nextChecked, event) => {
+        const nodeDisabled = disabled || node.disabled || node.disableCheckbox || node.checkable === false;
+        if (nodeDisabled || !checkable)
+            return;
+        const current = new Set(conductedCheckedKeys);
+        if (checkStrictly) {
+            if (nextChecked)
+                current.add(node.key);
+            else
+                current.delete(node.key);
+        }
+        else {
+            const descendants = flattenAll([node]).map(({ node: child }) => child);
+            for (const child of descendants) {
+                if (child.disabled || child.disableCheckbox || child.checkable === false) {
+                    continue;
+                }
+                if (nextChecked)
+                    current.add(child.key);
+                else
+                    current.delete(child.key);
+            }
+            let parentKey = entryByKey.get(node.key)?.parentKey;
+            while (parentKey !== undefined) {
+                current.delete(parentKey);
+                parentKey = entryByKey.get(parentKey)?.parentKey;
+            }
+            for (const { node: candidate } of [...allEntries].reverse()) {
+                if (candidate.disabled ||
+                    candidate.disableCheckbox ||
+                    candidate.checkable === false) {
+                    continue;
+                }
+                const children = (candidate.children ?? []).filter((child) => !child.disabled && !child.disableCheckbox && child.checkable !== false);
+                if (children.length && children.every((child) => current.has(child.key))) {
+                    current.add(candidate.key);
+                }
+            }
+        }
+        const nextKeys = sortKeys(current);
+        if (checkedKeys === undefined)
+            setInternalCheckedKeys(nextKeys);
+        const nextHalfKeys = checkStrictly
+            ? checkedKeys && isStrictCheckedKeys(checkedKeys)
+                ? [...checkedKeys.halfChecked]
+                : []
+            : (() => {
+                const checked = new Set(nextKeys);
+                const half = new Set();
+                for (const { node: candidate } of [...allEntries].reverse()) {
+                    if (checked.has(candidate.key))
+                        continue;
+                    const children = (candidate.children ?? []).filter((child) => !child.disabled &&
+                        !child.disableCheckbox &&
+                        child.checkable !== false);
+                    if (children.some((child) => checked.has(child.key) || half.has(child.key))) {
+                        half.add(candidate.key);
+                    }
+                }
+                return sortKeys(half);
+            })();
+        const output = checkStrictly
+            ? { checked: nextKeys, halfChecked: nextHalfKeys }
+            : nextKeys;
+        onCheck?.(output, {
+            checked: nextChecked,
+            checkedNodes: checkedNodesFor(nextKeys, allEntries),
+            halfCheckedKeys: nextHalfKeys,
+            node,
+            nativeEvent: event,
+        });
+    };
+    const handleKeyDown = (event, entry) => {
+        const { node, parentKey } = entry;
+        const visibleIndex = visibleEntries.findIndex(({ node: visibleNode }) => visibleNode.key === node.key);
+        const expanded = keyIncludes(activeExpandedKeys, node.key);
+        const hasChildren = Boolean(node.children?.length) || (Boolean(loadData) && node.isLeaf !== true);
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            focusNode(visibleEntries[Math.min(visibleEntries.length - 1, visibleIndex + 1)]
+                ?.node.key);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            focusNode(visibleEntries[Math.max(0, visibleIndex - 1)]?.node.key);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focusNode(visibleEntries[0]?.node.key);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focusNode(visibleEntries.at(-1)?.node.key);
+            return;
+        }
+        if (event.key === "ArrowRight" && hasChildren) {
+            event.preventDefault();
+            if (!expanded)
+                setExpanded(node, true);
+            else
+                focusNode(node.children?.[0]?.key);
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            if (expanded && hasChildren) {
+                event.preventDefault();
+                setExpanded(node, false);
+            }
+            else if (parentKey !== undefined) {
+                event.preventDefault();
+                focusNode(parentKey);
+            }
+            return;
+        }
+        if (event.key === " " &&
+            checkable &&
+            node.checkable !== false &&
+            !node.disableCheckbox) {
+            event.preventDefault();
+            setChecked(node, !keyIncludes(conductedCheckedKeys, node.key), event);
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            selectNode(node, event);
+        }
+    };
+    const renderNodes = (nodes, parentKey, level = 1) => (_jsx("ul", { role: level === 1 ? "none" : "group", "data-slot": level === 1 ? "tree-list" : "tree-group", className: cn("m-0 flex list-none flex-col gap-0 p-0", level > 1 && (showLine ? "ml-3 border-l pl-3" : "pl-6"), level > 1 && semanticClassNames.group), style: level > 1 ? semanticStyles.group : undefined, children: nodes.map((node, index) => {
+            const entry = { node, parentKey, level, index };
+            const nodeDisabled = disabled || Boolean(node.disabled);
+            const expanded = keyIncludes(activeExpandedKeys, node.key);
+            const selected = keyIncludes(activeSelectedKeys, node.key);
+            const checked = keyIncludes(conductedCheckedKeys, node.key);
+            const halfChecked = keyIncludes(halfCheckedKeys, node.key);
+            const loading = keyIncludes(loadingKeys, node.key);
+            const hasChildren = Boolean(node.children?.length) ||
+                (Boolean(loadData) && node.isLeaf !== true);
+            const nodeInfo = {
+                node,
+                expanded,
+                selected,
+                checked,
+                halfChecked,
+                loading,
+                disabled: nodeDisabled,
+            };
+            const resolvedIcon = showIcon
+                ? resolveNodeIcon(node.icon ?? icon, nodeInfo)
+                : null;
+            const title = titleRender ? titleRender(node) : node.title;
+            const matched = Boolean(filterTreeNode?.(node));
+            const tabbable = focusKey === undefined ? node.key === initialFocusKey : node.key === focusKey;
+            const nodeTitleId = titleId(node.key, level, index);
+            return (_jsxs("li", { role: "none", className: "min-w-0", children: [_jsxs("div", { role: "treeitem", tabIndex: tabbable ? 0 : -1, "data-tree-key": keyToken(node.key), "data-slot": "tree-item", "data-selected": selected || undefined, "data-filter-match": matched || undefined, "aria-expanded": hasChildren ? expanded : undefined, "aria-selected": selectable && node.selectable !== false ? selected : undefined, "aria-checked": checkable && node.checkable !== false
+                            ? halfChecked
+                                ? "mixed"
+                                : checked
+                            : undefined, "aria-disabled": nodeDisabled || undefined, "aria-busy": loading || undefined, "aria-level": level, "aria-posinset": index + 1, "aria-setsize": nodes.length, onFocus: () => setFocusKey(node.key), onClick: (event) => selectNode(node, event), onKeyDown: (event) => handleKeyDown(event, entry), className: cn("flex min-w-0 items-center gap-1 rounded-md px-1 py-0.5 text-sm outline-none transition-colors", blockNode ? "w-full" : "w-fit max-w-full", !nodeDisabled &&
+                            "hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring", selected && "bg-accent text-accent-foreground", matched && "font-medium", nodeDisabled && "cursor-not-allowed opacity-50", semanticClassNames.item), style: semanticStyles.item, children: [hasChildren ? (_jsx(Button, { variant: "text", shape: "circle", size: "small", tabIndex: -1, "aria-label": expanded ? "Collapse" : "Expand", "aria-expanded": expanded, disabled: nodeDisabled, onClick: (event) => {
+                                    event.stopPropagation();
+                                    setExpanded(node, !expanded);
+                                }, className: cn("size-6 min-h-0 shrink-0 p-0", semanticClassNames.switcher), style: semanticStyles.switcher, children: loading
+                                    ? switcherLoadingIcon ?? _jsx(Spinner, {})
+                                    : resolveSwitcherIcon(switcherIcon, nodeInfo) })) : (_jsx("span", { "aria-hidden": "true", "data-slot": "tree-switcher-placeholder", className: cn("size-6 shrink-0", semanticClassNames.switcher), style: semanticStyles.switcher })), checkable && node.checkable !== false ? (_jsx("input", { ref: (input) => {
+                                    if (input)
+                                        input.indeterminate = halfChecked;
+                                }, type: "checkbox", tabIndex: -1, checked: checked, disabled: nodeDisabled || node.disableCheckbox, "aria-labelledby": nodeTitleId, "aria-checked": halfChecked ? "mixed" : checked, "data-indeterminate": halfChecked || undefined, onClick: (event) => event.stopPropagation(), onChange: (event) => {
+                                    event.stopPropagation();
+                                    setChecked(node, event.currentTarget.checked, event);
+                                }, className: cn("size-4 shrink-0 accent-primary", semanticClassNames.checkbox), style: semanticStyles.checkbox })) : null, resolvedIcon ? (_jsx("span", { "data-slot": "tree-icon", "aria-hidden": "true", className: cn("flex size-5 shrink-0 items-center justify-center", semanticClassNames.icon), style: semanticStyles.icon, children: resolvedIcon })) : null, _jsx("span", { id: nodeTitleId, "data-slot": "tree-title", className: cn("min-w-0 break-words", semanticClassNames.title), style: semanticStyles.title, children: title })] }), expanded && node.children?.length
+                        ? renderNodes(node.children, node.key, level + 1)
+                        : null] }, node.key));
+        }) }));
+    return (_jsx("div", { ...props, ref: setRootRef, role: "tree", "aria-multiselectable": multiple || undefined, "aria-disabled": disabled || undefined, "data-slot": "tree", "data-checkable": checkable || undefined, "data-show-line": showLine || undefined, className: cn("min-w-0", semanticClassNames.root, className), style: { ...semanticStyles.root, ...style }, children: renderNodes(treeData) }));
+}

package/dist/core/typography.d.ts

@@ -0,0 +1,20 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type TextSize = "xs" | "sm" | "md" | "lg";
+export type TextTone = "default" | "muted" | "danger" | "success";
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: HeadingLevel;
+    children?: ReactNode;
+}
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    size?: TextSize;
+    tone?: TextTone;
+    children?: ReactNode;
+}
+export interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+export declare function Heading({ level, children, className, ...props }: HeadingProps): import("react").JSX.Element;
+export declare function Text({ as: Component, size, tone, children, className, ...props }: TextProps): import("react").JSX.Element;
+export declare function Typography({ as: Component, className, ...props }: TypographyProps): import("react").JSX.Element;

package/dist/core/typography.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export function Heading({ level = 2, children, className, ...props }) {
+    const Tag = `h${level}`;
+    return _jsx(Tag, { ...props, "data-slot": "heading", className: cn(level === 1 ? "text-3xl font-semibold tracking-tight" : level === 2 ? "text-2xl font-semibold tracking-tight" : level === 3 ? "text-xl font-semibold" : "text-lg font-semibold", className), children: children });
+}
+export function Text({ as: Component = "p", size = "md", tone = "default", children, className, ...props }) {
+    return _jsx(Component, { ...props, "data-slot": "text", className: cn(size === "xs" ? "text-xs" : size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base", tone === "muted" && "text-muted-foreground", tone === "danger" && "text-destructive", tone === "success" && "text-success", className), children: children });
+}
+export function Typography({ as: Component = "p", className, ...props }) {
+    return _jsx(Component, { ...props, "data-slot": "typography", className: cn("text-sm text-foreground", className) });
+}

package/dist/core/upload.d.ts

@@ -0,0 +1,20 @@
+import type { UploadLocale } from "./locale.js";
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface UploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "multiple" | "accept" | "value" | "defaultValue"> {
+    locale?: Partial<UploadLocale>;
+    children?: ReactNode;
+    files?: File[];
+    defaultFiles?: File[];
+    onFiles?: (files: File[]) => void;
+    onRemove?: (file: File) => void;
+    multiple?: boolean;
+    accept?: string;
+    maxCount?: number;
+    maxSize?: number;
+    error?: ReactNode;
+    showFileList?: boolean;
+    drag?: boolean;
+    beforeSelect?: (file: File, files: File[]) => boolean;
+    onReject?: (file: File, reason: "type" | "size" | "beforeSelect" | "maxCount") => void;
+}
+export declare function Upload({ locale, children, files, defaultFiles, onFiles, onRemove, multiple, accept, maxCount, maxSize, disabled, readOnly, error, showFileList, drag, beforeSelect, onReject, id, className, ...props }: UploadProps): import("react").JSX.Element;

package/dist/core/upload.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentLocale } from "./config-provider.js";
+import { useId, useState, } from "react";
+import { UploadCloud, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+export function Upload({ locale, children, files, defaultFiles = [], onFiles, onRemove, multiple = false, accept, maxCount, maxSize, disabled, readOnly, error, showFileList = true, drag = false, beforeSelect, onReject, id, className, ...props }) {
+    const text = useComponentLocale("upload", locale);
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const [internalFiles, setInternalFiles] = useState(defaultFiles);
+    const currentFiles = files ?? internalFiles;
+    const update = (next) => {
+        if (files === undefined)
+            setInternalFiles(next);
+        onFiles?.(next);
+    };
+    const acceptTokens = accept
+        ?.split(",")
+        .map((token) => token.trim())
+        .filter(Boolean) ?? [];
+    const accepts = (file) => acceptTokens.length === 0 ||
+        acceptTokens.some((token) => token.startsWith(".")
+            ? file.name.toLowerCase().endsWith(token.toLowerCase())
+            : token.endsWith("/*")
+                ? file.type.startsWith(token.slice(0, -1))
+                : file.type === token);
+    const select = (incoming) => {
+        if (disabled || readOnly)
+            return;
+        const selected = incoming.filter((file) => {
+            if (!accepts(file)) {
+                onReject?.(file, "type");
+                return false;
+            }
+            if (maxSize !== undefined && file.size > maxSize) {
+                onReject?.(file, "size");
+                return false;
+            }
+            if (beforeSelect && !beforeSelect(file, incoming)) {
+                onReject?.(file, "beforeSelect");
+                return false;
+            }
+            return true;
+        });
+        const combined = multiple
+            ? [...currentFiles, ...selected]
+            : selected.slice(0, 1);
+        if (maxCount !== undefined && combined.length > maxCount)
+            combined.slice(maxCount).forEach((file) => onReject?.(file, "maxCount"));
+        update(maxCount === undefined ? combined : combined.slice(0, maxCount));
+    };
+    const change = (event) => {
+        select(Array.from(event.target.files ?? []));
+        event.target.value = "";
+    };
+    const remove = (file) => {
+        if (disabled || readOnly)
+            return;
+        update(currentFiles.filter((candidate) => candidate !== file));
+        onRemove?.(file);
+    };
+    const descriptionId = error ? `${inputId}-error` : undefined;
+    return (_jsxs("div", { className: cn("space-y-3", className), "data-disabled": disabled || undefined, children: [_jsx("input", { ...props, id: inputId, type: "file", className: "sr-only", multiple: multiple, accept: accept, disabled: disabled || readOnly, "aria-invalid": Boolean(error) || undefined, "aria-describedby": descriptionId, onChange: change }), _jsxs("label", { htmlFor: inputId, onDragOver: drag ? (event) => event.preventDefault() : undefined, onDrop: drag
+                    ? (event) => {
+                        event.preventDefault();
+                        if (!disabled && !readOnly)
+                            select(Array.from(event.dataTransfer.files));
+                    }
+                    : undefined, className: cn("inline-flex min-h-9 cursor-pointer items-center rounded-md border bg-background px-3 py-2 text-sm font-medium transition-colors hover:bg-muted focus-within:ring-2 focus-within:ring-ring", drag &&
+                    "flex min-h-36 w-full flex-col justify-center gap-2 border-dashed text-center", (disabled || readOnly) &&
+                    "pointer-events-none cursor-not-allowed opacity-50"), children: [drag ? (_jsx(UploadCloud, { "aria-hidden": "true", className: "size-7 text-muted-foreground" })) : null, children ?? (drag ? "点击或拖放文件到这里" : "Choose file")] }), showFileList && currentFiles.length > 0 ? (_jsx("ul", { className: "space-y-1", "aria-label": text.fileListLabel, children: currentFiles.map((file, index) => (_jsxs("li", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2 text-sm", children: [_jsx("span", { className: "min-w-0 truncate", children: file.name }), _jsx("button", { type: "button", className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": text.removeLabel(file.name), disabled: disabled || readOnly, onClick: () => remove(file), children: _jsx(X, { className: "size-4" }) })] }, `${file.name}-${file.size}-${index}`))) })) : null, error ? (_jsx("div", { id: descriptionId, role: "alert", className: "text-sm text-destructive", children: error })) : null] }));
+}

package/dist/core/watermark.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+export interface WatermarkProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    content: string;
+    children: ReactNode;
+    rotate?: number;
+    gap?: number;
+    opacity?: number;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Watermark({ content, children, rotate, gap, opacity, ref, className, style, ...props }: WatermarkProps): import("react").JSX.Element;

package/dist/core/watermark.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+function escapeXmlText(value) {
+    return value
+        .replaceAll("&", "&")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;");
+}
+export function Watermark({ content, children, rotate = -22, gap = 120, opacity = 0.12, ref, className, style, ...props }) {
+    const tileSize = Math.max(32, Math.round(finiteOr(gap, 120)));
+    const center = tileSize / 2;
+    const safeRotate = finiteOr(rotate, -22);
+    const safeOpacity = Math.min(1, Math.max(0, finiteOr(opacity, 0.12)));
+    const escapedContent = escapeXmlText(content);
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tileSize}" height="${tileSize}" viewBox="0 0 ${tileSize} ${tileSize}"><text x="${center}" y="${center}" text-anchor="middle" dominant-baseline="middle" transform="rotate(${safeRotate} ${center} ${center})" fill="rgba(0,0,0,${safeOpacity})" font-size="16">${escapedContent}</text></svg>`;
+    const backgroundImage = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+    return (_jsx("div", { ...props, ref: ref, "data-slot": "watermark", className: cn("relative", className), style: { backgroundImage, ...style }, children: children }));
+}