@rockshin/tao-ui 0.0.2 → 0.0.4

package/dist/provider/tao-provider.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export interface TaoSeedToken {
     colorPrimary?: string;
     colorSuccess?: string;
@@ -29,8 +29,24 @@ interface TaoConfigContextValue {
     size: TaoSize;
     disabled: boolean;
     variant: TaoVariant;
+    /**
+     * Merged CSS custom-property overrides from this provider and all ancestors.
+     * Carried through context so portaled layers (Modal/Drawer/Select dropdown…)
+     * — which render outside the provider's DOM subtree — can re-apply the theme.
+     */
+    tokenStyle: CSSProperties;
 }
 export declare function useTaoConfig(): TaoConfigContextValue;
+/**
+ * Re-establishes the theme token scope inside a portal. Floating components
+ * portal their popup to document.body, escaping the `[data-tao-provider]`
+ * element that carries custom token overrides; wrapping the portal content in
+ * this component re-applies those overrides so colors/sizes stay consistent.
+ */
+export declare function TaoPortalScope({ children, style, }: {
+    children: ReactNode;
+    style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
 export interface TaoProviderProps {
     children: ReactNode;
     theme?: TaoThemeConfig;

package/dist/provider/tao-provider.js

@@ -1,13 +1,42 @@
 import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
 import { createContext, useContext, useMemo } from "react";
 const TaoConfigContext = /*#__PURE__*/ createContext({
     size: 'medium',
     disabled: false,
-    variant: 'outlined'
+    variant: 'outlined',
+    tokenStyle: {}
 });
 function useTaoConfig() {
     return useContext(TaoConfigContext);
 }
+function TaoPortalScope(t0) {
+    const $ = c(6);
+    const { children, style } = t0;
+    const { tokenStyle } = useTaoConfig();
+    let t1;
+    if ($[0] !== style || $[1] !== tokenStyle) {
+        t1 = {
+            ...tokenStyle,
+            ...style
+        };
+        $[0] = style;
+        $[1] = tokenStyle;
+        $[2] = t1;
+    } else t1 = $[2];
+    let t2;
+    if ($[3] !== children || $[4] !== t1) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            "data-tao-provider": "",
+            style: t1,
+            children: children
+        });
+        $[3] = children;
+        $[4] = t1;
+        $[5] = t2;
+    } else t2 = $[5];
+    return t2;
+}
 const TOKEN_TO_VAR = {
     colorPrimary: '--tao-color-primary',
     colorSuccess: '--tao-color-success',
@@ -28,18 +57,7 @@ const TOKEN_TO_VAR_PX = {
 function TaoProvider({ theme, size, disabled, variant, children }) {
     const parentConfig = useContext(TaoConfigContext);
     const inherit = theme?.inherit ?? true;
-    const config = useMemo(()=>({
-            size: size ?? (inherit ? parentConfig.size : 'medium'),
-            disabled: disabled ?? (inherit ? parentConfig.disabled : false),
-            variant: variant ?? (inherit ? parentConfig.variant : 'outlined')
-        }), [
-        size,
-        disabled,
-        variant,
-        parentConfig,
-        inherit
-    ]);
-    const style = useMemo(()=>{
+    const ownVars = useMemo(()=>{
         if (!theme?.token) return;
         const vars = {};
         const t = theme.token;
@@ -55,13 +73,33 @@ function TaoProvider({ theme, size, disabled, variant, children }) {
     }, [
         theme?.token
     ]);
+    const tokenStyle = useMemo(()=>({
+            ...parentConfig.tokenStyle,
+            ...ownVars
+        }), [
+        parentConfig.tokenStyle,
+        ownVars
+    ]);
+    const config = useMemo(()=>({
+            size: size ?? (inherit ? parentConfig.size : 'medium'),
+            disabled: disabled ?? (inherit ? parentConfig.disabled : false),
+            variant: variant ?? (inherit ? parentConfig.variant : 'outlined'),
+            tokenStyle
+        }), [
+        size,
+        disabled,
+        variant,
+        parentConfig,
+        inherit,
+        tokenStyle
+    ]);
     return /*#__PURE__*/ jsx(TaoConfigContext.Provider, {
         value: config,
         children: /*#__PURE__*/ jsx("div", {
-            style: style,
+            style: ownVars,
             "data-tao-provider": "",
             children: children
         })
     });
 }
-export { TaoProvider, useTaoConfig };
+export { TaoPortalScope, TaoProvider, useTaoConfig };