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

package/dist/cjs/helpers/styles.js

@@ -0,0 +1,172 @@
+"use strict";
+// styles/style-bridge.ts
+// Binding helpers (Web + React Native):
+// - normalização px<->number
+// - filtrar props web-only/native-only
+// - mapear shadow tokens (CSS box-shadow) para RN shadow props
+// - focus ring cross-platform (wrapper approach)
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFocusWrapperSx = exports.getFocusRingSx = exports.resolveShadow = exports.pickSxForPlatform = exports.getFocusRingGap = exports.getTapTargetMin = exports.getBorderWidthFocus = exports.getBorderWidthDefault = exports.normalizeValueForPlatform = exports.toPx = exports.toNumber = void 0;
+// Nota: aqui não dependemos das tuas primitives — isto é “infra” para o teu runtime/binding.
+const types_1 = require("../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.
+ */
+const toNumber = (value) => {
+    if (typeof value === 'number')
+        return value;
+    const n = Number.parseFloat(value);
+    if (Number.isNaN(n)) {
+        throw new Error(`toNumber: cannot parse "${value}"`);
+    }
+    return n;
+};
+exports.toNumber = toNumber;
+const toPx = (value) => {
+    if (typeof value === 'string')
+        return value;
+    return `${value}px`;
+};
+exports.toPx = toPx;
+const normalizeValueForPlatform = (platform, value) => {
+    // Recomendação: RN -> number; Web -> string (se vier "px")
+    if (platform === 'native')
+        return (0, exports.toNumber)(value);
+    return typeof value === 'string' ? value : (0, exports.toPx)(value);
+};
+exports.normalizeValueForPlatform = normalizeValueForPlatform;
+const getBorderWidthDefault = (t, platform) => (0, exports.normalizeValueForPlatform)(platform, (0, types_1.tok)(t, 'border-width-default'));
+exports.getBorderWidthDefault = getBorderWidthDefault;
+const getBorderWidthFocus = (t, platform) => (0, exports.normalizeValueForPlatform)(platform, (0, types_1.tok)(t, 'border-width-focus'));
+exports.getBorderWidthFocus = getBorderWidthFocus;
+const getTapTargetMin = (t, platform) => (0, exports.normalizeValueForPlatform)(platform, (0, types_1.tok)(t, 'tap-target-min'));
+exports.getTapTargetMin = getTapTargetMin;
+const getFocusRingGap = (t, platform) => (0, exports.normalizeValueForPlatform)(platform, (0, types_1.tok)(t, 'focus-ring-gap'));
+exports.getFocusRingGap = getFocusRingGap;
+/**
+ * Filtragem de props por plataforma:
+ * - Evita drift: pessoas a usarem `outline*` em RN sem perceberem que não faz nada.
+ */
+const WEB_ONLY_KEYS = new Set([
+    'outlineStyle',
+    'outlineWidth',
+    'outlineColor',
+    'outlineOffset',
+    'inset',
+    'boxShadow',
+    'cursor',
+]);
+const NATIVE_ONLY_KEYS = new Set([
+    'elevation',
+    'shadowColor',
+    'shadowOpacity',
+    'shadowRadius',
+    'shadowOffset',
+]);
+const pickSxForPlatform = (platform, sx) => {
+    const out = {};
+    for (const [k, v] of Object.entries(sx)) {
+        if (v === undefined)
+            continue;
+        if (platform === 'web') {
+            if (NATIVE_ONLY_KEYS.has(k))
+                continue;
+            out[k] = v;
+        }
+        else {
+            if (WEB_ONLY_KEYS.has(k))
+                continue;
+            out[k] = v;
+        }
+    }
+    return out;
+};
+exports.pickSxForPlatform = pickSxForPlatform;
+const parseRgba = (input) => {
+    // rgba(15, 23, 42, 0.18)
+    const m = input.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([0-9.]+))?\s*\)/i);
+    if (!m)
+        return null;
+    const r = Number(m[1]);
+    const g = Number(m[2]);
+    const b = Number(m[3]);
+    const a = m[4] ? Number(m[4]) : 1;
+    return { r, g, b, a };
+};
+const rgbaToHex = ({ r, g, b }) => {
+    const to2 = (n) => Math.max(0, Math.min(255, n)).toString(16).padStart(2, '0');
+    return `#${to2(r)}${to2(g)}${to2(b)}`;
+};
+const parseFirstBoxShadow = (shadow) => {
+    // Ex.: "0 10px 15px rgba(15, 23, 42, 0.18), 0 4px 6px rgba(...)"
+    // Vamos pegar só na primeira parte antes da vírgula de separação de shadows (não a do rgba).
+    const parts = shadow.split('),').slice(0, 1).join('),');
+    const rgba = parseRgba(parts);
+    if (!rgba)
+        return null;
+    // Tenta capturar "x y blur"
+    // "0 10px 15px rgba(...)"
+    const mm = parts.match(/(-?\d+(?:\.\d+)?)px?\s+(-?\d+(?:\.\d+)?)px?\s+(\d+(?:\.\d+)?)px?/);
+    if (!mm)
+        return null;
+    const offsetX = Number(mm[1]);
+    const offsetY = Number(mm[2]);
+    const blur = Number(mm[3]);
+    return { rgba, offsetX, offsetY, blur };
+};
+const resolveShadow = (t, platform, shadowToken) => {
+    const shadowStr = (0, types_1.tok)(t, shadowToken);
+    if (platform === 'web') {
+        return { boxShadow: shadowStr };
+    }
+    const parsed = parseFirstBoxShadow(shadowStr);
+    if (!parsed) {
+        // fallback seguro (sem shadow)
+        return {};
+    }
+    const { rgba, offsetX, offsetY, blur } = parsed;
+    // Heurística RN:
+    // - shadowRadius: blur/2 (aproximação)
+    // - elevation: blur/2 (aproximação)
+    // - shadowOffset: offset
+    return {
+        shadowColor: rgbaToHex(rgba),
+        shadowOpacity: rgba.a,
+        shadowRadius: Math.max(0, blur / 2),
+        shadowOffset: { width: offsetX, height: offsetY },
+        elevation: Math.max(1, Math.round(blur / 2)),
+    };
+};
+exports.resolveShadow = resolveShadow;
+const getFocusRingSx = (t, platform, opts) => {
+    const borderRadius = opts?.borderRadius;
+    if (platform === 'web') {
+        return {
+            outlineStyle: 'solid',
+            outlineWidth: (0, types_1.tok)(t, 'border-width-focus'),
+            outlineColor: (0, types_1.tok)(t, 'color-focus-ring'),
+            outlineOffset: (0, types_1.tok)(t, 'focus-ring-gap'),
+            borderRadius,
+        };
+    }
+    // RN: recomendação prática
+    return {
+        borderWidth: (0, types_1.tok)(t, 'border-width-focus'),
+        borderColor: (0, types_1.tok)(t, 'color-focus-ring'),
+        borderRadius,
+        // um “glow” leve com base no shadow token (se quiseres)
+        ...(0, exports.resolveShadow)(t, 'native', 'shadow-level-2'),
+    };
+};
+exports.getFocusRingSx = getFocusRingSx;
+/**
+ * Sugestão de aplicação:
+ * - envolver o componente num wrapper quando focusVisible/focused
+ * - wrapper recebe getFocusRingSx(...), e dentro um padding = focus-ring-gap (se quiseres)
+ */
+const getFocusWrapperSx = (t, platform, opts) => ({
+    padding: (0, exports.getFocusRingGap)(t, platform),
+    borderRadius: opts?.borderRadius,
+});
+exports.getFocusWrapperSx = getFocusWrapperSx;

package/dist/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./styles"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/styles/avatars.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAvatarParts = void 0;
+// styles/avatars.ts
+const tokens_1 = require("../types/tokens");
+const sizeMap = (t) => ({
+    xs: {
+        size: (0, tokens_1.tok)(t, 'space-5'),
+        font: (0, tokens_1.tok)(t, 'typography-font-size-1'),
+    }, // 24 / 12
+    sm: {
+        size: (0, tokens_1.tok)(t, 'space-6'),
+        font: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+    }, // 32 / 14
+    md: {
+        size: (0, tokens_1.tok)(t, 'space-7'),
+        font: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+    }, // 40 / 16
+    lg: {
+        size: (0, tokens_1.tok)(t, 'space-8'),
+        font: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+    }, // sem token exato (P3 ok)
+    xl: {
+        size: (0, tokens_1.tok)(t, 'space-9'),
+        font: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+    }, // sem token exato (P3 ok)
+});
+const getAvatarParts = (t, size = 'md') => {
+    const s = sizeMap(t)[size];
+    return {
+        container: {
+            width: s.size,
+            height: s.size,
+            borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface-alt'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+        },
+        image: { width: '100%', height: '100%' },
+        initials: {
+            color: (0, tokens_1.tok)(t, 'color-fg-default'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+            fontSize: s.font,
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-tight'),
+        },
+        statusDot: {
+            position: 'absolute',
+            right: (0, tokens_1.tok)(t, 'space-1'),
+            bottom: (0, tokens_1.tok)(t, 'space-1'),
+            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: (0, tokens_1.tok)(t, 'color-status-success'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderColor: (0, tokens_1.tok)(t, 'color-surface'),
+        },
+    };
+};
+exports.getAvatarParts = getAvatarParts;

package/dist/cjs/styles/badges.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBadgeParts = void 0;
+// styles/badges.ts
+const tokens_1 = require("../types/tokens");
+const getBadgeParts = (t, variant = 'neutral') => {
+    const map = {
+        neutral: {
+            bg: (0, tokens_1.tok)(t, 'color-surface-alt'),
+            fg: (0, tokens_1.tok)(t, 'color-fg-default'),
+            border: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        },
+        brand: {
+            bg: (0, tokens_1.tok)(t, 'color-brand'),
+            fg: (0, tokens_1.tok)(t, 'color-fg-on-inverted'),
+            border: (0, tokens_1.tok)(t, 'color-brand'),
+        },
+        success: {
+            bg: (0, tokens_1.tok)(t, 'color-status-success'),
+            fg: (0, tokens_1.tok)(t, 'color-status-success-fg'),
+            border: (0, tokens_1.tok)(t, 'color-status-success'),
+        },
+        warning: {
+            bg: (0, tokens_1.tok)(t, 'color-status-warning'),
+            fg: (0, tokens_1.tok)(t, 'color-status-warning-fg'),
+            border: (0, tokens_1.tok)(t, 'color-status-warning'),
+        },
+        error: {
+            bg: (0, tokens_1.tok)(t, 'color-status-error'),
+            fg: (0, tokens_1.tok)(t, 'color-status-error-fg'),
+            border: (0, tokens_1.tok)(t, 'color-status-error'),
+        },
+        info: {
+            bg: (0, tokens_1.tok)(t, 'color-status-info'),
+            fg: (0, tokens_1.tok)(t, 'color-status-info-fg'),
+            border: (0, tokens_1.tok)(t, 'color-status-info'),
+        },
+    };
+    const v = map[variant];
+    return {
+        container: {
+            alignSelf: 'flex-start',
+            backgroundColor: v.bg,
+            borderColor: v.border,
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-1'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        label: {
+            color: v.fg,
+            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-medium'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+    };
+};
+exports.getBadgeParts = getBadgeParts;

package/dist/cjs/styles/bottomSheets.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBottomSheetParts = void 0;
+// styles/bottomSheets.ts
+const tokens_1 = require("../types/tokens");
+const getBottomSheetParts = (t, opts) => {
+    const enter = (0, tokens_1.motion)(t, 'motion-emphasis-enter');
+    const exit = (0, tokens_1.motion)(t, 'motion-emphasis-exit');
+    const base = {
+        backdrop: {
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: (0, tokens_1.tok)(t, 'color-overlay-backdrop'),
+            zIndex: (0, tokens_1.tok)(t, 'z-index-layer-overlay'),
+        },
+        container: {
+            position: 'absolute',
+            inset: 0,
+            justifyContent: 'flex-end',
+            zIndex: (0, tokens_1.tok)(t, 'z-index-layer-modal'),
+        },
+        surface: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderTopLeftRadius: (0, tokens_1.tok)(t, 'radius-4'),
+            borderTopRightRadius: (0, tokens_1.tok)(t, 'radius-4'),
+            borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            shadow: (0, tokens_1.tok)(t, 'shadow-level-4'),
+            paddingBottom: (0, tokens_1.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: (0, tokens_1.tok)(t, 'space-6'),
+            height: (0, tokens_1.tok)(t, 'space-1'),
+            borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+            backgroundColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            marginTop: (0, tokens_1.tok)(t, 'space-2'),
+            marginBottom: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        header: {
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            paddingBottom: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        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'),
+            gap: (0, tokens_1.tok)(t, 'space-2'),
+        },
+        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-4'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-strong'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-tight'),
+        },
+    };
+    if (!opts?.dense)
+        return base;
+    return {
+        ...base,
+        header: (0, tokens_1.merge)(base.header, { paddingHorizontal: (0, tokens_1.tok)(t, 'space-3') }),
+        body: (0, tokens_1.merge)(base.body, { paddingHorizontal: (0, tokens_1.tok)(t, 'space-3') }),
+        footer: (0, tokens_1.merge)(base.footer, { paddingHorizontal: (0, tokens_1.tok)(t, 'space-3') }),
+    };
+};
+exports.getBottomSheetParts = getBottomSheetParts;

package/dist/cjs/styles/buttons.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getButtonParts = void 0;
+// styles/buttons.ts
+const tokens_1 = require("../types/tokens");
+const variantStyles = (t) => ({
+    primary: {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-action-primary'),
+            borderColor: 'transparent',
+        },
+        label: { color: (0, tokens_1.tok)(t, 'color-action-primary-fg') },
+    },
+    secondary: {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-action-secondary'),
+            borderColor: 'transparent',
+        },
+        label: { color: (0, tokens_1.tok)(t, 'color-action-secondary-fg') },
+    },
+    ghost: {
+        container: {
+            backgroundColor: 'transparent',
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+        },
+        label: { color: (0, tokens_1.tok)(t, 'color-fg-default') },
+    },
+    danger: {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-status-error'),
+            borderColor: 'transparent',
+        },
+        label: { color: (0, tokens_1.tok)(t, 'color-status-error-fg') },
+    },
+});
+const sizeStyles = (t) => ({
+    sm: {
+        container: {
+            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'),
+        },
+        label: {
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-2'),
+        },
+        icon: {
+            width: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+            height: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        },
+    },
+    md: {
+        container: {
+            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'),
+        },
+        label: {
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-3'),
+        },
+        icon: {
+            width: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+            height: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        },
+    },
+    lg: {
+        container: {
+            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'),
+        },
+        label: {
+            fontSize: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        },
+        icon: {
+            width: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+            height: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+        },
+    },
+});
+const getButtonParts = (t, opts = {}) => {
+    const variant = opts.variant ?? 'primary';
+    const size = opts.size ?? 'md';
+    const isDisabled = Boolean(opts.disabled || opts.loading);
+    const baseContainer = {
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-3'),
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        gap: (0, tokens_1.tok)(t, 'space-2'),
+    };
+    const baseLabel = {
+        fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-base'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-medium'),
+        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 disabledStyles = {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+            borderColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+            opacity: (0, tokens_1.tok)(t, 'opacity-disabled'),
+        },
+        label: { color: (0, tokens_1.tok)(t, 'color-state-disabled-fg') },
+    };
+    const interaction = {
+        hovered: { container: { opacity: 0.96 } },
+        pressed: { container: { opacity: (0, tokens_1.tok)(t, 'opacity-pressed') } },
+        fullWidth: { container: { alignSelf: 'stretch' } },
+    };
+    const v = variantStyles(t)[variant];
+    const s = sizeStyles(t)[size];
+    return {
+        container: (0, tokens_1.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: (0, tokens_1.merge)(baseLabel, s.label, v.label, isDisabled && disabledStyles.label),
+        icon: (0, tokens_1.merge)(s.icon, {
+            color: (isDisabled
+                ? disabledStyles.label.color
+                : v.label.color),
+        }),
+        focusRing: (0, tokens_1.merge)(opts.focusVisible ? focusRing : undefined),
+    };
+};
+exports.getButtonParts = getButtonParts;

package/dist/cjs/styles/cards.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCardParts = void 0;
+// styles/cards.ts
+const tokens_1 = require("../types/tokens");
+const variantStyles = (t) => ({
+    default: {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            shadow: (0, tokens_1.tok)(t, 'shadow-level-1'),
+        },
+    },
+    elevated: {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            shadow: (0, tokens_1.tok)(t, 'shadow-level-2'),
+        },
+    },
+    outlined: {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-strong'),
+            shadow: 'none',
+        },
+    },
+    subtle: {
+        container: {
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface-alt'),
+            borderColor: (0, tokens_1.tok)(t, 'color-border-subtle'),
+            shadow: 'none',
+        },
+    },
+});
+const getCardParts = (t, opts = {}) => {
+    const variant = opts.variant ?? 'default';
+    const v = variantStyles(t)[variant];
+    const baseContainer = {
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        borderRadius: (0, tokens_1.tok)(t, 'radius-3'),
+        padding: (0, tokens_1.tok)(t, 'space-4'),
+    };
+    const hover = { shadow: (0, tokens_1.tok)(t, 'shadow-level-3') };
+    const pressed = {
+        opacity: (0, tokens_1.tok)(t, 'opacity-pressed'),
+        shadow: (0, tokens_1.tok)(t, 'shadow-level-2'),
+    };
+    return {
+        container: (0, tokens_1.merge)(baseContainer, v.container, opts.hovered && hover, opts.pressed && pressed),
+        header: { marginBottom: (0, tokens_1.tok)(t, 'space-3') },
+        body: {},
+        footer: { marginTop: (0, tokens_1.tok)(t, 'space-3') },
+        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-4'),
+            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-3'),
+            fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+            lineHeight: (0, tokens_1.tok)(t, 'typography-line-height-default'),
+        },
+    };
+};
+exports.getCardParts = getCardParts;

package/dist/cjs/styles/checkboxes.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCheckboxParts = void 0;
+// styles/checkboxes.ts
+const tokens_1 = require("../types/tokens");
+const getCheckboxParts = (t, s = {}) => {
+    const isOn = Boolean(s.checked || s.indeterminate);
+    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 boxBase = {
+        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-2'),
+        borderWidth: (0, tokens_1.tok)(t, 'border-width-default'),
+        backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+        borderColor: (0, tokens_1.tok)(t, 'color-border-strong'),
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+    const boxOn = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-accent'),
+        borderColor: (0, tokens_1.tok)(t, 'color-accent'),
+    };
+    const boxDisabled = {
+        backgroundColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+        borderColor: (0, tokens_1.tok)(t, 'color-state-disabled-bg'),
+    };
+    const checkmark = {
+        color: isDisabled
+            ? (0, tokens_1.tok)(t, 'color-state-disabled-fg')
+            : (0, tokens_1.tok)(t, 'color-accent-fg'),
+        width: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+        height: (0, tokens_1.tok)(t, 'typography-font-size-4'),
+    };
+    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'),
+        fontWeight: (0, tokens_1.tok)(t, 'typography-font-weight-regular'),
+    };
+    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),
+        box: (0, tokens_1.merge)(boxBase, isOn && boxOn, isDisabled && boxDisabled),
+        checkmark: (0, tokens_1.merge)(checkmark),
+        label: (0, tokens_1.merge)(label),
+        focusRing: (0, tokens_1.merge)(s.focusVisible ? focusRing : undefined),
+    };
+};
+exports.getCheckboxParts = getCheckboxParts;