@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/modal/Modal.recipe.d.ts

@@ -0,0 +1,104 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "modal";
+        readonly flag: {
+            readonly open: "modal--open";
+        };
+    };
+    readonly Trigger: {
+        readonly base: "modal__trigger";
+    };
+    readonly Backdrop: {
+        readonly base: "modal__backdrop";
+        readonly variant: {
+            readonly transparent: "modal__backdrop--transparent";
+            readonly opaque: "modal__backdrop--opaque";
+            readonly blur: "modal__backdrop--blur";
+        };
+        readonly state: {
+            readonly entering: "modal__backdrop--entering";
+            readonly exiting: "modal__backdrop--exiting";
+        };
+    };
+    readonly Container: {
+        readonly base: "modal__container";
+        readonly placement: {
+            readonly auto: "modal__container--auto";
+            readonly top: "modal__container--top";
+            readonly center: "modal__container--center";
+            readonly bottom: "modal__container--bottom";
+        };
+        readonly scroll: {
+            readonly inside: "modal__container--scroll-inside";
+            readonly outside: "modal__container--scroll-outside";
+        };
+        readonly size: {
+            readonly cover: "modal__container--size-cover";
+            readonly full: "modal__container--size-full";
+        };
+        readonly state: {
+            readonly entering: "modal__container--entering";
+            readonly exiting: "modal__container--exiting";
+        };
+    };
+    readonly Content: {
+        readonly base: "modal__content";
+        readonly scroll: {
+            readonly inside: "modal__content--scroll-inside";
+            readonly outside: "modal__content--scroll-outside";
+        };
+        readonly size: {
+            readonly xs: "modal__content--xs";
+            readonly sm: "modal__content--sm";
+            readonly md: "modal__content--md";
+            readonly lg: "modal__content--lg";
+            readonly cover: "modal__content--cover";
+            readonly full: "modal__content--full";
+        };
+        readonly state: {
+            readonly entering: "modal__content--entering";
+            readonly exiting: "modal__content--exiting";
+        };
+    };
+    readonly Header: {
+        readonly base: "modal__header";
+    };
+    readonly Heading: {
+        readonly base: "modal__heading";
+    };
+    readonly Icon: {
+        readonly base: "modal__icon";
+    };
+    readonly Body: {
+        readonly base: "modal__body";
+        readonly scroll: {
+            readonly inside: "modal__body--scroll-inside";
+            readonly outside: "modal__body--scroll-outside";
+        };
+    };
+    readonly Footer: {
+        readonly base: "modal__footer";
+    };
+    readonly CloseTrigger: {
+        readonly base: "modal__close-trigger";
+        readonly icon: "modal__close-trigger-icon";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "modal";
+    readonly slots: {
+        readonly "modal-backdrop": {};
+        readonly "modal-body": {};
+        readonly "modal-close-trigger": {};
+        readonly "modal-close-trigger-icon": {};
+        readonly "modal-container": {};
+        readonly "modal-content": {};
+        readonly "modal-footer": {};
+        readonly "modal-header": {};
+        readonly "modal-heading": {};
+        readonly "modal-icon": {};
+        readonly "modal-root": {};
+        readonly "modal-trigger": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/modal/Modal.recipe.js

@@ -0,0 +1,178 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Root: {
+        base: "modal",
+        flag: {
+            open: "modal--open"
+        }
+    },
+    Trigger: {
+        base: "modal__trigger"
+    },
+    Backdrop: {
+        base: "modal__backdrop",
+        variant: {
+            transparent: "modal__backdrop--transparent",
+            opaque: "modal__backdrop--opaque",
+            blur: "modal__backdrop--blur"
+        },
+        state: {
+            entering: "modal__backdrop--entering",
+            exiting: "modal__backdrop--exiting"
+        }
+    },
+    Container: {
+        base: "modal__container",
+        placement: {
+            auto: "modal__container--auto",
+            top: "modal__container--top",
+            center: "modal__container--center",
+            bottom: "modal__container--bottom"
+        },
+        scroll: {
+            inside: "modal__container--scroll-inside",
+            outside: "modal__container--scroll-outside"
+        },
+        size: {
+            cover: "modal__container--size-cover",
+            full: "modal__container--size-full"
+        },
+        state: {
+            entering: "modal__container--entering",
+            exiting: "modal__container--exiting"
+        }
+    },
+    Content: {
+        base: "modal__content",
+        scroll: {
+            inside: "modal__content--scroll-inside",
+            outside: "modal__content--scroll-outside"
+        },
+        size: {
+            xs: "modal__content--xs",
+            sm: "modal__content--sm",
+            md: "modal__content--md",
+            lg: "modal__content--lg",
+            cover: "modal__content--cover",
+            full: "modal__content--full"
+        },
+        state: {
+            entering: "modal__content--entering",
+            exiting: "modal__content--exiting"
+        }
+    },
+    Header: {
+        base: "modal__header"
+    },
+    Heading: {
+        base: "modal__heading"
+    },
+    Icon: {
+        base: "modal__icon"
+    },
+    Body: {
+        base: "modal__body",
+        scroll: {
+            inside: "modal__body--scroll-inside",
+            outside: "modal__body--scroll-outside"
+        }
+    },
+    Footer: {
+        base: "modal__footer"
+    },
+    CloseTrigger: {
+        base: "modal__close-trigger",
+        icon: "modal__close-trigger-icon"
+    }
+};
+const componentRecipe = recipe({
+    component: "modal",
+    slots: {
+        "modal-backdrop": {},
+        "modal-body": {},
+        "modal-close-trigger": {},
+        "modal-close-trigger-icon": {},
+        "modal-container": {},
+        "modal-content": {},
+        "modal-footer": {},
+        "modal-header": {},
+        "modal-heading": {},
+        "modal-icon": {},
+        "modal-root": {},
+        "modal-trigger": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "modal-backdrop": {
+                base: "",
+                axes: {}
+            },
+            "modal-body": {
+                base: "",
+                axes: {}
+            },
+            "modal-close-trigger": {
+                base: "",
+                axes: {}
+            },
+            "modal-close-trigger-icon": {
+                base: "",
+                axes: {}
+            },
+            "modal-container": {
+                base: "",
+                axes: {}
+            },
+            "modal-content": {
+                base: "",
+                axes: {}
+            },
+            "modal-footer": {
+                base: "",
+                axes: {}
+            },
+            "modal-header": {
+                base: "",
+                axes: {}
+            },
+            "modal-heading": {
+                base: "",
+                axes: {}
+            },
+            "modal-icon": {
+                base: "",
+                axes: {}
+            },
+            "modal-root": {
+                base: "",
+                axes: {}
+            },
+            "modal-trigger": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "modal-backdrop": 0,
+            "modal-body": 1,
+            "modal-close-trigger": 2,
+            "modal-close-trigger-icon": 3,
+            "modal-container": 4,
+            "modal-content": 5,
+            "modal-footer": 6,
+            "modal-header": 7,
+            "modal-heading": 8,
+            "modal-icon": 9,
+            "modal-root": 10,
+            "modal-trigger": 11,
+            root: 12
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/modal/index.d.ts

@@ -1 +1 @@
-export { default, ModalRoot, ModalTrigger, ModalBackdrop, ModalContent, ModalHeader, ModalHeading, ModalIcon, ModalBody, ModalFooter, ModalCloseTrigger, type ModalProps, type DialogProps, type ModalPlacement, type ModalSize, type ModalBackdropVariant, type ModalScrollBehavior, type ModalRootProps, type ModalTriggerProps, type ModalBackdropProps, type ModalContentProps, type ModalHeaderProps, type ModalHeadingProps, type ModalIconProps, type ModalBodyProps, type ModalFooterProps, type ModalCloseTriggerProps, } from "./Modal";
+export { default, ModalRoot, ModalTrigger, ModalBackdrop, ModalContent, ModalHeader, ModalHeading, ModalIcon, ModalBody, ModalFooter, ModalCloseTrigger, type ModalProps, type DialogProps, type ModalPlacement, type ModalSize, type ModalBackdropVariant, type ModalScrollBehavior, type ModalRootProps, type ModalTriggerProps, type ModalBackdropProps, type ModalContentProps, type ModalHeaderProps, type ModalHeadingProps, type ModalIconProps, type ModalBodyProps, type ModalFooterProps, type ModalCloseTriggerProps, } from "./Modal.generated";

package/dist/components/modal/index.js

@@ -1 +1 @@
-export { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger, default } from "./Modal.js";
+export { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger, default } from "./Modal.generated.js";

package/dist/components/navbar/Navbar.generated.d.ts

@@ -0,0 +1,17 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Navbar.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type NavbarProps = JSX.HTMLAttributes<HTMLElement> & IComponentBaseProps & {
+    as?: keyof JSX.IntrinsicElements;
+    dataTheme?: string;
+    className?: string;
+};
+declare const _default: __LayoutComponent<NavbarProps> & {
+    Start: __LayoutComponent<JSX.HTMLAttributes<HTMLDivElement>>;
+    Center: __LayoutComponent<JSX.HTMLAttributes<HTMLDivElement>>;
+    End: __LayoutComponent<JSX.HTMLAttributes<HTMLDivElement>>;
+    Stack: __LayoutComponent<import("./NavbarStack.generated").NavbarStackProps>;
+    Row: __LayoutComponent<import("./NavbarRow.generated").NavbarRowProps>;
+};
+export default _default;

package/dist/components/navbar/Navbar.generated.js

@@ -0,0 +1,76 @@
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Navbar.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import NavbarSection_generated from "./NavbarSection.generated.js";
+import NavbarStack_generated from "./NavbarStack.generated.js";
+import NavbarRow_generated from "./NavbarRow.generated.js";
+import { CLASSES, componentRecipe } from "./Navbar.recipe.js";
+const __solidLayoutNavbar = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "as",
+        "class",
+        "className",
+        "style",
+        "children",
+        "dataTheme"
+    ]);
+    const Tag = local.as || "div";
+    const classes = ()=>twMerge(CLASSES.navbar.base, local.class, local.className);
+    return createComponent(Dynamic, mergeProps({
+        component: Tag,
+        role: "navigation",
+        "aria-label": "Navbar"
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        }
+    }, ()=>({
+            class: classes()
+        }), {
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const Navbar = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutNavbar,
+    embedded: true
+});
+const __solidLayoutNavbarStart = (_stable, p)=>createComponent(NavbarSection_generated, mergeProps({
+        section: "start"
+    }, p));
+const NavbarStart = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutNavbarStart,
+    embedded: true
+});
+const __solidLayoutNavbarCenter = (_stable, p)=>createComponent(NavbarSection_generated, mergeProps({
+        section: "center"
+    }, p));
+const NavbarCenter = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutNavbarCenter,
+    embedded: true
+});
+const __solidLayoutNavbarEnd = (_stable, p)=>createComponent(NavbarSection_generated, mergeProps({
+        section: "end"
+    }, p));
+const NavbarEnd = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutNavbarEnd,
+    embedded: true
+});
+const Navbar_generated = Object.assign(Navbar, {
+    Start: NavbarStart,
+    Center: NavbarCenter,
+    End: NavbarEnd,
+    Stack: NavbarStack_generated,
+    Row: NavbarRow_generated
+});
+export default Navbar_generated;

package/dist/components/navbar/Navbar.recipe.d.ts

@@ -0,0 +1,53 @@
+export declare const CLASSES: {
+    readonly navbar: {
+        readonly base: "navbar";
+    };
+    readonly start: {
+        readonly base: "navbar__section navbar__section--start";
+    };
+    readonly center: {
+        readonly base: "navbar__section navbar__section--center";
+    };
+    readonly end: {
+        readonly base: "navbar__section navbar__section--end";
+    };
+    readonly section: {
+        readonly base: "navbar__section";
+        readonly variant: {
+            readonly start: "navbar__section--start";
+            readonly center: "navbar__section--center";
+            readonly end: "navbar__section--end";
+        };
+    };
+    readonly stack: {
+        readonly base: "navbar__stack";
+        readonly flag: {
+            readonly sticky: "navbar__stack--sticky";
+            readonly container: "navbar__stack--container";
+        };
+    };
+    readonly row: {
+        readonly base: "navbar__row";
+        readonly flag: {
+            readonly bordered: "navbar__row--bordered";
+            readonly padded: "navbar__row--padded";
+        };
+        readonly color: {
+            readonly ghost: "navbar__row--ghost";
+            readonly neutral: "navbar__row--neutral";
+            readonly primary: "navbar__row--primary";
+            readonly secondary: "navbar__row--secondary";
+            readonly accent: "navbar__row--accent";
+            readonly info: "navbar__row--info";
+            readonly success: "navbar__row--success";
+            readonly warning: "navbar__row--warning";
+            readonly error: "navbar__row--error";
+        };
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "navbar";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/navbar/Navbar.recipe.js

@@ -0,0 +1,67 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    navbar: {
+        base: "navbar"
+    },
+    start: {
+        base: "navbar__section navbar__section--start"
+    },
+    center: {
+        base: "navbar__section navbar__section--center"
+    },
+    end: {
+        base: "navbar__section navbar__section--end"
+    },
+    section: {
+        base: "navbar__section",
+        variant: {
+            start: "navbar__section--start",
+            center: "navbar__section--center",
+            end: "navbar__section--end"
+        }
+    },
+    stack: {
+        base: "navbar__stack",
+        flag: {
+            sticky: "navbar__stack--sticky",
+            container: "navbar__stack--container"
+        }
+    },
+    row: {
+        base: "navbar__row",
+        flag: {
+            bordered: "navbar__row--bordered",
+            padded: "navbar__row--padded"
+        },
+        color: {
+            ghost: "navbar__row--ghost",
+            neutral: "navbar__row--neutral",
+            primary: "navbar__row--primary",
+            secondary: "navbar__row--secondary",
+            accent: "navbar__row--accent",
+            info: "navbar__row--info",
+            success: "navbar__row--success",
+            warning: "navbar__row--warning",
+            error: "navbar__row--error"
+        }
+    }
+};
+const componentRecipe = recipe({
+    component: "navbar",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/navbar/NavbarRow.generated.d.ts

@@ -0,0 +1,10 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps, ComponentColor } from "../types";
+export type NavbarRowProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+    bordered?: boolean;
+    padded?: boolean;
+    color?: ComponentColor;
+};
+declare const NavbarRow: __LayoutComponent<NavbarRowProps>;
+export default NavbarRow;

package/dist/components/navbar/NavbarRow.generated.js

@@ -0,0 +1,43 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { children, createMemo, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Navbar.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutNavbarRow = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "bordered",
+        "padded",
+        "color",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const colorKey = ()=>local.color && "ghost" !== local.color ? local.color : "ghost";
+    const classes = createMemo(()=>twMerge(CLASSES.row.base, true === local.bordered && CLASSES.row.flag.bordered, false !== local.padded && CLASSES.row.flag.padded, CLASSES.row.color[colorKey()], local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(()=>({
+                class: classes()
+            }), {
+            get style () {
+                return local.style;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, others), false, true);
+        insert(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const NavbarRow = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutNavbarRow,
+    embedded: true
+});
+const NavbarRow_generated = NavbarRow;
+export default NavbarRow_generated;

package/dist/components/navbar/NavbarSection.generated.d.ts

@@ -0,0 +1,9 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+export type NavbarSectionProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    section: "start" | "center" | "end";
+    dataTheme?: string;
+    className?: string;
+};
+declare const NavbarSection: __LayoutComponent<NavbarSectionProps>;
+export default NavbarSection;

package/dist/components/navbar/NavbarSection.generated.js

@@ -0,0 +1,40 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Navbar.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutNavbarSection = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "section",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const classes = ()=>twMerge(CLASSES.section.base, CLASSES.section.variant[local.section], local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, ()=>({
+                class: classes()
+            }), {
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const NavbarSection = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutNavbarSection,
+    embedded: true
+});
+const NavbarSection_generated = NavbarSection;
+export default NavbarSection_generated;

package/dist/components/navbar/NavbarStack.generated.d.ts

@@ -0,0 +1,11 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type NavbarStackProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+    sticky?: boolean;
+    container?: boolean;
+    className?: string;
+    dataTheme?: string;
+};
+declare const NavbarStack: __LayoutComponent<NavbarStackProps>;
+export default NavbarStack;

package/dist/components/navbar/NavbarStack.generated.js

@@ -0,0 +1,41 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { children, createMemo, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Navbar.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutNavbarStack = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "sticky",
+        "container",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    const classes = createMemo(()=>twMerge(CLASSES.stack.base, local.sticky && CLASSES.stack.flag.sticky, local.container && CLASSES.stack.flag.container, local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(()=>({
+                class: classes()
+            }), {
+            get style () {
+                return local.style;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, others), false, true);
+        insert(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const NavbarStack = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutNavbarStack,
+    embedded: true
+});
+const NavbarStack_generated = NavbarStack;
+export default NavbarStack_generated;

package/dist/components/navbar/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from "./Navbar";
-export type { NavbarProps } from "./Navbar";
-export type { NavbarStackProps } from "./NavbarStack";
-export type { NavbarRowProps } from "./NavbarRow";
+export { default } from "./Navbar.generated";
+export type { NavbarProps } from "./Navbar.generated";
+export type { NavbarStackProps } from "./NavbarStack.generated";
+export type { NavbarRowProps } from "./NavbarRow.generated";

package/dist/components/navbar/index.js

@@ -1 +1 @@
-export { default } from "./Navbar.js";
+export { default } from "./Navbar.generated.js";