@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type TaoSize } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './spinner.css';
+export type SpinnerSemanticPart = 'root' | 'indicator' | 'tip' | 'overlay';
+export interface SpinnerProps {
+    /** Whether the spinner is visible. Defaults to true. */
+    spinning?: boolean;
+    /** Size of the indicator. Inherits from TaoProvider. */
+    size?: TaoSize;
+    /** Description text rendered under the indicator. */
+    tip?: ReactNode;
+    /** Delay (ms) before showing the spinner — prevents flicker on fast loads. */
+    delay?: number;
+    /** Custom indicator node, replaces the default spinner. */
+    indicator?: ReactNode;
+    /** Wrap content: the spinner overlays `children` while spinning. */
+    children?: ReactNode;
+    /** Render a full-screen backdrop with a centered spinner. */
+    fullscreen?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<SpinnerSemanticPart>;
+    styles?: SemanticStyles<SpinnerSemanticPart>;
+}
+export declare function Spinner({ spinning, size, tip, delay, indicator, children, fullscreen, className, style, classNames, styles, }: SpinnerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/spinner/spinner.js

@@ -0,0 +1,229 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import "./spinner.css";
+function Spinner(t0) {
+    const $ = c(53);
+    const { spinning: t1, size, tip, delay, indicator, children, fullscreen: t2, className, style, classNames, styles } = t0;
+    const spinning = void 0 === t1 ? true : t1;
+    const fullscreen = void 0 === t2 ? false : t2;
+    const ctx = useTaoConfig();
+    const resolvedSize = size ?? ctx.size;
+    const [active, setActive] = useState(delay ? false : spinning);
+    let t3;
+    let t4;
+    if ($[0] !== delay || $[1] !== spinning) {
+        t3 = ()=>{
+            if (delay && spinning) {
+                const t = setTimeout(()=>setActive(true), delay);
+                return ()=>clearTimeout(t);
+            }
+            setActive(spinning);
+        };
+        t4 = [
+            spinning,
+            delay
+        ];
+        $[0] = delay;
+        $[1] = spinning;
+        $[2] = t3;
+        $[3] = t4;
+    } else {
+        t3 = $[2];
+        t4 = $[3];
+    }
+    useEffect(t3, t4);
+    const t5 = classNames?.root;
+    const t6 = !children && !fullscreen && className;
+    let t7;
+    if ($[4] !== t5 || $[5] !== t6) {
+        t7 = cx(t5, t6);
+        $[4] = t5;
+        $[5] = t6;
+        $[6] = t7;
+    } else t7 = $[6];
+    let t8;
+    if ($[7] !== children || $[8] !== fullscreen || $[9] !== style || $[10] !== styles?.root) {
+        t8 = children || fullscreen ? styles?.root : {
+            ...styles?.root,
+            ...style
+        };
+        $[7] = children;
+        $[8] = fullscreen;
+        $[9] = style;
+        $[10] = styles?.root;
+        $[11] = t8;
+    } else t8 = $[11];
+    const t9 = classNames?.indicator;
+    let t10;
+    if ($[12] !== t9) {
+        t10 = cx(t9);
+        $[12] = t9;
+        $[13] = t10;
+    } else t10 = $[13];
+    const t11 = styles?.indicator;
+    let t12;
+    if ($[14] !== indicator) {
+        t12 = indicator ?? /*#__PURE__*/ jsx(DefaultIndicator, {});
+        $[14] = indicator;
+        $[15] = t12;
+    } else t12 = $[15];
+    let t13;
+    if ($[16] !== t10 || $[17] !== t11 || $[18] !== t12) {
+        t13 = /*#__PURE__*/ jsx("span", {
+            "data-tao-spinner-indicator": "",
+            className: t10,
+            style: t11,
+            children: t12
+        });
+        $[16] = t10;
+        $[17] = t11;
+        $[18] = t12;
+        $[19] = t13;
+    } else t13 = $[19];
+    let t14;
+    if ($[20] !== classNames?.tip || $[21] !== styles?.tip || $[22] !== tip) {
+        t14 = null != tip && /*#__PURE__*/ jsx("span", {
+            "data-tao-spinner-tip": "",
+            className: cx(classNames?.tip),
+            style: styles?.tip,
+            children: tip
+        });
+        $[20] = classNames?.tip;
+        $[21] = styles?.tip;
+        $[22] = tip;
+        $[23] = t14;
+    } else t14 = $[23];
+    let t15;
+    if ($[24] !== resolvedSize || $[25] !== t13 || $[26] !== t14 || $[27] !== t7 || $[28] !== t8) {
+        t15 = /*#__PURE__*/ jsxs("span", {
+            "data-tao-spinner": "",
+            "data-tao-size": resolvedSize,
+            className: t7,
+            style: t8,
+            role: "status",
+            "aria-live": "polite",
+            children: [
+                t13,
+                t14
+            ]
+        });
+        $[24] = resolvedSize;
+        $[25] = t13;
+        $[26] = t14;
+        $[27] = t7;
+        $[28] = t8;
+        $[29] = t15;
+    } else t15 = $[29];
+    const spinnerCore = t15;
+    if (fullscreen) {
+        if (!active) return null;
+        const t16 = classNames?.overlay;
+        let t17;
+        if ($[30] !== className || $[31] !== t16) {
+            t17 = cx(t16, className);
+            $[30] = className;
+            $[31] = t16;
+            $[32] = t17;
+        } else t17 = $[32];
+        const t18 = styles?.overlay;
+        let t19;
+        if ($[33] !== style || $[34] !== t18) {
+            t19 = {
+                ...t18,
+                ...style
+            };
+            $[33] = style;
+            $[34] = t18;
+            $[35] = t19;
+        } else t19 = $[35];
+        let t20;
+        if ($[36] !== spinnerCore || $[37] !== t17 || $[38] !== t19) {
+            t20 = /*#__PURE__*/ jsx("div", {
+                "data-tao-spinner-fullscreen": "",
+                className: t17,
+                style: t19,
+                children: spinnerCore
+            });
+            $[36] = spinnerCore;
+            $[37] = t17;
+            $[38] = t19;
+            $[39] = t20;
+        } else t20 = $[39];
+        return t20;
+    }
+    if (null != children) {
+        const t16 = active || void 0;
+        let t17;
+        if ($[40] !== children) {
+            t17 = /*#__PURE__*/ jsx("div", {
+                "data-tao-spinner-content": "",
+                children: children
+            });
+            $[40] = children;
+            $[41] = t17;
+        } else t17 = $[41];
+        let t18;
+        if ($[42] !== active || $[43] !== classNames?.overlay || $[44] !== spinnerCore || $[45] !== styles?.overlay) {
+            t18 = active && /*#__PURE__*/ jsx("div", {
+                "data-tao-spinner-overlay": "",
+                className: cx(classNames?.overlay),
+                style: styles?.overlay,
+                children: spinnerCore
+            });
+            $[42] = active;
+            $[43] = classNames?.overlay;
+            $[44] = spinnerCore;
+            $[45] = styles?.overlay;
+            $[46] = t18;
+        } else t18 = $[46];
+        let t19;
+        if ($[47] !== className || $[48] !== style || $[49] !== t16 || $[50] !== t17 || $[51] !== t18) {
+            t19 = /*#__PURE__*/ jsxs("div", {
+                "data-tao-spinner-container": "",
+                "data-tao-spinning": t16,
+                className: className,
+                style: style,
+                children: [
+                    t17,
+                    t18
+                ]
+            });
+            $[47] = className;
+            $[48] = style;
+            $[49] = t16;
+            $[50] = t17;
+            $[51] = t18;
+            $[52] = t19;
+        } else t19 = $[52];
+        return t19;
+    }
+    if (!active) return null;
+    return spinnerCore;
+}
+function DefaultIndicator() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            "data-tao-spinner-svg": "",
+            viewBox: "0 0 50 50",
+            fill: "none",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("circle", {
+                cx: "25",
+                cy: "25",
+                r: "20",
+                stroke: "currentColor",
+                strokeWidth: "5",
+                strokeLinecap: "round",
+                strokeDasharray: "90 40"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { Spinner };

package/dist/components/splitter/splitter.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-splitter] {

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

package/dist/components/table/table.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,14 +787,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 +836,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 +856,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 +986,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 +1009,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;