@pathscale/ui 2.5.0 → 2.6.0

package/dist/components/popover/Popover.generated.js

@@ -1,11 +1,12 @@
-import { Portal, createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Popover.css";
-import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createContext, createEffect, createMemo, createSignal, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
+import "../_shared/material.css";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Popover.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=popover-arrow-svg height=12 viewBox="0 0 12 12"width=12 xmlns=http://www.w3.org/2000/svg><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<h3>");
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=popover-arrow-svg height=12 viewBox="0 0 12 12"width=12><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<h3>");
 const PopoverContext = createContext();
 const usePopoverContext = ()=>{
     const ctx = useContext(PopoverContext);
@@ -13,56 +14,41 @@ const usePopoverContext = ()=>{
     return ctx;
 };
 const __solidLayoutPopoverRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "open",
-        "defaultOpen",
-        "onOpenChange",
-        "placement",
-        "autoFlip",
-        "offset",
-        "anchorRect",
-        "closeOnOutsideClick",
-        "closeOnEscape",
-        "onInteractOutside"
-    ]);
-    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    const others = omit(p, "children", "class", "dataTheme", "style", "open", "defaultOpen", "onOpenChange", "placement", "autoFlip", "offset", "anchorRect", "closeOnOutsideClick", "closeOnEscape", "onInteractOutside");
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
     const [triggerRef, setTriggerRef] = createSignal();
     const [contentRef, setContentRef] = createSignal();
     const [triggerId] = createSignal(`popover-trigger-${Math.random().toString(36).slice(2, 8)}`);
     const [contentId] = createSignal(`popover-content-${Math.random().toString(36).slice(2, 8)}`);
-    const [resolvedPlacement, setResolvedPlacement] = createSignal(local.placement ?? "bottom");
-    const isControlled = createMemo(()=>void 0 !== local.open);
-    const isOpen = createMemo(()=>isControlled() ? Boolean(local.open) : internalOpen());
+    const [resolvedPlacement, setResolvedPlacement] = createSignal(p.placement ?? "bottom");
+    const isControlled = createMemo(()=>void 0 !== p.open);
+    const isOpen = createMemo(()=>isControlled() ? Boolean(p.open) : internalOpen());
     const setIsOpen = (next, options)=>{
         if (!isControlled()) setInternalOpen(next);
-        if (isOpen() !== next) local.onOpenChange?.(next);
+        if (isOpen() !== next) p.onOpenChange?.(next);
         if (!next && options?.focusTrigger) triggerRef()?.focus();
     };
-    const preferredPlacement = ()=>local.placement ?? "bottom";
+    const preferredPlacement = ()=>p.placement ?? "bottom";
     const placement = ()=>resolvedPlacement();
-    const offset = ()=>local.offset ?? 8;
-    const autoFlip = ()=>local.autoFlip ?? true;
-    const anchorRect = ()=>"function" == typeof local.anchorRect ? local.anchorRect() : local.anchorRect;
-    onMount(()=>{
+    const offset = ()=>p.offset ?? 8;
+    const autoFlip = ()=>p.autoFlip ?? true;
+    const anchorRect = ()=>"function" == typeof p.anchorRect ? p.anchorRect() : p.anchorRect;
+    onSettled(()=>{
         const handlePointerDown = (event)=>{
             if (!isOpen()) return;
-            if (false === local.closeOnOutsideClick) return;
+            if (false === p.closeOnOutsideClick) return;
             const content = contentRef();
             const trigger = triggerRef();
             if (content?.contains(event.target)) return;
             if (trigger?.contains(event.target)) return;
-            local.onInteractOutside?.(event);
+            p.onInteractOutside?.(event);
             setIsOpen(false, {
                 focusTrigger: false
             });
         };
         const handleKeyDown = (event)=>{
             if (!isOpen()) return;
-            if (false === local.closeOnEscape) return;
+            if (false === p.closeOnEscape) return;
             if ("Escape" !== event.key) return;
             event.preventDefault();
             setIsOpen(false, {
@@ -91,24 +77,24 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
         triggerId,
         contentId,
         offset,
-        onInteractOutside: local.onInteractOutside
+        onInteractOutside: p.onInteractOutside
     };
-    return createComponent(PopoverContext.Provider, {
+    return createComponent(PopoverContext, {
         value: ctx,
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.slot.root, local.class)
+                    class: twMerge(CLASSES.slot.root, p.class)
                 }), {
                 "data-slot": "popover-root",
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -119,22 +105,15 @@ const PopoverRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutPopoverTrigger = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "onClick",
-        "onKeyDown"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "onClick", "onKeyDown");
     const ctx = usePopoverContext();
     const handleClick = (event)=>{
-        if ("function" == typeof local.onClick) local.onClick(event);
+        if ("function" == typeof p.onClick) p.onClick(event);
         if (event.defaultPrevented) return;
         ctx.setIsOpen(!ctx.isOpen());
     };
     const handleKeyDown = (event)=>{
-        if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
+        if ("function" == typeof p.onKeyDown) p.onKeyDown(event);
         if (event.defaultPrevented) return;
         if ("Enter" === event.key || " " === event.key) {
             event.preventDefault();
@@ -147,38 +126,36 @@ const __solidLayoutPopoverTrigger = (_stable, p)=>{
             });
         }
     };
-    return (()=>{
-        var _el$2 = _tmpl$();
-        use((el)=>ctx.setTriggerRef(el), _el$2);
-        spread(_el$2, mergeProps(others, {
-            get id () {
-                return ctx.triggerId();
-            },
-            role: "button",
-            tabIndex: 0
-        }, ()=>({
-                class: twMerge(CLASSES.slot.trigger, local.class)
-            }), {
-            "data-slot": "popover-trigger",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            "aria-haspopup": "dialog",
-            get ["aria-expanded"] () {
-                return ctx.isOpen() ? "true" : "false";
-            },
-            get ["aria-controls"] () {
-                return memo(()=>!!ctx.isOpen())() ? ctx.contentId() : void 0;
-            },
-            onClick: handleClick,
-            onKeyDown: handleKeyDown
-        }), false, true);
-        insert(_el$2, ()=>local.children);
-        return _el$2;
-    })();
+    var _el$2 = _tmpl$();
+    ref(()=>(el)=>ctx.setTriggerRef(el), _el$2);
+    spread(_el$2, mergeProps(others, {
+        get id () {
+            return ctx.triggerId();
+        },
+        role: "button",
+        tabindex: 0
+    }, ()=>({
+            class: twMerge(CLASSES.slot.trigger, p.class)
+        }), {
+        "data-slot": "popover-trigger",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        "aria-haspopup": "dialog",
+        get ["aria-expanded"] () {
+            return ctx.isOpen() ? "true" : "false";
+        },
+        get ["aria-controls"] () {
+            return ctx.isOpen() ? ctx.contentId() : void 0;
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+    }), true);
+    insert(_el$2, ()=>p.children);
+    return _el$2;
 };
 const PopoverTrigger = defineComponent({
     recipe: componentRecipe,
@@ -186,13 +163,7 @@ const PopoverTrigger = defineComponent({
     embedded: true
 });
 const __solidLayoutPopoverContent = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "sideOffset"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "sideOffset", "material");
     const ctx = usePopoverContext();
     const overlayPosition = createOverlayPosition({
         open: ctx.isOpen,
@@ -200,7 +171,7 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
         anchorRect: ctx.anchorRect,
         overlayRef: ctx.contentRef,
         placement: ctx.preferredPlacement,
-        offset: ()=>local.sideOffset ?? ctx.offset(),
+        offset: ()=>p.sideOffset ?? ctx.offset(),
         autoFlip: ctx.autoFlip,
         align: ()=>"center"
     });
@@ -209,12 +180,12 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
     });
     const style = ()=>{
         const overlayStyle = overlayPosition.style();
-        if ("string" == typeof local.style) return [
-            local.style,
+        if ("string" == typeof p.style) return [
+            p.style,
             Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
         ].filter(Boolean).join("; ");
         return {
-            ...local.style ?? {},
+            ...p.style ?? {},
             ...overlayStyle
         };
     };
@@ -226,16 +197,19 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
             return createComponent(Portal, {
                 get children () {
                     var _el$3 = _tmpl$();
-                    use((el)=>ctx.setContentRef(el), _el$3);
+                    ref(()=>(el)=>ctx.setContentRef(el), _el$3);
                     spread(_el$3, mergeProps(others, {
                         get id () {
                             return ctx.contentId();
                         },
                         role: "dialog"
                     }, ()=>({
-                            class: twMerge(CLASSES.base, local.class)
+                            class: twMerge(CLASSES.base, p.class)
                         }), {
                         "data-slot": "popover-content",
+                        get ["data-material"] () {
+                            return p.material ?? "solid";
+                        },
                         get ["data-open"] () {
                             return ctx.isOpen() ? "true" : "false";
                         },
@@ -243,19 +217,19 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
                             return ctx.placement();
                         },
                         get ["data-theme"] () {
-                            return local.dataTheme;
+                            return p.dataTheme;
                         },
                         get style () {
                             return style();
                         },
                         get ["aria-labelledby"] () {
-                            return memo(()=>!!ctx.triggerRef())() ? ctx.triggerId() : void 0;
+                            return ctx.triggerRef() ? ctx.triggerId() : void 0;
                         },
                         get ["aria-hidden"] () {
                             return ctx.isOpen() ? "false" : "true";
                         }
-                    }), false, true);
-                    insert(_el$3, ()=>local.children);
+                    }), true);
+                    insert(_el$3, ()=>p.children);
                     return _el$3;
                 }
             });
@@ -268,28 +242,21 @@ const PopoverContent = defineComponent({
     embedded: true
 });
 const __solidLayoutPopoverDialog = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$4 = _tmpl$();
-        spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.dialog, local.class)
-            }), {
-            "data-slot": "popover-dialog",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$4, ()=>local.children);
-        return _el$4;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$4 = _tmpl$();
+    spread(_el$4, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.dialog, p.class)
+        }), {
+        "data-slot": "popover-dialog",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$4, ()=>p.children);
+    return _el$4;
 };
 const PopoverDialog = defineComponent({
     recipe: componentRecipe,
@@ -297,34 +264,27 @@ const PopoverDialog = defineComponent({
     embedded: true
 });
 const __solidLayoutPopoverArrow = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style");
     const ctx = usePopoverContext();
     const defaultArrow = _tmpl$2();
-    return (()=>{
-        var _el$6 = _tmpl$3();
-        spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.arrow, local.class)
-            }), {
-            "data-slot": "popover-arrow",
-            get ["data-placement"] () {
-                return ctx.placement();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            "aria-hidden": "true"
-        }), false, true);
-        insert(_el$6, ()=>local.children ?? defaultArrow);
-        return _el$6;
-    })();
+    var _el$6 = _tmpl$3();
+    spread(_el$6, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.arrow, p.class)
+        }), {
+        "data-slot": "popover-arrow",
+        get ["data-placement"] () {
+            return ctx.placement();
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        "aria-hidden": "true"
+    }), true);
+    insert(_el$6, ()=>p.children ?? defaultArrow);
+    return _el$6;
 };
 const PopoverArrow = defineComponent({
     recipe: componentRecipe,
@@ -332,28 +292,21 @@ const PopoverArrow = defineComponent({
     embedded: true
 });
 const __solidLayoutPopoverHeading = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$7 = _tmpl$4();
-        spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.heading, local.class)
-            }), {
-            "data-slot": "popover-heading",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$7, ()=>local.children);
-        return _el$7;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$7 = _tmpl$4();
+    spread(_el$7, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.heading, p.class)
+        }), {
+        "data-slot": "popover-heading",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$7, ()=>p.children);
+    return _el$7;
 };
 const PopoverHeading = defineComponent({
     recipe: componentRecipe,

package/dist/components/popover/Popover.recipe.d.ts

@@ -8,7 +8,7 @@ export declare const CLASSES: {
         readonly heading: "popover__heading";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "popover";
     readonly slots: {
         readonly "popover-arrow": {};

package/dist/components/progress/Progress.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Progress.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, Flavor, State } from "../vocabulary";
 export type ProgressSize = "sm" | "md" | "lg";
 export type ProgressColor = "default" | "accent" | "success" | "warning" | "danger";