@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/popover/Popover.js

@@ -1,344 +0,0 @@
-import { Portal, createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-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 } from "./Popover.classes.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 PopoverRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 PopoverTrigger = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 PopoverContent = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 PopoverDialog = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 PopoverArrow = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 PopoverHeading = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 Popover = Object.assign(PopoverRoot, {
-    Root: PopoverRoot,
-    Trigger: PopoverTrigger,
-    Content: PopoverContent,
-    Dialog: PopoverDialog,
-    Arrow: PopoverArrow,
-    Heading: PopoverHeading
-});
-const popover_Popover = Popover;
-export default popover_Popover;
-export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger };

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

@@ -1,23 +0,0 @@
-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";
-    };
-};

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

@@ -1,24 +0,0 @@
-const CLASSES = {
-    base: "progress-bar",
-    label: "progress-bar__label",
-    output: "progress-bar__output",
-    track: "progress-bar__track",
-    indicator: "progress-bar__indicator",
-    size: {
-        sm: "progress-bar--sm",
-        md: "progress-bar--md",
-        lg: "progress-bar--lg"
-    },
-    color: {
-        default: "progress-bar--default",
-        accent: "progress-bar--accent",
-        success: "progress-bar--success",
-        warning: "progress-bar--warning",
-        danger: "progress-bar--danger"
-    },
-    state: {
-        indeterminate: "progress-bar--indeterminate",
-        disabled: "progress-bar--disabled"
-    }
-};
-export { CLASSES };

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

@@ -1,19 +0,0 @@
-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: (props: ProgressBarProps) => JSX.Element;
-export default ProgressBar;

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

@@ -1,112 +0,0 @@
-import { insert, memo, mergeProps, spread, template } from "solid-js/web";
-import "./ProgressBar.css";
-import { createMemo, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./ProgressBar.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><div><div>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
-const ProgressBar = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 progress_bar_ProgressBar = ProgressBar;
-export default progress_bar_ProgressBar;

package/dist/components/progress-circle/ProgressCircle.classes.d.ts

@@ -1,22 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "progress-circle";
-    readonly svg: "progress-circle__track";
-    readonly trackCircle: "progress-circle__track-circle";
-    readonly indicator: "progress-circle__indicator";
-    readonly size: {
-        readonly sm: "progress-circle--sm";
-        readonly md: "progress-circle--md";
-        readonly lg: "progress-circle--lg";
-    };
-    readonly color: {
-        readonly default: "progress-circle--default";
-        readonly accent: "progress-circle--accent";
-        readonly success: "progress-circle--success";
-        readonly warning: "progress-circle--warning";
-        readonly danger: "progress-circle--danger";
-    };
-    readonly state: {
-        readonly indeterminate: "progress-circle--indeterminate";
-        readonly disabled: "progress-circle--disabled";
-    };
-};

package/dist/components/progress-circle/ProgressCircle.classes.js

@@ -1,23 +0,0 @@
-const CLASSES = {
-    base: "progress-circle",
-    svg: "progress-circle__track",
-    trackCircle: "progress-circle__track-circle",
-    indicator: "progress-circle__indicator",
-    size: {
-        sm: "progress-circle--sm",
-        md: "progress-circle--md",
-        lg: "progress-circle--lg"
-    },
-    color: {
-        default: "progress-circle--default",
-        accent: "progress-circle--accent",
-        success: "progress-circle--success",
-        warning: "progress-circle--warning",
-        danger: "progress-circle--danger"
-    },
-    state: {
-        indeterminate: "progress-circle--indeterminate",
-        disabled: "progress-circle--disabled"
-    }
-};
-export { CLASSES };

package/dist/components/progress-circle/ProgressCircle.d.ts

@@ -1,18 +0,0 @@
-import "./ProgressCircle.css";
-import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ProgressCircleSize = "sm" | "md" | "lg";
-export type ProgressCircleColor = "default" | "accent" | "success" | "warning" | "danger";
-export type ProgressCircleProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & {
-    value?: number;
-    minValue?: number;
-    maxValue?: number;
-    isIndeterminate?: boolean;
-    size?: ProgressCircleSize;
-    color?: ProgressCircleColor;
-    isDisabled?: boolean;
-    formatValue?: (value: number) => string;
-    label?: string;
-};
-declare const ProgressCircle: (props: ProgressCircleProps) => JSX.Element;
-export default ProgressCircle;