@pathscale/ui 1.1.34 → 1.1.35

package/dist/components/search-field/SearchField.js

@@ -0,0 +1,303 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./SearchField.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__close_button_index_js_620c3b77__ from "../close-button/index.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)("<input>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const VARIANT_CLASS_MAP = {
+    primary: "search-field--primary",
+    secondary: "search-field--secondary"
+};
+const SearchFieldContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+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);
+};
+const SearchFieldRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "startIcon",
+        "endIcon",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "name",
+        "value",
+        "defaultValue",
+        "onChange",
+        "onBlur",
+        "fullWidth",
+        "variant",
+        "isDisabled",
+        "disabled",
+        "isInvalid"
+    ]);
+    const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultValue ?? "");
+    const isControlled = ()=>void 0 !== local.value;
+    const value = ()=>isControlled() ? local.value ?? "" : internalValue();
+    const isEmpty = ()=>0 === value().length;
+    const variant = ()=>local.variant ?? "primary";
+    const fullWidth = ()=>Boolean(local.fullWidth);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean(local.isInvalid);
+    const setValue = (nextValue)=>{
+        if (!isControlled()) setInternalValue(nextValue);
+        local.onChange?.(nextValue);
+    };
+    const renderProps = ()=>({
+            value: value(),
+            isEmpty: isEmpty(),
+            isInvalid: isInvalid(),
+            isDisabled: isDisabled()
+        });
+    const contextValue = {
+        value,
+        name: ()=>local.name,
+        variant,
+        fullWidth,
+        isDisabled,
+        isInvalid,
+        onBlur: ()=>local.onBlur,
+        setValue,
+        clearValue: ()=>setValue("")
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SearchFieldContext.Provider, {
+        value: contextValue,
+        get children () {
+            var _el$ = _tmpl$();
+            (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)("search-field", VARIANT_CLASS_MAP[variant()], fullWidth() && "search-field--full-width", local.class, local.className);
+                },
+                "data-slot": "search-field",
+                get ["data-empty"] () {
+                    return isEmpty() ? "true" : "false";
+                },
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+                var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"function" == typeof local.children);
+                return ()=>_c$() ? local.children(renderProps()) : (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.children)() ? local.children : (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SearchFieldGroup, {
+                        get children () {
+                            return [
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                    get when () {
+                                        return local.startIcon;
+                                    },
+                                    get children () {
+                                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SearchFieldSearchIcon, {
+                                            get children () {
+                                                return local.startIcon;
+                                            }
+                                        });
+                                    }
+                                }),
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SearchFieldInput, {}),
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                    get when () {
+                                        return local.endIcon;
+                                    },
+                                    get children () {
+                                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SearchFieldClearButton, {
+                                            get children () {
+                                                return local.endIcon;
+                                            }
+                                        });
+                                    }
+                                })
+                            ];
+                        }
+                    });
+            })());
+            return _el$;
+        }
+    });
+};
+const SearchFieldGroup = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SearchFieldContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const renderProps = ()=>({
+            value: context?.value() ?? "",
+            isEmpty: 0 === (context?.value() ?? "").length,
+            isInvalid: context?.isInvalid() ?? false,
+            isDisabled: context?.isDisabled() ?? false
+        });
+    return (()=>{
+        var _el$2 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("search-field__group", context?.fullWidth() && "search-field__group--full-width", local.class, local.className);
+            },
+            "data-slot": "search-field-group",
+            get ["data-invalid"] () {
+                return context?.isInvalid() ? "true" : void 0;
+            },
+            get ["data-disabled"] () {
+                return context?.isDisabled() ? "true" : void 0;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (()=>{
+            var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"function" == typeof local.children);
+            return ()=>_c$2() ? local.children(renderProps()) : local.children;
+        })());
+        return _el$2;
+    })();
+};
+const SearchFieldInput = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SearchFieldContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onInput",
+        "onBlur",
+        "name"
+    ]);
+    const handleInput = (event)=>{
+        invokeEventHandler(local.onInput, event);
+        if (event.defaultPrevented) return;
+        context?.setValue(event.currentTarget.value);
+    };
+    const handleBlur = (event)=>{
+        invokeEventHandler(local.onBlur, event);
+        invokeEventHandler(context?.onBlur(), event);
+    };
+    return (()=>{
+        var _el$3 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "search",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("search-field__input", local.class, local.className);
+            },
+            "data-slot": "search-field-input",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get name () {
+                return local.name ?? context?.name();
+            },
+            get value () {
+                return context?.value() ?? "";
+            },
+            get disabled () {
+                return context?.isDisabled();
+            },
+            get ["aria-invalid"] () {
+                return context?.isInvalid() ? "true" : void 0;
+            },
+            get ["aria-disabled"] () {
+                return context?.isDisabled() ? "true" : void 0;
+            },
+            onInput: handleInput,
+            onBlur: handleBlur
+        }), false, false);
+        return _el$3;
+    })();
+};
+const SearchFieldSearchIcon = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    if (!local.children) return null;
+    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)("search-field__search-icon", local.class, local.className);
+            },
+            "data-slot": "search-field-search-icon",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const SearchFieldClearButton = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SearchFieldContext);
+    const hasIcon = ()=>null != props.children || null != props.startIcon || null != props.endIcon;
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick"
+    ]);
+    if (!hasIcon()) return null;
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        context?.clearValue();
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__close_button_index_js_620c3b77__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("search-field__clear-button", local.class, local.className);
+        },
+        "data-slot": "search-field-clear-button",
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get style () {
+            return local.style;
+        },
+        slot: "clear",
+        get ["aria-label"] () {
+            return props["aria-label"] ?? "Clear search";
+        },
+        get isDisabled () {
+            return context?.isDisabled();
+        },
+        onClick: handleClick
+    }));
+};
+const SearchField_SearchField = Object.assign(SearchFieldRoot, {
+    Root: SearchFieldRoot,
+    Group: SearchFieldGroup,
+    Input: SearchFieldInput,
+    SearchIcon: SearchFieldSearchIcon,
+    ClearButton: SearchFieldClearButton
+});
+const SearchField = SearchField_SearchField;
+export { SearchField_SearchField as SearchField, SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldRoot, SearchFieldSearchIcon, SearchField as default };

package/dist/components/search-field/index.d.ts

@@ -0,0 +1 @@
+export { default, SearchField, SearchFieldRoot, SearchFieldGroup, SearchFieldInput, SearchFieldSearchIcon, SearchFieldClearButton, type SearchFieldProps, type SearchFieldRootProps, type SearchFieldGroupProps, type SearchFieldInputProps, type SearchFieldSearchIconProps, type SearchFieldClearButtonProps, type SearchFieldVariant, type SearchFieldRenderProps, } from "./SearchField";

package/dist/components/search-field/index.js

@@ -0,0 +1,9 @@
+import * as __WEBPACK_EXTERNAL_MODULE__SearchField_js_abba5c84__ from "./SearchField.js";
+var __webpack_exports__SearchField = __WEBPACK_EXTERNAL_MODULE__SearchField_js_abba5c84__.SearchField;
+var __webpack_exports__SearchFieldClearButton = __WEBPACK_EXTERNAL_MODULE__SearchField_js_abba5c84__.SearchFieldClearButton;
+var __webpack_exports__SearchFieldGroup = __WEBPACK_EXTERNAL_MODULE__SearchField_js_abba5c84__.SearchFieldGroup;
+var __webpack_exports__SearchFieldInput = __WEBPACK_EXTERNAL_MODULE__SearchField_js_abba5c84__.SearchFieldInput;
+var __webpack_exports__SearchFieldRoot = __WEBPACK_EXTERNAL_MODULE__SearchField_js_abba5c84__.SearchFieldRoot;
+var __webpack_exports__SearchFieldSearchIcon = __WEBPACK_EXTERNAL_MODULE__SearchField_js_abba5c84__.SearchFieldSearchIcon;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__SearchField_js_abba5c84__["default"];
+export { __webpack_exports__SearchField as SearchField, __webpack_exports__SearchFieldClearButton as SearchFieldClearButton, __webpack_exports__SearchFieldGroup as SearchFieldGroup, __webpack_exports__SearchFieldInput as SearchFieldInput, __webpack_exports__SearchFieldRoot as SearchFieldRoot, __webpack_exports__SearchFieldSearchIcon as SearchFieldSearchIcon, __webpack_exports__default as default };

package/dist/components/select/Select.css

@@ -109,16 +109,27 @@
       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;
@@ -206,11 +217,6 @@
       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,15 +23,23 @@ export type SelectRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
 };
-export type SelectTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & IComponentBaseProps;
+export type SelectTriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & IComponentBaseProps & {
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+};
 export type SelectValueProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
-export type SelectIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
+export type SelectIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+};
 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,7 +2,7 @@ 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>');
+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 class="ui-select__icon ui-select__icon--start"data-slot=ui-select-trigger-start-icon>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="ui-select__icon ui-select__icon--end"data-slot=ui-select-trigger-end-icon>'), _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 class="ui-select__icon ui-select__icon--start"data-slot=ui-select-indicator-start-icon>'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="ui-select__icon ui-select__icon--end"data-slot=ui-select-indicator-end-icon>'), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="ui-select__icon ui-select__icon--start"data-slot=ui-select-option-start-icon>'), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class=ui-select__option-indicator data-slot=ui-select-option-indicator aria-hidden=true><span class="ui-select__icon ui-select__icon--end"data-slot=ui-select-option-end-icon>'), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button><span class=ui-select__option-label data-slot=ui-select-option-label>");
 const SelectContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const SELECT_VARIANT_CLASS_MAP = {
     primary: "ui-select--primary",
@@ -258,6 +258,8 @@ const SelectTrigger = (props)=>{
         "className",
         "dataTheme",
         "disabled",
+        "startIcon",
+        "endIcon",
         "onClick",
         "onKeyDown",
         "ref",
@@ -276,7 +278,23 @@ 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__.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$4();
+                    (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,9 +339,9 @@ 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;
             },
@@ -356,8 +374,24 @@ 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__.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$4();
+                    (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,8 +406,8 @@ 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, {
+        var _el$8 = _tmpl$5();
+        (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)("ui-select__value", local.class, local.className);
             },
@@ -385,8 +419,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,11 +429,13 @@ 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, {
+        var _el$9 = _tmpl$5();
+        (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__indicator", local.class, local.className);
             },
@@ -412,8 +448,24 @@ 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$6();
+                    (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$7();
+                    (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,8 +477,8 @@ 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, {
+        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, {
             get ["class"] () {
                 return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__popover", local.class, local.className);
             },
@@ -438,8 +490,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,8 +503,8 @@ 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;
             },
@@ -469,8 +521,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 +536,8 @@ const SelectOption = (props)=>{
         "textValue",
         "isDisabled",
         "disabled",
+        "startIcon",
+        "endIcon",
         "onClick",
         "onKeyDown",
         "onMouseEnter",
@@ -491,8 +545,8 @@ 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, {
+        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, {
             get ["class"] () {
                 return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__option", local.class, local.className);
             },
@@ -503,8 +557,24 @@ 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$8();
+                    (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$9(), _el$15 = _el$14.firstChild;
+                    (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,9 +654,9 @@ 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$0(), _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";
             },
@@ -622,8 +692,24 @@ 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$8();
+                    (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__.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$9(), _el$20 = _el$19.firstChild;
+                    (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, {