@windrun-huaiin/third-ui 14.5.0 → 15.1.0

package/dist/main/pill-select/x-pill-select.js

@@ -0,0 +1,142 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var server = require('@windrun-huaiin/base-ui/components/server');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+
+function sanitizeInputValue(value) {
+    return value.replaceAll(',', '').trim();
+}
+function dedupeValues(values) {
+    return Array.from(new Set(values.map((item) => item.trim()).filter(Boolean)));
+}
+function XPillSelect(props) {
+    const { options = [], disabled = false, className, pillClassName, emptyLabel, maxPillWidthClassName = 'max-w-[180px] sm:max-w-[220px]', size = 'default', inputEnabled = false, inputPlaceholder, onInputTransform, allSelectedLabel, maxVisiblePills, } = props;
+    const [draftValue, setDraftValue] = React.useState('');
+    const [open, setOpen] = React.useState(false);
+    const [hovered, setHovered] = React.useState(false);
+    const rootRef = React.useRef(null);
+    const compact = size === 'compact';
+    const normalizedOptions = React.useMemo(() => options.map((option) => (Object.assign(Object.assign({}, option), { value: option.value.trim() }))).filter((option) => option.value), [options]);
+    const selectedValues = props.mode === 'single' ? (props.value ? [props.value] : []) : dedupeValues(props.value);
+    const allOptionValues = normalizedOptions.map((option) => option.value);
+    const isAllSelected = props.mode === 'multiple' &&
+        allOptionValues.length > 0 &&
+        allOptionValues.every((value) => selectedValues.includes(value));
+    const aggregatedSelectedLabel = isAllSelected ? (allSelectedLabel === null || allSelectedLabel === void 0 ? void 0 : allSelectedLabel.trim()) || '全部' : null;
+    const hasVisiblePillLimit = props.mode === 'multiple' && typeof maxVisiblePills === 'number' && maxVisiblePills >= 0;
+    const visibleSelectedValues = aggregatedSelectedLabel || !hasVisiblePillLimit
+        ? selectedValues
+        : selectedValues.slice(0, maxVisiblePills);
+    const hiddenSelectedCount = aggregatedSelectedLabel || !hasVisiblePillLimit
+        ? 0
+        : Math.max(selectedValues.length - visibleSelectedValues.length, 0);
+    React.useEffect(() => {
+        function handlePointerDown(event) {
+            var _a;
+            if (!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                setOpen(false);
+            }
+        }
+        if (open) {
+            document.addEventListener('mousedown', handlePointerDown);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+        };
+    }, [open]);
+    function isSelected(optionValue) {
+        return selectedValues.includes(optionValue);
+    }
+    function commitInputValue(rawValue) {
+        if (!inputEnabled || disabled) {
+            return;
+        }
+        const nextValue = sanitizeInputValue(onInputTransform ? onInputTransform(rawValue) : rawValue);
+        if (!nextValue) {
+            setDraftValue('');
+            return;
+        }
+        if (props.mode === 'single') {
+            props.onChange(nextValue);
+        }
+        else {
+            props.onChange(dedupeValues([...selectedValues, nextValue]));
+        }
+        setDraftValue('');
+    }
+    function toggleValue(nextValue) {
+        if (disabled) {
+            return;
+        }
+        if (props.mode === 'single') {
+            if (props.allowClear && props.value === nextValue) {
+                props.onChange('');
+                setOpen(false);
+                return;
+            }
+            props.onChange(nextValue);
+            setOpen(false);
+            return;
+        }
+        if (selectedValues.includes(nextValue)) {
+            props.onChange(selectedValues.filter((item) => item !== nextValue));
+            return;
+        }
+        props.onChange([...selectedValues, nextValue]);
+    }
+    function removeValue(nextValue) {
+        if (disabled) {
+            return;
+        }
+        if (props.mode === 'single') {
+            props.onChange('');
+            return;
+        }
+        props.onChange(selectedValues.filter((item) => item !== nextValue));
+    }
+    function clearAllSelectedValues() {
+        if (disabled || props.mode !== 'multiple') {
+            return;
+        }
+        props.onChange([]);
+    }
+    function toggleOpen() {
+        if (disabled) {
+            return;
+        }
+        setOpen((current) => !current);
+    }
+    return (jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn('relative', className), children: [jsxRuntime.jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": "listbox", onMouseEnter: () => !disabled && setHovered(true), onMouseLeave: () => setHovered(false), onClick: toggleOpen, onKeyDown: (event) => {
+                    if (event.key !== 'Enter' && event.key !== ' ') {
+                        return;
+                    }
+                    event.preventDefault();
+                    toggleOpen();
+                }, className: utils.cn('flex w-full items-center justify-between rounded-full border border-black/10 text-left transition dark:border-white/10', compact ? 'min-h-9 gap-2 px-3 py-1.5' : 'min-h-11 gap-3 px-4 py-2.5', !disabled && 'cursor-pointer', !disabled && (hovered || open) && lib.themeBorderColor, disabled && 'cursor-not-allowed opacity-60'), children: [jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: selectedValues.length > 0 ? (aggregatedSelectedLabel ? (jsxRuntime.jsx("button", { type: "button", onClick: (event) => {
+                                event.stopPropagation();
+                                clearAllSelectedValues();
+                            }, disabled: disabled, className: utils.cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1.5 px-3 py-1 text-xs', lib.themeBgColor, lib.themeIconColor, 'hover:brightness-95 dark:hover:brightness-110', disabled && 'cursor-not-allowed opacity-60'), title: aggregatedSelectedLabel, children: jsxRuntime.jsx("span", { className: utils.cn('truncate', maxPillWidthClassName), children: aggregatedSelectedLabel }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [visibleSelectedValues.map((selectedValue) => {
+                                    var _a, _b;
+                                    const optionLabel = (_b = (_a = normalizedOptions.find((option) => option.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue;
+                                    return (jsxRuntime.jsx("button", { type: "button", onClick: (event) => {
+                                            event.stopPropagation();
+                                            removeValue(selectedValue);
+                                        }, disabled: disabled, className: utils.cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1.5 px-3 py-1 text-xs', lib.themeBgColor, lib.themeIconColor, 'hover:brightness-95 dark:hover:brightness-110', disabled && 'cursor-not-allowed opacity-60'), title: optionLabel, children: jsxRuntime.jsx("span", { className: utils.cn('truncate', maxPillWidthClassName), children: optionLabel }) }, selectedValue));
+                                }), hiddenSelectedCount > 0 ? (jsxRuntime.jsxs("span", { className: utils.cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'px-2.5 py-0.5 text-[11px]' : 'px-3 py-1 text-xs', 'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-white'), title: `还有 ${hiddenSelectedCount} 项未展开`, children: ["+", hiddenSelectedCount] })) : null] }))) : (jsxRuntime.jsx("span", { className: utils.cn(compact ? 'text-xs' : 'text-sm', 'text-slate-500 dark:text-slate-400'), children: emptyLabel })) }), jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: utils.cn(compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'shrink-0 text-slate-500 transition-transform dark:text-slate-400', open && 'rotate-180') })] }), open ? (jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": props.mode === 'multiple' ? true : undefined, className: utils.cn('absolute left-0 right-0 top-[calc(100%+0.375rem)] z-50 rounded-3xl border border-black/10 bg-neutral-100 shadow-xl dark:border-white/10 dark:bg-neutral-900', compact ? 'space-y-2.5 p-3' : 'space-y-3 p-4', open && lib.themeBorderColor), children: [inputEnabled ? (jsxRuntime.jsx("input", { value: draftValue, onChange: (event) => setDraftValue(event.target.value.replaceAll(',', '')), onKeyDown: (event) => {
+                            if (event.key !== 'Enter') {
+                                return;
+                            }
+                            event.preventDefault();
+                            commitInputValue(draftValue);
+                        }, disabled: disabled, placeholder: inputPlaceholder, className: utils.cn('w-full rounded-full border border-black/10 text-slate-700 outline-none transition focus:border-purple-400 dark:border-white/10 dark:text-white', compact ? 'px-3 py-1.5 text-xs' : 'px-4 py-2.5 text-sm') })) : null, normalizedOptions.length > 0 ? (jsxRuntime.jsx("div", { className: utils.cn('flex flex-wrap', compact ? 'gap-1.5' : 'gap-2'), children: normalizedOptions.map((option) => {
+                            const active = isSelected(option.value);
+                            return (jsxRuntime.jsx("button", { type: "button", onClick: () => toggleValue(option.value), disabled: disabled, className: utils.cn('inline-flex items-center justify-center rounded-full border font-semibold transition-colors', compact ? 'px-3 py-1 text-[11px]' : 'px-4 py-2 text-xs', 'bg-neutral-200 text-neutral-700 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700', active &&
+                                    [lib.themeBgColor, lib.themeBorderColor, lib.themeIconColor], disabled && 'cursor-not-allowed opacity-60', pillClassName), title: option.label, children: jsxRuntime.jsx("span", { className: utils.cn('truncate', maxPillWidthClassName), children: option.label }) }, option.value));
+                        }) })) : null] })) : null] }));
+}
+
+exports.XPillSelect = XPillSelect;

package/dist/main/pill-select/x-pill-select.mjs

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { themeBgColor, themeIconColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+function sanitizeInputValue(value) {
+    return value.replaceAll(',', '').trim();
+}
+function dedupeValues(values) {
+    return Array.from(new Set(values.map((item) => item.trim()).filter(Boolean)));
+}
+function XPillSelect(props) {
+    const { options = [], disabled = false, className, pillClassName, emptyLabel, maxPillWidthClassName = 'max-w-[180px] sm:max-w-[220px]', size = 'default', inputEnabled = false, inputPlaceholder, onInputTransform, allSelectedLabel, maxVisiblePills, } = props;
+    const [draftValue, setDraftValue] = useState('');
+    const [open, setOpen] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const rootRef = useRef(null);
+    const compact = size === 'compact';
+    const normalizedOptions = useMemo(() => options.map((option) => (Object.assign(Object.assign({}, option), { value: option.value.trim() }))).filter((option) => option.value), [options]);
+    const selectedValues = props.mode === 'single' ? (props.value ? [props.value] : []) : dedupeValues(props.value);
+    const allOptionValues = normalizedOptions.map((option) => option.value);
+    const isAllSelected = props.mode === 'multiple' &&
+        allOptionValues.length > 0 &&
+        allOptionValues.every((value) => selectedValues.includes(value));
+    const aggregatedSelectedLabel = isAllSelected ? (allSelectedLabel === null || allSelectedLabel === void 0 ? void 0 : allSelectedLabel.trim()) || '全部' : null;
+    const hasVisiblePillLimit = props.mode === 'multiple' && typeof maxVisiblePills === 'number' && maxVisiblePills >= 0;
+    const visibleSelectedValues = aggregatedSelectedLabel || !hasVisiblePillLimit
+        ? selectedValues
+        : selectedValues.slice(0, maxVisiblePills);
+    const hiddenSelectedCount = aggregatedSelectedLabel || !hasVisiblePillLimit
+        ? 0
+        : Math.max(selectedValues.length - visibleSelectedValues.length, 0);
+    useEffect(() => {
+        function handlePointerDown(event) {
+            var _a;
+            if (!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                setOpen(false);
+            }
+        }
+        if (open) {
+            document.addEventListener('mousedown', handlePointerDown);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+        };
+    }, [open]);
+    function isSelected(optionValue) {
+        return selectedValues.includes(optionValue);
+    }
+    function commitInputValue(rawValue) {
+        if (!inputEnabled || disabled) {
+            return;
+        }
+        const nextValue = sanitizeInputValue(onInputTransform ? onInputTransform(rawValue) : rawValue);
+        if (!nextValue) {
+            setDraftValue('');
+            return;
+        }
+        if (props.mode === 'single') {
+            props.onChange(nextValue);
+        }
+        else {
+            props.onChange(dedupeValues([...selectedValues, nextValue]));
+        }
+        setDraftValue('');
+    }
+    function toggleValue(nextValue) {
+        if (disabled) {
+            return;
+        }
+        if (props.mode === 'single') {
+            if (props.allowClear && props.value === nextValue) {
+                props.onChange('');
+                setOpen(false);
+                return;
+            }
+            props.onChange(nextValue);
+            setOpen(false);
+            return;
+        }
+        if (selectedValues.includes(nextValue)) {
+            props.onChange(selectedValues.filter((item) => item !== nextValue));
+            return;
+        }
+        props.onChange([...selectedValues, nextValue]);
+    }
+    function removeValue(nextValue) {
+        if (disabled) {
+            return;
+        }
+        if (props.mode === 'single') {
+            props.onChange('');
+            return;
+        }
+        props.onChange(selectedValues.filter((item) => item !== nextValue));
+    }
+    function clearAllSelectedValues() {
+        if (disabled || props.mode !== 'multiple') {
+            return;
+        }
+        props.onChange([]);
+    }
+    function toggleOpen() {
+        if (disabled) {
+            return;
+        }
+        setOpen((current) => !current);
+    }
+    return (jsxs("div", { ref: rootRef, className: cn('relative', className), children: [jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, "aria-expanded": open, "aria-haspopup": "listbox", onMouseEnter: () => !disabled && setHovered(true), onMouseLeave: () => setHovered(false), onClick: toggleOpen, onKeyDown: (event) => {
+                    if (event.key !== 'Enter' && event.key !== ' ') {
+                        return;
+                    }
+                    event.preventDefault();
+                    toggleOpen();
+                }, className: cn('flex w-full items-center justify-between rounded-full border border-black/10 text-left transition dark:border-white/10', compact ? 'min-h-9 gap-2 px-3 py-1.5' : 'min-h-11 gap-3 px-4 py-2.5', !disabled && 'cursor-pointer', !disabled && (hovered || open) && themeBorderColor, disabled && 'cursor-not-allowed opacity-60'), children: [jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: selectedValues.length > 0 ? (aggregatedSelectedLabel ? (jsx("button", { type: "button", onClick: (event) => {
+                                event.stopPropagation();
+                                clearAllSelectedValues();
+                            }, disabled: disabled, className: cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1.5 px-3 py-1 text-xs', themeBgColor, themeIconColor, 'hover:brightness-95 dark:hover:brightness-110', disabled && 'cursor-not-allowed opacity-60'), title: aggregatedSelectedLabel, children: jsx("span", { className: cn('truncate', maxPillWidthClassName), children: aggregatedSelectedLabel }) })) : (jsxs(Fragment, { children: [visibleSelectedValues.map((selectedValue) => {
+                                    var _a, _b;
+                                    const optionLabel = (_b = (_a = normalizedOptions.find((option) => option.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue;
+                                    return (jsx("button", { type: "button", onClick: (event) => {
+                                            event.stopPropagation();
+                                            removeValue(selectedValue);
+                                        }, disabled: disabled, className: cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1.5 px-3 py-1 text-xs', themeBgColor, themeIconColor, 'hover:brightness-95 dark:hover:brightness-110', disabled && 'cursor-not-allowed opacity-60'), title: optionLabel, children: jsx("span", { className: cn('truncate', maxPillWidthClassName), children: optionLabel }) }, selectedValue));
+                                }), hiddenSelectedCount > 0 ? (jsxs("span", { className: cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'px-2.5 py-0.5 text-[11px]' : 'px-3 py-1 text-xs', 'bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-white'), title: `还有 ${hiddenSelectedCount} 项未展开`, children: ["+", hiddenSelectedCount] })) : null] }))) : (jsx("span", { className: cn(compact ? 'text-xs' : 'text-sm', 'text-slate-500 dark:text-slate-400'), children: emptyLabel })) }), jsx(globalLucideIcons.ChevronDown, { className: cn(compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'shrink-0 text-slate-500 transition-transform dark:text-slate-400', open && 'rotate-180') })] }), open ? (jsxs("div", { role: "listbox", "aria-multiselectable": props.mode === 'multiple' ? true : undefined, className: cn('absolute left-0 right-0 top-[calc(100%+0.375rem)] z-50 rounded-3xl border border-black/10 bg-neutral-100 shadow-xl dark:border-white/10 dark:bg-neutral-900', compact ? 'space-y-2.5 p-3' : 'space-y-3 p-4', open && themeBorderColor), children: [inputEnabled ? (jsx("input", { value: draftValue, onChange: (event) => setDraftValue(event.target.value.replaceAll(',', '')), onKeyDown: (event) => {
+                            if (event.key !== 'Enter') {
+                                return;
+                            }
+                            event.preventDefault();
+                            commitInputValue(draftValue);
+                        }, disabled: disabled, placeholder: inputPlaceholder, className: cn('w-full rounded-full border border-black/10 text-slate-700 outline-none transition focus:border-purple-400 dark:border-white/10 dark:text-white', compact ? 'px-3 py-1.5 text-xs' : 'px-4 py-2.5 text-sm') })) : null, normalizedOptions.length > 0 ? (jsx("div", { className: cn('flex flex-wrap', compact ? 'gap-1.5' : 'gap-2'), children: normalizedOptions.map((option) => {
+                            const active = isSelected(option.value);
+                            return (jsx("button", { type: "button", onClick: () => toggleValue(option.value), disabled: disabled, className: cn('inline-flex items-center justify-center rounded-full border font-semibold transition-colors', compact ? 'px-3 py-1 text-[11px]' : 'px-4 py-2 text-xs', 'bg-neutral-200 text-neutral-700 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700', active &&
+                                    [themeBgColor, themeBorderColor, themeIconColor], disabled && 'cursor-not-allowed opacity-60', pillClassName), title: option.label, children: jsx("span", { className: cn('truncate', maxPillWidthClassName), children: option.label }) }, option.value));
+                        }) })) : null] })) : null] }));
+}
+
+export { XPillSelect };

package/dist/main/pill-select/x-token-input.d.ts

@@ -0,0 +1,12 @@
+type XTokenInputProps = {
+    value: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    emptyLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    maxPillWidthClassName?: string;
+    size?: 'default' | 'compact';
+};
+export declare function XTokenInput({ value, onChange, placeholder, emptyLabel, disabled, className, maxPillWidthClassName, size, }: XTokenInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/pill-select/x-token-input.js

@@ -0,0 +1,71 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var server = require('@windrun-huaiin/base-ui/components/server');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+
+function sanitizeToken(value) {
+    return value.replaceAll(',', '').trim();
+}
+function dedupeTokens(values) {
+    return Array.from(new Set(values.map((item) => sanitizeToken(item)).filter(Boolean)));
+}
+function XTokenInput({ value, onChange, placeholder, emptyLabel, disabled = false, className, maxPillWidthClassName = 'max-w-[180px] sm:max-w-[220px]', size = 'default', }) {
+    const [draftValue, setDraftValue] = React.useState('');
+    const [focused, setFocused] = React.useState(false);
+    const rootRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const tokens = dedupeTokens(value);
+    const compact = size === 'compact';
+    function commitToken(rawValue) {
+        if (disabled) {
+            return;
+        }
+        const nextValue = sanitizeToken(rawValue);
+        if (!nextValue) {
+            setDraftValue('');
+            return;
+        }
+        onChange(dedupeTokens([...tokens, nextValue]));
+        setDraftValue('');
+    }
+    function removeToken(target) {
+        var _a;
+        if (disabled) {
+            return;
+        }
+        onChange(tokens.filter((item) => item !== target));
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    return (jsxRuntime.jsxs("div", { className: utils.cn('w-full min-w-0 space-y-2', className), children: [jsxRuntime.jsx("div", { ref: rootRef, onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onFocusCapture: () => setFocused(true), onBlurCapture: (event) => {
+                    var _a;
+                    if ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
+                        return;
+                    }
+                    commitToken(draftValue);
+                    setFocused(false);
+                }, className: utils.cn('w-full min-w-0 rounded-3xl border border-black/10 transition dark:border-white/10', compact ? 'min-h-9 px-3 py-1.5' : 'min-h-11 px-4 py-2.5', focused && lib.themeBorderColor), children: jsxRuntime.jsxs("div", { className: utils.cn('flex w-full min-w-0 flex-wrap items-center', compact ? 'gap-1.5' : 'gap-2'), children: [tokens.length > 0 ? (jsxRuntime.jsx("ul", { className: "contents", role: "list", children: tokens.map((token) => (jsxRuntime.jsx("li", { className: "max-w-full list-none", children: jsxRuntime.jsxs("span", { className: utils.cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1 px-3 py-1 text-xs', lib.themeBgColor, lib.themeIconColor, disabled && 'opacity-60'), title: token, children: [jsxRuntime.jsx("span", { className: utils.cn('truncate', maxPillWidthClassName), children: token }), jsxRuntime.jsx("button", { type: "button", onClick: (event) => {
+                                                event.stopPropagation();
+                                                removeToken(token);
+                                            }, disabled: disabled, "aria-label": `Remove ${token}`, className: utils.cn('inline-flex shrink-0 items-center justify-center rounded-full transition', compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'hover:bg-black/10 dark:hover:bg-white/10', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1', lib.themeRingColor, disabled && 'cursor-not-allowed'), children: jsxRuntime.jsx(server.globalLucideIcons.X, { className: utils.cn(compact ? 'h-2 w-2' : 'h-2.5 w-2.5') }) })] }) }, token))) })) : null, jsxRuntime.jsx("div", { className: utils.cn('min-w-0 overflow-hidden', tokens.length === 0
+                                ? 'flex-1 min-w-[160px]'
+                                : draftValue || focused
+                                    ? 'flex-1 min-w-[120px]'
+                                    : 'w-0 flex-none'), children: jsxRuntime.jsx("input", { ref: inputRef, value: draftValue, onChange: (event) => setDraftValue(event.target.value.replaceAll(',', '')), onKeyDown: (event) => {
+                                    if (event.key === 'Backspace' && !draftValue && tokens.length > 0) {
+                                        event.preventDefault();
+                                        removeToken(tokens[tokens.length - 1]);
+                                        return;
+                                    }
+                                    if (event.key !== 'Enter') {
+                                        return;
+                                    }
+                                    event.preventDefault();
+                                    commitToken(draftValue);
+                                }, disabled: disabled, placeholder: tokens.length === 0 ? placeholder : undefined, className: utils.cn('bg-transparent outline-none dark:text-white', compact ? 'py-0 text-xs text-slate-700' : 'py-0.5 text-sm text-slate-700', tokens.length === 0 || draftValue || focused ? 'w-full' : 'w-0') }) })] }) }), tokens.length === 0 && emptyLabel ? (jsxRuntime.jsx("div", { className: utils.cn(compact ? 'text-xs' : 'text-sm', 'text-slate-500 dark:text-slate-400'), children: emptyLabel })) : null] }));
+}
+
+exports.XTokenInput = XTokenInput;

package/dist/main/pill-select/x-token-input.mjs

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { themeRingColor, themeBgColor, themeIconColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+function sanitizeToken(value) {
+    return value.replaceAll(',', '').trim();
+}
+function dedupeTokens(values) {
+    return Array.from(new Set(values.map((item) => sanitizeToken(item)).filter(Boolean)));
+}
+function XTokenInput({ value, onChange, placeholder, emptyLabel, disabled = false, className, maxPillWidthClassName = 'max-w-[180px] sm:max-w-[220px]', size = 'default', }) {
+    const [draftValue, setDraftValue] = useState('');
+    const [focused, setFocused] = useState(false);
+    const rootRef = useRef(null);
+    const inputRef = useRef(null);
+    const tokens = dedupeTokens(value);
+    const compact = size === 'compact';
+    function commitToken(rawValue) {
+        if (disabled) {
+            return;
+        }
+        const nextValue = sanitizeToken(rawValue);
+        if (!nextValue) {
+            setDraftValue('');
+            return;
+        }
+        onChange(dedupeTokens([...tokens, nextValue]));
+        setDraftValue('');
+    }
+    function removeToken(target) {
+        var _a;
+        if (disabled) {
+            return;
+        }
+        onChange(tokens.filter((item) => item !== target));
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    return (jsxs("div", { className: cn('w-full min-w-0 space-y-2', className), children: [jsx("div", { ref: rootRef, onClick: () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, onFocusCapture: () => setFocused(true), onBlurCapture: (event) => {
+                    var _a;
+                    if ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
+                        return;
+                    }
+                    commitToken(draftValue);
+                    setFocused(false);
+                }, className: cn('w-full min-w-0 rounded-3xl border border-black/10 transition dark:border-white/10', compact ? 'min-h-9 px-3 py-1.5' : 'min-h-11 px-4 py-2.5', focused && themeBorderColor), children: jsxs("div", { className: cn('flex w-full min-w-0 flex-wrap items-center', compact ? 'gap-1.5' : 'gap-2'), children: [tokens.length > 0 ? (jsx("ul", { className: "contents", role: "list", children: tokens.map((token) => (jsx("li", { className: "max-w-full list-none", children: jsxs("span", { className: cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1 px-3 py-1 text-xs', themeBgColor, themeIconColor, disabled && 'opacity-60'), title: token, children: [jsx("span", { className: cn('truncate', maxPillWidthClassName), children: token }), jsx("button", { type: "button", onClick: (event) => {
+                                                event.stopPropagation();
+                                                removeToken(token);
+                                            }, disabled: disabled, "aria-label": `Remove ${token}`, className: cn('inline-flex shrink-0 items-center justify-center rounded-full transition', compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'hover:bg-black/10 dark:hover:bg-white/10', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1', themeRingColor, disabled && 'cursor-not-allowed'), children: jsx(globalLucideIcons.X, { className: cn(compact ? 'h-2 w-2' : 'h-2.5 w-2.5') }) })] }) }, token))) })) : null, jsx("div", { className: cn('min-w-0 overflow-hidden', tokens.length === 0
+                                ? 'flex-1 min-w-[160px]'
+                                : draftValue || focused
+                                    ? 'flex-1 min-w-[120px]'
+                                    : 'w-0 flex-none'), children: jsx("input", { ref: inputRef, value: draftValue, onChange: (event) => setDraftValue(event.target.value.replaceAll(',', '')), onKeyDown: (event) => {
+                                    if (event.key === 'Backspace' && !draftValue && tokens.length > 0) {
+                                        event.preventDefault();
+                                        removeToken(tokens[tokens.length - 1]);
+                                        return;
+                                    }
+                                    if (event.key !== 'Enter') {
+                                        return;
+                                    }
+                                    event.preventDefault();
+                                    commitToken(draftValue);
+                                }, disabled: disabled, placeholder: tokens.length === 0 ? placeholder : undefined, className: cn('bg-transparent outline-none dark:text-white', compact ? 'py-0 text-xs text-slate-700' : 'py-0.5 text-sm text-slate-700', tokens.length === 0 || draftValue || focused ? 'w-full' : 'w-0') }) })] }) }), tokens.length === 0 && emptyLabel ? (jsx("div", { className: cn(compact ? 'text-xs' : 'text-sm', 'text-slate-500 dark:text-slate-400'), children: emptyLabel })) : null] }));
+}
+
+export { XTokenInput };

package/dist/main/price-plan.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@windrun-huaiin/lib/utils');
 var server = require('next-intl/server');
 var pricePlanInteractive = require('./price-plan-interactive.js');
 
 function PricePlan(_a) {
-    return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, currency = '$', pricePlanConfig, sectionClassName }) {
+    return tslib.__awaiter(this, arguments, void 0, function* ({ locale, currency = '$', pricePlanConfig, sectionClassName }) {
         var _b, _c;
         const t = yield server.getTranslations({ locale, namespace: 'pricePlan' });
         const data = {

package/dist/main/price-plan.mjs

@@ -1,4 +1,4 @@
-import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
+import { __awaiter } from 'tslib';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { getTranslations } from 'next-intl/server';

package/dist/main/rich-text-expert.mjs

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import React__default from 'react';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { themeRichTextMarkClass } from '@windrun-huaiin/base-ui/lib';
 
 // default tag renderers
 const defaultTagRenderers = {
     // text next line
-    br: (chunks) => (jsxs(React.Fragment, { children: [jsx("br", {}), chunks] })),
+    br: (chunks) => (jsxs(React__default.Fragment, { children: [jsx("br", {}), chunks] })),
     // text Stong
     strong: (chunks) => jsx("strong", { children: chunks }),
     // text Emphasis

package/dist/main/seo-content.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
 var utils = require('@windrun-huaiin/lib/utils');
@@ -9,7 +9,7 @@ var sectionLayout = require('./section-layout.js');
 var lib = require('@windrun-huaiin/base-ui/lib');
 
 function SeoContent(_a) {
-    return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
+    return tslib.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
         const t = yield server.getTranslations({ locale, namespace: 'seoContent' });
         // Process translation data
         const rawSections = t.raw('sections');

package/dist/main/seo-content.mjs

@@ -1,4 +1,4 @@
-import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
+import { __awaiter } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';

package/dist/main/snake-loading-frame.js

@@ -3,8 +3,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var framerMotion = require('framer-motion');
 var utils = require('@windrun-huaiin/lib/utils');
-var proxy = require('../node_modules/.pnpm/framer-motion@12.38.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/render/components/motion/proxy.js');
 
 const DEFAULT_THEME_COLOR = '#3b82f6';
 const TRACK_COLOR = 'rgba(148, 163, 184, 0.22)';
@@ -322,7 +322,7 @@ function SnakeFrameBase({ shape, loading, children, className, themeColor = DEFA
                     ? {
                         inset: circleContentInset,
                     }
-                    : undefined, children: children }), showOverlay ? (jsxRuntime.jsx(proxy.motion.div, { className: "pointer-events-none absolute inset-0 overflow-visible", initial: false, animate: { opacity: loading || previewProgress !== undefined ? 1 : 0 }, transition: { duration: EXIT_DURATION_MS / 1000, ease: 'easeOut' }, children: jsxRuntime.jsx(SnakeRingSvg, { containerRef: containerRef, shape: shape, themeColor: themeColor, progressRatio: progressRatio, animate: previewProgress === undefined && loading, strokeWidth: resolvedStrokeWidth }) })) : null] }));
+                    : undefined, children: children }), showOverlay ? (jsxRuntime.jsx(framerMotion.motion.div, { className: "pointer-events-none absolute inset-0 overflow-visible", initial: false, animate: { opacity: loading || previewProgress !== undefined ? 1 : 0 }, transition: { duration: EXIT_DURATION_MS / 1000, ease: 'easeOut' }, children: jsxRuntime.jsx(SnakeRingSvg, { containerRef: containerRef, shape: shape, themeColor: themeColor, progressRatio: progressRatio, animate: previewProgress === undefined && loading, strokeWidth: resolvedStrokeWidth }) })) : null] }));
 }
 function SnakeLoadingFrame(props) {
     return jsxRuntime.jsx(SnakeFrameBase, Object.assign({}, props));

package/dist/main/snake-loading-frame.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useId, useMemo } from 'react';
+import { motion } from 'framer-motion';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { motion } from '../node_modules/.pnpm/framer-motion@12.38.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs';
 
 const DEFAULT_THEME_COLOR = '#3b82f6';
 const TRACK_COLOR = 'rgba(148, 163, 184, 0.22)';

package/dist/main/tips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
 var utils = require('@windrun-huaiin/lib/utils');
@@ -9,7 +9,7 @@ var sectionLayout = require('./section-layout.js');
 var lib = require('@windrun-huaiin/base-ui/lib');
 
 function Tips(_a) {
-    return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
+    return tslib.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
         const t = yield server.getTranslations({ locale, namespace: 'tips' });
         // Process translation data
         const sections = t.raw('sections');

package/dist/main/tips.mjs

@@ -1,4 +1,4 @@
-import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
+import { __awaiter } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';

package/dist/main/usage.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
 var utils = require('@windrun-huaiin/lib/utils');
@@ -10,7 +10,7 @@ var richTextExpert = require('./rich-text-expert.js');
 var sectionLayout = require('./section-layout.js');
 
 function Usage(_a) {
-    return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
+    return tslib.__awaiter(this, arguments, void 0, function* ({ locale, sectionClassName }) {
         const t = yield server.getTranslations({ locale, namespace: 'usage' });
         // Process translation data
         const steps = t.raw('steps');

package/dist/main/usage.mjs

@@ -1,4 +1,4 @@
-import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
+import { __awaiter } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';

package/dist/main/x-button.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+type XButtonVariant = 'default' | 'soft' | 'subtle';
 interface BaseButtonConfig {
     icon: ReactNode;
     text: string;
@@ -19,6 +20,7 @@ interface SingleButtonProps {
     minWidth?: string;
     className?: string;
     iconClassName?: string;
+    variant?: XButtonVariant;
 }
 interface SplitButtonProps {
     type: 'split';
@@ -30,6 +32,7 @@ interface SplitButtonProps {
     mainButtonClassName?: string;
     dropdownButtonClassName?: string;
     iconClassName?: string;
+    variant?: XButtonVariant;
 }
 type xButtonProps = SingleButtonProps | SplitButtonProps;
 export declare function XButton(props: xButtonProps): import("react/jsx-runtime").JSX.Element;