@pathscale/ui 1.1.56 → 1.1.58

package/dist/components/select/Select.js

@@ -2,12 +2,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Select.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-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)("<span>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg viewBox="0 0 20 20"fill=none stroke=currentColor stroke-width=1.75><path d="M5 7.5L10 12.5L15 7.5"stroke-linecap=round stroke-linejoin=round>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button><span class=ui-select__option-label data-slot=ui-select-option-label></span><span class=ui-select__option-indicator data-slot=ui-select-option-indicator aria-hidden=true><svg viewBox="0 0 20 20"fill=none stroke=currentColor stroke-width=2><path d="M5.5 10.5L8.5 13.5L14.5 7.5"stroke-linecap=round stroke-linejoin=round>');
+import * as __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__ from "./Select.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)("<span>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span><span>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button><span>");
 const SelectContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
-const SELECT_VARIANT_CLASS_MAP = {
-    primary: "ui-select--primary",
-    secondary: "ui-select--secondary"
-};
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
@@ -227,10 +224,9 @@ const SelectRoot = (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, {
-                get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select", SELECT_VARIANT_CLASS_MAP[variant()], fullWidth() && "ui-select--full-width", local.class, local.className);
-                },
+            (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__Select_classes_js_98857364__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.variant[variant()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.flag.fullWidth, local.class, local.className)
+                }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },
@@ -258,6 +254,8 @@ const SelectTrigger = (props)=>{
         "className",
         "dataTheme",
         "disabled",
+        "startIcon",
+        "endIcon",
         "onClick",
         "onKeyDown",
         "ref",
@@ -265,10 +263,9 @@ const SelectTrigger = (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, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__trigger", 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, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.trigger, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -276,7 +273,33 @@ const SelectTrigger = (props)=>{
                 return local.type ?? "button";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
+            return ()=>_c$() ? (()=>{
+                    var _el$3 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-trigger-start-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.startIcon);
+                    return _el$3;
+                })() : null;
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (()=>{
+            var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
+            return ()=>_c$2() ? (()=>{
+                    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)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-trigger-end-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.endIcon);
+                    return _el$4;
+                })() : null;
+        })(), null);
         return _el$2;
     })();
     const isDisabled = ()=>Boolean(local.disabled) || ctx.disabled();
@@ -321,18 +344,18 @@ const SelectTrigger = (props)=>{
         }
     };
     return (()=>{
-        var _el$3 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$3);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        var _el$5 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get id () {
                 return ctx.triggerId;
             },
             get type () {
                 return local.type ?? "button";
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__trigger", ctx.fullWidth() && "ui-select__trigger--full-width", local.class, local.className);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.trigger, ctx.fullWidth() && __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.triggerFullWidth, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -356,8 +379,34 @@ const SelectTrigger = (props)=>{
             onClick: handleClick,
             onKeyDown: handleKeyDown
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
-        return _el$3;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (()=>{
+            var _c$3 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
+            return ()=>_c$3() ? (()=>{
+                    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)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-trigger-start-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.startIcon);
+                    return _el$6;
+                })() : null;
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (()=>{
+            var _c$4 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
+            return ()=>_c$4() ? (()=>{
+                    var _el$7 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-trigger-end-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.endIcon);
+                    return _el$7;
+                })() : null;
+        })(), null);
+        return _el$5;
     })();
 };
 const SelectValue = (props)=>{
@@ -372,11 +421,10 @@ const SelectValue = (props)=>{
     const text = ()=>ctx?.selectedText() ?? "";
     const isPlaceholder = ()=>0 === text().length;
     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, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__value", local.class, local.className);
-            },
+        var _el$8 = _tmpl$3();
+        (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__Select_classes_js_98857364__.CLASSES.slot.value, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -385,8 +433,8 @@ const SelectValue = (props)=>{
                 return isPlaceholder() ? "true" : "false";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children ?? (isPlaceholder() ? placeholder() : text()));
-        return _el$4;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children ?? (isPlaceholder() ? placeholder() : text()));
+        return _el$8;
     })();
 };
 const SelectIndicator = (props)=>{
@@ -395,14 +443,15 @@ const SelectIndicator = (props)=>{
         "children",
         "class",
         "className",
-        "dataTheme"
+        "dataTheme",
+        "startIcon",
+        "endIcon"
     ]);
     return (()=>{
-        var _el$5 = _tmpl$3();
-        (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)("ui-select__indicator", local.class, local.className);
-            },
+        var _el$9 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.indicator, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -412,8 +461,34 @@ const SelectIndicator = (props)=>{
             },
             "aria-hidden": "true"
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children ?? _tmpl$4());
-        return _el$5;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (()=>{
+            var _c$5 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
+            return ()=>_c$5() ? (()=>{
+                    var _el$0 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-indicator-start-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>local.startIcon);
+                    return _el$0;
+                })() : null;
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (()=>{
+            var _c$6 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
+            return ()=>_c$6() ? (()=>{
+                    var _el$1 = _tmpl$3();
+                    (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__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-indicator-end-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.endIcon);
+                    return _el$1;
+                })() : null;
+        })(), null);
+        return _el$9;
     })();
 };
 const SelectPopover = (props)=>{
@@ -425,11 +500,10 @@ const SelectPopover = (props)=>{
         "dataTheme"
     ]);
     return (()=>{
-        var _el$7 = _tmpl$();
-        (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)("ui-select__popover", local.class, local.className);
-            },
+        var _el$10 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.popover, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -438,8 +512,8 @@ const SelectPopover = (props)=>{
                 return ctx?.open() ? "true" : "false";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
-        return _el$7;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.children);
+        return _el$10;
     })();
 };
 const SelectListbox = (props)=>{
@@ -451,14 +525,14 @@ const SelectListbox = (props)=>{
         "dataTheme"
     ]);
     return (()=>{
-        var _el$8 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        var _el$11 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get id () {
                 return ctx?.listboxId;
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__listbox", local.class, local.className);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.listbox, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -469,8 +543,8 @@ const SelectListbox = (props)=>{
             },
             tabindex: -1
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
-        return _el$8;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>local.children);
+        return _el$11;
     })();
 };
 const SelectOption = (props)=>{
@@ -484,6 +558,8 @@ const SelectOption = (props)=>{
         "textValue",
         "isDisabled",
         "disabled",
+        "startIcon",
+        "endIcon",
         "onClick",
         "onKeyDown",
         "onMouseEnter",
@@ -491,11 +567,10 @@ const SelectOption = (props)=>{
         "type"
     ]);
     if (!ctx) return (()=>{
-        var _el$9 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__option", local.class, local.className);
-            },
+        var _el$12 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.option, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -503,8 +578,40 @@ const SelectOption = (props)=>{
                 return local.type ?? "button";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
-        return _el$9;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, (()=>{
+            var _c$7 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
+            return ()=>_c$7() ? (()=>{
+                    var _el$13 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-option-start-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, ()=>local.startIcon);
+                    return _el$13;
+                })() : null;
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, (()=>{
+            var _c$8 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
+            return ()=>_c$8() ? (()=>{
+                    var _el$14 = _tmpl$4(), _el$15 = _el$14.firstChild;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.optionIndicator
+                        }), {
+                        "data-slot": "ui-select-option-indicator",
+                        "aria-hidden": "true"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$15, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-option-end-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$15, ()=>local.endIcon);
+                    return _el$14;
+                })() : null;
+        })(), null);
+        return _el$12;
     })();
     const key = ()=>String(local.value);
     const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || ctx.disabled();
@@ -584,15 +691,15 @@ const SelectOption = (props)=>{
         if ("Tab" === event.key) ctx.setOpen(false);
     };
     return (()=>{
-        var _el$0 = _tmpl$5(), _el$1 = _el$0.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$0);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$16);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$16, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get type () {
                 return local.type ?? "button";
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__option", local.class, local.className);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.option, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -622,8 +729,45 @@ const SelectOption = (props)=>{
             onFocus: ()=>ctx.setFocusedKey(key()),
             onKeyDown: handleKeyDown
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.children);
-        return _el$0;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, (()=>{
+            var _c$9 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
+            return ()=>_c$9() ? (()=>{
+                    var _el$18 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$18, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-option-start-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$18, ()=>local.startIcon);
+                    return _el$18;
+                })() : null;
+        })(), _el$17);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$17, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.optionLabel
+            }), {
+            "data-slot": "ui-select-option-label"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$17, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, (()=>{
+            var _c$0 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
+            return ()=>_c$0() ? (()=>{
+                    var _el$19 = _tmpl$4(), _el$20 = _el$19.firstChild;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$19, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.optionIndicator
+                        }), {
+                        "data-slot": "ui-select-option-indicator",
+                        "aria-hidden": "true"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$20, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-option-end-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$20, ()=>local.endIcon);
+                    return _el$19;
+                })() : null;
+        })(), null);
+        return _el$16;
     })();
 };
 const Select = Object.assign(SelectRoot, {

package/dist/components/separator/Separator.classes.d.ts

@@ -0,0 +1,12 @@
+export declare const CLASSES: {
+    readonly base: "separator";
+    readonly orientation: {
+        readonly horizontal: "separator--horizontal";
+        readonly vertical: "separator--vertical";
+    };
+    readonly variant: {
+        readonly default: "separator--default";
+        readonly secondary: "separator--secondary";
+        readonly tertiary: "separator--tertiary";
+    };
+};

package/dist/components/separator/Separator.classes.js

@@ -0,0 +1,13 @@
+const CLASSES = {
+    base: "separator",
+    orientation: {
+        horizontal: "separator--horizontal",
+        vertical: "separator--vertical"
+    },
+    variant: {
+        default: "separator--default",
+        secondary: "separator--secondary",
+        tertiary: "separator--tertiary"
+    }
+};
+export { CLASSES };

package/dist/components/separator/Separator.css

@@ -0,0 +1,35 @@
+@layer components {
+  .separator {
+    display: block;
+    flex-shrink: 0;
+    border-radius: 0.25rem;
+
+    --separator-color: var(--color-separator, var(--color-base-300));
+
+    background-color: var(--separator-color);
+  }
+
+  .separator--horizontal {
+    width: 100%;
+    height: 1px;
+  }
+
+  .separator--vertical {
+    width: 1px;
+    height: auto;
+    min-height: 0.5rem;
+    align-self: stretch;
+  }
+
+  .separator--default {
+    --separator-color: var(--color-separator, var(--color-base-300));
+  }
+
+  .separator--secondary {
+    --separator-color: var(--color-separator-secondary, var(--color-base-300));
+  }
+
+  .separator--tertiary {
+    --separator-color: var(--color-separator-tertiary, var(--color-base-200));
+  }
+}

package/dist/components/separator/Separator.d.ts

@@ -0,0 +1,12 @@
+import "./Separator.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorVariant = "default" | "secondary" | "tertiary";
+export type SeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    orientation?: SeparatorOrientation;
+    variant?: SeparatorVariant;
+};
+declare const Separator: Component<SeparatorProps>;
+export default Separator;
+export { Separator };

package/dist/components/separator/Separator.js

@@ -0,0 +1,49 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Separator.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__Separator_classes_js_876f4d4e__ from "./Separator.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Separator_Separator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "orientation",
+        "variant",
+        "role"
+    ]);
+    const orientation = ()=>local.orientation ?? "horizontal";
+    const variant = ()=>local.variant ?? "default";
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get role () {
+                return local.role ?? "separator";
+            },
+            get ["aria-orientation"] () {
+                return orientation();
+            },
+            "data-slot": "separator",
+            get ["data-orientation"] () {
+                return orientation();
+            },
+            get ["data-variant"] () {
+                return variant();
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Separator_classes_js_876f4d4e__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Separator_classes_js_876f4d4e__.CLASSES.orientation[orientation()], __WEBPACK_EXTERNAL_MODULE__Separator_classes_js_876f4d4e__.CLASSES.variant[variant()], local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const Separator = Separator_Separator;
+export { Separator_Separator as Separator, Separator as default };

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

@@ -0,0 +1 @@
+export { default, Separator, type SeparatorProps, type SeparatorOrientation, type SeparatorVariant, } from "./Separator";

package/dist/components/separator/index.js

@@ -0,0 +1,4 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Separator_js_c4a9d2eb__ from "./Separator.js";
+var __webpack_exports__Separator = __WEBPACK_EXTERNAL_MODULE__Separator_js_c4a9d2eb__.Separator;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Separator_js_c4a9d2eb__["default"];
+export { __webpack_exports__Separator as Separator, __webpack_exports__default as default };

package/dist/components/size-picker/SizePicker.classes.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "inline-flex gap-1";
+};

package/dist/components/size-picker/SizePicker.classes.js

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: "inline-flex gap-1"
+};
+export { CLASSES };

package/dist/components/size-picker/SizePicker.js

@@ -4,7 +4,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-m
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__sizeStore_js_308b1735__ from "./sizeStore.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=radiogroup>");
+import * as __WEBPACK_EXTERNAL_MODULE__SizePicker_classes_js_e21f4008__ from "./SizePicker.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const PRESETS = [
     "M",
     "L",
@@ -25,16 +26,16 @@ const SizePicker_SizePicker = (props)=>{
         store().setSize(preset);
         local.onSizeChange?.(preset);
     };
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("inline-flex gap-1", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__SizePicker_classes_js_e21f4008__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return classes();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: classes()
+            }), {
             get style () {
                 return local.style;
             },
+            role: "radiogroup",
             get ["aria-label"] () {
                 return local["aria-label"] ?? "Change text size";
             }

package/dist/components/skeleton/Skeleton.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly base: "skeleton";
+    readonly animation: {
+        readonly shimmer: "skeleton--shimmer";
+        readonly pulse: "skeleton--pulse";
+        readonly none: "skeleton--none";
+    };
+};

package/dist/components/skeleton/Skeleton.classes.js

@@ -0,0 +1,9 @@
+const CLASSES = {
+    base: "skeleton",
+    animation: {
+        shimmer: "skeleton--shimmer",
+        pulse: "skeleton--pulse",
+        none: "skeleton--none"
+    }
+};
+export { CLASSES };