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

package/dist/esm/styles/inputs.js

@@ -0,0 +1,97 @@
+// styles/inputs.ts
+import { merge, tok, } from '../types/tokens';
+const sizeStyles = (t) => ({
+    sm: {
+        fieldWrapper: {
+            minHeight: tok(t, 'tap-target-min'),
+            paddingHorizontal: tok(t, 'space-3'),
+            paddingVertical: tok(t, 'space-2'),
+        },
+        inputText: { fontSize: tok(t, 'typography-font-size-2') },
+    },
+    md: {
+        fieldWrapper: {
+            minHeight: tok(t, 'tap-target-min'),
+            paddingHorizontal: tok(t, 'space-4'),
+            paddingVertical: tok(t, 'space-2'),
+        },
+        inputText: { fontSize: tok(t, 'typography-font-size-3') },
+    },
+    lg: {
+        fieldWrapper: {
+            minHeight: tok(t, 'tap-target-min'),
+            paddingHorizontal: tok(t, 'space-5'),
+            paddingVertical: tok(t, 'space-3'),
+        },
+        inputText: { fontSize: tok(t, 'typography-font-size-4') },
+    },
+});
+export const getInputParts = (t, opts = {}) => {
+    const size = opts.size ?? 'md';
+    const isDisabled = Boolean(opts.disabled);
+    const isError = Boolean(opts.error);
+    const isFocused = Boolean(opts.focused);
+    const s = sizeStyles(t)[size];
+    const base = {
+        label: {
+            marginBottom: tok(t, 'space-1'),
+            color: tok(t, 'color-fg-muted'),
+            fontFamily: tok(t, 'typography-font-family-base'),
+            fontSize: tok(t, 'typography-font-size-2'),
+            fontWeight: tok(t, 'typography-font-weight-medium'),
+            lineHeight: tok(t, 'typography-line-height-default'),
+        },
+        fieldWrapper: merge({
+            backgroundColor: tok(t, 'color-input-bg'),
+            borderColor: tok(t, 'color-input-border'),
+            borderWidth: tok(t, 'border-width-default'),
+            borderRadius: tok(t, 'radius-2'),
+            justifyContent: 'center',
+        }, s.fieldWrapper),
+        inputText: merge({
+            color: tok(t, 'color-fg-default'),
+            fontFamily: tok(t, 'typography-font-family-base'),
+            lineHeight: tok(t, 'typography-line-height-default'),
+        }, s.inputText),
+        placeholder: {
+            color: tok(t, 'color-input-placeholder'),
+        },
+        helper: {
+            marginTop: tok(t, 'space-1'),
+            color: tok(t, 'color-fg-subtle'),
+            fontFamily: tok(t, 'typography-font-family-base'),
+            fontSize: tok(t, 'typography-font-size-1'),
+            lineHeight: tok(t, 'typography-line-height-default'),
+        },
+        focusRing: {
+            outlineStyle: 'solid',
+            outlineWidth: tok(t, 'border-width-focus'),
+            outlineColor: tok(t, 'color-focus-ring'),
+            outlineOffset: tok(t, 'focus-ring-gap'),
+        },
+    };
+    const focused = {
+        fieldWrapper: { borderColor: tok(t, 'color-input-border-focus') },
+    };
+    const error = {
+        fieldWrapper: { borderColor: tok(t, 'color-status-error') },
+        helper: { color: tok(t, 'color-status-error') },
+    };
+    const disabled = {
+        fieldWrapper: {
+            backgroundColor: tok(t, 'color-state-disabled-bg'),
+            borderColor: tok(t, 'color-state-disabled-bg'),
+        },
+        label: { color: tok(t, 'color-state-disabled-fg') },
+        inputText: { color: tok(t, 'color-state-disabled-fg') },
+        helper: { color: tok(t, 'color-state-disabled-fg') },
+    };
+    return {
+        label: merge(base.label, isDisabled && disabled.label),
+        fieldWrapper: merge(base.fieldWrapper, isFocused && focused.fieldWrapper, isError && error.fieldWrapper, isDisabled && disabled.fieldWrapper),
+        inputText: merge(base.inputText, isDisabled && disabled.inputText),
+        placeholder: merge(base.placeholder),
+        helper: merge(base.helper, isError && error.helper, isDisabled && disabled.helper),
+        focusRing: merge(isFocused ? base.focusRing : undefined),
+    };
+};

package/dist/esm/styles/listItems.js

@@ -0,0 +1,61 @@
+// styles/listItems.ts
+import { merge, tok, } from '../types/tokens';
+export const getListItemParts = (t, s = {}) => {
+    const disabled = Boolean(s.disabled);
+    const base = {
+        container: {
+            minHeight: tok(t, 'tap-target-min'),
+            paddingVertical: tok(t, 'space-2'),
+            paddingHorizontal: tok(t, 'space-4'),
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: tok(t, 'space-3'),
+            borderRadius: tok(t, 'radius-3'),
+        },
+        left: {
+            width: tok(t, 'tap-target-min'),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        content: { flex: 1, gap: tok(t, 'space-1') },
+        right: {
+            minWidth: tok(t, 'tap-target-min'),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        title: {
+            color: tok(t, 'color-fg-default'),
+            fontFamily: tok(t, 'typography-font-family-base'),
+            fontSize: tok(t, 'typography-font-size-3'),
+            fontWeight: tok(t, 'typography-font-weight-medium'),
+            lineHeight: tok(t, 'typography-line-height-default'),
+        },
+        subtitle: {
+            color: tok(t, 'color-fg-muted'),
+            fontFamily: tok(t, 'typography-font-family-base'),
+            fontSize: tok(t, 'typography-font-size-2'),
+            fontWeight: tok(t, 'typography-font-weight-regular'),
+            lineHeight: tok(t, 'typography-line-height-default'),
+        },
+        focusRing: {
+            outlineStyle: 'solid',
+            outlineWidth: tok(t, 'border-width-focus'),
+            outlineColor: tok(t, 'color-focus-ring'),
+            outlineOffset: tok(t, 'focus-ring-gap'),
+        },
+    };
+    const selected = { backgroundColor: tok(t, 'color-surface-alt') };
+    const hover = { backgroundColor: tok(t, 'color-bg-subtle') };
+    const pressed = { opacity: tok(t, 'opacity-pressed') };
+    const disabledS = { opacity: tok(t, 'opacity-disabled') };
+    const disabledText = { color: tok(t, 'color-state-disabled-fg') };
+    return {
+        container: merge(base.container, s.selected && selected, s.hovered && hover, s.pressed && pressed, disabled && disabledS),
+        left: base.left,
+        content: base.content,
+        right: base.right,
+        title: merge(base.title, disabled && disabledText),
+        subtitle: merge(base.subtitle, disabled && disabledText),
+        focusRing: merge(s.focusVisible ? base.focusRing : undefined),
+    };
+};

package/dist/esm/styles/modals.js

@@ -0,0 +1,88 @@
+// styles/modals.ts
+import { merge, motion, tok, } from '../types/tokens';
+export const getModalParts = (t, opts) => {
+    const enter = motion(t, 'motion-emphasis-enter');
+    const exit = motion(t, 'motion-emphasis-exit');
+    const base = {
+        backdrop: {
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: tok(t, 'color-overlay-backdrop'),
+            zIndex: tok(t, 'z-index-layer-overlay'),
+        },
+        container: {
+            position: 'absolute',
+            inset: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: tok(t, 'space-4'),
+            zIndex: tok(t, 'z-index-layer-modal'),
+        },
+        surface: {
+            width: '100%',
+            backgroundColor: tok(t, 'color-surface'),
+            borderRadius: tok(t, 'radius-4'),
+            borderWidth: tok(t, 'border-width-default'),
+            borderColor: tok(t, 'color-border-subtle'),
+            shadow: tok(t, 'shadow-level-4'),
+            overflow: 'hidden',
+            // semântico (runtime aplica animação)
+            animationEnterDurationMs: enter.durationMs,
+            animationEnterEasing: enter.easing,
+            animationExitDurationMs: exit.durationMs,
+            animationExitEasing: exit.easing,
+        },
+        header: {
+            paddingHorizontal: tok(t, 'space-4'),
+            paddingTop: tok(t, 'space-4'),
+            paddingBottom: tok(t, 'space-2'),
+            borderBottomWidth: tok(t, 'border-width-default'),
+            borderBottomColor: tok(t, 'color-border-subtle'),
+        },
+        body: {
+            paddingHorizontal: tok(t, 'space-4'),
+            paddingVertical: tok(t, 'space-3'),
+        },
+        footer: {
+            paddingHorizontal: tok(t, 'space-4'),
+            paddingTop: tok(t, 'space-2'),
+            paddingBottom: tok(t, 'space-4'),
+            borderTopWidth: tok(t, 'border-width-default'),
+            borderTopColor: tok(t, 'color-border-subtle'),
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            gap: tok(t, 'space-2'),
+        },
+        title: {
+            color: tok(t, 'color-fg-default'),
+            fontFamily: tok(t, 'typography-font-family-heading'),
+            fontSize: tok(t, 'typography-font-size-5'),
+            fontWeight: tok(t, 'typography-font-weight-strong'),
+            lineHeight: tok(t, 'typography-line-height-tight'),
+        },
+        subtitle: {
+            marginTop: tok(t, 'space-1'),
+            color: tok(t, 'color-fg-muted'),
+            fontFamily: tok(t, 'typography-font-family-base'),
+            fontSize: tok(t, 'typography-font-size-3'),
+            fontWeight: tok(t, 'typography-font-weight-regular'),
+            lineHeight: tok(t, 'typography-line-height-default'),
+        },
+    };
+    if (!opts?.dense)
+        return base;
+    return {
+        ...base,
+        header: merge(base.header, {
+            paddingHorizontal: tok(t, 'space-3'),
+            paddingTop: tok(t, 'space-3'),
+        }),
+        body: merge(base.body, {
+            paddingHorizontal: tok(t, 'space-3'),
+        }),
+        footer: merge(base.footer, {
+            paddingHorizontal: tok(t, 'space-3'),
+            paddingBottom: tok(t, 'space-3'),
+        }),
+    };
+};

package/dist/esm/styles/pagination.js

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

package/dist/esm/styles/popovers.js

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

package/dist/esm/styles/progress.js

@@ -0,0 +1,27 @@
+// styles/progress.ts
+import { tok } from '../types/tokens';
+export const getProgressParts = (t) => ({
+    track: {
+        backgroundColor: tok(t, 'color-bg-subtle'),
+        borderRadius: tok(t, 'radius-full'),
+        overflow: 'hidden',
+    },
+    fill: {
+        backgroundColor: tok(t, 'color-action-primary'),
+        borderRadius: tok(t, 'radius-full'),
+    },
+    label: {
+        color: tok(t, 'color-fg-muted'),
+        fontFamily: tok(t, 'typography-font-family-base'),
+        fontSize: tok(t, 'typography-font-size-2'),
+        lineHeight: tok(t, 'typography-line-height-default'),
+    },
+});
+// Helpers semânticos para tamanhos
+export const getLinearProgressStyle = (t, heightToken = 'space-2') => ({
+    height: tok(t, heightToken),
+});
+export const getCircularProgressStyle = (t, size) => ({
+    width: size,
+    height: size,
+});

package/dist/esm/styles/radios.js

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

package/dist/esm/styles/selects.js

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

package/dist/esm/styles/skeletons.js

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

package/dist/esm/styles/steppers.js

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