@windrun-huaiin/third-ui 29.0.0 → 29.0.2

package/dist/main/x-button.mjs

@@ -1,100 +0,0 @@
-"use client";
-import { __awaiter } from 'tslib';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
-import { Loader2Icon, ChevronDownIcon } from '@windrun-huaiin/base-ui/icons';
-import { themeIconColor, themeBgColor, themeBorderColor, themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
-import { cn } from '@windrun-huaiin/lib/utils';
-
-function XButton(props) {
-    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 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__default.isValidElement(icon)) {
-            return React__default.cloneElement(icon, {
-                className: cn(finalIconClass, icon.props.className),
-            });
-        }
-        return icon;
-    };
-    // click outside to close menu
-    useEffect(() => {
-        if (props.type === 'split') {
-            const handleClickOutside = (event) => {
-                if (menuRef.current && !menuRef.current.contains(event.target)) {
-                    setMenuOpen(false);
-                }
-            };
-            if (menuOpen) {
-                document.addEventListener('mousedown', handleClickOutside);
-            }
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }
-    }, [menuOpen, props.type]);
-    // handle button click
-    const handleButtonClick = (onClick) => __awaiter(this, void 0, void 0, function* () {
-        if (isLoading)
-            return;
-        setIsLoading(true);
-        try {
-            yield onClick();
-        }
-        catch (error) {
-            console.error('Button click error:', error);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    });
-    // base style class
-    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 || ((_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(Loader2Icon, { 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 || ((_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(Loader2Icon, { 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(ChevronDownIcon, { 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))) }))] }));
-}
-
-export { XButton };

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

@@ -1,32 +0,0 @@
-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

@@ -1,95 +0,0 @@
-"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

@@ -1,74 +0,0 @@
-"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 };