@rockshin/tao-ui 0.0.6 → 0.0.8

package/dist/components/select/select.css

@@ -1,8 +1,24 @@
 [data-tao-select] {
-  align-items: center;
+  --tao-select-height: var(--tao-control-height);
+  --tao-select-font-size: var(--tao-font-size-base);
+  --tao-select-line-height: var(--tao-line-height);
+  --tao-select-padding-inline: var(--tao-padding-sm);
+  --tao-select-padding-block: calc((
+      var(--tao-select-height) -
+      var(--tao-select-font-size) *
+      var(--tao-select-line-height)
+    ) /
+    2 -
+    var(--tao-line-width));
+  align-items: flex-start;
   gap: var(--tao-padding-xs);
   width: 100%;
   font-family: var(--tao-font-family);
+  font-size: var(--tao-select-font-size);
+  line-height: var(--tao-select-line-height);
+  height: var(--tao-select-height);
+  padding-block: max(var(--tao-select-padding-block), 0px);
+  padding-inline: var(--tao-select-padding-inline);
   cursor: pointer;
   outline: none;
   display: flex;
@@ -18,39 +34,44 @@ button[data-tao-select] {
   white-space: nowrap;
   min-width: 0;
   color: var(--tao-color-text);
+  line-height: var(--tao-select-line-height);
   flex: 1;
+  align-self: center;
+  display: block;
   overflow: hidden;
 }
 
 [data-tao-select-placeholder] {
   color: var(--tao-color-text-placeholder);
+  line-height: var(--tao-select-line-height);
 }
 
 [data-tao-select][data-tao-size="small"] {
-  height: var(--tao-control-height-sm);
-  padding-inline: var(--tao-padding-xs);
-  font-size: var(--tao-font-size-sm);
+  --tao-select-height: var(--tao-control-height-sm);
+  --tao-select-font-size: var(--tao-font-size-sm);
+  --tao-select-line-height: var(--tao-line-height-sm);
+  --tao-select-padding-inline: var(--tao-padding-xs);
   border-radius: var(--tao-radius-sm);
 }
 
 [data-tao-select][data-tao-size="medium"] {
-  height: var(--tao-control-height);
-  padding-inline: var(--tao-padding-sm);
-  font-size: var(--tao-font-size-base);
   border-radius: var(--tao-radius-md);
 }
 
 [data-tao-select][data-tao-size="large"] {
-  height: var(--tao-control-height-lg);
-  padding-inline: var(--tao-padding-sm);
-  font-size: var(--tao-font-size-lg);
+  --tao-select-height: var(--tao-control-height-lg);
+  --tao-select-font-size: var(--tao-font-size-lg);
+  --tao-select-line-height: var(--tao-line-height-lg);
   border-radius: var(--tao-radius-md);
 }
 
 [data-tao-select-prefix] {
   color: var(--tao-color-text-tertiary);
   flex-shrink: 0;
+  justify-content: center;
+  align-self: center;
   align-items: center;
+  line-height: 0;
   display: flex;
 }
 
@@ -58,6 +79,7 @@ button[data-tao-select] {
   border-radius: var(--tao-radius-sm);
   flex: none;
   justify-content: center;
+  align-self: center;
   align-items: center;
   width: 1.25rem;
   height: 1.25rem;
@@ -73,9 +95,12 @@ button[data-tao-select] {
 
 [data-tao-select-icons] {
   flex-shrink: 0;
+  justify-content: center;
+  align-self: center;
   align-items: center;
   gap: 4px;
   margin-inline-start: auto;
+  line-height: 0;
   display: flex;
   position: relative;
 }
@@ -167,14 +192,17 @@ button[data-tao-select] {
 [data-tao-select-search] {
   align-items: center;
   gap: var(--tao-padding-xs);
+  min-height: var(--tao-control-height);
   padding: var(--tao-padding-xs) var(--tao-padding-sm);
   border-block-end: var(--tao-line-width) solid
     var(--tao-color-border-secondary);
   color: var(--tao-color-text-tertiary);
+  line-height: 1;
   display: flex;
 }
 
 [data-tao-select-search-input] {
+  height: calc(var(--tao-control-height) - var(--tao-padding-xs) * 2);
   font-family: var(--tao-font-family);
   font-size: var(--tao-font-size-base);
   color: var(--tao-color-text);
@@ -183,6 +211,7 @@ button[data-tao-select] {
   outline: none;
   flex: 1;
   min-width: 0;
+  line-height: 1;
 }
 
 [data-tao-select-search-input]::placeholder {
@@ -221,6 +250,7 @@ button[data-tao-select] {
     var(--tao-motion-ease-out);
   outline: none;
   align-items: center;
+  line-height: 1;
   display: flex;
 }
 
@@ -265,7 +295,9 @@ button[data-tao-select] {
 [data-tao-select-item-main] {
   flex-direction: column;
   flex: 1;
+  justify-content: center;
   min-width: 0;
+  line-height: 1;
   display: flex;
 }
 

package/dist/components/select/select.js

@@ -95,8 +95,7 @@ function Select(props) {
         isSearchControlled,
         onSearch
     ]);
-    const handleClear = useCallback((e)=>{
-        e.stopPropagation();
+    const clearValue = useCallback(()=>{
         if (!isValueControlled) setValueInternal(void 0);
         onChange?.('', void 0);
         onClear?.();
@@ -105,6 +104,12 @@ function Select(props) {
         onChange,
         onClear
     ]);
+    const handleClear = useCallback((e)=>{
+        e.stopPropagation();
+        clearValue();
+    }, [
+        clearValue
+    ]);
     const filteredOptions = useMemo(()=>{
         if (!showSearch || !search) return options;
         const fn = filterOption ?? defaultFilter;
@@ -141,7 +146,15 @@ function Select(props) {
             style: styles?.clear,
             onPointerDown: (e_0)=>e_0.stopPropagation(),
             onClick: handleClear,
+            onKeyDown: (e_1)=>{
+                if ('Enter' === e_1.key || ' ' === e_1.key) {
+                    e_1.preventDefault();
+                    e_1.stopPropagation();
+                    clearValue();
+                }
+            },
             role: "button",
+            tabIndex: 0,
             "aria-label": "Clear",
             children: clearIcon
         }) : /*#__PURE__*/ jsx("span", {
@@ -293,7 +306,7 @@ function Select(props) {
                     /*#__PURE__*/ jsx("input", {
                         "data-tao-select-search-input": "",
                         value: search,
-                        onChange: (e_1)=>handleSearchChange(e_1.target.value),
+                        onChange: (e_2)=>handleSearchChange(e_2.target.value),
                         placeholder: "Search...",
                         autoFocus: true
                     })
@@ -389,6 +402,8 @@ function ChevronDownIcon() {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
+            "aria-hidden": "true",
+            role: "presentation",
             children: /*#__PURE__*/ jsx("path", {
                 d: "m6 9 6 6 6-6"
             })
@@ -432,6 +447,8 @@ function CheckIcon() {
             strokeWidth: "2.5",
             strokeLinecap: "round",
             strokeLinejoin: "round",
+            "aria-hidden": "true",
+            role: "presentation",
             children: /*#__PURE__*/ jsx("polyline", {
                 points: "20 6 9 17 4 12"
             })
@@ -453,6 +470,8 @@ function CloseIcon() {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
+            "aria-hidden": "true",
+            role: "presentation",
             children: /*#__PURE__*/ jsx("path", {
                 d: "M18 6 6 18M6 6l12 12"
             })
@@ -474,6 +493,8 @@ function SearchIcon() {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
+            "aria-hidden": "true",
+            role: "presentation",
             children: [
                 /*#__PURE__*/ jsx("circle", {
                     cx: "11",
@@ -503,6 +524,8 @@ function LoadingIcon() {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
+            "aria-hidden": "true",
+            role: "presentation",
             children: /*#__PURE__*/ jsx("path", {
                 d: "M21 12a9 9 0 1 1-6.219-8.56"
             })

package/dist/components/table/table.css

@@ -4,19 +4,42 @@
   --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-hover-bg: #fafafa;
   --tao-table-row-selected-bg: oklch(0% 0 0 / .05);
   --tao-table-row-selected-hover-bg: oklch(0% 0 0 / .07);
+  --tao-table-border-color: var(--tao-color-border-secondary);
+  --tao-table-frame-radius: var(--tao-radius-md);
+  --tao-table-cell-padding-block: var(--tao-padding-sm);
+  --tao-table-cell-padding-inline: var(--tao-padding);
+  --tao-table-cell-font-size: var(--tao-font-size-base);
+  --tao-table-cell-line-height: var(--tao-line-height);
+  --tao-table-header-cell-padding-block: var(--tao-table-cell-padding-block);
+  --tao-table-header-cell-padding-inline: var(--tao-table-cell-padding-inline);
+  --tao-table-header-font-size: var(--tao-table-cell-font-size);
+  --tao-table-header-font-weight: var(--tao-font-weight-medium);
+  --tao-table-header-letter-spacing: normal;
+  --tao-table-header-text-transform: none;
+  --tao-table-empty-padding-block: var(--tao-padding-xl);
+  --tao-table-empty-padding-inline: var(--tao-padding);
+  --tao-table-empty-color: var(--tao-color-text-tertiary);
   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-variant="modern"] {
+  --tao-table-header-bg: var(--tao-color-bg-container);
+  --tao-table-header-color: var(--tao-color-text-secondary);
+  --tao-table-row-selected-bg: var(--tao-primary-bg);
+  --tao-table-row-selected-hover-bg: var(--tao-primary-bg-hover);
+  --tao-table-border-color: var(--tao-color-border);
+  --tao-table-frame-radius: var(--tao-radius-md);
+}
+
 [data-tao-table-wrapper][data-tao-header-bg="off"] {
   --tao-table-header-bg: transparent;
 }
@@ -26,6 +49,12 @@
   overflow-x: auto;
 }
 
+[data-tao-table-wrapper][data-tao-variant="modern"] [data-tao-table-scroll] {
+  border: var(--tao-line-width) solid var(--tao-table-border-color);
+  border-radius: var(--tao-table-frame-radius);
+  background: var(--tao-color-bg-container);
+}
+
 [data-tao-table] {
   border-collapse: collapse;
   table-layout: auto;
@@ -37,9 +66,12 @@
 }
 
 [data-tao-table-cell] {
-  padding: var(--tao-padding-sm) var(--tao-padding);
+  padding: var(--tao-table-cell-padding-block)
+    var(--tao-table-cell-padding-inline);
+  font-size: var(--tao-table-cell-font-size);
+  line-height: var(--tao-table-cell-line-height);
   text-align: left;
-  border-bottom: var(--tao-line-width) solid var(--tao-color-border-secondary);
+  border-bottom: var(--tao-line-width) solid var(--tao-table-border-color);
   background: var(--tao-table-cell-bg);
   transition: background-color var(--tao-motion-duration-fast)
     var(--tao-motion-ease-out);
@@ -60,18 +92,35 @@
 }
 
 [data-tao-table-thead] [data-tao-table-cell] {
-  font-weight: var(--tao-font-weight-medium);
+  padding: var(--tao-table-header-cell-padding-block)
+    var(--tao-table-header-cell-padding-inline);
+  font-size: var(--tao-table-header-font-size);
+  font-weight: var(--tao-table-header-font-weight);
+  letter-spacing: var(--tao-table-header-letter-spacing);
+  text-transform: var(--tao-table-header-text-transform);
   color: var(--tao-table-header-color);
   background: var(--tao-table-header-bg);
   white-space: nowrap;
 }
 
+[data-tao-table-wrapper][data-tao-variant="modern"] [data-tao-table-thead] [data-tao-table-cell] {
+  --tao-table-header-font-size: var(--tao-font-size-sm);
+}
+
 [data-tao-table-header-content] {
   align-items: center;
   gap: var(--tao-padding-xxs);
   display: flex;
 }
 
+[data-tao-table-cell][data-tao-align="center"] [data-tao-table-header-content] {
+  justify-content: center;
+}
+
+[data-tao-table-cell][data-tao-align="right"] [data-tao-table-header-content] {
+  justify-content: flex-end;
+}
+
 [data-tao-table-header-title] {
   align-items: center;
   gap: 2px;
@@ -248,8 +297,9 @@
 
 [data-tao-table-empty] {
   text-align: center;
-  padding: var(--tao-padding-xl) var(--tao-padding);
-  color: var(--tao-color-text-tertiary);
+  padding: var(--tao-table-empty-padding-block)
+    var(--tao-table-empty-padding-inline);
+  color: var(--tao-table-empty-color);
 }
 
 [data-tao-table-loading] {
@@ -277,31 +327,46 @@
 }
 
 [data-tao-table-wrapper][data-tao-bordered] [data-tao-table] {
-  border: var(--tao-line-width) solid var(--tao-color-border-secondary);
-  border-radius: var(--tao-radius-md);
+  border: var(--tao-line-width) solid var(--tao-table-border-color);
+  border-radius: var(--tao-table-frame-radius);
 }
 
 [data-tao-table-wrapper][data-tao-bordered] [data-tao-table-cell] {
-  border-right: var(--tao-line-width) solid var(--tao-color-border-secondary);
+  border-right: var(--tao-line-width) solid var(--tao-table-border-color);
 }
 
 [data-tao-table-wrapper][data-tao-bordered] tr > [data-tao-table-cell]:last-child {
   border-right: none;
 }
 
+[data-tao-table-wrapper][data-tao-variant="modern"][data-tao-bordered] [data-tao-table] {
+  border: none;
+}
+
+[data-tao-table-wrapper][data-tao-variant="modern"][data-tao-bordered] [data-tao-table-cell] {
+  border-right: none;
+}
+
+[data-tao-table-wrapper][data-tao-variant="modern"] [data-tao-table-tbody] tr:last-child [data-tao-table-cell] {
+  border-bottom: none;
+}
+
 [data-tao-table-wrapper][data-tao-size="small"] [data-tao-table-cell] {
-  padding: var(--tao-padding-xxs) var(--tao-padding-xs);
-  font-size: var(--tao-font-size-sm);
+  --tao-table-cell-padding-block: var(--tao-padding-xxs);
+  --tao-table-cell-padding-inline: var(--tao-padding-xs);
+  --tao-table-cell-font-size: var(--tao-font-size-sm);
 }
 
 [data-tao-table-wrapper][data-tao-size="medium"] [data-tao-table-cell] {
-  padding: var(--tao-padding-sm) var(--tao-padding);
-  font-size: var(--tao-font-size-base);
+  --tao-table-cell-padding-block: var(--tao-padding-sm);
+  --tao-table-cell-padding-inline: var(--tao-padding);
+  --tao-table-cell-font-size: var(--tao-font-size-base);
 }
 
 [data-tao-table-wrapper][data-tao-size="large"] [data-tao-table-cell] {
-  padding: var(--tao-padding) var(--tao-padding-md);
-  font-size: var(--tao-font-size-base);
+  --tao-table-cell-padding-block: var(--tao-padding);
+  --tao-table-cell-padding-inline: var(--tao-padding-md);
+  --tao-table-cell-font-size: var(--tao-font-size-base);
 }
 
 [data-tao-table-pagination] {

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

@@ -1,8 +1,9 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type HTMLAttributes, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
 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';
+export type TableSemanticPart = 'root' | 'scroll' | 'table' | 'header.wrapper' | 'header.row' | 'header.cell' | 'header.content' | 'header.title' | 'body.row' | 'body.cell' | 'selection.cell' | 'empty' | 'pagination';
+export type TableVariant = TaoVariant | 'modern';
 export type SortOrder = 'ascend' | 'descend' | null;
 export interface TableFilterItem {
     text: ReactNode;
@@ -17,6 +18,8 @@ export interface TableColumn<T = any> {
     align?: 'left' | 'center' | 'right';
     fixed?: 'left' | 'right';
     ellipsis?: boolean;
+    onCell?: (record: T, index: number) => TdHTMLAttributes<HTMLTableCellElement>;
+    onHeaderCell?: (column: TableColumn<T>) => ThHTMLAttributes<HTMLTableCellElement>;
     sorter?: ((a: T, b: T) => number) | boolean;
     sortOrder?: SortOrder;
     defaultSortOrder?: SortOrder;
@@ -49,6 +52,11 @@ export interface SorterResult<T = any> {
     order: SortOrder;
     field?: string;
 }
+export type TableSemanticInfo<T = any> = {
+    props: TableProps<T>;
+};
+export type TableSemanticClassNames<T = any> = SemanticClassNames<TableSemanticPart> | ((info: TableSemanticInfo<T>) => SemanticClassNames<TableSemanticPart>);
+export type TableSemanticStyles<T = any> = SemanticStyles<TableSemanticPart> | ((info: TableSemanticInfo<T>) => SemanticStyles<TableSemanticPart>);
 export interface TableProps<T = any> {
     columns: TableColumn<T>[];
     dataSource: T[];
@@ -63,17 +71,22 @@ export interface TableProps<T = any> {
         x?: number | string;
     };
     rowSelection?: TableRowSelection<T>;
+    rowClassName?: string | ((record: T, index: number) => string);
+    rowStyle?: CSSProperties | ((record: T, index: number) => CSSProperties);
+    onRow?: (record: T, index: number) => HTMLAttributes<HTMLTableRowElement>;
+    onHeaderRow?: (columns: TableColumn<T>[], index: number) => HTMLAttributes<HTMLTableRowElement>;
     size?: TaoSize;
     /**
      * 表面风格。
      * - `borderless`（极简）：无表头底色、单元格透明、仅行底分隔线。
-     * - `filled`：表头灰底（库的默认表现）。
+     * - `filled`：表头灰底。
      * - `outlined`：filled + 整体外框 + 列分隔线。
+     * - `modern`：轻外框、圆角、克制表头，更接近 shadcn 的表格视觉。
      *
      * 不传时继承 TaoProvider 的 variant；当继承到框架默认 `outlined` 时，
-     * Table 回落为 `filled` 以保持向后兼容（裸用 `<Table>` 仍是灰底表头）。
+     * Table 回落为 `modern`，让裸用 `<Table>` 默认呈现现代轻外框风格。
      */
-    variant?: TaoVariant;
+    variant?: TableVariant;
     /**
      * 表头灰底开关，默认 `true`。设为 `false` 关掉表头底色（极简表头），
      * 不影响外框 / 列分隔线等其它 variant 表现。
@@ -82,7 +95,8 @@ export interface TableProps<T = any> {
     emptyText?: ReactNode;
     bordered?: boolean;
     className?: string;
-    classNames?: SemanticClassNames<TableSemanticPart>;
-    styles?: SemanticStyles<TableSemanticPart>;
+    style?: CSSProperties;
+    classNames?: TableSemanticClassNames<T>;
+    styles?: TableSemanticStyles<T>;
 }
-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;
+export declare function Table<T = any>({ columns, dataSource, rowKey, loading, pagination: paginationProp, onChange, scroll, rowSelection, size, variant, headerBackground, emptyText, bordered, className, style, classNames, styles, rowClassName, rowStyle, onRow, onHeaderRow, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;