@pathscale/ui 1.1.56 → 1.1.57

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

@@ -0,0 +1,296 @@
+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";
+import * as __WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__ from "./SearchField.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)("<input>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+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, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__.CLASSES.Root.variant[variant()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__.CLASSES.Root.flag.fullWidth, 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, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__.CLASSES.Group.base, context?.fullWidth() && __WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__.CLASSES.Group.flag.fullWidth, 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"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__.CLASSES.Input.base, 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, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__.CLASSES.SearchIcon.base, 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, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__SearchField_classes_js_2445054e__.CLASSES.ClearButton.base, 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.classes.d.ts

@@ -0,0 +1,24 @@
+export declare const CLASSES: {
+    readonly base: "ui-select";
+    readonly flag: {
+        readonly fullWidth: "ui-select--full-width";
+    };
+    readonly variant: {
+        readonly primary: "ui-select--primary";
+        readonly secondary: "ui-select--secondary";
+    };
+    readonly slot: {
+        readonly trigger: "ui-select__trigger";
+        readonly triggerFullWidth: "ui-select__trigger--full-width";
+        readonly value: "ui-select__value";
+        readonly indicator: "ui-select__indicator";
+        readonly icon: "ui-select__icon";
+        readonly iconStart: "ui-select__icon--start";
+        readonly iconEnd: "ui-select__icon--end";
+        readonly popover: "ui-select__popover";
+        readonly listbox: "ui-select__listbox";
+        readonly option: "ui-select__option";
+        readonly optionLabel: "ui-select__option-label";
+        readonly optionIndicator: "ui-select__option-indicator";
+    };
+};

package/dist/components/select/Select.classes.js

@@ -0,0 +1,25 @@
+const CLASSES = {
+    base: "ui-select",
+    flag: {
+        fullWidth: "ui-select--full-width"
+    },
+    variant: {
+        primary: "ui-select--primary",
+        secondary: "ui-select--secondary"
+    },
+    slot: {
+        trigger: "ui-select__trigger",
+        triggerFullWidth: "ui-select__trigger--full-width",
+        value: "ui-select__value",
+        indicator: "ui-select__indicator",
+        icon: "ui-select__icon",
+        iconStart: "ui-select__icon--start",
+        iconEnd: "ui-select__icon--end",
+        popover: "ui-select__popover",
+        listbox: "ui-select__listbox",
+        option: "ui-select__option",
+        optionLabel: "ui-select__option-label",
+        optionIndicator: "ui-select__option-indicator"
+    }
+};
+export { CLASSES };

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> & {