@pathscale/ui 2.1.1 → 2.2.1

package/dist/components/{modal/Modal.generated.js → dialog/Dialog.generated.js}

@@ -1,14 +1,14 @@
 import { Portal, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
-import "./Modal.css";
+import "./Dialog.css";
 import { Show, createContext, createEffect, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
 import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./Modal.recipe.js";
+import { CLASSES, componentRecipe } from "./Dialog.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div>"), _tmpl$4 = /*#__PURE__*/ template("<h2>"), _tmpl$5 = /*#__PURE__*/ template('<svg><path d="M18 6L6 18M6 6L18 18"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
-const ModalContext = createContext();
+const DialogContext = createContext();
 const useModalContext = ()=>{
-    const context = useContext(ModalContext);
-    if (!context) throw new Error("Modal compound components must be used within <Modal>.");
+    const context = useContext(DialogContext);
+    if (!context) throw new Error("Dialog compound components must be used within <Dialog>.");
     return context;
 };
 const isVisibleState = (state)=>"entering" === state || "open" === state;
@@ -67,15 +67,14 @@ const focusFirstElement = (container)=>{
     if (focusable.length > 0) return void focusable[0].focus();
     container.focus();
 };
-const __solidLayoutModalRoot = (_stable, p)=>{
+const __solidLayoutDialogRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "ref",
-        "isOpen",
+        "open",
         "defaultOpen",
         "onOpenChange",
         "isDismissable",
@@ -87,12 +86,12 @@ const __solidLayoutModalRoot = (_stable, p)=>{
         "scrollBehavior"
     ]);
     const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
-    const [animState, setAnimState] = createSignal(Boolean(local.isOpen ?? local.defaultOpen) ? "open" : "closed");
+    const [animState, setAnimState] = createSignal(Boolean(local.open ?? local.defaultOpen) ? "open" : "closed");
     const [contentRef, setContentRef] = createSignal(void 0);
     const [labelledBy, setLabelledBy] = createSignal(void 0);
     const [describedBy, setDescribedBy] = createSignal(void 0);
-    const isControlled = ()=>void 0 !== local.isOpen;
-    const isOpen = ()=>isControlled() ? Boolean(local.isOpen) : internalOpen();
+    const isControlled = ()=>void 0 !== local.open;
+    const isOpen = ()=>isControlled() ? Boolean(local.open) : internalOpen();
     const setIsOpen = (next)=>{
         if (isOpen() === next) return;
         if (!isControlled()) setInternalOpen(next);
@@ -192,7 +191,7 @@ const __solidLayoutModalRoot = (_stable, p)=>{
         describedBy,
         setDescribedBy
     };
-    return createComponent(ModalContext.Provider, {
+    return createComponent(DialogContext.Provider, {
         value: contextValue,
         get children () {
             var _el$ = _tmpl$();
@@ -200,9 +199,9 @@ const __solidLayoutModalRoot = (_stable, p)=>{
                 if ("function" == typeof local.ref) local.ref(node);
             }, _el$);
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, isVisibleState(animState()) && CLASSES.Root.flag.open, local.class, local.className)
+                    class: twMerge(CLASSES.Root.base, isVisibleState(animState()) && CLASSES.Root.flag.open, local.class)
                 }), {
-                "data-slot": "modal-root",
+                "data-slot": "dialog-root",
                 get ["data-open"] () {
                     return isVisibleState(animState()) ? "true" : "false";
                 },
@@ -218,16 +217,15 @@ const __solidLayoutModalRoot = (_stable, p)=>{
         }
     });
 };
-const ModalRoot = defineComponent({
+const DialogRoot = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalRoot,
+    layout: __solidLayoutDialogRoot,
     embedded: true
 });
-const __solidLayoutModalTrigger = (_stable, p)=>{
+const __solidLayoutDialogTrigger = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "type",
@@ -245,9 +243,9 @@ const __solidLayoutModalTrigger = (_stable, p)=>{
                 return local.type ?? "button";
             }
         }, ()=>({
-                class: twMerge(CLASSES.Trigger.base, local.class, local.className)
+                class: twMerge(CLASSES.Trigger.base, local.class)
             }), {
-            "data-slot": "modal-trigger",
+            "data-slot": "dialog-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -260,16 +258,15 @@ const __solidLayoutModalTrigger = (_stable, p)=>{
         return _el$2;
     })();
 };
-const ModalTrigger = defineComponent({
+const DialogTrigger = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalTrigger,
+    layout: __solidLayoutDialogTrigger,
     embedded: true
 });
-const __solidLayoutModalBackdrop = (_stable, p)=>{
+const __solidLayoutDialogBackdrop = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "variant",
@@ -290,9 +287,9 @@ const __solidLayoutModalBackdrop = (_stable, p)=>{
     return (()=>{
         var _el$3 = _tmpl$();
         spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Backdrop.base, CLASSES.Backdrop.variant[variant()], isEntering() && CLASSES.Backdrop.state.entering, isExiting() && CLASSES.Backdrop.state.exiting, local.class, local.className)
+                class: twMerge(CLASSES.Backdrop.base, CLASSES.Backdrop.variant[variant()], isEntering() && CLASSES.Backdrop.state.entering, isExiting() && CLASSES.Backdrop.state.exiting, local.class)
             }), {
-            "data-slot": "modal-backdrop",
+            "data-slot": "dialog-backdrop",
             get ["data-entering"] () {
                 return isEntering() ? "true" : void 0;
             },
@@ -311,16 +308,15 @@ const __solidLayoutModalBackdrop = (_stable, p)=>{
         return _el$3;
     })();
 };
-const ModalBackdrop = defineComponent({
+const DialogBackdrop = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalBackdrop,
+    layout: __solidLayoutDialogBackdrop,
     embedded: true
 });
-const __solidLayoutModalContent = (_stable, p)=>{
+const __solidLayoutDialogContent = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "ref",
@@ -352,7 +348,7 @@ const __solidLayoutModalContent = (_stable, p)=>{
         get children () {
             return createComponent(Portal, {
                 get children () {
-                    return createComponent(ModalBackdrop, {
+                    return createComponent(DialogBackdrop, {
                         get variant () {
                             return local.backdrop;
                         },
@@ -370,7 +366,7 @@ const __solidLayoutModalContent = (_stable, p)=>{
                             spread(_el$4, mergeProps(()=>({
                                     class: twMerge(CLASSES.Container.base, CLASSES.Container.placement[placement()], CLASSES.Container.scroll[scrollBehavior()], containerSizeClass(), isEntering() && CLASSES.Container.state.entering, isExiting() && CLASSES.Container.state.exiting)
                                 }), {
-                                "data-slot": "modal-container",
+                                "data-slot": "dialog-container",
                                 get ["data-placement"] () {
                                     return placement();
                                 },
@@ -389,7 +385,7 @@ const __solidLayoutModalContent = (_stable, p)=>{
                                 get role () {
                                     return local.role ?? "dialog";
                                 },
-                                "aria-modal": "true",
+                                "aria-dialog": "true",
                                 get ["aria-labelledby"] () {
                                     return local["aria-labelledby"] ?? context.labelledBy();
                                 },
@@ -400,9 +396,9 @@ const __solidLayoutModalContent = (_stable, p)=>{
                                     return local.tabIndex ?? -1;
                                 }
                             }, ()=>({
-                                    class: twMerge(CLASSES.Content.base, CLASSES.Content.scroll[scrollBehavior()], CLASSES.Content.size[size()], isEntering() && CLASSES.Content.state.entering, isExiting() && CLASSES.Content.state.exiting, local.class, local.className)
+                                    class: twMerge(CLASSES.Content.base, CLASSES.Content.scroll[scrollBehavior()], CLASSES.Content.size[size()], isEntering() && CLASSES.Content.state.entering, isExiting() && CLASSES.Content.state.exiting, local.class)
                                 }), {
-                                "data-slot": "modal-content",
+                                "data-slot": "dialog-content",
                                 get ["data-placement"] () {
                                     return placement();
                                 },
@@ -434,25 +430,24 @@ const __solidLayoutModalContent = (_stable, p)=>{
         }
     });
 };
-const ModalContent = defineComponent({
+const DialogContent = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalContent,
+    layout: __solidLayoutDialogContent,
     embedded: true
 });
-const __solidLayoutModalHeader = (_stable, p)=>{
+const __solidLayoutDialogHeader = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$6 = _tmpl$();
         spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Header.base, local.class, local.className)
+                class: twMerge(CLASSES.Header.base, local.class)
             }), {
-            "data-slot": "modal-header",
+            "data-slot": "dialog-header",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -464,23 +459,22 @@ const __solidLayoutModalHeader = (_stable, p)=>{
         return _el$6;
     })();
 };
-const ModalHeader = defineComponent({
+const DialogHeader = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalHeader,
+    layout: __solidLayoutDialogHeader,
     embedded: true
 });
-const __solidLayoutModalHeading = (_stable, p)=>{
+const __solidLayoutDialogHeading = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "id"
     ]);
     const context = useModalContext();
     const uniqueId = createUniqueId();
-    const headingId = ()=>local.id ?? `modal-heading-${uniqueId}`;
+    const headingId = ()=>local.id ?? `dialog-heading-${uniqueId}`;
     createEffect(()=>{
         const id = headingId();
         context.setLabelledBy(id);
@@ -495,9 +489,9 @@ const __solidLayoutModalHeading = (_stable, p)=>{
                 return headingId();
             }
         }, ()=>({
-                class: twMerge(CLASSES.Heading.base, local.class, local.className)
+                class: twMerge(CLASSES.Heading.base, local.class)
             }), {
-            "data-slot": "modal-heading",
+            "data-slot": "dialog-heading",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -509,25 +503,24 @@ const __solidLayoutModalHeading = (_stable, p)=>{
         return _el$7;
     })();
 };
-const ModalHeading = defineComponent({
+const DialogHeading = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalHeading,
+    layout: __solidLayoutDialogHeading,
     embedded: true
 });
-const __solidLayoutModalIcon = (_stable, p)=>{
+const __solidLayoutDialogIcon = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$8 = _tmpl$();
         spread(_el$8, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Icon.base, local.class, local.className)
+                class: twMerge(CLASSES.Icon.base, local.class)
             }), {
-            "data-slot": "modal-icon",
+            "data-slot": "dialog-icon",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -539,23 +532,22 @@ const __solidLayoutModalIcon = (_stable, p)=>{
         return _el$8;
     })();
 };
-const ModalIcon = defineComponent({
+const DialogIcon = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalIcon,
+    layout: __solidLayoutDialogIcon,
     embedded: true
 });
-const __solidLayoutModalBody = (_stable, p)=>{
+const __solidLayoutDialogBody = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "id"
     ]);
     const context = useModalContext();
     const uniqueId = createUniqueId();
-    const bodyId = ()=>local.id ?? `modal-body-${uniqueId}`;
+    const bodyId = ()=>local.id ?? `dialog-body-${uniqueId}`;
     createEffect(()=>{
         const id = bodyId();
         context.setDescribedBy(id);
@@ -570,9 +562,9 @@ const __solidLayoutModalBody = (_stable, p)=>{
                 return bodyId();
             }
         }, ()=>({
-                class: twMerge(CLASSES.Body.base, CLASSES.Body.scroll[context.scrollBehavior()], local.class, local.className)
+                class: twMerge(CLASSES.Body.base, CLASSES.Body.scroll[context.scrollBehavior()], local.class)
             }), {
-            "data-slot": "modal-body",
+            "data-slot": "dialog-body",
             get ["data-scroll"] () {
                 return context.scrollBehavior();
             },
@@ -587,25 +579,24 @@ const __solidLayoutModalBody = (_stable, p)=>{
         return _el$9;
     })();
 };
-const ModalBody = defineComponent({
+const DialogBody = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalBody,
+    layout: __solidLayoutDialogBody,
     embedded: true
 });
-const __solidLayoutModalFooter = (_stable, p)=>{
+const __solidLayoutDialogFooter = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$0 = _tmpl$();
         spread(_el$0, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Footer.base, local.class, local.className)
+                class: twMerge(CLASSES.Footer.base, local.class)
             }), {
-            "data-slot": "modal-footer",
+            "data-slot": "dialog-footer",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -617,16 +608,15 @@ const __solidLayoutModalFooter = (_stable, p)=>{
         return _el$0;
     })();
 };
-const ModalFooter = defineComponent({
+const DialogFooter = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalFooter,
+    layout: __solidLayoutDialogFooter,
     embedded: true
 });
-const __solidLayoutModalCloseTrigger = (_stable, p)=>{
+const __solidLayoutDialogCloseTrigger = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "type",
@@ -645,12 +635,12 @@ const __solidLayoutModalCloseTrigger = (_stable, p)=>{
                 return local.type ?? "button";
             },
             get ["aria-label"] () {
-                return local["aria-label"] ?? "Close modal";
+                return local["aria-label"] ?? "Close dialog";
             }
         }, ()=>({
-                class: twMerge(CLASSES.CloseTrigger.base, local.class, local.className)
+                class: twMerge(CLASSES.CloseTrigger.base, local.class)
             }), {
-            "data-slot": "modal-close-trigger",
+            "data-slot": "dialog-close-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -664,7 +654,7 @@ const __solidLayoutModalCloseTrigger = (_stable, p)=>{
                 spread(_el$10, mergeProps(()=>({
                         class: CLASSES.CloseTrigger.icon
                     }), {
-                    "data-slot": "modal-close-trigger-icon",
+                    "data-slot": "dialog-close-trigger-icon",
                     viewBox: "0 0 24 24",
                     fill: "none",
                     xmlns: "http://www.w3.org/2000/svg",
@@ -675,23 +665,23 @@ const __solidLayoutModalCloseTrigger = (_stable, p)=>{
         return _el$1;
     })();
 };
-const ModalCloseTrigger = defineComponent({
+const DialogCloseTrigger = defineComponent({
     recipe: componentRecipe,
-    layout: __solidLayoutModalCloseTrigger,
+    layout: __solidLayoutDialogCloseTrigger,
     embedded: true
 });
-const Modal = Object.assign(ModalRoot, {
-    Root: ModalRoot,
-    Trigger: ModalTrigger,
-    Backdrop: ModalBackdrop,
-    Content: ModalContent,
-    Header: ModalHeader,
-    Heading: ModalHeading,
-    Icon: ModalIcon,
-    Body: ModalBody,
-    Footer: ModalFooter,
-    CloseTrigger: ModalCloseTrigger
+const Dialog = Object.assign(DialogRoot, {
+    Root: DialogRoot,
+    Trigger: DialogTrigger,
+    Backdrop: DialogBackdrop,
+    Content: DialogContent,
+    Header: DialogHeader,
+    Heading: DialogHeading,
+    Icon: DialogIcon,
+    Body: DialogBody,
+    Footer: DialogFooter,
+    CloseTrigger: DialogCloseTrigger
 });
-const Modal_generated = Modal;
-export default Modal_generated;
-export { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger };
+const Dialog_generated = Dialog;
+export default Dialog_generated;
+export { DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogHeading, DialogIcon, DialogRoot, DialogTrigger };

package/dist/components/dialog/Dialog.recipe.d.ts

@@ -0,0 +1,104 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "dialog";
+        readonly flag: {
+            readonly open: "dialog--open";
+        };
+    };
+    readonly Trigger: {
+        readonly base: "dialog__trigger";
+    };
+    readonly Backdrop: {
+        readonly base: "dialog__backdrop";
+        readonly variant: {
+            readonly transparent: "dialog__backdrop--transparent";
+            readonly opaque: "dialog__backdrop--opaque";
+            readonly blur: "dialog__backdrop--blur";
+        };
+        readonly state: {
+            readonly entering: "dialog__backdrop--entering";
+            readonly exiting: "dialog__backdrop--exiting";
+        };
+    };
+    readonly Container: {
+        readonly base: "dialog__container";
+        readonly placement: {
+            readonly auto: "dialog__container--auto";
+            readonly top: "dialog__container--top";
+            readonly center: "dialog__container--center";
+            readonly bottom: "dialog__container--bottom";
+        };
+        readonly scroll: {
+            readonly inside: "dialog__container--scroll-inside";
+            readonly outside: "dialog__container--scroll-outside";
+        };
+        readonly size: {
+            readonly cover: "dialog__container--size-cover";
+            readonly full: "dialog__container--size-full";
+        };
+        readonly state: {
+            readonly entering: "dialog__container--entering";
+            readonly exiting: "dialog__container--exiting";
+        };
+    };
+    readonly Content: {
+        readonly base: "dialog__content";
+        readonly scroll: {
+            readonly inside: "dialog__content--scroll-inside";
+            readonly outside: "dialog__content--scroll-outside";
+        };
+        readonly size: {
+            readonly xs: "dialog__content--xs";
+            readonly sm: "dialog__content--sm";
+            readonly md: "dialog__content--md";
+            readonly lg: "dialog__content--lg";
+            readonly cover: "dialog__content--cover";
+            readonly full: "dialog__content--full";
+        };
+        readonly state: {
+            readonly entering: "dialog__content--entering";
+            readonly exiting: "dialog__content--exiting";
+        };
+    };
+    readonly Header: {
+        readonly base: "dialog__header";
+    };
+    readonly Heading: {
+        readonly base: "dialog__heading";
+    };
+    readonly Icon: {
+        readonly base: "dialog__icon";
+    };
+    readonly Body: {
+        readonly base: "dialog__body";
+        readonly scroll: {
+            readonly inside: "dialog__body--scroll-inside";
+            readonly outside: "dialog__body--scroll-outside";
+        };
+    };
+    readonly Footer: {
+        readonly base: "dialog__footer";
+    };
+    readonly CloseTrigger: {
+        readonly base: "dialog__close-trigger";
+        readonly icon: "dialog__close-trigger-icon";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "dialog";
+    readonly slots: {
+        readonly "dialog-backdrop": {};
+        readonly "dialog-body": {};
+        readonly "dialog-close-trigger": {};
+        readonly "dialog-close-trigger-icon": {};
+        readonly "dialog-container": {};
+        readonly "dialog-content": {};
+        readonly "dialog-footer": {};
+        readonly "dialog-header": {};
+        readonly "dialog-heading": {};
+        readonly "dialog-icon": {};
+        readonly "dialog-root": {};
+        readonly "dialog-trigger": {};
+        readonly root: {};
+    };
+}>;