@fpkit/acss 3.6.0 → 3.7.0

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 (49) hide show
  1. package/libs/{chunk-URBGDUFN.cjs → chunk-75YQDONV.cjs} +3 -3
  2. package/libs/chunk-AOFQDQVS.cjs +17 -0
  3. package/libs/chunk-AOFQDQVS.cjs.map +1 -0
  4. package/libs/{chunk-ZF6Y7W57.js → chunk-G3TFKMWB.js} +2 -2
  5. package/libs/chunk-Q7OAQLUT.js +10 -0
  6. package/libs/chunk-Q7OAQLUT.js.map +1 -0
  7. package/libs/components/dialog/dialog.cjs +4 -4
  8. package/libs/components/dialog/dialog.js +2 -2
  9. package/libs/components/heading/heading.cjs +2 -2
  10. package/libs/components/heading/heading.d.cts +1 -1
  11. package/libs/components/heading/heading.d.ts +1 -1
  12. package/libs/components/heading/heading.js +1 -1
  13. package/libs/components/title/title.css +1 -0
  14. package/libs/components/title/title.css.map +1 -0
  15. package/libs/components/title/title.min.css +3 -0
  16. package/libs/{heading-7446cb46.d.ts → heading-81eef89a.d.ts} +42 -0
  17. package/libs/index.cjs +5 -5
  18. package/libs/index.css +1 -1
  19. package/libs/index.css.map +1 -1
  20. package/libs/index.d.cts +1 -1
  21. package/libs/index.d.ts +1 -1
  22. package/libs/index.js +2 -2
  23. package/package.json +2 -2
  24. package/src/components/box/box.stories.tsx +1 -1
  25. package/src/components/cluster/cluster.stories.tsx +1 -1
  26. package/src/components/col/README.mdx +233 -9
  27. package/src/components/col/STYLES.mdx +1380 -0
  28. package/src/components/col/col.stories.tsx +1 -1
  29. package/src/components/grid/grid.stories.tsx +130 -35
  30. package/src/components/row/row.stories.tsx +1 -1
  31. package/src/components/stack/stack.stories.tsx +219 -60
  32. package/src/components/title/README.mdx +87 -1
  33. package/src/components/title/STYLES.mdx +501 -0
  34. package/src/components/title/title.scss +51 -0
  35. package/src/components/title/title.stories.tsx +158 -0
  36. package/src/components/title/title.test.tsx +113 -0
  37. package/src/components/title/title.tsx +53 -1
  38. package/src/index.scss +1 -0
  39. package/src/sass/columns.stories.tsx +434 -10
  40. package/src/styles/index.css +74 -0
  41. package/src/styles/index.css.map +1 -1
  42. package/src/styles/title/title.css +75 -0
  43. package/src/styles/title/title.css.map +1 -0
  44. package/libs/chunk-2C3YLBWP.cjs +0 -17
  45. package/libs/chunk-2C3YLBWP.cjs.map +0 -1
  46. package/libs/chunk-KDMX3FAW.js +0 -10
  47. package/libs/chunk-KDMX3FAW.js.map +0 -1
  48. /package/libs/{chunk-URBGDUFN.cjs.map → chunk-75YQDONV.cjs.map} +0 -0
  49. /package/libs/{chunk-ZF6Y7W57.js.map → chunk-G3TFKMWB.js.map} +0 -0
package/src/components/stack/stack.stories.tsx CHANGED
@@ -7,7 +7,7 @@ import "./stack.scss";
7
7
  const meta: Meta<typeof Stack> = {
8
8
  title: "FP.React Components/Layout/Stack",
9
9
  component: Stack,
10
- tags: ["autodocs", "rc", "layout"],
10
+ tags: ["autodocs", "beta", "layout"],
11
11
  parameters: {
12
12
  docs: {
13
13
  description: {
@@ -49,9 +49,15 @@ export const Default: Story = {
49
49
  gap: "md",
50
50
  children: (
51
51
  <>
52
- <div style={{ padding: "1rem", backgroundColor: "#f0f0f0" }}>Item 1</div>
53
- <div style={{ padding: "1rem", backgroundColor: "#e0e0e0" }}>Item 2</div>
54
- <div style={{ padding: "1rem", backgroundColor: "#d0d0d0" }}>Item 3</div>
52
+ <div style={{ padding: "1rem", backgroundColor: "#f0f0f0" }}>
53
+ Item 1
54
+ </div>
55
+ <div style={{ padding: "1rem", backgroundColor: "#e0e0e0" }}>
56
+ Item 2
57
+ </div>
58
+ <div style={{ padding: "1rem", backgroundColor: "#d0d0d0" }}>
59
+ Item 3
60
+ </div>
55
61
  </>
56
62
  ),
57
63
  },
@@ -82,41 +88,71 @@ export const GapSizes: Story = {
82
88
  <div>
83
89
  <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Gap XS (4-8px)</h4>
84
90
  <Stack gap="xs">
85
- <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>Item</div>
86
- <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>Item</div>
87
- <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>Item</div>
91
+ <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>
92
+ Item
93
+ </div>
94
+ <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>
95
+ Item
96
+ </div>
97
+ <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>
98
+ Item
99
+ </div>
88
100
  </Stack>
89
101
  </div>
90
102
  <div>
91
103
  <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Gap SM (8-12px)</h4>
92
104
  <Stack gap="sm">
93
- <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>Item</div>
94
- <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>Item</div>
95
- <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>Item</div>
105
+ <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>
106
+ Item
107
+ </div>
108
+ <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>
109
+ Item
110
+ </div>
111
+ <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>
112
+ Item
113
+ </div>
96
114
  </Stack>
97
115
  </div>
98
116
  <div>
99
117
  <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Gap MD (12-18px)</h4>
100
118
  <Stack gap="md">
101
- <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>Item</div>
102
- <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>Item</div>
103
- <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>Item</div>
119
+ <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>
120
+ Item
121
+ </div>
122
+ <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>
123
+ Item
124
+ </div>
125
+ <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>
126
+ Item
127
+ </div>
104
128
  </Stack>
105
129
  </div>
106
130
  <div>
107
131
  <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Gap LG (16-24px)</h4>
108
132
  <Stack gap="lg">
109
- <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>Item</div>
110
- <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>Item</div>
111
- <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>Item</div>
133
+ <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>
134
+ Item
135
+ </div>
136
+ <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>
137
+ Item
138
+ </div>
139
+ <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>
140
+ Item
141
+ </div>
112
142
  </Stack>
113
143
  </div>
114
144
  <div>
115
145
  <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Gap XL (24-32px)</h4>
116
146
  <Stack gap="xl">
117
- <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>Item</div>
118
- <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>Item</div>
119
- <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>Item</div>
147
+ <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>
148
+ Item
149
+ </div>
150
+ <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0" }}>
151
+ Item
152
+ </div>
153
+ <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0" }}>
154
+ Item
155
+ </div>
120
156
  </Stack>
121
157
  </div>
122
158
  </div>
@@ -133,7 +169,9 @@ export const Horizontal: Story = {
133
169
  gap: "sm",
134
170
  children: (
135
171
  <>
136
- <button type="button" style={{ padding: "0.5rem 1rem" }}>Cancel</button>
172
+ <button type="button" style={{ padding: "0.5rem 1rem" }}>
173
+ Cancel
174
+ </button>
137
175
  <button
138
176
  type="button"
139
177
  style={{
@@ -218,7 +256,10 @@ export const Navigation: Story = {
218
256
  <a href="#about" style={{ textDecoration: "none", color: "#0066cc" }}>
219
257
  About
220
258
  </a>
221
- <a href="#contact" style={{ textDecoration: "none", color: "#0066cc" }}>
259
+ <a
260
+ href="#contact"
261
+ style={{ textDecoration: "none", color: "#0066cc" }}
262
+ >
222
263
  Contact
223
264
  </a>
224
265
  </Stack>
@@ -244,23 +285,25 @@ export const ContentSections: Story = {
244
285
  <>
245
286
  <Stack gap="sm">
246
287
  <h1 style={{ margin: 0 }}>Article Title</h1>
247
- <p style={{ margin: 0, color: "#666" }}>Published on December 3, 2025</p>
288
+ <p style={{ margin: 0, color: "#666" }}>
289
+ Published on December 3, 2025
290
+ </p>
248
291
  </Stack>
249
292
  <Stack gap="md">
250
293
  <p style={{ margin: 0 }}>
251
- This is the introduction paragraph with some meaningful content about the
252
- article topic.
294
+ This is the introduction paragraph with some meaningful content
295
+ about the article topic.
253
296
  </p>
254
297
  <p style={{ margin: 0 }}>
255
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
256
- tempor incididunt ut labore et dolore magna aliqua.
298
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
299
+ eiusmod tempor incididunt ut labore et dolore magna aliqua.
257
300
  </p>
258
301
  </Stack>
259
302
  <Stack gap="md">
260
303
  <h2 style={{ margin: 0 }}>Section Heading</h2>
261
304
  <p style={{ margin: 0 }}>
262
- More content goes here with proper spacing between sections using the
263
- Stack component.
305
+ More content goes here with proper spacing between sections using
306
+ the Stack component.
264
307
  </p>
265
308
  </Stack>
266
309
  </>
@@ -276,50 +319,122 @@ export const Alignments: Story = {
276
319
  render: () => (
277
320
  <Stack gap="xl">
278
321
  <div>
279
- <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Align Start (default)</h4>
280
- <Stack gap="sm" align="start" styles={{ border: "2px dashed #ccc", padding: "1rem" }}>
281
- <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0", width: "200px" }}>
322
+ <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>
323
+ Align Start (default)
324
+ </h4>
325
+ <Stack
326
+ gap="sm"
327
+ align="start"
328
+ styles={{ border: "2px dashed #ccc", padding: "1rem" }}
329
+ >
330
+ <div
331
+ style={{
332
+ padding: "0.5rem",
333
+ backgroundColor: "#f0f0f0",
334
+ width: "200px",
335
+ }}
336
+ >
282
337
  Short item
283
338
  </div>
284
- <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0", width: "300px" }}>
339
+ <div
340
+ style={{
341
+ padding: "0.5rem",
342
+ backgroundColor: "#e0e0e0",
343
+ width: "300px",
344
+ }}
345
+ >
285
346
  Medium item
286
347
  </div>
287
- <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0", width: "150px" }}>
348
+ <div
349
+ style={{
350
+ padding: "0.5rem",
351
+ backgroundColor: "#d0d0d0",
352
+ width: "150px",
353
+ }}
354
+ >
288
355
  Small
289
356
  </div>
290
357
  </Stack>
291
358
  </div>
292
359
  <div>
293
360
  <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Align Center</h4>
294
- <Stack gap="sm" align="center" styles={{ border: "2px dashed #ccc", padding: "1rem" }}>
295
- <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0", width: "200px" }}>
361
+ <Stack
362
+ gap="sm"
363
+ align="center"
364
+ styles={{ border: "2px dashed #ccc", padding: "1rem" }}
365
+ >
366
+ <div
367
+ style={{
368
+ padding: "0.5rem",
369
+ backgroundColor: "#f0f0f0",
370
+ width: "200px",
371
+ }}
372
+ >
296
373
  Short item
297
374
  </div>
298
- <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0", width: "300px" }}>
375
+ <div
376
+ style={{
377
+ padding: "0.5rem",
378
+ backgroundColor: "#e0e0e0",
379
+ width: "300px",
380
+ }}
381
+ >
299
382
  Medium item
300
383
  </div>
301
- <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0", width: "150px" }}>
384
+ <div
385
+ style={{
386
+ padding: "0.5rem",
387
+ backgroundColor: "#d0d0d0",
388
+ width: "150px",
389
+ }}
390
+ >
302
391
  Small
303
392
  </div>
304
393
  </Stack>
305
394
  </div>
306
395
  <div>
307
396
  <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Align End</h4>
308
- <Stack gap="sm" align="end" styles={{ border: "2px dashed #ccc", padding: "1rem" }}>
309
- <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0", width: "200px" }}>
397
+ <Stack
398
+ gap="sm"
399
+ align="end"
400
+ styles={{ border: "2px dashed #ccc", padding: "1rem" }}
401
+ >
402
+ <div
403
+ style={{
404
+ padding: "0.5rem",
405
+ backgroundColor: "#f0f0f0",
406
+ width: "200px",
407
+ }}
408
+ >
310
409
  Short item
311
410
  </div>
312
- <div style={{ padding: "0.5rem", backgroundColor: "#e0e0e0", width: "300px" }}>
411
+ <div
412
+ style={{
413
+ padding: "0.5rem",
414
+ backgroundColor: "#e0e0e0",
415
+ width: "300px",
416
+ }}
417
+ >
313
418
  Medium item
314
419
  </div>
315
- <div style={{ padding: "0.5rem", backgroundColor: "#d0d0d0", width: "150px" }}>
420
+ <div
421
+ style={{
422
+ padding: "0.5rem",
423
+ backgroundColor: "#d0d0d0",
424
+ width: "150px",
425
+ }}
426
+ >
316
427
  Small
317
428
  </div>
318
429
  </Stack>
319
430
  </div>
320
431
  <div>
321
432
  <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Align Stretch</h4>
322
- <Stack gap="sm" align="stretch" styles={{ border: "2px dashed #ccc", padding: "1rem" }}>
433
+ <Stack
434
+ gap="sm"
435
+ align="stretch"
436
+ styles={{ border: "2px dashed #ccc", padding: "1rem" }}
437
+ >
323
438
  <div style={{ padding: "0.5rem", backgroundColor: "#f0f0f0" }}>
324
439
  Stretched item (full width)
325
440
  </div>
@@ -343,16 +458,28 @@ export const Justifications: Story = {
343
458
  render: () => (
344
459
  <Stack gap="xl">
345
460
  <div>
346
- <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>Justify Start (default)</h4>
461
+ <h4 style={{ margin: 0, marginBottom: "0.5rem" }}>
462
+ Justify Start (default)
463
+ </h4>
347
464
  <Stack
348
465
  direction="horizontal"
349
466
  gap="sm"
350
467
  justify="start"
351
- styles={{ border: "2px dashed #ccc", padding: "1rem", minHeight: "100px" }}
468
+ styles={{
469
+ border: "2px dashed #ccc",
470
+ padding: "1rem",
471
+ minHeight: "100px",
472
+ }}
352
473
  >
353
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0" }}>Item 1</div>
354
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#e0e0e0" }}>Item 2</div>
355
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#d0d0d0" }}>Item 3</div>
474
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0" }}>
475
+ Item 1
476
+ </div>
477
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#e0e0e0" }}>
478
+ Item 2
479
+ </div>
480
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#d0d0d0" }}>
481
+ Item 3
482
+ </div>
356
483
  </Stack>
357
484
  </div>
358
485
  <div>
@@ -361,11 +488,21 @@ export const Justifications: Story = {
361
488
  direction="horizontal"
362
489
  gap="sm"
363
490
  justify="center"
364
- styles={{ border: "2px dashed #ccc", padding: "1rem", minHeight: "100px" }}
491
+ styles={{
492
+ border: "2px dashed #ccc",
493
+ padding: "1rem",
494
+ minHeight: "100px",
495
+ }}
365
496
  >
366
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0" }}>Item 1</div>
367
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#e0e0e0" }}>Item 2</div>
368
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#d0d0d0" }}>Item 3</div>
497
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0" }}>
498
+ Item 1
499
+ </div>
500
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#e0e0e0" }}>
501
+ Item 2
502
+ </div>
503
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#d0d0d0" }}>
504
+ Item 3
505
+ </div>
369
506
  </Stack>
370
507
  </div>
371
508
  <div>
@@ -374,11 +511,21 @@ export const Justifications: Story = {
374
511
  direction="horizontal"
375
512
  gap="sm"
376
513
  justify="end"
377
- styles={{ border: "2px dashed #ccc", padding: "1rem", minHeight: "100px" }}
514
+ styles={{
515
+ border: "2px dashed #ccc",
516
+ padding: "1rem",
517
+ minHeight: "100px",
518
+ }}
378
519
  >
379
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0" }}>Item 1</div>
380
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#e0e0e0" }}>Item 2</div>
381
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#d0d0d0" }}>Item 3</div>
520
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0" }}>
521
+ Item 1
522
+ </div>
523
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#e0e0e0" }}>
524
+ Item 2
525
+ </div>
526
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#d0d0d0" }}>
527
+ Item 3
528
+ </div>
382
529
  </Stack>
383
530
  </div>
384
531
  <div>
@@ -387,11 +534,21 @@ export const Justifications: Story = {
387
534
  direction="horizontal"
388
535
  gap="sm"
389
536
  justify="between"
390
- styles={{ border: "2px dashed #ccc", padding: "1rem", minHeight: "100px" }}
537
+ styles={{
538
+ border: "2px dashed #ccc",
539
+ padding: "1rem",
540
+ minHeight: "100px",
541
+ }}
391
542
  >
392
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0" }}>Item 1</div>
393
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#e0e0e0" }}>Item 2</div>
394
- <div style={{ padding: "0.5rem 1rem", backgroundColor: "#d0d0d0" }}>Item 3</div>
543
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#f0f0f0" }}>
544
+ Item 1
545
+ </div>
546
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#e0e0e0" }}>
547
+ Item 2
548
+ </div>
549
+ <div style={{ padding: "0.5rem 1rem", backgroundColor: "#d0d0d0" }}>
550
+ Item 3
551
+ </div>
395
552
  </Stack>
396
553
  </div>
397
554
  </Stack>
@@ -474,7 +631,9 @@ export const NestedStacks: Story = {
474
631
  }}
475
632
  >
476
633
  <h3 style={{ margin: 0 }}>Card 2</h3>
477
- <p style={{ margin: 0, color: "#666" }}>Each card is an independent Stack</p>
634
+ <p style={{ margin: 0, color: "#666" }}>
635
+ Each card is an independent Stack
636
+ </p>
478
637
  <button
479
638
  type="button"
480
639
  style={{ padding: "0.5rem 1rem", alignSelf: "flex-start" }}
package/src/components/title/README.mdx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Meta } from "@storybook/addon-docs/blocks";
2
+ import * as TitleStories from './title.stories';
2
3
 
3
- <Meta title="FP.REACT Components/Title/Readme" />
4
+ <Meta of={TitleStories} title="FP.REACT Components/Title/Readme" />
4
5
 
5
6
  # Title
6
7
 
@@ -69,6 +70,8 @@ function MyComponent() {
69
70
  |------|------|---------|-------------|
70
71
  | `level` | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `"h2"` | The semantic heading level to render |
71
72
  | `children` | `React.ReactNode` | *required* | The content to display in the heading |
73
+ | `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | - | Visual size variant (independent of semantic level) |
74
+ | `color` | `"primary" \| "secondary" \| "accent" \| "muted" \| "inherit"` | - | Color variant (all variants are WCAG AA compliant) |
72
75
  | `id` | `string` | - | Unique identifier (useful for anchor links) |
73
76
  | `ui` | `string` | - | Data attribute for fpkit styling hooks |
74
77
  | `className` | `string` | - | CSS class names to apply |
@@ -145,6 +148,89 @@ The Title component supports multiple styling approaches:
145
148
  </Title>
146
149
  ```
147
150
 
151
+ ### Size Variants
152
+
153
+ Control the visual size independently of the semantic heading level:
154
+
155
+ ```tsx
156
+ <Title level="h2" size="xs">Extra Small Title</Title>
157
+ <Title level="h2" size="sm">Small Title</Title>
158
+ <Title level="h2" size="md">Medium Title</Title>
159
+ <Title level="h2" size="lg">Large Title</Title>
160
+ <Title level="h2" size="xl">Extra Large Title</Title>
161
+ <Title level="h2" size="2xl">2X Large Title</Title>
162
+ ```
163
+
164
+ **Size Reference:**
165
+ - `xs`: 0.75rem (12px)
166
+ - `sm`: 0.875rem (14px)
167
+ - `md`: 1rem (16px)
168
+ - `lg`: 1.5rem (24px)
169
+ - `xl`: 2rem (32px)
170
+ - `2xl`: 2.5rem (40px)
171
+
172
+ ### Color Variants
173
+
174
+ Apply WCAG AA compliant color variants:
175
+
176
+ ```tsx
177
+ <Title size="lg" color="primary">Primary Color</Title>
178
+ <Title size="lg" color="secondary">Secondary Color</Title>
179
+ <Title size="lg" color="accent">Accent Color</Title>
180
+ <Title size="lg" color="muted">Muted Color</Title>
181
+ <Title size="lg" color="inherit">Inherit Color</Title>
182
+ ```
183
+
184
+ **Color Contrast Ratios:**
185
+ - `primary`: #1e3a8a - 8.59:1 contrast ratio
186
+ - `secondary`: #4b5563 - 7.56:1 contrast ratio
187
+ - `accent`: #7c3aed - 4.62:1 contrast ratio
188
+ - `muted`: #6b7280 - 5.49:1 contrast ratio
189
+ - `inherit`: Inherits color from parent element
190
+
191
+ All color variants meet or exceed the WCAG 2.1 Level AA contrast requirement of 4.5:1.
192
+
193
+ ### Combined Size and Color
194
+
195
+ Combine size and color for flexible design:
196
+
197
+ ```tsx
198
+ <Title level="h1" size="2xl" color="primary">
199
+ Large Primary Heading
200
+ </Title>
201
+
202
+ <Title level="h2" size="lg" color="secondary">
203
+ Medium Secondary Heading
204
+ </Title>
205
+
206
+ <Title level="h3" size="md" color="accent">
207
+ Small Accent Heading
208
+ </Title>
209
+ ```
210
+
211
+ ### Visual vs Semantic Hierarchy
212
+
213
+ Separate visual appearance from semantic structure for design flexibility:
214
+
215
+ ```tsx
216
+ {/* Semantically an h2, but visually appears larger */}
217
+ <Title level="h2" size="xl" color="primary">
218
+ Visually Prominent Section
219
+ </Title>
220
+
221
+ {/* Semantically the main heading (h1), but styled smaller */}
222
+ <Title level="h1" size="md" color="secondary">
223
+ Subtle Page Title
224
+ </Title>
225
+ ```
226
+
227
+ This approach allows you to:
228
+ - Meet design requirements without sacrificing accessibility
229
+ - Maintain proper document outline for screen readers (h1 → h2 → h3...)
230
+ - Create visual hierarchy that matches design specifications
231
+
232
+ **Example Use Case:** A page with multiple sections may need an h2 visually larger than an h1 for design emphasis, while maintaining proper semantic structure for screen readers.
233
+
148
234
  ---
149
235
 
150
236
  ## Accessibility