@getmicdrop/svelte-components 5.3.6 → 5.3.10

package/dist/stories/ButtonAuditReview.svelte.d.ts

@@ -1,7 +1,27 @@
 export default ButtonAuditReview;
-type ButtonAuditReview = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
+type ButtonAuditReview = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-declare const ButtonAuditReview: import("svelte").Component<Record<string, never>, {}, "">;
+declare const ButtonAuditReview: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
 //# sourceMappingURL=ButtonAuditReview.svelte.d.ts.map

package/dist/stories/ButtonAuditReview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonAuditReview.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonAuditReview.svelte.js"],"names":[],"mappings":";;;;;AAibA,2FAAgE"}
+{"version":3,"file":"ButtonAuditReview.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonAuditReview.svelte.js"],"names":[],"mappings":";;;;;;;;AA4bA;;;;mBAA6H;6CAThF,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/tokens/index.d.ts

@@ -1,11 +1,7 @@
 /**
- * @packageDocumentation
- * @module @getmicdrop/svelte-components/tokens
+ * Design Tokens
+ *
+ * Centralized styling constants for consistent design across all Micdrop apps.
  */
-export { colors, lightColors, darkColors, backgroundColors, textColors, brandColors, accentColors, strokeColors, uiColors, sidebarColors, legacyAliases, type ColorToken, type LegacyColorAlias, } from './colors.js';
-export { spacing, spacingAliases, type SpacingKey, type SpacingAlias, } from './spacing.js';
-export { typography, fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, type FontSizeKey, type FontWeightKey, type FontFamilyKey, type LineHeightKey, type LetterSpacingKey, } from './typography.js';
-export { borderRadius, radiusAliases, type BorderRadiusKey, type RadiusAlias, } from './radius.js';
-export { boxShadow, customShadows, shadows, type BoxShadowKey, type CustomShadowKey, type ShadowKey, } from './shadows.js';
-export { zIndex, layers, type ZIndexKey, type LayerKey, } from './z-index.js';
+export { typography, type TypographyToken } from './typography.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;;;GAGG;AAEH,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,UAAU,EACf,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,OAAO,EACP,cAAc,EACd,KAAK,UAAU,EACf,KAAK,YAAY,GAClB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,YAAY,EACZ,aAAa,EACb,KAAK,eAAe,EACpB,KAAK,WAAW,GACjB,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,SAAS,EACT,aAAa,EACb,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,MAAM,EACN,MAAM,EACN,KAAK,SAAS,EACd,KAAK,QAAQ,GACd,MAAM,cAAc,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"}

package/dist/tokens/index.js

@@ -1,10 +1,6 @@
 /**
- * @packageDocumentation
- * @module @getmicdrop/svelte-components/tokens
+ * Design Tokens
+ *
+ * Centralized styling constants for consistent design across all Micdrop apps.
  */
-export { colors, lightColors, darkColors, backgroundColors, textColors, brandColors, accentColors, strokeColors, uiColors, sidebarColors, legacyAliases, } from './colors.js';
-export { spacing, spacingAliases, } from './spacing.js';
-export { typography, fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, } from './typography.js';
-export { borderRadius, radiusAliases, } from './radius.js';
-export { boxShadow, customShadows, shadows, } from './shadows.js';
-export { zIndex, layers, } from './z-index.js';
+export { typography } from './typography.js';

package/dist/tokens/typography.d.ts

@@ -1,174 +1,81 @@
 /**
- * @packageDocumentation
- * Typography tokens compatible with Tailwind.
+ * Typography Design Tokens
+ *
+ * Centralized text styling classes to ensure consistency across all Micdrop apps.
+ * Import and use these instead of writing raw Tailwind classes for text.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { typography } from '@getmicdrop/svelte-components';
+ * </script>
+ *
+ * <h1 class={typography.h1}>Page Title</h1>
+ * <p class={typography.body}>Content here</p>
+ * <span class={typography.muted}>Helper text</span>
+ * ```
  */
-export declare const fontSize: {
-    readonly xs: readonly ["0.75rem", {
-        readonly lineHeight: "1rem";
-    }];
-    readonly sm: readonly ["0.875rem", {
-        readonly lineHeight: "1.25rem";
-    }];
-    readonly base: readonly ["1rem", {
-        readonly lineHeight: "1.5rem";
-    }];
-    readonly lg: readonly ["1.125rem", {
-        readonly lineHeight: "1.75rem";
-    }];
-    readonly xl: readonly ["1.25rem", {
-        readonly lineHeight: "1.75rem";
-    }];
-    readonly '2xl': readonly ["1.5rem", {
-        readonly lineHeight: "2rem";
-    }];
-    readonly '3xl': readonly ["1.875rem", {
-        readonly lineHeight: "2.25rem";
-    }];
-    readonly '4xl': readonly ["2.25rem", {
-        readonly lineHeight: "2.5rem";
-    }];
-    readonly '5xl': readonly ["3rem", {
-        readonly lineHeight: "1";
-    }];
-    readonly '6xl': readonly ["3.75rem", {
-        readonly lineHeight: "1";
-    }];
-    readonly '7xl': readonly ["4.5rem", {
-        readonly lineHeight: "1";
-    }];
-    readonly '8xl': readonly ["6rem", {
-        readonly lineHeight: "1";
-    }];
-    readonly '9xl': readonly ["8rem", {
-        readonly lineHeight: "1";
-    }];
-};
-export declare const fontWeight: {
-    readonly thin: "100";
-    readonly extralight: "200";
-    readonly light: "300";
-    readonly normal: "400";
-    readonly medium: "500";
-    readonly semibold: "600";
-    readonly bold: "700";
-    readonly extrabold: "800";
-    readonly black: "900";
-};
-export declare const fontFamily: {
-    readonly sans: readonly ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif"];
-    readonly mono: readonly ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
-    readonly serif: readonly ["ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"];
-};
-export declare const lineHeight: {
-    readonly none: "1";
-    readonly tight: "1.25";
-    readonly snug: "1.375";
-    readonly normal: "1.5";
-    readonly relaxed: "1.625";
-    readonly loose: "2";
-    readonly '3': ".75rem";
-    readonly '4': "1rem";
-    readonly '5': "1.25rem";
-    readonly '6': "1.5rem";
-    readonly '7': "1.75rem";
-    readonly '8': "2rem";
-    readonly '9': "2.25rem";
-    readonly '10': "2.5rem";
-};
-export declare const letterSpacing: {
-    readonly tighter: "-0.05em";
-    readonly tight: "-0.025em";
-    readonly normal: "0em";
-    readonly wide: "0.025em";
-    readonly wider: "0.05em";
-    readonly widest: "0.1em";
-};
 export declare const typography: {
-    readonly fontSize: {
-        readonly xs: readonly ["0.75rem", {
-            readonly lineHeight: "1rem";
-        }];
-        readonly sm: readonly ["0.875rem", {
-            readonly lineHeight: "1.25rem";
-        }];
-        readonly base: readonly ["1rem", {
-            readonly lineHeight: "1.5rem";
-        }];
-        readonly lg: readonly ["1.125rem", {
-            readonly lineHeight: "1.75rem";
-        }];
-        readonly xl: readonly ["1.25rem", {
-            readonly lineHeight: "1.75rem";
-        }];
-        readonly '2xl': readonly ["1.5rem", {
-            readonly lineHeight: "2rem";
-        }];
-        readonly '3xl': readonly ["1.875rem", {
-            readonly lineHeight: "2.25rem";
-        }];
-        readonly '4xl': readonly ["2.25rem", {
-            readonly lineHeight: "2.5rem";
-        }];
-        readonly '5xl': readonly ["3rem", {
-            readonly lineHeight: "1";
-        }];
-        readonly '6xl': readonly ["3.75rem", {
-            readonly lineHeight: "1";
-        }];
-        readonly '7xl': readonly ["4.5rem", {
-            readonly lineHeight: "1";
-        }];
-        readonly '8xl': readonly ["6rem", {
-            readonly lineHeight: "1";
-        }];
-        readonly '9xl': readonly ["8rem", {
-            readonly lineHeight: "1";
-        }];
-    };
-    readonly fontWeight: {
-        readonly thin: "100";
-        readonly extralight: "200";
-        readonly light: "300";
-        readonly normal: "400";
-        readonly medium: "500";
-        readonly semibold: "600";
-        readonly bold: "700";
-        readonly extrabold: "800";
-        readonly black: "900";
-    };
-    readonly fontFamily: {
-        readonly sans: readonly ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif"];
-        readonly mono: readonly ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
-        readonly serif: readonly ["ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"];
-    };
-    readonly lineHeight: {
-        readonly none: "1";
-        readonly tight: "1.25";
-        readonly snug: "1.375";
-        readonly normal: "1.5";
-        readonly relaxed: "1.625";
-        readonly loose: "2";
-        readonly '3': ".75rem";
-        readonly '4': "1rem";
-        readonly '5': "1.25rem";
-        readonly '6': "1.5rem";
-        readonly '7': "1.75rem";
-        readonly '8': "2rem";
-        readonly '9': "2.25rem";
-        readonly '10': "2.5rem";
-    };
-    readonly letterSpacing: {
-        readonly tighter: "-0.05em";
-        readonly tight: "-0.025em";
-        readonly normal: "0em";
-        readonly wide: "0.025em";
-        readonly wider: "0.05em";
-        readonly widest: "0.1em";
-    };
+    /** Page title - 2xl semibold */
+    readonly h1: "text-2xl font-semibold text-gray-900 dark:text-white";
+    /** Section title - xl semibold */
+    readonly h2: "text-xl font-semibold text-gray-900 dark:text-white";
+    /** Subsection title - lg semibold */
+    readonly h3: "text-lg font-semibold text-gray-900 dark:text-white";
+    /** Card/group title - base semibold */
+    readonly h4: "text-base font-semibold text-gray-900 dark:text-white";
+    /** Small title - sm semibold */
+    readonly h5: "text-sm font-semibold text-gray-900 dark:text-white";
+    /** Micro title - xs semibold */
+    readonly h6: "text-xs font-semibold text-gray-900 dark:text-white";
+    /** Standard body text */
+    readonly body: "text-base text-gray-900 dark:text-white leading-relaxed";
+    /** Body text - muted/secondary */
+    readonly bodyMuted: "text-base text-gray-500 dark:text-gray-400 leading-relaxed";
+    /** Small body text */
+    readonly sm: "text-sm text-gray-900 dark:text-white";
+    /** Small text - muted/secondary */
+    readonly smMuted: "text-sm text-gray-500 dark:text-gray-400";
+    /** Extra small text */
+    readonly xs: "text-xs text-gray-900 dark:text-white";
+    /** Extra small text - muted */
+    readonly xsMuted: "text-xs text-gray-500 dark:text-gray-400";
+    /** Muted text color only (no size) - for applying to elements with other size classes */
+    readonly textMuted: "text-gray-500 dark:text-gray-400";
+    /** Muted icon color - same as textMuted, for semantic clarity */
+    readonly iconMuted: "text-gray-500 dark:text-gray-400";
+    /** Form field label */
+    readonly label: "text-sm font-medium text-gray-900 dark:text-white";
+    /** Form field label - with standard spacing */
+    readonly labelSpaced: "text-sm font-medium text-gray-900 dark:text-white mb-2";
+    /** Helper/description text below inputs */
+    readonly helper: "text-sm text-gray-500 dark:text-gray-400";
+    /** Placeholder-style text */
+    readonly placeholder: "text-sm text-gray-400 dark:text-gray-500";
+    /** Error message text */
+    readonly error: "text-sm text-red-500 dark:text-red-400";
+    /** Success message text */
+    readonly success: "text-sm text-green-600 dark:text-green-400";
+    /** Warning message text */
+    readonly warning: "text-sm text-yellow-600 dark:text-yellow-400";
+    /** Info message text */
+    readonly info: "text-sm text-blue-600 dark:text-blue-400";
+    /** Standard link */
+    readonly link: "text-sm text-blue-700 dark:text-blue-500 hover:underline";
+    /** Muted/subtle link */
+    readonly linkMuted: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300";
+    /** Price/currency display */
+    readonly price: "text-lg font-semibold text-gray-900 dark:text-white";
+    /** Large price display */
+    readonly priceLg: "text-2xl font-bold text-gray-900 dark:text-white";
+    /** Badge/tag text */
+    readonly badge: "text-xs font-medium";
+    /** Table header */
+    readonly tableHeader: "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider";
+    /** Code/monospace */
+    readonly code: "text-sm font-mono text-gray-900 dark:text-white";
+    /** Muted code */
+    readonly codeMuted: "text-xs font-mono text-gray-500 dark:text-gray-400";
 };
-export type FontSizeKey = keyof typeof fontSize;
-export type FontWeightKey = keyof typeof fontWeight;
-export type FontFamilyKey = keyof typeof fontFamily;
-export type LineHeightKey = keyof typeof lineHeight;
-export type LetterSpacingKey = keyof typeof letterSpacing;
+export type TypographyToken = keyof typeof typography;
 //# sourceMappingURL=typography.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/typography.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;CAUb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMb,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,QAAQ,CAAC;AAChD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,aAAa,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU;IAKrB,gCAAgC;;IAGhC,kCAAkC;;IAGlC,qCAAqC;;IAGrC,uCAAuC;;IAGvC,gCAAgC;;IAGhC,gCAAgC;;IAOhC,yBAAyB;;IAGzB,kCAAkC;;IAGlC,sBAAsB;;IAGtB,mCAAmC;;IAGnC,uBAAuB;;IAGvB,+BAA+B;;IAG/B,yFAAyF;;IAGzF,iEAAiE;;IAOjE,uBAAuB;;IAGvB,+CAA+C;;IAG/C,2CAA2C;;IAG3C,6BAA6B;;IAO7B,yBAAyB;;IAGzB,2BAA2B;;IAG3B,2BAA2B;;IAG3B,wBAAwB;;IAOxB,oBAAoB;;IAGpB,wBAAwB;;IAOxB,6BAA6B;;IAG7B,0BAA0B;;IAG1B,qBAAqB;;IAGrB,mBAAmB;;IAGnB,qBAAqB;;IAGrB,iBAAiB;;CAET,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/tokens/typography.js

@@ -1,66 +1,97 @@
 /**
- * @packageDocumentation
- * Typography tokens compatible with Tailwind.
+ * Typography Design Tokens
+ *
+ * Centralized text styling classes to ensure consistency across all Micdrop apps.
+ * Import and use these instead of writing raw Tailwind classes for text.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { typography } from '@getmicdrop/svelte-components';
+ * </script>
+ *
+ * <h1 class={typography.h1}>Page Title</h1>
+ * <p class={typography.body}>Content here</p>
+ * <span class={typography.muted}>Helper text</span>
+ * ```
  */
-export const fontSize = {
-    xs: ['0.75rem', { lineHeight: '1rem' }],
-    sm: ['0.875rem', { lineHeight: '1.25rem' }],
-    base: ['1rem', { lineHeight: '1.5rem' }],
-    lg: ['1.125rem', { lineHeight: '1.75rem' }],
-    xl: ['1.25rem', { lineHeight: '1.75rem' }],
-    '2xl': ['1.5rem', { lineHeight: '2rem' }],
-    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
-    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
-    '5xl': ['3rem', { lineHeight: '1' }],
-    '6xl': ['3.75rem', { lineHeight: '1' }],
-    '7xl': ['4.5rem', { lineHeight: '1' }],
-    '8xl': ['6rem', { lineHeight: '1' }],
-    '9xl': ['8rem', { lineHeight: '1' }],
-};
-export const fontWeight = {
-    thin: '100',
-    extralight: '200',
-    light: '300',
-    normal: '400',
-    medium: '500',
-    semibold: '600',
-    bold: '700',
-    extrabold: '800',
-    black: '900',
-};
-export const fontFamily = {
-    sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif'],
-    mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
-    serif: ['ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
-};
-export const lineHeight = {
-    none: '1',
-    tight: '1.25',
-    snug: '1.375',
-    normal: '1.5',
-    relaxed: '1.625',
-    loose: '2',
-    '3': '.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '7': '1.75rem',
-    '8': '2rem',
-    '9': '2.25rem',
-    '10': '2.5rem',
-};
-export const letterSpacing = {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0em',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em',
-};
 export const typography = {
-    fontSize,
-    fontWeight,
-    fontFamily,
-    lineHeight,
-    letterSpacing,
+    // ==========================================================================
+    // HEADINGS
+    // ==========================================================================
+    /** Page title - 2xl semibold */
+    h1: "text-2xl font-semibold text-gray-900 dark:text-white",
+    /** Section title - xl semibold */
+    h2: "text-xl font-semibold text-gray-900 dark:text-white",
+    /** Subsection title - lg semibold */
+    h3: "text-lg font-semibold text-gray-900 dark:text-white",
+    /** Card/group title - base semibold */
+    h4: "text-base font-semibold text-gray-900 dark:text-white",
+    /** Small title - sm semibold */
+    h5: "text-sm font-semibold text-gray-900 dark:text-white",
+    /** Micro title - xs semibold */
+    h6: "text-xs font-semibold text-gray-900 dark:text-white",
+    // ==========================================================================
+    // BODY TEXT
+    // ==========================================================================
+    /** Standard body text */
+    body: "text-base text-gray-900 dark:text-white leading-relaxed",
+    /** Body text - muted/secondary */
+    bodyMuted: "text-base text-gray-500 dark:text-gray-400 leading-relaxed",
+    /** Small body text */
+    sm: "text-sm text-gray-900 dark:text-white",
+    /** Small text - muted/secondary */
+    smMuted: "text-sm text-gray-500 dark:text-gray-400",
+    /** Extra small text */
+    xs: "text-xs text-gray-900 dark:text-white",
+    /** Extra small text - muted */
+    xsMuted: "text-xs text-gray-500 dark:text-gray-400",
+    /** Muted text color only (no size) - for applying to elements with other size classes */
+    textMuted: "text-gray-500 dark:text-gray-400",
+    /** Muted icon color - same as textMuted, for semantic clarity */
+    iconMuted: "text-gray-500 dark:text-gray-400",
+    // ==========================================================================
+    // LABELS & FORM TEXT
+    // ==========================================================================
+    /** Form field label */
+    label: "text-sm font-medium text-gray-900 dark:text-white",
+    /** Form field label - with standard spacing */
+    labelSpaced: "text-sm font-medium text-gray-900 dark:text-white mb-2",
+    /** Helper/description text below inputs */
+    helper: "text-sm text-gray-500 dark:text-gray-400",
+    /** Placeholder-style text */
+    placeholder: "text-sm text-gray-400 dark:text-gray-500",
+    // ==========================================================================
+    // STATUS & FEEDBACK
+    // ==========================================================================
+    /** Error message text */
+    error: "text-sm text-red-500 dark:text-red-400",
+    /** Success message text */
+    success: "text-sm text-green-600 dark:text-green-400",
+    /** Warning message text */
+    warning: "text-sm text-yellow-600 dark:text-yellow-400",
+    /** Info message text */
+    info: "text-sm text-blue-600 dark:text-blue-400",
+    // ==========================================================================
+    // LINKS
+    // ==========================================================================
+    /** Standard link */
+    link: "text-sm text-blue-700 dark:text-blue-500 hover:underline",
+    /** Muted/subtle link */
+    linkMuted: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300",
+    // ==========================================================================
+    // SPECIAL CASES
+    // ==========================================================================
+    /** Price/currency display */
+    price: "text-lg font-semibold text-gray-900 dark:text-white",
+    /** Large price display */
+    priceLg: "text-2xl font-bold text-gray-900 dark:text-white",
+    /** Badge/tag text */
+    badge: "text-xs font-medium",
+    /** Table header */
+    tableHeader: "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider",
+    /** Code/monospace */
+    code: "text-sm font-mono text-gray-900 dark:text-white",
+    /** Muted code */
+    codeMuted: "text-xs font-mono text-gray-500 dark:text-gray-400",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.3.6",
+  "version": "5.3.10",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -91,7 +91,8 @@
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "format": "prettier --write \"src/**/*.{js,svelte,ts,css,json}\"",
-    "prepublishOnly": "npm run build:lib"
+    "prepublishOnly": "npm run build:lib",
+    "prepare": "husky"
   },
   "keywords": [
     "svelte",
@@ -178,6 +179,7 @@
     "cypress": "^15.1.0",
     "eslint": "^9.7.0",
     "eslint-plugin-svelte": "^2.43.0",
+    "husky": "^9.1.7",
     "jsdom": "^24.1.1",
     "postcss": "^8.4.39",
     "prettier": "^3.3.3",