@react-xp/design-system 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/cjs/helpers/styles.js

@@ -31,8 +31,12 @@ exports.toPx = toPx;
 const normalizeValueForPlatform = (platform, value) => {
     // Recomendação: RN -> number; Web -> string (se vier "px")
     if (platform === 'native')
-        return (0, exports.toNumber)(value);
-    return typeof value === 'string' ? value : (0, exports.toPx)(value);
+        return value === undefined ? undefined : (0, exports.toNumber)(value);
+    return typeof value === 'string'
+        ? value
+        : value === undefined
+            ? undefined
+            : (0, exports.toPx)(value);
 };
 exports.normalizeValueForPlatform = normalizeValueForPlatform;
 const getBorderWidthDefault = (t, platform) => (0, exports.normalizeValueForPlatform)(platform, (0, types_1.tok)(t, 'border-width-default'));

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);
+__exportStar(require("./components/button/button.web"), exports);
 __exportStar(require("./helpers"), exports);
 __exportStar(require("./showcase/buttons/buttons.web"), exports);
 __exportStar(require("./styles"), exports);

package/dist/cjs/index.native.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);
+__exportStar(require("./components/button/button.native"), exports);
 __exportStar(require("./helpers"), exports);
 __exportStar(require("./showcase/buttons/buttons.native"), exports);
 __exportStar(require("./styles"), exports);

package/dist/cjs/index.web.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);
+__exportStar(require("./components/button/button.web"), exports);
 __exportStar(require("./helpers"), exports);
 __exportStar(require("./showcase/buttons/buttons.web"), exports);
 __exportStar(require("./styles"), exports);

package/dist/cjs/showcase/themeWrapper.native.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styleguide_1 = require("@react-xp/styleguide");
 const react_1 = require("react");
 const button_native_1 = require("../components/button/button.native");
 const theme_1 = require("../theme");
@@ -19,22 +18,6 @@ const ThemeWrapper = ({ children }) => {
                     : corporate_1.themeCorporateColors.dark;
         }
     })();
-    return ((0, jsx_runtime_1.jsxs)(theme_1.ThemeProvider, { tokens: {
-            ...styleguide_1.styleguideBreakpoints,
-            ...styleguide_1.styleguideComponentPadding,
-            ...styleguide_1.styleguideLayoutGrid,
-            ...styleguide_1.styleguideMotionDuration,
-            ...styleguide_1.styleguideMotionEasing,
-            ...styleguide_1.styleguideMotionPreset,
-            ...styleguide_1.styleguideRadius,
-            ...styleguide_1.styleguideShadows,
-            ...styleguide_1.styleguideSpaceX,
-            ...styleguide_1.styleguideSpaceY,
-            ...styleguide_1.styleguideSpacing,
-            ...styleguide_1.styleguideTypography,
-            ...styleguide_1.styleguideUtils,
-            ...styleguide_1.styleguideZIndex,
-            ...themeTokens,
-        }, children: [(0, jsx_runtime_1.jsx)(button_native_1.Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }));
+    return ((0, jsx_runtime_1.jsxs)(theme_1.ThemeProvider, { tokens: themeTokens, children: [(0, jsx_runtime_1.jsx)(button_native_1.Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }));
 };
 exports.ThemeWrapper = ThemeWrapper;

package/dist/cjs/showcase/themeWrapper.web.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styleguide_1 = require("@react-xp/styleguide");
 const react_1 = require("react");
 const button_web_1 = require("../components/button/button.web");
 const theme_1 = require("../theme");
@@ -20,23 +19,6 @@ const ThemeWrapper = ({ children }) => {
     })();
     console.log('themeTokens', themeTokens);
     console.log('currentThemeMode', currentThemeMode);
-    return ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { tokens: {
-            ...styleguide_1.styleguideBreakpoints,
-            ...styleguide_1.styleguideComponentPadding,
-            ...styleguide_1.styleguideLayoutGrid,
-            ...styleguide_1.styleguideMotionDuration,
-            ...styleguide_1.styleguideMotionEasing,
-            ...styleguide_1.styleguideMotionPreset,
-            ...styleguide_1.styleguideRadius,
-            ...styleguide_1.styleguideShadows,
-            ...styleguide_1.styleguideSpaceX,
-            ...styleguide_1.styleguideSpaceY,
-            ...styleguide_1.styleguideSpacing,
-            ...styleguide_1.styleguideTypography,
-            ...styleguide_1.styleguideUtils,
-            ...styleguide_1.styleguideZIndex,
-            ...themeTokens,
-            // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex m-4", style: { backgroundColor: themeTokens['color-bg-default'] }, children: [(0, jsx_runtime_1.jsx)(button_web_1.Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { tokens: themeTokens, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex m-4", style: { backgroundColor: themeTokens['color-bg-default'] }, children: [(0, jsx_runtime_1.jsx)(button_web_1.Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }) }));
 };
 exports.ThemeWrapper = ThemeWrapper;

package/dist/cjs/theme/themeProvider.js

@@ -2,8 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const styleguide_1 = require("@react-xp/styleguide");
 const themeContext_1 = require("./themeContext");
 const ThemeProvider = ({ children, tokens, }) => {
-    return ((0, jsx_runtime_1.jsx)(themeContext_1.ThemeContext.Provider, { value: { tokens }, children: children }));
+    const masterTokens = {
+        ...styleguide_1.styleguideBreakpoints,
+        ...styleguide_1.styleguideComponentPadding,
+        ...styleguide_1.styleguideLayoutGrid,
+        ...styleguide_1.styleguideMotionDuration,
+        ...styleguide_1.styleguideMotionEasing,
+        ...styleguide_1.styleguideMotionPreset,
+        ...styleguide_1.styleguideRadius,
+        ...styleguide_1.styleguideShadows,
+        ...styleguide_1.styleguideSpaceX,
+        ...styleguide_1.styleguideSpaceY,
+        ...styleguide_1.styleguideSpacing,
+        ...styleguide_1.styleguideTypography,
+        ...styleguide_1.styleguideUtils,
+        ...styleguide_1.styleguideZIndex,
+        ...tokens,
+    };
+    return ((0, jsx_runtime_1.jsx)(themeContext_1.ThemeContext.Provider, { value: { tokens: masterTokens }, children: children }));
 };
 exports.ThemeProvider = ThemeProvider;

package/dist/esm/helpers/styles.js

@@ -26,8 +26,12 @@ export const toPx = (value) => {
 export const normalizeValueForPlatform = (platform, value) => {
     // Recomendação: RN -> number; Web -> string (se vier "px")
     if (platform === 'native')
-        return toNumber(value);
-    return typeof value === 'string' ? value : toPx(value);
+        return value === undefined ? undefined : toNumber(value);
+    return typeof value === 'string'
+        ? value
+        : value === undefined
+            ? undefined
+            : toPx(value);
 };
 export const getBorderWidthDefault = (t, platform) => normalizeValueForPlatform(platform, tok(t, 'border-width-default'));
 export const getBorderWidthFocus = (t, platform) => normalizeValueForPlatform(platform, tok(t, 'border-width-focus'));

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export * from './components';
+export * from './components/button/button.web';
 export * from './helpers';
 export * from './showcase/buttons/buttons.web';
 export * from './styles';

package/dist/esm/index.native.js

@@ -1,4 +1,4 @@
-export * from './components';
+export * from './components/button/button.native';
 export * from './helpers';
 export * from './showcase/buttons/buttons.native';
 export * from './styles';

package/dist/esm/index.web.js

@@ -1,4 +1,4 @@
-export * from './components';
+export * from './components/button/button.web';
 export * from './helpers';
 export * from './showcase/buttons/buttons.web';
 export * from './styles';

package/dist/esm/showcase/themeWrapper.native.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleguideBreakpoints, styleguideComponentPadding, styleguideLayoutGrid, styleguideMotionDuration, styleguideMotionEasing, styleguideMotionPreset, styleguideRadius, styleguideShadows, styleguideSpaceX, styleguideSpaceY, styleguideSpacing, styleguideTypography, styleguideUtils, styleguideZIndex, } from '@react-xp/styleguide';
 import { useState } from 'react';
 import { Button } from '../components/button/button.native';
 import { ThemeProvider } from '../theme';
@@ -16,21 +15,5 @@ export const ThemeWrapper = ({ children }) => {
                     : themeCorporateColors.dark;
         }
     })();
-    return (_jsxs(ThemeProvider, { tokens: {
-            ...styleguideBreakpoints,
-            ...styleguideComponentPadding,
-            ...styleguideLayoutGrid,
-            ...styleguideMotionDuration,
-            ...styleguideMotionEasing,
-            ...styleguideMotionPreset,
-            ...styleguideRadius,
-            ...styleguideShadows,
-            ...styleguideSpaceX,
-            ...styleguideSpaceY,
-            ...styleguideSpacing,
-            ...styleguideTypography,
-            ...styleguideUtils,
-            ...styleguideZIndex,
-            ...themeTokens,
-        }, children: [_jsx(Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }));
+    return (_jsxs(ThemeProvider, { tokens: themeTokens, children: [_jsx(Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }));
 };

package/dist/esm/showcase/themeWrapper.web.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleguideBreakpoints, styleguideComponentPadding, styleguideLayoutGrid, styleguideMotionDuration, styleguideMotionEasing, styleguideMotionPreset, styleguideRadius, styleguideShadows, styleguideSpaceX, styleguideSpaceY, styleguideSpacing, styleguideTypography, styleguideUtils, styleguideZIndex, } from '@react-xp/styleguide';
 import { useState } from 'react';
 import { Button } from '../components/button/button.web';
 import { ThemeProvider } from '../theme';
@@ -17,22 +16,5 @@ export const ThemeWrapper = ({ children }) => {
     })();
     console.log('themeTokens', themeTokens);
     console.log('currentThemeMode', currentThemeMode);
-    return (_jsx(ThemeProvider, { tokens: {
-            ...styleguideBreakpoints,
-            ...styleguideComponentPadding,
-            ...styleguideLayoutGrid,
-            ...styleguideMotionDuration,
-            ...styleguideMotionEasing,
-            ...styleguideMotionPreset,
-            ...styleguideRadius,
-            ...styleguideShadows,
-            ...styleguideSpaceX,
-            ...styleguideSpaceY,
-            ...styleguideSpacing,
-            ...styleguideTypography,
-            ...styleguideUtils,
-            ...styleguideZIndex,
-            ...themeTokens,
-            // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-        }, children: _jsxs("div", { className: "flex m-4", style: { backgroundColor: themeTokens['color-bg-default'] }, children: [_jsx(Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }) }));
+    return (_jsx(ThemeProvider, { tokens: themeTokens, children: _jsxs("div", { className: "flex m-4", style: { backgroundColor: themeTokens['color-bg-default'] }, children: [_jsx(Button, { onClick: () => setCurrentThemeMode(currentThemeMode === 'light' ? 'dark' : 'light'), children: "Toggle Theme Mode" }), children] }) }));
 };

package/dist/esm/theme/themeProvider.js

@@ -1,5 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { styleguideBreakpoints, styleguideComponentPadding, styleguideLayoutGrid, styleguideMotionDuration, styleguideMotionEasing, styleguideMotionPreset, styleguideRadius, styleguideShadows, styleguideSpaceX, styleguideSpaceY, styleguideSpacing, styleguideTypography, styleguideUtils, styleguideZIndex, } from '@react-xp/styleguide';
 import { ThemeContext } from './themeContext';
 export const ThemeProvider = ({ children, tokens, }) => {
-    return (_jsx(ThemeContext.Provider, { value: { tokens }, children: children }));
+    const masterTokens = {
+        ...styleguideBreakpoints,
+        ...styleguideComponentPadding,
+        ...styleguideLayoutGrid,
+        ...styleguideMotionDuration,
+        ...styleguideMotionEasing,
+        ...styleguideMotionPreset,
+        ...styleguideRadius,
+        ...styleguideShadows,
+        ...styleguideSpaceX,
+        ...styleguideSpaceY,
+        ...styleguideSpacing,
+        ...styleguideTypography,
+        ...styleguideUtils,
+        ...styleguideZIndex,
+        ...tokens,
+    };
+    return (_jsx(ThemeContext.Provider, { value: { tokens: masterTokens }, children: children }));
 };