@pathscale/ui 1.1.55 → 1.1.56

package/dist/components/drawer/index.d.ts

@@ -1 +1 @@
-export { default, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, type DrawerPlacement, type DrawerSize, type DrawerBackdropVariant, type DrawerDialogSide, type DrawerScrollBehavior, type DrawerRootProps, type DrawerTriggerProps, type DrawerBackdropProps, type DrawerContentProps, type DrawerDialogProps, type DrawerHeaderProps, type DrawerHeadingProps, type DrawerBodyProps, type DrawerFooterProps, type DrawerHandleProps, type DrawerCloseTriggerProps, type DrawerCloseProps, } from "./Drawer";
+export { default, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, type DrawerPlacement, type DrawerBackdropVariant, type DrawerRootProps, type DrawerTriggerProps, type DrawerBackdropProps, type DrawerContentProps, type DrawerDialogProps, type DrawerHeaderProps, type DrawerHeadingProps, type DrawerBodyProps, type DrawerFooterProps, type DrawerHandleProps, type DrawerCloseTriggerProps, type DrawerCloseProps, } from "./Drawer";

package/dist/components/dropdown/Dropdown.js

@@ -2,8 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Dropdown.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__ from "./Dropdown.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=dropdown__menu>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=dropdown__menu data-slot=dropdown-menu>");
 const DropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -145,9 +144,10 @@ const DropdownRoot = (props)=>{
         get children () {
             var _el$ = _tmpl$();
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRootRef, _el$);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.base, local.class, local.className)
-                }), {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown", local.class, local.className);
+                },
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },
@@ -174,9 +174,10 @@ const DropdownTrigger = (props)=>{
     ]);
     if (!ctx) return (()=>{
         var _el$2 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.trigger, local.class)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__trigger", local.class);
+            },
             get type () {
                 return local.type ?? "button";
             }
@@ -239,10 +240,10 @@ const DropdownTrigger = (props)=>{
             },
             get type () {
                 return local.type ?? "button";
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.trigger, local.class)
-            }), {
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__trigger", local.class);
+            },
             "data-slot": "dropdown-trigger",
             "aria-haspopup": "menu",
             get ["aria-expanded"] () {
@@ -274,12 +275,11 @@ const DropdownMenu = (props)=>{
     ]);
     if (!ctx) return (()=>{
         var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.popover, local.class)
-            })), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.menu
-            })), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__popover", local.class);
+            }
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
         return _el$4;
     })();
@@ -324,14 +324,14 @@ const DropdownMenu = (props)=>{
         };
     };
     return (()=>{
-        var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
+        var _el$6 = _tmpl$4(), _el$7 = _el$6.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get id () {
                 return ctx.menuId;
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.popover, local.class)
-            }), {
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__popover", local.class);
+            },
             get role () {
                 return local.role ?? "menu";
             },
@@ -350,11 +350,6 @@ const DropdownMenu = (props)=>{
             },
             onKeyDown: handleKeyDown
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.menu
-            }), {
-            "data-slot": "dropdown-menu"
-        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
         return _el$6;
     })();
@@ -419,10 +414,10 @@ const DropdownItem = (props)=>{
             },
             get role () {
                 return local.role ?? "menuitem";
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.item, local.class)
-            }), {
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__item", local.class);
+            },
             "data-slot": "menu-item",
             get ["data-disabled"] () {
                 return isDisabled() ? "true" : "false";
@@ -455,10 +450,10 @@ const DropdownGroup = (props)=>{
     return (()=>{
         var _el$9 = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "group"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.group, local.class)
-            }), {
+            role: "group",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__group", local.class);
+            },
             "data-slot": "dropdown-group"
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
@@ -472,10 +467,10 @@ const DropdownSeparator = (props)=>{
     return (()=>{
         var _el$0 = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "separator"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Dropdown_classes_js_de10768c__.CLASSES.slot.separator, local.class)
-            }), {
+            role: "separator",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dropdown__separator", local.class);
+            },
             "data-slot": "separator",
             "aria-orientation": "horizontal"
         }), false, false);

package/dist/components/dropdown-select/DropdownSelect.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+import type { ComponentSize, IComponentBaseProps } from "../types";
+export type DropdownSelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type DropdownSelectProps = IComponentBaseProps & {
+    options: DropdownSelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    showCheckmark?: boolean;
+    size?: ComponentSize;
+    "aria-label"?: string;
+    labelRenderer?: (value: string, option?: DropdownSelectOption) => JSX.Element;
+    optionRenderer?: (option: DropdownSelectOption, selected: boolean, highlighted: boolean) => JSX.Element;
+};
+declare const DropdownSelect: (props: DropdownSelectProps) => JSX.Element;
+export default DropdownSelect;

package/dist/components/dropdown-select/DropdownSelect.js

@@ -0,0 +1,296 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__ from "../dropdown/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=truncate>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg class="h-4 w-4 shrink-0 opacity-60"xmlns=http://www.w3.org/2000/svg viewBox="0 0 20 20"fill=currentColor aria-hidden=true><path fill-rule=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"clip-rule=evenodd>'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="flex items-center gap-2 w-full"><span class=truncate>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 20 20"fill=currentColor aria-hidden=true><path fill-rule=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"clip-rule=evenodd>');
+const DropdownSelectInner = (props)=>{
+    const [highlightedIndex, setHighlightedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(-1);
+    const listboxId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    let typeaheadBuffer = "";
+    let typeaheadTimer;
+    const getOptionId = (index)=>`${listboxId}-option-${index}`;
+    const selectedLabel = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const opt = props.options.find((o)=>o.value === props.value);
+        return opt ? opt.label : props.placeholder;
+    });
+    const isOpen = ()=>props.open;
+    const findNextEnabledIndex = (from, direction)=>{
+        const len = props.options.length;
+        if (0 === len) return -1;
+        let idx = from;
+        for(let i = 0; i < len; i++){
+            idx = ((idx + direction) % len + len) % len;
+            if (!props.options[idx].disabled) return idx;
+        }
+        return -1;
+    };
+    const findFirstEnabledIndex = ()=>props.options.findIndex((o)=>!o.disabled);
+    const findLastEnabledIndex = ()=>{
+        for(let i = props.options.length - 1; i >= 0; i--)if (!props.options[i].disabled) return i;
+        return -1;
+    };
+    const selectOption = (index)=>{
+        if (index >= 0 && index < props.options.length && !props.options[index].disabled) {
+            props.onChange?.(props.options[index].value);
+            props.setOpen(false);
+            setHighlightedIndex(-1);
+        }
+    };
+    const openMenu = ()=>{
+        if (!isOpen()) {
+            props.setOpen(true);
+            const currentIdx = props.options.findIndex((o)=>o.value === props.value);
+            setHighlightedIndex(currentIdx >= 0 ? currentIdx : findFirstEnabledIndex());
+        }
+    };
+    const handleTypeahead = (char)=>{
+        if (void 0 !== typeaheadTimer) clearTimeout(typeaheadTimer);
+        typeaheadBuffer += char.toLowerCase();
+        typeaheadTimer = setTimeout(()=>{
+            typeaheadBuffer = "";
+            typeaheadTimer = void 0;
+        }, 500);
+        const matchIndex = props.options.findIndex((o)=>!o.disabled && o.label.toLowerCase().startsWith(typeaheadBuffer));
+        if (matchIndex >= 0) setHighlightedIndex(matchIndex);
+    };
+    const handleKeyDown = (e)=>{
+        if (props.disabled) return;
+        if (!isOpen()) {
+            if ("Enter" === e.key || " " === e.key || "ArrowDown" === e.key || "ArrowUp" === e.key) {
+                e.preventDefault();
+                openMenu();
+                return;
+            }
+            if (1 === e.key.length && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                e.preventDefault();
+                openMenu();
+                handleTypeahead(e.key);
+            }
+            return;
+        }
+        switch(e.key){
+            case "Escape":
+                e.preventDefault();
+                e.stopPropagation();
+                props.setOpen(false);
+                setHighlightedIndex(-1);
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                setHighlightedIndex((prev)=>findNextEnabledIndex(prev, 1));
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setHighlightedIndex((prev)=>findNextEnabledIndex(prev, -1));
+                break;
+            case "Home":
+                e.preventDefault();
+                setHighlightedIndex(findFirstEnabledIndex());
+                break;
+            case "End":
+                e.preventDefault();
+                setHighlightedIndex(findLastEnabledIndex());
+                break;
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                e.stopPropagation();
+                if (highlightedIndex() >= 0) selectOption(highlightedIndex());
+                break;
+            default:
+                if (1 === e.key.length && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                    e.preventDefault();
+                    handleTypeahead(e.key);
+                }
+                break;
+        }
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (isOpen() && highlightedIndex() >= 0) {
+            const el = document.getElementById(getOptionId(highlightedIndex()));
+            el?.scrollIntoView({
+                block: "nearest"
+            });
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!isOpen()) setHighlightedIndex(-1);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        if (void 0 !== typeaheadTimer) clearTimeout(typeaheadTimer);
+    });
+    const triggerSizeClasses = {
+        xs: "btn-xs",
+        sm: "btn-sm",
+        md: "btn-md",
+        lg: "btn-lg",
+        xl: "btn-lg"
+    };
+    return [
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Trigger, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("btn btn-neutral gap-2 justify-between", triggerSizeClasses[props.size]);
+            },
+            get disabled () {
+                return props.disabled;
+            },
+            "aria-haspopup": "listbox",
+            get ["aria-expanded"] () {
+                return isOpen();
+            },
+            "aria-controls": listboxId,
+            get ["aria-activedescendant"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!(isOpen() && highlightedIndex() >= 0))() ? getOptionId(highlightedIndex()) : void 0;
+            },
+            onKeyDown: handleKeyDown,
+            get children () {
+                return [
+                    (()=>{
+                        var _el$ = _tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+                            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!props.labelRenderer);
+                            return ()=>_c$() ? props.labelRenderer(selectedLabel(), props.options.find((o)=>o.value === props.value)) : selectedLabel();
+                        })());
+                        return _el$;
+                    })(),
+                    _tmpl$2()
+                ];
+            }
+        }),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Menu, {
+            id: listboxId,
+            class: "z-10",
+            role: "listbox",
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                    get each () {
+                        return props.options;
+                    },
+                    children: (option, index)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Item, {
+                            get id () {
+                                return getOptionId(index());
+                            },
+                            role: "option",
+                            get disabled () {
+                                return option.disabled;
+                            },
+                            get ["class"] () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+                                    "bg-primary/10": props.value === option.value,
+                                    "bg-base-300": highlightedIndex() === index() && props.value !== option.value,
+                                    "bg-primary/20": highlightedIndex() === index() && props.value === option.value
+                                });
+                            },
+                            onClick: ()=>{
+                                props.onChange?.(option.value);
+                                props.setOpen(false);
+                                setHighlightedIndex(-1);
+                            },
+                            onMouseEnter: ()=>setHighlightedIndex(index()),
+                            get ["aria-selected"] () {
+                                return props.value === option.value;
+                            },
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!props.optionRenderer)() ? props.optionRenderer(option, props.value === option.value, highlightedIndex() === index()) : (()=>{
+                                    var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (()=>{
+                                        var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!props.showCheckmark);
+                                        return ()=>_c$2() && (()=>{
+                                                var _el$5 = _tmpl$4();
+                                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "class", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])("h-4 w-4 shrink-0", {
+                                                        "opacity-100": props.value === option.value,
+                                                        "opacity-0": props.value !== option.value
+                                                    })));
+                                                return _el$5;
+                                            })();
+                                    })(), _el$4);
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>option.label);
+                                    return _el$3;
+                                })();
+                            }
+                        })
+                });
+            }
+        })
+    ];
+};
+const DropdownSelect_DropdownSelect = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "options",
+        "value",
+        "onChange",
+        "label",
+        "placeholder",
+        "disabled",
+        "showCheckmark",
+        "size",
+        "aria-label",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "labelRenderer",
+        "optionRenderer"
+    ]);
+    const placeholder = ()=>local.placeholder ?? "Select...";
+    const showCheckmark = ()=>local.showCheckmark ?? true;
+    const size = ()=>local.size ?? "md";
+    const [open, setOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Root, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className);
+        },
+        get style () {
+            return local.style;
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get ["aria-label"] () {
+            return local["aria-label"] ?? local.label;
+        },
+        role: "none",
+        get open () {
+            return open();
+        },
+        onOpenChange: setOpen,
+        get children () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DropdownSelectInner, {
+                get options () {
+                    return local.options;
+                },
+                get value () {
+                    return local.value;
+                },
+                get onChange () {
+                    return local.onChange;
+                },
+                get placeholder () {
+                    return placeholder();
+                },
+                get showCheckmark () {
+                    return showCheckmark();
+                },
+                get size () {
+                    return size();
+                },
+                get disabled () {
+                    return local.disabled;
+                },
+                get labelRenderer () {
+                    return local.labelRenderer;
+                },
+                get optionRenderer () {
+                    return local.optionRenderer;
+                },
+                get open () {
+                    return open();
+                },
+                setOpen: setOpen
+            });
+        }
+    }));
+};
+const DropdownSelect = DropdownSelect_DropdownSelect;
+export { DropdownSelect as default };

package/dist/components/dropdown-select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DropdownSelect } from "./DropdownSelect";
+export type { DropdownSelectProps, DropdownSelectOption } from "./DropdownSelect";

package/dist/components/dropdown-select/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__DropdownSelect_js_974f5336__ from "./DropdownSelect.js";
+var __webpack_exports__DropdownSelect = __WEBPACK_EXTERNAL_MODULE__DropdownSelect_js_974f5336__["default"];
+export { __webpack_exports__DropdownSelect as DropdownSelect };

package/dist/components/empty-state/EmptyState.js

@@ -2,7 +2,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./EmptyState.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__ from "./EmptyState.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h3>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>");
 const EmptyStateRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -15,10 +14,10 @@ const EmptyStateRoot = (props)=>{
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "status"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.base, local.class, local.className)
-            }), {
+            role: "status",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state", local.class, local.className);
+            },
             "data-slot": "empty-state",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -41,9 +40,10 @@ const EmptyStateIcon = (props)=>{
     ]);
     return (()=>{
         var _el$2 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.slot.icon, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state__icon", local.class, local.className);
+            },
             "data-slot": "empty-state-icon",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -67,9 +67,10 @@ const EmptyStateTitle = (props)=>{
     ]);
     return (()=>{
         var _el$3 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.slot.title, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state__title", local.class, local.className);
+            },
             "data-slot": "empty-state-title",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -92,9 +93,10 @@ const EmptyStateDescription = (props)=>{
     ]);
     return (()=>{
         var _el$4 = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.slot.description, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state__description", local.class, local.className);
+            },
             "data-slot": "empty-state-description",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -117,9 +119,10 @@ const EmptyStateActions = (props)=>{
     ]);
     return (()=>{
         var _el$5 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__EmptyState_classes_js_726ce366__.CLASSES.slot.actions, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("empty-state__actions", local.class, local.className);
+            },
             "data-slot": "empty-state-actions",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -132,12 +135,12 @@ const EmptyStateActions = (props)=>{
         return _el$5;
     })();
 };
-const EmptyState = Object.assign(EmptyStateRoot, {
+const EmptyState_EmptyState = Object.assign(EmptyStateRoot, {
     Root: EmptyStateRoot,
     Icon: EmptyStateIcon,
     Title: EmptyStateTitle,
     Description: EmptyStateDescription,
     Actions: EmptyStateActions
 });
-const empty_state_EmptyState = EmptyState;
-export { EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateTitle, empty_state_EmptyState as default };
+const EmptyState = EmptyState_EmptyState;
+export { EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateTitle, EmptyState as default };

package/dist/components/fieldset/Fieldset.d.ts

@@ -1,24 +1,11 @@
-import "./Fieldset.css";
-import { type JSX, type ParentComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type FieldsetRootProps = JSX.FieldsetHTMLAttributes<HTMLFieldSetElement> & IComponentBaseProps;
-export type FieldsetLegendProps = JSX.HTMLAttributes<HTMLLegendElement> & IComponentBaseProps;
-export type FieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element;
-};
-export type FieldsetActionsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element;
-};
-declare const FieldsetRoot: ParentComponent<FieldsetRootProps>;
-declare const FieldsetLegend: ParentComponent<FieldsetLegendProps>;
-declare const FieldGroup: ParentComponent<FieldGroupProps>;
-declare const FieldsetActions: ParentComponent<FieldsetActionsProps>;
-declare const Fieldset: ParentComponent<FieldsetRootProps> & {
-    Root: ParentComponent<FieldsetRootProps>;
-    Legend: ParentComponent<FieldsetLegendProps>;
-    Group: ParentComponent<FieldGroupProps>;
-    Actions: ParentComponent<FieldsetActionsProps>;
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps, ComponentSize } from "../types";
+export type FieldsetGap = ComponentSize | "none";
+export type FieldsetProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLFieldSetElement> & {
+    legend?: JSX.Element | string;
+    description?: string;
+    disabled?: boolean;
+    gap?: FieldsetGap;
 };
+declare const Fieldset: (props: FieldsetProps) => JSX.Element;
 export default Fieldset;
-export { Fieldset, FieldsetRoot, FieldsetLegend, FieldGroup, FieldsetActions };
-export type { FieldsetRootProps as FieldsetProps };