@pathscale/ui 1.1.54 → 1.1.56

package/dist/components/drawer/Drawer.js

@@ -2,8 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Drawer.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__Drawer_classes_js_756bbd15__ from "./Drawer.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h2>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div data-slot=drawer-handle-bar>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=drawer-close>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h2>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div data-slot=drawer-handle-bar>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true fill=none height=16 viewBox="0 0 24 24"width=16 xmlns=http://www.w3.org/2000/svg><path d="M18 6L6 18M6 6l12 12"stroke=currentColor stroke-linecap=round stroke-width=2>'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=drawer-close>");
 const DrawerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const useDrawerContext = ()=>{
     const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DrawerContext);
@@ -59,10 +58,10 @@ const DrawerTrigger = (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, {
-            type: "button"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.trigger, local.class, local.className)
-            }), {
+            type: "button",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__trigger", local.class, local.className);
+            },
             "data-slot": "drawer-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -77,9 +76,9 @@ const DrawerTrigger = (props)=>{
     })();
 };
 const BACKDROP_VARIANT_MAP = {
-    opaque: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.backdrop.opaque,
-    blur: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.backdrop.blur,
-    transparent: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.backdrop.transparent
+    opaque: "drawer__backdrop--opaque",
+    blur: "drawer__backdrop--blur",
+    transparent: "drawer__backdrop--transparent"
 };
 const DrawerBackdrop = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -147,9 +146,10 @@ const DrawerBackdrop = (props)=>{
                         value: updatedCtx,
                         get children () {
                             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__Drawer_classes_js_756bbd15__.CLASSES.slot.backdrop, BACKDROP_VARIANT_MAP[variant()], 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)("drawer__backdrop", BACKDROP_VARIANT_MAP[variant()], local.class, local.className);
+                                },
                                 "data-slot": "drawer-backdrop",
                                 get ["data-entering"] () {
                                     return "entering" === animState() ? "true" : void 0;
@@ -176,10 +176,10 @@ const DrawerBackdrop = (props)=>{
     });
 };
 const PLACEMENT_CLASS_MAP = {
-    top: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.placement.top,
-    bottom: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.placement.bottom,
-    left: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.placement.left,
-    right: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.placement.right
+    top: "drawer__content--top",
+    bottom: "drawer__content--bottom",
+    left: "drawer__content--left",
+    right: "drawer__content--right"
 };
 const DrawerContent = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -203,9 +203,10 @@ const DrawerContent = (props)=>{
         value: updatedCtx,
         get children () {
             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__Drawer_classes_js_756bbd15__.CLASSES.slot.content, PLACEMENT_CLASS_MAP[placement()], 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)("drawer__content", PLACEMENT_CLASS_MAP[placement()], local.class, local.className);
+                },
                 "data-slot": "drawer-content",
                 get ["data-placement"] () {
                     return placement();
@@ -228,48 +229,23 @@ const DrawerContent = (props)=>{
         }
     });
 };
-const SIDE_MAP = {
-    left: "drawer__dialog--side-left",
-    right: "drawer__dialog--side-right"
-};
 const DrawerDialog = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "class",
         "className",
         "dataTheme",
-        "style",
-        "side",
-        "width",
-        "maxWidth",
-        "bg",
-        "padding",
-        "borderWidth",
-        "borderColor"
+        "style"
     ]);
     const ctx = useDrawerContext();
-    const mergedStyle = ()=>{
-        const s = {};
-        if ("object" == typeof local.style && local.style) Object.assign(s, local.style);
-        if (local.width) s["--drawer-dialog-width"] = local.width;
-        if (local.maxWidth) s["--drawer-dialog-max-width"] = local.maxWidth;
-        if (local.bg) s["--drawer-dialog-bg"] = local.bg;
-        if (local.padding) s["--drawer-dialog-padding"] = local.padding;
-        if (local.borderWidth) s["--drawer-dialog-border-width"] = local.borderWidth;
-        if (local.borderColor) s["--drawer-dialog-border-color"] = local.borderColor;
-        return s;
-    };
-    const hasCustomSize = ()=>Boolean(local.width || local.maxWidth);
-    const hasCustomPadding = ()=>Boolean(local.padding);
-    const hasCustomBg = ()=>Boolean(local.bg);
     return (()=>{
         var _el$4 = _tmpl$2();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             role: "dialog",
-            "aria-modal": "true"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.dialog, local.side ? SIDE_MAP[local.side] : void 0, hasCustomBg() ? "drawer__dialog--custom-bg" : void 0, hasCustomSize() ? "drawer__dialog--custom-size" : void 0, hasCustomPadding() ? "drawer__dialog--custom-padding" : void 0, local.class, local.className)
-            }), {
+            "aria-modal": "true",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__dialog", local.class, local.className);
+            },
             "data-slot": "drawer-dialog",
             get ["data-placement"] () {
                 return ctx.placement();
@@ -278,7 +254,7 @@ const DrawerDialog = (props)=>{
                 return local.dataTheme;
             },
             get style () {
-                return mergedStyle();
+                return local.style;
             }
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
@@ -295,9 +271,10 @@ const DrawerHeader = (props)=>{
     ]);
     return (()=>{
         var _el$5 = _tmpl$2();
-        (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__Drawer_classes_js_756bbd15__.CLASSES.slot.header, 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)("drawer__header", local.class, local.className);
+            },
             "data-slot": "drawer-header",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -320,9 +297,10 @@ const DrawerHeading = (props)=>{
     ]);
     return (()=>{
         var _el$6 = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.heading, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__heading", local.class, local.className);
+            },
             "data-slot": "drawer-heading",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -345,9 +323,10 @@ const DrawerBody = (props)=>{
     ]);
     return (()=>{
         var _el$7 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.body, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__body", local.class, local.className);
+            },
             "data-slot": "drawer-body",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -372,9 +351,10 @@ const DrawerFooter = (props)=>{
     ]);
     return (()=>{
         var _el$8 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.footer, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__footer", local.class, local.className);
+            },
             "data-slot": "drawer-footer",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -397,10 +377,10 @@ const DrawerHandle = (props)=>{
     return (()=>{
         var _el$9 = _tmpl$4();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            "aria-hidden": "true"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.handle, local.class, local.className)
-            }), {
+            "aria-hidden": "true",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__handle", local.class, local.className);
+            },
             "data-slot": "drawer-handle",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -419,8 +399,6 @@ const DrawerCloseTrigger = (props)=>{
         "className",
         "dataTheme",
         "style",
-        "startIcon",
-        "endIcon",
         "onClick"
     ]);
     const ctx = useDrawerContext();
@@ -431,10 +409,10 @@ const DrawerCloseTrigger = (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, {
-            type: "button"
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.closeTrigger, local.class, local.className)
-            }), {
+            type: "button",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("drawer__close-trigger", local.class, local.className);
+            },
             "data-slot": "drawer-close-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -445,33 +423,17 @@ const DrawerCloseTrigger = (props)=>{
             "aria-label": "Close",
             onClick: handleClick
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (()=>{
-            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
-            return ()=>_c$() ? (()=>{
-                    var _el$1 = _tmpl$5();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.closeIcon, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.closeIconStart)
-                        }), {
-                        "data-slot": "drawer-close-trigger-start-icon"
-                    }), false, true);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.startIcon);
-                    return _el$1;
-                })() : null;
-        })(), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>local.children, null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (()=>{
-            var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
-            return ()=>_c$2() ? (()=>{
-                    var _el$10 = _tmpl$5();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.closeIcon, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.closeIconEnd)
-                        }), {
-                        "data-slot": "drawer-close-trigger-end-icon"
-                    }), false, true);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.endIcon);
-                    return _el$10;
-                })() : null;
-        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.children;
+            },
+            get fallback () {
+                return _tmpl$5();
+            },
+            get children () {
+                return local.children;
+            }
+        }));
         return _el$0;
     })();
 };
@@ -481,10 +443,10 @@ const DrawerClose = (props)=>{
         ctx.setIsOpen(false);
     };
     return (()=>{
-        var _el$11 = _tmpl$6();
-        _el$11.$$click = handleClick;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>props.children);
-        return _el$11;
+        var _el$10 = _tmpl$6();
+        _el$10.$$click = handleClick;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>props.children);
+        return _el$10;
     })();
 };
 const Drawer = Object.assign(DrawerRoot, {

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 DrawerBackdropVariant, type DrawerDialogSide, 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;