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

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;
+};

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

@@ -1,5 +1,5 @@
 // styles/buttons.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok, } from '../../types/tokens';
 const variantStyles = (t) => ({
     primary: {
         container: {
@@ -74,10 +74,11 @@ const sizeStyles = (t) => ({
         },
     },
 });
-export const getButtonParts = (t, opts = {}) => {
+export 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: tok(t, 'border-width-default'),
         borderRadius: tok(t, 'radius-3'),
@@ -106,20 +107,30 @@ export const getButtonParts = (t, opts = {}) => {
         label: { color: tok(t, 'color-state-disabled-fg') },
     };
     const interaction = {
-        hovered: { container: { opacity: 0.96 } },
-        pressed: { container: { opacity: tok(t, 'opacity-pressed') } },
+        hovered: { container: { opacity: 0.7 } },
+        pressed: {
+            container: { opacity: tok(t, 'opacity-pressed') },
+        },
         fullWidth: { container: { alignSelf: 'stretch' } },
     };
     const v = variantStyles(t)[variant];
     const s = sizeStyles(t)[size];
     return {
-        container: 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: merge(baseLabel, s.label, v.label, isDisabled && disabledStyles.label),
-        icon: merge(s.icon, {
-            color: (isDisabled
-                ? disabledStyles.label.color
-                : v.label.color),
-        }),
-        focusRing: merge(opts.focusVisible ? focusRing : undefined),
+        container: {
+            ...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: {
+            ...merge(s.icon, { color: v.label.color }),
+            $disabled: { color: disabledStyles.label.color },
+        },
+        label: {
+            ...merge(baseLabel, s.label, v.label),
+            $disabled: disabled && disabledStyles.label,
+        },
     };
 };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { A } from '@react-xp/aeiou';
+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, type = 'button', onClick, onPress, accessibilityLabel, testId, } = props;
+    const isDisabled = Boolean(disabled || loading);
+    const st = 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>
+        _jsx(_Fragment, { children: children }));
+    };
+    console.log('button web render', {
+        isDisabled,
+        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: {
+                        marginLeft: 8,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: _jsx("span", { style: {
+                            width: 14,
+                            height: 14,
+                            borderRadius: 9999,
+                            border: '2px solid currentColor',
+                            borderTopColor: 'transparent',
+                        } }) })) : null] }) }));
+};

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

@@ -0,0 +1,2 @@
+export * from './button.shared';
+export * from './button.types';

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './button';

package/dist/esm/helpers/styles.js

@@ -4,8 +4,7 @@
 // - filtrar props web-only/native-only
 // - mapear shadow tokens (CSS box-shadow) para RN shadow props
 // - focus ring cross-platform (wrapper approach)
-// Nota: aqui não dependemos das tuas primitives — isto é “infra” para o teu runtime/binding.
-import { tok, } from '../types';
+import { tok } from '../types';
 /**
  * Tokens utilitários são string com px (ex.: "1px", "44px")
  * No RN queres number (dp), no Web queres string (px) — define UMA regra no teu binder.
@@ -156,3 +155,18 @@ export const getFocusWrapperSx = (t, platform, opts) => ({
     padding: getFocusRingGap(t, platform),
     borderRadius: opts?.borderRadius,
 });
+const isPx = (v) => typeof v === 'string' && v.trim().endsWith('px');
+const pxToNumber = (v) => Number.parseFloat(v);
+export 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;
+};
+export const mergeSx = (...styles) => Object.assign({}, ...styles.filter(Boolean));

package/dist/esm/index.js

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

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

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

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

@@ -0,0 +1 @@
+export * from './buttons.web';

package/dist/esm/showcase/index.js

@@ -0,0 +1 @@
+export * from './buttons';

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

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

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

@@ -0,0 +1,38 @@
+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';
+import { themeCorporateColors } from '../theme/themes/corporate';
+export const ThemeWrapper = ({ children }) => {
+    const [currentTheme, setCurrentTheme] = useState('corporate');
+    const [currentThemeMode, setCurrentThemeMode] = useState('light');
+    const themeTokens = (() => {
+        switch (currentTheme) {
+            case 'corporate':
+                return currentThemeMode === 'light'
+                    ? themeCorporateColors.light
+                    : themeCorporateColors.dark;
+        }
+    })();
+    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] }) }));
+};

package/dist/esm/styles/cards.js

@@ -1,5 +1,5 @@
 // styles/cards.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 const variantStyles = (t) => ({
     default: {
         container: {

package/dist/esm/styles/checkboxes.js

@@ -1,5 +1,5 @@
 // styles/checkboxes.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 export const getCheckboxParts = (t, s = {}) => {
     const isOn = Boolean(s.checked || s.indeterminate);
     const isDisabled = Boolean(s.disabled);

package/dist/esm/styles/chips.js

@@ -1,5 +1,5 @@
 // styles/chips.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 export const getChipParts = (t, opts = {}) => {
     const variant = opts.variant ?? 'filled';
     const selected = Boolean(opts.selected);

package/dist/esm/styles/datePickers.js

@@ -1,5 +1,5 @@
 // styles/datePickers.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 export const getDatePickerParts = (t) => {
     return {
         container: {

package/dist/esm/styles/index.js

@@ -1,7 +1,6 @@
 export * from './avatars';
 export * from './badges';
 export * from './bottomSheets';
-export * from './buttons';
 export * from './cards';
 export * from './checkboxes';
 export * from './chips';

package/dist/esm/styles/inputs.js

@@ -1,5 +1,5 @@
 // styles/inputs.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 const sizeStyles = (t) => ({
     sm: {
         fieldWrapper: {

package/dist/esm/styles/listItems.js

@@ -1,5 +1,5 @@
 // styles/listItems.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 export const getListItemParts = (t, s = {}) => {
     const disabled = Boolean(s.disabled);
     const base = {

package/dist/esm/styles/popovers.js

@@ -1,5 +1,5 @@
 // styles/popovers.ts
-import { motion, tok, } from '../types/tokens';
+import { motion, tok } from '../types/tokens';
 export const getPopoverParts = (t) => {
     const m = motion(t, 'motion-emphasis-enter');
     return {

package/dist/esm/styles/radios.js

@@ -1,5 +1,5 @@
 // styles/radios.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 export const getRadioParts = (t, s = {}) => {
     const isOn = Boolean(s.selected);
     const isDisabled = Boolean(s.disabled);

package/dist/esm/styles/selects.js

@@ -1,5 +1,5 @@
 // styles/selects.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 const sizeStyles = (t) => ({
     sm: {
         trigger: {

package/dist/esm/styles/steppers.js

@@ -1,5 +1,5 @@
 // styles/steppers.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 export const getStepperParts = (t) => ({
     container: {
         flexDirection: 'row',

package/dist/esm/styles/switches.js

@@ -1,5 +1,5 @@
 // styles/switches.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 export const getSwitchParts = (t, s = {}) => {
     const on = Boolean(s.on);
     const disabled = Boolean(s.disabled);

package/dist/esm/styles/tabs.js

@@ -1,5 +1,5 @@
 // styles/tabs.ts
-import { merge, tok, } from '../types/tokens';
+import { merge, tok } from '../types/tokens';
 export const getTabsListStyle = (t, variant = 'underline') => ({
     flexDirection: 'row',
     gap: tok(t, 'space-2'),

package/dist/esm/styles/toasts.js

@@ -1,5 +1,5 @@
 // styles/toasts.ts
-import { motion, tok, } from '../types/tokens';
+import { motion, tok } from '../types/tokens';
 const variantMap = (t) => ({
     info: {
         border: tok(t, 'color-status-info'),

package/dist/esm/styles/tooltips.js

@@ -1,5 +1,5 @@
 // styles/tooltips.ts
-import { motion, tok, } from '../types/tokens';
+import { motion, tok } from '../types/tokens';
 export const getTooltipParts = (t) => {
     const m = motion(t, 'motion-emphasis-enter');
     return {

package/dist/esm/theme/index.js

@@ -0,0 +1,3 @@
+export * from './themeProvider';
+export * from './useTheme';
+export * from './useTokens';

package/dist/esm/theme/themeContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ThemeContext = createContext(null);

package/dist/esm/theme/themeProvider.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeContext } from './themeContext';
+export const ThemeProvider = ({ children, tokens, }) => {
+    return (_jsx(ThemeContext.Provider, { value: { tokens }, children: children }));
+};

package/dist/esm/theme/themes/corporate/colors.js

@@ -0,0 +1,42 @@
+export const themeCorporateColors = {
+    dark: {
+        'color-brand': '#60A5FA',
+        'color-action-primary': '#60A5FA',
+        'color-action-primary-fg': '#020617',
+        'color-action-secondary': '#CBD5E1',
+        'color-action-secondary-fg': '#020617',
+        'color-accent': '#FDBA74',
+        'color-accent-fg': '#111827',
+        'color-bg-default': '#020617',
+        'color-bg-subtle': '#111827',
+        'color-surface': '#111827',
+        'color-surface-alt': '#111827',
+        'color-fg-default': '#E5E7EB',
+        'color-fg-muted': '#9CA3AF',
+        'color-fg-subtle': '#64748B',
+        'color-fg-on-inverted': '#020617',
+        'color-border-subtle': '#1E293B',
+        'color-border-strong': '#475569',
+        'color-focus-ring': '#F97316',
+    },
+    light: {
+        'color-brand': '#1D4ED8',
+        'color-action-primary': '#2563EB',
+        'color-action-primary-fg': '#FFFFFF',
+        'color-action-secondary': '#64748B',
+        'color-action-secondary-fg': '#0F172A',
+        'color-accent': '#F97316',
+        'color-accent-fg': '#111827',
+        'color-bg-default': '#F9FAFB',
+        'color-bg-subtle': '#E5E7EB',
+        'color-surface': '#FFFFFF',
+        'color-surface-alt': '#F3F4F6',
+        'color-fg-default': '#0F172A',
+        'color-fg-muted': '#6B7280',
+        'color-fg-subtle': '#9CA3AF',
+        'color-fg-on-inverted': '#F9FAFB',
+        'color-border-subtle': '#E5E7EB',
+        'color-border-strong': '#9CA3AF',
+        'color-focus-ring': '#2563EB',
+    },
+};

package/dist/esm/theme/themes/corporate/index.js

@@ -0,0 +1 @@
+export * from './colors';

package/dist/esm/theme/useTheme.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { ThemeContext } from './themeContext';
+export const useTheme = () => {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error('useTheme must be used within <ThemeProvider>');
+    }
+    return ctx;
+};

package/dist/esm/theme/useTokens.js

@@ -0,0 +1,2 @@
+import { useTheme } from './useTheme';
+export const useTokens = () => useTheme().tokens;

package/dist/esm/types/states.js

@@ -1,3 +1 @@
-// Helpers pequenos (opcionais)
-export const isDisabled = (s) => Boolean(s?.disabled || s?.loading);
 export const isInvalid = (s) => Boolean(s?.error || s?.invalid);