nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/SelectBox/components/SelectBox.js

@@ -0,0 +1,364 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useRef, useState } from "react";
+import { selectBoxTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { SelectDropdown } from "./SelectDropdown";
+import { SelectOptionItem } from "./SelectOptionItem";
+import { SelectTrigger } from "./SelectTrigger";
+gsap.registerPlugin(useGSAP);
+export function SelectBox({ options, value: controlledValue, defaultValue, placeholder = "Select...", disabled = false, readOnly = false, loading = false, clearable = false, searchable = false, size = "md", variant = "default", position = "auto", maxHeight = 240, emptyText = "No options", loadingText = "Loading...", searchPlaceholder = "Search...", onChange, onSearch, onOpen, onClose, renderOption, renderValue, label, error, helperText, required = false, name, ariaLabel, className, ...props }) {
+    const theme = selectBoxTheme;
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [dropdownPosition, setDropdownPosition] = useState("bottom");
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const isControlled = controlledValue !== undefined;
+    const selectedOption = options.find((opt)=>opt.value === value);
+    const filteredOptions = searchable && searchQuery ? options.filter((opt)=>opt.label.toLowerCase().includes(searchQuery.toLowerCase())) : options;
+    const calculatePosition = ()=>{
+        if (position !== "auto") {
+            setDropdownPosition(position);
+            return;
+        }
+        if (!triggerRef.current) return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const dropdownHeight = Math.min(maxHeight + 50, 300);
+        if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+            setDropdownPosition("top");
+        } else {
+            setDropdownPosition("bottom");
+        }
+    };
+    const openDropdown = ()=>{
+        if (disabled || readOnly) return;
+        calculatePosition();
+        setIsOpen(true);
+        setHighlightedIndex(-1);
+        onOpen?.();
+    };
+    const closeDropdown = ()=>{
+        setIsOpen(false);
+        setSearchQuery("");
+        setHighlightedIndex(-1);
+        onClose?.();
+    };
+    const handleSelect = (option)=>{
+        if (option.disabled) return;
+        if (!isControlled) {
+            setInternalValue(option.value);
+        }
+        onChange?.(option.value);
+        closeDropdown();
+        triggerRef.current?.focus();
+    };
+    const handleClear = (e)=>{
+        e.stopPropagation();
+        if (!isControlled) {
+            setInternalValue(undefined);
+        }
+        onChange?.(undefined);
+    };
+    const handleSearchChange = (e)=>{
+        const query = e.target.value;
+        setSearchQuery(query);
+        setHighlightedIndex(-1);
+        onSearch?.(query);
+    };
+    const handleTriggerKeyDown = (e)=>{
+        switch(e.key){
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                if (isOpen) {
+                    if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+                        handleSelect(filteredOptions[highlightedIndex]);
+                    }
+                } else {
+                    openDropdown();
+                }
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                if (!isOpen) {
+                    openDropdown();
+                } else {
+                    setHighlightedIndex((prev)=>prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                }
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                if (!isOpen) {
+                    openDropdown();
+                } else {
+                    setHighlightedIndex((prev)=>prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                }
+                break;
+            case "Escape":
+                if (isOpen) {
+                    e.preventDefault();
+                    closeDropdown();
+                }
+                break;
+            case "Tab":
+                if (isOpen) {
+                    closeDropdown();
+                }
+                break;
+            case "Home":
+                if (isOpen) {
+                    e.preventDefault();
+                    setHighlightedIndex(0);
+                }
+                break;
+            case "End":
+                if (isOpen) {
+                    e.preventDefault();
+                    setHighlightedIndex(filteredOptions.length - 1);
+                }
+                break;
+        }
+    };
+    useEffect(()=>{
+        if (!isOpen) return;
+        const handleClickOutside = (e)=>{
+            const target = e.target;
+            const isInsideContainer = containerRef.current?.contains(target);
+            const isInsideDropdown = dropdownRef.current?.contains(target);
+            if (!isInsideContainer && !isInsideDropdown) {
+                closeDropdown();
+            }
+        };
+        const handleEscape = (e)=>{
+            if (e.key === "Escape") {
+                closeDropdown();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleEscape);
+        return ()=>{
+            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        if (isOpen && searchable && searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    }, [
+        isOpen,
+        searchable
+    ]);
+    useEffect(()=>{
+        if (isOpen && highlightedIndex >= 0 && dropdownRef.current) {
+            const highlightedEl = dropdownRef.current.querySelector(`[data-index="${highlightedIndex}"]`);
+            if (highlightedEl) {
+                highlightedEl.scrollIntoView({
+                    block: "nearest"
+                });
+            }
+        }
+    }, [
+        highlightedIndex,
+        isOpen
+    ]);
+    const iconRef = useRef(null);
+    useGSAP(()=>{
+        if (iconRef.current) {
+            gsap.to(iconRef.current, {
+                rotation: isOpen ? 180 : 0,
+                duration: 0.2,
+                ease: "power2.out"
+            });
+        }
+    }, [
+        isOpen
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: cn(theme.container.base, className),
+        ...props,
+        children: [
+            label && /*#__PURE__*/ _jsx("span", {
+                className: cn(theme.label.base, theme.label.size[size], required && theme.label.required, error && theme.label.error),
+                id: `${props.id || "select"}-label`,
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs(SelectTrigger, {
+                ref: triggerRef,
+                isOpen: isOpen,
+                disabled: disabled,
+                loading: loading,
+                size: size,
+                variant: variant,
+                hasValue: !!selectedOption,
+                hasError: !!error,
+                onClick: ()=>isOpen ? closeDropdown() : openDropdown(),
+                onKeyDown: handleTriggerKeyDown,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: selectedOption ? theme.value.base : theme.placeholder.base,
+                        children: selectedOption ? renderValue ? renderValue(selectedOption) : selectedOption.icon ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                selectedOption.icon,
+                                selectedOption.label
+                            ]
+                        }) : selectedOption.label : placeholder
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-1",
+                        children: [
+                            clearable && value !== undefined && value !== "" && !disabled && // biome-ignore lint/a11y/useSemanticElements: Cannot use button inside button
+                            /*#__PURE__*/ _jsx("span", {
+                                role: "button",
+                                tabIndex: 0,
+                                onClick: handleClear,
+                                onKeyDown: (e)=>{
+                                    if (e.key === "Enter" || e.key === " ") {
+                                        e.preventDefault();
+                                        handleClear(e);
+                                    }
+                                },
+                                className: cn(theme.clearButton.base, theme.clearButton.hover),
+                                "aria-label": "Clear selection",
+                                children: /*#__PURE__*/ _jsx("svg", {
+                                    className: "w-4 h-4",
+                                    viewBox: "0 0 20 20",
+                                    fill: "currentColor",
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ _jsx("path", {
+                                        d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+                                    })
+                                })
+                            }),
+                            loading ? /*#__PURE__*/ _jsxs("svg", {
+                                className: cn(theme.loading.spinner, theme.icon.size[size]),
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                "aria-hidden": "true",
+                                children: [
+                                    /*#__PURE__*/ _jsx("circle", {
+                                        className: "opacity-25",
+                                        cx: "12",
+                                        cy: "12",
+                                        r: "10",
+                                        stroke: "currentColor",
+                                        strokeWidth: "4"
+                                    }),
+                                    /*#__PURE__*/ _jsx("path", {
+                                        className: "opacity-75",
+                                        fill: "currentColor",
+                                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ _jsx("svg", {
+                                ref: iconRef,
+                                className: cn(theme.icon.base, theme.icon.size[size]),
+                                viewBox: "0 0 20 20",
+                                fill: "currentColor",
+                                "aria-hidden": "true",
+                                children: /*#__PURE__*/ _jsx("path", {
+                                    fillRule: "evenodd",
+                                    d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                                    clipRule: "evenodd"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            name && /*#__PURE__*/ _jsx("input", {
+                type: "hidden",
+                name: name,
+                value: String(value ?? "")
+            }),
+            /*#__PURE__*/ _jsxs(SelectDropdown, {
+                ref: dropdownRef,
+                isOpen: isOpen,
+                position: dropdownPosition,
+                size: size,
+                maxHeight: maxHeight,
+                triggerRef: triggerRef,
+                children: [
+                    searchable && /*#__PURE__*/ _jsx("div", {
+                        className: theme.search.container,
+                        children: /*#__PURE__*/ _jsx("input", {
+                            ref: searchInputRef,
+                            type: "text",
+                            value: searchQuery,
+                            onChange: handleSearchChange,
+                            placeholder: searchPlaceholder,
+                            className: theme.search.input,
+                            onClick: (e)=>e.stopPropagation()
+                        })
+                    }),
+                    loading ? /*#__PURE__*/ _jsxs("div", {
+                        className: theme.loading.base,
+                        children: [
+                            /*#__PURE__*/ _jsxs("svg", {
+                                className: theme.loading.spinner,
+                                viewBox: "0 0 24 24",
+                                fill: "none",
+                                "aria-hidden": "true",
+                                children: [
+                                    /*#__PURE__*/ _jsx("circle", {
+                                        className: "opacity-25",
+                                        cx: "12",
+                                        cy: "12",
+                                        r: "10",
+                                        stroke: "currentColor",
+                                        strokeWidth: "4"
+                                    }),
+                                    /*#__PURE__*/ _jsx("path", {
+                                        className: "opacity-75",
+                                        fill: "currentColor",
+                                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                                    })
+                                ]
+                            }),
+                            loadingText
+                        ]
+                    }) : filteredOptions.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                        className: theme.empty.base,
+                        children: emptyText
+                    }) : filteredOptions.map((option, index)=>/*#__PURE__*/ _jsx("div", {
+                            "data-index": index,
+                            children: renderOption ? /*#__PURE__*/ _jsx("div", {
+                                onClick: ()=>handleSelect(option),
+                                onKeyDown: (e)=>{
+                                    if (e.key === "Enter") handleSelect(option);
+                                },
+                                role: "option",
+                                tabIndex: 0,
+                                "aria-selected": option.value === value,
+                                children: renderOption(option, option.value === value)
+                            }) : /*#__PURE__*/ _jsx(SelectOptionItem, {
+                                option: option,
+                                isSelected: option.value === value,
+                                isHighlighted: index === highlightedIndex,
+                                size: size,
+                                onClick: ()=>handleSelect(option),
+                                onMouseEnter: ()=>setHighlightedIndex(index)
+                            })
+                        }, String(option.value)))
+                ]
+            }),
+            (helperText || error) && /*#__PURE__*/ _jsx("p", {
+                className: cn(theme.helper.base, error && theme.helper.error),
+                children: error || helperText
+            })
+        ]
+    });
+}

package/dist/fe/components/SelectBox/components/SelectDropdown.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { selectBoxTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export const SelectDropdown = /*#__PURE__*/ forwardRef(({ isOpen, position, size, maxHeight, children, triggerRef }, ref)=>{
+    const theme = selectBoxTheme;
+    const dropdownRef = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    const [dropdownStyle, setDropdownStyle] = useState({});
+    useEffect(()=>{
+        setMounted(true);
+    }, []);
+    useEffect(()=>{
+        if (!isOpen || !triggerRef?.current) return;
+        const updatePosition = ()=>{
+            const triggerRect = triggerRef.current?.getBoundingClientRect();
+            if (!triggerRect) return;
+            setDropdownStyle({
+                position: "fixed",
+                left: triggerRect.left,
+                width: triggerRect.width,
+                maxHeight,
+                overflowY: "auto",
+                zIndex: 9999,
+                ...position === "top" ? {
+                    bottom: window.innerHeight - triggerRect.top + 4
+                } : {
+                    top: triggerRect.bottom + 4
+                }
+            });
+        };
+        updatePosition();
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+        return ()=>{
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [
+        isOpen,
+        position,
+        maxHeight,
+        triggerRef
+    ]);
+    useGSAP(()=>{
+        if (!dropdownRef.current) return;
+        if (isOpen) {
+            gsap.fromTo(dropdownRef.current, {
+                opacity: 0,
+                y: position === "bottom" ? -8 : 8,
+                scale: 0.96
+            }, {
+                opacity: 1,
+                y: 0,
+                scale: 1,
+                duration: 0.2,
+                ease: "power2.out"
+            });
+        }
+    }, [
+        isOpen,
+        position
+    ]);
+    if (!isOpen || !mounted) return null;
+    const dropdownContent = /*#__PURE__*/ _jsx("div", {
+        ref: (node)=>{
+            dropdownRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        },
+        role: "listbox",
+        className: cn(theme.dropdown.base, theme.dropdown.size[size], !triggerRef && theme.dropdown.position[position]),
+        style: triggerRef ? dropdownStyle : {
+            maxHeight,
+            overflowY: "auto"
+        },
+        children: children
+    });
+    if (triggerRef) {
+        return /*#__PURE__*/ createPortal(dropdownContent, document.body);
+    }
+    return dropdownContent;
+});
+SelectDropdown.displayName = "SelectDropdown";

package/dist/fe/components/SelectBox/components/SelectOptionItem.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { selectBoxTheme } from "../theme";
+import { cn } from "../utils/cn";
+export function SelectOptionItem({ option, isSelected, isHighlighted, size, onClick, onMouseEnter }) {
+    const theme = selectBoxTheme;
+    return /*#__PURE__*/ _jsxs("div", {
+        role: "option",
+        tabIndex: option.disabled ? -1 : 0,
+        "aria-selected": isSelected,
+        "aria-disabled": option.disabled,
+        onClick: option.disabled ? undefined : onClick,
+        onKeyDown: (e)=>{
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                if (!option.disabled) onClick();
+            }
+        },
+        onMouseEnter: onMouseEnter,
+        className: cn(theme.option.base, theme.option.size[size], !option.disabled && theme.option.states.hover, isSelected && theme.option.states.selected, isHighlighted && !isSelected && theme.option.states.highlighted, option.disabled && theme.option.states.disabled),
+        children: [
+            option.icon && /*#__PURE__*/ _jsx("span", {
+                className: theme.option.icon,
+                children: option.icon
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "truncate",
+                children: option.label
+            }),
+            isSelected && /*#__PURE__*/ _jsx("svg", {
+                className: theme.option.checkmark,
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ _jsx("path", {
+                    fillRule: "evenodd",
+                    d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+                    clipRule: "evenodd"
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/SelectBox/components/SelectTrigger.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { selectBoxTheme } from "../theme";
+import { cn } from "../utils/cn";
+export const SelectTrigger = /*#__PURE__*/ forwardRef(({ isOpen, disabled, loading, size, variant, hasValue, hasError, onClick, onKeyDown, children }, ref)=>{
+    const theme = selectBoxTheme;
+    return /*#__PURE__*/ _jsx("button", {
+        ref: ref,
+        type: "button",
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-disabled": disabled,
+        disabled: disabled,
+        onClick: onClick,
+        onKeyDown: onKeyDown,
+        className: cn(theme.trigger.base, theme.trigger.size[size], theme.trigger.variant[variant], !disabled && theme.trigger.states.hover, theme.trigger.states.focus, disabled && theme.trigger.states.disabled, hasError && theme.trigger.states.error, isOpen && theme.trigger.states.open),
+        children: children
+    });
+});
+SelectTrigger.displayName = "SelectTrigger";

package/dist/fe/components/SelectBox/index.js

@@ -0,0 +1,5 @@
+export { SelectBox } from "./components/SelectBox";
+export { SelectDropdown } from "./components/SelectDropdown";
+export { SelectOptionItem } from "./components/SelectOptionItem";
+export { SelectTrigger } from "./components/SelectTrigger";
+export { selectBoxTheme } from "./theme";

package/dist/fe/components/SelectBox/theme/index.js

@@ -0,0 +1,98 @@
+export const selectBoxTheme = {
+    container: {
+        base: "relative w-full"
+    },
+    label: {
+        base: "block font-medium text-zinc-700 dark:text-zinc-300 mb-1.5",
+        size: {
+            sm: "text-xs",
+            md: "text-sm",
+            lg: "text-base"
+        },
+        required: 'after:content-["*"] after:ml-0.5 after:text-red-500',
+        error: "text-red-600 dark:text-red-400"
+    },
+    trigger: {
+        base: "relative w-full flex items-center justify-between gap-2 rounded-lg border bg-white dark:bg-zinc-900 text-left cursor-pointer transition-all duration-150",
+        size: {
+            sm: "px-2.5 py-1.5 text-sm min-h-[32px]",
+            md: "px-3 py-2 text-sm min-h-[40px]",
+            lg: "px-4 py-2.5 text-base min-h-[48px]"
+        },
+        variant: {
+            default: "border-zinc-300 dark:border-zinc-600",
+            filled: "border-transparent bg-zinc-100 dark:bg-zinc-800",
+            ghost: "border-transparent bg-transparent"
+        },
+        states: {
+            hover: "hover:border-zinc-400 dark:hover:border-zinc-500",
+            focus: "focus:outline-none focus:ring-2 focus:ring-zinc-400/50 dark:focus:ring-zinc-500/50 focus:border-zinc-400 dark:focus:border-zinc-500",
+            disabled: "opacity-50 cursor-not-allowed pointer-events-none",
+            error: "border-red-500 dark:border-red-400 focus:ring-red-400/50",
+            open: "ring-2 ring-zinc-400/50 dark:ring-zinc-500/50 border-zinc-400 dark:border-zinc-500"
+        }
+    },
+    placeholder: {
+        base: "text-zinc-400 dark:text-zinc-500 truncate"
+    },
+    value: {
+        base: "text-zinc-900 dark:text-white truncate flex items-center gap-2"
+    },
+    icon: {
+        base: "flex-shrink-0 text-zinc-400 dark:text-zinc-500 transition-transform duration-200",
+        size: {
+            sm: "w-4 h-4",
+            md: "w-4 h-4",
+            lg: "w-5 h-5"
+        },
+        open: "rotate-180"
+    },
+    clearButton: {
+        base: "flex-shrink-0 p-0.5 rounded text-zinc-400 dark:text-zinc-500 transition-colors",
+        hover: "hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+    },
+    dropdown: {
+        base: "absolute left-0 right-0 z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-lg shadow-lg overflow-hidden",
+        position: {
+            top: "bottom-full mb-1",
+            bottom: "top-full mt-1"
+        },
+        size: {
+            sm: "py-1",
+            md: "py-1.5",
+            lg: "py-2"
+        }
+    },
+    search: {
+        container: "px-2 pb-1.5 border-b border-zinc-100 dark:border-zinc-800",
+        input: "w-full px-2.5 py-1.5 text-sm bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md outline-none focus:ring-1 focus:ring-zinc-400/50 dark:focus:ring-zinc-500/50 text-zinc-900 dark:text-white placeholder:text-zinc-400 dark:placeholder:text-zinc-500",
+        icon: "absolute left-4.5 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400"
+    },
+    option: {
+        base: "relative flex items-center gap-2 cursor-pointer transition-colors duration-100",
+        size: {
+            sm: "px-2.5 py-1.5 text-sm",
+            md: "px-3 py-2 text-sm",
+            lg: "px-4 py-2.5 text-base"
+        },
+        states: {
+            hover: "bg-zinc-50 dark:bg-zinc-800",
+            selected: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white",
+            highlighted: "bg-zinc-100 dark:bg-zinc-800",
+            disabled: "opacity-50 cursor-not-allowed pointer-events-none"
+        },
+        icon: "flex-shrink-0 w-4 h-4",
+        checkmark: "ml-auto flex-shrink-0 w-4 h-4 text-zinc-900 dark:text-white"
+    },
+    empty: {
+        base: "px-3 py-6 text-center text-sm text-zinc-400 dark:text-zinc-500"
+    },
+    loading: {
+        base: "px-3 py-6 flex items-center justify-center gap-2 text-sm text-zinc-400 dark:text-zinc-500",
+        spinner: "w-4 h-4 animate-spin"
+    },
+    helper: {
+        base: "mt-1.5 text-xs text-zinc-500 dark:text-zinc-400",
+        error: "text-red-600 dark:text-red-400"
+    }
+};

package/dist/fe/components/SelectBox/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/SelectBox/utils/cn.js

@@ -0,0 +1,3 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export const cn = (...inputs)=>twMerge(clsx(inputs));