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

package/dist/cjs/styles/pagination.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaginationParts = void 0;
+// styles/pagination.ts
+const tokens_1 = require("../types/tokens");
+const getPaginationParts = (t) => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: (0, tokens_1.tok)(t, 'space-3'),
+        paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+    },
+    pageInfo: {
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    },
+    button: {
+        minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+        minWidth: (0, tokens_1.tok)(t, 'tap-target-min'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-3'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+    },
+    buttonLabel: {
+        color: (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    },
+});
+exports.getPaginationParts = getPaginationParts;

package/dist/cjs/styles/popovers.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPopoverParts = void 0;
+// styles/popovers.ts
+const tokens_1 = require("../types/tokens");
+const getPopoverParts = (t) => {
+    const m = (0, tokens_1.motion)(t, 'motion-emphasis-enter');
+    return {
+        container: {
+            zIndex: (0, tokens_1.tok)(t, 'z-index-layer-dropdown'),
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-4'),
+            shadow: (0, tokens_1.tok)(t, 'shadow-level-4'),
+            overflow: 'hidden',
+            minWidth: 240,
+            animationDurationMs: m.durationMs,
+            animationEasing: m.easing,
+        },
+        header: {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingTop: (0, tokens_1.tok)(t, 'space-4'),
+            paddingBottom: (0, tokens_1.tok)(t, 'space-2'),
+            borderBottomWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderBottomColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        },
+        body: {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-3'),
+        },
+        footer: {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingTop: (0, tokens_1.tok)(t, 'space-2'),
+            paddingBottom: (0, tokens_1.tok)(t, 'space-4'),
+            borderTopWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderTopColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        },
+        title: {
+            color: (0, tokens_1.tok)(t, 'color-fg-default'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-heading'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-tight'),
+        },
+        subtitle: {
+            marginTop: (0, tokens_1.tok)(t, 'space-1'),
+            color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+        arrow: {
+            width: (0, tokens_1.tok)(t, 'space-2'),
+            height: (0, tokens_1.tok)(t, 'space-2'),
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            transform: 'rotate(45deg)',
+        },
+    };
+};
+exports.getPopoverParts = getPopoverParts;

package/dist/cjs/styles/progress.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCircularProgressStyle = exports.getLinearProgressStyle = exports.getProgressParts = void 0;
+// styles/progress.ts
+const tokens_1 = require("../types/tokens");
+const getProgressParts = (t) => ({
+    track: {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-bg-subtle'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+        overflow: 'hidden',
+    },
+    fill: {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-action-primary'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+    },
+    label: {
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    },
+});
+exports.getProgressParts = getProgressParts;
+// Helpers semânticos para tamanhos
+const getLinearProgressStyle = (t, heightToken = 'space-2') => ({
+    height: (0, tokens_1.tok)(t, heightToken),
+});
+exports.getLinearProgressStyle = getLinearProgressStyle;
+const getCircularProgressStyle = (t, size) => ({
+    width: size,
+    height: size,
+});
+exports.getCircularProgressStyle = getCircularProgressStyle;

package/dist/cjs/styles/radios.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRadioParts = void 0;
+// styles/radios.ts
+const tokens_1 = require("../types/tokens");
+const getRadioParts = (t, s = {}) => {
+    const isOn = Boolean(s.selected);
+    const isDisabled = Boolean(s.disabled);
+    const wrapper = {
+        minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+        paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        paddingHorizontal: (0, tokens_1.tok)(t, 'space-2'),
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: (0, tokens_1.tok)(t, 'space-2'),
+    };
+    const outerBase = {
+        width: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+        height: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-strong'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+    const outerOn = {
+        borderColor: (0, tokens_1.tok)(t, 'color-accent'),
+    };
+    const outerDisabled = {
+        borderColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+    };
+    const inner = {
+        width: (0, tokens_1.tok)(t, 'space-2'),
+        height: (0, tokens_1.tok)(t, 'space-2'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+        backgroundColor: isDisabled
+            ? (0, tokens_1.tok)(t, 'color-state-disabled-fg')
+            : (0, tokens_1.tok)(t, 'color-accent'),
+        opacity: isOn ? 1 : 0,
+    };
+    const label = {
+        color: isDisabled
+            ? (0, tokens_1.tok)(t, 'color-state-disabled-fg')
+            : (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    };
+    const focusRing = {
+        outlineStyle: 'solid',
+        outlineWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+        outlineColor: (0, tokens_1.tok)(t, 'color-focus-ring'),
+        outlineOffset: (0, tokens_1.tok)(t, 'focus-ring-gap'),
+    };
+    const interaction = s.pressed
+        ? { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') }
+        : s.hovered
+            ? { opacity: 0.96 }
+            : {};
+    return {
+        wrapper: (0, tokens_1.merge)(wrapper, interaction),
+        outer: (0, tokens_1.merge)(outerBase, isOn && outerOn, isDisabled && outerDisabled),
+        inner: (0, tokens_1.merge)(inner),
+        label: (0, tokens_1.merge)(label),
+        focusRing: (0, tokens_1.merge)(s.focusVisible ? focusRing : undefined),
+    };
+};
+exports.getRadioParts = getRadioParts;

package/dist/cjs/styles/selects.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectParts = void 0;
+// styles/selects.ts
+const tokens_1 = require("../types/tokens");
+const sizeStyles = (t) => ({
+    sm: {
+        trigger: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        valueText: { fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2') },
+    },
+    md: {
+        trigger: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        valueText: { fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3') },
+    },
+    lg: {
+        trigger: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-5'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-3'),
+        },
+        valueText: { fontSize: (0, tokens_1.tok)(t, 'typography-font-size-4') },
+    },
+});
+const getSelectParts = (t, opts = {}) => {
+    const size = opts.size ?? 'md';
+    const isDisabled = Boolean(opts.disabled);
+    const isError = Boolean(opts.error);
+    const isFocused = Boolean(opts.focused);
+    const isOpen = Boolean(opts.open);
+    const s = sizeStyles(t)[size];
+    const label = {
+        marginBottom: (0, tokens_1.tok)(t, 'space-1'),
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    };
+    const triggerBase = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-input-bg'),
+        borderColor: (0, tokens_1.tok)(t, 'color-input-border'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-2'),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: (0, tokens_1.tok)(t, 'space-2'),
+    };
+    const valueText = (0, tokens_1.merge)({
+        color: (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        flex: 1,
+    }, s.valueText);
+    const placeholder = { color: (0, tokens_1.tok)(t, 'color-input-placeholder') };
+    const helper = {
+        marginTop: (0, tokens_1.tok)(t, 'space-1'),
+        color: isError ? (0, tokens_1.tok)(t, 'color-status-error') : (0, tokens_1.tok)(t, 'color-fg-subtle'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-1'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    };
+    const focusRing = {
+        outlineStyle: 'solid',
+        outlineWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+        outlineColor: (0, tokens_1.tok)(t, 'color-focus-ring'),
+        outlineOffset: (0, tokens_1.tok)(t, 'focus-ring-gap'),
+    };
+    const triggerFocused = {
+        borderColor: (0, tokens_1.tok)(t, 'color-input-border-focus'),
+    };
+    const triggerError = { borderColor: (0, tokens_1.tok)(t, 'color-status-error') };
+    const triggerDisabled = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+        borderColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+    };
+    const textDisabled = { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') };
+    const rightIcon = {
+        width: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        height: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        color: isDisabled
+            ? (0, tokens_1.tok)(t, 'color-state-disabled-fg')
+            : (0, tokens_1.tok)(t, 'color-fg-muted'),
+    };
+    // Dropdown menu
+    const dropdown = {
+        zIndex: (0, tokens_1.tok)(t, 'z-index-layer-dropdown'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-3'),
+        shadow: (0, tokens_1.tok)(t, 'shadow-level-3'),
+        paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        overflow: 'hidden',
+        display: isOpen ? 'flex' : 'none',
+    };
+    const item = {
+        minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+        paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+        paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: (0, tokens_1.tok)(t, 'space-2'),
+    };
+    const itemLabel = {
+        color: (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    };
+    const itemSelected = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface-alt'),
+    };
+    return {
+        label,
+        trigger: (0, tokens_1.merge)(triggerBase, s.trigger, isFocused && triggerFocused, isError && triggerError, isDisabled && triggerDisabled),
+        valueText: (0, tokens_1.merge)(valueText, isDisabled && textDisabled),
+        placeholder: (0, tokens_1.merge)(placeholder),
+        helper,
+        rightIcon,
+        focusRing: (0, tokens_1.merge)(isFocused ? focusRing : undefined),
+        dropdown,
+        item,
+        itemLabel,
+        itemSelected,
+    };
+};
+exports.getSelectParts = getSelectParts;

package/dist/cjs/styles/skeletons.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSkeletonStyle = exports.getSkeletonParts = void 0;
+// styles/skeleton.ts
+const tokens_1 = require("../types/tokens");
+const getSkeletonParts = (t) => {
+    const m = (0, tokens_1.motion)(t, 'micro-interaction');
+    return {
+        base: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-bg-subtle'),
+            overflow: 'hidden',
+        },
+        animation: {
+            animationPreset: 'micro-interaction',
+            animationDurationMs: m.durationMs,
+            animationEasing: m.easing,
+        },
+    };
+};
+exports.getSkeletonParts = getSkeletonParts;
+const getSkeletonStyle = (t, opts = {}) => {
+    const variant = opts.variant ?? 'rect';
+    const radiusByVariant = {
+        text: { borderRadius: (0, tokens_1.tok)(t, 'radius-2') },
+        rect: { borderRadius: (0, tokens_1.tok)(t, 'radius-3') },
+        circle: { borderRadius: (0, tokens_1.tok)(t, 'radius-full') },
+    };
+    return (0, tokens_1.merge)((0, exports.getSkeletonParts)(t).base, radiusByVariant[variant], {
+        width: opts.width ?? '100%',
+        height: opts.height ??
+            (variant === 'text' ? (0, tokens_1.tok)(t, 'space-3') : (0, tokens_1.tok)(t, 'tap-target-min')),
+    }, (0, exports.getSkeletonParts)(t).animation);
+};
+exports.getSkeletonStyle = getSkeletonStyle;

package/dist/cjs/styles/steppers.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStepVisual = exports.getStepperParts = void 0;
+// styles/steppers.ts
+const tokens_1 = require("../types/tokens");
+const getStepperParts = (t) => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: (0, tokens_1.tok)(t, 'space-3'),
+    },
+    step: { flexDirection: 'column', gap: (0, tokens_1.tok)(t, 'space-1') },
+    bullet: {
+        width: (0, tokens_1.tok)(t, 'space-4'),
+        height: (0, tokens_1.tok)(t, 'space-4'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-strong'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    line: {
+        height: (0, tokens_1.tok)(t, 'border-width-default'),
+        flex: 1,
+        backgroundColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+    },
+    label: {
+        color: (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    },
+    subtitle: {
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-1'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    },
+});
+exports.getStepperParts = getStepperParts;
+const getStepVisual = (t, s = {}) => {
+    const completed = Boolean(s.completed);
+    const active = Boolean(s.active);
+    const disabled = Boolean(s.disabled);
+    const bulletCompleted = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-status-success'),
+        borderColor: (0, tokens_1.tok)(t, 'color-status-success'),
+    };
+    const bulletActive = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-action-primary'),
+        borderColor: (0, tokens_1.tok)(t, 'color-action-primary'),
+    };
+    const bulletDisabled = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+        borderColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+    };
+    const lineCompleted = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-status-success'),
+    };
+    const lineActive = { backgroundColor: (0, tokens_1.tok)(t, 'color-action-primary') };
+    const labelDisabled = { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') };
+    return {
+        bullet: (0, tokens_1.merge)((0, exports.getStepperParts)(t).bullet, completed && bulletCompleted, active && bulletActive, disabled && bulletDisabled),
+        line: (0, tokens_1.merge)((0, exports.getStepperParts)(t).line, completed && lineCompleted, active && lineActive),
+        label: (0, tokens_1.merge)((0, exports.getStepperParts)(t).label, disabled && labelDisabled),
+    };
+};
+exports.getStepVisual = getStepVisual;

package/dist/cjs/styles/switches.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSwitchParts = void 0;
+// styles/switches.ts
+const tokens_1 = require("../types/tokens");
+const getSwitchParts = (t, s = {}) => {
+    const on = Boolean(s.on);
+    const disabled = Boolean(s.disabled);
+    const wrapper = {
+        minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+        paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        paddingHorizontal: (0, tokens_1.tok)(t, 'space-2'),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: (0, tokens_1.tok)(t, 'space-3'),
+    };
+    // Track: 44x24-ish (token-first)
+    const trackBase = {
+        width: (0, tokens_1.tok)(t, 'space-6'), // 32 (aprox; ajusta no runtime se precisares)
+        height: (0, tokens_1.tok)(t, 'space-4'), // 16
+        borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-bg-subtle'),
+        padding: (0, tokens_1.tok)(t, 'space-1'),
+        justifyContent: 'center',
+    };
+    const trackOn = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-accent'),
+        borderColor: (0, tokens_1.tok)(t, 'color-accent'),
+    };
+    const trackDisabled = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+        borderColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+    };
+    const thumbBase = {
+        width: (0, tokens_1.tok)(t, 'space-3'),
+        height: (0, tokens_1.tok)(t, 'space-3'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        // semântico: o runtime move (translateX) conforme `on`
+        translateX: on ? (0, tokens_1.tok)(t, 'space-2') : 0,
+    };
+    const thumbDisabled = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-fg'),
+    };
+    const label = {
+        flex: 1,
+        color: disabled
+            ? (0, tokens_1.tok)(t, 'color-state-disabled-fg')
+            : (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    };
+    const focusRing = {
+        outlineStyle: 'solid',
+        outlineWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+        outlineColor: (0, tokens_1.tok)(t, 'color-focus-ring'),
+        outlineOffset: (0, tokens_1.tok)(t, 'focus-ring-gap'),
+    };
+    const interaction = s.pressed
+        ? { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') }
+        : s.hovered
+            ? { opacity: 0.96 }
+            : {};
+    return {
+        wrapper: (0, tokens_1.merge)(wrapper, interaction),
+        track: (0, tokens_1.merge)(trackBase, on && trackOn, disabled && trackDisabled),
+        thumb: (0, tokens_1.merge)(thumbBase, disabled && thumbDisabled),
+        label: (0, tokens_1.merge)(label),
+        focusRing: (0, tokens_1.merge)(s.focusVisible ? focusRing : undefined),
+    };
+};
+exports.getSwitchParts = getSwitchParts;

package/dist/cjs/styles/tables.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableParts = void 0;
+// styles/tables.ts
+const tokens_1 = require("../types/tokens");
+const getTableParts = (t) => ({
+    container: {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-4'),
+        overflow: 'hidden',
+    },
+    headerRow: {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface-alt'),
+        borderBottomWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderBottomColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+    },
+    headerCell: {
+        paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    },
+    row: {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        borderBottomWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderBottomColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+    },
+    cell: {
+        paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+        color: (0, tokens_1.tok)(t, 'color-fg-default'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+    },
+    rowHover: {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-bg-subtle'),
+    },
+    rowSelected: {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface-alt'),
+    },
+    emptyState: {
+        padding: (0, tokens_1.tok)(t, 'space-5'),
+        color: (0, tokens_1.tok)(t, 'color-fg-muted'),
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        textAlign: 'center',
+    },
+});
+exports.getTableParts = getTableParts;

package/dist/cjs/styles/tabs.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTabParts = exports.getTabsListStyle = void 0;
+// styles/tabs.ts
+const tokens_1 = require("../types/tokens");
+const getTabsListStyle = (t, variant = 'underline') => ({
+    flexDirection: 'row',
+    gap: (0, tokens_1.tok)(t, 'space-2'),
+    padding: (0, tokens_1.tok)(t, 'space-2'),
+    borderBottomWidth: variant === 'underline' ? (0, tokens_1.tok)(t, 'border-width-default') : 0,
+    borderBottomColor: variant === 'underline' ? (0, tokens_1.tok)(t, 'color-border-subtle') : 'transparent',
+});
+exports.getTabsListStyle = getTabsListStyle;
+const getTabParts = (t, variant, s = {}) => {
+    const active = Boolean(s.active);
+    const disabled = Boolean(s.disabled);
+    const baseTab = {
+        minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+        paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+        paddingVertical: (0, tokens_1.tok)(t, 'space-2'),
+        borderRadius: variant === 'pill' ? (0, tokens_1.tok)(t, 'radius-full') : (0, tokens_1.tok)(t, 'radius-2'),
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+    const baseLabel = {
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+        lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        color: disabled
+            ? (0, tokens_1.tok)(t, 'color-state-disabled-fg')
+            : active
+                ? (0, tokens_1.tok)(t, 'color-fg-default')
+                : (0, tokens_1.tok)(t, 'color-fg-muted'),
+    };
+    const indicator = variant === 'pill'
+        ? {
+            backgroundColor: active ? (0, tokens_1.tok)(t, 'color-surface-alt') : 'transparent',
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderColor: active ? (0, tokens_1.tok)(t, 'color-border-strong') : 'transparent',
+        }
+        : {
+            // underline
+            borderBottomWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+            borderBottomColor: active
+                ? (0, tokens_1.tok)(t, 'color-action-primary')
+                : 'transparent',
+        };
+    const focusRing = {
+        outlineStyle: 'solid',
+        outlineWidth: (0, tokens_1.tok)(t, 'border-width-focus'),
+        outlineColor: (0, tokens_1.tok)(t, 'color-focus-ring'),
+        outlineOffset: (0, tokens_1.tok)(t, 'focus-ring-gap'),
+    };
+    const interaction = s.pressed
+        ? { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') }
+        : s.hovered
+            ? { opacity: 0.96 }
+            : {};
+    const disabledStyle = disabled
+        ? { opacity: (0, tokens_1.tok)(t, 'opacity-disabled') }
+        : {};
+    return {
+        list: {},
+        tab: (0, tokens_1.merge)(baseTab, interaction, disabledStyle),
+        label: (0, tokens_1.merge)(baseLabel),
+        indicator,
+        focusRing: (0, tokens_1.merge)(s.focusVisible ? focusRing : undefined),
+    };
+};
+exports.getTabParts = getTabParts;