@rockshin/tao-ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,19 @@
+import { type TextareaHTMLAttributes } from 'react';
+import { type TaoSize, type TaoVariant } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './textarea.css';
+export type TextareaSemanticPart = 'root' | 'textarea';
+export interface AutoSizeOptions {
+    minRows?: number;
+    maxRows?: number;
+}
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    size?: TaoSize;
+    variant?: TaoVariant;
+    error?: boolean;
+    /** Auto-grow height to fit content. `true` grows freely; pass min/max rows to clamp. */
+    autoSize?: boolean | AutoSizeOptions;
+    classNames?: SemanticClassNames<TextareaSemanticPart>;
+    styles?: SemanticStyles<TextareaSemanticPart>;
+}
+export declare function Textarea({ size, variant, error, disabled, autoSize, className, style, classNames, styles, onChange, ...rest }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,181 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import "./textarea.css";
+function Textarea(t0) {
+    const $ = c(46);
+    let autoSize;
+    let className;
+    let classNames;
+    let disabled;
+    let error;
+    let onChange;
+    let rest;
+    let size;
+    let style;
+    let styles;
+    let variant;
+    if ($[0] !== t0) {
+        ({ size, variant, error, disabled, autoSize, className, style, classNames, styles, onChange, ...rest } = t0);
+        $[0] = t0;
+        $[1] = autoSize;
+        $[2] = className;
+        $[3] = classNames;
+        $[4] = disabled;
+        $[5] = error;
+        $[6] = onChange;
+        $[7] = rest;
+        $[8] = size;
+        $[9] = style;
+        $[10] = styles;
+        $[11] = variant;
+    } else {
+        autoSize = $[1];
+        className = $[2];
+        classNames = $[3];
+        disabled = $[4];
+        error = $[5];
+        onChange = $[6];
+        rest = $[7];
+        size = $[8];
+        style = $[9];
+        styles = $[10];
+        variant = $[11];
+    }
+    const ctx = useTaoConfig();
+    const resolvedSize = size ?? ctx.size;
+    const resolvedVariant = variant ?? ctx.variant;
+    const resolvedDisabled = disabled ?? ctx.disabled;
+    const ref = useRef(null);
+    let t1;
+    if ($[12] !== autoSize) {
+        t1 = ()=>{
+            const el = ref.current;
+            if (!el || !autoSize) return;
+            el.style.height = "auto";
+            const cs = getComputedStyle(el);
+            const lineHeight = Number.parseFloat(cs.lineHeight) || 0;
+            const padV = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+            const opts = "object" == typeof autoSize ? autoSize : {};
+            let height = el.scrollHeight;
+            if (opts.minRows) height = Math.max(height, opts.minRows * lineHeight + padV);
+            let overflowY = "hidden";
+            if (opts.maxRows) {
+                const max = opts.maxRows * lineHeight + padV;
+                if (height > max) {
+                    height = max;
+                    overflowY = "auto";
+                }
+            }
+            el.style.height = `${height}px`;
+            el.style.overflowY = overflowY;
+        };
+        $[12] = autoSize;
+        $[13] = t1;
+    } else t1 = $[13];
+    const resize = t1;
+    let t2;
+    if ($[14] !== resize) {
+        t2 = ()=>{
+            resize();
+        };
+        $[14] = resize;
+        $[15] = t2;
+    } else t2 = $[15];
+    let t3;
+    if ($[16] !== resize || $[17] !== rest.defaultValue || $[18] !== rest.value) {
+        t3 = [
+            resize,
+            rest.value,
+            rest.defaultValue
+        ];
+        $[16] = resize;
+        $[17] = rest.defaultValue;
+        $[18] = rest.value;
+        $[19] = t3;
+    } else t3 = $[19];
+    useLayoutEffect(t2, t3);
+    const t4 = classNames?.root;
+    let t5;
+    if ($[20] !== className || $[21] !== t4) {
+        t5 = cx(t4, className);
+        $[20] = className;
+        $[21] = t4;
+        $[22] = t5;
+    } else t5 = $[22];
+    const t6 = styles?.root;
+    let t7;
+    if ($[23] !== style || $[24] !== t6) {
+        t7 = {
+            ...t6,
+            ...style
+        };
+        $[23] = style;
+        $[24] = t6;
+        $[25] = t7;
+    } else t7 = $[25];
+    const t8 = error || void 0;
+    const t9 = resolvedDisabled || void 0;
+    const t10 = classNames?.textarea;
+    const t11 = styles?.textarea;
+    const t12 = error || void 0;
+    const t13 = autoSize ? "" : void 0;
+    let t14;
+    if ($[26] !== autoSize || $[27] !== onChange || $[28] !== resize) {
+        t14 = (e)=>{
+            if (autoSize) resize();
+            onChange?.(e);
+        };
+        $[26] = autoSize;
+        $[27] = onChange;
+        $[28] = resize;
+        $[29] = t14;
+    } else t14 = $[29];
+    let t15;
+    if ($[30] !== resolvedDisabled || $[31] !== rest || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14) {
+        t15 = /*#__PURE__*/ jsx("textarea", {
+            ...rest,
+            ref: ref,
+            className: t10,
+            style: t11,
+            disabled: resolvedDisabled,
+            "aria-invalid": t12,
+            "data-tao-autosize": t13,
+            onChange: t14
+        });
+        $[30] = resolvedDisabled;
+        $[31] = rest;
+        $[32] = t10;
+        $[33] = t11;
+        $[34] = t12;
+        $[35] = t13;
+        $[36] = t14;
+        $[37] = t15;
+    } else t15 = $[37];
+    let t16;
+    if ($[38] !== resolvedSize || $[39] !== resolvedVariant || $[40] !== t15 || $[41] !== t5 || $[42] !== t7 || $[43] !== t8 || $[44] !== t9) {
+        t16 = /*#__PURE__*/ jsx("div", {
+            className: t5,
+            style: t7,
+            "data-tao-control": "",
+            "data-tao-textarea": "",
+            "data-tao-size": resolvedSize,
+            "data-tao-variant": resolvedVariant,
+            "data-tao-error": t8,
+            "data-disabled": t9,
+            children: t15
+        });
+        $[38] = resolvedSize;
+        $[39] = resolvedVariant;
+        $[40] = t15;
+        $[41] = t5;
+        $[42] = t7;
+        $[43] = t8;
+        $[44] = t9;
+        $[45] = t16;
+    } else t16 = $[45];
+    return t16;
+}
+export { Textarea };

package/dist/index.d.ts

@@ -1,23 +1,29 @@
-export { TaoProvider, useTaoConfig, type TaoProviderProps, type TaoThemeConfig, type TaoSeedToken, type TaoSize, type TaoVariant, } from './provider/tao-provider';
-export { cx, type SemanticClassNames, type SemanticStyles } from './utils/semantic';
-export { Button, type ButtonProps, type ButtonSemanticPart } from './components/button/button';
-export { Input, type InputProps, type InputSemanticPart } from './components/input/input';
-export { Select, type SelectProps, type SelectOption, } from './components/select/select';
-export { FormField, type FormFieldProps, type FormFieldSemanticPart, } from './components/form-field/form-field';
-export { FormSection, type FormSectionProps, type FormSectionSemanticPart, } from './components/form-section/form-section';
-export { FormActions, type FormActionsProps, type FormActionsSemanticPart, } from './components/form-actions/form-actions';
-export { Drawer, type DrawerProps, type DrawerPlacement, type DrawerSemanticPart, } from './components/drawer/drawer';
-export { Switch, type SwitchProps, type SwitchSemanticPart } from './components/switch/switch';
+export { Breadcrumb, type BreadcrumbItemType, type BreadcrumbProps, type BreadcrumbSemanticPart, } from './components/breadcrumb/breadcrumb';
+export { Button, type ButtonProps, type ButtonSemanticPart, } from './components/button/button';
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxOptionType, type CheckboxProps, type CheckboxSemanticPart, } from './components/checkbox/checkbox';
+export { Collapsible, type CollapsibleContentProps, type CollapsibleProps, type CollapsibleSemanticPart, type CollapsibleTriggerProps, } from './components/collapsible/collapsible';
+export { ContextMenu, type ContextMenuProps, type ContextMenuSemanticPart, } from './components/context-menu/context-menu';
 export { DatePicker, type DatePickerProps, } from './components/date-picker/date-picker';
 export { RangePicker, type RangePickerProps, } from './components/date-picker/range-picker';
-export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps, type CheckboxOptionType, type CheckboxSemanticPart, } from './components/checkbox/checkbox';
-export { Radio, RadioGroup, type RadioProps, type RadioGroupProps, type RadioOptionType, type RadioSemanticPart, } from './components/radio/radio';
-export { Tabs, type TabsProps, type TabItem, type TabsSemanticPart, } from './components/tabs/tabs';
+export { Drawer, type DrawerPlacement, type DrawerProps, type DrawerResizableConfig, type DrawerSemanticPart, type DrawerSize, } from './components/drawer/drawer';
+export { Dropdown, type DropdownButtonProps, type DropdownPlacement, type DropdownProps, type DropdownSemanticPart, type DropdownTrigger, type MenuDividerType, type MenuGroupType, type MenuItem, type MenuItemType, type MenuProps, } from './components/dropdown/dropdown';
+export { FormActions, type FormActionsProps, type FormActionsSemanticPart, } from './components/form-actions/form-actions';
+export { FormField, type FormFieldProps, type FormFieldSemanticPart, } from './components/form-field/form-field';
+export { FormSection, type FormSectionProps, type FormSectionSemanticPart, } from './components/form-section/form-section';
+export { Input, type InputProps, type InputSemanticPart, } from './components/input/input';
+export { type AutoSizeOptions, Textarea, type TextareaProps, type TextareaSemanticPart, } from './components/textarea/textarea';
+export { type ConfirmType, Modal, type ModalFooterRender, type ModalFuncProps, type ModalFuncReturn, type ModalHookApi, type ModalProps, type ModalSemanticPart, } from './components/modal';
 export { Pagination, type PaginationProps, type PaginationSemanticPart, } from './components/pagination/pagination';
-export { Table, type TableProps, type TableColumn, type TableRowSelection, type TableFilterItem, type TablePagination, type SortOrder, type SorterResult, type TableSemanticPart, } from './components/table/table';
-export { Splitter, type SplitterProps, type SplitterPanelProps, type SplitterSemanticPart, } from './components/splitter/splitter';
-export { Tag, CheckableTag, type TagProps, type CheckableTagProps, type TagColor, type TagVariant, type TagSemanticPart, } from './components/tag/tag';
-export { ScrollArea, type ScrollAreaProps, type ScrollAreaType, type ScrollAreaSemanticPart, } from './components/scroll-area/scroll-area';
+export { Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, type RadioSemanticPart, } from './components/radio/radio';
+export { ScrollArea, type ScrollAreaProps, type ScrollAreaSemanticPart, type ScrollAreaType, } from './components/scroll-area/scroll-area';
+export { Select, type SelectOption, type SelectProps, } from './components/select/select';
+export { Splitter, type SplitterPanelProps, type SplitterProps, type SplitterSemanticPart, } from './components/splitter/splitter';
+export { Switch, type SwitchProps, type SwitchSemanticPart, } from './components/switch/switch';
+export { type SorterResult, type SortOrder, Table, type TableColumn, type TableFilterItem, type TablePagination, type TableProps, type TableRowSelection, type TableSemanticPart, } from './components/table/table';
+export { type TabItem, Tabs, type TabsProps, type TabsSemanticPart, } from './components/tabs/tabs';
+export { CheckableTag, type CheckableTagProps, Tag, type TagColor, type TagProps, type TagSemanticPart, type TagVariant, } from './components/tag/tag';
+export { FormLayout, type FormLayoutProps, } from './layouts/form-layout/form-layout';
 export { Stack, type StackProps } from './layouts/stack/stack';
-export { FormLayout, type FormLayoutProps } from './layouts/form-layout/form-layout';
 export { type FormatOptions, NumberInput, type NumberInputProps, type PadDecimalsOnBlur, type UseNumberInputOptions, type UseNumberInputReturn, useNumberInput, } from './number-input';
+export { TaoProvider, type TaoProviderProps, type TaoSeedToken, type TaoSize, type TaoThemeConfig, type TaoVariant, useTaoConfig, } from './provider/tao-provider';
+export { cx, type SemanticClassNames, type SemanticStyles, } from './utils/semantic';

package/dist/index.js

@@ -1,23 +1,29 @@
-export { TaoProvider, useTaoConfig } from "./provider/tao-provider.js";
-export { cx } from "./utils/semantic.js";
+export { Breadcrumb } from "./components/breadcrumb/breadcrumb.js";
 export { Button } from "./components/button/button.js";
-export { Input } from "./components/input/input.js";
-export { Select } from "./components/select/select.js";
-export { FormField } from "./components/form-field/form-field.js";
-export { FormSection } from "./components/form-section/form-section.js";
-export { FormActions } from "./components/form-actions/form-actions.js";
-export { Drawer } from "./components/drawer/drawer.js";
-export { Switch } from "./components/switch/switch.js";
+export { Checkbox, CheckboxGroup } from "./components/checkbox/checkbox.js";
+export { Collapsible } from "./components/collapsible/collapsible.js";
+export { ContextMenu } from "./components/context-menu/context-menu.js";
 export { DatePicker } from "./components/date-picker/date-picker.js";
 export { RangePicker } from "./components/date-picker/range-picker.js";
-export { Checkbox, CheckboxGroup } from "./components/checkbox/checkbox.js";
-export { Radio, RadioGroup } from "./components/radio/radio.js";
-export { Tabs } from "./components/tabs/tabs.js";
+export { Drawer } from "./components/drawer/drawer.js";
+export { Dropdown } from "./components/dropdown/dropdown.js";
+export { FormActions } from "./components/form-actions/form-actions.js";
+export { FormField } from "./components/form-field/form-field.js";
+export { FormSection } from "./components/form-section/form-section.js";
+export { Input } from "./components/input/input.js";
+export { Textarea } from "./components/textarea/textarea.js";
+export { Modal } from "./components/modal/index.js";
 export { Pagination } from "./components/pagination/pagination.js";
-export { Table } from "./components/table/table.js";
+export { Radio, RadioGroup } from "./components/radio/radio.js";
+export { ScrollArea } from "./components/scroll-area/scroll-area.js";
+export { Select } from "./components/select/select.js";
 export { Splitter } from "./components/splitter/splitter.js";
+export { Switch } from "./components/switch/switch.js";
+export { Table } from "./components/table/table.js";
+export { Tabs } from "./components/tabs/tabs.js";
 export { CheckableTag, Tag } from "./components/tag/tag.js";
-export { ScrollArea } from "./components/scroll-area/scroll-area.js";
-export { Stack } from "./layouts/stack/stack.js";
 export { FormLayout } from "./layouts/form-layout/form-layout.js";
+export { Stack } from "./layouts/stack/stack.js";
 export { NumberInput, useNumberInput } from "./number-input/index.js";
+export { TaoProvider, useTaoConfig } from "./provider/tao-provider.js";
+export { cx } from "./utils/semantic.js";

package/dist/layouts/stack/layout.css

@@ -307,6 +307,8 @@
     --tao-radius: 6px;
     --tao-font-size: 14px;
     --tao-control-height: 36px;
+    --tao-control-width: 200px;
+    --tao-control-range-width: 360px;
     --tao-size-unit: 4px;
     --tao-line-width: 1px;
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
@@ -529,8 +531,8 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-bg-container: var(--tao-color-bg-base);
-    --tao-color-bg-elevated: var(--tao-color-bg-base);
+    --tao-color-bg-container: oklch(100% 0 0);
+    --tao-color-bg-elevated: oklch(100% 0 0);
     --tao-color-border: var(--tao-color-text-base);
   }
 
@@ -541,16 +543,7 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-border-secondary: var(--tao-color-text-base);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, [data-tao-provider] {
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
-    }
-  }
-
-  :root, [data-tao-provider] {
+    --tao-color-border-secondary: #0000170b;
     --tao-radius-xs: 2px;
     --tao-radius-sm: calc(var(--tao-radius) - 2px);
     --tao-radius-md: var(--tao-radius);
@@ -633,6 +626,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +712,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +728,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .resize {
+    resize: both;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -742,6 +747,14 @@
     border-width: 1px;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -771,6 +784,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
 }
 
 [data-tao-stack] {

package/dist/theme/control.css

@@ -307,6 +307,8 @@
     --tao-radius: 6px;
     --tao-font-size: 14px;
     --tao-control-height: 36px;
+    --tao-control-width: 200px;
+    --tao-control-range-width: 360px;
     --tao-size-unit: 4px;
     --tao-line-width: 1px;
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
@@ -529,8 +531,8 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-bg-container: var(--tao-color-bg-base);
-    --tao-color-bg-elevated: var(--tao-color-bg-base);
+    --tao-color-bg-container: oklch(100% 0 0);
+    --tao-color-bg-elevated: oklch(100% 0 0);
     --tao-color-border: var(--tao-color-text-base);
   }
 
@@ -541,16 +543,7 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-border-secondary: var(--tao-color-text-base);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, [data-tao-provider] {
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
-    }
-  }
-
-  :root, [data-tao-provider] {
+    --tao-color-border-secondary: #0000170b;
     --tao-radius-xs: 2px;
     --tao-radius-sm: calc(var(--tao-radius) - 2px);
     --tao-radius-md: var(--tao-radius);
@@ -633,6 +626,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +712,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +728,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .resize {
+    resize: both;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -742,6 +747,14 @@
     border-width: 1px;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -771,6 +784,24 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
+}
+
+[data-tao-control] {
+  box-sizing: border-box;
+  width: var(--tao-control-width);
+}
+
+[data-tao-control][data-tao-range-trigger] {
+  width: var(--tao-control-range-width);
+}
+
+[data-tao-form-field] [data-tao-control] {
+  width: 100%;
 }
 
 [data-tao-control] {
@@ -778,8 +809,8 @@
 }
 
 [data-tao-control][data-tao-variant="outlined"] {
-  background: var(--tao-color-bg-container);
   border: var(--tao-line-width) solid var(--tao-color-border);
+  background: none;
 }
 
 [data-tao-control][data-tao-variant="outlined"]:hover:not([data-disabled]):not(:focus-within):not([data-state="open"]) {

package/dist/theme/theme.css

@@ -307,6 +307,8 @@
     --tao-radius: 6px;
     --tao-font-size: 14px;
     --tao-control-height: 36px;
+    --tao-control-width: 200px;
+    --tao-control-range-width: 360px;
     --tao-size-unit: 4px;
     --tao-line-width: 1px;
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
@@ -529,8 +531,8 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-bg-container: var(--tao-color-bg-base);
-    --tao-color-bg-elevated: var(--tao-color-bg-base);
+    --tao-color-bg-container: oklch(100% 0 0);
+    --tao-color-bg-elevated: oklch(100% 0 0);
     --tao-color-border: var(--tao-color-text-base);
   }
 
@@ -541,16 +543,7 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-border-secondary: var(--tao-color-text-base);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, [data-tao-provider] {
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
-    }
-  }
-
-  :root, [data-tao-provider] {
+    --tao-color-border-secondary: #0000170b;
     --tao-radius-xs: 2px;
     --tao-radius-sm: calc(var(--tao-radius) - 2px);
     --tao-radius-md: var(--tao-radius);
@@ -633,6 +626,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +712,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +728,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .resize {
+    resize: both;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -742,6 +747,14 @@
     border-width: 1px;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -771,6 +784,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
 }
 
 @property --tw-rotate-x {

package/llms.txt

@@ -13,7 +13,7 @@ Module format: ESM only. Types and CSS ship alongside the JS; component CSS is i
 
 ## Core concepts
 
-- **TaoProvider**: wrap the app once. Provides `size` (`'small' | 'middle' | 'large'`), `disabled`, and `variant` defaults to all descendants, plus theme tokens. A local prop on a component overrides the provider value. Hook: `useTaoConfig()`.
+- **TaoProvider**: wrap the app once. Provides `size` (`'small' | 'medium' | 'large'`), `disabled`, and `variant` (`'outlined' | 'filled' | 'borderless'`) defaults to all descendants, plus theme tokens. A local prop on a component overrides the provider value. Hook: `useTaoConfig()`.
 - **Theming**: a small seed token set (`TaoSeedToken`) is expanded into a full theme. Pure-CSS-computable values use `calc()`/`color-mix()` with OKLCH; non-linear values (radius steps, font-size log scale, control heights) are computed in JS and injected by `TaoProvider`. CSS variables are prefixed `--tao-*`; data attributes are `data-tao-*`.
 - **Semantic DOM**: every component takes optional `classNames?: SemanticClassNames<Part>` and `styles?: SemanticStyles<Part>`, where `Part` is a component-specific union (e.g. `'root' | 'header' | 'body'`, dotted for nested parts like `'header.cell'`). The top-level `className` prop merges into the `root` part. Helper `cx` is exported.
 
@@ -24,7 +24,7 @@ import { TaoProvider, Input, Select, Switch } from '@rockshin/tao-ui';
 
 function App() {
   return (
-    <TaoProvider size="middle">
+    <TaoProvider size="medium">
       <Input placeholder="Search" />
       <Select options={[{ label: 'A', value: 'a' }]} />
       <Switch defaultChecked />
@@ -46,10 +46,10 @@ Provider & utilities:
 Components (each exports `<Name>Props` and, where applicable, `<Name>SemanticPart`):
 - General: `Button`
 - Layout: `Stack`, `FormLayout`, `Splitter` (+ `SplitterPanelProps`)
-- Navigation: `Tabs` (+ `TabItem`), `Pagination`
-- Data Entry: `Input`, `Select` (+ `SelectOption`), `Checkbox` / `CheckboxGroup` (+ `CheckboxOptionType`), `Radio` / `RadioGroup` (+ `RadioOptionType`), `Switch`, `DatePicker`, `RangePicker`, `FormField`, `FormSection`, `FormActions`
-- Data Display: `Table` (+ `TableColumn`, `TableRowSelection`, `TableFilterItem`, `TablePagination`, `SortOrder`, `SorterResult`), `Tag` / `CheckableTag` (+ `TagColor`, `TagVariant`), `ScrollArea` (+ `ScrollAreaType`)
-- Feedback: `Drawer` (+ `DrawerPlacement`)
+- Navigation: `Tabs` (+ `TabItem`), `Pagination`, `Breadcrumb` (+ `BreadcrumbItemType`), `Dropdown` (+ `DropdownButtonProps`, `DropdownPlacement`, `DropdownTrigger`, and menu-config types `MenuProps`, `MenuItem`, `MenuItemType`, `MenuGroupType`, `MenuDividerType`), `ContextMenu`
+- Data Entry: `Input`, `Textarea` (+ `AutoSizeOptions`), `Select` (+ `SelectOption`), `Checkbox` / `CheckboxGroup` (+ `CheckboxOptionType`), `Radio` / `RadioGroup` (+ `RadioOptionType`), `Switch`, `DatePicker`, `RangePicker`, `FormField`, `FormSection`, `FormActions`
+- Data Display: `Table` (+ `TableColumn`, `TableRowSelection`, `TableFilterItem`, `TablePagination`, `SortOrder`, `SorterResult`), `Tag` / `CheckableTag` (+ `TagColor`, `TagVariant`), `ScrollArea` (+ `ScrollAreaType`), `Collapsible` (+ `CollapsibleTriggerProps`, `CollapsibleContentProps`)
+- Feedback: `Drawer` (+ `DrawerPlacement`, `DrawerSize`, `DrawerResizableConfig`), `Modal` (+ `ModalSemanticPart`; static helpers `Modal.confirm/info/success/error/warning`, hook `Modal.useModal()`, `Modal.destroyAll()`; types `ModalHookApi`, `ModalFuncProps`, `ModalFuncReturn`, `ModalFooterRender`, `ConfirmType`)
 
 Headless:
 - `useNumberInput`, `NumberInput` (+ `NumberInputProps`, `UseNumberInputOptions`, `UseNumberInputReturn`, `FormatOptions`, `PadDecimalsOnBlur`)
@@ -59,6 +59,7 @@ Headless:
 - Import everything from the package root `@rockshin/tao-ui`; there are no deep sub-path entry points.
 - Do not hand-write internal class names; customize via `classNames`/`styles` semantic parts.
 - Prefer setting `size`/`disabled`/`variant` on `TaoProvider` for app-wide defaults; override per-component only when needed.
+- `Modal` follows the antd pattern: render `<Modal open onCancel ...>` for controlled dialogs, or call `Modal.confirm({ title, onOk })` / `Modal.info|success|error|warning` for one-off dialogs. Inside components prefer `const [modal, contextHolder] = Modal.useModal()` (render `contextHolder`) so dialogs read the surrounding `TaoProvider` context.
 - Override theme by passing a partial seed to `TaoProvider`'s theme config rather than overriding `--tao-*` variables directly.
 
 ## Source