@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/disclosure/Disclosure.generated.js

@@ -0,0 +1,334 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Disclosure.css";
+import { createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Disclosure.recipe.js";
+import { DisclosureGroupContext } from "../disclosure-group/DisclosureGroup.generated.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<div><div>"), _tmpl$5 = /*#__PURE__*/ template("<span>"), _tmpl$6 = /*#__PURE__*/ template('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
+const DisclosureContext = createContext();
+const useDisclosureContext = ()=>{
+    const ctx = useContext(DisclosureContext);
+    if (!ctx) throw new Error("Disclosure compound components must be used within <Disclosure>");
+    return ctx;
+};
+const normalizeKey = (value)=>String(value);
+const getGroupExpanded = (group, id)=>{
+    if (!group) return false;
+    return group.expandedKeys().has(id);
+};
+const updateGroupExpanded = (group, id, nextOpen)=>{
+    if (!group) return;
+    if (group.isDisabled()) return;
+    if (group.allowsMultipleExpanded()) {
+        const next = new Set(group.expandedKeys());
+        if (nextOpen) next.add(id);
+        else next.delete(id);
+        group.setExpandedKeys(next);
+        return;
+    }
+    group.setExpandedKeys(nextOpen ? new Set([
+        id
+    ]) : new Set());
+};
+const __solidLayoutDisclosureRoot = (_stable, p)=>{
+    const group = useContext(DisclosureGroupContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "id",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "isDisabled",
+        "disabled"
+    ]);
+    const uniqueId = createUniqueId();
+    const itemId = ()=>normalizeKey(local.id ?? uniqueId);
+    const triggerId = ()=>`disclosure-trigger-${itemId()}`;
+    const contentId = ()=>`disclosure-content-${itemId()}`;
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    const isControlled = createMemo(()=>void 0 !== local.isOpen);
+    const standaloneOpen = createMemo(()=>isControlled() ? Boolean(local.isOpen) : internalOpen());
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(group?.isDisabled());
+    const isExpanded = ()=>group ? getGroupExpanded(group, itemId()) : standaloneOpen();
+    const setOpen = (next)=>{
+        if (isDisabled()) return;
+        if (group) return void updateGroupExpanded(group, itemId(), next);
+        if (!isControlled()) setInternalOpen(next);
+        if (standaloneOpen() !== next) local.onOpenChange?.(next);
+    };
+    const toggle = ()=>setOpen(!isExpanded());
+    const ctx = {
+        isExpanded,
+        isDisabled,
+        triggerId,
+        contentId,
+        toggle
+    };
+    return createComponent(DisclosureContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.base, isExpanded() && CLASSES.flag.expanded, isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+                }), {
+                "data-slot": "disclosure",
+                get ["data-expanded"] () {
+                    return isExpanded() ? "true" : "false";
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const DisclosureRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDisclosureRoot,
+    embedded: true
+});
+const __solidLayoutDisclosureHeading = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.heading, local.class, local.className)
+            }), {
+            "data-slot": "disclosure-heading",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const DisclosureHeading = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDisclosureHeading,
+    embedded: true
+});
+const __solidLayoutDisclosureTrigger = (_stable, p)=>{
+    const ctx = useDisclosureContext();
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick",
+        "onKeyDown",
+        "type"
+    ]);
+    const handleClick = (event)=>{
+        if ("function" == typeof local.onClick) local.onClick(event);
+        if (event.defaultPrevented) return;
+        ctx.toggle();
+    };
+    const handleKeyDown = (event)=>{
+        if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
+        if (event.defaultPrevented) return;
+        if ("Enter" === event.key || " " === event.key) {
+            event.preventDefault();
+            ctx.toggle();
+        }
+    };
+    return (()=>{
+        var _el$3 = _tmpl$3();
+        spread(_el$3, mergeProps(others, {
+            get id () {
+                return ctx.triggerId();
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.trigger, local.class, local.className)
+            }), {
+            "data-slot": "disclosure-trigger",
+            get ["data-expanded"] () {
+                return ctx.isExpanded() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-expanded"] () {
+                return ctx.isExpanded() ? "true" : "false";
+            },
+            get ["aria-controls"] () {
+                return ctx.contentId();
+            },
+            get ["aria-disabled"] () {
+                return ctx.isDisabled() ? "true" : void 0;
+            },
+            get disabled () {
+                return ctx.isDisabled();
+            },
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        }), false, true);
+        insert(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const DisclosureTrigger = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDisclosureTrigger,
+    embedded: true
+});
+const __solidLayoutDisclosureContent = (_stable, p)=>{
+    const ctx = useDisclosureContext();
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "keepMounted"
+    ]);
+    const expanded = ()=>ctx.isExpanded();
+    const keepMounted = ()=>local.keepMounted ?? true;
+    if (!keepMounted() && !expanded()) return null;
+    return (()=>{
+        var _el$4 = _tmpl$();
+        spread(_el$4, mergeProps(others, {
+            get id () {
+                return ctx.contentId();
+            },
+            role: "region"
+        }, ()=>({
+                class: twMerge(CLASSES.slot.content, local.class, local.className)
+            }), {
+            "data-slot": "disclosure-content",
+            get ["data-expanded"] () {
+                return expanded() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-hidden"] () {
+                return expanded() ? "false" : "true";
+            },
+            get ["aria-labelledby"] () {
+                return ctx.triggerId();
+            }
+        }), false, true);
+        insert(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const DisclosureContent = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDisclosureContent,
+    embedded: true
+});
+const __solidLayoutDisclosureBody = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
+        spread(_el$5, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.body, local.class, local.className)
+            }), {
+            "data-slot": "disclosure-body",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        spread(_el$6, mergeProps(()=>({
+                class: CLASSES.slot.bodyInner
+            }), {
+            "data-slot": "disclosure-body-inner"
+        }), false, true);
+        insert(_el$6, ()=>local.children);
+        return _el$5;
+    })();
+};
+const DisclosureBody = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDisclosureBody,
+    embedded: true
+});
+const __solidLayoutDisclosureIndicator = (_stable, p)=>{
+    const ctx = useDisclosureContext();
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$5();
+        spread(_el$7, mergeProps(others, {
+            "aria-hidden": "true"
+        }, ()=>({
+                class: twMerge(CLASSES.slot.indicator, local.class, local.className)
+            }), {
+            "data-slot": "disclosure-indicator",
+            get ["data-expanded"] () {
+                return ctx.isExpanded() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$7, ()=>local.children ?? _tmpl$6());
+        return _el$7;
+    })();
+};
+const DisclosureIndicator = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDisclosureIndicator,
+    embedded: true
+});
+const Disclosure = Object.assign(DisclosureRoot, {
+    Root: DisclosureRoot,
+    Heading: DisclosureHeading,
+    Trigger: DisclosureTrigger,
+    Content: DisclosureContent,
+    Body: DisclosureBody,
+    Indicator: DisclosureIndicator
+});
+const Disclosure_generated = Disclosure;
+export default Disclosure_generated;
+export { DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureRoot, DisclosureTrigger };

package/dist/components/disclosure/Disclosure.recipe.d.ts

@@ -0,0 +1,28 @@
+export declare const CLASSES: {
+    readonly base: "disclosure";
+    readonly slot: {
+        readonly heading: "disclosure__heading";
+        readonly trigger: "disclosure__trigger";
+        readonly indicator: "disclosure__indicator";
+        readonly content: "disclosure__content";
+        readonly body: "disclosure__body";
+        readonly bodyInner: "disclosure__body-inner";
+    };
+    readonly flag: {
+        readonly expanded: "disclosure--expanded";
+        readonly disabled: "disclosure--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "disclosure";
+    readonly slots: {
+        readonly disclosure: {};
+        readonly "disclosure-body": {};
+        readonly "disclosure-body-inner": {};
+        readonly "disclosure-content": {};
+        readonly "disclosure-heading": {};
+        readonly "disclosure-indicator": {};
+        readonly "disclosure-trigger": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/disclosure/Disclosure.recipe.js

@@ -0,0 +1,77 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "disclosure",
+    slot: {
+        heading: "disclosure__heading",
+        trigger: "disclosure__trigger",
+        indicator: "disclosure__indicator",
+        content: "disclosure__content",
+        body: "disclosure__body",
+        bodyInner: "disclosure__body-inner"
+    },
+    flag: {
+        expanded: "disclosure--expanded",
+        disabled: "disclosure--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "disclosure",
+    slots: {
+        disclosure: {},
+        "disclosure-body": {},
+        "disclosure-body-inner": {},
+        "disclosure-content": {},
+        "disclosure-heading": {},
+        "disclosure-indicator": {},
+        "disclosure-trigger": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            disclosure: {
+                base: "",
+                axes: {}
+            },
+            "disclosure-body": {
+                base: "",
+                axes: {}
+            },
+            "disclosure-body-inner": {
+                base: "",
+                axes: {}
+            },
+            "disclosure-content": {
+                base: "",
+                axes: {}
+            },
+            "disclosure-heading": {
+                base: "",
+                axes: {}
+            },
+            "disclosure-indicator": {
+                base: "",
+                axes: {}
+            },
+            "disclosure-trigger": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            disclosure: 0,
+            "disclosure-body": 1,
+            "disclosure-body-inner": 2,
+            "disclosure-content": 3,
+            "disclosure-heading": 4,
+            "disclosure-indicator": 5,
+            "disclosure-trigger": 6,
+            root: 7
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "solid-js";
-import Disclosure, { DisclosureRoot, DisclosureHeading, DisclosureTrigger, DisclosureContent, DisclosureBody, DisclosureIndicator } from "./Disclosure";
+import Disclosure, { DisclosureRoot, DisclosureHeading, DisclosureTrigger, DisclosureContent, DisclosureBody, DisclosureIndicator } from "./Disclosure.generated";
 export type DisclosureProps = ComponentProps<typeof DisclosureRoot>;
 export type DisclosureRootProps = ComponentProps<typeof DisclosureRoot>;
 export type DisclosureHeadingProps = ComponentProps<typeof DisclosureHeading>;

package/dist/components/disclosure/index.js

@@ -1,4 +1,4 @@
-import Disclosure, { DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureRoot, DisclosureTrigger } from "./Disclosure.js";
-const disclosure = Disclosure;
+import Disclosure_generated, { DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureRoot, DisclosureTrigger } from "./Disclosure.generated.js";
+const disclosure = Disclosure_generated;
 export default disclosure;
 export { DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureRoot, DisclosureTrigger };

package/dist/components/disclosure-group/DisclosureGroup.generated.d.ts

@@ -0,0 +1,26 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./DisclosureGroup.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type DisclosureGroupContextValue = {
+    expandedKeys: () => Set<string>;
+    setExpandedKeys: (keys: Set<string>) => void;
+    allowsMultipleExpanded: () => boolean;
+    isDisabled: () => boolean;
+};
+export declare const DisclosureGroupContext: import("solid-js").Context<DisclosureGroupContextValue | undefined>;
+export type DisclosureGroupRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    expandedKeys?: Set<string | number>;
+    defaultExpandedKeys?: Set<string | number>;
+    onExpandedChange?: (keys: Set<string | number>) => void;
+    allowsMultipleExpanded?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+};
+declare const DisclosureGroupRoot: __LayoutComponent<DisclosureGroupRootProps>;
+declare const DisclosureGroup: __LayoutComponent<DisclosureGroupRootProps> & {
+    Root: __LayoutComponent<DisclosureGroupRootProps>;
+};
+export default DisclosureGroup;
+export { DisclosureGroupRoot };

package/dist/components/disclosure-group/DisclosureGroup.generated.js

@@ -0,0 +1,80 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./DisclosureGroup.css";
+import { createContext, createMemo, createSignal, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./DisclosureGroup.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const DisclosureGroupContext = createContext();
+const normalizeKeys = (keys)=>{
+    if (!keys) return new Set();
+    return new Set(Array.from(keys).map((key)=>String(key)));
+};
+const __solidLayoutDisclosureGroupRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "expandedKeys",
+        "defaultExpandedKeys",
+        "onExpandedChange",
+        "allowsMultipleExpanded",
+        "isDisabled",
+        "disabled"
+    ]);
+    const allowsMultipleExpanded = ()=>Boolean(local.allowsMultipleExpanded);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const [internalKeys, setInternalKeys] = createSignal(normalizeKeys(local.defaultExpandedKeys));
+    const expandedKeys = createMemo(()=>void 0 !== local.expandedKeys ? normalizeKeys(local.expandedKeys) : internalKeys());
+    const setExpandedKeys = (keys)=>{
+        if (void 0 === local.expandedKeys) setInternalKeys(new Set(keys));
+        local.onExpandedChange?.(new Set(keys));
+    };
+    const ctx = {
+        expandedKeys,
+        setExpandedKeys,
+        allowsMultipleExpanded,
+        isDisabled
+    };
+    return createComponent(DisclosureGroupContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.base, local.class, local.className)
+                }), {
+                "data-slot": "disclosure-group",
+                get ["data-multiple"] () {
+                    return allowsMultipleExpanded() ? "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;
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const DisclosureGroupRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDisclosureGroupRoot,
+    embedded: true
+});
+const DisclosureGroup = Object.assign(DisclosureGroupRoot, {
+    Root: DisclosureGroupRoot
+});
+const DisclosureGroup_generated = DisclosureGroup;
+export default DisclosureGroup_generated;
+export { DisclosureGroupContext, DisclosureGroupRoot };

package/dist/components/disclosure-group/DisclosureGroup.recipe.d.ts

@@ -0,0 +1,10 @@
+export declare const CLASSES: {
+    readonly base: "disclosure-group";
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "disclosure-group";
+    readonly slots: {
+        readonly "disclosure-group": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/disclosure-group/DisclosureGroup.recipe.js

@@ -0,0 +1,29 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "disclosure-group"
+};
+const componentRecipe = recipe({
+    component: "disclosure-group",
+    slots: {
+        "disclosure-group": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "disclosure-group": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "disclosure-group": 0,
+            root: 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/disclosure-group/index.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "solid-js";
-import DisclosureGroup, { DisclosureGroupRoot } from "./DisclosureGroup";
+import DisclosureGroup, { DisclosureGroupRoot } from "./DisclosureGroup.generated";
 import { useDisclosureGroupNavigation } from "./useDisclosureGroupNavigation";
 export type DisclosureGroupProps = ComponentProps<typeof DisclosureGroupRoot>;
 export type DisclosureGroupRootProps = ComponentProps<typeof DisclosureGroupRoot>;

package/dist/components/disclosure-group/index.js

@@ -1,5 +1,5 @@
-import DisclosureGroup, { DisclosureGroupRoot } from "./DisclosureGroup.js";
-const disclosure_group = DisclosureGroup;
+import DisclosureGroup_generated, { DisclosureGroupRoot } from "./DisclosureGroup.generated.js";
+const disclosure_group = DisclosureGroup_generated;
 export { useDisclosureGroupNavigation } from "./useDisclosureGroupNavigation.js";
 export default disclosure_group;
 export { DisclosureGroupRoot };