@rockshin/tao-ui 0.0.1

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

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+import { type TaoSize } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './tabs.css';
+export type TabsSemanticPart = 'root' | 'nav' | 'tab' | 'indicator' | 'panel';
+export interface TabItem {
+    key: string;
+    label: ReactNode;
+    children?: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    items: TabItem[];
+    activeKey?: string;
+    defaultActiveKey?: string;
+    onChange?: (key: string) => void;
+    size?: TaoSize;
+    variant?: 'line' | 'card';
+    destroyInactiveTabPane?: boolean;
+    className?: string;
+    classNames?: SemanticClassNames<TabsSemanticPart>;
+    styles?: SemanticStyles<TabsSemanticPart>;
+}
+export declare function Tabs({ items, activeKey: activeKeyProp, defaultActiveKey, onChange, size, variant, destroyInactiveTabPane, className, classNames, styles, }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,256 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import "./tabs.css";
+function Tabs(t0) {
+    const $ = c(61);
+    const { items, activeKey: activeKeyProp, defaultActiveKey, onChange, size, variant: t1, destroyInactiveTabPane: t2, className, classNames, styles } = t0;
+    const variant = void 0 === t1 ? "line" : t1;
+    const destroyInactiveTabPane = void 0 === t2 ? false : t2;
+    const ctx = useTaoConfig();
+    const resolvedSize = size ?? ctx.size;
+    const isControlled = void 0 !== activeKeyProp;
+    const firstEnabledKey = items.find(_temp)?.key ?? items[0]?.key ?? "";
+    const [internalKey, setInternalKey] = useState(defaultActiveKey ?? firstEnabledKey);
+    const currentKey = isControlled ? activeKeyProp : internalKey;
+    let t3;
+    if ($[0] !== isControlled || $[1] !== onChange) {
+        t3 = (key)=>{
+            if (!isControlled) setInternalKey(key);
+            onChange?.(key);
+        };
+        $[0] = isControlled;
+        $[1] = onChange;
+        $[2] = t3;
+    } else t3 = $[2];
+    const handleSelect = t3;
+    const tablistRef = useRef(null);
+    const [inkStyle, setInkStyle] = useState(null);
+    let t4;
+    if ($[3] !== currentKey || $[4] !== variant) {
+        t4 = ()=>{
+            if ("line" !== variant) return;
+            const list = tablistRef.current;
+            if (!list) return;
+            const active = list.querySelector(`[data-tao-tab-key="${CSS.escape(currentKey)}"]`);
+            if (active) setInkStyle({
+                left: active.offsetLeft,
+                width: active.offsetWidth
+            });
+        };
+        $[3] = currentKey;
+        $[4] = variant;
+        $[5] = t4;
+    } else t4 = $[5];
+    let t5;
+    if ($[6] !== currentKey || $[7] !== items || $[8] !== variant) {
+        t5 = [
+            currentKey,
+            variant,
+            items
+        ];
+        $[6] = currentKey;
+        $[7] = items;
+        $[8] = variant;
+        $[9] = t5;
+    } else t5 = $[9];
+    useEffect(t4, t5);
+    let t6;
+    if ($[10] !== currentKey || $[11] !== handleSelect || $[12] !== items) {
+        t6 = (e)=>{
+            const enabledItems = items.filter(_temp2);
+            const idx = enabledItems.findIndex((t_1)=>t_1.key === currentKey);
+            let next;
+            if ("ArrowRight" === e.key || "ArrowDown" === e.key) {
+                e.preventDefault();
+                next = enabledItems[(idx + 1) % enabledItems.length];
+            } else if ("ArrowLeft" === e.key || "ArrowUp" === e.key) {
+                e.preventDefault();
+                next = enabledItems[(idx - 1 + enabledItems.length) % enabledItems.length];
+            } else if ("Home" === e.key) {
+                e.preventDefault();
+                next = enabledItems[0];
+            } else if ("End" === e.key) {
+                e.preventDefault();
+                next = enabledItems[enabledItems.length - 1];
+            }
+            if (next) {
+                handleSelect(next.key);
+                const list_0 = tablistRef.current;
+                const btn = list_0?.querySelector(`[data-tao-tab-key="${CSS.escape(next.key)}"]`);
+                btn?.focus();
+            }
+        };
+        $[10] = currentKey;
+        $[11] = handleSelect;
+        $[12] = items;
+        $[13] = t6;
+    } else t6 = $[13];
+    const handleKeyDown = t6;
+    const t7 = classNames?.root;
+    let t8;
+    if ($[14] !== className || $[15] !== t7) {
+        t8 = cx(t7, className);
+        $[14] = className;
+        $[15] = t7;
+        $[16] = t8;
+    } else t8 = $[16];
+    const t9 = styles?.root;
+    const t10 = classNames?.nav;
+    let t11;
+    if ($[17] !== t10) {
+        t11 = cx(t10);
+        $[17] = t10;
+        $[18] = t11;
+    } else t11 = $[18];
+    const t12 = styles?.nav;
+    let t13;
+    if ($[19] !== classNames?.tab || $[20] !== currentKey || $[21] !== handleSelect || $[22] !== items || $[23] !== styles?.tab) {
+        let t14;
+        if ($[25] !== classNames?.tab || $[26] !== currentKey || $[27] !== handleSelect || $[28] !== styles?.tab) {
+            t14 = (item)=>{
+                const isActive = item.key === currentKey;
+                return /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": isActive,
+                    "aria-controls": `tabpanel-${item.key}`,
+                    "aria-disabled": item.disabled || void 0,
+                    tabIndex: isActive ? 0 : -1,
+                    "data-tao-tab": "",
+                    "data-tao-tab-key": item.key,
+                    "data-tao-active": isActive || void 0,
+                    "data-tao-disabled": item.disabled || void 0,
+                    disabled: item.disabled,
+                    onClick: ()=>handleSelect(item.key),
+                    className: cx(classNames?.tab),
+                    style: styles?.tab,
+                    children: item.label
+                }, item.key);
+            };
+            $[25] = classNames?.tab;
+            $[26] = currentKey;
+            $[27] = handleSelect;
+            $[28] = styles?.tab;
+            $[29] = t14;
+        } else t14 = $[29];
+        t13 = items.map(t14);
+        $[19] = classNames?.tab;
+        $[20] = currentKey;
+        $[21] = handleSelect;
+        $[22] = items;
+        $[23] = styles?.tab;
+        $[24] = t13;
+    } else t13 = $[24];
+    let t14;
+    if ($[30] !== classNames?.indicator || $[31] !== inkStyle || $[32] !== styles?.indicator || $[33] !== variant) {
+        t14 = "line" === variant && inkStyle && /*#__PURE__*/ jsx("span", {
+            "data-tao-tabs-ink": "",
+            style: {
+                left: inkStyle.left,
+                width: inkStyle.width,
+                ...styles?.indicator
+            },
+            className: cx(classNames?.indicator)
+        });
+        $[30] = classNames?.indicator;
+        $[31] = inkStyle;
+        $[32] = styles?.indicator;
+        $[33] = variant;
+        $[34] = t14;
+    } else t14 = $[34];
+    let t15;
+    if ($[35] !== handleKeyDown || $[36] !== t13 || $[37] !== t14) {
+        t15 = /*#__PURE__*/ jsxs("div", {
+            ref: tablistRef,
+            role: "tablist",
+            "data-tao-tabs-list": "",
+            onKeyDown: handleKeyDown,
+            children: [
+                t13,
+                t14
+            ]
+        });
+        $[35] = handleKeyDown;
+        $[36] = t13;
+        $[37] = t14;
+        $[38] = t15;
+    } else t15 = $[38];
+    let t16;
+    if ($[39] !== t11 || $[40] !== t12 || $[41] !== t15) {
+        t16 = /*#__PURE__*/ jsx("div", {
+            "data-tao-tabs-nav": "",
+            className: t11,
+            style: t12,
+            children: t15
+        });
+        $[39] = t11;
+        $[40] = t12;
+        $[41] = t15;
+        $[42] = t16;
+    } else t16 = $[42];
+    let t17;
+    if ($[43] !== classNames?.panel || $[44] !== currentKey || $[45] !== destroyInactiveTabPane || $[46] !== items || $[47] !== styles?.panel) {
+        let t18;
+        if ($[49] !== classNames?.panel || $[50] !== currentKey || $[51] !== destroyInactiveTabPane || $[52] !== styles?.panel) {
+            t18 = (item_0)=>{
+                const isActive_0 = item_0.key === currentKey;
+                if (destroyInactiveTabPane && !isActive_0) return null;
+                return /*#__PURE__*/ jsx("div", {
+                    role: "tabpanel",
+                    id: `tabpanel-${item_0.key}`,
+                    "aria-labelledby": item_0.key,
+                    hidden: !isActive_0,
+                    "data-tao-tabs-panel": "",
+                    "data-tao-active": isActive_0 || void 0,
+                    className: cx(classNames?.panel),
+                    style: styles?.panel,
+                    children: item_0.children
+                }, item_0.key);
+            };
+            $[49] = classNames?.panel;
+            $[50] = currentKey;
+            $[51] = destroyInactiveTabPane;
+            $[52] = styles?.panel;
+            $[53] = t18;
+        } else t18 = $[53];
+        t17 = items.map(t18);
+        $[43] = classNames?.panel;
+        $[44] = currentKey;
+        $[45] = destroyInactiveTabPane;
+        $[46] = items;
+        $[47] = styles?.panel;
+        $[48] = t17;
+    } else t17 = $[48];
+    let t18;
+    if ($[54] !== resolvedSize || $[55] !== t16 || $[56] !== t17 || $[57] !== t8 || $[58] !== t9 || $[59] !== variant) {
+        t18 = /*#__PURE__*/ jsxs("div", {
+            "data-tao-tabs": "",
+            "data-tao-variant": variant,
+            "data-tao-size": resolvedSize,
+            className: t8,
+            style: t9,
+            children: [
+                t16,
+                t17
+            ]
+        });
+        $[54] = resolvedSize;
+        $[55] = t16;
+        $[56] = t17;
+        $[57] = t8;
+        $[58] = t9;
+        $[59] = variant;
+        $[60] = t18;
+    } else t18 = $[60];
+    return t18;
+}
+function _temp2(t_0) {
+    return !t_0.disabled;
+}
+function _temp(t) {
+    return !t.disabled;
+}
+export { Tabs };