@pathscale/ui 2.4.0 → 2.6.0

package/dist/components/date-picker/DatePicker.generated.js

@@ -1,50 +1,30 @@
-import { createComponent, effect, insert, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, effect, insert, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./DatePicker.css";
-import { Show, createMemo, createUniqueId, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createMemo, createUniqueId, omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { formatDate, toISODate, useDateSelection, usePickerOpenState } from "../../hooks/date/index.js";
 import calendar from "../calendar/index.js";
 import { CLASSES, componentRecipe } from "./DatePicker.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><button type=button><span></span><span><svg><rect x=3 y=4 width=18 height=18 rx=2 ry=2></rect><line x1=16 y1=2 x2=16 y2=6></line><line x1=8 y1=2 x2=8 y2=6></line><line x1=3 y1=10 x2=21 y2=10>");
+var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><button><span></span><span><svg><rect x=3 y=4 width=18 height=18 rx=2 ry=2></rect><line x1=16 y1=2 x2=16 y2=6></line><line x1=8 y1=2 x2=8 y2=6></line><line x1=3 y1=10 x2=21 y2=10></line></svg></span></button><!>");
 const __solidLayoutDatePicker = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style",
-        "ref",
-        "value",
-        "defaultValue",
-        "onChange",
-        "open",
-        "defaultOpen",
-        "onOpenChange",
-        "name",
-        "placeholder",
-        "locale",
-        "weekdayFormat",
-        "minValue",
-        "maxValue",
-        "isDateUnavailable",
-        "state",
-        "disabled"
-    ]);
-    const isDisabled = createMemo(()=>Boolean("disabled" === local.state) || Boolean(local.disabled));
+    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "name", "placeholder", "locale", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
+    const isDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
     const selection = useDateSelection({
-        value: ()=>local.value,
-        defaultValue: ()=>local.defaultValue,
-        onChange: ()=>local.onChange
+        value: ()=>p.value,
+        defaultValue: ()=>p.defaultValue,
+        onChange: ()=>p.onChange
     });
     const openState = usePickerOpenState({
-        isOpen: ()=>local.open,
-        defaultOpen: ()=>local.defaultOpen,
-        onOpenChange: ()=>local.onOpenChange,
+        isOpen: ()=>p.open,
+        defaultOpen: ()=>p.defaultOpen,
+        onOpenChange: ()=>p.onOpenChange,
         isDisabled
     });
-    const locale = createMemo(()=>local.locale ?? "en-US");
+    const locale = createMemo(()=>p.locale ?? "en-US");
     const displayValue = createMemo(()=>{
         const selectedDate = selection.selectedDate();
-        if (!selectedDate) return local.placeholder ?? "Select date";
+        if (!selectedDate) return p.placeholder ?? "Select date";
         return formatDate(selectedDate, locale());
     });
     const uniqueId = createUniqueId();
@@ -53,149 +33,149 @@ const __solidLayoutDatePicker = (_stable, p)=>{
         selection.setSelectedDate(date);
         openState.setOpen(false);
     };
-    return (()=>{
-        var _el$ = _tmpl$3(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild;
-        use((node)=>{
+    var _el$ = _tmpl$3(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$3.nextSibling;
+    ref(()=>(node)=>{
             openState.setRootRef(node);
-            if ("function" == typeof local.ref) local.ref(node);
+            if ("function" == typeof p.ref) p.ref(node);
         }, _el$);
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, openState.isOpen() && CLASSES.Root.flag.open, isDisabled() && CLASSES.Root.flag.disabled, local.class)
-            }), {
-            "data-slot": "date-picker",
-            get ["data-open"] () {
-                return openState.isOpen() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : void 0;
+    spread(_el$, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Root.base, openState.isOpen() && CLASSES.Root.flag.open, isDisabled() && CLASSES.Root.flag.disabled, p.class)
+        }), {
+        "data-slot": "date-picker",
+        get ["data-open"] () {
+            return openState.isOpen() ? "true" : "false";
+        },
+        get ["data-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : void 0;
+        }
+    }), true);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return p.name;
+        },
+        get children () {
+            var _el$2 = _tmpl$();
+            effect(()=>({
+                    e: p.name,
+                    t: toISODate(selection.selectedDate()),
+                    a: isDisabled()
+                }), ({ e, t, a }, _p$)=>{
+                e !== _p$?.e && setAttribute(_el$2, "name", e);
+                _el$2.value = t ?? "";
+                a !== _p$?.a && setAttribute(_el$2, "disabled", a);
+            });
+            return _el$2;
+        }
+    }), _el$3);
+    spread(_el$3, mergeProps({
+        type: "button"
+    }, ()=>({
+            class: CLASSES.Trigger.base
+        }), {
+        "data-slot": "date-picker-trigger",
+        "aria-haspopup": "dialog",
+        get ["aria-expanded"] () {
+            return openState.isOpen() ? "true" : "false";
+        },
+        get ["aria-controls"] () {
+            return openState.isOpen() ? popoverId : void 0;
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get ["data-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get disabled () {
+            return isDisabled();
+        },
+        onClick: ()=>openState.toggleOpen(),
+        onKeyDown: (event)=>{
+            if ("ArrowDown" === event.key || "Enter" === event.key || " " === event.key) {
+                event.preventDefault();
+                openState.setOpen(true);
             }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return local.name;
-            },
-            get children () {
-                var _el$2 = _tmpl$();
-                effect((_p$)=>{
-                    var _v$ = local.name, _v$2 = isDisabled();
-                    _v$ !== _p$.e && setAttribute(_el$2, "name", _p$.e = _v$);
-                    _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
-                    return _p$;
-                }, {
-                    e: void 0,
-                    t: void 0
-                });
-                effect(()=>_el$2.value = toISODate(selection.selectedDate()));
-                return _el$2;
-            }
-        }), _el$3);
-        spread(_el$3, mergeProps(()=>({
-                class: CLASSES.Trigger.base
-            }), {
-            "data-slot": "date-picker-trigger",
-            "aria-haspopup": "dialog",
-            get ["aria-expanded"] () {
-                return openState.isOpen() ? "true" : "false";
-            },
-            get ["aria-controls"] () {
-                return openState.isOpen() ? popoverId : void 0;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            onClick: ()=>openState.toggleOpen(),
-            onKeyDown: (event)=>{
-                if ("ArrowDown" === event.key || "Enter" === event.key || " " === event.key) {
-                    event.preventDefault();
-                    openState.setOpen(true);
+        }
+    }), true);
+    spread(_el$4, mergeProps(()=>({
+            class: twMerge(CLASSES.TriggerValue.base, !selection.selectedDate() && CLASSES.TriggerValue.flag.placeholder)
+        }), {
+        "data-slot": "date-picker-trigger-value"
+    }), true);
+    insert(_el$4, displayValue);
+    spread(_el$5, mergeProps(()=>({
+            class: CLASSES.TriggerIndicator.base
+        }), {
+        "data-slot": "date-picker-trigger-indicator",
+        "aria-hidden": "true"
+    }), true);
+    spread(_el$6, mergeProps(()=>({
+            class: CLASSES.TriggerIcon.base
+        }), {
+        "data-slot": "date-picker-trigger-icon",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "true"
+    }), true);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return openState.isOpen();
+        },
+        get children () {
+            var _el$7 = _tmpl$2();
+            spread(_el$7, mergeProps({
+                id: popoverId
+            }, ()=>({
+                    class: CLASSES.Popover.base
+                }), {
+                "data-slot": "date-picker-popover",
+                role: "dialog",
+                "aria-modal": "false"
+            }), true);
+            insert(_el$7, createComponent(calendar, mergeProps(()=>({
+                    class: CLASSES.Calendar.base
+                }), {
+                "data-slot": "date-picker-calendar",
+                get value () {
+                    return selection.selectedDate() ?? void 0;
+                },
+                onChange: handleDateChange,
+                get locale () {
+                    return locale();
+                },
+                get weekdayFormat () {
+                    return p.weekdayFormat;
+                },
+                get minValue () {
+                    return p.minValue;
+                },
+                get maxValue () {
+                    return p.maxValue;
+                },
+                get isDateUnavailable () {
+                    return p.isDateUnavailable;
+                },
+                get state () {
+                    return isDisabled() ? "disabled" : void 0;
                 }
-            }
-        }), false, true);
-        spread(_el$4, mergeProps(()=>({
-                class: twMerge(CLASSES.TriggerValue.base, !selection.selectedDate() && CLASSES.TriggerValue.flag.placeholder)
-            }), {
-            "data-slot": "date-picker-trigger-value"
-        }), false, true);
-        insert(_el$4, displayValue);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.TriggerIndicator.base
-            }), {
-            "data-slot": "date-picker-trigger-indicator",
-            "aria-hidden": "true"
-        }), false, true);
-        spread(_el$6, mergeProps(()=>({
-                class: CLASSES.TriggerIcon.base
-            }), {
-            "data-slot": "date-picker-trigger-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            "stroke-width": "2",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            "aria-hidden": "true"
-        }), true, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return openState.isOpen();
-            },
-            get children () {
-                var _el$7 = _tmpl$2();
-                setAttribute(_el$7, "id", popoverId);
-                spread(_el$7, mergeProps(()=>({
-                        class: CLASSES.Popover.base
-                    }), {
-                    "data-slot": "date-picker-popover",
-                    role: "dialog",
-                    "aria-modal": "false"
-                }), false, true);
-                insert(_el$7, createComponent(calendar, mergeProps(()=>({
-                        class: CLASSES.Calendar.base
-                    }), {
-                    "data-slot": "date-picker-calendar",
-                    get value () {
-                        return selection.selectedDate() ?? void 0;
-                    },
-                    onChange: handleDateChange,
-                    get locale () {
-                        return locale();
-                    },
-                    get weekdayFormat () {
-                        return local.weekdayFormat;
-                    },
-                    get minValue () {
-                        return local.minValue;
-                    },
-                    get maxValue () {
-                        return local.maxValue;
-                    },
-                    get isDateUnavailable () {
-                        return local.isDateUnavailable;
-                    },
-                    get state () {
-                        return isDisabled() ? "disabled" : void 0;
-                    }
-                })));
-                return _el$7;
-            }
-        }), null);
-        return _el$;
-    })();
+            })));
+            return _el$7;
+        }
+    }), _el$8);
+    return _el$;
 };
 const DatePicker = defineComponent({
     recipe: componentRecipe,

package/dist/components/date-picker/DatePicker.recipe.d.ts

@@ -28,7 +28,7 @@ export declare const CLASSES: {
         readonly base: "date-picker__calendar";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "date-picker";
     readonly slots: {
         readonly "date-picker": {};

package/dist/components/date-range-picker/DateRangePicker.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./DateRangePicker.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ControlledDateRangeValue } from "../../hooks/date";
 import { type CalendarWeekdayFormat } from "../calendar";
 import type { UIBaseProps, State } from "../vocabulary";