@pathscale/ui 1.1.54 → 1.1.56

package/dist/components/select/Select.css

@@ -109,27 +109,16 @@
       color 150ms ease;
   }
 
+  .ui-select__indicator svg {
+    width: 100%;
+    height: 100%;
+  }
+
   .ui-select__indicator[data-open="true"] {
     transform: rotate(180deg);
     color: var(--color-base-content);
   }
 
-  .ui-select__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
-    pointer-events: none;
-  }
-
-  .ui-select__icon > * {
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
   .ui-select__popover {
     display: none;
     position: absolute;
@@ -217,6 +206,11 @@
       transform 150ms ease;
   }
 
+  .ui-select__option-indicator svg {
+    width: 100%;
+    height: 100%;
+  }
+
   .ui-select__option[data-selected="true"] .ui-select__option-indicator {
     opacity: 1;
     transform: scale(1);

package/dist/components/select/Select.d.ts

@@ -23,23 +23,15 @@ export type SelectRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 };
-export type SelectTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & IComponentBaseProps & {
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
-};
+export type SelectTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & IComponentBaseProps;
 export type SelectValueProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
-export type SelectIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
-};
+export type SelectIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
 export type SelectPopoverProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
 export type SelectListboxProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
 export type SelectOptionProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "value"> & IComponentBaseProps & {
     value: SelectKey;
     textValue?: string;
     isDisabled?: boolean;
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
 };
 export type SelectProps = SelectRootProps;
 type SelectComponent = Component<SelectRootProps> & {

package/dist/components/select/Select.js

@@ -2,9 +2,12 @@ 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";
-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>");
+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>');
 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);
@@ -224,9 +227,10 @@ 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, ()=>({
-                    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)
-                }), {
+            (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);
+                },
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },
@@ -254,8 +258,6 @@ const SelectTrigger = (props)=>{
         "className",
         "dataTheme",
         "disabled",
-        "startIcon",
-        "endIcon",
         "onClick",
         "onKeyDown",
         "ref",
@@ -263,9 +265,10 @@ 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, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.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, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__trigger", local.class, local.className);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -273,33 +276,7 @@ const SelectTrigger = (props)=>{
                 return local.type ?? "button";
             }
         }), false, true);
-        (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);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
         return _el$2;
     })();
     const isDisabled = ()=>Boolean(local.disabled) || ctx.disabled();
@@ -344,18 +321,18 @@ const SelectTrigger = (props)=>{
         }
     };
     return (()=>{
-        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, {
+        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, {
             get id () {
                 return ctx.triggerId;
             },
             get type () {
                 return local.type ?? "button";
-            }
-        }, ()=>({
-                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 ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__trigger", ctx.fullWidth() && "ui-select__trigger--full-width", local.class, local.className);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -379,34 +356,8 @@ const SelectTrigger = (props)=>{
             onClick: handleClick,
             onKeyDown: handleKeyDown
         }), false, true);
-        (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;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
     })();
 };
 const SelectValue = (props)=>{
@@ -421,10 +372,11 @@ const SelectValue = (props)=>{
     const text = ()=>ctx?.selectedText() ?? "";
     const isPlaceholder = ()=>0 === text().length;
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -433,8 +385,8 @@ const SelectValue = (props)=>{
                 return isPlaceholder() ? "true" : "false";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children ?? (isPlaceholder() ? placeholder() : text()));
-        return _el$8;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children ?? (isPlaceholder() ? placeholder() : text()));
+        return _el$4;
     })();
 };
 const SelectIndicator = (props)=>{
@@ -443,15 +395,14 @@ const SelectIndicator = (props)=>{
         "children",
         "class",
         "className",
-        "dataTheme",
-        "startIcon",
-        "endIcon"
+        "dataTheme"
     ]);
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -461,34 +412,8 @@ const SelectIndicator = (props)=>{
             },
             "aria-hidden": "true"
         }), false, true);
-        (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;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children ?? _tmpl$4());
+        return _el$5;
     })();
 };
 const SelectPopover = (props)=>{
@@ -500,10 +425,11 @@ const SelectPopover = (props)=>{
         "dataTheme"
     ]);
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -512,8 +438,8 @@ const SelectPopover = (props)=>{
                 return ctx?.open() ? "true" : "false";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.children);
-        return _el$10;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
     })();
 };
 const SelectListbox = (props)=>{
@@ -525,14 +451,14 @@ const SelectListbox = (props)=>{
         "dataTheme"
     ]);
     return (()=>{
-        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, {
+        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, {
             get id () {
                 return ctx?.listboxId;
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.listbox, local.class, local.className)
-            }), {
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__listbox", local.class, local.className);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -543,8 +469,8 @@ const SelectListbox = (props)=>{
             },
             tabindex: -1
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>local.children);
-        return _el$11;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        return _el$8;
     })();
 };
 const SelectOption = (props)=>{
@@ -558,8 +484,6 @@ const SelectOption = (props)=>{
         "textValue",
         "isDisabled",
         "disabled",
-        "startIcon",
-        "endIcon",
         "onClick",
         "onKeyDown",
         "onMouseEnter",
@@ -567,10 +491,11 @@ const SelectOption = (props)=>{
         "type"
     ]);
     if (!ctx) return (()=>{
-        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)
-            }), {
+        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);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -578,40 +503,8 @@ const SelectOption = (props)=>{
                 return local.type ?? "button";
             }
         }), false, true);
-        (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;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
+        return _el$9;
     })();
     const key = ()=>String(local.value);
     const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || ctx.disabled();
@@ -691,15 +584,15 @@ const SelectOption = (props)=>{
         if ("Tab" === event.key) ctx.setOpen(false);
     };
     return (()=>{
-        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, {
+        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, {
             get type () {
                 return local.type ?? "button";
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.option, local.class, local.className)
-            }), {
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__option", local.class, local.className);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -729,45 +622,8 @@ const SelectOption = (props)=>{
             onFocus: ()=>ctx.setFocusedKey(key()),
             onKeyDown: handleKeyDown
         }), false, true);
-        (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;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.children);
+        return _el$0;
     })();
 };
 const Select = Object.assign(SelectRoot, {

package/dist/components/showcase/ShowcaseBlock.d.ts

@@ -0,0 +1,10 @@
+import { type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export interface ShowcaseBlockProps extends IComponentBaseProps {
+    title: string;
+    description?: string;
+    code?: string;
+    preview?: boolean;
+}
+declare const ShowcaseBlock: ParentComponent<ShowcaseBlockProps>;
+export default ShowcaseBlock;

package/dist/components/showcase/ShowcaseBlock.js

@@ -0,0 +1,48 @@
+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__flex_index_js_d26fd801__ from "../flex/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<p class="text-base-content/70 mb-4">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="bg-base-200 shadow-sm p-6 rounded-lg"><h3 class="text-lg font-semibold mb-2 text-base-content"></h3><div>');
+const ShowcaseBlock = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "title",
+        "description",
+        "code",
+        "preview",
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const previewClass = local.preview ? "border bg-base-100 border-base-content/15 p-8 rounded-lg" : "";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        direction: "col",
+        gap: "md"
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className);
+        },
+        get children () {
+            var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.title);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return local.description;
+                },
+                get children () {
+                    var _el$3 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.description);
+                    return _el$3;
+                }
+            }), _el$4);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, previewClass);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+            return _el$;
+        }
+    }));
+};
+const showcase_ShowcaseBlock = ShowcaseBlock;
+export { showcase_ShowcaseBlock as default };

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

@@ -0,0 +1,2 @@
+export { default } from "./ShowcaseBlock";
+export type { ShowcaseBlockProps } from "./ShowcaseBlock";

package/dist/components/showcase/index.js

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

package/dist/components/showcase-section/ShowcaseSection.d.ts

@@ -0,0 +1,8 @@
+import { type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export interface ShowcaseSectionProps extends IComponentBaseProps {
+    id: string;
+    title: string;
+}
+declare const ShowcaseSection: ParentComponent<ShowcaseSectionProps>;
+export default ShowcaseSection;