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

package/dist/esm/styles/bottomSheets.js

@@ -0,0 +1,72 @@
+// styles/bottomSheets.ts
+import { merge, motion, tok, } from '../types/tokens';
+export const getBottomSheetParts = (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,
+            justifyContent: 'flex-end',
+            zIndex: tok(t, 'z-index-layer-modal'),
+        },
+        surface: {
+            backgroundColor: tok(t, 'color-surface'),
+            borderTopLeftRadius: tok(t, 'radius-4'),
+            borderTopRightRadius: tok(t, 'radius-4'),
+            borderWidth: tok(t, 'border-width-default'),
+            borderColor: tok(t, 'color-border-subtle'),
+            shadow: tok(t, 'shadow-level-4'),
+            paddingBottom: tok(t, 'space-4'),
+            overflow: 'hidden',
+            // semântico (runtime anima slide-up/down)
+            animationEnterDurationMs: enter.durationMs,
+            animationEnterEasing: enter.easing,
+            animationExitDurationMs: exit.durationMs,
+            animationExitEasing: exit.easing,
+        },
+        handle: {
+            alignSelf: 'center',
+            width: tok(t, 'space-6'),
+            height: tok(t, 'space-1'),
+            borderRadius: tok(t, 'radius-full'),
+            backgroundColor: tok(t, 'color-border-subtle'),
+            marginTop: tok(t, 'space-2'),
+            marginBottom: tok(t, 'space-2'),
+        },
+        header: {
+            paddingHorizontal: tok(t, 'space-4'),
+            paddingBottom: tok(t, 'space-2'),
+        },
+        body: {
+            paddingHorizontal: tok(t, 'space-4'),
+            paddingVertical: tok(t, 'space-3'),
+        },
+        footer: {
+            paddingHorizontal: tok(t, 'space-4'),
+            paddingTop: tok(t, 'space-2'),
+            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-4'),
+            fontWeight: tok(t, 'typography-font-weight-strong'),
+            lineHeight: tok(t, 'typography-line-height-tight'),
+        },
+    };
+    if (!opts?.dense)
+        return base;
+    return {
+        ...base,
+        header: merge(base.header, { paddingHorizontal: tok(t, 'space-3') }),
+        body: merge(base.body, { paddingHorizontal: tok(t, 'space-3') }),
+        footer: merge(base.footer, { paddingHorizontal: tok(t, 'space-3') }),
+    };
+};

package/dist/esm/styles/buttons.js

@@ -0,0 +1,125 @@
+// styles/buttons.ts
+import { merge, tok, } from '../types/tokens';
+const variantStyles = (t) => ({
+    primary: {
+        container: {
+            backgroundColor: tok(t, 'color-action-primary'),
+            borderColor: 'transparent',
+        },
+        label: { color: tok(t, 'color-action-primary-fg') },
+    },
+    secondary: {
+        container: {
+            backgroundColor: tok(t, 'color-action-secondary'),
+            borderColor: 'transparent',
+        },
+        label: { color: tok(t, 'color-action-secondary-fg') },
+    },
+    ghost: {
+        container: {
+            backgroundColor: 'transparent',
+            borderColor: tok(t, 'color-border-subtle'),
+        },
+        label: { color: tok(t, 'color-fg-default') },
+    },
+    danger: {
+        container: {
+            backgroundColor: tok(t, 'color-status-error'),
+            borderColor: 'transparent',
+        },
+        label: { color: tok(t, 'color-status-error-fg') },
+    },
+});
+const sizeStyles = (t) => ({
+    sm: {
+        container: {
+            minHeight: tok(t, 'tap-target-min'),
+            paddingHorizontal: tok(t, 'space-3'),
+            paddingVertical: tok(t, 'space-2'),
+        },
+        label: {
+            fontSize: tok(t, 'typography-font-size-2'),
+        },
+        icon: {
+            width: tok(t, 'typography-font-size-4'),
+            height: tok(t, 'typography-font-size-4'),
+        },
+    },
+    md: {
+        container: {
+            minHeight: tok(t, 'tap-target-min'),
+            paddingHorizontal: tok(t, 'space-4'),
+            paddingVertical: tok(t, 'space-2'),
+        },
+        label: {
+            fontSize: tok(t, 'typography-font-size-3'),
+        },
+        icon: {
+            width: tok(t, 'typography-font-size-4'),
+            height: tok(t, 'typography-font-size-4'),
+        },
+    },
+    lg: {
+        container: {
+            minHeight: tok(t, 'tap-target-min'),
+            paddingHorizontal: tok(t, 'space-5'),
+            paddingVertical: tok(t, 'space-3'),
+        },
+        label: {
+            fontSize: tok(t, 'typography-font-size-4'),
+        },
+        icon: {
+            width: tok(t, 'typography-font-size-5'),
+            height: tok(t, 'typography-font-size-5'),
+        },
+    },
+});
+export const getButtonParts = (t, opts = {}) => {
+    const variant = opts.variant ?? 'primary';
+    const size = opts.size ?? 'md';
+    const isDisabled = Boolean(opts.disabled || opts.loading);
+    const baseContainer = {
+        borderWidth: tok(t, 'border-width-default'),
+        borderRadius: tok(t, 'radius-3'),
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        gap: tok(t, 'space-2'),
+    };
+    const baseLabel = {
+        fontFamily: tok(t, 'typography-font-family-base'),
+        fontWeight: tok(t, 'typography-font-weight-medium'),
+        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 disabledStyles = {
+        container: {
+            backgroundColor: tok(t, 'color-state-disabled-bg'),
+            borderColor: tok(t, 'color-state-disabled-bg'),
+            opacity: tok(t, 'opacity-disabled'),
+        },
+        label: { color: tok(t, 'color-state-disabled-fg') },
+    };
+    const interaction = {
+        hovered: { container: { opacity: 0.96 } },
+        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),
+    };
+};

package/dist/esm/styles/cards.js

@@ -0,0 +1,67 @@
+// styles/cards.ts
+import { merge, tok, } from '../types/tokens';
+const variantStyles = (t) => ({
+    default: {
+        container: {
+            backgroundColor: tok(t, 'color-surface'),
+            borderColor: tok(t, 'color-border-subtle'),
+            shadow: tok(t, 'shadow-level-1'),
+        },
+    },
+    elevated: {
+        container: {
+            backgroundColor: tok(t, 'color-surface'),
+            borderColor: tok(t, 'color-border-subtle'),
+            shadow: tok(t, 'shadow-level-2'),
+        },
+    },
+    outlined: {
+        container: {
+            backgroundColor: tok(t, 'color-surface'),
+            borderColor: tok(t, 'color-border-strong'),
+            shadow: 'none',
+        },
+    },
+    subtle: {
+        container: {
+            backgroundColor: tok(t, 'color-surface-alt'),
+            borderColor: tok(t, 'color-border-subtle'),
+            shadow: 'none',
+        },
+    },
+});
+export const getCardParts = (t, opts = {}) => {
+    const variant = opts.variant ?? 'default';
+    const v = variantStyles(t)[variant];
+    const baseContainer = {
+        borderWidth: tok(t, 'border-width-default'),
+        borderRadius: tok(t, 'radius-3'),
+        padding: tok(t, 'space-4'),
+    };
+    const hover = { shadow: tok(t, 'shadow-level-3') };
+    const pressed = {
+        opacity: tok(t, 'opacity-pressed'),
+        shadow: tok(t, 'shadow-level-2'),
+    };
+    return {
+        container: merge(baseContainer, v.container, opts.hovered && hover, opts.pressed && pressed),
+        header: { marginBottom: tok(t, 'space-3') },
+        body: {},
+        footer: { marginTop: tok(t, 'space-3') },
+        title: {
+            color: tok(t, 'color-fg-default'),
+            fontFamily: tok(t, 'typography-font-family-heading'),
+            fontSize: tok(t, 'typography-font-size-4'),
+            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'),
+        },
+    };
+};

package/dist/esm/styles/checkboxes.js

@@ -0,0 +1,66 @@
+// styles/checkboxes.ts
+import { merge, tok, } from '../types/tokens';
+export const getCheckboxParts = (t, s = {}) => {
+    const isOn = Boolean(s.checked || s.indeterminate);
+    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 boxBase = {
+        width: tok(t, 'typography-font-size-5'),
+        height: tok(t, 'typography-font-size-5'),
+        borderRadius: tok(t, 'radius-2'),
+        borderWidth: tok(t, 'border-width-default'),
+        backgroundColor: tok(t, 'color-surface'),
+        borderColor: tok(t, 'color-border-strong'),
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+    const boxOn = {
+        backgroundColor: tok(t, 'color-accent'),
+        borderColor: tok(t, 'color-accent'),
+    };
+    const boxDisabled = {
+        backgroundColor: tok(t, 'color-state-disabled-bg'),
+        borderColor: tok(t, 'color-state-disabled-bg'),
+    };
+    const checkmark = {
+        color: isDisabled
+            ? tok(t, 'color-state-disabled-fg')
+            : tok(t, 'color-accent-fg'),
+        width: tok(t, 'typography-font-size-4'),
+        height: tok(t, 'typography-font-size-4'),
+    };
+    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'),
+        fontWeight: tok(t, 'typography-font-weight-regular'),
+    };
+    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),
+        box: merge(boxBase, isOn && boxOn, isDisabled && boxDisabled),
+        checkmark: merge(checkmark),
+        label: merge(label),
+        focusRing: merge(s.focusVisible ? focusRing : undefined),
+    };
+};

package/dist/esm/styles/chips.js

@@ -0,0 +1,94 @@
+// styles/chips.ts
+import { merge, tok, } from '../types/tokens';
+export const getChipParts = (t, opts = {}) => {
+    const variant = opts.variant ?? 'filled';
+    const selected = Boolean(opts.selected);
+    const disabled = Boolean(opts.disabled);
+    const base = {
+        container: {
+            minHeight: tok(t, 'tap-target-min'),
+            alignSelf: 'flex-start',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: tok(t, 'space-2'),
+            paddingHorizontal: tok(t, 'space-3'),
+            paddingVertical: tok(t, 'space-2'),
+            borderRadius: tok(t, 'radius-full'),
+            borderWidth: tok(t, 'border-width-default'),
+        },
+        label: {
+            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'),
+        },
+        leftIcon: {
+            width: tok(t, 'typography-font-size-4'),
+            height: tok(t, 'typography-font-size-4'),
+        },
+        rightIcon: {
+            width: tok(t, 'typography-font-size-4'),
+            height: tok(t, 'typography-font-size-4'),
+        },
+        focusRing: {
+            outlineStyle: 'solid',
+            outlineWidth: tok(t, 'border-width-focus'),
+            outlineColor: tok(t, 'color-focus-ring'),
+            outlineOffset: tok(t, 'focus-ring-gap'),
+        },
+    };
+    const filled = {
+        backgroundColor: selected
+            ? tok(t, 'color-action-primary')
+            : tok(t, 'color-surface-alt'),
+        borderColor: selected
+            ? tok(t, 'color-action-primary')
+            : tok(t, 'color-border-subtle'),
+    };
+    const filledLabel = {
+        color: selected
+            ? tok(t, 'color-action-primary-fg')
+            : tok(t, 'color-fg-default'),
+    };
+    const outlined = {
+        backgroundColor: 'transparent',
+        borderColor: selected
+            ? tok(t, 'color-action-primary')
+            : tok(t, 'color-border-strong'),
+    };
+    const outlinedLabel = {
+        color: selected
+            ? tok(t, 'color-action-primary')
+            : tok(t, 'color-fg-default'),
+    };
+    const disabledS = {
+        backgroundColor: tok(t, 'color-state-disabled-bg'),
+        borderColor: tok(t, 'color-state-disabled-bg'),
+        opacity: tok(t, 'opacity-disabled'),
+    };
+    const disabledLabel = { color: tok(t, 'color-state-disabled-fg') };
+    const interaction = opts.pressed
+        ? { opacity: tok(t, 'opacity-pressed') }
+        : opts.hovered
+            ? { opacity: 0.96 }
+            : {};
+    return {
+        container: merge(base.container, variant === 'filled' ? filled : outlined, interaction, disabled && disabledS),
+        label: merge(base.label, variant === 'filled' ? filledLabel : outlinedLabel, disabled && disabledLabel),
+        leftIcon: merge(base.leftIcon, {
+            color: (disabled
+                ? disabledLabel.color
+                : variant === 'filled'
+                    ? filledLabel.color
+                    : outlinedLabel.color),
+        }),
+        rightIcon: merge(base.rightIcon, {
+            color: (disabled
+                ? disabledLabel.color
+                : variant === 'filled'
+                    ? filledLabel.color
+                    : outlinedLabel.color),
+        }),
+        focusRing: merge(opts.focusVisible ? base.focusRing : undefined),
+    };
+};

package/dist/esm/styles/datePickers.js

@@ -0,0 +1,108 @@
+// styles/datePickers.ts
+import { merge, tok, } from '../types/tokens';
+export const getDatePickerParts = (t) => {
+    return {
+        container: {
+            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-2'),
+            padding: tok(t, 'space-3'),
+        },
+        header: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingBottom: tok(t, 'space-2'),
+            marginBottom: tok(t, 'space-2'),
+            borderBottomWidth: tok(t, 'border-width-default'),
+            borderBottomColor: tok(t, 'color-border-subtle'),
+        },
+        monthLabel: {
+            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'),
+        },
+        navButton: {
+            minHeight: tok(t, 'tap-target-min'),
+            minWidth: tok(t, 'tap-target-min'),
+            borderRadius: tok(t, 'radius-full'),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        weekRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginBottom: tok(t, 'space-2'),
+        },
+        weekdayLabel: {
+            width: tok(t, 'tap-target-min'),
+            textAlign: 'center',
+            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'),
+        },
+        dayCell: {
+            width: tok(t, 'tap-target-min'),
+            height: tok(t, 'tap-target-min'),
+            borderRadius: tok(t, 'radius-full'),
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        dayText: {
+            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-regular'),
+            lineHeight: tok(t, 'typography-line-height-default'),
+        },
+        dayFocusRing: {
+            outlineStyle: 'solid',
+            outlineWidth: tok(t, 'border-width-focus'),
+            outlineColor: tok(t, 'color-focus-ring'),
+            outlineOffset: tok(t, 'focus-ring-gap'),
+        },
+        rangeFill: {
+            backgroundColor: tok(t, 'color-surface-alt'),
+            borderRadius: tok(t, 'radius-full'),
+        },
+    };
+};
+export const getCalendarDayParts = (t, s = {}) => {
+    const base = getDatePickerParts(t);
+    const disabled = {
+        backgroundColor: 'transparent',
+        opacity: tok(t, 'opacity-disabled'),
+    };
+    const outside = {
+        opacity: 0.5,
+    };
+    const today = {
+        borderWidth: tok(t, 'border-width-default'),
+        borderColor: tok(t, 'color-border-strong'),
+    };
+    const selected = {
+        backgroundColor: tok(t, 'color-action-primary'),
+    };
+    const selectedText = {
+        color: tok(t, 'color-action-primary-fg'),
+        fontWeight: tok(t, 'typography-font-weight-strong'),
+    };
+    const inRange = {
+        backgroundColor: tok(t, 'color-surface-alt'),
+    };
+    const interaction = s.pressed
+        ? { opacity: tok(t, 'opacity-pressed') }
+        : s.hovered
+            ? { opacity: 0.96 }
+            : {};
+    return {
+        cell: merge(base.dayCell, s.isInRange && inRange, s.isToday && today, s.isSelected && selected, s.isOutsideMonth && outside, s.isDisabled && disabled, interaction),
+        text: merge(base.dayText, s.isSelected && selectedText, s.isDisabled && { color: tok(t, 'color-state-disabled-fg') }),
+        focusRing: merge(s.focusVisible ? base.dayFocusRing : undefined),
+    };
+};

package/dist/esm/styles/dividers.js

@@ -0,0 +1,8 @@
+// styles/dividers.ts
+import { tok } from '../types/tokens';
+export const getDividerStyle = (t, variant = 'subtle') => ({
+    height: tok(t, 'border-width-default'),
+    backgroundColor: variant === 'strong'
+        ? tok(t, 'color-border-strong')
+        : tok(t, 'color-border-subtle'),
+});

package/dist/esm/styles/emptyStates.js

@@ -0,0 +1,36 @@
+// styles/emptyStates.ts
+import { tok } from '../types/tokens';
+export const getEmptyStateParts = (t) => ({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: tok(t, 'space-6'),
+        gap: tok(t, 'space-3'),
+    },
+    icon: {
+        width: tok(t, 'typography-font-size-6'),
+        height: tok(t, 'typography-font-size-6'),
+        color: tok(t, 'color-fg-muted'),
+    },
+    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'),
+        textAlign: 'center',
+    },
+    message: {
+        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'),
+        textAlign: 'center',
+    },
+    actions: {
+        marginTop: tok(t, 'space-2'),
+        flexDirection: 'row',
+        gap: tok(t, 'space-2'),
+    },
+});

package/dist/esm/styles/forms.js

@@ -0,0 +1,28 @@
+// styles/forms.ts
+import { tok } from '../types/tokens';
+export const getFormLayout = (t) => ({
+    form: {
+        gap: tok(t, 'space-4'),
+    },
+    field: {
+        gap: tok(t, 'space-1'),
+    },
+    row: {
+        flexDirection: 'row',
+        gap: tok(t, 'space-3'),
+    },
+    section: {
+        padding: tok(t, 'space-4'),
+        backgroundColor: tok(t, 'color-surface'),
+        borderRadius: tok(t, 'radius-4'),
+        borderWidth: tok(t, 'border-width-default'),
+        borderColor: tok(t, 'color-border-subtle'),
+        gap: tok(t, 'space-3'),
+    },
+    actions: {
+        marginTop: tok(t, 'space-2'),
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        gap: tok(t, 'space-2'),
+    },
+});

package/dist/esm/styles/headers.js

@@ -0,0 +1,42 @@
+// styles/headers.ts
+import { tok } from '../types/tokens';
+export const getHeaderParts = (t) => ({
+    container: {
+        minHeight: tok(t, 'tap-target-min'),
+        paddingHorizontal: tok(t, 'space-4'),
+        paddingVertical: tok(t, 'space-3'),
+        backgroundColor: tok(t, 'color-surface'),
+        borderBottomWidth: tok(t, 'border-width-default'),
+        borderBottomColor: tok(t, 'color-border-subtle'),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        zIndex: tok(t, 'z-index-layer-navbar'),
+    },
+    left: {
+        minWidth: tok(t, 'tap-target-min'),
+        alignItems: 'flex-start',
+        justifyContent: 'center',
+    },
+    center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    right: {
+        minWidth: tok(t, 'tap-target-min'),
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+    },
+    title: {
+        color: tok(t, 'color-fg-default'),
+        fontFamily: tok(t, 'typography-font-family-heading'),
+        fontSize: tok(t, 'typography-font-size-4'),
+        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'),
+    },
+});

package/dist/esm/styles/index.js

@@ -0,0 +1,27 @@
+export * from './avatars';
+export * from './badges';
+export * from './bottomSheets';
+export * from './buttons';
+export * from './cards';
+export * from './checkboxes';
+export * from './chips';
+export * from './datePickers';
+export * from './dividers';
+export * from './emptyStates';
+export * from './forms';
+export * from './headers';
+export * from './inputs';
+export * from './listItems';
+export * from './modals';
+export * from './pagination';
+export * from './popovers';
+export * from './progress';
+export * from './radios';
+export * from './selects';
+export * from './skeletons';
+export * from './steppers';
+export * from './switches';
+export * from './tables';
+export * from './tabs';
+export * from './toasts';
+export * from './tooltips';