@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/tabs/Tabs.css

@@ -0,0 +1,202 @@
+@layer components {
+  .tabs {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .tabs[data-orientation="horizontal"] {
+    flex-direction: column;
+  }
+
+  .tabs[data-orientation="vertical"] {
+    flex-direction: row;
+  }
+
+  .tabs__list-container {
+    position: relative;
+  }
+
+  .tabs__list {
+    position: relative;
+    display: inline-flex;
+    background-color: var(--color-base-200);
+    padding: 0.25rem;
+    border-radius: calc(var(--radius-box) + 0.25rem);
+  }
+
+  .tabs__list[data-orientation="horizontal"] {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .tabs__list[data-orientation="vertical"] {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .tabs__list[data-orientation="vertical"] .tabs__tab {
+    min-width: 5rem;
+  }
+
+  .tabs__tab {
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+
+    display: flex;
+    height: 2rem;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1.5rem;
+    padding-inline: 1rem;
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--color-base-content);
+    opacity: 0.7;
+    outline: none;
+    background: none;
+    border: 0;
+
+    transition:
+      color 150ms ease,
+      background-color 150ms ease,
+      box-shadow 150ms ease,
+      opacity 150ms ease;
+  }
+
+  .tabs__tab[data-selected="true"] {
+    opacity: 1;
+  }
+
+  .tabs__tab[data-selected="true"] .tabs__separator {
+    opacity: 0;
+  }
+
+  .tabs__tab[data-selected="true"] + .tabs__tab .tabs__separator {
+    opacity: 0;
+  }
+
+  .tabs__tab:disabled,
+  .tabs__tab[data-disabled="true"],
+  .tabs__tab[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  @media (hover: hover) {
+    .tabs__tab:not([data-selected="true"]):not([data-disabled="true"]):hover {
+      opacity: 0.85;
+    }
+  }
+
+  .tabs__tab:focus-visible,
+  .tabs__tab[data-focus-visible="true"] {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  .tabs__separator {
+    background-color: var(--color-base-content);
+    opacity: 0.25;
+    border-radius: 4px;
+    position: absolute;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+  }
+
+  .tabs__list[data-orientation="horizontal"] .tabs__separator {
+    left: 0;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  .tabs__list[data-orientation="vertical"] .tabs__separator {
+    top: 0;
+    left: 5%;
+    width: 90%;
+    height: 1px;
+  }
+
+  .tabs__panel {
+    width: 100%;
+    padding: 0.5rem;
+    outline: none;
+  }
+
+  .tabs__panel[data-orientation="horizontal"] {
+    margin-top: 1rem;
+  }
+
+  .tabs__panel[data-orientation="vertical"] {
+    margin-left: 1rem;
+  }
+
+  .tabs__indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    border-radius: var(--radius-box);
+    width: var(--tabs-indicator-width, 0px);
+    height: var(--tabs-indicator-height, 0px);
+    transform: translate3d(var(--tabs-indicator-x, 0px), var(--tabs-indicator-y, 0px), 0);
+    opacity: 0;
+    pointer-events: none;
+    background-color: var(--color-base-100);
+    box-shadow: 0 1px 2px oklch(0% 0 0 / 0.12);
+    transition-duration: 250ms;
+    transition-property: transform, width, height, opacity;
+    transition-timing-function: ease;
+  }
+
+  .tabs__indicator[data-ready="false"] {
+    transition: none;
+  }
+
+  .tabs__indicator[data-visible="true"] {
+    opacity: 1;
+  }
+
+  .tabs--secondary .tabs__list {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+  }
+
+  .tabs--secondary .tabs__list[data-orientation="horizontal"] {
+    border-bottom: 1px solid var(--color-base-300);
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: clip;
+    scrollbar-width: none;
+  }
+
+  .tabs--secondary .tabs__list[data-orientation="horizontal"]::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tabs--secondary .tabs__list[data-orientation="vertical"] {
+    border-left: 1px solid var(--color-base-300);
+  }
+
+  .tabs--secondary .tabs__tab {
+    border-radius: 0;
+  }
+
+  .tabs--secondary .tabs__tab[data-selected="true"] {
+    color: var(--color-base-content);
+  }
+
+  .tabs--secondary .tabs__separator {
+    display: none;
+  }
+
+  .tabs--secondary .tabs__indicator {
+    background-color: var(--color-accent);
+    box-shadow: none;
+    border-radius: 0;
+  }
+}

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

@@ -0,0 +1,44 @@
+import "./Tabs.css";
+import { type JSX } from "solid-js";
+type TabsOrientation = "horizontal" | "vertical";
+type TabsVariant = "primary" | "secondary";
+type TabKey = string | number;
+type TabsRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    children: JSX.Element;
+    orientation?: TabsOrientation;
+    variant?: TabsVariant;
+    selectedKey?: TabKey;
+    defaultSelectedKey?: TabKey;
+    onSelectionChange?: (key: TabKey) => void;
+};
+declare const TabsRoot: (props: TabsRootProps) => JSX.Element;
+type TabListContainerProps = JSX.HTMLAttributes<HTMLDivElement>;
+declare const TabListContainer: (props: TabListContainerProps) => JSX.Element;
+type TabListProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    "aria-label"?: string;
+};
+declare const TabList: (props: TabListProps) => JSX.Element;
+type TabProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "id"> & {
+    id: TabKey;
+    isDisabled?: boolean;
+};
+declare const Tab: (props: TabProps) => JSX.Element;
+type TabIndicatorProps = JSX.HTMLAttributes<HTMLSpanElement>;
+declare const TabIndicator: () => JSX.Element | null;
+type TabPanelProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "id"> & {
+    id: TabKey;
+};
+declare const TabPanel: (props: TabPanelProps) => JSX.Element;
+type TabSeparatorProps = JSX.HTMLAttributes<HTMLSpanElement>;
+declare const TabSeparator: (props: TabSeparatorProps) => JSX.Element;
+declare const Tabs: ((props: TabsRootProps) => JSX.Element) & {
+    Root: (props: TabsRootProps) => JSX.Element;
+    ListContainer: (props: TabListContainerProps) => JSX.Element;
+    List: (props: TabListProps) => JSX.Element;
+    Tab: (props: TabProps) => JSX.Element;
+    Indicator: () => JSX.Element | null;
+    Separator: (props: TabSeparatorProps) => JSX.Element;
+    Panel: (props: TabPanelProps) => JSX.Element;
+};
+export { Tabs as default, Tabs, TabsRoot, TabListContainer, TabList, Tab, TabIndicator, TabSeparator, TabPanel, };
+export type { TabsRootProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabSeparatorProps, TabPanelProps, };

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,387 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Tabs.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><span class=tabs__indicator data-slot=tabs-indicator>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const TabsContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "orientation",
+        "variant",
+        "selectedKey",
+        "defaultSelectedKey",
+        "onSelectionChange"
+    ]);
+    const baseId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const [internalSelectedKey, setInternalSelectedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultSelectedKey);
+    const [tabs, setTabs] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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 = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs", "secondary" === local.variant && "tabs--secondary", local.class);
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
+            orientation: local.orientation ?? "horizontal",
+            variant: local.variant ?? "primary",
+            selectedKey,
+            setSelectedKey,
+            registerTab,
+            unregisterTab,
+            tabs,
+            getTabId,
+            getPanelId
+        }));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TabsContext.Provider, {
+        get value () {
+            return context();
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return classes();
+                },
+                "data-slot": "tabs",
+                get ["data-orientation"] () {
+                    return local.orientation ?? "horizontal";
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const TabListContainer = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__list-container", local.class);
+            },
+            "data-slot": "tabs-list-container"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const TabList = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TabsContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "ref"
+    ]);
+    const [indicatorStyle, setIndicatorStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        "--tabs-indicator-x": "0px",
+        "--tabs-indicator-y": "0px",
+        "--tabs-indicator-width": "0px",
+        "--tabs-indicator-height": "0px"
+    });
+    const [indicatorVisible, setIndicatorVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [indicatorReady, setIndicatorReady] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let listRef;
+    let rafId;
+    if (!ctx) return (()=>{
+        var _el$3 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, others, false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.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();
+        });
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        ctx.selectedKey();
+        ctx.tabs();
+        scheduleMeasure();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!listRef) return;
+        const observer = new ResizeObserver(()=>scheduleMeasure());
+        observer.observe(listRef);
+        for (const tab of ctx.tabs())observer.observe(tab.ref);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>observer.disconnect());
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        scheduleMeasure();
+        window.addEventListener("resize", scheduleMeasure);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            window.removeEventListener("resize", scheduleMeasure);
+            if (void 0 !== rafId) cancelAnimationFrame(rafId);
+        });
+    });
+    return (()=>{
+        var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setListRef, _el$4);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "tablist",
+            get ["aria-orientation"] () {
+                return ctx.orientation;
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__list", local.class);
+            },
+            "data-slot": "tabs-list",
+            get ["data-orientation"] () {
+                return ctx.orientation;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children, _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = indicatorReady() ? "true" : "false", _v$2 = indicatorVisible() ? "true" : "false", _v$3 = indicatorStyle();
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "data-ready", _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "data-visible", _p$.t = _v$2);
+            _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$5, _v$3, _p$.a);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$4;
+    })();
+};
+const Tab = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TabsContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "id",
+        "isDisabled",
+        "onClick",
+        "onKeyDown"
+    ]);
+    let tabRef;
+    if (!ctx) return (()=>{
+        var _el$6 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__tab", local.class);
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        return _el$6;
+    })();
+    const isSelected = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>ctx.selectedKey() === local.id);
+    const isDisabled = ()=>Boolean(local.isDisabled);
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (tabRef) ctx.registerTab({
+            key: local.id,
+            ref: tabRef,
+            disabled: isDisabled()
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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 = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__tab", local.class);
+    return (()=>{
+        var _el$7 = _tmpl$3();
+        var _ref$ = tabRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$7) : tabRef = _el$7;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return ctx.getTabId(local.id);
+            },
+            role: "tab",
+            get ["class"] () {
+                return 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);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const TabIndicator = ()=>null;
+const TabPanel = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TabsContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "children",
+        "id"
+    ]);
+    if (!ctx) return (()=>{
+        var _el$8 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, others, false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+    const isSelected = ()=>ctx.selectedKey() === local.id;
+    return (()=>{
+        var _el$9 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return ctx.getPanelId(local.id);
+            },
+            role: "tabpanel",
+            get ["aria-labelledby"] () {
+                return ctx.getTabId(local.id);
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__panel", local.class);
+            },
+            "data-slot": "tabs-panel",
+            get ["data-orientation"] () {
+                return ctx.orientation;
+            },
+            get hidden () {
+                return !isSelected();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const TabSeparator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class"
+    ]);
+    return (()=>{
+        var _el$0 = _tmpl$4();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "aria-hidden": "true",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__separator", local.class);
+            },
+            "data-slot": "tabs-separator"
+        }), false, false);
+        return _el$0;
+    })();
+};
+const Tabs = Object.assign(TabsRoot, {
+    Root: TabsRoot,
+    ListContainer: TabListContainer,
+    List: TabList,
+    Tab,
+    Indicator: TabIndicator,
+    Separator: TabSeparator,
+    Panel: TabPanel
+});
+export { Tab, TabIndicator, TabList, TabListContainer, TabPanel, TabSeparator, Tabs, TabsRoot, Tabs as default };

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

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

package/dist/components/tabs/index.js

@@ -0,0 +1,4 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Tabs_js_f50f6764__ from "./Tabs.js";
+var __webpack_exports__Tabs = __WEBPACK_EXTERNAL_MODULE__Tabs_js_f50f6764__.Tabs;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Tabs_js_f50f6764__["default"];
+export { __webpack_exports__Tabs as Tabs, __webpack_exports__default as default };

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,15 @@
+import "./textarea.css";
+import { type JSX } from "solid-js";
+import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
+type TextareaBaseProps = {
+    color?: ComponentColor;
+    size?: ComponentSize;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    resize?: "none" | "x" | "y" | "both";
+};
+export type TextareaProps = TextareaBaseProps & IComponentBaseProps & Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaBaseProps>;
+declare const Textarea: (props: TextareaProps) => JSX.Element;
+export default Textarea;