@windrun-huaiin/third-ui 14.4.3 → 15.0.0

package/dist/fuma/mdx/gradient-button.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+type GradientButtonVariant = 'default' | 'soft' | 'subtle';
 export interface GradientButtonProps {
     title: React.ReactNode;
     icon?: React.ReactNode;
+    iconForcePosition?: 'left' | 'right';
     align?: 'left' | 'center' | 'right';
     disabled?: boolean;
     className?: string;
@@ -12,5 +14,7 @@ export interface GradientButtonProps {
     onClick?: () => void | Promise<void>;
     loadingText?: React.ReactNode;
     preventDoubleClick?: boolean;
+    variant?: GradientButtonVariant;
 }
-export declare function GradientButton({ title, icon, align, disabled, className, href, openInNewTab, preserveReferrer, onClick, loadingText, preventDoubleClick, iconClassName, }: GradientButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function GradientButton({ title, icon, iconForcePosition, align, disabled, className, href, openInNewTab, preserveReferrer, onClick, loadingText, preventDoubleClick, iconClassName, variant, }: GradientButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/fuma/mdx/gradient-button.js

@@ -9,11 +9,11 @@ var lib = require('@windrun-huaiin/base-ui/lib');
 var Link = require('next/link');
 var React = require('react');
 
-function GradientButton({ title, icon, align = 'left', disabled = false, className = "", href, openInNewTab = true, preserveReferrer = false, onClick, loadingText, preventDoubleClick = true, iconClassName, }) {
+function GradientButton({ title, icon, iconForcePosition, align = 'left', disabled = false, className = "", href, openInNewTab = true, preserveReferrer = false, onClick, loadingText, preventDoubleClick = true, iconClassName, variant = 'default', }) {
     const [isLoading, setIsLoading] = React.useState(false);
     const actualLoadingText = loadingText || (title === null || title === void 0 ? void 0 : title.toString().trim()) || 'Loading...';
     const defaultIconClass = "h-4 w-4";
-    const finalIconClass = utils.cn("text-white", iconClassName || defaultIconClass);
+    const finalIconClass = utils.cn(variant === 'default' ? 'text-white' : lib.themeIconColor, iconClassName || defaultIconClass);
     // set justify class according to alignment
     const getAlignmentClass = () => {
         switch (align) {
@@ -70,7 +70,8 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
         return jsxRuntime.jsx(server.globalLucideIcons.ArrowRight, { className: utils.cn(finalIconClass) });
     })();
     const shouldRenderIcon = iconNode !== null && iconNode !== undefined;
-    const buttonContent = onClick ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldRenderIcon ? jsxRuntime.jsx("span", { children: iconNode }) : null, jsxRuntime.jsx("span", { className: utils.cn(shouldRenderIcon && 'ml-1'), children: displayTitle })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: displayTitle }), shouldRenderIcon ? jsxRuntime.jsx("span", { className: "ml-1", children: iconNode }) : null] }));
+    const iconPosition = iconForcePosition !== null && iconForcePosition !== void 0 ? iconForcePosition : (onClick ? 'left' : 'right');
+    const buttonContent = iconPosition === 'left' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldRenderIcon ? jsxRuntime.jsx("span", { children: iconNode }) : null, jsxRuntime.jsx("span", { className: utils.cn(shouldRenderIcon && 'ml-1'), children: displayTitle })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: displayTitle }), shouldRenderIcon ? jsxRuntime.jsx("span", { className: "ml-1", children: iconNode }) : null] }));
     const alignmentClass = align === 'right'
         ? 'justify-end'
         : align === 'center'
@@ -79,7 +80,12 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
     // Base styles extracted from Button component + size="lg" (h-11 px-8)
     // Removed [&_svg] constraints
     const baseButtonStyles = "inline-flex items-center gap-2 whitespace-nowrap h-11 px-8 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
-    const buttonClassName = utils.cn(baseButtonStyles, lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
+    const variantClassName = variant === 'soft'
+        ? utils.cn(lib.themeBgColor, lib.themeIconColor, lib.themeBorderColor, 'border shadow-sm hover:shadow-md hover:brightness-95')
+        : variant === 'subtle'
+            ? utils.cn(lib.themeMainBgColor, lib.themeIconColor, 'border border-neutral-200 shadow-sm hover:shadow-md hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800')
+            : utils.cn(lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white shadow-lg hover:shadow-xl');
+    const buttonClassName = utils.cn(baseButtonStyles, variantClassName, 'text-base font-bold transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
     return (jsxRuntime.jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
         // for click
         jsxRuntime.jsx("button", { type: "button", className: buttonClassName, onClick: handleClick, disabled: isDisabled, children: buttonContent })) : (

package/dist/fuma/mdx/gradient-button.mjs

@@ -3,15 +3,15 @@ import { __awaiter } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
-import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
+import { themeIconColor, themeBgColor, themeBorderColor, themeMainBgColor, themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 
-function GradientButton({ title, icon, align = 'left', disabled = false, className = "", href, openInNewTab = true, preserveReferrer = false, onClick, loadingText, preventDoubleClick = true, iconClassName, }) {
+function GradientButton({ title, icon, iconForcePosition, align = 'left', disabled = false, className = "", href, openInNewTab = true, preserveReferrer = false, onClick, loadingText, preventDoubleClick = true, iconClassName, variant = 'default', }) {
     const [isLoading, setIsLoading] = useState(false);
     const actualLoadingText = loadingText || (title === null || title === void 0 ? void 0 : title.toString().trim()) || 'Loading...';
     const defaultIconClass = "h-4 w-4";
-    const finalIconClass = cn("text-white", iconClassName || defaultIconClass);
+    const finalIconClass = cn(variant === 'default' ? 'text-white' : themeIconColor, iconClassName || defaultIconClass);
     // set justify class according to alignment
     const getAlignmentClass = () => {
         switch (align) {
@@ -58,8 +58,8 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
             if (icon === null || icon === false) {
                 return null;
             }
-            if (React.isValidElement(icon)) {
-                return React.cloneElement(icon, {
+            if (React__default.isValidElement(icon)) {
+                return React__default.cloneElement(icon, {
                     className: cn(finalIconClass, icon.props.className),
                 });
             }
@@ -68,7 +68,8 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
         return jsx(globalLucideIcons.ArrowRight, { className: cn(finalIconClass) });
     })();
     const shouldRenderIcon = iconNode !== null && iconNode !== undefined;
-    const buttonContent = onClick ? (jsxs(Fragment, { children: [shouldRenderIcon ? jsx("span", { children: iconNode }) : null, jsx("span", { className: cn(shouldRenderIcon && 'ml-1'), children: displayTitle })] })) : (jsxs(Fragment, { children: [jsx("span", { children: displayTitle }), shouldRenderIcon ? jsx("span", { className: "ml-1", children: iconNode }) : null] }));
+    const iconPosition = iconForcePosition !== null && iconForcePosition !== void 0 ? iconForcePosition : (onClick ? 'left' : 'right');
+    const buttonContent = iconPosition === 'left' ? (jsxs(Fragment, { children: [shouldRenderIcon ? jsx("span", { children: iconNode }) : null, jsx("span", { className: cn(shouldRenderIcon && 'ml-1'), children: displayTitle })] })) : (jsxs(Fragment, { children: [jsx("span", { children: displayTitle }), shouldRenderIcon ? jsx("span", { className: "ml-1", children: iconNode }) : null] }));
     const alignmentClass = align === 'right'
         ? 'justify-end'
         : align === 'center'
@@ -77,7 +78,12 @@ function GradientButton({ title, icon, align = 'left', disabled = false, classNa
     // Base styles extracted from Button component + size="lg" (h-11 px-8)
     // Removed [&_svg] constraints
     const baseButtonStyles = "inline-flex items-center gap-2 whitespace-nowrap h-11 px-8 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
-    const buttonClassName = cn(baseButtonStyles, themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white text-base font-bold shadow-lg hover:shadow-xl transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
+    const variantClassName = variant === 'soft'
+        ? cn(themeBgColor, themeIconColor, themeBorderColor, 'border shadow-sm hover:shadow-md hover:brightness-95')
+        : variant === 'subtle'
+            ? cn(themeMainBgColor, themeIconColor, 'border border-neutral-200 shadow-sm hover:shadow-md hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800')
+            : cn(themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white shadow-lg hover:shadow-xl');
+    const buttonClassName = cn(baseButtonStyles, variantClassName, 'text-base font-bold transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
     return (jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (
         // for click
         jsx("button", { type: "button", className: buttonClassName, onClick: handleClick, disabled: isDisabled, children: buttonContent })) : (

package/dist/main/index.d.ts

@@ -3,6 +3,7 @@ export * from './loading';
 export * from './nprogress-bar';
 export * from './ads-alert-dialog';
 export * from './x-button';
+export * from './x-toggle-button';
 export * from './ai-prompt-textarea';
 export * from './rich-text-expert';
 export * from './faq-interactive';
@@ -10,6 +11,7 @@ export * from './price-plan-interactive';
 export * from './gallery/gallery-interactive';
 export * from './delayed-img';
 export * from './snake-loading-frame';
+export * from './pill-select';
 export { MoneyPriceInteractive } from './money-price/money-price-interactive';
 export { MoneyPriceButton } from './money-price/money-price-button';
 export { CreditOverviewClient } from './credit/credit-overview-client';

package/dist/main/index.js

@@ -6,6 +6,7 @@ var loading = require('./loading.js');
 var nprogressBar = require('./nprogress-bar.js');
 var adsAlertDialog = require('./ads-alert-dialog.js');
 var xButton = require('./x-button.js');
+var xToggleButton = require('./x-toggle-button.js');
 var aiPromptTextarea = require('./ai-prompt-textarea.js');
 var richTextExpert = require('./rich-text-expert.js');
 var faqInteractive = require('./faq-interactive.js');
@@ -13,6 +14,10 @@ var pricePlanInteractive = require('./price-plan-interactive.js');
 var galleryInteractive = require('./gallery/gallery-interactive.js');
 var delayedImg = require('./delayed-img.js');
 var snakeLoadingFrame = require('./snake-loading-frame.js');
+var xPillSelect = require('./pill-select/x-pill-select.js');
+var xFilterPills = require('./pill-select/x-filter-pills.js');
+var xFormPills = require('./pill-select/x-form-pills.js');
+var xTokenInput = require('./pill-select/x-token-input.js');
 var moneyPriceInteractive = require('./money-price/money-price-interactive.js');
 var moneyPriceButton = require('./money-price/money-price-button.js');
 var creditOverviewClient = require('./credit/credit-overview-client.js');
@@ -26,6 +31,7 @@ exports.getLoadingCycleDurationMs = loading.getLoadingCycleDurationMs;
 exports.NProgressBar = nprogressBar.NProgressBar;
 exports.AdsAlertDialog = adsAlertDialog.AdsAlertDialog;
 exports.XButton = xButton.XButton;
+exports.XToggleButton = xToggleButton.XToggleButton;
 exports.AIPromptTextarea = aiPromptTextarea.AIPromptTextarea;
 exports.createRichTextRenderer = richTextExpert.createRichTextRenderer;
 exports.richText = richTextExpert.richText;
@@ -35,6 +41,10 @@ exports.GalleryInteractive = galleryInteractive.GalleryInteractive;
 exports.DelayedImg = delayedImg.DelayedImg;
 exports.SnakeLoadingFrame = snakeLoadingFrame.SnakeLoadingFrame;
 exports.SnakeLoadingPreview = snakeLoadingFrame.SnakeLoadingPreview;
+exports.XPillSelect = xPillSelect.XPillSelect;
+exports.XFilterPills = xFilterPills.XFilterPills;
+exports.XFormPills = xFormPills.XFormPills;
+exports.XTokenInput = xTokenInput.XTokenInput;
 exports.MoneyPriceInteractive = moneyPriceInteractive.MoneyPriceInteractive;
 exports.MoneyPriceButton = moneyPriceButton.MoneyPriceButton;
 exports.CreditOverviewClient = creditOverviewClient.CreditOverviewClient;

package/dist/main/index.mjs

@@ -4,6 +4,7 @@ export { Loading, getLoadingCycleDurationMs } from './loading.mjs';
 export { NProgressBar } from './nprogress-bar.mjs';
 export { AdsAlertDialog } from './ads-alert-dialog.mjs';
 export { XButton } from './x-button.mjs';
+export { XToggleButton } from './x-toggle-button.mjs';
 export { AIPromptTextarea } from './ai-prompt-textarea.mjs';
 export { createRichTextRenderer, richText } from './rich-text-expert.mjs';
 export { FAQInteractive } from './faq-interactive.mjs';
@@ -11,6 +12,10 @@ export { PricePlanInteractive } from './price-plan-interactive.mjs';
 export { GalleryInteractive } from './gallery/gallery-interactive.mjs';
 export { DelayedImg } from './delayed-img.mjs';
 export { SnakeLoadingFrame, SnakeLoadingPreview } from './snake-loading-frame.mjs';
+export { XPillSelect } from './pill-select/x-pill-select.mjs';
+export { XFilterPills } from './pill-select/x-filter-pills.mjs';
+export { XFormPills } from './pill-select/x-form-pills.mjs';
+export { XTokenInput } from './pill-select/x-token-input.mjs';
 export { MoneyPriceInteractive } from './money-price/money-price-interactive.mjs';
 export { MoneyPriceButton } from './money-price/money-price-button.mjs';
 export { CreditOverviewClient } from './credit/credit-overview-client.mjs';

package/dist/main/pill-select/index.d.ts

@@ -0,0 +1,4 @@
+export { XPillSelect, type XPillOption, type XPillSelectProps } from './x-pill-select';
+export { XFilterPills } from './x-filter-pills';
+export { XFormPills } from './x-form-pills';
+export { XTokenInput } from './x-token-input';

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var xPillSelect = require('./x-pill-select.js');
+var xFilterPills = require('./x-filter-pills.js');
+var xFormPills = require('./x-form-pills.js');
+var xTokenInput = require('./x-token-input.js');
+
+
+
+exports.XPillSelect = xPillSelect.XPillSelect;
+exports.XFilterPills = xFilterPills.XFilterPills;
+exports.XFormPills = xFormPills.XFormPills;
+exports.XTokenInput = xTokenInput.XTokenInput;

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

@@ -0,0 +1,4 @@
+export { XPillSelect } from './x-pill-select.mjs';
+export { XFilterPills } from './x-filter-pills.mjs';
+export { XFormPills } from './x-form-pills.mjs';
+export { XTokenInput } from './x-token-input.mjs';

package/dist/main/pill-select/x-filter-pills.d.ts

@@ -0,0 +1,11 @@
+import { type XPillOption } from './x-pill-select';
+type XFilterPillsProps = {
+    label: string;
+    value: string;
+    options: XPillOption[];
+    onChange: (value: string) => void;
+    allLabel: string;
+    className?: string;
+};
+export declare function XFilterPills({ label, value, options, onChange, allLabel, className, }: XFilterPillsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@windrun-huaiin/lib/utils');
+var xPillSelect = require('./x-pill-select.js');
+
+function XFilterPills({ label, value, options, onChange, allLabel, className, }) {
+    return (jsxRuntime.jsxs("div", { className: utils.cn('space-y-1.5', className), children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-slate-700 dark:text-slate-200", children: label }), jsxRuntime.jsx(xPillSelect.XPillSelect, { mode: "single", value: value, onChange: onChange, options: [{ label: allLabel, value: '' }, ...options], size: "compact", maxPillWidthClassName: "max-w-[150px] sm:max-w-[220px]" })] }));
+}
+
+exports.XFilterPills = XFilterPills;

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { XPillSelect } from './x-pill-select.mjs';
+
+function XFilterPills({ label, value, options, onChange, allLabel, className, }) {
+    return (jsxs("div", { className: cn('space-y-1.5', className), children: [jsx("div", { className: "text-xs font-medium text-slate-700 dark:text-slate-200", children: label }), jsx(XPillSelect, { mode: "single", value: value, onChange: onChange, options: [{ label: allLabel, value: '' }, ...options], size: "compact", maxPillWidthClassName: "max-w-[150px] sm:max-w-[220px]" })] }));
+}
+
+export { XFilterPills };

package/dist/main/pill-select/x-form-pills.d.ts

@@ -0,0 +1,12 @@
+import { type XPillOption } from './x-pill-select';
+type XFormPillsProps = {
+    label: React.ReactNode;
+    value: string;
+    options: XPillOption[];
+    onChange: (value: string) => void;
+    emptyLabel: string;
+    allowClear?: boolean;
+    className?: string;
+};
+export declare function XFormPills({ label, value, options, onChange, emptyLabel, allowClear, className, }: XFormPillsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@windrun-huaiin/lib/utils');
+var xPillSelect = require('./x-pill-select.js');
+
+function XFormPills({ label, value, options, onChange, emptyLabel, allowClear = false, className, }) {
+    return (jsxRuntime.jsxs("div", { className: utils.cn('space-y-2 text-sm', className), children: [jsxRuntime.jsx("div", { className: "font-medium text-slate-700 dark:text-slate-200", children: label }), jsxRuntime.jsx(xPillSelect.XPillSelect, { mode: "single", value: value, onChange: onChange, options: options, emptyLabel: emptyLabel, allowClear: allowClear, maxPillWidthClassName: "max-w-[150px] sm:max-w-[220px]" })] }));
+}
+
+exports.XFormPills = XFormPills;

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { XPillSelect } from './x-pill-select.mjs';
+
+function XFormPills({ label, value, options, onChange, emptyLabel, allowClear = false, className, }) {
+    return (jsxs("div", { className: cn('space-y-2 text-sm', className), children: [jsx("div", { className: "font-medium text-slate-700 dark:text-slate-200", children: label }), jsx(XPillSelect, { mode: "single", value: value, onChange: onChange, options: options, emptyLabel: emptyLabel, allowClear: allowClear, maxPillWidthClassName: "max-w-[150px] sm:max-w-[220px]" })] }));
+}
+
+export { XFormPills };

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

@@ -0,0 +1,33 @@
+export type XPillOption = {
+    label: string;
+    value: string;
+};
+type XPillSelectBaseProps = {
+    options?: XPillOption[];
+    disabled?: boolean;
+    className?: string;
+    pillClassName?: string;
+    emptyLabel?: string;
+    maxPillWidthClassName?: string;
+    size?: 'default' | 'compact';
+    inputEnabled?: boolean;
+    inputPlaceholder?: string;
+    onInputTransform?: (value: string) => string;
+    allSelectedLabel?: string;
+    maxVisiblePills?: number;
+};
+type XPillSelectSingleProps = XPillSelectBaseProps & {
+    mode: 'single';
+    value: string;
+    onChange: (value: string) => void;
+    allowClear?: boolean;
+};
+type XPillSelectMultipleProps = XPillSelectBaseProps & {
+    mode: 'multiple';
+    value: string[];
+    onChange: (value: string[]) => void;
+    allowClear?: boolean;
+};
+export type XPillSelectProps = XPillSelectSingleProps | XPillSelectMultipleProps;
+export declare function XPillSelect(props: XPillSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

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 };