@getmicdrop/svelte-components 5.4.1 → 5.5.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;CAUd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}

package/dist/tokens/sizing.js

@@ -0,0 +1,125 @@
+/**
+ * Sizing Tokens
+ *
+ * Shared size class mappings for consistent component sizing across the design system.
+ * Single source of truth for all component size variants.
+ */
+// =============================================================================
+// FORM CONTROLS
+// =============================================================================
+/**
+ * Form input sizes - for Input component with fixed heights
+ * Provides consistent height, padding, and text sizing for text inputs.
+ */
+export const formInputSizes = {
+    sm: 'py-2 px-3 text-sm h-9',
+    md: 'py-2.5 px-4 text-sm h-10',
+    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 const formControlSizes = {
+    sm: 'py-2 px-3 text-sm',
+    md: 'py-2.5 px-4 text-sm',
+    lg: 'py-3 px-4 text-base',
+};
+// =============================================================================
+// ICON/SPINNER SIZES
+// =============================================================================
+/**
+ * Icon dimension sizes - width and height classes for icons and spinners.
+ * Used by Spinner and icon-only components.
+ */
+export const iconSizes = {
+    xs: 'w-3 h-3',
+    sm: 'w-4 h-4',
+    md: 'w-8 h-8',
+    lg: 'w-12 h-12',
+    xl: 'w-16 h-16',
+};
+// =============================================================================
+// BADGE SIZES
+// =============================================================================
+/**
+ * Badge sizes - text, padding, and font weight for badges.
+ */
+export const badgeSizes = {
+    xs: 'text-xs px-1.5 py-0.5 font-medium',
+    sm: 'text-xs px-2 py-0.5 font-medium',
+    md: 'text-xs px-2.5 py-0.5 font-medium',
+    lg: 'text-sm px-3 py-0.5 font-medium',
+};
+/**
+ * Legacy badge size name mapping for backwards compatibility.
+ */
+export const badgeSizeLegacyMap = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+};
+// =============================================================================
+// SKELETON SIZES
+// =============================================================================
+/**
+ * Skeleton line height sizes - for loading placeholder lines.
+ */
+export const skeletonSizes = {
+    sm: 'h-2',
+    md: 'h-2.5',
+    lg: 'h-3',
+    xl: 'h-3.5',
+    '2xl': 'h-4',
+};
+// =============================================================================
+// BUTTON SIZES
+// =============================================================================
+/**
+ * Standard button sizes - padding and text sizing.
+ */
+export const buttonSizes = {
+    xs: 'px-3 py-1.5 text-xs',
+    sm: 'px-3 py-2 text-sm',
+    md: 'px-4 py-2.5 text-sm',
+    lg: 'px-5 py-3 text-sm',
+    xl: 'px-6 py-3.5 text-sm',
+    'xl-medium': 'w-full px-6 py-3.5 text-sm',
+    full: 'w-full px-5 py-3 text-sm',
+    'full-md-auto': 'w-full px-5 py-3 text-sm md:w-auto',
+    half: 'w-1/2 px-4 py-2.5 text-sm',
+};
+/**
+ * Icon-only button sizes - padding only, no text.
+ */
+export const buttonIconSizes = {
+    xs: 'p-1.5',
+    sm: 'p-2',
+    md: 'p-2.5',
+    lg: 'p-3',
+};
+/**
+ * Avatar button sizes - minimal padding, just dimensions.
+ */
+export const buttonAvatarSizes = {
+    sm: 'min-w-8 min-h-8',
+    md: 'min-w-10 min-h-10',
+    lg: 'min-w-12 min-h-12',
+};
+/**
+ * Menu item button sizes - for dropdown and sheet items.
+ */
+export const buttonMenuItemSizes = {
+    sm: 'py-2 px-4 text-sm',
+    md: 'py-3 px-4 text-sm',
+    lg: 'py-4 px-6 text-base',
+    nav: 'py-2 px-3 text-base font-normal',
+};
+/**
+ * Card button sizes - larger padding for card-like buttons.
+ */
+export const buttonCardSizes = {
+    sm: 'p-3 text-sm',
+    md: 'p-4 text-sm',
+    lg: 'p-5 text-base',
+};