@react-xp/design-system 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/cjs/components/button/button.native.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const aeiou_1 = require("@react-xp/aeiou");
+// src/button/Button.native.tsx
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const button_shared_1 = require("./button.shared");
+const Button = (props) => {
+    const tokens = (0, theme_1.useTokens)();
+    const { children, variant = 'primary', size = 'md', disabled, loading, fullWidth, leftIcon, rightIcon, onClick, onPress, accessibilityLabel, testId, } = props;
+    const isDisabled = Boolean(disabled || loading);
+    const st = (0, button_shared_1.resolveButtonStyles)({
+        platform: 'native',
+        tokens,
+        variant,
+        size,
+        props,
+    });
+    const content = ((0, jsx_runtime_1.jsxs)(aeiou_1.A, { testId: testId, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { disabled: isDisabled, busy: !!loading }, disabled: isDisabled, onPress: onPress, style: st.style.container, onClick: onClick, children: [(0, button_shared_1.applyIconStyle)(leftIcon, st.style.icon), (0, jsx_runtime_1.jsx)(aeiou_1.T, { style: st.style.label, children: children }), (0, button_shared_1.applyIconStyle)(rightIcon, st.style.icon), loading ? ((0, jsx_runtime_1.jsx)(aeiou_1.E, { style: { marginLeft: 8 }, children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, {}) })) : null] }));
+    // focus wrapper (RN) – quando focused, coloca ring + gap
+    // if (!st.focusWrapper || !st.focusRing) return content;
+    // return (
+    //   <E style={st.focusWrapper as TAny}>
+    //     <E style={st.focusRing as TAny}>{content}</E>
+    //   </E>
+    // );
+    return content;
+};
+exports.Button = Button;

package/dist/cjs/components/button/button.shared.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyIconStyle = exports.resolveButtonStyles = void 0;
+const react_1 = require("react");
+const helpers_1 = require("../../helpers");
+const button_styles_1 = require("./button.styles");
+const resolveButtonStyles = ({ platform, tokens, variant, size, props, }) => {
+    const parts = (0, button_styles_1.getButtonParts)(tokens, {
+        variant,
+        size,
+        props,
+    });
+    // foco: wrapper + ring cross-platform (para ser consistente)
+    const radius = parts.container.borderRadius;
+    // filtra props web-only/native-only e normaliza px->number no native
+    const container = (0, helpers_1.normalizeSxForPlatform)(platform, (0, helpers_1.pickSxForPlatform)(platform, parts.container));
+    const label = (0, helpers_1.normalizeSxForPlatform)(platform, (0, helpers_1.pickSxForPlatform)(platform, parts.label));
+    const icon = (0, helpers_1.normalizeSxForPlatform)(platform, (0, helpers_1.pickSxForPlatform)(platform, parts.icon));
+    return {
+        interactionStyle: {
+            focusRing: {
+                focused: (0, helpers_1.normalizeSxForPlatform)(platform, (0, helpers_1.pickSxForPlatform)(platform, (0, helpers_1.getFocusRingSx)(tokens, platform, {
+                    borderRadius: radius,
+                }))),
+            },
+            focusWrapper: {
+                focused: (0, helpers_1.normalizeSxForPlatform)(platform, (0, helpers_1.pickSxForPlatform)(platform, (0, helpers_1.getFocusWrapperSx)(tokens, platform, {
+                    borderRadius: radius,
+                }))),
+            },
+        },
+        style: {
+            container,
+            label,
+            icon,
+        },
+    };
+};
+exports.resolveButtonStyles = resolveButtonStyles;
+const applyIconStyle = (node, iconSx) => {
+    if (!node)
+        return null;
+    // Se for ReactElement, tentamos clonar com props/style
+    if (typeof node === 'object' && node && 'type' in node) {
+        const el = node;
+        const prevStyle = el.props?.style;
+        return (0, react_1.cloneElement)(el, {
+            ...el.props,
+            style: Array.isArray(prevStyle)
+                ? [...prevStyle, iconSx]
+                : prevStyle
+                    ? [prevStyle, iconSx]
+                    : iconSx,
+        });
+    }
+    // Se for string/number/etc, devolve como está
+    return node;
+};
+exports.applyIconStyle = applyIconStyle;

package/dist/cjs/{styles/buttons.js → components/button/button.styles.js}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getButtonParts = void 0;
 // styles/buttons.ts
-const tokens_1 = require("../types/tokens");
+const tokens_1 = require("../../types/tokens");
 const variantStyles = (t) => ({
     primary: {
         container: {
@@ -77,10 +77,11 @@ const sizeStyles = (t) => ({
         },
     },
 });
-const getButtonParts = (t, opts = {}) => {
+const getButtonParts = (t, opts = { props: {} }) => {
     const variant = opts.variant ?? 'primary';
     const size = opts.size ?? 'md';
-    const isDisabled = Boolean(opts.disabled || opts.loading);
+    const disabled = opts.props.disabled ?? false;
+    const fullWidth = opts.props.fullWidth ?? false;
     const baseContainer = {
         borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
         borderRadius: (0, tokens_1.tok)(t, 'radius-3'),
@@ -109,21 +110,31 @@ const getButtonParts = (t, opts = {}) => {
         label: { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') },
     };
     const interaction = {
-        hovered: { container: { opacity: 0.96 } },
-        pressed: { container: { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') } },
+        hovered: { container: { opacity: 0.7 } },
+        pressed: {
+            container: { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') },
+        },
         fullWidth: { container: { alignSelf: 'stretch' } },
     };
     const v = variantStyles(t)[variant];
     const s = sizeStyles(t)[size];
     return {
-        container: (0, tokens_1.merge)(baseContainer, s.container, v.container, opts.fullWidth && interaction.fullWidth.container, opts.hovered && interaction.hovered.container, opts.pressed && interaction.pressed.container, isDisabled && disabledStyles.container),
-        label: (0, tokens_1.merge)(baseLabel, s.label, v.label, isDisabled && disabledStyles.label),
-        icon: (0, tokens_1.merge)(s.icon, {
-            color: (isDisabled
-                ? disabledStyles.label.color
-                : v.label.color),
-        }),
-        focusRing: (0, tokens_1.merge)(opts.focused ? focusRing : undefined),
+        container: {
+            ...(0, tokens_1.merge)(baseContainer, s.container, v.container, fullWidth && interaction.fullWidth.container, disabled && disabledStyles.container),
+            $hovered: interaction.hovered.container,
+            $pressed: interaction.pressed.container,
+        },
+        focusRing: {
+            $focused: focusRing,
+        },
+        icon: {
+            ...(0, tokens_1.merge)(s.icon, { color: v.label.color }),
+            $disabled: { color: disabledStyles.label.color },
+        },
+        label: {
+            ...(0, tokens_1.merge)(baseLabel, s.label, v.label),
+            $disabled: disabled && disabledStyles.label,
+        },
     };
 };
 exports.getButtonParts = getButtonParts;

package/dist/cjs/components/button/button.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/button/button.web.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const aeiou_1 = require("@react-xp/aeiou");
+const theme_1 = require("../../theme");
+const button_shared_1 = require("./button.shared");
+const Button = (props) => {
+    const tokens = (0, theme_1.useTokens)();
+    const { children, variant = 'primary', size = 'md', disabled, loading, fullWidth, leftIcon, rightIcon, type = 'button', onClick, onPress, accessibilityLabel, testId, } = props;
+    const isDisabled = Boolean(disabled || loading);
+    const st = (0, button_shared_1.resolveButtonStyles)({
+        platform: 'web',
+        tokens,
+        variant,
+        size,
+        props,
+    });
+    // wrapper + ring (para "gap" + outline consistente)
+    const Wrapper = ({ children }) => {
+        // if (!st.focusWrapper || !st.focusRing) return <>{children}</>;
+        return (
+        // <span style={st.focusWrapper as TAny}>
+        //   <span style={st.focusRing as TAny}>{children}</span>
+        // </span>
+        (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+    };
+    console.log('button web render', {
+        isDisabled,
+        loading,
+        st,
+    });
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsxs)(aeiou_1.A, { disabled: isDisabled, loading: loading, accessibilityLabel: accessibilityLabel, testId: testId, style: st.style.container, onClick: onClick, onPress: onPress, children: [(0, button_shared_1.applyIconStyle)(leftIcon, st.style.icon), (0, jsx_runtime_1.jsx)("span", { style: st.style.label, children: children }), (0, button_shared_1.applyIconStyle)(rightIcon, st.style.icon), loading ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", style: {
+                        marginLeft: 8,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: (0, jsx_runtime_1.jsx)("span", { style: {
+                            width: 14,
+                            height: 14,
+                            borderRadius: 9999,
+                            border: '2px solid currentColor',
+                            borderTopColor: 'transparent',
+                        } }) })) : null] }) }));
+};
+exports.Button = Button;

package/dist/cjs/components/button/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./button.shared"), exports);
+__exportStar(require("./button.types"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./button"), exports);

package/dist/cjs/helpers/styles.js

@@ -6,8 +6,7 @@
 // - mapear shadow tokens (CSS box-shadow) para RN shadow props
 // - focus ring cross-platform (wrapper approach)
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFocusWrapperSx = exports.getFocusRingSx = exports.resolveShadow = exports.pickSxForPlatform = exports.getFocusRingGap = exports.getTapTargetMin = exports.getBorderWidthFocus = exports.getBorderWidthDefault = exports.normalizeValueForPlatform = exports.toPx = exports.toNumber = void 0;
-// Nota: aqui não dependemos das tuas primitives — isto é “infra” para o teu runtime/binding.
+exports.mergeSx = exports.normalizeSxForPlatform = exports.getFocusWrapperSx = exports.getFocusRingSx = exports.resolveShadow = exports.pickSxForPlatform = exports.getFocusRingGap = exports.getTapTargetMin = exports.getBorderWidthFocus = exports.getBorderWidthDefault = exports.normalizeValueForPlatform = exports.toPx = exports.toNumber = void 0;
 const types_1 = require("../types");
 /**
  * Tokens utilitários são string com px (ex.: "1px", "44px")
@@ -170,3 +169,20 @@ const getFocusWrapperSx = (t, platform, opts) => ({
     borderRadius: opts?.borderRadius,
 });
 exports.getFocusWrapperSx = getFocusWrapperSx;
+const isPx = (v) => typeof v === 'string' && v.trim().endsWith('px');
+const pxToNumber = (v) => Number.parseFloat(v);
+const normalizeSxForPlatform = (platform, sx) => {
+    if (platform === 'web')
+        return sx;
+    // native: converter strings "Npx" -> number
+    const out = {};
+    for (const [k, v] of Object.entries(sx)) {
+        if (v === undefined)
+            continue;
+        out[k] = isPx(v) ? pxToNumber(v) : v;
+    }
+    return out;
+};
+exports.normalizeSxForPlatform = normalizeSxForPlatform;
+const mergeSx = (...styles) => Object.assign({}, ...styles.filter(Boolean));
+exports.mergeSx = mergeSx;

package/dist/cjs/index.js

@@ -14,7 +14,9 @@ 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("./helpers"), exports);
+__exportStar(require("./showcase"), exports);
 __exportStar(require("./styles"), exports);
-__exportStar(require("./themes/corporate"), exports);
+__exportStar(require("./theme"), exports);
 __exportStar(require("./types"), exports);

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonsShowcase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_web_1 = require("../../components/button/button.web");
+const themeWrapper_web_1 = require("../themeWrapper.web");
+const ButtonsShowcase = () => {
+    return ((0, jsx_runtime_1.jsx)(themeWrapper_web_1.ThemeWrapper, { children: (0, jsx_runtime_1.jsx)(button_web_1.Button, { children: "Button example" }) }));
+};
+exports.ButtonsShowcase = ButtonsShowcase;

package/dist/cjs/showcase/buttons/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./buttons.web"), exports);

package/dist/cjs/showcase/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./buttons"), exports);

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

@@ -0,0 +1,40 @@
+"use strict";
+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");
+const corporate_1 = require("../theme/themes/corporate");
+const ThemeWrapper = ({ children }) => {
+    const [currentTheme, setCurrentTheme] = (0, react_1.useState)('corporate');
+    const [currentThemeMode, setCurrentThemeMode] = (0, react_1.useState)('light');
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    const themeTokens = (() => {
+        switch (currentTheme) {
+            case 'corporate':
+                return currentThemeMode === 'light'
+                    ? corporate_1.themeCorporateColors.light
+                    : 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] }));
+};
+exports.ThemeWrapper = ThemeWrapper;

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

@@ -0,0 +1,42 @@
+"use strict";
+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");
+const corporate_1 = require("../theme/themes/corporate");
+const ThemeWrapper = ({ children }) => {
+    const [currentTheme, setCurrentTheme] = (0, react_1.useState)('corporate');
+    const [currentThemeMode, setCurrentThemeMode] = (0, react_1.useState)('light');
+    const themeTokens = (() => {
+        switch (currentTheme) {
+            case 'corporate':
+                return currentThemeMode === 'light'
+                    ? corporate_1.themeCorporateColors.light
+                    : corporate_1.themeCorporateColors.dark;
+        }
+    })();
+    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] }) }));
+};
+exports.ThemeWrapper = ThemeWrapper;

package/dist/cjs/styles/index.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./avatars"), exports);
 __exportStar(require("./badges"), exports);
 __exportStar(require("./bottomSheets"), exports);
-__exportStar(require("./buttons"), exports);
 __exportStar(require("./cards"), exports);
 __exportStar(require("./checkboxes"), exports);
 __exportStar(require("./chips"), exports);

package/dist/cjs/theme/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./themeProvider"), exports);
+__exportStar(require("./useTheme"), exports);
+__exportStar(require("./useTokens"), exports);

package/dist/cjs/theme/themeContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeContext = void 0;
+const react_1 = require("react");
+exports.ThemeContext = (0, react_1.createContext)(null);

package/dist/cjs/theme/themeProvider.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const themeContext_1 = require("./themeContext");
+const ThemeProvider = ({ children, tokens, }) => {
+    return ((0, jsx_runtime_1.jsx)(themeContext_1.ThemeContext.Provider, { value: { tokens }, children: children }));
+};
+exports.ThemeProvider = ThemeProvider;

package/dist/cjs/theme/useTheme.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = void 0;
+const react_1 = require("react");
+const themeContext_1 = require("./themeContext");
+const useTheme = () => {
+    const ctx = (0, react_1.useContext)(themeContext_1.ThemeContext);
+    if (!ctx) {
+        throw new Error('useTheme must be used within <ThemeProvider>');
+    }
+    return ctx;
+};
+exports.useTheme = useTheme;

package/dist/cjs/theme/useTokens.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokens = void 0;
+const useTheme_1 = require("./useTheme");
+const useTokens = () => (0, useTheme_1.useTheme)().tokens;
+exports.useTokens = useTokens;

package/dist/cjs/types/states.js

@@ -1,8 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isInvalid = exports.isDisabled = void 0;
-// Helpers pequenos (opcionais)
-const isDisabled = (s) => Boolean(s?.disabled || s?.loading);
-exports.isDisabled = isDisabled;
+exports.isInvalid = void 0;
 const isInvalid = (s) => Boolean(s?.error || s?.invalid);
 exports.isInvalid = isInvalid;

package/dist/esm/components/button/button.native.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { A, E, T } from '@react-xp/aeiou';
+// src/button/Button.native.tsx
+import { ActivityIndicator } from 'react-native';
+import { useTokens } from '../../theme';
+import { applyIconStyle, resolveButtonStyles } from './button.shared';
+export const Button = (props) => {
+    const tokens = useTokens();
+    const { children, variant = 'primary', size = 'md', disabled, loading, fullWidth, leftIcon, rightIcon, onClick, onPress, accessibilityLabel, testId, } = props;
+    const isDisabled = Boolean(disabled || loading);
+    const st = resolveButtonStyles({
+        platform: 'native',
+        tokens,
+        variant,
+        size,
+        props,
+    });
+    const content = (_jsxs(A, { testId: testId, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { disabled: isDisabled, busy: !!loading }, disabled: isDisabled, onPress: onPress, style: st.style.container, onClick: onClick, children: [applyIconStyle(leftIcon, st.style.icon), _jsx(T, { style: st.style.label, children: children }), applyIconStyle(rightIcon, st.style.icon), loading ? (_jsx(E, { style: { marginLeft: 8 }, children: _jsx(ActivityIndicator, {}) })) : null] }));
+    // focus wrapper (RN) – quando focused, coloca ring + gap
+    // if (!st.focusWrapper || !st.focusRing) return content;
+    // return (
+    //   <E style={st.focusWrapper as TAny}>
+    //     <E style={st.focusRing as TAny}>{content}</E>
+    //   </E>
+    // );
+    return content;
+};

package/dist/esm/components/button/button.shared.js

@@ -0,0 +1,54 @@
+import { cloneElement } from 'react';
+import { getFocusRingSx, getFocusWrapperSx, normalizeSxForPlatform, pickSxForPlatform, } from '../../helpers';
+import { getButtonParts } from './button.styles';
+export const resolveButtonStyles = ({ platform, tokens, variant, size, props, }) => {
+    const parts = getButtonParts(tokens, {
+        variant,
+        size,
+        props,
+    });
+    // foco: wrapper + ring cross-platform (para ser consistente)
+    const radius = parts.container.borderRadius;
+    // filtra props web-only/native-only e normaliza px->number no native
+    const container = normalizeSxForPlatform(platform, pickSxForPlatform(platform, parts.container));
+    const label = normalizeSxForPlatform(platform, pickSxForPlatform(platform, parts.label));
+    const icon = normalizeSxForPlatform(platform, pickSxForPlatform(platform, parts.icon));
+    return {
+        interactionStyle: {
+            focusRing: {
+                focused: normalizeSxForPlatform(platform, pickSxForPlatform(platform, getFocusRingSx(tokens, platform, {
+                    borderRadius: radius,
+                }))),
+            },
+            focusWrapper: {
+                focused: normalizeSxForPlatform(platform, pickSxForPlatform(platform, getFocusWrapperSx(tokens, platform, {
+                    borderRadius: radius,
+                }))),
+            },
+        },
+        style: {
+            container,
+            label,
+            icon,
+        },
+    };
+};
+export const applyIconStyle = (node, iconSx) => {
+    if (!node)
+        return null;
+    // Se for ReactElement, tentamos clonar com props/style
+    if (typeof node === 'object' && node && 'type' in node) {
+        const el = node;
+        const prevStyle = el.props?.style;
+        return cloneElement(el, {
+            ...el.props,
+            style: Array.isArray(prevStyle)
+                ? [...prevStyle, iconSx]
+                : prevStyle
+                    ? [prevStyle, iconSx]
+                    : iconSx,
+        });
+    }
+    // Se for string/number/etc, devolve como está
+    return node;
+};