@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/tokens/__tests__/colors.test.js

@@ -0,0 +1,152 @@
+import { describe, it, expect } from 'vitest';
+import { backgroundColors, textColors, brandColors, accentColors, strokeColors, uiColors, sidebarColors, lightColors, darkColors, colors, legacyAliases } from '../colors';
+describe('Background Colors', () => {
+    it('has light theme background colors', () => {
+        expect(backgroundColors.light['bg-primary']).toBe('0 0% 100%');
+        expect(backgroundColors.light['bg-secondary']).toBe('220 7% 97%');
+        expect(backgroundColors.light['bg-tertiary']).toBe('220 7% 94%');
+        expect(backgroundColors.light['bg-quaternary']).toBe('220 6% 91%');
+    });
+    it('has dark theme background colors', () => {
+        expect(backgroundColors.dark['bg-primary']).toBe('220 20% 18%');
+        expect(backgroundColors.dark['bg-secondary']).toBe('221 50% 10%');
+        expect(backgroundColors.dark['bg-tertiary']).toBe('221 50% 6%');
+        expect(backgroundColors.dark['bg-quaternary']).toBe('0 0% 0%');
+    });
+});
+describe('Text Colors', () => {
+    it('has light theme text colors', () => {
+        expect(textColors.light['text-primary']).toBe('221 50% 10%');
+        expect(textColors.light['text-secondary']).toBe('220 20% 18%');
+        expect(textColors.light['text-tertiary']).toBe('221 9% 44%');
+        expect(textColors.light['text-head']).toBe('221 9% 44%');
+    });
+    it('has dark theme text colors', () => {
+        expect(textColors.dark['text-primary']).toBe('220 7% 97%');
+        expect(textColors.dark['text-secondary']).toBe('220 7% 94%');
+        expect(textColors.dark['text-tertiary']).toBe('220 6% 91%');
+        expect(textColors.dark['text-head']).toBe('220 9% 70%');
+    });
+});
+describe('Brand Colors', () => {
+    it('has light theme brand color', () => {
+        expect(brandColors.light['brand-primary']).toBe('209 99% 50%');
+    });
+    it('has dark theme brand color', () => {
+        expect(brandColors.dark['brand-primary']).toBe('220 89% 63%');
+    });
+});
+describe('Accent Colors', () => {
+    it('has light theme accent colors', () => {
+        expect(accentColors.light['accent-warning']).toBe('28 100% 59%');
+        expect(accentColors.light['accent-danger']).toBe('0 100% 70%');
+        expect(accentColors.light['accent-success']).toBe('131 77% 35%');
+    });
+    it('has dark theme accent colors', () => {
+        expect(accentColors.dark['accent-warning']).toBe('30 100% 70%');
+        expect(accentColors.dark['accent-danger']).toBe('0 100% 70%');
+        expect(accentColors.dark['accent-success']).toBe('142 71% 45%');
+    });
+});
+describe('Stroke Colors', () => {
+    it('has light theme stroke colors', () => {
+        expect(strokeColors.light['stroke-primary']).toBe('216 6% 84%');
+        expect(strokeColors.light['stroke-secondary']).toBe('216 6% 84%');
+        expect(strokeColors.light['border']).toBe('220 13% 91%');
+    });
+    it('has dark theme stroke colors', () => {
+        expect(strokeColors.dark['stroke-primary']).toBe('220 20% 28%');
+        expect(strokeColors.dark['stroke-secondary']).toBe('220 20% 28%');
+        expect(strokeColors.dark['border']).toBe('215 27.9% 16.9%');
+    });
+});
+describe('UI Colors', () => {
+    it('has light theme UI colors', () => {
+        expect(uiColors.light['card']).toBeDefined();
+        expect(uiColors.light['popover']).toBeDefined();
+        expect(uiColors.light['muted']).toBeDefined();
+        expect(uiColors.light['hover-primary']).toBeDefined();
+    });
+    it('has dark theme UI colors', () => {
+        expect(uiColors.dark['card']).toBeDefined();
+        expect(uiColors.dark['popover']).toBeDefined();
+        expect(uiColors.dark['muted']).toBeDefined();
+        expect(uiColors.dark['hover-primary']).toBeDefined();
+    });
+});
+describe('Sidebar Colors', () => {
+    it('has light theme sidebar colors', () => {
+        expect(sidebarColors.light['sidebar-background']).toBeDefined();
+        expect(sidebarColors.light['sidebar-foreground']).toBeDefined();
+        expect(sidebarColors.light['sidebar-border']).toBeDefined();
+        expect(sidebarColors.light['sidebar-primary']).toBeDefined();
+        expect(sidebarColors.light['sidebar-primary-foreground']).toBeDefined();
+    });
+    it('has dark theme sidebar colors', () => {
+        expect(sidebarColors.dark['sidebar-background']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-foreground']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-border']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-primary']).toBeDefined();
+        expect(sidebarColors.dark['sidebar-primary-foreground']).toBeDefined();
+    });
+});
+describe('Combined Color Objects', () => {
+    it('lightColors contains all color categories', () => {
+        // Background
+        expect(lightColors['bg-primary']).toBeDefined();
+        // Text
+        expect(lightColors['text-primary']).toBeDefined();
+        // Brand
+        expect(lightColors['brand-primary']).toBeDefined();
+        // Accent
+        expect(lightColors['accent-warning']).toBeDefined();
+        // Stroke
+        expect(lightColors['stroke-primary']).toBeDefined();
+        // UI
+        expect(lightColors['card']).toBeDefined();
+        // Sidebar
+        expect(lightColors['sidebar-background']).toBeDefined();
+    });
+    it('darkColors contains all color categories', () => {
+        expect(darkColors['bg-primary']).toBeDefined();
+        expect(darkColors['text-primary']).toBeDefined();
+        expect(darkColors['brand-primary']).toBeDefined();
+        expect(darkColors['accent-warning']).toBeDefined();
+        expect(darkColors['stroke-primary']).toBeDefined();
+        expect(darkColors['card']).toBeDefined();
+        expect(darkColors['sidebar-background']).toBeDefined();
+    });
+    it('colors object has light and dark themes', () => {
+        expect(colors.light).toEqual(lightColors);
+        expect(colors.dark).toEqual(darkColors);
+    });
+    it('colors object has legacy aliases', () => {
+        expect(colors.aliases).toEqual(legacyAliases);
+    });
+});
+describe('Legacy Aliases', () => {
+    it('maps PascalCase to kebab-case', () => {
+        expect(legacyAliases['BG-Primary']).toBe('bg-primary');
+        expect(legacyAliases['BG-Secondary']).toBe('bg-secondary');
+        expect(legacyAliases['Text-Primary']).toBe('text-primary');
+        expect(legacyAliases['Brand-Primary']).toBe('brand-primary');
+        expect(legacyAliases['Accent-Warning']).toBe('accent-warning');
+        expect(legacyAliases['Accent-Danger']).toBe('accent-danger');
+        expect(legacyAliases['Accent-Success']).toBe('accent-success');
+        expect(legacyAliases['Stroke-Primary']).toBe('stroke-primary');
+    });
+    it('has typo-preserved legacy alias for tertiary', () => {
+        // Note: Original has typo "Tartiary"
+        expect(legacyAliases['Text-Tartiary']).toBe('text-tertiary');
+    });
+});
+describe('Color Value Format', () => {
+    it('uses HSL channel format (H S% L%)', () => {
+        // All values should be in "H S% L%" format for Tailwind compatibility
+        const hslPattern = /^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/;
+        expect(lightColors['bg-primary']).toMatch(hslPattern);
+        expect(lightColors['text-primary']).toMatch(hslPattern);
+        expect(darkColors['bg-primary']).toMatch(hslPattern);
+        expect(darkColors['text-primary']).toMatch(hslPattern);
+    });
+});

package/dist/tokens/__tests__/radius.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radius.test.d.ts.map

package/dist/tokens/__tests__/radius.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/radius.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/radius.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import { borderRadius, radiusAliases } from '../radius';
+describe('Border Radius Tokens', () => {
+    it('has none radius', () => {
+        expect(borderRadius.none).toBe('0px');
+    });
+    it('has sm radius', () => {
+        expect(borderRadius.sm).toBe('0.125rem');
+    });
+    it('has default radius', () => {
+        expect(borderRadius.DEFAULT).toBe('0.25rem');
+    });
+    it('has md radius', () => {
+        expect(borderRadius.md).toBe('0.375rem');
+    });
+    it('has lg radius', () => {
+        expect(borderRadius.lg).toBe('0.5rem');
+    });
+    it('has xl radius', () => {
+        expect(borderRadius.xl).toBe('0.75rem');
+    });
+    it('has 2xl radius', () => {
+        expect(borderRadius['2xl']).toBe('1rem');
+    });
+    it('has 3xl radius', () => {
+        expect(borderRadius['3xl']).toBe('1.5rem');
+    });
+    it('has full radius for circles', () => {
+        expect(borderRadius.full).toBe('9999px');
+    });
+});
+describe('Radius Scale Order', () => {
+    it('radii increase in size', () => {
+        const sizes = [
+            borderRadius.none,
+            borderRadius.sm,
+            borderRadius.DEFAULT,
+            borderRadius.md,
+            borderRadius.lg,
+            borderRadius.xl,
+            borderRadius['2xl'],
+            borderRadius['3xl'],
+        ];
+        // Parse rem values and check they increase
+        for (let i = 0; i < sizes.length - 1; i++) {
+            const current = parseFloat(sizes[i]);
+            const next = parseFloat(sizes[i + 1]);
+            expect(next).toBeGreaterThan(current);
+        }
+    });
+});
+describe('Radius Aliases', () => {
+    it('button uses lg radius', () => {
+        expect(radiusAliases.button).toBe(borderRadius.lg);
+        expect(radiusAliases.button).toBe('0.5rem');
+    });
+    it('input uses lg radius', () => {
+        expect(radiusAliases.input).toBe(borderRadius.lg);
+        expect(radiusAliases.input).toBe('0.5rem');
+    });
+    it('card uses xl radius', () => {
+        expect(radiusAliases.card).toBe(borderRadius.xl);
+        expect(radiusAliases.card).toBe('0.75rem');
+    });
+    it('modal uses 2xl radius', () => {
+        expect(radiusAliases.modal).toBe(borderRadius['2xl']);
+        expect(radiusAliases.modal).toBe('1rem');
+    });
+    it('badge uses full radius', () => {
+        expect(radiusAliases.badge).toBe(borderRadius.full);
+        expect(radiusAliases.badge).toBe('9999px');
+    });
+    it('avatar uses full radius', () => {
+        expect(radiusAliases.avatar).toBe(borderRadius.full);
+        expect(radiusAliases.avatar).toBe('9999px');
+    });
+    it('dropdown uses lg radius', () => {
+        expect(radiusAliases.dropdown).toBe(borderRadius.lg);
+    });
+    it('tooltip uses md radius', () => {
+        expect(radiusAliases.tooltip).toBe(borderRadius.md);
+        expect(radiusAliases.tooltip).toBe('0.375rem');
+    });
+});
+describe('Radius Value Formats', () => {
+    it('all rem values are valid', () => {
+        const remPattern = /^\d+(\.\d+)?rem$/;
+        const pxPattern = /^\d+px$/;
+        Object.entries(borderRadius).forEach(([key, value]) => {
+            expect(value.match(remPattern) || value.match(pxPattern)).toBeTruthy();
+        });
+    });
+    it('none is 0px', () => {
+        expect(borderRadius.none).toMatch(/^0px$/);
+    });
+    it('full uses high px value for pill shape', () => {
+        expect(parseInt(borderRadius.full)).toBeGreaterThan(1000);
+    });
+});
+describe('Alias Semantic Meaning', () => {
+    it('interactive elements share same radius', () => {
+        expect(radiusAliases.button).toBe(radiusAliases.input);
+        expect(radiusAliases.button).toBe(radiusAliases.dropdown);
+    });
+    it('circular elements share same radius', () => {
+        expect(radiusAliases.badge).toBe(radiusAliases.avatar);
+    });
+    it('card has larger radius than buttons', () => {
+        const cardRadius = parseFloat(radiusAliases.card);
+        const buttonRadius = parseFloat(radiusAliases.button);
+        expect(cardRadius).toBeGreaterThan(buttonRadius);
+    });
+    it('modal has largest container radius', () => {
+        const modalRadius = parseFloat(radiusAliases.modal);
+        const cardRadius = parseFloat(radiusAliases.card);
+        expect(modalRadius).toBeGreaterThan(cardRadius);
+    });
+});

package/dist/tokens/__tests__/shadows.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=shadows.test.d.ts.map

package/dist/tokens/__tests__/shadows.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/shadows.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/shadows.test.js

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest';
+import { boxShadow, customShadows, shadows } from '../shadows';
+describe('Box Shadow Tokens', () => {
+    it('has sm shadow', () => {
+        expect(boxShadow.sm).toContain('0 1px 2px');
+        expect(boxShadow.sm).toContain('rgb(0 0 0');
+    });
+    it('has DEFAULT shadow', () => {
+        expect(boxShadow.DEFAULT).toContain('0 1px 3px');
+    });
+    it('has md shadow', () => {
+        expect(boxShadow.md).toContain('0 4px 6px');
+    });
+    it('has lg shadow', () => {
+        expect(boxShadow.lg).toContain('0 10px 15px');
+    });
+    it('has xl shadow', () => {
+        expect(boxShadow.xl).toContain('0 20px 25px');
+    });
+    it('has 2xl shadow', () => {
+        expect(boxShadow['2xl']).toContain('0 25px 50px');
+    });
+    it('has inner shadow (inset)', () => {
+        expect(boxShadow.inner).toContain('inset');
+        expect(boxShadow.inner).toContain('0 2px 4px');
+    });
+    it('has none shadow', () => {
+        expect(boxShadow.none).toBe('none');
+    });
+});
+describe('Shadow Scale Progression', () => {
+    it('shadows increase in blur radius', () => {
+        // Extract first blur value from each shadow
+        const getFirstBlurRadius = (shadow) => {
+            const match = shadow.match(/(\d+)px/);
+            return match ? parseInt(match[1]) : 0;
+        };
+        const smBlur = getFirstBlurRadius(boxShadow.sm);
+        const defaultBlur = getFirstBlurRadius(boxShadow.DEFAULT);
+        const mdBlur = getFirstBlurRadius(boxShadow.md);
+        const lgBlur = getFirstBlurRadius(boxShadow.lg);
+        const xlBlur = getFirstBlurRadius(boxShadow.xl);
+        expect(defaultBlur).toBeGreaterThanOrEqual(smBlur);
+        expect(mdBlur).toBeGreaterThanOrEqual(defaultBlur);
+        expect(lgBlur).toBeGreaterThan(mdBlur);
+        expect(xlBlur).toBeGreaterThan(lgBlur);
+    });
+});
+describe('Custom Shadows', () => {
+    it('has modal shadow', () => {
+        expect(customShadows.modal).toContain('0 0 31px');
+    });
+    it('has dropdown shadow', () => {
+        expect(customShadows.dropdown).toBeDefined();
+        expect(customShadows.dropdown).toContain('0 4px 6px');
+    });
+    it('has cardHover shadow', () => {
+        expect(customShadows.cardHover).toBeDefined();
+        expect(customShadows.cardHover).toContain('0 10px 15px');
+    });
+    it('has buttonHover shadow', () => {
+        expect(customShadows.buttonHover).toBeDefined();
+    });
+    it('has toast shadow', () => {
+        expect(customShadows.toast).toBeDefined();
+    });
+    it('has tooltip shadow', () => {
+        expect(customShadows.tooltip).toBeDefined();
+    });
+    it('has focusRing shadow with blue color', () => {
+        expect(customShadows.focusRing).toContain('0 0 0 3px');
+        expect(customShadows.focusRing).toContain('rgb(59 130 246');
+    });
+    it('has focusRingDanger shadow with red color', () => {
+        expect(customShadows.focusRingDanger).toContain('0 0 0 3px');
+        expect(customShadows.focusRingDanger).toContain('rgb(239 68 68');
+    });
+});
+describe('Combined Shadows Object', () => {
+    it('contains all boxShadow tokens', () => {
+        expect(shadows.sm).toBe(boxShadow.sm);
+        expect(shadows.DEFAULT).toBe(boxShadow.DEFAULT);
+        expect(shadows.md).toBe(boxShadow.md);
+        expect(shadows.lg).toBe(boxShadow.lg);
+        expect(shadows.none).toBe(boxShadow.none);
+    });
+    it('contains all customShadow tokens', () => {
+        expect(shadows.modal).toBe(customShadows.modal);
+        expect(shadows.dropdown).toBe(customShadows.dropdown);
+        expect(shadows.focusRing).toBe(customShadows.focusRing);
+    });
+});
+describe('Shadow Value Format', () => {
+    it('all shadows use rgb() color format', () => {
+        const allShadows = Object.values(boxShadow).filter(v => v !== 'none');
+        allShadows.forEach(shadow => {
+            expect(shadow).toContain('rgb(');
+        });
+    });
+    it('custom shadows use rgb() color format', () => {
+        Object.values(customShadows).forEach(shadow => {
+            expect(shadow).toContain('rgb(');
+        });
+    });
+});

package/dist/tokens/__tests__/spacing.test.js

@@ -50,17 +50,20 @@ describe('spacing tokens', () => {
     describe('gapScale', () => {
         describe('semantic', () => {
             it('provides semantic gap names with Tailwind classes', () => {
-                expect(gapScale.semantic.tight).toBe('gap-1');
+                expect(gapScale.semantic.minimal).toBe('gap-1');
                 expect(gapScale.semantic.compact).toBe('gap-1.5');
                 expect(gapScale.semantic.item).toBe('gap-2');
                 expect(gapScale.semantic.group).toBe('gap-3');
+                expect(gapScale.semantic.tight).toBe('gap-4');
                 expect(gapScale.semantic.content).toBe('gap-4');
+                expect(gapScale.semantic.standard).toBe('gap-6');
                 expect(gapScale.semantic.section).toBe('gap-6');
+                expect(gapScale.semantic.spacious).toBe('gap-8');
                 expect(gapScale.semantic.layout).toBe('gap-8');
                 expect(gapScale.semantic.page).toBe('gap-12');
             });
-            it('has 8 semantic gap values', () => {
-                expect(Object.keys(gapScale.semantic)).toHaveLength(8);
+            it('has 11 semantic gap values', () => {
+                expect(Object.keys(gapScale.semantic)).toHaveLength(11);
             });
         });
         describe('numeric', () => {
@@ -120,8 +123,8 @@ describe('spacing tokens', () => {
             expect(gapMap.standard).toBe('gap-6');
             expect(gapMap.spacious).toBe('gap-8');
         });
-        it('allows grid values to override semantic values with same key', () => {
-            // grid.tight (gap-4) should override semantic.tight (gap-1)
+        it('grid and semantic values with same key have same value', () => {
+            // Both semantic.tight and grid-tight map to gap-4
             expect(gapMap.tight).toBe('gap-4');
         });
         it('contains all expected keys', () => {
@@ -130,10 +133,10 @@ describe('spacing tokens', () => {
                 '0', '1', '1.5', '2', '3', '4', '6', '8', '12', '16',
                 // legacy
                 'none', 'xs', 'sm', 'md', 'lg', 'xl',
-                // semantic (excluding 'tight' which is overwritten by grid)
-                'compact', 'item', 'group', 'content', 'section', 'layout', 'page',
+                // semantic
+                'minimal', 'compact', 'item', 'group', 'tight', 'content', 'standard', 'section', 'spacious', 'layout', 'page',
                 // grid
-                'tight', 'standard', 'spacious',
+                'grid-tight', 'grid-standard', 'grid-spacious',
             ];
             for (const key of expectedKeys) {
                 expect(gapMap).toHaveProperty(key);

package/dist/tokens/__tests__/typography.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=typography.test.d.ts.map

package/dist/tokens/__tests__/typography.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/typography.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/typography.test.js

@@ -0,0 +1,156 @@
+import { describe, it, expect } from 'vitest';
+import { typography } from '../typography';
+describe('Typography Headings', () => {
+    it('h1 has 2xl size and semibold weight', () => {
+        expect(typography.h1).toContain('text-2xl');
+        expect(typography.h1).toContain('font-semibold');
+        expect(typography.h1).toContain('text-gray-900');
+        expect(typography.h1).toContain('dark:text-white');
+    });
+    it('h2 has xl size and semibold weight', () => {
+        expect(typography.h2).toContain('text-xl');
+        expect(typography.h2).toContain('font-semibold');
+    });
+    it('h3 has lg size and semibold weight', () => {
+        expect(typography.h3).toContain('text-lg');
+        expect(typography.h3).toContain('font-semibold');
+    });
+    it('h4 has base size and semibold weight', () => {
+        expect(typography.h4).toContain('text-base');
+        expect(typography.h4).toContain('font-semibold');
+    });
+    it('h5 has sm size and semibold weight', () => {
+        expect(typography.h5).toContain('text-sm');
+        expect(typography.h5).toContain('font-semibold');
+    });
+    it('h6 has xs size and semibold weight', () => {
+        expect(typography.h6).toContain('text-xs');
+        expect(typography.h6).toContain('font-semibold');
+    });
+});
+describe('Typography Body Text', () => {
+    it('body has base size and relaxed leading', () => {
+        expect(typography.body).toContain('text-base');
+        expect(typography.body).toContain('leading-relaxed');
+        expect(typography.body).toContain('text-gray-900');
+    });
+    it('bodyMuted has muted gray color', () => {
+        expect(typography.bodyMuted).toContain('text-gray-500');
+        expect(typography.bodyMuted).toContain('dark:text-gray-400');
+    });
+    it('sm has sm size', () => {
+        expect(typography.sm).toContain('text-sm');
+        expect(typography.sm).toContain('text-gray-900');
+    });
+    it('smMuted has sm size and muted color', () => {
+        expect(typography.smMuted).toContain('text-sm');
+        expect(typography.smMuted).toContain('text-gray-500');
+    });
+    it('xs has xs size', () => {
+        expect(typography.xs).toContain('text-xs');
+        expect(typography.xs).toContain('text-gray-900');
+    });
+    it('xsMuted has xs size and muted color', () => {
+        expect(typography.xsMuted).toContain('text-xs');
+        expect(typography.xsMuted).toContain('text-gray-500');
+    });
+});
+describe('Typography Muted Colors', () => {
+    it('textMuted has muted gray color', () => {
+        expect(typography.textMuted).toContain('text-gray-500');
+        expect(typography.textMuted).toContain('dark:text-gray-400');
+    });
+    it('iconMuted matches textMuted', () => {
+        expect(typography.iconMuted).toBe(typography.textMuted);
+    });
+});
+describe('Typography Labels', () => {
+    it('label has sm size and medium weight', () => {
+        expect(typography.label).toContain('text-sm');
+        expect(typography.label).toContain('font-medium');
+        expect(typography.label).toContain('text-gray-900');
+    });
+    it('labelSpaced includes bottom margin', () => {
+        expect(typography.labelSpaced).toContain('mb-2');
+        expect(typography.labelSpaced).toContain('text-sm');
+        expect(typography.labelSpaced).toContain('font-medium');
+    });
+    it('helper has muted color', () => {
+        expect(typography.helper).toContain('text-sm');
+        expect(typography.helper).toContain('text-gray-500');
+    });
+    it('placeholder has lighter muted color', () => {
+        expect(typography.placeholder).toContain('text-sm');
+        expect(typography.placeholder).toContain('text-gray-400');
+    });
+});
+describe('Typography Status Text', () => {
+    it('error has red color', () => {
+        expect(typography.error).toContain('text-sm');
+        expect(typography.error).toContain('text-red-500');
+        expect(typography.error).toContain('dark:text-red-400');
+    });
+    it('success has green color', () => {
+        expect(typography.success).toContain('text-sm');
+        expect(typography.success).toContain('text-green-600');
+    });
+    it('warning has yellow color', () => {
+        expect(typography.warning).toContain('text-sm');
+        expect(typography.warning).toContain('text-yellow-600');
+    });
+    it('info has blue color', () => {
+        expect(typography.info).toContain('text-sm');
+        expect(typography.info).toContain('text-blue-600');
+    });
+});
+describe('Typography Links', () => {
+    it('link has blue color and hover underline', () => {
+        expect(typography.link).toContain('text-blue-700');
+        expect(typography.link).toContain('hover:underline');
+    });
+    it('linkMuted has gray color and hover state', () => {
+        expect(typography.linkMuted).toContain('text-gray-500');
+        expect(typography.linkMuted).toContain('hover:text-gray-700');
+    });
+});
+describe('Typography Special Cases', () => {
+    it('price has lg size and semibold weight', () => {
+        expect(typography.price).toContain('text-lg');
+        expect(typography.price).toContain('font-semibold');
+    });
+    it('priceLg has 2xl size and bold weight', () => {
+        expect(typography.priceLg).toContain('text-2xl');
+        expect(typography.priceLg).toContain('font-bold');
+    });
+    it('badge has xs size and medium weight', () => {
+        expect(typography.badge).toContain('text-xs');
+        expect(typography.badge).toContain('font-medium');
+    });
+    it('tableHeader has uppercase tracking', () => {
+        expect(typography.tableHeader).toContain('text-xs');
+        expect(typography.tableHeader).toContain('uppercase');
+        expect(typography.tableHeader).toContain('tracking-wider');
+    });
+    it('code has mono font', () => {
+        expect(typography.code).toContain('font-mono');
+        expect(typography.code).toContain('text-sm');
+    });
+    it('codeMuted has mono font and muted color', () => {
+        expect(typography.codeMuted).toContain('font-mono');
+        expect(typography.codeMuted).toContain('text-gray-500');
+    });
+});
+describe('Typography Token Type', () => {
+    it('all tokens are strings', () => {
+        const tokens = ['h1', 'h2', 'body', 'label', 'error', 'link', 'code'];
+        tokens.forEach(token => {
+            expect(typeof typography[token]).toBe('string');
+        });
+    });
+    it('all tokens have dark mode variants where applicable', () => {
+        const tokensWithDarkMode = ['h1', 'body', 'sm', 'label', 'error'];
+        tokensWithDarkMode.forEach(token => {
+            expect(typography[token]).toContain('dark:');
+        });
+    });
+});

package/dist/tokens/__tests__/z-index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=z-index.test.d.ts.map

package/dist/tokens/__tests__/z-index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/z-index.test.ts"],"names":[],"mappings":""}