@getmicdrop/svelte-components 4.1.4 → 5.0.0

package/dist/tokens/shadows.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @packageDocumentation
+ * Box shadow definitions compatible with Tailwind.
+ */
+export declare const boxShadow: {
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+    readonly none: "none";
+};
+export declare const customShadows: {
+    readonly modal: "0 0 31px 0 rgb(0 0 0 / 0.1)";
+    readonly dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly cardHover: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly buttonHover: "0 4px 6px -1px rgb(0 0 0 / 0.1)";
+    readonly toast: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly tooltip: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly focusRing: "0 0 0 3px rgb(59 130 246 / 0.5)";
+    readonly focusRingDanger: "0 0 0 3px rgb(239 68 68 / 0.5)";
+};
+export declare const shadows: {
+    readonly modal: "0 0 31px 0 rgb(0 0 0 / 0.1)";
+    readonly dropdown: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly cardHover: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly buttonHover: "0 4px 6px -1px rgb(0 0 0 / 0.1)";
+    readonly toast: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly tooltip: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly focusRing: "0 0 0 3px rgb(59 130 246 / 0.5)";
+    readonly focusRingDanger: "0 0 0 3px rgb(239 68 68 / 0.5)";
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+    readonly none: "none";
+};
+export type BoxShadowKey = keyof typeof boxShadow;
+export type CustomShadowKey = keyof typeof customShadows;
+export type ShadowKey = keyof typeof shadows;
+//# sourceMappingURL=shadows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/shadows.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS;;;;;;;;;CASZ,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;CAShB,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAGV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,SAAS,CAAC;AAClD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,aAAa,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,OAAO,CAAC"}

package/dist/tokens/shadows.js

@@ -0,0 +1,28 @@
+/**
+ * @packageDocumentation
+ * Box shadow definitions compatible with Tailwind.
+ */
+export const boxShadow = {
+    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+    none: 'none',
+};
+export const customShadows = {
+    modal: '0 0 31px 0 rgb(0 0 0 / 0.1)',
+    dropdown: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    cardHover: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    buttonHover: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+    toast: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    tooltip: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    focusRing: '0 0 0 3px rgb(59 130 246 / 0.5)',
+    focusRingDanger: '0 0 0 3px rgb(239 68 68 / 0.5)',
+};
+export const shadows = {
+    ...boxShadow,
+    ...customShadows,
+};

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @packageDocumentation
+ * Tailwind-compatible spacing scale.
+ */
+export declare const spacing: {
+    readonly px: "1px";
+    readonly '0': "0px";
+    readonly '0.5': "0.125rem";
+    readonly '1': "0.25rem";
+    readonly '1.5': "0.375rem";
+    readonly '2': "0.5rem";
+    readonly '2.5': "0.625rem";
+    readonly '3': "0.75rem";
+    readonly '3.5': "0.875rem";
+    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 '11': "2.75rem";
+    readonly '12': "3rem";
+    readonly '14': "3.5rem";
+    readonly '16': "4rem";
+    readonly '20': "5rem";
+    readonly '24': "6rem";
+    readonly '28': "7rem";
+    readonly '32': "8rem";
+    readonly '36': "9rem";
+    readonly '40': "10rem";
+    readonly '44': "11rem";
+    readonly '48': "12rem";
+    readonly '52': "13rem";
+    readonly '56': "14rem";
+    readonly '60': "15rem";
+    readonly '64': "16rem";
+    readonly '72': "18rem";
+    readonly '80': "20rem";
+    readonly '96': "24rem";
+};
+export declare const spacingAliases: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+    readonly '3xl': "4rem";
+    readonly cardPadding: "1rem";
+    readonly modalPadding: "1.5rem";
+    readonly formGap: "1rem";
+    readonly buttonPaddingX: "1rem";
+    readonly buttonPaddingY: "0.5rem";
+    readonly inputPaddingX: "0.75rem";
+    readonly inputPaddingY: "0.5rem";
+    readonly tableCellPaddingX: "1rem";
+    readonly tableCellPaddingY: "0.75rem";
+};
+export type SpacingKey = keyof typeof spacing;
+export type SpacingAlias = keyof typeof spacingAliases;
+//# sourceMappingURL=spacing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCV,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;CAiBjB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,cAAc,CAAC"}

package/dist/tokens/spacing.js

@@ -0,0 +1,59 @@
+/**
+ * @packageDocumentation
+ * Tailwind-compatible spacing scale.
+ */
+export const spacing = {
+    'px': '1px',
+    '0': '0px',
+    '0.5': '0.125rem',
+    '1': '0.25rem',
+    '1.5': '0.375rem',
+    '2': '0.5rem',
+    '2.5': '0.625rem',
+    '3': '0.75rem',
+    '3.5': '0.875rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '7': '1.75rem',
+    '8': '2rem',
+    '9': '2.25rem',
+    '10': '2.5rem',
+    '11': '2.75rem',
+    '12': '3rem',
+    '14': '3.5rem',
+    '16': '4rem',
+    '20': '5rem',
+    '24': '6rem',
+    '28': '7rem',
+    '32': '8rem',
+    '36': '9rem',
+    '40': '10rem',
+    '44': '11rem',
+    '48': '12rem',
+    '52': '13rem',
+    '56': '14rem',
+    '60': '15rem',
+    '64': '16rem',
+    '72': '18rem',
+    '80': '20rem',
+    '96': '24rem',
+};
+export const spacingAliases = {
+    xs: spacing['1'],
+    sm: spacing['2'],
+    md: spacing['4'],
+    lg: spacing['6'],
+    xl: spacing['8'],
+    '2xl': spacing['12'],
+    '3xl': spacing['16'],
+    cardPadding: spacing['4'],
+    modalPadding: spacing['6'],
+    formGap: spacing['4'],
+    buttonPaddingX: spacing['4'],
+    buttonPaddingY: spacing['2'],
+    inputPaddingX: spacing['3'],
+    inputPaddingY: spacing['2'],
+    tableCellPaddingX: spacing['4'],
+    tableCellPaddingY: spacing['3'],
+};

package/dist/tokens/tokens.css

@@ -0,0 +1,87 @@
+:root {
+  --bg-primary: 0 0% 100%;
+  --bg-secondary: 220 7% 97%;
+  --bg-tertiary: 220 7% 94%;
+  --bg-quaternary: 220 6% 91%;
+
+  --text-primary: 221 50% 10%;
+  --text-secondary: 220 20% 18%;
+  --text-tertiary: 221 9% 44%;
+  --text-head: 221 9% 44%;
+
+  --brand-primary: 209 99% 50%;
+
+  --accent-warning: 28 100% 59%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 131 77% 35%;
+
+  --stroke-primary: 216 6% 84%;
+  --stroke-secondary: 216 6% 84%;
+  --border: 220 13% 91%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --hover-primary: 210 20% 96%;
+
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 220 20% 18%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 221 50% 10%;
+
+  --BG-Primary: var(--bg-primary);
+  --BG-Secondary: var(--bg-secondary);
+  --BG-Tertiary: var(--bg-tertiary);
+  --BG-Quaternary: var(--bg-quaternary);
+  --Text-Primary: var(--text-primary);
+  --Text-Secondary: var(--text-secondary);
+  --Text-Tartiary: var(--text-tertiary);
+  --Text-Head: var(--text-head);
+  --Brand-Primary: var(--brand-primary);
+  --Accent-Warning: var(--accent-warning);
+  --Accent-Danger: var(--accent-danger);
+  --Accent-Success: var(--accent-success);
+  --Stroke-Primary: var(--stroke-primary);
+  --Stroke-Secondary: var(--stroke-secondary);
+}
+
+[data-theme="dark"],
+.dark {
+  --bg-primary: 220 20% 18%;
+  --bg-secondary: 221 50% 10%;
+  --bg-tertiary: 221 50% 6%;
+  --bg-quaternary: 0 0% 0%;
+
+  --text-primary: 220 7% 97%;
+  --text-secondary: 220 7% 94%;
+  --text-tertiary: 220 6% 91%;
+  --text-head: 220 9% 70%;
+
+  --brand-primary: 220 89% 63%;
+
+  --accent-warning: 30 100% 70%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 142 71% 45%;
+
+  --stroke-primary: 220 20% 28%;
+  --stroke-secondary: 220 20% 28%;
+  --border: 215 27.9% 16.9%;
+
+  --card: 224 20% 10%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --hover-primary: 222 10% 39%;
+
+  --sidebar-background: 220 20% 18%;
+  --sidebar-foreground: 220 7% 94%;
+  --sidebar-border: 215 20% 20%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 220 7% 97%;
+}

package/dist/tokens/typography.d.ts

@@ -0,0 +1,174 @@
+/**
+ * @packageDocumentation
+ * Typography tokens compatible with Tailwind.
+ */
+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";
+    };
+};
+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;
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +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"}

package/dist/tokens/typography.js

@@ -0,0 +1,66 @@
+/**
+ * @packageDocumentation
+ * Typography tokens compatible with Tailwind.
+ */
+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,
+};

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

@@ -0,0 +1,32 @@
+/**
+ * @packageDocumentation
+ * Z-index scale for stacking contexts.
+ */
+export declare const zIndex: {
+    readonly auto: "auto";
+    readonly '0': "0";
+    readonly '10': "10";
+    readonly '20': "20";
+    readonly '30': "30";
+    readonly '40': "40";
+    readonly '50': "50";
+    readonly '51': "51";
+    readonly '60': "60";
+    readonly '70': "70";
+    readonly '100': "100";
+};
+export declare const layers: {
+    readonly base: "0";
+    readonly sticky: "10";
+    readonly navigation: "20";
+    readonly dropdown: "30";
+    readonly overlay: "40";
+    readonly modal: "50";
+    readonly modalContent: "51";
+    readonly toast: "60";
+    readonly tooltip: "70";
+    readonly critical: "100";
+};
+export type ZIndexKey = keyof typeof zIndex;
+export type LayerKey = keyof typeof layers;
+//# sourceMappingURL=z-index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"z-index.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/z-index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAC;AAC5C,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAC"}

package/dist/tokens/z-index.js

@@ -0,0 +1,29 @@
+/**
+ * @packageDocumentation
+ * Z-index scale for stacking contexts.
+ */
+export const zIndex = {
+    auto: 'auto',
+    '0': '0',
+    '10': '10',
+    '20': '20',
+    '30': '30',
+    '40': '40',
+    '50': '50',
+    '51': '51',
+    '60': '60',
+    '70': '70',
+    '100': '100',
+};
+export const layers = {
+    base: zIndex['0'],
+    sticky: zIndex['10'],
+    navigation: zIndex['20'],
+    dropdown: zIndex['30'],
+    overlay: zIndex['40'],
+    modal: zIndex['50'],
+    modalContent: zIndex['51'],
+    toast: zIndex['60'],
+    tooltip: zIndex['70'],
+    critical: zIndex['100'],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "4.1.4",
+  "version": "5.0.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -13,6 +13,36 @@
       "import": "./dist/index.js"
     },
     "./styles": "./dist/styles.css",
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
+    "./tokens/colors": {
+      "types": "./dist/tokens/colors.d.ts",
+      "import": "./dist/tokens/colors.js"
+    },
+    "./tokens/spacing": {
+      "types": "./dist/tokens/spacing.d.ts",
+      "import": "./dist/tokens/spacing.js"
+    },
+    "./tokens/typography": {
+      "types": "./dist/tokens/typography.d.ts",
+      "import": "./dist/tokens/typography.js"
+    },
+    "./tokens/radius": {
+      "types": "./dist/tokens/radius.d.ts",
+      "import": "./dist/tokens/radius.js"
+    },
+    "./tokens/shadows": {
+      "types": "./dist/tokens/shadows.d.ts",
+      "import": "./dist/tokens/shadows.js"
+    },
+    "./tokens/z-index": {
+      "types": "./dist/tokens/z-index.d.ts",
+      "import": "./dist/tokens/z-index.js"
+    },
+    "./tokens/css": "./dist/tokens/tokens.css",
+    "./tailwind-preset": "./dist/tailwind/preset.cjs",
     "./primitives/*": {
       "svelte": "./dist/primitives/*",
       "import": "./dist/primitives/*"