@rockshin/tao-ui 0.0.2 → 0.0.4

package/dist/components/spinner/spinner.css

@@ -0,0 +1,97 @@
+[data-tao-spinner] {
+  justify-content: center;
+  align-items: center;
+  gap: var(--tao-padding-xs);
+  color: var(--tao-color-primary);
+  font-family: var(--tao-font-family);
+  flex-direction: column;
+  display: inline-flex;
+}
+
+[data-tao-spinner-indicator] {
+  line-height: 0;
+  display: inline-flex;
+}
+
+[data-tao-spinner-svg] {
+  width: 1.25em;
+  height: 1.25em;
+  animation: .8s linear infinite tao-spinner-rotate;
+}
+
+[data-tao-spinner][data-tao-size="small"] {
+  font-size: 14px;
+}
+
+[data-tao-spinner][data-tao-size="medium"] {
+  font-size: 20px;
+}
+
+[data-tao-spinner][data-tao-size="large"] {
+  font-size: 32px;
+}
+
+@keyframes tao-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+[data-tao-spinner-tip] {
+  font-size: var(--tao-font-size-sm);
+  color: var(--tao-color-text-secondary);
+  text-align: center;
+  line-height: 1.4;
+}
+
+[data-tao-spinner-container] {
+  position: relative;
+}
+
+[data-tao-spinner-content] {
+  transition: opacity var(--tao-motion-duration-mid) var(--tao-motion-ease-out);
+}
+
+[data-tao-spinner-container][data-tao-spinning] [data-tao-spinner-content] {
+  opacity: .5;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+[data-tao-spinner-overlay] {
+  z-index: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+[data-tao-spinner-fullscreen] {
+  z-index: var(--tao-z-index-popup);
+  background: color-mix(in oklch, var(--tao-color-bg-base) 60%, transparent);
+  animation: tao-spinner-fade-in var(--tao-motion-duration-mid) ease-out;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+@supports (backdrop-filter: blur(2px)) {
+  [data-tao-spinner-fullscreen] {
+    backdrop-filter: blur(2px);
+  }
+}
+
+@keyframes tao-spinner-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+

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 };