@windrun-huaiin/third-ui 14.4.3 → 15.0.0

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

package/dist/main/x-button.js

@@ -5,16 +5,18 @@ var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_
 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 XButton(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const [isLoading, setIsLoading] = React.useState(false);
     const [menuOpen, setMenuOpen] = React.useState(false);
     const menuRef = React.useRef(null);
     const { iconClassName } = props;
     const defaultIconClass = "w-5 h-5";
-    const finalIconClass = iconClassName || defaultIconClass;
+    const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : 'default';
+    const finalIconClass = utils.cn(variant === 'default' ? '' : lib.themeIconColor, iconClassName || defaultIconClass);
     const loadingIconClass = utils.cn(finalIconClass, "mr-1 animate-spin");
     const chevronIconClass = "w-6 h-6";
     const renderIcon = (icon) => {
@@ -57,22 +59,41 @@ function XButton(props) {
         }
     });
     // base style class
-    const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white text-sm font-semibold transition-colors hover:bg-neutral-300 dark:hover:bg-neutral-700";
+    const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold transition-colors";
+    const singleButtonVariantClass = variant === 'soft'
+        ? utils.cn(lib.themeBgColor, lib.themeIconColor, lib.themeBorderColor, "border hover:brightness-95")
+        : variant === 'subtle'
+            ? utils.cn(lib.themeMainBgColor, lib.themeIconColor, "border border-neutral-200 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800")
+            : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700";
+    const splitMainButtonVariantClass = variant === 'soft'
+        ? utils.cn("bg-transparent hover:bg-black/5 dark:hover:bg-white/5", lib.themeIconColor)
+        : variant === 'subtle'
+            ? utils.cn("bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800", lib.themeIconColor)
+            : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700";
+    const splitDropdownVariantClass = variant === 'soft'
+        ? utils.cn("bg-transparent hover:bg-black/5 dark:hover:bg-white/5 sm:border-l", lib.themeIconColor, lib.themeBorderColor)
+        : variant === 'subtle'
+            ? utils.cn("bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:border-l", lib.themeIconColor, "border-neutral-200 dark:border-neutral-800")
+            : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700";
     const disabledClass = "opacity-60 cursor-not-allowed";
     if (props.type === 'single') {
         const { button, loadingText, minWidth = 'min-w-[110px]', className = '' } = props;
         const isDisabled = button.disabled || isLoading;
         // loadingText: props.loadingText > button.text > 'Loading...'
-        const actualLoadingText = loadingText || ((_a = button.text) === null || _a === void 0 ? void 0 : _a.trim()) || 'Loading...';
-        return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(button.icon), jsxRuntime.jsx("span", { children: button.text })] })) }));
+        const actualLoadingText = loadingText || ((_b = button.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
+        return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(button.icon), jsxRuntime.jsx("span", { children: button.text })] })) }));
     }
     // Split button
     const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
     const isMainDisabled = mainButton.disabled || isLoading;
     // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
-    const actualLoadingText = loadingText || ((_b = mainButton.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
-    return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-col sm:flex-row items-stretch w-full sm:w-auto bg-neutral-200 dark:bg-neutral-800 rounded-full gap-2 sm:gap-0", className), children: [jsxRuntime.jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: utils.cn("flex-1 w-full", baseButtonClass, "rounded-full sm:rounded-l-full sm:rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
-                    e.preventDefault(); }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(mainButton.icon), jsxRuntime.jsx("span", { children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", className: utils.cn("flex items-center justify-center w-full sm:w-10 py-1.5 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700", dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: chevronIconClass }) }), menuOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-50 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { onClick: () => {
+    const actualLoadingText = loadingText || ((_c = mainButton.text) === null || _c === void 0 ? void 0 : _c.trim()) || 'Loading...';
+    return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0", menuOpen && "z-[90]", variant === 'soft'
+            ? utils.cn(lib.themeBgColor, lib.themeBorderColor, "border")
+            : variant === 'subtle'
+                ? utils.cn(lib.themeMainBgColor, "border border-neutral-200 dark:border-neutral-800")
+                : "bg-neutral-200 dark:bg-neutral-800", className), children: [jsxRuntime.jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: utils.cn("min-w-0 flex-1", baseButtonClass, splitMainButtonVariantClass, "rounded-l-full rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
+                    e.preventDefault(); }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(mainButton.icon), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", className: utils.cn("flex h-full w-9 shrink-0 items-center justify-center px-0 py-1.5 cursor-pointer transition rounded-r-full rounded-l-none border-l sm:w-10", splitDropdownVariantClass, dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: chevronIconClass }) }), menuOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-[100] border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { onClick: () => {
                         handleButtonClick(item.onClick);
                         setMenuOpen(false);
                     }, disabled: item.disabled, className: `flex items-center w-full px-4 py-3 transition hover:bg-neutral-300 dark:hover:bg-neutral-600 text-left relative ${item.disabled ? disabledClass : ''}`, style: item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined, children: [jsxRuntime.jsxs("span", { className: "flex items-center", children: [item.icon, jsxRuntime.jsx("span", { children: item.text })] }), item.tag && (jsxRuntime.jsx("span", { className: "absolute right-3 top-1 text-[10px] font-semibold", style: { color: item.tag.color || '#A855F7', pointerEvents: 'none' }, children: item.tag.text }))] }, index))) }))] }));

package/dist/main/x-button.mjs

@@ -1,23 +1,25 @@
 "use client";
 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { themeIconColor, themeBgColor, themeBorderColor, themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 
 function XButton(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const [isLoading, setIsLoading] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     const menuRef = useRef(null);
     const { iconClassName } = props;
     const defaultIconClass = "w-5 h-5";
-    const finalIconClass = iconClassName || defaultIconClass;
+    const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : 'default';
+    const finalIconClass = cn(variant === 'default' ? '' : themeIconColor, iconClassName || defaultIconClass);
     const loadingIconClass = cn(finalIconClass, "mr-1 animate-spin");
     const chevronIconClass = "w-6 h-6";
     const renderIcon = (icon) => {
-        if (React.isValidElement(icon)) {
-            return React.cloneElement(icon, {
+        if (React__default.isValidElement(icon)) {
+            return React__default.cloneElement(icon, {
                 className: cn(finalIconClass, icon.props.className),
             });
         }
@@ -55,22 +57,41 @@ function XButton(props) {
         }
     });
     // base style class
-    const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white text-sm font-semibold transition-colors hover:bg-neutral-300 dark:hover:bg-neutral-700";
+    const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold transition-colors";
+    const singleButtonVariantClass = variant === 'soft'
+        ? cn(themeBgColor, themeIconColor, themeBorderColor, "border hover:brightness-95")
+        : variant === 'subtle'
+            ? cn(themeMainBgColor, themeIconColor, "border border-neutral-200 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800")
+            : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700";
+    const splitMainButtonVariantClass = variant === 'soft'
+        ? cn("bg-transparent hover:bg-black/5 dark:hover:bg-white/5", themeIconColor)
+        : variant === 'subtle'
+            ? cn("bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800", themeIconColor)
+            : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700";
+    const splitDropdownVariantClass = variant === 'soft'
+        ? cn("bg-transparent hover:bg-black/5 dark:hover:bg-white/5 sm:border-l", themeIconColor, themeBorderColor)
+        : variant === 'subtle'
+            ? cn("bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:border-l", themeIconColor, "border-neutral-200 dark:border-neutral-800")
+            : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700";
     const disabledClass = "opacity-60 cursor-not-allowed";
     if (props.type === 'single') {
         const { button, loadingText, minWidth = 'min-w-[110px]', className = '' } = props;
         const isDisabled = button.disabled || isLoading;
         // loadingText: props.loadingText > button.text > 'Loading...'
-        const actualLoadingText = loadingText || ((_a = button.text) === null || _a === void 0 ? void 0 : _a.trim()) || 'Loading...';
-        return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: cn("w-full sm:w-auto", minWidth, baseButtonClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(button.icon), jsx("span", { children: button.text })] })) }));
+        const actualLoadingText = loadingText || ((_b = button.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
+        return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(button.icon), jsx("span", { children: button.text })] })) }));
     }
     // Split button
     const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
     const isMainDisabled = mainButton.disabled || isLoading;
     // loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
-    const actualLoadingText = loadingText || ((_b = mainButton.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
-    return (jsxs("div", { className: cn("relative flex flex-col sm:flex-row items-stretch w-full sm:w-auto bg-neutral-200 dark:bg-neutral-800 rounded-full gap-2 sm:gap-0", className), children: [jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: cn("flex-1 w-full", baseButtonClass, "rounded-full sm:rounded-l-full sm:rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
-                    e.preventDefault(); }, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(mainButton.icon), jsx("span", { children: mainButton.text })] })) }), jsx("button", { type: "button", className: cn("flex items-center justify-center w-full sm:w-10 py-1.5 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700", dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsx(globalLucideIcons.ChevronDown, { className: chevronIconClass }) }), menuOpen && (jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-50 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxs("button", { onClick: () => {
+    const actualLoadingText = loadingText || ((_c = mainButton.text) === null || _c === void 0 ? void 0 : _c.trim()) || 'Loading...';
+    return (jsxs("div", { className: cn("relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0", menuOpen && "z-[90]", variant === 'soft'
+            ? cn(themeBgColor, themeBorderColor, "border")
+            : variant === 'subtle'
+                ? cn(themeMainBgColor, "border border-neutral-200 dark:border-neutral-800")
+                : "bg-neutral-200 dark:bg-neutral-800", className), children: [jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: cn("min-w-0 flex-1", baseButtonClass, splitMainButtonVariantClass, "rounded-l-full rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
+                    e.preventDefault(); }, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(mainButton.icon), jsx("span", { className: "min-w-0 truncate", children: mainButton.text })] })) }), jsx("button", { type: "button", className: cn("flex h-full w-9 shrink-0 items-center justify-center px-0 py-1.5 cursor-pointer transition rounded-r-full rounded-l-none border-l sm:w-10", splitDropdownVariantClass, dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsx(globalLucideIcons.ChevronDown, { className: chevronIconClass }) }), menuOpen && (jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-[100] border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxs("button", { onClick: () => {
                         handleButtonClick(item.onClick);
                         setMenuOpen(false);
                     }, disabled: item.disabled, className: `flex items-center w-full px-4 py-3 transition hover:bg-neutral-300 dark:hover:bg-neutral-600 text-left relative ${item.disabled ? disabledClass : ''}`, style: item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined, children: [jsxs("span", { className: "flex items-center", children: [item.icon, jsx("span", { children: item.text })] }), item.tag && (jsx("span", { className: "absolute right-3 top-1 text-[10px] font-semibold", style: { color: item.tag.color || '#A855F7', pointerEvents: 'none' }, children: item.tag.text }))] }, index))) }))] }));

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export type XToggleButtonOption = {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    badge?: React.ReactNode;
+    mobileIcon?: React.ReactNode;
+};
+type XToggleButtonSize = 'default' | 'compact';
+export type XToggleButtonProps = {
+    options: XToggleButtonOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    inactiveItemClassName?: string;
+    badgeClassName?: string;
+    minItemWidthClassName?: string;
+    maxItemWidthClassName?: string;
+    itemTextClassName?: string;
+    itemPaddingClassName?: string;
+    size?: XToggleButtonSize;
+    fullWidth?: boolean;
+    name?: string;
+    ariaLabel?: string;
+};
+export declare function XToggleButton({ options, value, defaultValue, onChange, disabled, className, itemClassName, activeItemClassName, inactiveItemClassName, badgeClassName, minItemWidthClassName, maxItemWidthClassName, itemTextClassName, itemPaddingClassName, size, fullWidth, name, ariaLabel, }: XToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/x-toggle-button.js

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('@windrun-huaiin/lib/utils');
+var lib = require('@windrun-huaiin/base-ui/lib');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function XToggleButton({ options, value, defaultValue, onChange, disabled = false, className, itemClassName, activeItemClassName, inactiveItemClassName, badgeClassName, minItemWidthClassName, maxItemWidthClassName, itemTextClassName, itemPaddingClassName, size = 'default', fullWidth = false, name, ariaLabel, }) {
+    const containerRef = React__namespace.useRef(null);
+    const activeButtonRef = React__namespace.useRef(null);
+    const [badgeOffset, setBadgeOffset] = React__namespace.useState(0);
+    const normalizedOptions = React__namespace.useMemo(() => options.filter((option) => option.value.trim()), [options]);
+    const fallbackValue = React__namespace.useMemo(() => {
+        var _a, _b;
+        if (defaultValue && normalizedOptions.some((option) => option.value === defaultValue)) {
+            return defaultValue;
+        }
+        return (_b = (_a = normalizedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+    }, [defaultValue, normalizedOptions]);
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React__namespace.useState(fallbackValue);
+    React__namespace.useEffect(() => {
+        if (!isControlled) {
+            setInternalValue(fallbackValue);
+        }
+    }, [fallbackValue, isControlled]);
+    const selectedValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
+    React__namespace.useEffect(() => {
+        if (activeButtonRef.current && containerRef.current) {
+            const buttonRect = activeButtonRef.current.getBoundingClientRect();
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const buttonCenterX = buttonRect.left - containerRect.left + buttonRect.width / 2;
+            setBadgeOffset(buttonCenterX);
+        }
+    }, [selectedValue]);
+    function handleSelect(nextValue, optionDisabled) {
+        if (disabled || optionDisabled || nextValue === selectedValue) {
+            return;
+        }
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    }
+    const containerSizeClass = size === 'compact'
+        ? 'px-1.5 py-1.5 gap-0'
+        : 'px-2 py-2 gap-0 sm:px-3 sm:py-3 sm:gap-0';
+    const defaultItemTextClass = size === 'compact'
+        ? 'text-xs'
+        : 'text-xs sm:text-sm md:text-base';
+    const finalItemTextClassName = itemTextClassName !== null && itemTextClassName !== void 0 ? itemTextClassName : defaultItemTextClass;
+    const defaultItemPaddingClass = size === 'compact'
+        ? 'px-2 py-1'
+        : 'px-2 py-1.5 sm:px-3 sm:py-2';
+    const finalItemPaddingClassName = itemPaddingClassName !== null && itemPaddingClassName !== void 0 ? itemPaddingClassName : defaultItemPaddingClass;
+    const minItemWidthClass = minItemWidthClassName !== null && minItemWidthClassName !== void 0 ? minItemWidthClassName : 'min-w-[80px] sm:min-w-[100px] md:min-w-[120px]';
+    const maxItemWidthClass = maxItemWidthClassName !== null && maxItemWidthClassName !== void 0 ? maxItemWidthClassName : 'max-w-[120px] sm:max-w-[160px]';
+    const selectedOption = normalizedOptions.find((opt) => opt.value === selectedValue);
+    return (jsxRuntime.jsxs("div", { ref: containerRef, role: "radiogroup", "aria-label": ariaLabel, "aria-disabled": disabled, className: utils.cn('relative inline-flex items-center rounded-full border border-gray-300 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900', fullWidth && 'flex w-full', containerSizeClass, className), children: [(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.badge) ? (jsxRuntime.jsx("span", { style: {
+                    left: `${badgeOffset}px`,
+                    transform: 'translate(-50%, calc(-50% - 1px))'
+                }, className: utils.cn('absolute top-0 z-20 whitespace-nowrap rounded-md bg-yellow-100 px-2.5 py-0.5 text-[0.625rem] font-semibold text-yellow-800 shadow-sm sm:text-xs', badgeClassName), children: selectedOption.badge })) : null, normalizedOptions.map((option) => {
+                const active = option.value === selectedValue;
+                const optionDisabled = disabled || option.disabled;
+                return (jsxRuntime.jsx("div", { className: utils.cn('relative flex items-center justify-center', fullWidth && 'flex-1'), children: jsxRuntime.jsx("button", { ref: active ? activeButtonRef : null, type: "button", role: "radio", name: name, "aria-checked": active, "aria-pressed": active, disabled: optionDisabled, onClick: () => handleSelect(option.value, option.disabled), className: utils.cn('relative z-10 inline-flex items-center justify-center rounded-full font-medium text-center transition truncate', fullWidth && 'w-full', !fullWidth && minItemWidthClass, !fullWidth && maxItemWidthClass, finalItemPaddingClassName, finalItemTextClassName, active
+                            ? utils.cn('text-white shadow-sm', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, activeItemClassName)
+                            : utils.cn('text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100', inactiveItemClassName), optionDisabled && 'cursor-not-allowed opacity-60', itemClassName, option.className), children: option.mobileIcon ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "hidden sm:block", children: option.label }), jsxRuntime.jsx("span", { className: "block sm:hidden", children: active && React__namespace.isValidElement(option.mobileIcon)
+                                        ? React__namespace.cloneElement(option.mobileIcon, {
+                                            className: utils.cn(option.mobileIcon.props.className, 'text-white'),
+                                        })
+                                        : option.mobileIcon })] })) : (option.label) }) }, option.value));
+            })] }));
+}
+
+exports.XToggleButton = XToggleButton;

package/dist/main/x-toggle-button.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
+
+function XToggleButton({ options, value, defaultValue, onChange, disabled = false, className, itemClassName, activeItemClassName, inactiveItemClassName, badgeClassName, minItemWidthClassName, maxItemWidthClassName, itemTextClassName, itemPaddingClassName, size = 'default', fullWidth = false, name, ariaLabel, }) {
+    const containerRef = React.useRef(null);
+    const activeButtonRef = React.useRef(null);
+    const [badgeOffset, setBadgeOffset] = React.useState(0);
+    const normalizedOptions = React.useMemo(() => options.filter((option) => option.value.trim()), [options]);
+    const fallbackValue = React.useMemo(() => {
+        var _a, _b;
+        if (defaultValue && normalizedOptions.some((option) => option.value === defaultValue)) {
+            return defaultValue;
+        }
+        return (_b = (_a = normalizedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+    }, [defaultValue, normalizedOptions]);
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(fallbackValue);
+    React.useEffect(() => {
+        if (!isControlled) {
+            setInternalValue(fallbackValue);
+        }
+    }, [fallbackValue, isControlled]);
+    const selectedValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
+    React.useEffect(() => {
+        if (activeButtonRef.current && containerRef.current) {
+            const buttonRect = activeButtonRef.current.getBoundingClientRect();
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const buttonCenterX = buttonRect.left - containerRect.left + buttonRect.width / 2;
+            setBadgeOffset(buttonCenterX);
+        }
+    }, [selectedValue]);
+    function handleSelect(nextValue, optionDisabled) {
+        if (disabled || optionDisabled || nextValue === selectedValue) {
+            return;
+        }
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    }
+    const containerSizeClass = size === 'compact'
+        ? 'px-1.5 py-1.5 gap-0'
+        : 'px-2 py-2 gap-0 sm:px-3 sm:py-3 sm:gap-0';
+    const defaultItemTextClass = size === 'compact'
+        ? 'text-xs'
+        : 'text-xs sm:text-sm md:text-base';
+    const finalItemTextClassName = itemTextClassName !== null && itemTextClassName !== void 0 ? itemTextClassName : defaultItemTextClass;
+    const defaultItemPaddingClass = size === 'compact'
+        ? 'px-2 py-1'
+        : 'px-2 py-1.5 sm:px-3 sm:py-2';
+    const finalItemPaddingClassName = itemPaddingClassName !== null && itemPaddingClassName !== void 0 ? itemPaddingClassName : defaultItemPaddingClass;
+    const minItemWidthClass = minItemWidthClassName !== null && minItemWidthClassName !== void 0 ? minItemWidthClassName : 'min-w-[80px] sm:min-w-[100px] md:min-w-[120px]';
+    const maxItemWidthClass = maxItemWidthClassName !== null && maxItemWidthClassName !== void 0 ? maxItemWidthClassName : 'max-w-[120px] sm:max-w-[160px]';
+    const selectedOption = normalizedOptions.find((opt) => opt.value === selectedValue);
+    return (jsxs("div", { ref: containerRef, role: "radiogroup", "aria-label": ariaLabel, "aria-disabled": disabled, className: cn('relative inline-flex items-center rounded-full border border-gray-300 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900', fullWidth && 'flex w-full', containerSizeClass, className), children: [(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.badge) ? (jsx("span", { style: {
+                    left: `${badgeOffset}px`,
+                    transform: 'translate(-50%, calc(-50% - 1px))'
+                }, className: cn('absolute top-0 z-20 whitespace-nowrap rounded-md bg-yellow-100 px-2.5 py-0.5 text-[0.625rem] font-semibold text-yellow-800 shadow-sm sm:text-xs', badgeClassName), children: selectedOption.badge })) : null, normalizedOptions.map((option) => {
+                const active = option.value === selectedValue;
+                const optionDisabled = disabled || option.disabled;
+                return (jsx("div", { className: cn('relative flex items-center justify-center', fullWidth && 'flex-1'), children: jsx("button", { ref: active ? activeButtonRef : null, type: "button", role: "radio", name: name, "aria-checked": active, "aria-pressed": active, disabled: optionDisabled, onClick: () => handleSelect(option.value, option.disabled), className: cn('relative z-10 inline-flex items-center justify-center rounded-full font-medium text-center transition truncate', fullWidth && 'w-full', !fullWidth && minItemWidthClass, !fullWidth && maxItemWidthClass, finalItemPaddingClassName, finalItemTextClassName, active
+                            ? cn('text-white shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass, activeItemClassName)
+                            : cn('text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100', inactiveItemClassName), optionDisabled && 'cursor-not-allowed opacity-60', itemClassName, option.className), children: option.mobileIcon ? (jsxs(Fragment, { children: [jsx("span", { className: "hidden sm:block", children: option.label }), jsx("span", { className: "block sm:hidden", children: active && React.isValidElement(option.mobileIcon)
+                                        ? React.cloneElement(option.mobileIcon, {
+                                            className: cn(option.mobileIcon.props.className, 'text-white'),
+                                        })
+                                        : option.mobileIcon })] })) : (option.label) }) }, option.value));
+            })] }));
+}
+
+export { XToggleButton };