@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/theme/control.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,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 +812,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"]) {
@@ -805,6 +839,25 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning] {
+  border-color: var(--tao-warning);
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  border-color: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    border-color: color-mix(in oklch, var(--tao-color-warning) 80%, white);
+  }
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-warning][data-state="open"] {
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="outlined"][data-disabled], [data-tao-control][data-tao-variant="outlined"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -849,6 +902,26 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="filled"][data-tao-warning] {
+  background: var(--tao-warning-bg);
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    background: color-mix(in oklch, var(--tao-color-warning) 10%, var(--tao-color-bg-base));
+  }
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-warning][data-state="open"] {
+  background: var(--tao-color-bg-container);
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="filled"][data-disabled], [data-tao-control][data-tao-variant="filled"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);

package/dist/theme/theme.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;
+  }
 }
 
 @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rockshin/tao-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "description": "A modern React 19 component library with semantic DOM customization and OKLCH-based theming.",
   "keywords": [
@@ -49,15 +49,15 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.4.14",
-    "@rsbuild/core": "~2.0.6",
-    "@rsbuild/plugin-babel": "^1.1.2",
-    "@rsbuild/plugin-react": "^2.0.0",
-    "@rslib/core": "^0.21.5",
-    "@rspress/core": "^2.0.11",
-    "@rspress/plugin-api-docgen": "^2.0.11",
-    "@rspress/plugin-preview": "^2.0.11",
-    "@rstest/adapter-rslib": "^0.2.2",
-    "@rstest/core": "^0.9.10",
+    "@rsbuild/core": "^2.0.11",
+    "@rsbuild/plugin-babel": "^1.2.1",
+    "@rsbuild/plugin-react": "^2.0.1",
+    "@rslib/core": "^0.22.0",
+    "@rspress/core": "^2.0.13",
+    "@rspress/plugin-api-docgen": "^2.0.13",
+    "@rspress/plugin-preview": "^2.0.13",
+    "@rstest/adapter-rslib": "^0.10.3",
+    "@rstest/core": "^0.10.3",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/addon-onboarding": "^10.3.6",
     "@storybook/react": "^10.3.6",
@@ -66,15 +66,16 @@
     "@testing-library/react": "^16.3.2",
     "@types/node": "^24.12.4",
     "@types/react": "^19.2.14",
+    "@types/react-dom": "^19",
     "babel-plugin-react-compiler": "^1.0.0",
     "happy-dom": "^20.9.0",
     "postcss": "^8.5.15",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "rsbuild-plugin-workspace-dev": "^0.1.4",
+    "rsbuild-plugin-workspace-dev": "^1.0.0",
     "storybook": "^10.3.6",
-    "storybook-addon-rslib": "^3.3.3",
-    "storybook-react-rsbuild": "^3.3.3",
+    "storybook-addon-rslib": "^3.3.4",
+    "storybook-react-rsbuild": "^3.3.4",
     "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3"
   },
@@ -88,9 +89,13 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.13",
+    "@radix-ui/react-context-menu": "^2.3.0",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-virtual": "^3.14.2",
     "dayjs": "^1.11.21"
   }