@pathscale/ui 1.3.1 → 1.5.0

package/dist/components/tabs/Tabs.generated.js

@@ -0,0 +1,419 @@
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Tabs.css";
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Tabs.recipe.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 __solidLayoutTabsRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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 TabsRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTabsRoot,
+    embedded: true
+});
+const __solidLayoutTabListContainer = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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 TabListContainer = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTabListContainer,
+    embedded: true
+});
+const __solidLayoutTabList = (_stable, p)=>{
+    const ctx = useContext(TabsContext);
+    const [local, others] = splitProps(p, [
+        "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 TabList = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTabList,
+    embedded: true
+});
+const __solidLayoutTab = (_stable, p)=>{
+    const ctx = useContext(TabsContext);
+    const [local, others] = splitProps(p, [
+        "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 Tab = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTab,
+    embedded: true
+});
+const TabIndicator = ()=>null;
+const __solidLayoutTabPanel = (_stable, p)=>{
+    const ctx = useContext(TabsContext);
+    const [local, others] = splitProps(p, [
+        "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 TabPanel = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTabPanel,
+    embedded: true
+});
+const __solidLayoutTabSeparator = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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 TabSeparator = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutTabSeparator,
+    embedded: true
+});
+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/tabs/Tabs.recipe.d.ts

@@ -0,0 +1,27 @@
+export declare const CLASSES: {
+    readonly base: "tabs";
+    readonly slot: {
+        readonly listContainer: "tabs__list-container";
+        readonly list: "tabs__list";
+        readonly indicator: "tabs__indicator";
+        readonly tab: "tabs__tab";
+        readonly panel: "tabs__panel";
+        readonly separator: "tabs__separator";
+    };
+    readonly variant: {
+        readonly secondary: "tabs--secondary";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "tabs";
+    readonly slots: {
+        readonly root: {};
+        readonly tabs: {};
+        readonly "tabs-indicator": {};
+        readonly "tabs-list": {};
+        readonly "tabs-list-container": {};
+        readonly "tabs-panel": {};
+        readonly "tabs-separator": {};
+        readonly "tabs-tab": {};
+    };
+}>;

package/dist/components/tabs/Tabs.recipe.js

@@ -0,0 +1,76 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "tabs",
+    slot: {
+        listContainer: "tabs__list-container",
+        list: "tabs__list",
+        indicator: "tabs__indicator",
+        tab: "tabs__tab",
+        panel: "tabs__panel",
+        separator: "tabs__separator"
+    },
+    variant: {
+        secondary: "tabs--secondary"
+    }
+};
+const componentRecipe = recipe({
+    component: "tabs",
+    slots: {
+        root: {},
+        tabs: {},
+        "tabs-indicator": {},
+        "tabs-list": {},
+        "tabs-list-container": {},
+        "tabs-panel": {},
+        "tabs-separator": {},
+        "tabs-tab": {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            },
+            tabs: {
+                base: "",
+                axes: {}
+            },
+            "tabs-indicator": {
+                base: "",
+                axes: {}
+            },
+            "tabs-list": {
+                base: "",
+                axes: {}
+            },
+            "tabs-list-container": {
+                base: "",
+                axes: {}
+            },
+            "tabs-panel": {
+                base: "",
+                axes: {}
+            },
+            "tabs-separator": {
+                base: "",
+                axes: {}
+            },
+            "tabs-tab": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0,
+            tabs: 1,
+            "tabs-indicator": 2,
+            "tabs-list": 3,
+            "tabs-list-container": 4,
+            "tabs-panel": 5,
+            "tabs-separator": 6,
+            "tabs-tab": 7
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,2 +1,2 @@
-export { default, Tabs } from "./Tabs";
-export type { TabsRootProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabSeparatorProps, TabPanelProps, } from "./Tabs";
+export { default, Tabs } from "./Tabs.generated";
+export type { TabsRootProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabSeparatorProps, TabPanelProps, } from "./Tabs.generated";

package/dist/components/tabs/index.js

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

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

@@ -0,0 +1,34 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Tag.css";
+import { type JSX } 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: __LayoutComponent<TagRootProps>;
+declare const TagRemoveButton: __LayoutComponent<TagRemoveButtonProps>;
+declare const Tag: __LayoutComponent<TagRootProps> & {
+    Root: __LayoutComponent<TagRootProps>;
+    RemoveButton: __LayoutComponent<TagRemoveButtonProps>;
+};
+export default Tag;
+export { Tag, TagRoot, TagRemoveButton };
+export type { TagRootProps as TagProps, TagRenderProps };