@pathscale/ui 2.4.0 → 2.6.0

package/dist/components/color-field/ColorField.generated.js

@@ -1,8 +1,8 @@
-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 "./ColorField.css";
-import { createEffect, createSignal, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createEffect, createSignal, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { formatColor, parseColor } from "../color-wheel-flower/ColorUtils.js";
 import { CLASSES, componentRecipe } from "./ColorField.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><div><input>");
@@ -18,25 +18,11 @@ const normalizeColor = (value, format)=>{
     return "hex" === format ? formatted.toUpperCase() : formatted;
 };
 const __solidLayoutColorField = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "value",
-        "defaultValue",
-        "onChange",
-        "state",
-        "disabled",
-        "format",
-        "fullWidth",
-        "dataTheme",
-        "onInput",
-        "onBlur",
-        "onFocus",
-        "onKeyDown"
-    ]);
-    const format = ()=>local.format ?? "hex";
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
+    const others = omit(p, "class", "value", "defaultValue", "onChange", "state", "disabled", "format", "fullWidth", "dataTheme", "onInput", "onBlur", "onFocus", "onKeyDown");
+    const format = ()=>p.format ?? "hex";
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
     const initialValue = ()=>{
-        const seed = local.value ?? local.defaultValue ?? FALLBACK_COLOR;
+        const seed = p.value ?? p.defaultValue ?? FALLBACK_COLOR;
         return normalizeColor(seed, format()) ?? FALLBACK_COLOR;
     };
     const [inputValue, setInputValue] = createSignal(initialValue());
@@ -44,7 +30,7 @@ const __solidLayoutColorField = (_stable, p)=>{
     const [isInvalid, setIsInvalid] = createSignal(false);
     const [isFocused, setIsFocused] = createSignal(false);
     createEffect(()=>{
-        const nextValue = local.value;
+        const nextValue = p.value;
         const nextFormat = format();
         if (isFocused()) return;
         if (void 0 !== nextValue) {
@@ -62,7 +48,7 @@ const __solidLayoutColorField = (_stable, p)=>{
     const emitIfValid = (value)=>{
         const normalized = normalizeColor(value, format());
         if (!normalized) return null;
-        local.onChange?.(normalized);
+        p.onChange?.(normalized);
         return normalized;
     };
     const commit = ()=>{
@@ -77,7 +63,7 @@ const __solidLayoutColorField = (_stable, p)=>{
         setIsInvalid(false);
     };
     const handleInput = (event)=>{
-        invokeEventHandler(local.onInput, event);
+        invokeEventHandler(p.onInput, event);
         if (event.defaultPrevented) return;
         const raw = event.currentTarget.value;
         setInputValue(raw);
@@ -90,18 +76,18 @@ const __solidLayoutColorField = (_stable, p)=>{
         setIsInvalid(raw.trim().length > 0);
     };
     const handleBlur = (event)=>{
-        invokeEventHandler(local.onBlur, event);
+        invokeEventHandler(p.onBlur, event);
         setIsFocused(false);
         if (event.defaultPrevented) return;
         commit();
     };
     const handleFocus = (event)=>{
-        invokeEventHandler(local.onFocus, event);
+        invokeEventHandler(p.onFocus, event);
         if (event.defaultPrevented) return;
         setIsFocused(true);
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented) return;
         if ("Enter" === event.key) {
             event.preventDefault();
@@ -114,62 +100,60 @@ const __solidLayoutColorField = (_stable, p)=>{
             event.currentTarget.blur();
         }
     };
-    return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-        spread(_el$, mergeProps(()=>({
-                class: twMerge(CLASSES.base, local.fullWidth && CLASSES.flag.fullWidth, isDisabled() && CLASSES.flag.disabled, local.class)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "color-field",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-invalid"] () {
-                return isInvalid() ? "true" : "false";
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            }
-        }), false, true);
-        spread(_el$2, mergeProps(()=>({
-                class: twMerge(CLASSES.slot.group, isInvalid() && CLASSES.flag.groupInvalid, local.fullWidth && CLASSES.flag.groupFullWidth)
-            }), {
-            "data-slot": "color-field-group",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-invalid"] () {
-                return isInvalid() ? "true" : "false";
-            }
-        }), false, true);
-        spread(_el$3, mergeProps(others, {
-            type: "text",
-            get value () {
-                return inputValue();
-            },
-            get disabled () {
-                return isDisabled();
-            }
-        }, ()=>({
-                class: CLASSES.slot.input
-            }), {
-            "data-slot": "color-field-input",
-            spellcheck: false,
-            autocapitalize: "off",
-            autocomplete: "off",
-            autocorrect: "off",
-            get ["aria-invalid"] () {
-                return isInvalid() ? "true" : "false";
-            },
-            onInput: handleInput,
-            onBlur: handleBlur,
-            onFocus: handleFocus,
-            onKeyDown: handleKeyDown
-        }), false, false);
-        return _el$;
-    })();
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    spread(_el$, mergeProps(()=>({
+            class: twMerge(CLASSES.base, p.fullWidth && CLASSES.flag.fullWidth, isDisabled() && CLASSES.flag.disabled, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "color-field",
+        get ["data-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get ["data-invalid"] () {
+            return isInvalid() ? "true" : "false";
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        }
+    }), true);
+    spread(_el$2, mergeProps(()=>({
+            class: twMerge(CLASSES.slot.group, isInvalid() && CLASSES.flag.groupInvalid, p.fullWidth && CLASSES.flag.groupFullWidth)
+        }), {
+        "data-slot": "color-field-group",
+        get ["data-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get ["data-invalid"] () {
+            return isInvalid() ? "true" : "false";
+        }
+    }), true);
+    spread(_el$3, mergeProps(others, {
+        type: "text",
+        get value () {
+            return inputValue();
+        },
+        get disabled () {
+            return isDisabled();
+        }
+    }, ()=>({
+            class: CLASSES.slot.input
+        }), {
+        "data-slot": "color-field-input",
+        spellcheck: false,
+        autocapitalize: "off",
+        autocomplete: "off",
+        autocorrect: "off",
+        get ["aria-invalid"] () {
+            return isInvalid() ? "true" : "false";
+        },
+        onInput: handleInput,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown
+    }), false);
+    return _el$;
 };
 const ColorField = defineComponent({
     recipe: componentRecipe,

package/dist/components/color-field/ColorField.recipe.d.ts

@@ -11,7 +11,7 @@ export declare const CLASSES: {
         readonly groupInvalid: "color-field__group--invalid";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "color-field";
     readonly slots: {
         readonly "color-field": {};

package/dist/components/color-picker/ColorPicker.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorPicker.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ColorAreaProps, type ColorAreaValue } from "../color-area";
 import { type ColorFieldProps } from "../color-field";
 import { type ColorSliderProps } from "../color-slider";

package/dist/components/color-picker/ColorPicker.generated.js

@@ -1,8 +1,8 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorPicker.css";
-import { createContext, createEffect, createMemo, createSignal, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createContext, createEffect, createMemo, createSignal, omit, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import color_area from "../color-area/index.js";
 import color_field from "../color-field/index.js";
 import color_slider from "../color-slider/index.js";
@@ -112,24 +112,20 @@ const fallbackState = ()=>{
 };
 const __solidLayoutColorPickerArea = (_stable, p)=>{
     const ctx = useContext(ColorPickerContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "onChange",
-        "dataTheme"
-    ]);
+    const others = omit(p, "class", "onChange", "dataTheme");
     if (!ctx) return createComponent(color_area, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.slot.area, local.class)
+            class: twMerge(CLASSES.slot.area, p.class)
         }), {
         get dataTheme () {
-            return local.dataTheme;
+            return p.dataTheme;
         },
         get onChange () {
-            return local.onChange;
+            return p.onChange;
         }
     }));
     const handleChange = (next)=>{
         ctx.setFromArea(next);
-        local.onChange?.(next);
+        p.onChange?.(next);
     };
     return createComponent(color_area, mergeProps(others, {
         get value () {
@@ -139,10 +135,10 @@ const __solidLayoutColorPickerArea = (_stable, p)=>{
             return ctx.isDisabled() ? "disabled" : void 0;
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.area, local.class)
+            class: twMerge(CLASSES.slot.area, p.class)
         }), {
         get dataTheme () {
-            return local.dataTheme;
+            return p.dataTheme;
         },
         onChange: handleChange
     }));
@@ -154,38 +150,32 @@ const ColorPickerArea = defineComponent({
 });
 const __solidLayoutColorPickerSlider = (_stable, p)=>{
     const ctx = useContext(ColorPickerContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "onChange",
-        "type",
-        "style",
-        "dataTheme"
-    ]);
-    const sliderType = ()=>local.type ?? "hue";
+    const others = omit(p, "class", "onChange", "type", "style", "dataTheme");
+    const sliderType = ()=>p.type ?? "hue";
     if (!ctx) return createComponent(color_slider, mergeProps(others, {
         get type () {
             return sliderType();
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.slider, local.class)
+            class: twMerge(CLASSES.slot.slider, p.class)
         }), {
         get dataTheme () {
-            return local.dataTheme;
+            return p.dataTheme;
         },
         get style () {
-            return local.style;
+            return p.style;
         },
         get onChange () {
-            return local.onChange;
+            return p.onChange;
         }
     }));
     const value = ()=>"alpha" === sliderType() ? ctx.value().alpha : ctx.value().hsv.h;
     const handleChange = (next)=>{
         ctx.setFromSlider(sliderType(), next);
-        local.onChange?.(next);
+        p.onChange?.(next);
     };
     const sliderStyle = ()=>{
-        const userStyle = local.style;
+        const userStyle = p.style;
         if ("alpha" !== sliderType()) return {
             ...userStyle
         };
@@ -206,10 +196,10 @@ const __solidLayoutColorPickerSlider = (_stable, p)=>{
             return ctx.isDisabled() ? "disabled" : void 0;
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.slider, local.class)
+            class: twMerge(CLASSES.slot.slider, p.class)
         }), {
         get dataTheme () {
-            return local.dataTheme;
+            return p.dataTheme;
         },
         get style () {
             return sliderStyle();
@@ -224,32 +214,26 @@ const ColorPickerSlider = defineComponent({
 });
 const __solidLayoutColorPickerField = (_stable, p)=>{
     const ctx = useContext(ColorPickerContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "onChange",
-        "fullWidth",
-        "format",
-        "dataTheme"
-    ]);
+    const others = omit(p, "class", "onChange", "fullWidth", "format", "dataTheme");
     if (!ctx) return createComponent(color_field, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.slot.field, local.class)
+            class: twMerge(CLASSES.slot.field, p.class)
         }), {
         get dataTheme () {
-            return local.dataTheme;
+            return p.dataTheme;
         },
         get format () {
-            return local.format;
+            return p.format;
         },
         get fullWidth () {
-            return local.fullWidth ?? true;
+            return p.fullWidth ?? true;
         },
         get onChange () {
-            return local.onChange;
+            return p.onChange;
         }
     }));
     const handleChange = (next)=>{
         ctx.setFromField(next);
-        local.onChange?.(next);
+        p.onChange?.(next);
     };
     return createComponent(color_field, mergeProps(others, {
         get value () {
@@ -259,16 +243,16 @@ const __solidLayoutColorPickerField = (_stable, p)=>{
             return ctx.isDisabled() ? "disabled" : void 0;
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.field, local.class)
+            class: twMerge(CLASSES.slot.field, p.class)
         }), {
         get dataTheme () {
-            return local.dataTheme;
+            return p.dataTheme;
         },
         get format () {
-            return local.format;
+            return p.format;
         },
         get fullWidth () {
-            return local.fullWidth ?? true;
+            return p.fullWidth ?? true;
         },
         onChange: handleChange
     }));
@@ -279,29 +263,21 @@ const ColorPickerField = defineComponent({
     embedded: true
 });
 const __solidLayoutColorPickerRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "children",
-        "value",
-        "defaultValue",
-        "onChange",
-        "state",
-        "dataTheme"
-    ]);
-    const [internalState, setInternalState] = createSignal(toColorState(local.value ?? local.defaultValue) ?? fallbackState());
-    const isControlled = ()=>void 0 !== local.value;
+    const others = omit(p, "class", "children", "value", "defaultValue", "onChange", "state", "dataTheme");
+    const [internalState, setInternalState] = createSignal(toColorState(p.value ?? p.defaultValue) ?? fallbackState());
+    const isControlled = ()=>void 0 !== p.value;
     createEffect(()=>{
         if (!isControlled()) return;
-        const next = toColorState(local.value);
+        const next = toColorState(p.value);
         if (next) setInternalState(next);
     });
     const currentState = createMemo(()=>{
         if (!isControlled()) return internalState();
-        return toColorState(local.value) ?? internalState();
+        return toColorState(p.value) ?? internalState();
     });
     const emitChange = (next)=>{
         if (!isControlled()) setInternalState(next);
-        local.onChange?.(formatOutputColor(next));
+        p.onChange?.(formatOutputColor(next));
     };
     const setFromArea = (nextValue)=>{
         const hsv = normalizeHsv(nextValue);
@@ -337,29 +313,29 @@ const __solidLayoutColorPickerRoot = (_stable, p)=>{
     };
     const context = createMemo(()=>({
             value: currentState,
-            isDisabled: ()=>Boolean("disabled" === local.state),
+            isDisabled: ()=>Boolean("disabled" === p.state),
             setFromArea,
             setFromField,
             setFromSlider
         }));
-    return createComponent(ColorPickerContext.Provider, {
+    return createComponent(ColorPickerContext, {
         get value () {
             return context();
         },
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, local.class)
+                    class: twMerge(CLASSES.base, p.class)
                 }), {
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 "data-slot": "color-picker",
                 get ["data-disabled"] () {
-                    return "disabled" === local.state ? "true" : "false";
+                    return "disabled" === p.state ? "true" : "false";
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children ?? [
+            }), true);
+            insert(_el$, ()=>p.children ?? [
                     createComponent(ColorPickerArea, {}),
                     createComponent(ColorPickerSlider, {
                         type: "hue"

package/dist/components/color-picker/ColorPicker.recipe.d.ts

@@ -6,7 +6,7 @@ export declare const CLASSES: {
         readonly field: "color-picker__field";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "color-picker";
     readonly slots: {
         readonly "color-picker": {};

package/dist/components/color-slider/ColorSlider.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorSlider.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State } from "../vocabulary";
 export type ColorSliderType = "hue" | "alpha";
 export type ColorSliderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & UIBaseProps & {