@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/tabs/Tabs.js

@@ -1,388 +0,0 @@
-import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import "./Tabs.css";
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./Tabs.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><span>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
-const TabsContext = createContext();
-const invokeEventHandler = (handler, event)=>{
-    if ("function" == typeof handler) return void handler(event);
-    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
-};
-const TabsRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "orientation",
-        "variant",
-        "selectedKey",
-        "defaultSelectedKey",
-        "onSelectionChange"
-    ]);
-    const baseId = createUniqueId();
-    const [internalSelectedKey, setInternalSelectedKey] = createSignal(local.defaultSelectedKey);
-    const [tabs, setTabs] = createSignal([]);
-    const isControlled = ()=>void 0 !== local.selectedKey;
-    const selectedKey = ()=>isControlled() ? local.selectedKey : internalSelectedKey();
-    const setSelectedKey = (key)=>{
-        if (isControlled()) return void local.onSelectionChange?.(key);
-        setInternalSelectedKey(key);
-        local.onSelectionChange?.(key);
-    };
-    const registerTab = (info)=>{
-        setTabs((prev)=>{
-            const next = prev.filter((item)=>item.key !== info.key);
-            next.push(info);
-            return next;
-        });
-        if (!isControlled() && void 0 === internalSelectedKey()) setInternalSelectedKey(info.key);
-    };
-    const unregisterTab = (key)=>{
-        setTabs((prev)=>prev.filter((item)=>item.key !== key));
-    };
-    const getTabId = (key)=>`${baseId}-tab-${String(key)}`;
-    const getPanelId = (key)=>`${baseId}-panel-${String(key)}`;
-    const classes = ()=>twMerge(CLASSES.base, "secondary" === local.variant && CLASSES.variant.secondary, local.class);
-    const context = createMemo(()=>({
-            orientation: local.orientation ?? "horizontal",
-            variant: local.variant ?? "primary",
-            selectedKey,
-            setSelectedKey,
-            registerTab,
-            unregisterTab,
-            tabs,
-            getTabId,
-            getPanelId
-        }));
-    return createComponent(TabsContext.Provider, {
-        get value () {
-            return context();
-        },
-        get children () {
-            var _el$ = _tmpl$();
-            spread(_el$, mergeProps(others, ()=>({
-                    class: classes()
-                }), {
-                "data-slot": "tabs",
-                get ["data-orientation"] () {
-                    return local.orientation ?? "horizontal";
-                }
-            }), false, true);
-            insert(_el$, ()=>local.children);
-            return _el$;
-        }
-    });
-};
-const TabListContainer = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "children"
-    ]);
-    return (()=>{
-        var _el$2 = _tmpl$();
-        spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.listContainer, local.class)
-            }), {
-            "data-slot": "tabs-list-container"
-        }), false, true);
-        insert(_el$2, ()=>local.children);
-        return _el$2;
-    })();
-};
-const TabList = (props)=>{
-    const ctx = useContext(TabsContext);
-    const [local, others] = splitProps(props, [
-        "class",
-        "children",
-        "ref"
-    ]);
-    const [indicatorStyle, setIndicatorStyle] = createSignal({
-        "--tabs-indicator-x": "0px",
-        "--tabs-indicator-y": "0px",
-        "--tabs-indicator-width": "0px",
-        "--tabs-indicator-height": "0px"
-    });
-    const [indicatorVisible, setIndicatorVisible] = createSignal(false);
-    const [indicatorReady, setIndicatorReady] = createSignal(false);
-    let listRef;
-    let rafId;
-    if (!ctx) return (()=>{
-        var _el$3 = _tmpl$();
-        spread(_el$3, others, false, true);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
-    const setListRef = (element)=>{
-        listRef = element;
-        if ("function" == typeof local.ref) local.ref(element);
-    };
-    const measureIndicator = ()=>{
-        if (!listRef) return;
-        const selectedTab = ctx.tabs().find((tab)=>tab.key === ctx.selectedKey());
-        if (!selectedTab) return void setIndicatorVisible(false);
-        const listRect = listRef.getBoundingClientRect();
-        const tabRect = selectedTab.ref.getBoundingClientRect();
-        let x = tabRect.left - listRect.left + listRef.scrollLeft;
-        let y = tabRect.top - listRect.top + listRef.scrollTop;
-        let width = tabRect.width;
-        let height = tabRect.height;
-        if ("secondary" === ctx.variant && "horizontal" === ctx.orientation) {
-            y += height - 2;
-            height = 2;
-        }
-        if ("secondary" === ctx.variant && "vertical" === ctx.orientation) {
-            x = 0;
-            width = 2;
-        }
-        setIndicatorStyle({
-            "--tabs-indicator-x": `${x}px`,
-            "--tabs-indicator-y": `${y}px`,
-            "--tabs-indicator-width": `${width}px`,
-            "--tabs-indicator-height": `${height}px`
-        });
-        setIndicatorVisible(true);
-        setIndicatorReady(true);
-    };
-    const scheduleMeasure = ()=>{
-        if (void 0 !== rafId) cancelAnimationFrame(rafId);
-        rafId = requestAnimationFrame(()=>{
-            rafId = void 0;
-            measureIndicator();
-        });
-    };
-    createEffect(()=>{
-        ctx.selectedKey();
-        ctx.tabs();
-        scheduleMeasure();
-    });
-    createEffect(()=>{
-        if (!listRef) return;
-        const observer = new ResizeObserver(()=>scheduleMeasure());
-        observer.observe(listRef);
-        for (const tab of ctx.tabs())observer.observe(tab.ref);
-        onCleanup(()=>observer.disconnect());
-    });
-    onMount(()=>{
-        scheduleMeasure();
-        window.addEventListener("resize", scheduleMeasure);
-        onCleanup(()=>{
-            window.removeEventListener("resize", scheduleMeasure);
-            if (void 0 !== rafId) cancelAnimationFrame(rafId);
-        });
-    });
-    return (()=>{
-        var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
-        use(setListRef, _el$4);
-        spread(_el$4, mergeProps(others, {
-            role: "tablist",
-            get ["aria-orientation"] () {
-                return ctx.orientation;
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.list, local.class)
-            }), {
-            "data-slot": "tabs-list",
-            get ["data-orientation"] () {
-                return ctx.orientation;
-            }
-        }), false, true);
-        insert(_el$4, ()=>local.children, _el$5);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.slot.indicator
-            }), {
-            "data-slot": "tabs-indicator",
-            get ["data-ready"] () {
-                return indicatorReady() ? "true" : "false";
-            },
-            get ["data-visible"] () {
-                return indicatorVisible() ? "true" : "false";
-            },
-            get style () {
-                return indicatorStyle();
-            }
-        }), false, false);
-        return _el$4;
-    })();
-};
-const Tab = (props)=>{
-    const ctx = useContext(TabsContext);
-    const [local, others] = splitProps(props, [
-        "class",
-        "children",
-        "id",
-        "isDisabled",
-        "onClick",
-        "onKeyDown"
-    ]);
-    let tabRef;
-    if (!ctx) return (()=>{
-        var _el$6 = _tmpl$3();
-        spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.tab, local.class)
-            })), false, true);
-        insert(_el$6, ()=>local.children);
-        return _el$6;
-    })();
-    const isSelected = createMemo(()=>ctx.selectedKey() === local.id);
-    const isDisabled = ()=>Boolean(local.isDisabled);
-    onMount(()=>{
-        if (tabRef) ctx.registerTab({
-            key: local.id,
-            ref: tabRef,
-            disabled: isDisabled()
-        });
-    });
-    onCleanup(()=>{
-        ctx.unregisterTab(local.id);
-    });
-    const focusTab = (info)=>{
-        info.ref.focus();
-        ctx.setSelectedKey(info.key);
-    };
-    const moveFocus = (direction)=>{
-        const list = ctx.tabs().filter((tab)=>!tab.disabled);
-        if (!list.length) return;
-        const index = list.findIndex((tab)=>tab.key === local.id);
-        if (-1 === index) return;
-        const nextIndex = (index + direction + list.length) % list.length;
-        focusTab(list[nextIndex]);
-    };
-    const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
-        if (event.defaultPrevented) return;
-        if (isDisabled()) return;
-        const isHorizontal = "horizontal" === ctx.orientation;
-        const key = event.key;
-        if ("Home" === key || "End" === key) {
-            event.preventDefault();
-            const list = ctx.tabs().filter((tab)=>!tab.disabled);
-            if (!list.length) return;
-            const target = "Home" === key ? list[0] : list[list.length - 1];
-            focusTab(target);
-            return;
-        }
-        if (isHorizontal && ("ArrowLeft" === key || "ArrowRight" === key)) {
-            event.preventDefault();
-            moveFocus("ArrowRight" === key ? 1 : -1);
-            return;
-        }
-        if (!isHorizontal && ("ArrowUp" === key || "ArrowDown" === key)) {
-            event.preventDefault();
-            moveFocus("ArrowDown" === key ? 1 : -1);
-        }
-    };
-    const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
-        if (event.defaultPrevented) return;
-        if (isDisabled()) return;
-        ctx.setSelectedKey(local.id);
-    };
-    const classes = ()=>twMerge(CLASSES.slot.tab, local.class);
-    return (()=>{
-        var _el$7 = _tmpl$3();
-        var _ref$ = tabRef;
-        "function" == typeof _ref$ ? use(_ref$, _el$7) : tabRef = _el$7;
-        spread(_el$7, mergeProps(others, {
-            get id () {
-                return ctx.getTabId(local.id);
-            },
-            role: "tab"
-        }, ()=>({
-                class: classes()
-            }), {
-            "data-slot": "tabs-tab",
-            get ["data-selected"] () {
-                return isSelected() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["aria-selected"] () {
-                return isSelected();
-            },
-            get ["aria-controls"] () {
-                return ctx.getPanelId(local.id);
-            },
-            get ["aria-disabled"] () {
-                return isDisabled();
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            get tabIndex () {
-                return isSelected() ? 0 : -1;
-            },
-            onKeyDown: handleKeyDown,
-            onClick: handleClick
-        }), false, true);
-        insert(_el$7, ()=>local.children);
-        return _el$7;
-    })();
-};
-const TabIndicator = ()=>null;
-const TabPanel = (props)=>{
-    const ctx = useContext(TabsContext);
-    const [local, others] = splitProps(props, [
-        "class",
-        "children",
-        "id"
-    ]);
-    if (!ctx) return (()=>{
-        var _el$8 = _tmpl$();
-        spread(_el$8, others, false, true);
-        insert(_el$8, ()=>local.children);
-        return _el$8;
-    })();
-    const isSelected = ()=>ctx.selectedKey() === local.id;
-    return (()=>{
-        var _el$9 = _tmpl$();
-        spread(_el$9, mergeProps(others, {
-            get id () {
-                return ctx.getPanelId(local.id);
-            },
-            role: "tabpanel",
-            get ["aria-labelledby"] () {
-                return ctx.getTabId(local.id);
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.panel, local.class)
-            }), {
-            "data-slot": "tabs-panel",
-            get ["data-orientation"] () {
-                return ctx.orientation;
-            },
-            get hidden () {
-                return !isSelected();
-            }
-        }), false, true);
-        insert(_el$9, ()=>local.children);
-        return _el$9;
-    })();
-};
-const TabSeparator = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class"
-    ]);
-    return (()=>{
-        var _el$0 = _tmpl$4();
-        spread(_el$0, mergeProps(others, {
-            "aria-hidden": "true"
-        }, ()=>({
-                class: twMerge(CLASSES.slot.separator, local.class)
-            }), {
-            "data-slot": "tabs-separator"
-        }), false, false);
-        return _el$0;
-    })();
-};
-const Tabs = Object.assign(TabsRoot, {
-    Root: TabsRoot,
-    ListContainer: TabListContainer,
-    List: TabList,
-    Tab: Tab,
-    Indicator: TabIndicator,
-    Separator: TabSeparator,
-    Panel: TabPanel
-});
-export default Tabs;
-export { Tab, TabIndicator, TabList, TabListContainer, TabPanel, TabSeparator, Tabs, TabsRoot };

package/dist/components/tag/Tag.classes.d.ts

@@ -1,20 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "tag";
-        readonly size: {
-            readonly sm: "tag--sm";
-            readonly md: "tag--md";
-            readonly lg: "tag--lg";
-        };
-        readonly variant: {
-            readonly default: "tag--default";
-            readonly surface: "tag--surface";
-        };
-    };
-    readonly slot: {
-        readonly icon: "tag__icon";
-        readonly iconStart: "tag__icon--start";
-        readonly iconEnd: "tag__icon--end";
-        readonly removeButton: "tag__remove-button";
-    };
-};

package/dist/components/tag/Tag.classes.js

@@ -1,21 +0,0 @@
-const CLASSES = {
-    Root: {
-        base: "tag",
-        size: {
-            sm: "tag--sm",
-            md: "tag--md",
-            lg: "tag--lg"
-        },
-        variant: {
-            default: "tag--default",
-            surface: "tag--surface"
-        }
-    },
-    slot: {
-        icon: "tag__icon",
-        iconStart: "tag__icon--start",
-        iconEnd: "tag__icon--end",
-        removeButton: "tag__remove-button"
-    }
-};
-export { CLASSES };

package/dist/components/tag/Tag.d.ts

@@ -1,33 +0,0 @@
-import "./Tag.css";
-import { type Component, type JSX, type ParentComponent } from "solid-js";
-import { type CloseButtonProps } from "../close-button";
-import type { IComponentBaseProps } from "../types";
-export type TagSize = "sm" | "md" | "lg";
-export type TagVariant = "default" | "surface";
-type TagRenderProps = {
-    isSelected: boolean;
-    isDisabled: boolean;
-    allowsRemoving: boolean;
-};
-export type TagRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    id?: string | number;
-    textValue?: string;
-    isDisabled?: boolean;
-    size?: TagSize;
-    variant?: TagVariant;
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
-    children?: JSX.Element | ((props: TagRenderProps) => JSX.Element);
-};
-export type TagRemoveButtonProps = Omit<CloseButtonProps, "isDisabled"> & IComponentBaseProps & {
-    isDisabled?: boolean;
-};
-declare const TagRoot: ParentComponent<TagRootProps>;
-declare const TagRemoveButton: Component<TagRemoveButtonProps>;
-declare const Tag: ParentComponent<TagRootProps> & {
-    Root: ParentComponent<TagRootProps>;
-    RemoveButton: Component<TagRemoveButtonProps>;
-};
-export default Tag;
-export { Tag, TagRoot, TagRemoveButton };
-export type { TagRootProps as TagProps, TagRenderProps };