@rockshin/tao-ui 0.0.1 → 0.0.3

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,30 @@
-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 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 { ChevronsUpDownIcon, Select, type SelectOption, type SelectPlacement, type SelectProps, type SelectSemanticPart, } from './components/select/select';
+export { Spinner, type SpinnerProps, type SpinnerSemanticPart, } from './components/spinner/spinner';
+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 { type AutoSizeOptions, Textarea, type TextareaProps, type TextareaSemanticPart, } from './components/textarea/textarea';
+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 { TaoPortalScope, 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,30 @@
-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 { 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 { ChevronsUpDownIcon, Select } from "./components/select/select.js";
+export { Spinner } from "./components/spinner/spinner.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 { Textarea } from "./components/textarea/textarea.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 { TaoPortalScope, TaoProvider, useTaoConfig } from "./provider/tao-provider.js";
+export { cx } from "./utils/semantic.js";

package/dist/layouts/stack/layout.css

@@ -307,11 +307,16 @@
     --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;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -529,8 +534,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 +546,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 +629,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +715,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +731,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 +750,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 +787,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/provider/tao-provider.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export interface TaoSeedToken {
     colorPrimary?: string;
     colorSuccess?: string;
@@ -29,8 +29,24 @@ interface TaoConfigContextValue {
     size: TaoSize;
     disabled: boolean;
     variant: TaoVariant;
+    /**
+     * Merged CSS custom-property overrides from this provider and all ancestors.
+     * Carried through context so portaled layers (Modal/Drawer/Select dropdown…)
+     * — which render outside the provider's DOM subtree — can re-apply the theme.
+     */
+    tokenStyle: CSSProperties;
 }
 export declare function useTaoConfig(): TaoConfigContextValue;
+/**
+ * Re-establishes the theme token scope inside a portal. Floating components
+ * portal their popup to document.body, escaping the `[data-tao-provider]`
+ * element that carries custom token overrides; wrapping the portal content in
+ * this component re-applies those overrides so colors/sizes stay consistent.
+ */
+export declare function TaoPortalScope({ children, style, }: {
+    children: ReactNode;
+    style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
 export interface TaoProviderProps {
     children: ReactNode;
     theme?: TaoThemeConfig;

package/dist/provider/tao-provider.js

@@ -1,13 +1,42 @@
 import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
 import { createContext, useContext, useMemo } from "react";
 const TaoConfigContext = /*#__PURE__*/ createContext({
     size: 'medium',
     disabled: false,
-    variant: 'outlined'
+    variant: 'outlined',
+    tokenStyle: {}
 });
 function useTaoConfig() {
     return useContext(TaoConfigContext);
 }
+function TaoPortalScope(t0) {
+    const $ = c(6);
+    const { children, style } = t0;
+    const { tokenStyle } = useTaoConfig();
+    let t1;
+    if ($[0] !== style || $[1] !== tokenStyle) {
+        t1 = {
+            ...tokenStyle,
+            ...style
+        };
+        $[0] = style;
+        $[1] = tokenStyle;
+        $[2] = t1;
+    } else t1 = $[2];
+    let t2;
+    if ($[3] !== children || $[4] !== t1) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            "data-tao-provider": "",
+            style: t1,
+            children: children
+        });
+        $[3] = children;
+        $[4] = t1;
+        $[5] = t2;
+    } else t2 = $[5];
+    return t2;
+}
 const TOKEN_TO_VAR = {
     colorPrimary: '--tao-color-primary',
     colorSuccess: '--tao-color-success',
@@ -28,18 +57,7 @@ const TOKEN_TO_VAR_PX = {
 function TaoProvider({ theme, size, disabled, variant, children }) {
     const parentConfig = useContext(TaoConfigContext);
     const inherit = theme?.inherit ?? true;
-    const config = useMemo(()=>({
-            size: size ?? (inherit ? parentConfig.size : 'medium'),
-            disabled: disabled ?? (inherit ? parentConfig.disabled : false),
-            variant: variant ?? (inherit ? parentConfig.variant : 'outlined')
-        }), [
-        size,
-        disabled,
-        variant,
-        parentConfig,
-        inherit
-    ]);
-    const style = useMemo(()=>{
+    const ownVars = useMemo(()=>{
         if (!theme?.token) return;
         const vars = {};
         const t = theme.token;
@@ -55,13 +73,33 @@ function TaoProvider({ theme, size, disabled, variant, children }) {
     }, [
         theme?.token
     ]);
+    const tokenStyle = useMemo(()=>({
+            ...parentConfig.tokenStyle,
+            ...ownVars
+        }), [
+        parentConfig.tokenStyle,
+        ownVars
+    ]);
+    const config = useMemo(()=>({
+            size: size ?? (inherit ? parentConfig.size : 'medium'),
+            disabled: disabled ?? (inherit ? parentConfig.disabled : false),
+            variant: variant ?? (inherit ? parentConfig.variant : 'outlined'),
+            tokenStyle
+        }), [
+        size,
+        disabled,
+        variant,
+        parentConfig,
+        inherit,
+        tokenStyle
+    ]);
     return /*#__PURE__*/ jsx(TaoConfigContext.Provider, {
         value: config,
         children: /*#__PURE__*/ jsx("div", {
-            style: style,
+            style: ownVars,
             "data-tao-provider": "",
             children: children
         })
     });
 }
-export { TaoProvider, useTaoConfig };
+export { TaoPortalScope, TaoProvider, useTaoConfig };