@getmicdrop/svelte-components 5.4.1 → 5.5.0

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

@@ -0,0 +1,307 @@
+import { describe, expect, it } from 'vitest';
+import { 
+// Form controls
+formInputSizes, formControlSizes, 
+// Icons/Spinners
+iconSizes, 
+// Badges
+badgeSizes, badgeSizeLegacyMap, 
+// Skeletons
+skeletonSizes, 
+// Buttons
+buttonSizes, buttonIconSizes, buttonAvatarSizes, buttonMenuItemSizes, buttonCardSizes, } from '../sizing';
+describe('sizing tokens', () => {
+    describe('formInputSizes', () => {
+        it('contains sm, md, lg sizes', () => {
+            expect(formInputSizes).toHaveProperty('sm');
+            expect(formInputSizes).toHaveProperty('md');
+            expect(formInputSizes).toHaveProperty('lg');
+        });
+        it('includes height classes for fixed input heights', () => {
+            expect(formInputSizes.sm).toContain('h-9');
+            expect(formInputSizes.md).toContain('h-10');
+            expect(formInputSizes.lg).toContain('h-12');
+        });
+        it('includes padding and text size classes', () => {
+            for (const size of Object.values(formInputSizes)) {
+                expect(size).toMatch(/py-\d/);
+                expect(size).toMatch(/px-\d/);
+                expect(size).toMatch(/text-(sm|base)/);
+            }
+        });
+        it('has exactly 3 sizes', () => {
+            expect(Object.keys(formInputSizes)).toHaveLength(3);
+        });
+    });
+    describe('formControlSizes', () => {
+        it('contains sm, md, lg sizes', () => {
+            expect(formControlSizes).toHaveProperty('sm');
+            expect(formControlSizes).toHaveProperty('md');
+            expect(formControlSizes).toHaveProperty('lg');
+        });
+        it('does NOT include height classes (for flexible controls)', () => {
+            for (const size of Object.values(formControlSizes)) {
+                expect(size).not.toMatch(/h-\d/);
+            }
+        });
+        it('includes padding and text size classes', () => {
+            for (const size of Object.values(formControlSizes)) {
+                expect(size).toMatch(/py-\d/);
+                expect(size).toMatch(/px-\d/);
+                expect(size).toMatch(/text-(sm|base)/);
+            }
+        });
+        it('has exactly 3 sizes', () => {
+            expect(Object.keys(formControlSizes)).toHaveLength(3);
+        });
+    });
+    describe('iconSizes', () => {
+        it('contains xs, sm, md, lg, xl sizes', () => {
+            expect(iconSizes).toHaveProperty('xs');
+            expect(iconSizes).toHaveProperty('sm');
+            expect(iconSizes).toHaveProperty('md');
+            expect(iconSizes).toHaveProperty('lg');
+            expect(iconSizes).toHaveProperty('xl');
+        });
+        it('uses width and height classes', () => {
+            for (const size of Object.values(iconSizes)) {
+                expect(size).toMatch(/w-\d+/);
+                expect(size).toMatch(/h-\d+/);
+            }
+        });
+        it('has matching width and height for each size', () => {
+            expect(iconSizes.xs).toBe('w-3 h-3');
+            expect(iconSizes.sm).toBe('w-4 h-4');
+            expect(iconSizes.md).toBe('w-8 h-8');
+            expect(iconSizes.lg).toBe('w-12 h-12');
+            expect(iconSizes.xl).toBe('w-16 h-16');
+        });
+        it('has exactly 5 sizes', () => {
+            expect(Object.keys(iconSizes)).toHaveLength(5);
+        });
+        it('sizes increase progressively', () => {
+            const sizeOrder = ['xs', 'sm', 'md', 'lg', 'xl'];
+            const extractWidth = (s) => parseInt(s.match(/w-(\d+)/)?.[1] || '0');
+            for (let i = 0; i < sizeOrder.length - 1; i++) {
+                const current = extractWidth(iconSizes[sizeOrder[i]]);
+                const next = extractWidth(iconSizes[sizeOrder[i + 1]]);
+                expect(next).toBeGreaterThan(current);
+            }
+        });
+    });
+    describe('badgeSizes', () => {
+        it('contains xs, sm, md, lg sizes', () => {
+            expect(badgeSizes).toHaveProperty('xs');
+            expect(badgeSizes).toHaveProperty('sm');
+            expect(badgeSizes).toHaveProperty('md');
+            expect(badgeSizes).toHaveProperty('lg');
+        });
+        it('includes text-xs for smaller badges and text-sm for large', () => {
+            expect(badgeSizes.xs).toContain('text-xs');
+            expect(badgeSizes.sm).toContain('text-xs');
+            expect(badgeSizes.md).toContain('text-xs');
+            expect(badgeSizes.lg).toContain('text-sm');
+        });
+        it('includes padding classes', () => {
+            for (const size of Object.values(badgeSizes)) {
+                expect(size).toMatch(/px-\d/);
+                expect(size).toMatch(/py-\d/);
+            }
+        });
+        it('includes font-medium for all sizes', () => {
+            for (const size of Object.values(badgeSizes)) {
+                expect(size).toContain('font-medium');
+            }
+        });
+        it('has exactly 4 sizes', () => {
+            expect(Object.keys(badgeSizes)).toHaveLength(4);
+        });
+    });
+    describe('badgeSizeLegacyMap', () => {
+        it('maps legacy string names to standard sizes', () => {
+            expect(badgeSizeLegacyMap.small).toBe('sm');
+            expect(badgeSizeLegacyMap.medium).toBe('md');
+            expect(badgeSizeLegacyMap.large).toBe('lg');
+        });
+        it('has exactly 3 legacy mappings', () => {
+            expect(Object.keys(badgeSizeLegacyMap)).toHaveLength(3);
+        });
+        it('maps to valid badgeSizes keys', () => {
+            for (const mapped of Object.values(badgeSizeLegacyMap)) {
+                expect(badgeSizes).toHaveProperty(mapped);
+            }
+        });
+    });
+    describe('skeletonSizes', () => {
+        it('contains sm, md, lg, xl, 2xl sizes', () => {
+            expect(skeletonSizes).toHaveProperty('sm');
+            expect(skeletonSizes).toHaveProperty('md');
+            expect(skeletonSizes).toHaveProperty('lg');
+            expect(skeletonSizes).toHaveProperty('xl');
+            expect(skeletonSizes).toHaveProperty('2xl');
+        });
+        it('uses height classes only', () => {
+            for (const size of Object.values(skeletonSizes)) {
+                expect(size).toMatch(/^h-\d/);
+            }
+        });
+        it('has progressive height values', () => {
+            expect(skeletonSizes.sm).toBe('h-2');
+            expect(skeletonSizes.md).toBe('h-2.5');
+            expect(skeletonSizes.lg).toBe('h-3');
+            expect(skeletonSizes.xl).toBe('h-3.5');
+            expect(skeletonSizes['2xl']).toBe('h-4');
+        });
+        it('has exactly 5 sizes', () => {
+            expect(Object.keys(skeletonSizes)).toHaveLength(5);
+        });
+    });
+    describe('buttonSizes', () => {
+        it('contains standard sizes xs through xl', () => {
+            expect(buttonSizes).toHaveProperty('xs');
+            expect(buttonSizes).toHaveProperty('sm');
+            expect(buttonSizes).toHaveProperty('md');
+            expect(buttonSizes).toHaveProperty('lg');
+            expect(buttonSizes).toHaveProperty('xl');
+        });
+        it('contains special size variants', () => {
+            expect(buttonSizes).toHaveProperty('xl-medium');
+            expect(buttonSizes).toHaveProperty('full');
+            expect(buttonSizes).toHaveProperty('full-md-auto');
+            expect(buttonSizes).toHaveProperty('half');
+        });
+        it('standard sizes include padding and text sizing', () => {
+            const standardSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+            for (const size of standardSizes) {
+                expect(buttonSizes[size]).toMatch(/px-\d/);
+                expect(buttonSizes[size]).toMatch(/py-\d/);
+                expect(buttonSizes[size]).toMatch(/text-(xs|sm)/);
+            }
+        });
+        it('full width variants include w-full', () => {
+            expect(buttonSizes.full).toContain('w-full');
+            expect(buttonSizes['full-md-auto']).toContain('w-full');
+            expect(buttonSizes['xl-medium']).toContain('w-full');
+        });
+        it('half variant includes w-1/2', () => {
+            expect(buttonSizes.half).toContain('w-1/2');
+        });
+        it('has exactly 9 size variants', () => {
+            expect(Object.keys(buttonSizes)).toHaveLength(9);
+        });
+    });
+    describe('buttonIconSizes', () => {
+        it('contains xs, sm, md, lg sizes', () => {
+            expect(buttonIconSizes).toHaveProperty('xs');
+            expect(buttonIconSizes).toHaveProperty('sm');
+            expect(buttonIconSizes).toHaveProperty('md');
+            expect(buttonIconSizes).toHaveProperty('lg');
+        });
+        it('uses padding only (no width/height)', () => {
+            for (const size of Object.values(buttonIconSizes)) {
+                expect(size).toMatch(/^p-\d/);
+                expect(size).not.toMatch(/w-/);
+                expect(size).not.toMatch(/h-/);
+            }
+        });
+        it('has progressive padding values', () => {
+            expect(buttonIconSizes.xs).toBe('p-1.5');
+            expect(buttonIconSizes.sm).toBe('p-2');
+            expect(buttonIconSizes.md).toBe('p-2.5');
+            expect(buttonIconSizes.lg).toBe('p-3');
+        });
+        it('has exactly 4 sizes', () => {
+            expect(Object.keys(buttonIconSizes)).toHaveLength(4);
+        });
+    });
+    describe('buttonAvatarSizes', () => {
+        it('contains sm, md, lg sizes', () => {
+            expect(buttonAvatarSizes).toHaveProperty('sm');
+            expect(buttonAvatarSizes).toHaveProperty('md');
+            expect(buttonAvatarSizes).toHaveProperty('lg');
+        });
+        it('uses min-width and min-height classes', () => {
+            for (const size of Object.values(buttonAvatarSizes)) {
+                expect(size).toMatch(/min-w-\d+/);
+                expect(size).toMatch(/min-h-\d+/);
+            }
+        });
+        it('has progressive dimension values', () => {
+            expect(buttonAvatarSizes.sm).toBe('min-w-8 min-h-8');
+            expect(buttonAvatarSizes.md).toBe('min-w-10 min-h-10');
+            expect(buttonAvatarSizes.lg).toBe('min-w-12 min-h-12');
+        });
+        it('has exactly 3 sizes', () => {
+            expect(Object.keys(buttonAvatarSizes)).toHaveLength(3);
+        });
+    });
+    describe('buttonMenuItemSizes', () => {
+        it('contains sm, md, lg, nav sizes', () => {
+            expect(buttonMenuItemSizes).toHaveProperty('sm');
+            expect(buttonMenuItemSizes).toHaveProperty('md');
+            expect(buttonMenuItemSizes).toHaveProperty('lg');
+            expect(buttonMenuItemSizes).toHaveProperty('nav');
+        });
+        it('uses padding and text sizing', () => {
+            for (const size of Object.values(buttonMenuItemSizes)) {
+                expect(size).toMatch(/py-\d/);
+                expect(size).toMatch(/px-\d/);
+                expect(size).toMatch(/text-(sm|base)/);
+            }
+        });
+        it('nav size has font-normal for navigation items', () => {
+            expect(buttonMenuItemSizes.nav).toContain('font-normal');
+        });
+        it('has exactly 4 sizes', () => {
+            expect(Object.keys(buttonMenuItemSizes)).toHaveLength(4);
+        });
+    });
+    describe('buttonCardSizes', () => {
+        it('contains sm, md, lg sizes', () => {
+            expect(buttonCardSizes).toHaveProperty('sm');
+            expect(buttonCardSizes).toHaveProperty('md');
+            expect(buttonCardSizes).toHaveProperty('lg');
+        });
+        it('uses uniform padding (p-*) not separate px/py', () => {
+            for (const size of Object.values(buttonCardSizes)) {
+                expect(size).toMatch(/^p-\d/);
+            }
+        });
+        it('includes text sizing', () => {
+            for (const size of Object.values(buttonCardSizes)) {
+                expect(size).toMatch(/text-(sm|base)/);
+            }
+        });
+        it('has progressive padding values', () => {
+            expect(buttonCardSizes.sm).toBe('p-3 text-sm');
+            expect(buttonCardSizes.md).toBe('p-4 text-sm');
+            expect(buttonCardSizes.lg).toBe('p-5 text-base');
+        });
+        it('has exactly 3 sizes', () => {
+            expect(Object.keys(buttonCardSizes)).toHaveLength(3);
+        });
+    });
+    describe('cross-token consistency', () => {
+        it('form input and control sizes have the same keys', () => {
+            expect(Object.keys(formInputSizes).sort()).toEqual(Object.keys(formControlSizes).sort());
+        });
+        it('badge legacy map values match badge size keys', () => {
+            const badgeSizeKeys = Object.keys(badgeSizes);
+            for (const legacyValue of Object.values(badgeSizeLegacyMap)) {
+                expect(badgeSizeKeys).toContain(legacyValue);
+            }
+        });
+        it('button icon sizes are a subset of standard button sizes', () => {
+            const buttonIconKeys = Object.keys(buttonIconSizes);
+            const buttonKeys = Object.keys(buttonSizes);
+            for (const key of buttonIconKeys) {
+                expect(buttonKeys).toContain(key);
+            }
+        });
+        it('button avatar sizes are a subset of standard button sizes (sm, md, lg)', () => {
+            const avatarKeys = Object.keys(buttonAvatarSizes);
+            const expectedKeys = ['sm', 'md', 'lg'];
+            expect(avatarKeys.sort()).toEqual(expectedKeys.sort());
+        });
+    });
+});

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

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

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

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

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":""}