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

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

@@ -18,14 +18,10 @@ const Button = (props) => {
         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] }));
+    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.container, onClick: onClick, children: [(0, button_shared_1.applyIconStyle)(leftIcon, st.icon), (0, jsx_runtime_1.jsx)(aeiou_1.T, { style: st.label, children: children }), (0, button_shared_1.applyIconStyle)(rightIcon, st.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;
+    if (!st.focusWrapper || !st.focusRing)
+        return content;
+    return ((0, jsx_runtime_1.jsx)(aeiou_1.E, { style: st.focusWrapper, children: (0, jsx_runtime_1.jsx)(aeiou_1.E, { style: st.focusRing, children: content }) }));
 };
 exports.Button = Button;

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

@@ -17,23 +17,19 @@ const resolveButtonStyles = ({ platform, tokens, variant, size, props, }) => {
     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,
-                }))),
-            },
+        container,
+        focusRing: {
+            $focused: (0, helpers_1.normalizeSxForPlatform)(platform, (0, helpers_1.pickSxForPlatform)(platform, (0, helpers_1.getFocusRingSx)(tokens, platform, {
+                borderRadius: radius,
+            }))),
         },
-        style: {
-            container,
-            label,
-            icon,
+        focusWrapper: {
+            $focused: (0, helpers_1.normalizeSxForPlatform)(platform, (0, helpers_1.pickSxForPlatform)(platform, (0, helpers_1.getFocusWrapperSx)(tokens, platform, {
+                borderRadius: radius,
+            }))),
         },
+        label,
+        icon,
     };
 };
 exports.resolveButtonStyles = resolveButtonStyles;

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

@@ -30,7 +30,7 @@ const Button = (props) => {
         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: {
+    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.container, onClick: onClick, onPress: onPress, children: [(0, button_shared_1.applyIconStyle)(leftIcon, st.icon), (0, jsx_runtime_1.jsx)("span", { style: st.label, children: children }), (0, button_shared_1.applyIconStyle)(rightIcon, st.icon), loading ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", style: {
                         marginLeft: 8,
                         display: 'inline-flex',
                         alignItems: 'center',

package/dist/cjs/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components"), exports);
 __exportStar(require("./helpers"), exports);
-__exportStar(require("./showcase"), exports);
+__exportStar(require("./showcase/buttons/buttons.web"), exports);
 __exportStar(require("./styles"), exports);
 __exportStar(require("./theme"), exports);
 __exportStar(require("./types"), exports);

package/dist/cjs/{showcase/index.js → index.native.js}

@@ -14,4 +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("./buttons"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./showcase/buttons/buttons.native"), exports);
+__exportStar(require("./styles"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/{showcase/buttons/index.js → index.web.js}

@@ -14,4 +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("./buttons.web"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./showcase/buttons/buttons.web"), exports);
+__exportStar(require("./styles"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/showcase/buttons/buttons.native.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_native_1 = require("../../components/button/button.native");
+const themeWrapper_native_1 = require("../themeWrapper.native");
+const ButtonsShowcase = () => {
+    return ((0, jsx_runtime_1.jsx)(themeWrapper_native_1.ThemeWrapper, { children: (0, jsx_runtime_1.jsx)(button_native_1.Button, { children: "Button example" }) }));
+};
+exports.ButtonsShowcase = ButtonsShowcase;

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

@@ -15,13 +15,9 @@ export const Button = (props) => {
         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] }));
+    const content = (_jsxs(A, { testId: testId, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityState: { disabled: isDisabled, busy: !!loading }, disabled: isDisabled, onPress: onPress, style: st.container, onClick: onClick, children: [applyIconStyle(leftIcon, st.icon), _jsx(T, { style: st.label, children: children }), applyIconStyle(rightIcon, st.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;
+    if (!st.focusWrapper || !st.focusRing)
+        return content;
+    return (_jsx(E, { style: st.focusWrapper, children: _jsx(E, { style: st.focusRing, children: content }) }));
 };

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

@@ -14,23 +14,19 @@ export const resolveButtonStyles = ({ platform, tokens, variant, size, props, })
     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,
-                }))),
-            },
+        container,
+        focusRing: {
+            $focused: normalizeSxForPlatform(platform, pickSxForPlatform(platform, getFocusRingSx(tokens, platform, {
+                borderRadius: radius,
+            }))),
         },
-        style: {
-            container,
-            label,
-            icon,
+        focusWrapper: {
+            $focused: normalizeSxForPlatform(platform, pickSxForPlatform(platform, getFocusWrapperSx(tokens, platform, {
+                borderRadius: radius,
+            }))),
         },
+        label,
+        icon,
     };
 };
 export const applyIconStyle = (node, iconSx) => {

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

@@ -27,7 +27,7 @@ export const Button = (props) => {
         loading,
         st,
     });
-    return (_jsx(Wrapper, { children: _jsxs(A, { disabled: isDisabled, loading: loading, accessibilityLabel: accessibilityLabel, testId: testId, style: st.style.container, onClick: onClick, onPress: onPress, children: [applyIconStyle(leftIcon, st.style.icon), _jsx("span", { style: st.style.label, children: children }), applyIconStyle(rightIcon, st.style.icon), loading ? (_jsx("span", { "aria-hidden": "true", style: {
+    return (_jsx(Wrapper, { children: _jsxs(A, { disabled: isDisabled, loading: loading, accessibilityLabel: accessibilityLabel, testId: testId, style: st.container, onClick: onClick, onPress: onPress, children: [applyIconStyle(leftIcon, st.icon), _jsx("span", { style: st.label, children: children }), applyIconStyle(rightIcon, st.icon), loading ? (_jsx("span", { "aria-hidden": "true", style: {
                         marginLeft: 8,
                         display: 'inline-flex',
                         alignItems: 'center',

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export * from './components';
 export * from './helpers';
-export * from './showcase';
+export * from './showcase/buttons/buttons.web';
 export * from './styles';
 export * from './theme';
 export * from './types';

package/dist/esm/index.native.js

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './helpers';
+export * from './showcase/buttons/buttons.native';
+export * from './styles';
+export * from './theme';
+export * from './types';

package/dist/esm/index.web.js

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './helpers';
+export * from './showcase/buttons/buttons.web';
+export * from './styles';
+export * from './theme';
+export * from './types';

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../components/button/button.native';
+import { ThemeWrapper } from '../themeWrapper.native';
+export const ButtonsShowcase = () => {
+    return (_jsx(ThemeWrapper, { children: _jsx(Button, { children: "Button example" }) }));
+};