@thesage/ui 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/fontThemes-Bwf7_lFg.d.mts +842 -0
  2. package/dist/fontThemes-Bwf7_lFg.d.ts +842 -0
  3. package/dist/hooks-C8PrmIXy.d.mts +225 -0
  4. package/dist/hooks-Ct9RBhg-.d.ts +225 -0
  5. package/dist/hooks.d.mts +3 -0
  6. package/dist/hooks.d.ts +3 -0
  7. package/dist/hooks.js +1342 -0
  8. package/dist/hooks.js.map +1 -0
  9. package/dist/hooks.mjs +1314 -0
  10. package/dist/hooks.mjs.map +1 -0
  11. package/dist/index-CsnncHSm.d.mts +23 -0
  12. package/dist/index-CsnncHSm.d.ts +23 -0
  13. package/dist/index.d.mts +2830 -0
  14. package/dist/index.d.ts +2830 -0
  15. package/dist/index.js +12637 -0
  16. package/dist/index.js.map +1 -0
  17. package/dist/index.mjs +12319 -0
  18. package/dist/index.mjs.map +1 -0
  19. package/dist/providers-Dv3LFGtJ.d.mts +17 -0
  20. package/dist/providers-Dv3LFGtJ.d.ts +17 -0
  21. package/dist/providers.d.mts +2 -0
  22. package/dist/providers.d.ts +2 -0
  23. package/dist/providers.js +1944 -0
  24. package/dist/providers.js.map +1 -0
  25. package/dist/providers.mjs +1918 -0
  26. package/dist/providers.mjs.map +1 -0
  27. package/dist/tokens.d.mts +831 -0
  28. package/dist/tokens.d.ts +831 -0
  29. package/dist/tokens.js +2399 -0
  30. package/dist/tokens.js.map +1 -0
  31. package/dist/tokens.mjs +2319 -0
  32. package/dist/tokens.mjs.map +1 -0
  33. package/dist/utils-DlJKRVzQ.d.mts +986 -0
  34. package/dist/utils-xrpHqxXR.d.ts +986 -0
  35. package/dist/utils.d.mts +4 -0
  36. package/dist/utils.d.ts +4 -0
  37. package/dist/utils.js +873 -0
  38. package/dist/utils.js.map +1 -0
  39. package/dist/utils.mjs +805 -0
  40. package/dist/utils.mjs.map +1 -0
  41. package/dist/validation-Bj1ye-v_.d.mts +114 -0
  42. package/dist/validation-Bj1ye-v_.d.ts +114 -0
  43. package/package.json +117 -0
@@ -0,0 +1,842 @@
1
+ /**
2
+ * Typography Tokens
3
+ *
4
+ * Central typography system for the design system.
5
+ * Defines font families, sizes, weights, line heights, and letter spacing.
6
+ *
7
+ * Architecture:
8
+ * - Font families are theme-specific and loaded via Next.js font optimization
9
+ * - Sizes, weights, etc. are universal across all themes
10
+ * - Easily extensible for new themes/font sets
11
+ *
12
+ * Usage:
13
+ * 1. Import in theme-specific apps to load fonts
14
+ * 2. Reference via CSS variables (--font-*, --text-*, etc.)
15
+ * 3. Add to Customizer for theme switching
16
+ */
17
+ /**
18
+ * Font Family Definitions
19
+ *
20
+ * Each theme has its own font personality:
21
+ * - Studio: Modern, geometric, professional
22
+ * - Sage: Elegant, serif + sans combo
23
+ * - Volt: Tech-forward, consistent throughout
24
+ *
25
+ * To add a new theme:
26
+ * 1. Add entry to fontFamilies
27
+ * 2. Load fonts in consuming app's layout
28
+ * 3. Map to CSS variables in ThemeProvider
29
+ */
30
+ declare const fontFamilies: {
31
+ readonly studio: {
32
+ readonly heading: "Outfit";
33
+ readonly body: "Manrope";
34
+ readonly mono: "Fira Code";
35
+ readonly description: "Modern geometric sans-serif with clean readability";
36
+ readonly usage: {
37
+ readonly heading: "Headlines, titles, emphasis";
38
+ readonly body: "Paragraphs, UI text, readable content";
39
+ readonly mono: "Code blocks, technical content";
40
+ };
41
+ };
42
+ readonly sage: {
43
+ readonly heading: "Lora";
44
+ readonly body: "Instrument Sans";
45
+ readonly serif: "Lora";
46
+ readonly sans: "Instrument Sans";
47
+ readonly mono: "Fira Code";
48
+ readonly description: "Elegant serif headings with modern sans body";
49
+ readonly usage: {
50
+ readonly heading: "Elegant headings, article titles";
51
+ readonly body: "Long-form content, UI text";
52
+ readonly serif: "Pull quotes, emphasis";
53
+ readonly sans: "UI elements, captions";
54
+ readonly mono: "Code blocks, technical content";
55
+ };
56
+ };
57
+ readonly volt: {
58
+ readonly heading: "Space Grotesk";
59
+ readonly body: "Space Grotesk";
60
+ readonly sans: "Space Grotesk";
61
+ readonly mono: "Fira Code";
62
+ readonly description: "Tech-forward, consistent geometric throughout";
63
+ readonly usage: {
64
+ readonly heading: "All headlines";
65
+ readonly body: "All body text (unified typography)";
66
+ readonly sans: "All sans-serif needs";
67
+ readonly mono: "Code blocks, technical content";
68
+ };
69
+ };
70
+ };
71
+ /**
72
+ * Type-safe theme names based on font families
73
+ */
74
+ type TypographyTheme = keyof typeof fontFamilies;
75
+ /**
76
+ * Font loading configuration for Next.js
77
+ * Use this to load fonts in app layouts
78
+ */
79
+ declare const fontLoadingConfig: {
80
+ readonly studio: {
81
+ readonly heading: {
82
+ readonly family: "Outfit";
83
+ readonly weights: readonly ["300", "400", "500", "600", "700", "800"];
84
+ };
85
+ readonly body: {
86
+ readonly family: "Manrope";
87
+ readonly weights: readonly ["300", "400", "500", "600", "700", "800"];
88
+ };
89
+ readonly mono: {
90
+ readonly family: "Fira Code";
91
+ readonly weights: readonly ["400", "500", "600", "700"];
92
+ };
93
+ };
94
+ readonly sage: {
95
+ readonly heading: {
96
+ readonly family: "Lora";
97
+ readonly weights: readonly ["400", "500", "600", "700"];
98
+ };
99
+ readonly body: {
100
+ readonly family: "Instrument Sans";
101
+ readonly weights: readonly ["400", "500", "600", "700"];
102
+ };
103
+ readonly mono: {
104
+ readonly family: "Fira Code";
105
+ readonly weights: readonly ["400", "500", "600", "700"];
106
+ };
107
+ };
108
+ readonly volt: {
109
+ readonly heading: {
110
+ readonly family: "Space Grotesk";
111
+ readonly weights: readonly ["300", "400", "500", "600", "700"];
112
+ };
113
+ readonly body: {
114
+ readonly family: "Space Grotesk";
115
+ readonly weights: readonly ["300", "400", "500", "600", "700"];
116
+ };
117
+ readonly mono: {
118
+ readonly family: "Fira Code";
119
+ readonly weights: readonly ["400", "500", "600", "700"];
120
+ };
121
+ };
122
+ };
123
+ /**
124
+ * Font Size Scale
125
+ *
126
+ * Based on a modular scale for harmonious typography.
127
+ * Mobile-first with responsive scaling.
128
+ *
129
+ * Naming convention:
130
+ * - xs, sm, base, lg, xl, 2xl, etc. for body text
131
+ * - Numeric for headings (aligns with h1-h6)
132
+ */
133
+ declare const fontSizes: {
134
+ readonly xs: {
135
+ readonly base: "0.75rem";
136
+ readonly mobile: "0.75rem";
137
+ };
138
+ readonly sm: {
139
+ readonly base: "0.875rem";
140
+ readonly mobile: "0.875rem";
141
+ };
142
+ readonly base: {
143
+ readonly base: "1rem";
144
+ readonly mobile: "1rem";
145
+ };
146
+ readonly lg: {
147
+ readonly base: "1.125rem";
148
+ readonly mobile: "1rem";
149
+ };
150
+ readonly xl: {
151
+ readonly base: "1.25rem";
152
+ readonly mobile: "1.125rem";
153
+ };
154
+ readonly '2xl': {
155
+ readonly base: "1.5rem";
156
+ readonly mobile: "1.25rem";
157
+ };
158
+ readonly '3xl': {
159
+ readonly base: "1.875rem";
160
+ readonly mobile: "1.5rem";
161
+ };
162
+ readonly '4xl': {
163
+ readonly base: "2.25rem";
164
+ readonly mobile: "1.875rem";
165
+ };
166
+ readonly '5xl': {
167
+ readonly base: "3rem";
168
+ readonly mobile: "2.25rem";
169
+ };
170
+ readonly '6xl': {
171
+ readonly base: "3.75rem";
172
+ readonly mobile: "2.5rem";
173
+ };
174
+ readonly '7xl': {
175
+ readonly base: "4.5rem";
176
+ readonly mobile: "3rem";
177
+ };
178
+ readonly '8xl': {
179
+ readonly base: "6rem";
180
+ readonly mobile: "3.75rem";
181
+ };
182
+ readonly '9xl': {
183
+ readonly base: "8rem";
184
+ readonly mobile: "4.5rem";
185
+ };
186
+ };
187
+ /**
188
+ * Semantic font size mappings
189
+ * Maps semantic names to scale values
190
+ */
191
+ declare const semanticSizes: {
192
+ readonly 'heading-1': "hero";
193
+ readonly 'heading-2': "5xl";
194
+ readonly 'heading-3': "4xl";
195
+ readonly 'heading-4': "2xl";
196
+ readonly 'heading-5': "xl";
197
+ readonly 'heading-6': "lg";
198
+ readonly 'body-large': "lg";
199
+ readonly body: "base";
200
+ readonly 'body-small': "sm";
201
+ readonly caption: "xs";
202
+ };
203
+ /**
204
+ * Font Weight Scale
205
+ *
206
+ * Standard numeric weights with semantic aliases.
207
+ * Not all fonts support all weights - check font-specific availability.
208
+ */
209
+ declare const fontWeights: {
210
+ readonly thin: "100";
211
+ readonly extralight: "200";
212
+ readonly light: "300";
213
+ readonly normal: "400";
214
+ readonly medium: "500";
215
+ readonly semibold: "600";
216
+ readonly bold: "700";
217
+ readonly extrabold: "800";
218
+ readonly black: "900";
219
+ };
220
+ /**
221
+ * Semantic weight mappings
222
+ */
223
+ declare const semanticWeights: {
224
+ readonly heading: "bold";
225
+ readonly 'heading-light': "semibold";
226
+ readonly 'heading-heavy': "extrabold";
227
+ readonly body: "normal";
228
+ readonly 'body-emphasis': "medium";
229
+ readonly 'body-strong': "semibold";
230
+ readonly caption: "normal";
231
+ };
232
+ /**
233
+ * Line Height Scale
234
+ *
235
+ * Unitless values for better scalability.
236
+ * Tighter for headings, relaxed for body text.
237
+ */
238
+ declare const lineHeights: {
239
+ readonly none: "1";
240
+ readonly tight: "1.25";
241
+ readonly snug: "1.375";
242
+ readonly normal: "1.5";
243
+ readonly relaxed: "1.625";
244
+ readonly loose: "1.75";
245
+ readonly extraloose: "2";
246
+ };
247
+ /**
248
+ * Semantic line height mappings
249
+ */
250
+ declare const semanticLineHeights: {
251
+ readonly heading: "tight";
252
+ readonly 'heading-display': "none";
253
+ readonly body: "normal";
254
+ readonly 'body-relaxed': "relaxed";
255
+ readonly caption: "snug";
256
+ };
257
+ /**
258
+ * Letter Spacing (Tracking) Scale
259
+ *
260
+ * In ems for scalability across font sizes.
261
+ * Negative for headings, positive for small caps.
262
+ */
263
+ declare const letterSpacing: {
264
+ readonly tighter: "-0.05em";
265
+ readonly tight: "-0.025em";
266
+ readonly normal: "0";
267
+ readonly wide: "0.025em";
268
+ readonly wider: "0.05em";
269
+ readonly widest: "0.1em";
270
+ };
271
+ /**
272
+ * Semantic letter spacing mappings
273
+ */
274
+ declare const semanticLetterSpacing: {
275
+ readonly heading: "tight";
276
+ readonly 'heading-display': "tighter";
277
+ readonly body: "normal";
278
+ readonly 'small-caps': "wider";
279
+ readonly 'all-caps': "widest";
280
+ };
281
+ /**
282
+ * Complete typography presets for common use cases
283
+ * Combines size, weight, line-height, and letter-spacing
284
+ *
285
+ * Usage: Apply entire preset to a component
286
+ */
287
+ declare const typePresets: {
288
+ readonly 'display-large': {
289
+ readonly size: {
290
+ readonly base: "6rem";
291
+ readonly mobile: "3.75rem";
292
+ };
293
+ readonly weight: "700";
294
+ readonly lineHeight: "1";
295
+ readonly letterSpacing: "-0.05em";
296
+ readonly description: "Large hero text, landing pages";
297
+ };
298
+ readonly display: {
299
+ readonly size: {
300
+ readonly base: "4.5rem";
301
+ readonly mobile: "3rem";
302
+ };
303
+ readonly weight: "700";
304
+ readonly lineHeight: "1.25";
305
+ readonly letterSpacing: "-0.025em";
306
+ readonly description: "Hero sections, major headings";
307
+ };
308
+ readonly 'heading-1': {
309
+ readonly size: {
310
+ readonly base: "3.75rem";
311
+ readonly mobile: "2.5rem";
312
+ };
313
+ readonly weight: "700";
314
+ readonly lineHeight: "1.25";
315
+ readonly letterSpacing: "-0.025em";
316
+ readonly description: "Page titles, h1";
317
+ };
318
+ readonly 'heading-2': {
319
+ readonly size: {
320
+ readonly base: "3rem";
321
+ readonly mobile: "2.25rem";
322
+ };
323
+ readonly weight: "700";
324
+ readonly lineHeight: "1.25";
325
+ readonly letterSpacing: "0";
326
+ readonly description: "Section titles, h2";
327
+ };
328
+ readonly 'heading-3': {
329
+ readonly size: {
330
+ readonly base: "2.25rem";
331
+ readonly mobile: "1.875rem";
332
+ };
333
+ readonly weight: "600";
334
+ readonly lineHeight: "1.375";
335
+ readonly letterSpacing: "0";
336
+ readonly description: "Subsection titles, h3";
337
+ };
338
+ readonly 'heading-4': {
339
+ readonly size: {
340
+ readonly base: "1.5rem";
341
+ readonly mobile: "1.25rem";
342
+ };
343
+ readonly weight: "600";
344
+ readonly lineHeight: "1.375";
345
+ readonly letterSpacing: "0";
346
+ readonly description: "Component titles, h4";
347
+ };
348
+ readonly 'heading-5': {
349
+ readonly size: {
350
+ readonly base: "1.25rem";
351
+ readonly mobile: "1.125rem";
352
+ };
353
+ readonly weight: "500";
354
+ readonly lineHeight: "1.5";
355
+ readonly letterSpacing: "0";
356
+ readonly description: "Small headings, h5";
357
+ };
358
+ readonly 'heading-6': {
359
+ readonly size: {
360
+ readonly base: "1.125rem";
361
+ readonly mobile: "1rem";
362
+ };
363
+ readonly weight: "500";
364
+ readonly lineHeight: "1.5";
365
+ readonly letterSpacing: "0";
366
+ readonly description: "Tiny headings, h6";
367
+ };
368
+ readonly 'body-large': {
369
+ readonly size: {
370
+ readonly base: "1.125rem";
371
+ readonly mobile: "1rem";
372
+ };
373
+ readonly weight: "400";
374
+ readonly lineHeight: "1.625";
375
+ readonly letterSpacing: "0";
376
+ readonly description: "Lead paragraphs, intro text";
377
+ };
378
+ readonly body: {
379
+ readonly size: {
380
+ readonly base: "1rem";
381
+ readonly mobile: "1rem";
382
+ };
383
+ readonly weight: "400";
384
+ readonly lineHeight: "1.5";
385
+ readonly letterSpacing: "0";
386
+ readonly description: "Default body text";
387
+ };
388
+ readonly 'body-small': {
389
+ readonly size: {
390
+ readonly base: "0.875rem";
391
+ readonly mobile: "0.875rem";
392
+ };
393
+ readonly weight: "400";
394
+ readonly lineHeight: "1.5";
395
+ readonly letterSpacing: "0";
396
+ readonly description: "Small body text, fine print";
397
+ };
398
+ readonly caption: {
399
+ readonly size: {
400
+ readonly base: "0.75rem";
401
+ readonly mobile: "0.75rem";
402
+ };
403
+ readonly weight: "400";
404
+ readonly lineHeight: "1.375";
405
+ readonly letterSpacing: "0.025em";
406
+ readonly description: "Captions, labels, metadata";
407
+ };
408
+ readonly overline: {
409
+ readonly size: {
410
+ readonly base: "0.75rem";
411
+ readonly mobile: "0.75rem";
412
+ };
413
+ readonly weight: "600";
414
+ readonly lineHeight: "1.5";
415
+ readonly letterSpacing: "0.1em";
416
+ readonly description: "Eyebrows, categories, all-caps labels";
417
+ };
418
+ };
419
+ /**
420
+ * Get CSS variable name for a font family
421
+ */
422
+ declare function getFontVariable(theme: TypographyTheme, type: 'heading' | 'body' | 'mono' | 'serif' | 'sans'): string;
423
+ /**
424
+ * Get all font family CSS variables for a theme
425
+ */
426
+ declare function getThemeFontVariables(theme: TypographyTheme): Record<string, string>;
427
+ /**
428
+ * Get responsive font size CSS
429
+ */
430
+ declare function getResponsiveFontSize(sizeKey: keyof typeof fontSizes): string;
431
+ /**
432
+ * Complete typography system export
433
+ * Import this for access to entire typography token set
434
+ *
435
+ * Note: This is the comprehensive typography system with font families,
436
+ * scales, presets, and utilities. For simple semantic aliases compatible
437
+ * with existing code, use `typography` from './base'
438
+ */
439
+ declare const typographySystem: {
440
+ readonly families: {
441
+ readonly studio: {
442
+ readonly heading: "Outfit";
443
+ readonly body: "Manrope";
444
+ readonly mono: "Fira Code";
445
+ readonly description: "Modern geometric sans-serif with clean readability";
446
+ readonly usage: {
447
+ readonly heading: "Headlines, titles, emphasis";
448
+ readonly body: "Paragraphs, UI text, readable content";
449
+ readonly mono: "Code blocks, technical content";
450
+ };
451
+ };
452
+ readonly sage: {
453
+ readonly heading: "Lora";
454
+ readonly body: "Instrument Sans";
455
+ readonly serif: "Lora";
456
+ readonly sans: "Instrument Sans";
457
+ readonly mono: "Fira Code";
458
+ readonly description: "Elegant serif headings with modern sans body";
459
+ readonly usage: {
460
+ readonly heading: "Elegant headings, article titles";
461
+ readonly body: "Long-form content, UI text";
462
+ readonly serif: "Pull quotes, emphasis";
463
+ readonly sans: "UI elements, captions";
464
+ readonly mono: "Code blocks, technical content";
465
+ };
466
+ };
467
+ readonly volt: {
468
+ readonly heading: "Space Grotesk";
469
+ readonly body: "Space Grotesk";
470
+ readonly sans: "Space Grotesk";
471
+ readonly mono: "Fira Code";
472
+ readonly description: "Tech-forward, consistent geometric throughout";
473
+ readonly usage: {
474
+ readonly heading: "All headlines";
475
+ readonly body: "All body text (unified typography)";
476
+ readonly sans: "All sans-serif needs";
477
+ readonly mono: "Code blocks, technical content";
478
+ };
479
+ };
480
+ };
481
+ readonly sizes: {
482
+ readonly xs: {
483
+ readonly base: "0.75rem";
484
+ readonly mobile: "0.75rem";
485
+ };
486
+ readonly sm: {
487
+ readonly base: "0.875rem";
488
+ readonly mobile: "0.875rem";
489
+ };
490
+ readonly base: {
491
+ readonly base: "1rem";
492
+ readonly mobile: "1rem";
493
+ };
494
+ readonly lg: {
495
+ readonly base: "1.125rem";
496
+ readonly mobile: "1rem";
497
+ };
498
+ readonly xl: {
499
+ readonly base: "1.25rem";
500
+ readonly mobile: "1.125rem";
501
+ };
502
+ readonly '2xl': {
503
+ readonly base: "1.5rem";
504
+ readonly mobile: "1.25rem";
505
+ };
506
+ readonly '3xl': {
507
+ readonly base: "1.875rem";
508
+ readonly mobile: "1.5rem";
509
+ };
510
+ readonly '4xl': {
511
+ readonly base: "2.25rem";
512
+ readonly mobile: "1.875rem";
513
+ };
514
+ readonly '5xl': {
515
+ readonly base: "3rem";
516
+ readonly mobile: "2.25rem";
517
+ };
518
+ readonly '6xl': {
519
+ readonly base: "3.75rem";
520
+ readonly mobile: "2.5rem";
521
+ };
522
+ readonly '7xl': {
523
+ readonly base: "4.5rem";
524
+ readonly mobile: "3rem";
525
+ };
526
+ readonly '8xl': {
527
+ readonly base: "6rem";
528
+ readonly mobile: "3.75rem";
529
+ };
530
+ readonly '9xl': {
531
+ readonly base: "8rem";
532
+ readonly mobile: "4.5rem";
533
+ };
534
+ };
535
+ readonly weights: {
536
+ readonly thin: "100";
537
+ readonly extralight: "200";
538
+ readonly light: "300";
539
+ readonly normal: "400";
540
+ readonly medium: "500";
541
+ readonly semibold: "600";
542
+ readonly bold: "700";
543
+ readonly extrabold: "800";
544
+ readonly black: "900";
545
+ };
546
+ readonly lineHeights: {
547
+ readonly none: "1";
548
+ readonly tight: "1.25";
549
+ readonly snug: "1.375";
550
+ readonly normal: "1.5";
551
+ readonly relaxed: "1.625";
552
+ readonly loose: "1.75";
553
+ readonly extraloose: "2";
554
+ };
555
+ readonly letterSpacing: {
556
+ readonly tighter: "-0.05em";
557
+ readonly tight: "-0.025em";
558
+ readonly normal: "0";
559
+ readonly wide: "0.025em";
560
+ readonly wider: "0.05em";
561
+ readonly widest: "0.1em";
562
+ };
563
+ readonly presets: {
564
+ readonly 'display-large': {
565
+ readonly size: {
566
+ readonly base: "6rem";
567
+ readonly mobile: "3.75rem";
568
+ };
569
+ readonly weight: "700";
570
+ readonly lineHeight: "1";
571
+ readonly letterSpacing: "-0.05em";
572
+ readonly description: "Large hero text, landing pages";
573
+ };
574
+ readonly display: {
575
+ readonly size: {
576
+ readonly base: "4.5rem";
577
+ readonly mobile: "3rem";
578
+ };
579
+ readonly weight: "700";
580
+ readonly lineHeight: "1.25";
581
+ readonly letterSpacing: "-0.025em";
582
+ readonly description: "Hero sections, major headings";
583
+ };
584
+ readonly 'heading-1': {
585
+ readonly size: {
586
+ readonly base: "3.75rem";
587
+ readonly mobile: "2.5rem";
588
+ };
589
+ readonly weight: "700";
590
+ readonly lineHeight: "1.25";
591
+ readonly letterSpacing: "-0.025em";
592
+ readonly description: "Page titles, h1";
593
+ };
594
+ readonly 'heading-2': {
595
+ readonly size: {
596
+ readonly base: "3rem";
597
+ readonly mobile: "2.25rem";
598
+ };
599
+ readonly weight: "700";
600
+ readonly lineHeight: "1.25";
601
+ readonly letterSpacing: "0";
602
+ readonly description: "Section titles, h2";
603
+ };
604
+ readonly 'heading-3': {
605
+ readonly size: {
606
+ readonly base: "2.25rem";
607
+ readonly mobile: "1.875rem";
608
+ };
609
+ readonly weight: "600";
610
+ readonly lineHeight: "1.375";
611
+ readonly letterSpacing: "0";
612
+ readonly description: "Subsection titles, h3";
613
+ };
614
+ readonly 'heading-4': {
615
+ readonly size: {
616
+ readonly base: "1.5rem";
617
+ readonly mobile: "1.25rem";
618
+ };
619
+ readonly weight: "600";
620
+ readonly lineHeight: "1.375";
621
+ readonly letterSpacing: "0";
622
+ readonly description: "Component titles, h4";
623
+ };
624
+ readonly 'heading-5': {
625
+ readonly size: {
626
+ readonly base: "1.25rem";
627
+ readonly mobile: "1.125rem";
628
+ };
629
+ readonly weight: "500";
630
+ readonly lineHeight: "1.5";
631
+ readonly letterSpacing: "0";
632
+ readonly description: "Small headings, h5";
633
+ };
634
+ readonly 'heading-6': {
635
+ readonly size: {
636
+ readonly base: "1.125rem";
637
+ readonly mobile: "1rem";
638
+ };
639
+ readonly weight: "500";
640
+ readonly lineHeight: "1.5";
641
+ readonly letterSpacing: "0";
642
+ readonly description: "Tiny headings, h6";
643
+ };
644
+ readonly 'body-large': {
645
+ readonly size: {
646
+ readonly base: "1.125rem";
647
+ readonly mobile: "1rem";
648
+ };
649
+ readonly weight: "400";
650
+ readonly lineHeight: "1.625";
651
+ readonly letterSpacing: "0";
652
+ readonly description: "Lead paragraphs, intro text";
653
+ };
654
+ readonly body: {
655
+ readonly size: {
656
+ readonly base: "1rem";
657
+ readonly mobile: "1rem";
658
+ };
659
+ readonly weight: "400";
660
+ readonly lineHeight: "1.5";
661
+ readonly letterSpacing: "0";
662
+ readonly description: "Default body text";
663
+ };
664
+ readonly 'body-small': {
665
+ readonly size: {
666
+ readonly base: "0.875rem";
667
+ readonly mobile: "0.875rem";
668
+ };
669
+ readonly weight: "400";
670
+ readonly lineHeight: "1.5";
671
+ readonly letterSpacing: "0";
672
+ readonly description: "Small body text, fine print";
673
+ };
674
+ readonly caption: {
675
+ readonly size: {
676
+ readonly base: "0.75rem";
677
+ readonly mobile: "0.75rem";
678
+ };
679
+ readonly weight: "400";
680
+ readonly lineHeight: "1.375";
681
+ readonly letterSpacing: "0.025em";
682
+ readonly description: "Captions, labels, metadata";
683
+ };
684
+ readonly overline: {
685
+ readonly size: {
686
+ readonly base: "0.75rem";
687
+ readonly mobile: "0.75rem";
688
+ };
689
+ readonly weight: "600";
690
+ readonly lineHeight: "1.5";
691
+ readonly letterSpacing: "0.1em";
692
+ readonly description: "Eyebrows, categories, all-caps labels";
693
+ };
694
+ };
695
+ readonly semantic: {
696
+ readonly sizes: {
697
+ readonly 'heading-1': "hero";
698
+ readonly 'heading-2': "5xl";
699
+ readonly 'heading-3': "4xl";
700
+ readonly 'heading-4': "2xl";
701
+ readonly 'heading-5': "xl";
702
+ readonly 'heading-6': "lg";
703
+ readonly 'body-large': "lg";
704
+ readonly body: "base";
705
+ readonly 'body-small': "sm";
706
+ readonly caption: "xs";
707
+ };
708
+ readonly weights: {
709
+ readonly heading: "bold";
710
+ readonly 'heading-light': "semibold";
711
+ readonly 'heading-heavy': "extrabold";
712
+ readonly body: "normal";
713
+ readonly 'body-emphasis': "medium";
714
+ readonly 'body-strong': "semibold";
715
+ readonly caption: "normal";
716
+ };
717
+ readonly lineHeights: {
718
+ readonly heading: "tight";
719
+ readonly 'heading-display': "none";
720
+ readonly body: "normal";
721
+ readonly 'body-relaxed': "relaxed";
722
+ readonly caption: "snug";
723
+ };
724
+ readonly letterSpacing: {
725
+ readonly heading: "tight";
726
+ readonly 'heading-display': "tighter";
727
+ readonly body: "normal";
728
+ readonly 'small-caps': "wider";
729
+ readonly 'all-caps': "widest";
730
+ };
731
+ };
732
+ readonly utils: {
733
+ readonly getFontVariable: typeof getFontVariable;
734
+ readonly getThemeFontVariables: typeof getThemeFontVariables;
735
+ readonly getResponsiveFontSize: typeof getResponsiveFontSize;
736
+ };
737
+ };
738
+ /**
739
+ * Type exports for TypeScript consumers
740
+ */
741
+ type FontSize = keyof typeof fontSizes;
742
+ type FontWeight = keyof typeof fontWeights;
743
+ type LineHeight = keyof typeof lineHeights;
744
+ type LetterSpacing = keyof typeof letterSpacing;
745
+ type TypePreset = keyof typeof typePresets;
746
+
747
+ /**
748
+ * Curated Font Theme Library
749
+ * Pre-designed, harmonious font pairings for quick customization
750
+ *
751
+ * Philosophy: Provide expert font pairings with clear guidance (constraints),
752
+ * while enabling creative freedom through custom themes. Typography is as
753
+ * crucial to brand identity as color—treat it with systematic rigor.
754
+ */
755
+ interface FontTheme {
756
+ id: string;
757
+ name: string;
758
+ description: string;
759
+ category: FontThemeCategory;
760
+ heading: string;
761
+ body: string;
762
+ mono: string;
763
+ headingWeight?: string;
764
+ bodyWeight?: string;
765
+ letterSpacing?: {
766
+ heading?: string;
767
+ body?: string;
768
+ };
769
+ lineHeight?: {
770
+ heading?: string;
771
+ body?: string;
772
+ };
773
+ isCustom?: boolean;
774
+ wcagReadable?: boolean;
775
+ mood?: string[];
776
+ bestFor?: string;
777
+ pairing?: string;
778
+ scale?: TypographyScale;
779
+ }
780
+ type FontThemeCategory = 'professional' | 'creative' | 'editorial' | 'tech' | 'friendly' | 'minimal' | 'luxury' | 'playful' | 'custom';
781
+ /**
782
+ * Type Level
783
+ * Detailed properties for a single type level (Display, H1, Body, etc.)
784
+ */
785
+ interface TypeLevel {
786
+ fontFamily: string;
787
+ weight: number;
788
+ size: number;
789
+ lineHeight: number;
790
+ letterSpacing: string;
791
+ }
792
+ /**
793
+ * Typography Scale
794
+ * Complete type scale with all 8 levels for granular control
795
+ */
796
+ interface TypographyScale {
797
+ display: TypeLevel;
798
+ h1: TypeLevel;
799
+ h2: TypeLevel;
800
+ h3: TypeLevel;
801
+ h4: TypeLevel;
802
+ body: TypeLevel;
803
+ small: TypeLevel;
804
+ code: TypeLevel;
805
+ }
806
+ /**
807
+ * Curated Font Theme Collection
808
+ *
809
+ * Each theme represents a carefully chosen font pairing that works well together.
810
+ * Pairings consider contrast (serif vs sans), readability, mood, and use case.
811
+ */
812
+ declare const fontThemes: FontTheme[];
813
+ /**
814
+ * Get font themes by category
815
+ */
816
+ declare function getFontThemesByCategory(category: FontThemeCategory): FontTheme[];
817
+ /**
818
+ * Get font themes by mood/tag
819
+ */
820
+ declare function getFontThemesByMood(mood: string): FontTheme[];
821
+ /**
822
+ * Search font themes by use case
823
+ */
824
+ declare function getFontThemesForUseCase(useCase: string): FontTheme[];
825
+ /**
826
+ * Get accessible font themes only (WCAG-readable)
827
+ */
828
+ declare function getAccessibleFontThemes(): FontTheme[];
829
+ /**
830
+ * Get font theme by ID
831
+ */
832
+ declare function getFontThemeById(id: string): FontTheme | undefined;
833
+ /**
834
+ * Generate a detailed typography scale from a simple FontTheme
835
+ * Uses modular scale (1.25 ratio) for sizes and sensible defaults for other properties
836
+ *
837
+ * @param fontTheme - The simple font theme to generate a scale from
838
+ * @returns TypographyScale with all 8 type levels populated with sensible defaults
839
+ */
840
+ declare function generateScale(fontTheme: FontTheme): TypographyScale;
841
+
842
+ export { getAccessibleFontThemes as A, getFontThemeById as B, generateScale as C, type FontSize as F, type LineHeight as L, type TypographyTheme as T, fontLoadingConfig as a, fontSizes as b, fontWeights as c, semanticWeights as d, semanticLineHeights as e, fontFamilies as f, letterSpacing as g, semanticLetterSpacing as h, getFontVariable as i, getThemeFontVariables as j, getResponsiveFontSize as k, lineHeights as l, typographySystem as m, type FontWeight as n, type LetterSpacing as o, type TypePreset as p, type FontTheme as q, type FontThemeCategory as r, semanticSizes as s, typePresets as t, type TypeLevel as u, type TypographyScale as v, fontThemes as w, getFontThemesByCategory as x, getFontThemesByMood as y, getFontThemesForUseCase as z };