@getmicdrop/svelte-components 5.4.1 → 5.4.2

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

@@ -0,0 +1,178 @@
+import { describe, expect, it } from 'vitest';
+import { spacing, spacingAliases, gapScale, gapMap, alignScale, justifyScale, } from '../spacing';
+describe('spacing tokens', () => {
+    describe('spacing', () => {
+        it('contains all standard Tailwind spacing values', () => {
+            expect(spacing['0']).toBe('0px');
+            expect(spacing['1']).toBe('0.25rem');
+            expect(spacing['2']).toBe('0.5rem');
+            expect(spacing['4']).toBe('1rem');
+            expect(spacing['8']).toBe('2rem');
+            expect(spacing['16']).toBe('4rem');
+        });
+        it('includes px value', () => {
+            expect(spacing['px']).toBe('1px');
+        });
+        it('includes fractional values', () => {
+            expect(spacing['0.5']).toBe('0.125rem');
+            expect(spacing['1.5']).toBe('0.375rem');
+            expect(spacing['2.5']).toBe('0.625rem');
+            expect(spacing['3.5']).toBe('0.875rem');
+        });
+        it('includes large values', () => {
+            expect(spacing['48']).toBe('12rem');
+            expect(spacing['64']).toBe('16rem');
+            expect(spacing['96']).toBe('24rem');
+        });
+    });
+    describe('spacingAliases', () => {
+        it('maps semantic sizes to spacing values', () => {
+            expect(spacingAliases.xs).toBe(spacing['1']);
+            expect(spacingAliases.sm).toBe(spacing['2']);
+            expect(spacingAliases.md).toBe(spacing['4']);
+            expect(spacingAliases.lg).toBe(spacing['6']);
+            expect(spacingAliases.xl).toBe(spacing['8']);
+            expect(spacingAliases['2xl']).toBe(spacing['12']);
+            expect(spacingAliases['3xl']).toBe(spacing['16']);
+        });
+        it('includes component-specific aliases', () => {
+            expect(spacingAliases.cardPadding).toBe(spacing['4']);
+            expect(spacingAliases.modalPadding).toBe(spacing['6']);
+            expect(spacingAliases.formGap).toBe(spacing['4']);
+            expect(spacingAliases.buttonPaddingX).toBe(spacing['4']);
+            expect(spacingAliases.buttonPaddingY).toBe(spacing['2']);
+            expect(spacingAliases.inputPaddingX).toBe(spacing['3']);
+            expect(spacingAliases.inputPaddingY).toBe(spacing['2']);
+            expect(spacingAliases.tableCellPaddingX).toBe(spacing['4']);
+            expect(spacingAliases.tableCellPaddingY).toBe(spacing['3']);
+        });
+    });
+    describe('gapScale', () => {
+        describe('semantic', () => {
+            it('provides semantic gap names with Tailwind classes', () => {
+                expect(gapScale.semantic.tight).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.content).toBe('gap-4');
+                expect(gapScale.semantic.section).toBe('gap-6');
+                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);
+            });
+        });
+        describe('numeric', () => {
+            it('provides numeric gap values matching Tailwind spacing', () => {
+                expect(gapScale.numeric['0']).toBe('gap-0');
+                expect(gapScale.numeric['1']).toBe('gap-1');
+                expect(gapScale.numeric['1.5']).toBe('gap-1.5');
+                expect(gapScale.numeric['2']).toBe('gap-2');
+                expect(gapScale.numeric['3']).toBe('gap-3');
+                expect(gapScale.numeric['4']).toBe('gap-4');
+                expect(gapScale.numeric['6']).toBe('gap-6');
+                expect(gapScale.numeric['8']).toBe('gap-8');
+                expect(gapScale.numeric['12']).toBe('gap-12');
+                expect(gapScale.numeric['16']).toBe('gap-16');
+            });
+            it('has 10 numeric gap values', () => {
+                expect(Object.keys(gapScale.numeric)).toHaveLength(10);
+            });
+        });
+        describe('legacy', () => {
+            it('provides backwards-compatible aliases', () => {
+                expect(gapScale.legacy.none).toBe('gap-0');
+                expect(gapScale.legacy.xs).toBe('gap-1');
+                expect(gapScale.legacy.sm).toBe('gap-2');
+                expect(gapScale.legacy.md).toBe('gap-4');
+                expect(gapScale.legacy.lg).toBe('gap-6');
+                expect(gapScale.legacy.xl).toBe('gap-8');
+            });
+            it('has 6 legacy gap values', () => {
+                expect(Object.keys(gapScale.legacy)).toHaveLength(6);
+            });
+        });
+        describe('grid', () => {
+            it('provides grid-specific semantic gap names', () => {
+                expect(gapScale.grid['grid-tight']).toBe('gap-4');
+                expect(gapScale.grid['grid-standard']).toBe('gap-6');
+                expect(gapScale.grid['grid-spacious']).toBe('gap-8');
+            });
+            it('has 3 grid gap values', () => {
+                expect(Object.keys(gapScale.grid)).toHaveLength(3);
+            });
+        });
+    });
+    describe('gapMap', () => {
+        it('combines all gap scales into a single map', () => {
+            // Check numeric values
+            expect(gapMap['0']).toBe('gap-0');
+            expect(gapMap['4']).toBe('gap-4');
+            // Check legacy values
+            expect(gapMap.none).toBe('gap-0');
+            expect(gapMap.xs).toBe('gap-1');
+            // Check semantic values
+            expect(gapMap.tight).toBe('gap-4'); // grid.tight overwrites semantic.tight
+            expect(gapMap.content).toBe('gap-4');
+            expect(gapMap.section).toBe('gap-6');
+            // Check grid values
+            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)
+            expect(gapMap.tight).toBe('gap-4');
+        });
+        it('contains all expected keys', () => {
+            const expectedKeys = [
+                // numeric
+                '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',
+                // grid
+                'tight', 'standard', 'spacious',
+            ];
+            for (const key of expectedKeys) {
+                expect(gapMap).toHaveProperty(key);
+            }
+        });
+    });
+    describe('alignScale', () => {
+        it('provides all flexbox align-items classes', () => {
+            expect(alignScale.start).toBe('items-start');
+            expect(alignScale.center).toBe('items-center');
+            expect(alignScale.end).toBe('items-end');
+            expect(alignScale.stretch).toBe('items-stretch');
+            expect(alignScale.baseline).toBe('items-baseline');
+        });
+        it('has 5 align values', () => {
+            expect(Object.keys(alignScale)).toHaveLength(5);
+        });
+        it('uses correct Tailwind class format', () => {
+            for (const value of Object.values(alignScale)) {
+                expect(value).toMatch(/^items-/);
+            }
+        });
+    });
+    describe('justifyScale', () => {
+        it('provides all flexbox justify-content classes', () => {
+            expect(justifyScale.start).toBe('justify-start');
+            expect(justifyScale.center).toBe('justify-center');
+            expect(justifyScale.end).toBe('justify-end');
+            expect(justifyScale.between).toBe('justify-between');
+            expect(justifyScale.around).toBe('justify-around');
+            expect(justifyScale.evenly).toBe('justify-evenly');
+        });
+        it('has 6 justify values', () => {
+            expect(Object.keys(justifyScale)).toHaveLength(6);
+        });
+        it('uses correct Tailwind class format', () => {
+            for (const value of Object.values(justifyScale)) {
+                expect(value).toMatch(/^justify-/);
+            }
+        });
+    });
+});

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

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

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

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

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

@@ -0,0 +1,329 @@
+import { describe, expect, it } from 'vitest';
+import { badgeColorVariants, alertColorVariants, alertCloseButtonVariants, spinnerColorVariants, getBadgeVariantClasses, getAlertVariantClasses, getSpinnerColorClasses, } from '../variants';
+describe('color variant tokens', () => {
+    describe('badgeColorVariants', () => {
+        describe('semantic variants', () => {
+            it('has success variant with green colors', () => {
+                expect(badgeColorVariants.success).toContain('text-green-800');
+                expect(badgeColorVariants.success).toContain('bg-green-100');
+                expect(badgeColorVariants.success).toContain('dark:bg-green-900');
+                expect(badgeColorVariants.success).toContain('dark:text-green-300');
+            });
+            it('has warning variant with yellow colors', () => {
+                expect(badgeColorVariants.warning).toContain('text-yellow-800');
+                expect(badgeColorVariants.warning).toContain('bg-yellow-100');
+                expect(badgeColorVariants.warning).toContain('dark:bg-yellow-900');
+                expect(badgeColorVariants.warning).toContain('dark:text-yellow-300');
+            });
+            it('has error variant with red colors', () => {
+                expect(badgeColorVariants.error).toContain('text-red-800');
+                expect(badgeColorVariants.error).toContain('bg-red-100');
+                expect(badgeColorVariants.error).toContain('dark:bg-red-900');
+                expect(badgeColorVariants.error).toContain('dark:text-red-300');
+            });
+            it('has danger variant identical to error', () => {
+                expect(badgeColorVariants.danger).toBe(badgeColorVariants.error);
+            });
+            it('has info variant with blue colors', () => {
+                expect(badgeColorVariants.info).toContain('text-blue-800');
+                expect(badgeColorVariants.info).toContain('bg-blue-100');
+                expect(badgeColorVariants.info).toContain('dark:bg-blue-900');
+                expect(badgeColorVariants.info).toContain('dark:text-blue-300');
+            });
+            it('has neutral variant with gray colors', () => {
+                expect(badgeColorVariants.neutral).toContain('text-gray-800');
+                expect(badgeColorVariants.neutral).toContain('bg-gray-100');
+                expect(badgeColorVariants.neutral).toContain('dark:bg-gray-700');
+                expect(badgeColorVariants.neutral).toContain('dark:text-gray-300');
+            });
+        });
+        describe('color variants', () => {
+            const colorVariants = [
+                'red',
+                'blue',
+                'purple',
+                'green',
+                'orange',
+                'yellow',
+                'gray',
+                'pink',
+                'indigo',
+                'cyan',
+            ];
+            it.each(colorVariants)('has %s color variant', (color) => {
+                expect(badgeColorVariants[color]).toBeDefined();
+                expect(badgeColorVariants[color]).toContain(`text-${color}-800`);
+                expect(badgeColorVariants[color]).toContain(`bg-${color}-100`);
+            });
+            it('green color variant matches success semantic variant', () => {
+                expect(badgeColorVariants.green).toBe(badgeColorVariants.success);
+            });
+            it('red color variant matches error semantic variant', () => {
+                expect(badgeColorVariants.red).toBe(badgeColorVariants.error);
+            });
+            it('blue color variant matches info semantic variant', () => {
+                expect(badgeColorVariants.blue).toBe(badgeColorVariants.info);
+            });
+        });
+        describe('special variants', () => {
+            it('has notification variant with white text and red background', () => {
+                expect(badgeColorVariants.notification).toContain('text-white');
+                expect(badgeColorVariants.notification).toContain('bg-red-500');
+                expect(badgeColorVariants.notification).toContain('dark:bg-red-600');
+            });
+        });
+        it('has exactly 17 variants', () => {
+            expect(Object.keys(badgeColorVariants)).toHaveLength(17);
+        });
+        it('all variants include dark mode support', () => {
+            for (const [key, value] of Object.entries(badgeColorVariants)) {
+                expect(value).toContain('dark:');
+            }
+        });
+    });
+    describe('alertColorVariants', () => {
+        it('has info variant with blue-50 background', () => {
+            expect(alertColorVariants.info).toContain('text-blue-800');
+            expect(alertColorVariants.info).toContain('bg-blue-50');
+            expect(alertColorVariants.info).toContain('dark:bg-gray-800');
+            expect(alertColorVariants.info).toContain('dark:text-blue-400');
+        });
+        it('has success variant with green-50 background', () => {
+            expect(alertColorVariants.success).toContain('text-green-800');
+            expect(alertColorVariants.success).toContain('bg-green-50');
+            expect(alertColorVariants.success).toContain('dark:text-green-400');
+        });
+        it('has warning variant with yellow-50 background', () => {
+            expect(alertColorVariants.warning).toContain('text-yellow-800');
+            expect(alertColorVariants.warning).toContain('bg-yellow-50');
+            expect(alertColorVariants.warning).toContain('dark:text-yellow-300');
+        });
+        it('has danger variant with red-50 background', () => {
+            expect(alertColorVariants.danger).toContain('text-red-800');
+            expect(alertColorVariants.danger).toContain('bg-red-50');
+            expect(alertColorVariants.danger).toContain('dark:text-red-400');
+        });
+        it('has exactly 4 variants', () => {
+            expect(Object.keys(alertColorVariants)).toHaveLength(4);
+        });
+        it('uses bg-*-50 pattern (lighter than badge variants)', () => {
+            for (const value of Object.values(alertColorVariants)) {
+                expect(value).toMatch(/bg-\w+-50/);
+            }
+        });
+    });
+    describe('alertCloseButtonVariants', () => {
+        it('has matching keys with alertColorVariants', () => {
+            const alertKeys = Object.keys(alertColorVariants);
+            const closeButtonKeys = Object.keys(alertCloseButtonVariants);
+            expect(closeButtonKeys).toEqual(alertKeys);
+        });
+        it('includes hover states for each variant', () => {
+            for (const value of Object.values(alertCloseButtonVariants)) {
+                expect(value).toContain('hover:');
+                expect(value).toContain('dark:hover:');
+            }
+        });
+        it('info close button has correct colors', () => {
+            expect(alertCloseButtonVariants.info).toContain('text-blue-500');
+            expect(alertCloseButtonVariants.info).toContain('hover:bg-blue-200');
+        });
+    });
+    describe('spinnerColorVariants', () => {
+        const spinnerColors = [
+            'blue',
+            'gray',
+            'green',
+            'red',
+            'yellow',
+            'pink',
+            'purple',
+            'white',
+        ];
+        it.each(spinnerColors)('has %s spinner color', (color) => {
+            expect(spinnerColorVariants[color]).toBeDefined();
+            expect(spinnerColorVariants[color]).toContain('fill-');
+        });
+        it('has exactly 8 spinner colors', () => {
+            expect(Object.keys(spinnerColorVariants)).toHaveLength(8);
+        });
+        it('gray spinner has dark mode support', () => {
+            expect(spinnerColorVariants.gray).toContain('dark:fill-gray-300');
+        });
+        it('white spinner is just fill-white', () => {
+            expect(spinnerColorVariants.white).toBe('fill-white');
+        });
+        it('uses fill-* pattern for all variants', () => {
+            for (const value of Object.values(spinnerColorVariants)) {
+                expect(value).toMatch(/fill-/);
+            }
+        });
+    });
+});
+describe('variant helper functions', () => {
+    describe('getBadgeVariantClasses', () => {
+        it('returns correct classes for valid variants', () => {
+            expect(getBadgeVariantClasses('success')).toBe(badgeColorVariants.success);
+            expect(getBadgeVariantClasses('error')).toBe(badgeColorVariants.error);
+            expect(getBadgeVariantClasses('info')).toBe(badgeColorVariants.info);
+            expect(getBadgeVariantClasses('warning')).toBe(badgeColorVariants.warning);
+            expect(getBadgeVariantClasses('neutral')).toBe(badgeColorVariants.neutral);
+        });
+        it('returns correct classes for color variants', () => {
+            expect(getBadgeVariantClasses('red')).toBe(badgeColorVariants.red);
+            expect(getBadgeVariantClasses('blue')).toBe(badgeColorVariants.blue);
+            expect(getBadgeVariantClasses('green')).toBe(badgeColorVariants.green);
+            expect(getBadgeVariantClasses('purple')).toBe(badgeColorVariants.purple);
+        });
+        it('is case-insensitive', () => {
+            expect(getBadgeVariantClasses('SUCCESS')).toBe(badgeColorVariants.success);
+            expect(getBadgeVariantClasses('Error')).toBe(badgeColorVariants.error);
+            expect(getBadgeVariantClasses('INFO')).toBe(badgeColorVariants.info);
+            expect(getBadgeVariantClasses('Green')).toBe(badgeColorVariants.green);
+        });
+        it('returns neutral for undefined', () => {
+            expect(getBadgeVariantClasses(undefined)).toBe(badgeColorVariants.neutral);
+        });
+        it('returns neutral for invalid variants', () => {
+            expect(getBadgeVariantClasses('invalid')).toBe(badgeColorVariants.neutral);
+            expect(getBadgeVariantClasses('unknown')).toBe(badgeColorVariants.neutral);
+            expect(getBadgeVariantClasses('')).toBe(badgeColorVariants.neutral);
+        });
+        it('returns neutral for empty string', () => {
+            expect(getBadgeVariantClasses('')).toBe(badgeColorVariants.neutral);
+        });
+    });
+    describe('getAlertVariantClasses', () => {
+        it('returns correct classes for valid variants', () => {
+            expect(getAlertVariantClasses('info')).toBe(alertColorVariants.info);
+            expect(getAlertVariantClasses('success')).toBe(alertColorVariants.success);
+            expect(getAlertVariantClasses('warning')).toBe(alertColorVariants.warning);
+            expect(getAlertVariantClasses('danger')).toBe(alertColorVariants.danger);
+        });
+        it('is case-insensitive', () => {
+            expect(getAlertVariantClasses('INFO')).toBe(alertColorVariants.info);
+            expect(getAlertVariantClasses('Success')).toBe(alertColorVariants.success);
+            expect(getAlertVariantClasses('WARNING')).toBe(alertColorVariants.warning);
+        });
+        it('returns info for undefined', () => {
+            expect(getAlertVariantClasses(undefined)).toBe(alertColorVariants.info);
+        });
+        it('returns info for invalid variants', () => {
+            expect(getAlertVariantClasses('invalid')).toBe(alertColorVariants.info);
+            expect(getAlertVariantClasses('error')).toBe(alertColorVariants.info); // alert uses 'danger' not 'error'
+            expect(getAlertVariantClasses('')).toBe(alertColorVariants.info);
+        });
+    });
+    describe('getSpinnerColorClasses', () => {
+        it('returns correct classes for valid colors', () => {
+            expect(getSpinnerColorClasses('blue')).toBe(spinnerColorVariants.blue);
+            expect(getSpinnerColorClasses('gray')).toBe(spinnerColorVariants.gray);
+            expect(getSpinnerColorClasses('green')).toBe(spinnerColorVariants.green);
+            expect(getSpinnerColorClasses('red')).toBe(spinnerColorVariants.red);
+            expect(getSpinnerColorClasses('white')).toBe(spinnerColorVariants.white);
+        });
+        it('is case-insensitive', () => {
+            expect(getSpinnerColorClasses('BLUE')).toBe(spinnerColorVariants.blue);
+            expect(getSpinnerColorClasses('Green')).toBe(spinnerColorVariants.green);
+            expect(getSpinnerColorClasses('RED')).toBe(spinnerColorVariants.red);
+        });
+        it('returns blue for undefined', () => {
+            expect(getSpinnerColorClasses(undefined)).toBe(spinnerColorVariants.blue);
+        });
+        it('returns blue for invalid colors', () => {
+            expect(getSpinnerColorClasses('invalid')).toBe(spinnerColorVariants.blue);
+            expect(getSpinnerColorClasses('orange')).toBe(spinnerColorVariants.blue);
+            expect(getSpinnerColorClasses('')).toBe(spinnerColorVariants.blue);
+        });
+    });
+});
+describe('type exports', () => {
+    it('BadgeColorVariant type includes all badge variants', () => {
+        // Type assertion test - if this compiles, the type is correct
+        const validVariants = [
+            'success',
+            'warning',
+            'error',
+            'danger',
+            'info',
+            'neutral',
+            'red',
+            'blue',
+            'purple',
+            'green',
+            'orange',
+            'yellow',
+            'gray',
+            'pink',
+            'indigo',
+            'cyan',
+            'notification',
+        ];
+        expect(validVariants).toHaveLength(17);
+    });
+    it('AlertColorVariant type includes all alert variants', () => {
+        const validVariants = [
+            'info',
+            'success',
+            'warning',
+            'danger',
+        ];
+        expect(validVariants).toHaveLength(4);
+    });
+    it('SpinnerColorVariant type includes all spinner colors', () => {
+        const validVariants = [
+            'blue',
+            'gray',
+            'green',
+            'red',
+            'yellow',
+            'pink',
+            'purple',
+            'white',
+        ];
+        expect(validVariants).toHaveLength(8);
+    });
+});
+describe('consistency checks', () => {
+    it('all badge variants follow consistent pattern', () => {
+        // Check that all non-special variants follow the same structure
+        const standardVariants = [
+            'success',
+            'warning',
+            'error',
+            'info',
+            'red',
+            'blue',
+            'purple',
+            'green',
+            'orange',
+            'yellow',
+            'pink',
+            'indigo',
+            'cyan',
+        ];
+        for (const variant of standardVariants) {
+            const classes = badgeColorVariants[variant];
+            // Should have text-*-800 and bg-*-100 and dark: variants
+            expect(classes).toMatch(/text-\w+-800/);
+            expect(classes).toMatch(/bg-\w+-100/);
+            expect(classes).toMatch(/dark:bg-\w+-900/);
+            expect(classes).toMatch(/dark:text-\w+-300/);
+        }
+    });
+    it('gray and neutral badge variants are identical', () => {
+        expect(badgeColorVariants.gray).toBe(badgeColorVariants.neutral);
+    });
+    it('semantic badge variants map to correct colors', () => {
+        // success = green
+        expect(badgeColorVariants.success).toContain('green');
+        // error = red
+        expect(badgeColorVariants.error).toContain('red');
+        // warning = yellow
+        expect(badgeColorVariants.warning).toContain('yellow');
+        // info = blue
+        expect(badgeColorVariants.info).toContain('blue');
+        // neutral = gray
+        expect(badgeColorVariants.neutral).toContain('gray');
+    });
+});

package/dist/tokens/index.d.ts

@@ -4,4 +4,7 @@
  * Centralized styling constants for consistent design across all Micdrop apps.
  */
 export { typography, type TypographyToken } from './typography.js';
+export { formInputSizes, formControlSizes, type FormInputSize, type FormControlSize, iconSizes, type IconSize, badgeSizes, badgeSizeLegacyMap, type BadgeSize, type BadgeSizeLegacy, skeletonSizes, type SkeletonSize, buttonSizes, buttonIconSizes, buttonAvatarSizes, buttonMenuItemSizes, buttonCardSizes, type ButtonSize, type ButtonIconSize, type ButtonAvatarSize, type ButtonMenuItemSize, type ButtonCardSize, } from './sizing.js';
+export { spacing, spacingAliases, gapScale, gapMap, alignScale, justifyScale, type SpacingKey, type SpacingAlias, type GapSemanticKey, type GapNumericKey, type GapLegacyKey, type GapGridKey, type GapKey, type AlignKey, type JustifyKey, } from './spacing.js';
+export { alertCloseButtonVariants, alertColorVariants, type AlertColorVariant, badgeColorVariants, type BadgeColorVariant, getAlertVariantClasses, getBadgeVariantClasses, getSpinnerColorClasses, spinnerColorVariants, type SpinnerColorVariant, } from './variants.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGnE,OAAO,EAEL,cAAc,EACd,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,eAAe,EAEpB,SAAS,EACT,KAAK,QAAQ,EAEb,UAAU,EACV,kBAAkB,EAClB,KAAK,SAAS,EACd,KAAK,eAAe,EAEpB,aAAa,EACb,KAAK,YAAY,EAEjB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACpB,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,OAAO,EACP,cAAc,EACd,QAAQ,EACR,MAAM,EACN,UAAU,EACV,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,QAAQ,EACb,KAAK,UAAU,GAChB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,wBAAwB,EACxB,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,kBAAkB,EAClB,KAAK,iBAAiB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,oBAAoB,EACpB,KAAK,mBAAmB,GACzB,MAAM,eAAe,CAAC"}

package/dist/tokens/index.js

@@ -4,3 +4,19 @@
  * Centralized styling constants for consistent design across all Micdrop apps.
  */
 export { typography } from './typography.js';
+// Sizing tokens for all components
+export { 
+// Form controls
+formInputSizes, formControlSizes, 
+// Icons/Spinners
+iconSizes, 
+// Badges
+badgeSizes, badgeSizeLegacyMap, 
+// Skeletons
+skeletonSizes, 
+// Buttons
+buttonSizes, buttonIconSizes, buttonAvatarSizes, buttonMenuItemSizes, buttonCardSizes, } from './sizing.js';
+// Spacing and layout tokens
+export { spacing, spacingAliases, gapScale, gapMap, alignScale, justifyScale, } from './spacing.js';
+// Color variant classes for components
+export { alertCloseButtonVariants, alertColorVariants, badgeColorVariants, getAlertVariantClasses, getBadgeVariantClasses, getSpinnerColorClasses, spinnerColorVariants, } from './variants.js';

package/dist/tokens/sizing.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Sizing Tokens
+ *
+ * Shared size class mappings for consistent component sizing across the design system.
+ * Single source of truth for all component size variants.
+ */
+/**
+ * Form input sizes - for Input component with fixed heights
+ * Provides consistent height, padding, and text sizing for text inputs.
+ */
+export declare const formInputSizes: {
+    readonly sm: "py-2 px-3 text-sm h-9";
+    readonly md: "py-2.5 px-4 text-sm h-10";
+    readonly lg: "py-3 px-4 text-base h-12";
+};
+/**
+ * Form control sizes - for Select and other form controls without fixed heights
+ * Provides consistent padding and text sizing.
+ */
+export declare const formControlSizes: {
+    readonly sm: "py-2 px-3 text-sm";
+    readonly md: "py-2.5 px-4 text-sm";
+    readonly lg: "py-3 px-4 text-base";
+};
+export type FormInputSize = keyof typeof formInputSizes;
+export type FormControlSize = keyof typeof formControlSizes;
+/**
+ * Icon dimension sizes - width and height classes for icons and spinners.
+ * Used by Spinner and icon-only components.
+ */
+export declare const iconSizes: {
+    readonly xs: "w-3 h-3";
+    readonly sm: "w-4 h-4";
+    readonly md: "w-8 h-8";
+    readonly lg: "w-12 h-12";
+    readonly xl: "w-16 h-16";
+};
+export type IconSize = keyof typeof iconSizes;
+/**
+ * Badge sizes - text, padding, and font weight for badges.
+ */
+export declare const badgeSizes: {
+    readonly xs: "text-xs px-1.5 py-0.5 font-medium";
+    readonly sm: "text-xs px-2 py-0.5 font-medium";
+    readonly md: "text-xs px-2.5 py-0.5 font-medium";
+    readonly lg: "text-sm px-3 py-0.5 font-medium";
+};
+/**
+ * Legacy badge size name mapping for backwards compatibility.
+ */
+export declare const badgeSizeLegacyMap: Record<string, keyof typeof badgeSizes>;
+export type BadgeSize = keyof typeof badgeSizes;
+export type BadgeSizeLegacy = 'small' | 'medium' | 'large';
+/**
+ * Skeleton line height sizes - for loading placeholder lines.
+ */
+export declare const skeletonSizes: {
+    readonly sm: "h-2";
+    readonly md: "h-2.5";
+    readonly lg: "h-3";
+    readonly xl: "h-3.5";
+    readonly '2xl': "h-4";
+};
+export type SkeletonSize = keyof typeof skeletonSizes;
+/**
+ * Standard button sizes - padding and text sizing.
+ */
+export declare const buttonSizes: {
+    readonly xs: "px-3 py-1.5 text-xs";
+    readonly sm: "px-3 py-2 text-sm";
+    readonly md: "px-4 py-2.5 text-sm";
+    readonly lg: "px-5 py-3 text-sm";
+    readonly xl: "px-6 py-3.5 text-sm";
+    readonly 'xl-medium': "w-full px-6 py-3.5 text-sm";
+    readonly full: "w-full px-5 py-3 text-sm";
+    readonly 'full-md-auto': "w-full px-5 py-3 text-sm md:w-auto";
+    readonly half: "w-1/2 px-4 py-2.5 text-sm";
+};
+/**
+ * Icon-only button sizes - padding only, no text.
+ */
+export declare const buttonIconSizes: {
+    readonly xs: "p-1.5";
+    readonly sm: "p-2";
+    readonly md: "p-2.5";
+    readonly lg: "p-3";
+};
+/**
+ * Avatar button sizes - minimal padding, just dimensions.
+ */
+export declare const buttonAvatarSizes: {
+    readonly sm: "min-w-8 min-h-8";
+    readonly md: "min-w-10 min-h-10";
+    readonly lg: "min-w-12 min-h-12";
+};
+/**
+ * Menu item button sizes - for dropdown and sheet items.
+ */
+export declare const buttonMenuItemSizes: {
+    readonly sm: "py-2 px-4 text-sm";
+    readonly md: "py-3 px-4 text-sm";
+    readonly lg: "py-4 px-6 text-base";
+    readonly nav: "py-2 px-3 text-base font-normal";
+};
+/**
+ * Card button sizes - larger padding for card-like buttons.
+ */
+export declare const buttonCardSizes: {
+    readonly sm: "p-3 text-sm";
+    readonly md: "p-4 text-sm";
+    readonly lg: "p-5 text-base";
+};
+export type ButtonSize = keyof typeof buttonSizes;
+export type ButtonIconSize = keyof typeof buttonIconSizes;
+export type ButtonAvatarSize = keyof typeof buttonAvatarSizes;
+export type ButtonMenuItemSize = keyof typeof buttonMenuItemSizes;
+export type ButtonCardSize = keyof typeof buttonCardSizes;
+//# sourceMappingURL=sizing.d.ts.map