@rockshin/tao-ui 0.0.10 → 0.0.11

package/dist/provider/tao-provider.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { createContext, useContext, useMemo, useRef } from "react";
+import { createContext, useContext, useRef } from "react";
 const TaoConfigContext = /*#__PURE__*/ createContext({
     size: 'medium',
     disabled: false,
@@ -56,69 +56,112 @@ const TOKEN_TO_VAR_PX = {
     lineWidth: '--tao-line-width'
 };
 function useStableTokenKey(token) {
-    const key = token ? JSON.stringify(token) : '';
+    const key = JSON.stringify(token ?? null);
     const ref = useRef(key);
     if (ref.current !== key) ref.current = key;
     return ref.current;
 }
-function TaoProvider({ theme, size, disabled, variant, children }) {
+function TaoProvider(t0) {
+    const $ = c(20);
+    const { theme, size, disabled, variant, children } = t0;
     const parentConfig = useContext(TaoConfigContext);
     const inherit = theme?.inherit ?? true;
-    const tokenKey = useStableTokenKey(theme?.token);
-    const ownVars = useMemo(()=>{
-        if (!theme?.token) return;
-        const vars = {};
-        const t = theme.token;
-        for (const [key, varName] of Object.entries(TOKEN_TO_VAR)){
-            const val = t[key];
-            if (null != val) vars[varName] = String(val);
-        }
-        for (const [key_0, varName_0] of Object.entries(TOKEN_TO_VAR_PX)){
-            const val_0 = t[key_0];
-            if (null != val_0) vars[varName_0] = `${val_0}px`;
+    const token = theme?.token;
+    const tokenKey = useStableTokenKey(token);
+    let t1;
+    bb0: {
+        let t2;
+        if ($[0] !== tokenKey) {
+            t2 = JSON.parse(tokenKey);
+            $[0] = tokenKey;
+            $[1] = t2;
+        } else t2 = $[1];
+        const parsedToken = t2;
+        if (!parsedToken) {
+            t1 = void 0;
+            break bb0;
         }
-        return vars;
-    }, [
-        tokenKey
-    ]);
-    const tokenStyle = useMemo(()=>({
+        let vars;
+        if ($[2] !== parsedToken) {
+            vars = {};
+            for (const [key, varName] of Object.entries(TOKEN_TO_VAR)){
+                const val = parsedToken[key];
+                if (null != val) vars[varName] = String(val);
+            }
+            for (const [key_0, varName_0] of Object.entries(TOKEN_TO_VAR_PX)){
+                const val_0 = parsedToken[key_0];
+                if (null != val_0) vars[varName_0] = `${val_0}px`;
+            }
+            $[2] = parsedToken;
+            $[3] = vars;
+        } else vars = $[3];
+        t1 = vars;
+    }
+    const ownVars = t1;
+    let t2;
+    if ($[4] !== ownVars || $[5] !== parentConfig.tokenStyle) {
+        t2 = {
             ...parentConfig.tokenStyle,
             ...ownVars
-        }), [
-        parentConfig.tokenStyle,
-        ownVars
-    ]);
-    const divStyle = useMemo(()=>({
-            display: 'contents',
-            ...ownVars
-        }), [
-        ownVars
-    ]);
+        };
+        $[4] = ownVars;
+        $[5] = parentConfig.tokenStyle;
+        $[6] = t2;
+    } else t2 = $[6];
+    const tokenStyle = t2;
+    const t3 = ownVars;
+    let t4;
+    if ($[7] !== t3) {
+        t4 = {
+            display: "contents",
+            ...t3
+        };
+        $[7] = t3;
+        $[8] = t4;
+    } else t4 = $[8];
+    const divStyle = t4;
     const parentSize = parentConfig.size;
     const parentDisabled = parentConfig.disabled;
     const parentVariant = parentConfig.variant;
-    const config = useMemo(()=>({
-            size: size ?? (inherit ? parentSize : 'medium'),
-            disabled: disabled ?? (inherit ? parentDisabled : false),
-            variant: variant ?? (inherit ? parentVariant : 'outlined'),
+    const t5 = size ?? (inherit ? parentSize : "medium");
+    const t6 = disabled ?? (inherit ? parentDisabled : false);
+    const t7 = variant ?? (inherit ? parentVariant : "outlined");
+    let t8;
+    if ($[9] !== t5 || $[10] !== t6 || $[11] !== t7 || $[12] !== tokenStyle) {
+        t8 = {
+            size: t5,
+            disabled: t6,
+            variant: t7,
             tokenStyle
-        }), [
-        size,
-        disabled,
-        variant,
-        inherit,
-        parentSize,
-        parentDisabled,
-        parentVariant,
-        tokenStyle
-    ]);
-    return /*#__PURE__*/ jsx(TaoConfigContext.Provider, {
-        value: config,
-        children: /*#__PURE__*/ jsx("div", {
+        };
+        $[9] = t5;
+        $[10] = t6;
+        $[11] = t7;
+        $[12] = tokenStyle;
+        $[13] = t8;
+    } else t8 = $[13];
+    const config = t8;
+    let t9;
+    if ($[14] !== children || $[15] !== divStyle) {
+        t9 = /*#__PURE__*/ jsx("div", {
             style: divStyle,
             "data-tao-provider": "",
             children: children
-        })
-    });
+        });
+        $[14] = children;
+        $[15] = divStyle;
+        $[16] = t9;
+    } else t9 = $[16];
+    let t10;
+    if ($[17] !== config || $[18] !== t9) {
+        t10 = /*#__PURE__*/ jsx(TaoConfigContext.Provider, {
+            value: config,
+            children: t9
+        });
+        $[17] = config;
+        $[18] = t9;
+        $[19] = t10;
+    } else t10 = $[19];
+    return t10;
 }
 export { TaoPortalScope, TaoProvider, useTaoConfig };

package/dist/theme/theme.css

@@ -25,75 +25,75 @@
   :root, [data-tao-provider] {
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: color-mix(in oklch,
-			var(--tao-color-primary) 80%,
-			white);
+      var(--tao-color-primary) 80%,
+      white);
     --tao-primary-active: color-mix(in oklch,
-			var(--tao-color-primary) 90%,
-			black);
+      var(--tao-color-primary) 90%,
+      black);
     --tao-primary-bg: color-mix(in oklch,
-			var(--tao-color-primary) 8%,
-			var(--tao-color-bg-base));
+      var(--tao-color-primary) 8%,
+      var(--tao-color-bg-base));
     --tao-primary-bg-hover: color-mix(in oklch,
-			var(--tao-color-primary) 12%,
-			var(--tao-color-bg-base));
+      var(--tao-color-primary) 12%,
+      var(--tao-color-bg-base));
     --tao-primary-border: color-mix(in oklch,
-			var(--tao-color-primary) 30%,
-			var(--tao-color-bg-base));
+      var(--tao-color-primary) 30%,
+      var(--tao-color-bg-base));
     --tao-primary-fg: var(--tao-color-bg-base);
     --tao-error: var(--tao-color-error);
     --tao-error-hover: color-mix(in oklch, var(--tao-color-error) 80%, white);
     --tao-error-active: color-mix(in oklch, var(--tao-color-error) 90%, black);
     --tao-error-bg: color-mix(in oklch,
-			var(--tao-color-error) 6%,
-			var(--tao-color-bg-base));
+      var(--tao-color-error) 6%,
+      var(--tao-color-bg-base));
     --tao-error-border: color-mix(in oklch,
-			var(--tao-color-error) 30%,
-			var(--tao-color-bg-base));
+      var(--tao-color-error) 30%,
+      var(--tao-color-bg-base));
     --tao-error-fg: var(--tao-color-bg-base);
     --tao-success: var(--tao-color-success);
     --tao-success-bg: color-mix(in oklch,
-			var(--tao-color-success) 6%,
-			var(--tao-color-bg-base));
+      var(--tao-color-success) 6%,
+      var(--tao-color-bg-base));
     --tao-success-border: color-mix(in oklch,
-			var(--tao-color-success) 30%,
-			var(--tao-color-bg-base));
+      var(--tao-color-success) 30%,
+      var(--tao-color-bg-base));
     --tao-warning: var(--tao-color-warning);
     --tao-warning-bg: color-mix(in oklch,
-			var(--tao-color-warning) 6%,
-			var(--tao-color-bg-base));
+      var(--tao-color-warning) 6%,
+      var(--tao-color-bg-base));
     --tao-warning-border: color-mix(in oklch,
-			var(--tao-color-warning) 30%,
-			var(--tao-color-bg-base));
+      var(--tao-color-warning) 30%,
+      var(--tao-color-bg-base));
     --tao-color-text: var(--tao-color-text-base);
     --tao-color-text-secondary: color-mix(in oklch,
-			var(--tao-color-text-base) 65%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 65%,
+      var(--tao-color-bg-base));
     --tao-color-text-tertiary: color-mix(in oklch,
-			var(--tao-color-text-base) 45%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 45%,
+      var(--tao-color-bg-base));
     --tao-color-text-quaternary: color-mix(in oklch,
-			var(--tao-color-text-base) 30%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 30%,
+      var(--tao-color-bg-base));
     --tao-color-fill: color-mix(in oklch,
-			var(--tao-color-text-base) 15%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 15%,
+      var(--tao-color-bg-base));
     --tao-color-fill-secondary: color-mix(in oklch,
-			var(--tao-color-text-base) 10%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 10%,
+      var(--tao-color-bg-base));
     --tao-color-fill-tertiary: color-mix(in oklch,
-			var(--tao-color-text-base) 6%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 6%,
+      var(--tao-color-bg-base));
     --tao-color-fill-quaternary: color-mix(in oklch,
-			var(--tao-color-text-base) 3%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 3%,
+      var(--tao-color-bg-base));
     --tao-color-bg-layout: color-mix(in oklch,
-			var(--tao-color-text-base) 4%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 4%,
+      var(--tao-color-bg-base));
     --tao-color-bg-container: oklch(100% 0 0);
     --tao-color-bg-elevated: oklch(100% 0 0);
     --tao-color-border: color-mix(in oklch,
-			var(--tao-color-text-base) 12%,
-			var(--tao-color-bg-base));
+      var(--tao-color-text-base) 12%,
+      var(--tao-color-bg-base));
     --tao-color-border-secondary: #0000170b;
     --tao-radius-xs: 2px;
     --tao-radius-sm: calc(var(--tao-radius) - 2px);
@@ -133,14 +133,14 @@
     --tao-box-shadow-secondary: 0 2px 8px oklch(0% 0 0 / .06), 0 0 1px oklch(0% 0 0 / .06);
     --tao-box-shadow-tertiary: 0 1px 2px oklch(0% 0 0 / .04);
     --tao-control-outline: color-mix(in oklch,
-			var(--tao-color-primary) 20%,
-			transparent);
+      var(--tao-color-primary) 20%,
+      transparent);
     --tao-color-error-outline: color-mix(in oklch,
-			var(--tao-color-error) 25%,
-			transparent);
+      var(--tao-color-error) 25%,
+      transparent);
     --tao-color-warning-outline: color-mix(in oklch,
-			var(--tao-color-warning) 25%,
-			transparent);
+      var(--tao-color-warning) 25%,
+      transparent);
     --tao-color-text-placeholder: var(--tao-color-text-quaternary);
     --tao-color-text-disabled: var(--tao-color-text-quaternary);
     --tao-color-bg-disabled: var(--tao-color-fill-tertiary);

package/dist/theme/tokens.d.ts

@@ -0,0 +1,4 @@
+export type TaoTokenName = '--tao-box-shadow' | '--tao-box-shadow-secondary' | '--tao-box-shadow-tertiary' | '--tao-box-shadow-xs' | '--tao-color-bg-base' | '--tao-color-bg-container' | '--tao-color-bg-disabled' | '--tao-color-bg-elevated' | '--tao-color-bg-layout' | '--tao-color-border' | '--tao-color-border-secondary' | '--tao-color-error' | '--tao-color-error-outline' | '--tao-color-fill' | '--tao-color-fill-quaternary' | '--tao-color-fill-secondary' | '--tao-color-fill-tertiary' | '--tao-color-primary' | '--tao-color-success' | '--tao-color-text' | '--tao-color-text-base' | '--tao-color-text-disabled' | '--tao-color-text-placeholder' | '--tao-color-text-quaternary' | '--tao-color-text-secondary' | '--tao-color-text-tertiary' | '--tao-color-warning' | '--tao-color-warning-outline' | '--tao-control-height' | '--tao-control-height-lg' | '--tao-control-height-sm' | '--tao-control-item-bg-active' | '--tao-control-item-bg-hover' | '--tao-control-outline' | '--tao-control-range-width' | '--tao-control-width' | '--tao-error' | '--tao-error-active' | '--tao-error-bg' | '--tao-error-border' | '--tao-error-fg' | '--tao-error-hover' | '--tao-font-family' | '--tao-font-family-code' | '--tao-font-size' | '--tao-font-size-base' | '--tao-font-size-lg' | '--tao-font-size-sm' | '--tao-font-size-xl' | '--tao-font-size-xs' | '--tao-font-weight-medium' | '--tao-font-weight-normal' | '--tao-font-weight-strong' | '--tao-line-height' | '--tao-line-height-lg' | '--tao-line-height-sm' | '--tao-line-width' | '--tao-motion-duration-fast' | '--tao-motion-duration-mid' | '--tao-motion-duration-slow' | '--tao-motion-ease-in-out' | '--tao-motion-ease-out' | '--tao-motion-ease-out-quint' | '--tao-motion-unit' | '--tao-opacity-loading' | '--tao-padding' | '--tao-padding-lg' | '--tao-padding-md' | '--tao-padding-sm' | '--tao-padding-xl' | '--tao-padding-xs' | '--tao-padding-xxs' | '--tao-primary' | '--tao-primary-active' | '--tao-primary-bg' | '--tao-primary-bg-hover' | '--tao-primary-border' | '--tao-primary-fg' | '--tao-primary-hover' | '--tao-radius' | '--tao-radius-2xl' | '--tao-radius-full' | '--tao-radius-lg' | '--tao-radius-md' | '--tao-radius-sm' | '--tao-radius-xl' | '--tao-radius-xs' | '--tao-ring-width' | '--tao-size-unit' | '--tao-success' | '--tao-success-bg' | '--tao-success-border' | '--tao-warning' | '--tao-warning-bg' | '--tao-warning-border' | '--tao-z-index-drawer' | '--tao-z-index-modal' | '--tao-z-index-popup';
+export declare function tokenVar(name: TaoTokenName | (string & {})): string;
+export declare const taoTokenNames: readonly ["--tao-box-shadow", "--tao-box-shadow-secondary", "--tao-box-shadow-tertiary", "--tao-box-shadow-xs", "--tao-color-bg-base", "--tao-color-bg-container", "--tao-color-bg-disabled", "--tao-color-bg-elevated", "--tao-color-bg-layout", "--tao-color-border", "--tao-color-border-secondary", "--tao-color-error", "--tao-color-error-outline", "--tao-color-fill", "--tao-color-fill-quaternary", "--tao-color-fill-secondary", "--tao-color-fill-tertiary", "--tao-color-primary", "--tao-color-success", "--tao-color-text", "--tao-color-text-base", "--tao-color-text-disabled", "--tao-color-text-placeholder", "--tao-color-text-quaternary", "--tao-color-text-secondary", "--tao-color-text-tertiary", "--tao-color-warning", "--tao-color-warning-outline", "--tao-control-height", "--tao-control-height-lg", "--tao-control-height-sm", "--tao-control-item-bg-active", "--tao-control-item-bg-hover", "--tao-control-outline", "--tao-control-range-width", "--tao-control-width", "--tao-error", "--tao-error-active", "--tao-error-bg", "--tao-error-border", "--tao-error-fg", "--tao-error-hover", "--tao-font-family", "--tao-font-family-code", "--tao-font-size", "--tao-font-size-base", "--tao-font-size-lg", "--tao-font-size-sm", "--tao-font-size-xl", "--tao-font-size-xs", "--tao-font-weight-medium", "--tao-font-weight-normal", "--tao-font-weight-strong", "--tao-line-height", "--tao-line-height-lg", "--tao-line-height-sm", "--tao-line-width", "--tao-motion-duration-fast", "--tao-motion-duration-mid", "--tao-motion-duration-slow", "--tao-motion-ease-in-out", "--tao-motion-ease-out", "--tao-motion-ease-out-quint", "--tao-motion-unit", "--tao-opacity-loading", "--tao-padding", "--tao-padding-lg", "--tao-padding-md", "--tao-padding-sm", "--tao-padding-xl", "--tao-padding-xs", "--tao-padding-xxs", "--tao-primary", "--tao-primary-active", "--tao-primary-bg", "--tao-primary-bg-hover", "--tao-primary-border", "--tao-primary-fg", "--tao-primary-hover", "--tao-radius", "--tao-radius-2xl", "--tao-radius-full", "--tao-radius-lg", "--tao-radius-md", "--tao-radius-sm", "--tao-radius-xl", "--tao-radius-xs", "--tao-ring-width", "--tao-size-unit", "--tao-success", "--tao-success-bg", "--tao-success-border", "--tao-warning", "--tao-warning-bg", "--tao-warning-border", "--tao-z-index-drawer", "--tao-z-index-modal", "--tao-z-index-popup"];
+export declare const taoTokenVars: Record<TaoTokenName, string>;

package/dist/theme/tokens.js

@@ -0,0 +1,108 @@
+function tokenVar(name) {
+    return `var(${name})`;
+}
+const taoTokenNames = [
+    '--tao-box-shadow',
+    '--tao-box-shadow-secondary',
+    '--tao-box-shadow-tertiary',
+    '--tao-box-shadow-xs',
+    '--tao-color-bg-base',
+    '--tao-color-bg-container',
+    '--tao-color-bg-disabled',
+    '--tao-color-bg-elevated',
+    '--tao-color-bg-layout',
+    '--tao-color-border',
+    '--tao-color-border-secondary',
+    '--tao-color-error',
+    '--tao-color-error-outline',
+    '--tao-color-fill',
+    '--tao-color-fill-quaternary',
+    '--tao-color-fill-secondary',
+    '--tao-color-fill-tertiary',
+    '--tao-color-primary',
+    '--tao-color-success',
+    '--tao-color-text',
+    '--tao-color-text-base',
+    '--tao-color-text-disabled',
+    '--tao-color-text-placeholder',
+    '--tao-color-text-quaternary',
+    '--tao-color-text-secondary',
+    '--tao-color-text-tertiary',
+    '--tao-color-warning',
+    '--tao-color-warning-outline',
+    '--tao-control-height',
+    '--tao-control-height-lg',
+    '--tao-control-height-sm',
+    '--tao-control-item-bg-active',
+    '--tao-control-item-bg-hover',
+    '--tao-control-outline',
+    '--tao-control-range-width',
+    '--tao-control-width',
+    '--tao-error',
+    '--tao-error-active',
+    '--tao-error-bg',
+    '--tao-error-border',
+    '--tao-error-fg',
+    '--tao-error-hover',
+    '--tao-font-family',
+    '--tao-font-family-code',
+    '--tao-font-size',
+    '--tao-font-size-base',
+    '--tao-font-size-lg',
+    '--tao-font-size-sm',
+    '--tao-font-size-xl',
+    '--tao-font-size-xs',
+    '--tao-font-weight-medium',
+    '--tao-font-weight-normal',
+    '--tao-font-weight-strong',
+    '--tao-line-height',
+    '--tao-line-height-lg',
+    '--tao-line-height-sm',
+    '--tao-line-width',
+    '--tao-motion-duration-fast',
+    '--tao-motion-duration-mid',
+    '--tao-motion-duration-slow',
+    '--tao-motion-ease-in-out',
+    '--tao-motion-ease-out',
+    '--tao-motion-ease-out-quint',
+    '--tao-motion-unit',
+    '--tao-opacity-loading',
+    '--tao-padding',
+    '--tao-padding-lg',
+    '--tao-padding-md',
+    '--tao-padding-sm',
+    '--tao-padding-xl',
+    '--tao-padding-xs',
+    '--tao-padding-xxs',
+    '--tao-primary',
+    '--tao-primary-active',
+    '--tao-primary-bg',
+    '--tao-primary-bg-hover',
+    '--tao-primary-border',
+    '--tao-primary-fg',
+    '--tao-primary-hover',
+    '--tao-radius',
+    '--tao-radius-2xl',
+    '--tao-radius-full',
+    '--tao-radius-lg',
+    '--tao-radius-md',
+    '--tao-radius-sm',
+    '--tao-radius-xl',
+    '--tao-radius-xs',
+    '--tao-ring-width',
+    '--tao-size-unit',
+    '--tao-success',
+    '--tao-success-bg',
+    '--tao-success-border',
+    '--tao-warning',
+    '--tao-warning-bg',
+    '--tao-warning-border',
+    '--tao-z-index-drawer',
+    '--tao-z-index-modal',
+    '--tao-z-index-popup'
+];
+const taoTokenVars = Object.fromEntries(taoTokenNames.map((name)=>[
+        name,
+        tokenVar(name)
+    ]));
+export { taoTokenNames, taoTokenVars, tokenVar };