@rockshin/tao-ui 0.0.1 → 0.0.2

package/dist/components/switch/switch.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;
+  }
 }
 
 button[data-tao-switch] {

package/dist/components/table/table.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,14 +784,36 @@
     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-table-wrapper] {
   font-family: var(--tao-font-family);
   color: var(--tao-color-text);
+  --tao-table-cell-bg: transparent;
+  --tao-table-header-bg: transparent;
+  --tao-table-header-color: var(--tao-color-text-secondary);
+  --tao-table-row-hover-bg: oklch(0% 0 0 / .02);
+  --tao-table-row-selected-bg: oklch(0% 0 0 / .05);
+  --tao-table-row-selected-hover-bg: oklch(0% 0 0 / .07);
   position: relative;
 }
 
+[data-tao-table-wrapper][data-tao-variant="filled"], [data-tao-table-wrapper][data-tao-variant="outlined"] {
+  --tao-table-header-bg: oklch(98.5% 0 0);
+  --tao-table-row-hover-bg: oklch(98.5% 0 0);
+  --tao-table-row-selected-bg: var(--tao-primary-bg);
+  --tao-table-row-selected-hover-bg: var(--tao-primary-bg-hover);
+}
+
+[data-tao-table-wrapper][data-tao-header-bg="off"] {
+  --tao-table-header-bg: transparent;
+}
+
 [data-tao-table-scroll] {
   position: relative;
   overflow-x: auto;
@@ -798,7 +833,7 @@
   padding: var(--tao-padding-sm) var(--tao-padding);
   text-align: left;
   border-bottom: var(--tao-line-width) solid var(--tao-color-border-secondary);
-  background: var(--tao-color-bg-container);
+  background: var(--tao-table-cell-bg);
   transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
 }
 
@@ -818,8 +853,8 @@
 
 [data-tao-table-thead] [data-tao-table-cell] {
   font-weight: var(--tao-font-weight-medium);
-  color: var(--tao-color-text-secondary);
-  background: var(--tao-color-fill-quaternary);
+  color: var(--tao-table-header-color);
+  background: var(--tao-table-header-bg);
   white-space: nowrap;
 }
 
@@ -948,15 +983,15 @@
 }
 
 [data-tao-table-row]:hover [data-tao-table-cell] {
-  background: var(--tao-color-fill-quaternary);
+  background: var(--tao-table-row-hover-bg);
 }
 
 [data-tao-table-row][data-tao-selected] [data-tao-table-cell] {
-  background: var(--tao-primary-bg);
+  background: var(--tao-table-row-selected-bg);
 }
 
 [data-tao-table-row][data-tao-selected]:hover [data-tao-table-cell] {
-  background: var(--tao-primary-bg-hover);
+  background: var(--tao-table-row-selected-hover-bg);
 }
 
 [data-tao-table-selection-cell] {
@@ -971,6 +1006,7 @@
 
 [data-tao-table-cell][data-tao-fixed] {
   z-index: 1;
+  background: var(--tao-color-bg-container);
   position: sticky;
 }
 

package/dist/components/table/table.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type TaoSize } from '../../provider/tao-provider';
+import { type TaoSize, type TaoVariant } from '../../provider/tao-provider';
 import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
 import './table.css';
 export type TableSemanticPart = 'root' | 'header.cell' | 'body.row' | 'body.cell' | 'pagination';
@@ -64,10 +64,25 @@ export interface TableProps<T = any> {
     };
     rowSelection?: TableRowSelection<T>;
     size?: TaoSize;
+    /**
+     * 表面风格。
+     * - `borderless`（极简）：无表头底色、单元格透明、仅行底分隔线。
+     * - `filled`：表头灰底（库的默认表现）。
+     * - `outlined`：filled + 整体外框 + 列分隔线。
+     *
+     * 不传时继承 TaoProvider 的 variant；当继承到框架默认 `outlined` 时，
+     * Table 回落为 `filled` 以保持向后兼容（裸用 `<Table>` 仍是灰底表头）。
+     */
+    variant?: TaoVariant;
+    /**
+     * 表头灰底开关，默认 `true`。设为 `false` 关掉表头底色（极简表头），
+     * 不影响外框 / 列分隔线等其它 variant 表现。
+     */
+    headerBackground?: boolean;
     emptyText?: ReactNode;
     bordered?: boolean;
     className?: string;
     classNames?: SemanticClassNames<TableSemanticPart>;
     styles?: SemanticStyles<TableSemanticPart>;
 }
-export declare function Table<T = any>({ columns, dataSource, rowKey, loading, pagination: paginationProp, onChange, scroll, rowSelection, size, emptyText, bordered, className, classNames, styles, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<T = any>({ columns, dataSource, rowKey, loading, pagination: paginationProp, onChange, scroll, rowSelection, size, variant, headerBackground, emptyText, bordered, className, classNames, styles, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;