@pathscale/ui 2.5.0 → 2.6.1

package/dist/components/textarea/Textarea.generated.js

@@ -1,57 +1,46 @@
-import { mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Textarea.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Textarea.recipe.js";
 import { resolveState } from "../vocabulary.js";
 var _tmpl$ = /*#__PURE__*/ template("<textarea>");
 const __solidLayoutTextareaRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style",
-        "variant",
-        "fullWidth",
-        "issues",
-        "state",
-        "disabled"
-    ]);
-    const variant = ()=>local.variant ?? "primary";
-    const fullWidth = ()=>Boolean(local.fullWidth);
-    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues));
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, {
-            get ["class"] () {
-                return twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, local.class);
-            },
-            "data-slot": "textarea",
-            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;
-            },
-            get disabled () {
-                return isDisabled();
-            }
-        }), false, false);
-        return _el$;
-    })();
+    const others = omit(p, "class", "dataTheme", "style", "variant", "fullWidth", "issues", "state", "disabled");
+    const variant = ()=>p.variant ?? "primary";
+    const fullWidth = ()=>Boolean(p.fullWidth);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(p.state, p.issues));
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(others, {
+        get ["class"] () {
+            return twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, p.class);
+        },
+        "data-slot": "textarea",
+        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 p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get disabled () {
+            return isDisabled();
+        }
+    }), false);
+    return _el$;
 };
 const TextareaRoot = defineComponent({
     recipe: componentRecipe,

package/dist/components/textarea/Textarea.recipe.d.ts

@@ -8,7 +8,7 @@ export declare const CLASSES: {
         readonly fullWidth: "textarea--full-width";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "textarea";
     readonly slots: {
         readonly root: {};

package/dist/components/theme-color-picker/ThemeColorPicker.generated.d.ts

@@ -1,5 +1,5 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import { type JSX } from "solid-js";
+import { type JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 export type ThemeColorPickerAlign = "start" | "end";

package/dist/components/theme-color-picker/ThemeColorPicker.generated.js

@@ -1,7 +1,7 @@
-import { Portal, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { For, Show, createEffect, createMemo, createSignal, omit, onCleanup } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { ColorPickerContext, ColorWheelFlower } from "../color-wheel-flower/index.js";
 import { createColorFromHsl, parseColor } from "../color-wheel-flower/ColorUtils.js";
 import button_0 from "../button/index.js";
@@ -9,40 +9,28 @@ import icon from "../icon/index.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { createHueShiftStore } from "./hueShift.js";
 import { CLASSES, componentRecipe } from "./ThemeColorPicker.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><div></div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<button type=button>");
+var _tmpl$ = /*#__PURE__*/ template("<div><div></div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$4 = /*#__PURE__*/ template("<button>");
 function hexToColorValue(hex) {
     if (null === hex) return createColorFromHsl(0, 0, 100, 1);
     return parseColor(hex) ?? createColorFromHsl(0, 0, 100, 1);
 }
 const __solidLayoutThemeColorPicker = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "storagePrefix",
-        "onColorChange",
-        "onThemeSwitch",
-        "aria-label",
-        "align",
-        "placement",
-        "autoFlip",
-        "children",
-        "class",
-        "style",
-        "dataTheme"
-    ]);
+    const others = omit(p, "storagePrefix", "onColorChange", "onThemeSwitch", "aria-label", "align", "placement", "autoFlip", "children", "class", "style", "dataTheme");
     const [isOpen, setIsOpen] = createSignal(false);
     const [featureAvailable, setFeatureAvailable] = createSignal(true);
     const [containerRef, setContainerRef] = createSignal();
     const [popoverRef, setPopoverRef] = createSignal();
-    const store = createHueShiftStore(local.storagePrefix ?? "theme");
+    const store = createHueShiftStore(p.storagePrefix ?? "theme");
     const colorValue = createMemo(()=>hexToColorValue(store.themeColor()));
     const handleColorChange = (color)=>{
         const { s, l } = color.hsl;
         if (s < 10 && l > 90) {
             store.setThemeColor(null);
-            local.onColorChange?.(null, 100);
+            p.onColorChange?.(null, 100);
             return;
         }
         store.setThemeColor(color.hex);
-        local.onColorChange?.(color.hsl.h, color.hsl.s);
+        p.onColorChange?.(color.hsl.h, color.hsl.s);
     };
     const GRAYSCALE_SWATCHES = [
         {
@@ -77,9 +65,9 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
         }
     ];
     const handleGrayscale = (swatch)=>{
-        local.onThemeSwitch?.(swatch.theme);
+        p.onThemeSwitch?.(swatch.theme);
         store.setThemeColor(swatch.hex);
-        local.onColorChange?.(null, 0);
+        p.onColorChange?.(null, 0);
     };
     createEffect(()=>{
         if (!isOpen()) return;
@@ -113,16 +101,16 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
             onChange: handleColorChange,
             onFormatChange: ()=>{}
         });
-    const classes = ()=>twMerge(CLASSES.base, local.class);
+    const classes = ()=>twMerge(CLASSES.base, p.class);
     const popoverClasses = ()=>CLASSES.popover;
     const overlayPosition = createOverlayPosition({
         open: isOpen,
         triggerRef: containerRef,
         overlayRef: popoverRef,
-        placement: ()=>local.placement ?? "bottom",
+        placement: ()=>p.placement ?? "bottom",
         offset: ()=>8,
-        autoFlip: ()=>local.autoFlip ?? true,
-        align: ()=>"start" === local.align ? "start" : "end"
+        autoFlip: ()=>p.autoFlip ?? true,
+        align: ()=>"start" === p.align ? "start" : "end"
     });
     const popoverStyle = ()=>overlayPosition.style();
     return createComponent(Show, {
@@ -130,29 +118,29 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
             return featureAvailable();
         },
         get children () {
-            var _el$ = _tmpl$2();
-            use(setContainerRef, _el$);
+            var _el$ = _tmpl$3(), _el$6 = _el$.firstChild, _el$7 = _el$6.nextSibling;
+            ref(()=>setContainerRef, _el$);
             spread(_el$, mergeProps(()=>({
                     class: classes()
                 }), {
                 onKeyDown: handleKeyDown,
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }, others), false, true);
+            }, others), true);
             insert(_el$, createComponent(button_0, {
                 type: "button",
                 size: "sm",
                 variant: "ghost",
                 onClick: ()=>setIsOpen(!isOpen()),
                 get ["aria-label"] () {
-                    return local["aria-label"] ?? "Change theme color";
+                    return p["aria-label"] ?? "Change theme color";
                 },
                 get ["aria-expanded"] () {
-                    return isOpen();
+                    return isOpen() ? "true" : "false";
                 },
                 get children () {
-                    return local.children ?? createComponent(icon, mergeProps({
+                    return p.children ?? createComponent(icon, mergeProps({
                         src: "icon-[mdi--palette]",
                         width: 16,
                         height: 16
@@ -160,7 +148,7 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                             class: null !== store.themeColor() ? CLASSES.iconActive : void 0
                         })));
                 }
-            }), null);
+            }), _el$6);
             insert(_el$, createComponent(Show, {
                 get when () {
                     return isOpen();
@@ -169,7 +157,7 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                     return createComponent(Portal, {
                         get children () {
                             var _el$2 = _tmpl$2();
-                            use(setPopoverRef, _el$2);
+                            ref(()=>setPopoverRef, _el$2);
                             spread(_el$2, mergeProps(()=>({
                                     class: popoverClasses()
                                 }), {
@@ -179,8 +167,8 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                                 get style () {
                                     return popoverStyle();
                                 }
-                            }), false, true);
-                            insert(_el$2, createComponent(ColorPickerContext.Provider, {
+                            }), true);
+                            insert(_el$2, createComponent(ColorPickerContext, {
                                 get value () {
                                     return contextValue();
                                 },
@@ -188,21 +176,23 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                                     var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
                                     spread(_el$3, mergeProps(()=>({
                                             class: CLASSES.row
-                                        })), false, true);
+                                        })), true);
                                     spread(_el$4, mergeProps(()=>({
                                             class: CLASSES.wheelWrap
-                                        })), false, true);
+                                        })), true);
                                     insert(_el$4, createComponent(ColorWheelFlower, mergeProps(()=>({
                                             class: CLASSES.wheelCustom
                                         }))));
                                     spread(_el$5, mergeProps(()=>({
                                             class: CLASSES.grayscaleList
-                                        })), false, true);
+                                        })), true);
                                     insert(_el$5, createComponent(For, {
                                         each: GRAYSCALE_SWATCHES,
                                         children: (g)=>(()=>{
-                                                var _el$6 = _tmpl$3();
-                                                spread(_el$6, mergeProps(()=>({
+                                                var _el$8 = _tmpl$4();
+                                                spread(_el$8, mergeProps({
+                                                    type: "button"
+                                                }, ()=>({
                                                         class: CLASSES.swatchButton
                                                     }), {
                                                     get style () {
@@ -214,8 +204,8 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                                                         return g.label;
                                                     },
                                                     onClick: ()=>handleGrayscale(g)
-                                                }), false, false);
-                                                return _el$6;
+                                                }), false);
+                                                return _el$8;
                                             })()
                                     }));
                                     return _el$3;
@@ -225,7 +215,7 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                         }
                     });
                 }
-            }), null);
+            }), _el$7);
             return _el$;
         }
     });

package/dist/components/theme-color-picker/ThemeColorPicker.recipe.d.ts

@@ -10,7 +10,7 @@ export declare const CLASSES: {
     readonly grayscaleList: "flex flex-col gap-1.5";
     readonly swatchButton: "h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110";
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "theme-color-picker";
     readonly slots: {
         readonly root: {};

package/dist/components/theme-color-picker/hueShift.js

@@ -152,7 +152,13 @@ function createHueShiftStore(storagePrefix) {
         if (saved && parseHex(saved)) return saved;
         return null;
     };
-    const [themeColor, setThemeColorInternal] = createSignal(getInitial());
+    const initialThemeColor = getInitial();
+    const [themeColor, setThemeColorInternal] = createSignal(initialThemeColor);
+    const readThemeColor = themeColor;
+    const reapplyThemeColor = ()=>{
+        const color = readThemeColor();
+        if (null !== color) applyThemeColor(color);
+    };
     createEffect(()=>{
         const color = themeColor();
         if ("u" < typeof window) return;
@@ -166,10 +172,7 @@ function createHueShiftStore(storagePrefix) {
     });
     if ("u" > typeof window) {
         const observer = new MutationObserver((mutations)=>{
-            for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) requestAnimationFrame(()=>{
-                const color = themeColor();
-                if (null !== color) applyThemeColor(color);
-            });
+            for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) requestAnimationFrame(reapplyThemeColor);
         });
         observer.observe(document.documentElement, {
             attributes: true,

package/dist/components/time-field/TimeField.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./TimeField.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State, Issue } from "../vocabulary";
 export type TimeFieldVariant = "primary" | "secondary";
 export type TimeFieldRenderProps = {