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

package/dist/cjs/styles/toasts.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getToastViewportStyle = exports.getToastParts = void 0;
+// styles/toasts.ts
+const tokens_1 = require("../types/tokens");
+const variantMap = (t) => ({
+    info: {
+        border: (0, tokens_1.tok)(t, 'color-status-info'),
+        icon: (0, tokens_1.tok)(t, 'color-status-info'),
+    },
+    success: {
+        border: (0, tokens_1.tok)(t, 'color-status-success'),
+        icon: (0, tokens_1.tok)(t, 'color-status-success'),
+    },
+    warning: {
+        border: (0, tokens_1.tok)(t, 'color-status-warning'),
+        icon: (0, tokens_1.tok)(t, 'color-status-warning'),
+    },
+    error: {
+        border: (0, tokens_1.tok)(t, 'color-status-error'),
+        icon: (0, tokens_1.tok)(t, 'color-status-error'),
+    },
+});
+const getToastParts = (t, variant = 'info') => {
+    const m = (0, tokens_1.motion)(t, 'motion-emphasis-enter');
+    const v = variantMap(t)[variant];
+    return {
+        container: {
+            zIndex: (0, tokens_1.tok)(t, 'z-index-layer-toast'),
+            backgroundColor: (0, tokens_1.tok)(t, 'color-surface'),
+            borderColor: v.border,
+            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-3'),
+            paddingVertical: (0, tokens_1.tok)(t, 'space-3'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-4'),
+            flexDirection: 'row',
+            gap: (0, tokens_1.tok)(t, 'space-3'),
+            alignItems: 'flex-start',
+            // semântico (runtime anima)
+            animationDurationMs: m.durationMs,
+            animationEasing: m.easing,
+        },
+        icon: {
+            width: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+            height: (0, tokens_1.tok)(t, 'typography-font-size-5'),
+            color: v.icon,
+        },
+        content: { flex: 1, gap: (0, tokens_1.tok)(t, 'space-1') },
+        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-default'),
+        },
+        message: {
+            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'),
+        },
+        closeButton: {
+            minHeight: (0, tokens_1.tok)(t, 'tap-target-min'),
+            minWidth: (0, tokens_1.tok)(t, 'tap-target-min'),
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: (0, tokens_1.tok)(t, 'radius-full'),
+        },
+    };
+};
+exports.getToastParts = getToastParts;
+// opcional: estilos para “stack”/viewport de toasts
+const getToastViewportStyle = (t) => ({
+    position: 'absolute',
+    right: (0, tokens_1.tok)(t, 'space-4'),
+    bottom: (0, tokens_1.tok)(t, 'space-4'),
+    gap: (0, tokens_1.tok)(t, 'space-2'),
+    zIndex: (0, tokens_1.tok)(t, 'z-index-layer-toast'),
+});
+exports.getToastViewportStyle = getToastViewportStyle;

package/dist/cjs/styles/tooltips.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTooltipParts = void 0;
+// styles/tooltips.ts
+const tokens_1 = require("../types/tokens");
+const getTooltipParts = (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-fg-default'), // inverted tooltip
+            borderColor: (0, tokens_1.tok)(t, 'color-fg-default'),
+            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'),
+            paddingHorizontal: (0, tokens_1.tok)(t, 'space-3'),
+            maxWidth: 280,
+            animationDurationMs: m.durationMs,
+            animationEasing: m.easing,
+        },
+        arrow: {
+            width: (0, tokens_1.tok)(t, 'space-2'),
+            height: (0, tokens_1.tok)(t, 'space-2'),
+            backgroundColor: (0, tokens_1.tok)(t, 'color-fg-default'),
+            // semântico: o runtime roda 45º e posiciona
+            transform: 'rotate(45deg)',
+        },
+        title: {
+            color: (0, tokens_1.tok)(t, 'color-fg-on-inverted'),
+            fontFamily: (0, tokens_1.tok)(t, 'typography-font-family-heading'),
+            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'),
+            marginBottom: (0, tokens_1.tok)(t, 'space-1'),
+        },
+        body: {
+            color: (0, tokens_1.tok)(t, 'color-fg-on-inverted'),
+            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'),
+        },
+    };
+};
+exports.getTooltipParts = getTooltipParts;

package/dist/cjs/types/index.js

@@ -0,0 +1,18 @@
+"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("./states"), exports);
+__exportStar(require("./tokens"), exports);

package/dist/cjs/types/states.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isInvalid = exports.isDisabled = void 0;
+// Helpers pequenos (opcionais)
+const isDisabled = (s) => Boolean(s?.disabled || s?.loading);
+exports.isDisabled = isDisabled;
+const isInvalid = (s) => Boolean(s?.error || s?.invalid);
+exports.isInvalid = isInvalid;

package/dist/cjs/types/tokens.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.motion = exports.merge = exports.tok = void 0;
+const styleguide_1 = require("@react-xp/styleguide");
+const tok = (t, key) => t[key];
+exports.tok = tok;
+const merge = (...styles) => Object.assign({}, ...styles.filter(Boolean));
+exports.merge = merge;
+const motion = (t, preset) => {
+    const p = styleguide_1.styleguideMotionPreset[preset];
+    const durationToken = p.duration;
+    const easingToken = p.easing;
+    return {
+        durationMs: (0, exports.tok)(t, durationToken),
+        easing: (0, exports.tok)(t, easingToken),
+    };
+};
+exports.motion = motion;

package/dist/esm/helpers/a11y.js

@@ -0,0 +1,169 @@
+// styles/a11y.checks.ts
+// Checker WCAG AA para pares de tokens (bg/fg)
+// - Útil para CI: garante contraste mínimo no tema (multi-tenant).
+// - Sem deps externas.
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+const parseHex = (hex) => {
+    // #RGB, #RRGGBB
+    const h = hex.trim();
+    if (!h.startsWith('#'))
+        return null;
+    const raw = h.slice(1);
+    if (raw.length === 3 && raw[0] && raw[1] && raw[2]) {
+        const r = Number.parseInt(raw[0] + raw[0], 16);
+        const g = Number.parseInt(raw[1] + raw[1], 16);
+        const b = Number.parseInt(raw[2] + raw[2], 16);
+        return { r, g, b, a: 1 };
+    }
+    if (raw.length === 6) {
+        const r = Number.parseInt(raw.slice(0, 2), 16);
+        const g = Number.parseInt(raw.slice(2, 4), 16);
+        const b = Number.parseInt(raw.slice(4, 6), 16);
+        return { r, g, b, a: 1 };
+    }
+    return null;
+};
+const parseRgbLike = (input) => {
+    // rgb(0,0,0) / rgba(0,0,0,0.5)
+    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: clamp01(a) };
+};
+const parseColor = (input) => {
+    if (typeof input !== 'string')
+        return null;
+    // Nota: se usares tokens tipo "var(--x)" isto não consegue resolver.
+    // Ideal: no tema final, tokens sejam cores concretas (#hex / rgb(a)).
+    return parseHex(input) ?? parseRgbLike(input);
+};
+const srgbToLinear = (c) => {
+    const v = c / 255;
+    return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+};
+const relativeLuminance = (rgb) => {
+    const r = srgbToLinear(rgb.r);
+    const g = srgbToLinear(rgb.g);
+    const b = srgbToLinear(rgb.b);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const contrastRatio = (a, b) => {
+    // WCAG formula (ignora alpha — assume cores finais já resolvidas)
+    const L1 = relativeLuminance(a);
+    const L2 = relativeLuminance(b);
+    const light = Math.max(L1, L2);
+    const dark = Math.min(L1, L2);
+    return (light + 0.05) / (dark + 0.05);
+};
+const threshold = (level, size) => {
+    if (level === 'AAA')
+        return size === 'large' ? 4.5 : 7;
+    return size === 'large' ? 3 : 4.5;
+};
+export const defaultContrastRules = () => [
+    // Base surfaces
+    {
+        name: 'Default BG / Default FG',
+        bg: 'color-bg-default',
+        fg: 'color-fg-default',
+    },
+    { name: 'Surface / Default FG', bg: 'color-surface', fg: 'color-fg-default' },
+    {
+        name: 'Surface-alt / Default FG',
+        bg: 'color-surface-alt',
+        fg: 'color-fg-default',
+    },
+    {
+        name: 'Default BG / Muted FG',
+        bg: 'color-bg-default',
+        fg: 'color-fg-muted',
+    },
+    // Actions
+    {
+        name: 'Primary Action',
+        bg: 'color-action-primary',
+        fg: 'color-action-primary-fg',
+    },
+    {
+        name: 'Secondary Action',
+        bg: 'color-action-secondary',
+        fg: 'color-action-secondary-fg',
+    },
+    { name: 'Accent', bg: 'color-accent', fg: 'color-accent-fg' },
+    // Status
+    {
+        name: 'Success',
+        bg: 'color-status-success',
+        fg: 'color-status-success-fg',
+    },
+    {
+        name: 'Warning',
+        bg: 'color-status-warning',
+        fg: 'color-status-warning-fg',
+    },
+    { name: 'Error', bg: 'color-status-error', fg: 'color-status-error-fg' },
+    { name: 'Info', bg: 'color-status-info', fg: 'color-status-info-fg' },
+    // Inputs (texto/placeholder em fundo input)
+    {
+        name: 'Input BG / Default FG',
+        bg: 'color-input-bg',
+        fg: 'color-fg-default',
+    },
+    {
+        name: 'Input BG / Placeholder',
+        bg: 'color-input-bg',
+        fg: 'color-input-placeholder',
+        textSize: 'large',
+    }, // placeholder pode ser menos exigente; ajusta se quiseres
+    // Inverted (tooltip/overlays)
+    {
+        name: 'Inverted FG on Default FG',
+        bg: 'color-fg-default',
+        fg: 'color-fg-on-inverted',
+    },
+    // Disabled
+    {
+        name: 'Disabled BG / Disabled FG',
+        bg: 'color-state-disabled-bg',
+        fg: 'color-state-disabled-fg',
+        textSize: 'large',
+    },
+];
+export const validateThemeContrast = (tokens, rules = defaultContrastRules()) => {
+    return rules.map((r) => {
+        const bgRaw = tokens[r.bg];
+        const fgRaw = tokens[r.fg];
+        const bg = parseColor(bgRaw);
+        const fg = parseColor(fgRaw);
+        // Se não conseguimos parse, falha (porque não dá para validar)
+        if (!bg || !fg) {
+            return {
+                rule: r,
+                contrastRatio: 0,
+                pass: false,
+            };
+        }
+        const ratio = contrastRatio(bg, fg);
+        const lvl = r.level ?? 'AA';
+        const size = r.textSize ?? 'normal';
+        const pass = ratio >= threshold(lvl, size);
+        return { rule: r, contrastRatio: ratio, pass };
+    });
+};
+export const getContrastFailures = (results) => results.filter((r) => !r.pass);
+export const assertThemeContrast = (tokens, rules) => {
+    const results = validateThemeContrast(tokens, rules);
+    const fails = getContrastFailures(results);
+    if (fails.length === 0)
+        return;
+    const lines = fails.map((f) => {
+        const lvl = f.rule.level ?? 'AA';
+        const size = f.rule.textSize ?? 'normal';
+        return `- ${f.rule.name}: ${String(f.rule.bg)} / ${String(f.rule.fg)} => ${f.contrastRatio.toFixed(2)} (min ${threshold(lvl, size)})`;
+    });
+    throw new Error(`Theme contrast validation failed:\n${lines.join('\n')}`);
+};

package/dist/esm/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './a11y';
+export * from './styles';

package/dist/esm/helpers/styles.js

@@ -0,0 +1,158 @@
+// 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)
+// Nota: aqui não dependemos das tuas primitives — isto é “infra” para o teu runtime/binding.
+import { tok, } from '../types';
+/**
+ * Tokens utilitários são string com px (ex.: "1px", "44px")
+ * No RN queres number (dp), no Web queres string (px) — define UMA regra no teu binder.
+ */
+export 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;
+};
+export const toPx = (value) => {
+    if (typeof value === 'string')
+        return value;
+    return `${value}px`;
+};
+export const normalizeValueForPlatform = (platform, value) => {
+    // Recomendação: RN -> number; Web -> string (se vier "px")
+    if (platform === 'native')
+        return toNumber(value);
+    return typeof value === 'string' ? value : toPx(value);
+};
+export const getBorderWidthDefault = (t, platform) => normalizeValueForPlatform(platform, tok(t, 'border-width-default'));
+export const getBorderWidthFocus = (t, platform) => normalizeValueForPlatform(platform, tok(t, 'border-width-focus'));
+export const getTapTargetMin = (t, platform) => normalizeValueForPlatform(platform, tok(t, 'tap-target-min'));
+export const getFocusRingGap = (t, platform) => normalizeValueForPlatform(platform, tok(t, 'focus-ring-gap'));
+/**
+ * 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',
+]);
+export 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;
+};
+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 };
+};
+export const resolveShadow = (t, platform, shadowToken) => {
+    const shadowStr = 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)),
+    };
+};
+export const getFocusRingSx = (t, platform, opts) => {
+    const borderRadius = opts?.borderRadius;
+    if (platform === 'web') {
+        return {
+            outlineStyle: 'solid',
+            outlineWidth: tok(t, 'border-width-focus'),
+            outlineColor: tok(t, 'color-focus-ring'),
+            outlineOffset: tok(t, 'focus-ring-gap'),
+            borderRadius,
+        };
+    }
+    // RN: recomendação prática
+    return {
+        borderWidth: tok(t, 'border-width-focus'),
+        borderColor: tok(t, 'color-focus-ring'),
+        borderRadius,
+        // um “glow” leve com base no shadow token (se quiseres)
+        ...resolveShadow(t, 'native', 'shadow-level-2'),
+    };
+};
+/**
+ * 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)
+ */
+export const getFocusWrapperSx = (t, platform, opts) => ({
+    padding: getFocusRingGap(t, platform),
+    borderRadius: opts?.borderRadius,
+});

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './helpers';
+export * from './styles';
+export * from './types';

package/dist/esm/styles/avatars.js

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

package/dist/esm/styles/badges.js

@@ -0,0 +1,55 @@
+// styles/badges.ts
+import { tok } from '../types/tokens';
+export const getBadgeParts = (t, variant = 'neutral') => {
+    const map = {
+        neutral: {
+            bg: tok(t, 'color-surface-alt'),
+            fg: tok(t, 'color-fg-default'),
+            border: tok(t, 'color-border-subtle'),
+        },
+        brand: {
+            bg: tok(t, 'color-brand'),
+            fg: tok(t, 'color-fg-on-inverted'),
+            border: tok(t, 'color-brand'),
+        },
+        success: {
+            bg: tok(t, 'color-status-success'),
+            fg: tok(t, 'color-status-success-fg'),
+            border: tok(t, 'color-status-success'),
+        },
+        warning: {
+            bg: tok(t, 'color-status-warning'),
+            fg: tok(t, 'color-status-warning-fg'),
+            border: tok(t, 'color-status-warning'),
+        },
+        error: {
+            bg: tok(t, 'color-status-error'),
+            fg: tok(t, 'color-status-error-fg'),
+            border: tok(t, 'color-status-error'),
+        },
+        info: {
+            bg: tok(t, 'color-status-info'),
+            fg: tok(t, 'color-status-info-fg'),
+            border: tok(t, 'color-status-info'),
+        },
+    };
+    const v = map[variant];
+    return {
+        container: {
+            alignSelf: 'flex-start',
+            backgroundColor: v.bg,
+            borderColor: v.border,
+            borderWidth: tok(t, 'border-width-default'),
+            borderRadius: tok(t, 'radius-full'),
+            paddingVertical: tok(t, 'space-1'),
+            paddingHorizontal: tok(t, 'space-2'),
+        },
+        label: {
+            color: v.fg,
+            fontFamily: tok(t, 'typography-font-family-base'),
+            fontSize: tok(t, 'typography-font-size-1'),
+            fontWeight: tok(t, 'typography-font-weight-medium'),
+            lineHeight: tok(t, 'typography-line-height-default'),
+        },
+    };
+};