@pathscale/ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,375 @@
+import { Portal, createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Popover.css";
+import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+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>");
+const PopoverContext = createContext();
+const usePopoverContext = ()=>{
+    const ctx = useContext(PopoverContext);
+    if (!ctx) throw new Error("Popover compound components must be used within <Popover>");
+    return ctx;
+};
+const __solidLayoutPopoverRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "placement",
+        "autoFlip",
+        "offset",
+        "closeOnOutsideClick",
+        "closeOnEscape",
+        "onInteractOutside"
+    ]);
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.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.isOpen);
+    const isOpen = createMemo(()=>isControlled() ? Boolean(local.isOpen) : internalOpen());
+    const setIsOpen = (next, options)=>{
+        if (!isControlled()) setInternalOpen(next);
+        if (isOpen() !== next) local.onOpenChange?.(next);
+        if (!next && options?.focusTrigger) triggerRef()?.focus();
+    };
+    const preferredPlacement = ()=>local.placement ?? "bottom";
+    const placement = ()=>resolvedPlacement();
+    const offset = ()=>local.offset ?? 8;
+    const autoFlip = ()=>local.autoFlip ?? true;
+    onMount(()=>{
+        const handlePointerDown = (event)=>{
+            if (!isOpen()) return;
+            if (false === local.closeOnOutsideClick) return;
+            const content = contentRef();
+            const trigger = triggerRef();
+            if (content?.contains(event.target)) return;
+            if (trigger?.contains(event.target)) return;
+            local.onInteractOutside?.(event);
+            setIsOpen(false, {
+                focusTrigger: false
+            });
+        };
+        const handleKeyDown = (event)=>{
+            if (!isOpen()) return;
+            if (false === local.closeOnEscape) return;
+            if ("Escape" !== event.key) return;
+            event.preventDefault();
+            setIsOpen(false, {
+                focusTrigger: true
+            });
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        document.addEventListener("keydown", handleKeyDown);
+        onCleanup(()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+            document.removeEventListener("keydown", handleKeyDown);
+        });
+    });
+    const ctx = {
+        isOpen,
+        setIsOpen,
+        preferredPlacement,
+        placement,
+        setPlacement: setResolvedPlacement,
+        autoFlip,
+        triggerRef,
+        setTriggerRef,
+        contentRef,
+        setContentRef,
+        triggerId,
+        contentId,
+        offset,
+        onInteractOutside: local.onInteractOutside
+    };
+    return createComponent(PopoverContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.slot.root, local.class, local.className)
+                }), {
+                "data-slot": "popover-root",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const PopoverRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutPopoverRoot,
+    embedded: true
+});
+const __solidLayoutPopoverTrigger = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick",
+        "onKeyDown"
+    ]);
+    const ctx = usePopoverContext();
+    const handleClick = (event)=>{
+        if ("function" == typeof local.onClick) local.onClick(event);
+        if (event.defaultPrevented) return;
+        ctx.setIsOpen(!ctx.isOpen());
+    };
+    const handleKeyDown = (event)=>{
+        if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
+        if (event.defaultPrevented) return;
+        if ("Enter" === event.key || " " === event.key) {
+            event.preventDefault();
+            ctx.setIsOpen(!ctx.isOpen());
+        }
+        if ("Escape" === event.key && ctx.isOpen()) {
+            event.preventDefault();
+            ctx.setIsOpen(false, {
+                focusTrigger: true
+            });
+        }
+    };
+    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, local.className)
+            }), {
+            "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;
+    })();
+};
+const PopoverTrigger = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutPopoverTrigger,
+    embedded: true
+});
+const __solidLayoutPopoverContent = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "sideOffset"
+    ]);
+    const ctx = usePopoverContext();
+    const overlayPosition = createOverlayPosition({
+        open: ctx.isOpen,
+        triggerRef: ctx.triggerRef,
+        overlayRef: ctx.contentRef,
+        placement: ctx.preferredPlacement,
+        offset: ()=>local.sideOffset ?? ctx.offset(),
+        autoFlip: ctx.autoFlip,
+        align: ()=>"center"
+    });
+    createEffect(()=>{
+        ctx.setPlacement(overlayPosition.placement());
+    });
+    const style = ()=>{
+        const overlayStyle = overlayPosition.style();
+        if ("string" == typeof local.style) return [
+            local.style,
+            Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
+        ].filter(Boolean).join("; ");
+        return {
+            ...local.style ?? {},
+            ...overlayStyle
+        };
+    };
+    return createComponent(Show, {
+        get when () {
+            return ctx.isOpen();
+        },
+        get children () {
+            return createComponent(Portal, {
+                get children () {
+                    var _el$3 = _tmpl$();
+                    use((el)=>ctx.setContentRef(el), _el$3);
+                    spread(_el$3, mergeProps(others, {
+                        get id () {
+                            return ctx.contentId();
+                        },
+                        role: "dialog"
+                    }, ()=>({
+                            class: twMerge(CLASSES.base, local.class, local.className)
+                        }), {
+                        "data-slot": "popover-content",
+                        get ["data-open"] () {
+                            return ctx.isOpen() ? "true" : "false";
+                        },
+                        get ["data-placement"] () {
+                            return ctx.placement();
+                        },
+                        get ["data-theme"] () {
+                            return local.dataTheme;
+                        },
+                        get style () {
+                            return style();
+                        },
+                        get ["aria-labelledby"] () {
+                            return ctx.triggerId();
+                        },
+                        get ["aria-hidden"] () {
+                            return ctx.isOpen() ? "false" : "true";
+                        }
+                    }), false, true);
+                    insert(_el$3, ()=>local.children);
+                    return _el$3;
+                }
+            });
+        }
+    });
+};
+const PopoverContent = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutPopoverContent,
+    embedded: true
+});
+const __solidLayoutPopoverDialog = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$();
+        spread(_el$4, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.dialog, local.class, local.className)
+            }), {
+            "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 PopoverDialog = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutPopoverDialog,
+    embedded: true
+});
+const __solidLayoutPopoverArrow = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "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, local.className)
+            }), {
+            "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;
+    })();
+};
+const PopoverArrow = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutPopoverArrow,
+    embedded: true
+});
+const __solidLayoutPopoverHeading = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$4();
+        spread(_el$7, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.heading, local.class, local.className)
+            }), {
+            "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 PopoverHeading = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutPopoverHeading,
+    embedded: true
+});
+const Popover = Object.assign(PopoverRoot, {
+    Root: PopoverRoot,
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+    Dialog: PopoverDialog,
+    Arrow: PopoverArrow,
+    Heading: PopoverHeading
+});
+const Popover_generated = Popover;
+export default Popover_generated;
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger };

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

@@ -0,0 +1,23 @@
+export declare const CLASSES: {
+    readonly base: "popover";
+    readonly slot: {
+        readonly root: "popover-root";
+        readonly trigger: "popover__trigger";
+        readonly dialog: "popover__dialog";
+        readonly arrow: "popover__arrow";
+        readonly heading: "popover__heading";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "popover";
+    readonly slots: {
+        readonly "popover-arrow": {};
+        readonly "popover-arrow-svg": {};
+        readonly "popover-content": {};
+        readonly "popover-dialog": {};
+        readonly "popover-heading": {};
+        readonly "popover-root": {};
+        readonly "popover-trigger": {};
+        readonly root: {};
+    };
+}>;

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

@@ -0,0 +1,72 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "popover",
+    slot: {
+        root: "popover-root",
+        trigger: "popover__trigger",
+        dialog: "popover__dialog",
+        arrow: "popover__arrow",
+        heading: "popover__heading"
+    }
+};
+const componentRecipe = recipe({
+    component: "popover",
+    slots: {
+        "popover-arrow": {},
+        "popover-arrow-svg": {},
+        "popover-content": {},
+        "popover-dialog": {},
+        "popover-heading": {},
+        "popover-root": {},
+        "popover-trigger": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "popover-arrow": {
+                base: "",
+                axes: {}
+            },
+            "popover-arrow-svg": {
+                base: "",
+                axes: {}
+            },
+            "popover-content": {
+                base: "",
+                axes: {}
+            },
+            "popover-dialog": {
+                base: "",
+                axes: {}
+            },
+            "popover-heading": {
+                base: "",
+                axes: {}
+            },
+            "popover-root": {
+                base: "",
+                axes: {}
+            },
+            "popover-trigger": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "popover-arrow": 0,
+            "popover-arrow-svg": 1,
+            "popover-content": 2,
+            "popover-dialog": 3,
+            "popover-heading": 4,
+            "popover-root": 5,
+            "popover-trigger": 6,
+            root: 7
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "solid-js";
-import Popover, { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading } from "./Popover";
+import Popover, { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading } from "./Popover.generated";
 export type PopoverProps = ComponentProps<typeof PopoverRoot>;
 export type PopoverRootProps = ComponentProps<typeof PopoverRoot>;
 export type PopoverTriggerProps = ComponentProps<typeof PopoverTrigger>;

package/dist/components/popover/index.js

@@ -1,4 +1,4 @@
-import Popover, { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger } from "./Popover.js";
-const popover = Popover;
+import Popover_generated, { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger } from "./Popover.generated.js";
+const popover = Popover_generated;
 export default popover;
 export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger };

package/dist/components/progress-bar/ProgressBar.generated.d.ts

@@ -0,0 +1,20 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ProgressBar.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ProgressBarSize = "sm" | "md" | "lg";
+export type ProgressBarColor = "default" | "accent" | "success" | "warning" | "danger";
+export type ProgressBarProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    value?: number;
+    minValue?: number;
+    maxValue?: number;
+    isIndeterminate?: boolean;
+    label?: string;
+    size?: ProgressBarSize;
+    color?: ProgressBarColor;
+    isDisabled?: boolean;
+    formatValue?: (value: number) => string;
+    showValue?: boolean;
+};
+declare const ProgressBar: __LayoutComponent<ProgressBarProps>;
+export default ProgressBar;

package/dist/components/progress-bar/ProgressBar.generated.js

@@ -0,0 +1,118 @@
+import { insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./ProgressBar.css";
+import { createMemo, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./ProgressBar.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div><div><div>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
+const __solidLayoutProgressBar = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "value",
+        "minValue",
+        "maxValue",
+        "isIndeterminate",
+        "label",
+        "size",
+        "color",
+        "isDisabled",
+        "formatValue",
+        "showValue",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const min = ()=>local.minValue ?? 0;
+    const max = ()=>local.maxValue ?? 100;
+    const isIndeterminate = ()=>Boolean(local.isIndeterminate) || void 0 === local.value;
+    const percentage = createMemo(()=>{
+        if (isIndeterminate()) return 0;
+        const clamped = Math.min(Math.max(local.value ?? 0, min()), max());
+        return (clamped - min()) / (max() - min()) * 100;
+    });
+    const valueText = createMemo(()=>{
+        if (isIndeterminate()) return "";
+        if (local.formatValue && void 0 !== local.value) return local.formatValue(local.value);
+        return `${Math.round(percentage())}%`;
+    });
+    const shouldShowValue = ()=>Boolean(local.showValue);
+    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.color[local.color ?? "accent"], isIndeterminate() && CLASSES.state.indeterminate, local.isDisabled && CLASSES.state.disabled, local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+        spread(_el$, mergeProps(others, {
+            role: "progressbar"
+        }, ()=>({
+                class: classes()
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-valuenow"] () {
+                return memo(()=>!!isIndeterminate())() ? void 0 : local.value;
+            },
+            get ["aria-valuemin"] () {
+                return min();
+            },
+            get ["aria-valuemax"] () {
+                return max();
+            },
+            get ["aria-valuetext"] () {
+                return memo(()=>!!isIndeterminate())() ? void 0 : valueText();
+            },
+            get ["aria-label"] () {
+                return local.label;
+            },
+            get ["aria-disabled"] () {
+                return local.isDisabled ? "true" : void 0;
+            },
+            get ["data-disabled"] () {
+                return local.isDisabled ? "true" : void 0;
+            }
+        }), false, true);
+        insert(_el$, (()=>{
+            var _c$ = memo(()=>!!local.label);
+            return ()=>_c$() && (()=>{
+                    var _el$4 = _tmpl$2();
+                    spread(_el$4, mergeProps(()=>({
+                            class: CLASSES.label
+                        })), false, true);
+                    insert(_el$4, ()=>local.label);
+                    return _el$4;
+                })();
+        })(), _el$2);
+        insert(_el$, (()=>{
+            var _c$2 = memo(()=>!!shouldShowValue());
+            return ()=>_c$2() && (()=>{
+                    var _el$5 = _tmpl$2();
+                    spread(_el$5, mergeProps(()=>({
+                            class: CLASSES.output
+                        })), false, true);
+                    insert(_el$5, valueText);
+                    return _el$5;
+                })();
+        })(), _el$2);
+        spread(_el$2, mergeProps(()=>({
+                class: CLASSES.track
+            })), false, true);
+        spread(_el$3, mergeProps(()=>({
+                class: CLASSES.indicator
+            }), {
+            get style () {
+                return memo(()=>!!isIndeterminate())() ? void 0 : {
+                    width: `${percentage()}%`
+                };
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const ProgressBar = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutProgressBar,
+    embedded: true
+});
+const ProgressBar_generated = ProgressBar;
+export default ProgressBar_generated;

package/dist/components/progress-bar/ProgressBar.recipe.d.ts

@@ -0,0 +1,29 @@
+export declare const CLASSES: {
+    readonly base: "progress-bar";
+    readonly label: "progress-bar__label";
+    readonly output: "progress-bar__output";
+    readonly track: "progress-bar__track";
+    readonly indicator: "progress-bar__indicator";
+    readonly size: {
+        readonly sm: "progress-bar--sm";
+        readonly md: "progress-bar--md";
+        readonly lg: "progress-bar--lg";
+    };
+    readonly color: {
+        readonly default: "progress-bar--default";
+        readonly accent: "progress-bar--accent";
+        readonly success: "progress-bar--success";
+        readonly warning: "progress-bar--warning";
+        readonly danger: "progress-bar--danger";
+    };
+    readonly state: {
+        readonly indeterminate: "progress-bar--indeterminate";
+        readonly disabled: "progress-bar--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "progress-bar";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;