@rockshin/tao-ui 0.0.9 → 0.0.11

package/dist/components/tabs/tabs.js

@@ -5,7 +5,7 @@ import { useTaoConfig } from "../../provider/tao-provider.js";
 import { cx } from "../../utils/semantic.js";
 import "./tabs.css";
 function Tabs(t0) {
-    const $ = c(61);
+    const $ = c(58);
     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;
@@ -29,6 +29,7 @@ function Tabs(t0) {
     const tablistRef = useRef(null);
     const [inkStyle, setInkStyle] = useState(null);
     let t4;
+    let t5;
     if ($[3] !== currentKey || $[4] !== variant) {
         t4 = ()=>{
             if ("line" !== variant) return;
@@ -40,25 +41,21 @@ function Tabs(t0) {
                 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
+            variant
         ];
-        $[6] = currentKey;
-        $[7] = items;
-        $[8] = variant;
-        $[9] = t5;
-    } else t5 = $[9];
+        $[3] = currentKey;
+        $[4] = variant;
+        $[5] = t4;
+        $[6] = t5;
+    } else {
+        t4 = $[5];
+        t5 = $[6];
+    }
     useEffect(t4, t5);
     let t6;
-    if ($[10] !== currentKey || $[11] !== handleSelect || $[12] !== items) {
+    if ($[7] !== currentKey || $[8] !== handleSelect || $[9] !== items) {
         t6 = (e)=>{
             const enabledItems = items.filter(_temp2);
             const idx = enabledItems.findIndex((t_1)=>t_1.key === currentKey);
@@ -83,33 +80,33 @@ function Tabs(t0) {
                 btn?.focus();
             }
         };
-        $[10] = currentKey;
-        $[11] = handleSelect;
-        $[12] = items;
-        $[13] = t6;
-    } else t6 = $[13];
+        $[7] = currentKey;
+        $[8] = handleSelect;
+        $[9] = items;
+        $[10] = t6;
+    } else t6 = $[10];
     const handleKeyDown = t6;
     const t7 = classNames?.root;
     let t8;
-    if ($[14] !== className || $[15] !== t7) {
+    if ($[11] !== className || $[12] !== t7) {
         t8 = cx(t7, className);
-        $[14] = className;
-        $[15] = t7;
-        $[16] = t8;
-    } else t8 = $[16];
+        $[11] = className;
+        $[12] = t7;
+        $[13] = t8;
+    } else t8 = $[13];
     const t9 = styles?.root;
     const t10 = classNames?.nav;
     let t11;
-    if ($[17] !== t10) {
+    if ($[14] !== t10) {
         t11 = cx(t10);
-        $[17] = t10;
-        $[18] = t11;
-    } else t11 = $[18];
+        $[14] = t10;
+        $[15] = t11;
+    } else t11 = $[15];
     const t12 = styles?.nav;
     let t13;
-    if ($[19] !== classNames?.tab || $[20] !== currentKey || $[21] !== handleSelect || $[22] !== items || $[23] !== styles?.tab) {
+    if ($[16] !== classNames?.tab || $[17] !== currentKey || $[18] !== handleSelect || $[19] !== items || $[20] !== styles?.tab) {
         let t14;
-        if ($[25] !== classNames?.tab || $[26] !== currentKey || $[27] !== handleSelect || $[28] !== styles?.tab) {
+        if ($[22] !== classNames?.tab || $[23] !== currentKey || $[24] !== handleSelect || $[25] !== styles?.tab) {
             t14 = (item)=>{
                 const isActive = item.key === currentKey;
                 return /*#__PURE__*/ jsx("button", {
@@ -130,22 +127,22 @@ function Tabs(t0) {
                     children: item.label
                 }, item.key);
             };
-            $[25] = classNames?.tab;
-            $[26] = currentKey;
-            $[27] = handleSelect;
-            $[28] = styles?.tab;
-            $[29] = t14;
-        } else t14 = $[29];
+            $[22] = classNames?.tab;
+            $[23] = currentKey;
+            $[24] = handleSelect;
+            $[25] = styles?.tab;
+            $[26] = t14;
+        } else t14 = $[26];
         t13 = items.map(t14);
-        $[19] = classNames?.tab;
-        $[20] = currentKey;
-        $[21] = handleSelect;
-        $[22] = items;
-        $[23] = styles?.tab;
-        $[24] = t13;
-    } else t13 = $[24];
+        $[16] = classNames?.tab;
+        $[17] = currentKey;
+        $[18] = handleSelect;
+        $[19] = items;
+        $[20] = styles?.tab;
+        $[21] = t13;
+    } else t13 = $[21];
     let t14;
-    if ($[30] !== classNames?.indicator || $[31] !== inkStyle || $[32] !== styles?.indicator || $[33] !== variant) {
+    if ($[27] !== classNames?.indicator || $[28] !== inkStyle || $[29] !== styles?.indicator || $[30] !== variant) {
         t14 = "line" === variant && inkStyle && /*#__PURE__*/ jsx("span", {
             "data-tao-tabs-ink": "",
             style: {
@@ -155,14 +152,14 @@ function Tabs(t0) {
             },
             className: cx(classNames?.indicator)
         });
-        $[30] = classNames?.indicator;
-        $[31] = inkStyle;
-        $[32] = styles?.indicator;
-        $[33] = variant;
-        $[34] = t14;
-    } else t14 = $[34];
+        $[27] = classNames?.indicator;
+        $[28] = inkStyle;
+        $[29] = styles?.indicator;
+        $[30] = variant;
+        $[31] = t14;
+    } else t14 = $[31];
     let t15;
-    if ($[35] !== handleKeyDown || $[36] !== t13 || $[37] !== t14) {
+    if ($[32] !== handleKeyDown || $[33] !== t13 || $[34] !== t14) {
         t15 = /*#__PURE__*/ jsxs("div", {
             ref: tablistRef,
             role: "tablist",
@@ -173,28 +170,28 @@ function Tabs(t0) {
                 t14
             ]
         });
-        $[35] = handleKeyDown;
-        $[36] = t13;
-        $[37] = t14;
-        $[38] = t15;
-    } else t15 = $[38];
+        $[32] = handleKeyDown;
+        $[33] = t13;
+        $[34] = t14;
+        $[35] = t15;
+    } else t15 = $[35];
     let t16;
-    if ($[39] !== t11 || $[40] !== t12 || $[41] !== t15) {
+    if ($[36] !== t11 || $[37] !== t12 || $[38] !== 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];
+        $[36] = t11;
+        $[37] = t12;
+        $[38] = t15;
+        $[39] = t16;
+    } else t16 = $[39];
     let t17;
-    if ($[43] !== classNames?.panel || $[44] !== currentKey || $[45] !== destroyInactiveTabPane || $[46] !== items || $[47] !== styles?.panel) {
+    if ($[40] !== classNames?.panel || $[41] !== currentKey || $[42] !== destroyInactiveTabPane || $[43] !== items || $[44] !== styles?.panel) {
         let t18;
-        if ($[49] !== classNames?.panel || $[50] !== currentKey || $[51] !== destroyInactiveTabPane || $[52] !== styles?.panel) {
+        if ($[46] !== classNames?.panel || $[47] !== currentKey || $[48] !== destroyInactiveTabPane || $[49] !== styles?.panel) {
             t18 = (item_0)=>{
                 const isActive_0 = item_0.key === currentKey;
                 if (destroyInactiveTabPane && !isActive_0) return null;
@@ -210,22 +207,22 @@ function Tabs(t0) {
                     children: item_0.children
                 }, item_0.key);
             };
-            $[49] = classNames?.panel;
-            $[50] = currentKey;
-            $[51] = destroyInactiveTabPane;
-            $[52] = styles?.panel;
-            $[53] = t18;
-        } else t18 = $[53];
+            $[46] = classNames?.panel;
+            $[47] = currentKey;
+            $[48] = destroyInactiveTabPane;
+            $[49] = styles?.panel;
+            $[50] = t18;
+        } else t18 = $[50];
         t17 = items.map(t18);
-        $[43] = classNames?.panel;
-        $[44] = currentKey;
-        $[45] = destroyInactiveTabPane;
-        $[46] = items;
-        $[47] = styles?.panel;
-        $[48] = t17;
-    } else t17 = $[48];
+        $[40] = classNames?.panel;
+        $[41] = currentKey;
+        $[42] = destroyInactiveTabPane;
+        $[43] = items;
+        $[44] = styles?.panel;
+        $[45] = t17;
+    } else t17 = $[45];
     let t18;
-    if ($[54] !== resolvedSize || $[55] !== t16 || $[56] !== t17 || $[57] !== t8 || $[58] !== t9 || $[59] !== variant) {
+    if ($[51] !== resolvedSize || $[52] !== t16 || $[53] !== t17 || $[54] !== t8 || $[55] !== t9 || $[56] !== variant) {
         t18 = /*#__PURE__*/ jsxs("div", {
             "data-tao-tabs": "",
             "data-tao-variant": variant,
@@ -237,14 +234,14 @@ function Tabs(t0) {
                 t17
             ]
         });
-        $[54] = resolvedSize;
-        $[55] = t16;
-        $[56] = t17;
-        $[57] = t8;
-        $[58] = t9;
-        $[59] = variant;
-        $[60] = t18;
-    } else t18 = $[60];
+        $[51] = resolvedSize;
+        $[52] = t16;
+        $[53] = t17;
+        $[54] = t8;
+        $[55] = t9;
+        $[56] = variant;
+        $[57] = t18;
+    } else t18 = $[57];
     return t18;
 }
 function _temp2(t_0) {

package/dist/components/tag/tag.js

@@ -12,6 +12,7 @@ function CloseIcon() {
             viewBox: "0 0 12 12",
             fill: "none",
             "aria-hidden": "true",
+            focusable: "false",
             role: "presentation",
             children: /*#__PURE__*/ jsx("path", {
                 d: "M3 3l6 6M9 3l-6 6",

package/dist/components/textarea/textarea.css

@@ -10,7 +10,13 @@
 
 [data-tao-textarea][data-tao-size="small"] textarea {
   padding-inline: var(--tao-padding-xs);
-  padding-block: calc((var(--tao-control-height-sm) - var(--tao-font-size-sm) * var(--tao-line-height-sm)) / 2 - 1px);
+  padding-block: calc((
+      var(--tao-control-height-sm) -
+      var(--tao-font-size-sm) *
+      var(--tao-line-height-sm)
+    ) /
+    2 -
+    1px);
   font-size: var(--tao-font-size-sm);
   line-height: var(--tao-line-height-sm);
   min-height: var(--tao-control-height-sm);
@@ -22,7 +28,13 @@
 
 [data-tao-textarea][data-tao-size="medium"] textarea {
   padding-inline: var(--tao-padding-sm);
-  padding-block: calc((var(--tao-control-height) - var(--tao-font-size-base) * var(--tao-line-height)) / 2 - 1px);
+  padding-block: calc((
+      var(--tao-control-height) -
+      var(--tao-font-size-base) *
+      var(--tao-line-height)
+    ) /
+    2 -
+    1px);
   font-size: var(--tao-font-size-base);
   line-height: var(--tao-line-height);
   min-height: var(--tao-control-height);
@@ -34,7 +46,13 @@
 
 [data-tao-textarea][data-tao-size="large"] textarea {
   padding-inline: var(--tao-padding-sm);
-  padding-block: calc((var(--tao-control-height-lg) - var(--tao-font-size-lg) * var(--tao-line-height-lg)) / 2 - 1px);
+  padding-block: calc((
+      var(--tao-control-height-lg) -
+      var(--tao-font-size-lg) *
+      var(--tao-line-height-lg)
+    ) /
+    2 -
+    1px);
   font-size: var(--tao-font-size-lg);
   line-height: var(--tao-line-height-lg);
   min-height: var(--tao-control-height-lg);

package/dist/docs/component-doc.d.ts

@@ -0,0 +1,28 @@
+export type ComponentDocCategory = 'Config' | 'Data Display' | 'Data Entry' | 'Feedback' | 'General' | 'Headless' | 'Layout' | 'Navigation';
+export interface ComponentDocUsage {
+    description: string;
+    bestPractices?: string[];
+    avoid?: string[];
+}
+export interface ComponentDocProp {
+    name: string;
+    type: string;
+    description: string;
+    defaultValue?: string;
+    required?: boolean;
+}
+export interface ComponentDoc {
+    name: string;
+    displayName: string;
+    category: ComponentDocCategory;
+    description: string;
+    exports: string[];
+    source: string;
+    story?: string;
+    tests: string[];
+    semanticParts?: string[];
+    keywords?: string[];
+    related?: string[];
+    usage: ComponentDocUsage;
+    props?: ComponentDocProp[];
+}

package/dist/docs/component-docs.d.ts

@@ -0,0 +1,147 @@
+import type { ComponentDoc } from './component-doc';
+export declare const componentDocs: ({
+    name: string;
+    displayName: string;
+    category: "General";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    semanticParts: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+        avoid: string[];
+    };
+    props: ({
+        name: string;
+        type: string;
+        description: string;
+        defaultValue: string;
+    } | {
+        name: string;
+        type: string;
+        description: string;
+        defaultValue?: undefined;
+    })[];
+} | {
+    name: string;
+    displayName: string;
+    category: "Feedback";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    semanticParts: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+        avoid: string[];
+    };
+} | {
+    name: string;
+    displayName: string;
+    category: "Data Entry";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    semanticParts: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+    };
+} | {
+    name: string;
+    displayName: string;
+    category: "Layout";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+    };
+} | {
+    name: string;
+    displayName: string;
+    category: "Headless";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+    };
+} | {
+    name: string;
+    displayName: string;
+    category: "Navigation";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    semanticParts: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+    };
+} | {
+    name: string;
+    displayName: string;
+    category: "Data Display";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    semanticParts: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+    };
+} | {
+    name: string;
+    displayName: string;
+    category: "Config";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+        avoid: string[];
+    };
+    props: {
+        name: string;
+        type: string;
+        description: string;
+    }[];
+})[];
+export declare function getComponentDoc(name: string): ComponentDoc | undefined;

package/dist/docs/component-docs.js

@@ -0,0 +1,70 @@
+import { breadcrumbDoc } from "./components/breadcrumb.doc.js";
+import { buttonDoc } from "./components/button.doc.js";
+import { checkboxDoc } from "./components/checkbox.doc.js";
+import { collapsibleDoc } from "./components/collapsible.doc.js";
+import { contextMenuDoc } from "./components/context-menu.doc.js";
+import { datePickerDoc } from "./components/date-picker.doc.js";
+import { drawerDoc } from "./components/drawer.doc.js";
+import { dropdownDoc } from "./components/dropdown.doc.js";
+import { formActionsDoc } from "./components/form-actions.doc.js";
+import { formFieldDoc } from "./components/form-field.doc.js";
+import { formLayoutDoc } from "./components/form-layout.doc.js";
+import { formSectionDoc } from "./components/form-section.doc.js";
+import { headlessInputNumberDoc } from "./components/headless-input-number.doc.js";
+import { inputDoc } from "./components/input.doc.js";
+import { inputNumberDoc } from "./components/input-number.doc.js";
+import { modalDoc } from "./components/modal.doc.js";
+import { paginationDoc } from "./components/pagination.doc.js";
+import { radioDoc } from "./components/radio.doc.js";
+import { rangePickerDoc } from "./components/range-picker.doc.js";
+import { scrollAreaDoc } from "./components/scroll-area.doc.js";
+import { selectDoc } from "./components/select.doc.js";
+import { spinnerDoc } from "./components/spinner.doc.js";
+import { splitterDoc } from "./components/splitter.doc.js";
+import { stackDoc } from "./components/stack.doc.js";
+import { switchDoc } from "./components/switch.doc.js";
+import { tableDoc } from "./components/table.doc.js";
+import { tabsDoc } from "./components/tabs.doc.js";
+import { tagDoc } from "./components/tag.doc.js";
+import { taoProviderDoc } from "./components/tao-provider.doc.js";
+import { textareaDoc } from "./components/textarea.doc.js";
+const componentDocs = [
+    breadcrumbDoc,
+    buttonDoc,
+    checkboxDoc,
+    collapsibleDoc,
+    contextMenuDoc,
+    datePickerDoc,
+    drawerDoc,
+    dropdownDoc,
+    formActionsDoc,
+    formFieldDoc,
+    formLayoutDoc,
+    formSectionDoc,
+    headlessInputNumberDoc,
+    inputDoc,
+    inputNumberDoc,
+    modalDoc,
+    paginationDoc,
+    radioDoc,
+    rangePickerDoc,
+    scrollAreaDoc,
+    selectDoc,
+    spinnerDoc,
+    splitterDoc,
+    stackDoc,
+    switchDoc,
+    tableDoc,
+    tabsDoc,
+    tagDoc,
+    taoProviderDoc,
+    textareaDoc
+];
+function getComponentDoc(name) {
+    const normalizedName = name.toLowerCase();
+    return componentDocs.find((doc)=>{
+        if (doc.name.toLowerCase() === normalizedName) return true;
+        return doc.exports.some((exportName)=>exportName.toLowerCase() === normalizedName);
+    });
+}
+export { componentDocs, getComponentDoc };

package/dist/docs/components/breadcrumb.doc.d.ts

@@ -0,0 +1,23 @@
+export declare const breadcrumbDoc: {
+    name: string;
+    displayName: string;
+    category: "Navigation";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    semanticParts: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+        avoid: string[];
+    };
+    props: {
+        name: string;
+        type: string;
+        description: string;
+    }[];
+};

package/dist/docs/components/breadcrumb.doc.js

@@ -0,0 +1,53 @@
+const breadcrumbDoc = {
+    name: 'breadcrumb',
+    displayName: 'Breadcrumb',
+    category: 'Navigation',
+    description: 'Renders the user location in a hierarchy of pages or views.',
+    exports: [
+        'Breadcrumb'
+    ],
+    source: 'src/components/breadcrumb/breadcrumb.tsx',
+    story: 'stories/breadcrumb.stories.tsx',
+    tests: [
+        'tests/breadcrumb/breadcrumb.test.tsx'
+    ],
+    semanticParts: [
+        'root',
+        'list',
+        'item',
+        'link',
+        'separator'
+    ],
+    keywords: [
+        'navigation',
+        'path',
+        'hierarchy'
+    ],
+    related: [
+        'Tabs',
+        'Dropdown'
+    ],
+    usage: {
+        description: 'Use Breadcrumb near the top of a page when users need to understand or move through nested context.',
+        bestPractices: [
+            'Keep labels short and recognizable.',
+            'Use links for ancestors and plain text for the current item.'
+        ],
+        avoid: [
+            'Do not use Breadcrumb as primary navigation.'
+        ]
+    },
+    props: [
+        {
+            name: 'items',
+            type: 'BreadcrumbItemType[]',
+            description: 'Ordered breadcrumb items.'
+        },
+        {
+            name: 'separator',
+            type: 'ReactNode',
+            description: 'Custom separator between items.'
+        }
+    ]
+};
+export { breadcrumbDoc };

package/dist/docs/components/button.doc.d.ts

@@ -0,0 +1,29 @@
+export declare const buttonDoc: {
+    name: string;
+    displayName: string;
+    category: "General";
+    description: string;
+    exports: string[];
+    source: string;
+    story: string;
+    tests: string[];
+    semanticParts: string[];
+    keywords: string[];
+    related: string[];
+    usage: {
+        description: string;
+        bestPractices: string[];
+        avoid: string[];
+    };
+    props: ({
+        name: string;
+        type: string;
+        description: string;
+        defaultValue: string;
+    } | {
+        name: string;
+        type: string;
+        description: string;
+        defaultValue?: undefined;
+    })[];
+};