@glyphui/ui 0.0.0-stage → 0.1.1

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 (112) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +137 -2
  3. package/dist/data-table.d.ts +110 -0
  4. package/dist/data-table.js +225 -0
  5. package/dist/field-DXZD0l8w.js +107 -0
  6. package/dist/field-context-B8cYheXz.js +321 -0
  7. package/dist/form.d.ts +79 -0
  8. package/dist/form.js +84 -0
  9. package/dist/index-BWK4czIG.d.ts +233 -0
  10. package/dist/index.d.ts +2155 -0
  11. package/dist/index.js +1529 -0
  12. package/dist/registry-BGSJoiLq.d.ts +9 -0
  13. package/dist/states-BxPjCUxz.js +287 -0
  14. package/dist/tv-DuMh7UH2.d.ts +6 -0
  15. package/package.json +113 -3
  16. package/src/components/avatar/avatar.styles.ts +22 -0
  17. package/src/components/avatar/avatar.tsx +62 -0
  18. package/src/components/avatar/index.ts +2 -0
  19. package/src/components/badge/badge.styles.ts +69 -0
  20. package/src/components/badge/badge.tsx +30 -0
  21. package/src/components/badge/index.ts +2 -0
  22. package/src/components/button/button.styles.ts +43 -0
  23. package/src/components/button/button.tsx +77 -0
  24. package/src/components/button/index.ts +2 -0
  25. package/src/components/card/card.styles.ts +32 -0
  26. package/src/components/card/card.tsx +91 -0
  27. package/src/components/card/index.ts +11 -0
  28. package/src/components/checkbox/checkbox.tsx +39 -0
  29. package/src/components/checkbox/index.ts +1 -0
  30. package/src/components/container/container.tsx +35 -0
  31. package/src/components/container/index.ts +1 -0
  32. package/src/components/eyebrow/eyebrow.styles.ts +14 -0
  33. package/src/components/eyebrow/eyebrow.tsx +19 -0
  34. package/src/components/eyebrow/index.ts +2 -0
  35. package/src/components/field/field-context.ts +40 -0
  36. package/src/components/field/field.styles.ts +23 -0
  37. package/src/components/field/field.tsx +109 -0
  38. package/src/components/field/index.ts +3 -0
  39. package/src/components/heading/heading.styles.ts +16 -0
  40. package/src/components/heading/heading.tsx +26 -0
  41. package/src/components/heading/index.ts +2 -0
  42. package/src/components/input/index.ts +2 -0
  43. package/src/components/input/input.styles.ts +36 -0
  44. package/src/components/input/input.tsx +33 -0
  45. package/src/components/kbd/index.ts +1 -0
  46. package/src/components/kbd/kbd.tsx +21 -0
  47. package/src/components/label/index.ts +1 -0
  48. package/src/components/label/label.tsx +21 -0
  49. package/src/components/section/index.ts +1 -0
  50. package/src/components/section/section.tsx +39 -0
  51. package/src/components/segmented-control/index.ts +6 -0
  52. package/src/components/segmented-control/segmented-control.tsx +79 -0
  53. package/src/components/select/index.ts +1 -0
  54. package/src/components/select/select.tsx +133 -0
  55. package/src/components/separator/index.ts +1 -0
  56. package/src/components/separator/separator.tsx +29 -0
  57. package/src/components/skeleton/index.ts +1 -0
  58. package/src/components/skeleton/skeleton.tsx +20 -0
  59. package/src/components/spinner/index.ts +2 -0
  60. package/src/components/spinner/spinner.styles.ts +19 -0
  61. package/src/components/spinner/spinner.tsx +42 -0
  62. package/src/components/stack/index.ts +1 -0
  63. package/src/components/stack/stack.tsx +62 -0
  64. package/src/components/switch/index.ts +1 -0
  65. package/src/components/switch/switch.tsx +48 -0
  66. package/src/components/table/index.ts +10 -0
  67. package/src/components/table/table.tsx +90 -0
  68. package/src/components/tabs/index.ts +1 -0
  69. package/src/components/tabs/tabs.tsx +92 -0
  70. package/src/components/text/index.ts +2 -0
  71. package/src/components/text/text.styles.ts +32 -0
  72. package/src/components/text/text.tsx +17 -0
  73. package/src/components/textarea/index.ts +1 -0
  74. package/src/components/textarea/textarea.tsx +27 -0
  75. package/src/components/tooltip/index.ts +1 -0
  76. package/src/components/tooltip/tooltip.tsx +42 -0
  77. package/src/hooks/index.ts +4 -0
  78. package/src/hooks/use-component-config.ts +42 -0
  79. package/src/hooks/use-controllable-state.ts +27 -0
  80. package/src/hooks/use-media-query.ts +14 -0
  81. package/src/hooks/use-scrolled.ts +14 -0
  82. package/src/index.ts +52 -0
  83. package/src/internal/icons.tsx +99 -0
  84. package/src/patterns/app-shell/app-shell-context.ts +27 -0
  85. package/src/patterns/app-shell/app-shell.styles.ts +127 -0
  86. package/src/patterns/app-shell/app-shell.tsx +81 -0
  87. package/src/patterns/app-shell/index.ts +16 -0
  88. package/src/patterns/app-shell/navbar.tsx +119 -0
  89. package/src/patterns/app-shell/page-header.tsx +30 -0
  90. package/src/patterns/app-shell/sidebar.tsx +163 -0
  91. package/src/patterns/async/async.tsx +83 -0
  92. package/src/patterns/async/index.ts +10 -0
  93. package/src/patterns/async/states.tsx +128 -0
  94. package/src/patterns/data-table/data-table.tsx +367 -0
  95. package/src/patterns/data-table/index.ts +2 -0
  96. package/src/patterns/form/form.tsx +150 -0
  97. package/src/patterns/form/index.ts +13 -0
  98. package/src/provider/color-mode.tsx +133 -0
  99. package/src/provider/glyph-context.ts +42 -0
  100. package/src/provider/glyph-provider.tsx +41 -0
  101. package/src/provider/index.ts +18 -0
  102. package/src/provider/theme-scope.tsx +36 -0
  103. package/src/provider/theme-style.tsx +19 -0
  104. package/src/register.ts +69 -0
  105. package/src/themes.ts +56 -0
  106. package/src/utils/cn.ts +12 -0
  107. package/src/utils/compose-refs.ts +11 -0
  108. package/src/utils/registry.ts +9 -0
  109. package/src/utils/styles.ts +13 -0
  110. package/src/utils/tv.ts +7 -0
  111. package/src/utils/tw-merge-config.ts +14 -0
  112. package/styles.css +178 -0
@@ -0,0 +1,2155 @@
1
+ import { n as tv, t as VariantProps } from "./tv-DuMh7UH2.js";
2
+ import { a as IconButton, c as fieldStyles, i as ButtonProps, l as ButtonVariants, n as FieldProps, o as IconButtonProps, r as Button, s as FieldVariants, t as Field, u as buttonStyles } from "./index-BWK4czIG.js";
3
+ import { t as StylesEntry } from "./registry-BGSJoiLq.js";
4
+ import { ColorMode, ColorMode as ColorMode$1, ColorToken, ComponentName, ComponentOverrides, GlyphComponentRegistry, RadiusToken, ShadowToken, TextToken, Theme, Theme as Theme$1, ThemeInput, Tone, defineTheme, themeToCss, tokenVar } from "@glyphui/tokens";
5
+ import { Avatar as Avatar$1, Checkbox as Checkbox$1, Label as Label$1, Select as Select$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "radix-ui";
6
+ import { ComponentProps, DependencyList, ElementType, MouseEvent, MouseEventHandler, ReactNode } from "react";
7
+ import { ClassValue } from "clsx";
8
+ //#region src/components/avatar/avatar.styles.d.ts
9
+ export declare const avatarStyles: import("tailwind-variants").TVReturnType<{
10
+ size: {
11
+ xs: {
12
+ root: string;
13
+ fallback: string;
14
+ };
15
+ sm: {
16
+ root: string;
17
+ fallback: string;
18
+ };
19
+ md: {
20
+ root: string;
21
+ fallback: string;
22
+ };
23
+ lg: {
24
+ root: string;
25
+ fallback: string;
26
+ };
27
+ };
28
+ }, {
29
+ root: string;
30
+ image: string;
31
+ fallback: string;
32
+ group: string;
33
+ }, undefined, {
34
+ size: {
35
+ xs: {
36
+ root: string;
37
+ fallback: string;
38
+ };
39
+ sm: {
40
+ root: string;
41
+ fallback: string;
42
+ };
43
+ md: {
44
+ root: string;
45
+ fallback: string;
46
+ };
47
+ lg: {
48
+ root: string;
49
+ fallback: string;
50
+ };
51
+ };
52
+ }, {
53
+ root: string;
54
+ image: string;
55
+ fallback: string;
56
+ group: string;
57
+ }, import("tailwind-variants").TVReturnTypeLike<{
58
+ size: {
59
+ xs: {
60
+ root: string;
61
+ fallback: string;
62
+ };
63
+ sm: {
64
+ root: string;
65
+ fallback: string;
66
+ };
67
+ md: {
68
+ root: string;
69
+ fallback: string;
70
+ };
71
+ lg: {
72
+ root: string;
73
+ fallback: string;
74
+ };
75
+ };
76
+ }, {
77
+ root: string;
78
+ image: string;
79
+ fallback: string;
80
+ group: string;
81
+ }>>;
82
+ type AvatarVariants = VariantProps<typeof avatarStyles>;
83
+ //#endregion
84
+ //#region src/components/badge/badge.styles.d.ts
85
+ export declare const badgeStyles: import("tailwind-variants").TVReturnType<{
86
+ tone: {
87
+ neutral: {};
88
+ primary: {};
89
+ success: {};
90
+ warning: {};
91
+ danger: {};
92
+ info: {};
93
+ };
94
+ variant: {
95
+ soft: {};
96
+ solid: {};
97
+ outline: {
98
+ base: string;
99
+ };
100
+ };
101
+ }, {
102
+ base: string[];
103
+ dot: string;
104
+ }, undefined, {
105
+ tone: {
106
+ neutral: {};
107
+ primary: {};
108
+ success: {};
109
+ warning: {};
110
+ danger: {};
111
+ info: {};
112
+ };
113
+ variant: {
114
+ soft: {};
115
+ solid: {};
116
+ outline: {
117
+ base: string;
118
+ };
119
+ };
120
+ }, {
121
+ base: string[];
122
+ dot: string;
123
+ }, import("tailwind-variants").TVReturnTypeLike<{
124
+ tone: {
125
+ neutral: {};
126
+ primary: {};
127
+ success: {};
128
+ warning: {};
129
+ danger: {};
130
+ info: {};
131
+ };
132
+ variant: {
133
+ soft: {};
134
+ solid: {};
135
+ outline: {
136
+ base: string;
137
+ };
138
+ };
139
+ }, {
140
+ base: string[];
141
+ dot: string;
142
+ }>>;
143
+ type BadgeVariants = VariantProps<typeof badgeStyles>;
144
+ //#endregion
145
+ //#region src/components/card/card.styles.d.ts
146
+ export declare const cardStyles: import("tailwind-variants").TVReturnType<{
147
+ variant: {
148
+ outline: {
149
+ root: string;
150
+ };
151
+ elevated: {
152
+ root: string;
153
+ };
154
+ ghost: {
155
+ root: string;
156
+ };
157
+ interactive: {
158
+ root: string;
159
+ };
160
+ };
161
+ padding: {
162
+ none: {
163
+ root: string;
164
+ };
165
+ sm: {
166
+ root: string;
167
+ };
168
+ md: {
169
+ root: string;
170
+ };
171
+ lg: {
172
+ root: string;
173
+ };
174
+ };
175
+ }, {
176
+ root: string[];
177
+ header: string;
178
+ title: string;
179
+ description: string;
180
+ body: string;
181
+ footer: string;
182
+ }, undefined, {
183
+ variant: {
184
+ outline: {
185
+ root: string;
186
+ };
187
+ elevated: {
188
+ root: string;
189
+ };
190
+ ghost: {
191
+ root: string;
192
+ };
193
+ interactive: {
194
+ root: string;
195
+ };
196
+ };
197
+ padding: {
198
+ none: {
199
+ root: string;
200
+ };
201
+ sm: {
202
+ root: string;
203
+ };
204
+ md: {
205
+ root: string;
206
+ };
207
+ lg: {
208
+ root: string;
209
+ };
210
+ };
211
+ }, {
212
+ root: string[];
213
+ header: string;
214
+ title: string;
215
+ description: string;
216
+ body: string;
217
+ footer: string;
218
+ }, import("tailwind-variants").TVReturnTypeLike<{
219
+ variant: {
220
+ outline: {
221
+ root: string;
222
+ };
223
+ elevated: {
224
+ root: string;
225
+ };
226
+ ghost: {
227
+ root: string;
228
+ };
229
+ interactive: {
230
+ root: string;
231
+ };
232
+ };
233
+ padding: {
234
+ none: {
235
+ root: string;
236
+ };
237
+ sm: {
238
+ root: string;
239
+ };
240
+ md: {
241
+ root: string;
242
+ };
243
+ lg: {
244
+ root: string;
245
+ };
246
+ };
247
+ }, {
248
+ root: string[];
249
+ header: string;
250
+ title: string;
251
+ description: string;
252
+ body: string;
253
+ footer: string;
254
+ }>>;
255
+ type CardVariants = VariantProps<typeof cardStyles>;
256
+ //#endregion
257
+ //#region src/components/checkbox/checkbox.d.ts
258
+ export declare const checkboxStyles: import("tailwind-variants").TVReturnType<{
259
+ [key: string]: {
260
+ [key: string]: import("tailwind-variants").ClassValue | {
261
+ root?: import("tailwind-variants").ClassValue;
262
+ indicator?: import("tailwind-variants").ClassValue;
263
+ };
264
+ };
265
+ } | {
266
+ [x: string]: {
267
+ [x: string]: import("tailwind-variants").ClassValue | {
268
+ root?: import("tailwind-variants").ClassValue;
269
+ indicator?: import("tailwind-variants").ClassValue;
270
+ };
271
+ };
272
+ } | {}, {
273
+ root: string[];
274
+ indicator: string;
275
+ }, undefined, {
276
+ [key: string]: {
277
+ [key: string]: import("tailwind-variants").ClassValue | {
278
+ root?: import("tailwind-variants").ClassValue;
279
+ indicator?: import("tailwind-variants").ClassValue;
280
+ };
281
+ };
282
+ } | {}, {
283
+ root: string[];
284
+ indicator: string;
285
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
286
+ root: string[];
287
+ indicator: string;
288
+ }>>;
289
+ export declare function Checkbox(inProps: ComponentProps<typeof Checkbox$1.Root>): import("react").JSX.Element;
290
+ //#endregion
291
+ //#region src/components/eyebrow/eyebrow.styles.d.ts
292
+ export declare const eyebrowStyles: import("tailwind-variants").TVReturnType<{
293
+ tone: {
294
+ muted: {
295
+ base: string;
296
+ };
297
+ primary: {
298
+ base: string;
299
+ };
300
+ };
301
+ }, {
302
+ base: string;
303
+ }, undefined, {
304
+ tone: {
305
+ muted: {
306
+ base: string;
307
+ };
308
+ primary: {
309
+ base: string;
310
+ };
311
+ };
312
+ }, {
313
+ base: string;
314
+ }, import("tailwind-variants").TVReturnTypeLike<{
315
+ tone: {
316
+ muted: {
317
+ base: string;
318
+ };
319
+ primary: {
320
+ base: string;
321
+ };
322
+ };
323
+ }, {
324
+ base: string;
325
+ }>>;
326
+ type EyebrowVariants = VariantProps<typeof eyebrowStyles>;
327
+ //#endregion
328
+ //#region src/components/heading/heading.styles.d.ts
329
+ export declare const headingStyles: import("tailwind-variants").TVReturnType<{
330
+ size: {
331
+ display: {
332
+ base: string;
333
+ };
334
+ h1: {
335
+ base: string;
336
+ };
337
+ h2: {
338
+ base: string;
339
+ };
340
+ h3: {
341
+ base: string;
342
+ };
343
+ h4: {
344
+ base: string;
345
+ };
346
+ };
347
+ }, {
348
+ base: string;
349
+ }, undefined, {
350
+ size: {
351
+ display: {
352
+ base: string;
353
+ };
354
+ h1: {
355
+ base: string;
356
+ };
357
+ h2: {
358
+ base: string;
359
+ };
360
+ h3: {
361
+ base: string;
362
+ };
363
+ h4: {
364
+ base: string;
365
+ };
366
+ };
367
+ }, {
368
+ base: string;
369
+ }, import("tailwind-variants").TVReturnTypeLike<{
370
+ size: {
371
+ display: {
372
+ base: string;
373
+ };
374
+ h1: {
375
+ base: string;
376
+ };
377
+ h2: {
378
+ base: string;
379
+ };
380
+ h3: {
381
+ base: string;
382
+ };
383
+ h4: {
384
+ base: string;
385
+ };
386
+ };
387
+ }, {
388
+ base: string;
389
+ }>>;
390
+ type HeadingVariants = VariantProps<typeof headingStyles>;
391
+ //#endregion
392
+ //#region src/components/input/input.styles.d.ts
393
+ /** Shared by Input, Textarea and the Select trigger so all fields look alike. */
394
+ export declare const fieldControl: string[];
395
+ export declare const inputStyles: import("tailwind-variants").TVReturnType<{
396
+ size: {
397
+ sm: {
398
+ root: string;
399
+ };
400
+ md: {
401
+ root: string;
402
+ };
403
+ lg: {
404
+ root: string;
405
+ };
406
+ };
407
+ }, {
408
+ root: string[];
409
+ input: string;
410
+ adornment: string;
411
+ }, undefined, {
412
+ size: {
413
+ sm: {
414
+ root: string;
415
+ };
416
+ md: {
417
+ root: string;
418
+ };
419
+ lg: {
420
+ root: string;
421
+ };
422
+ };
423
+ }, {
424
+ root: string[];
425
+ input: string;
426
+ adornment: string;
427
+ }, import("tailwind-variants").TVReturnTypeLike<{
428
+ size: {
429
+ sm: {
430
+ root: string;
431
+ };
432
+ md: {
433
+ root: string;
434
+ };
435
+ lg: {
436
+ root: string;
437
+ };
438
+ };
439
+ }, {
440
+ root: string[];
441
+ input: string;
442
+ adornment: string;
443
+ }>>;
444
+ type InputVariants = VariantProps<typeof inputStyles>;
445
+ //#endregion
446
+ //#region src/components/kbd/kbd.d.ts
447
+ export declare const kbdStyles: import("tailwind-variants").TVReturnType<{
448
+ [key: string]: {
449
+ [key: string]: import("tailwind-variants").ClassValue | {
450
+ base?: import("tailwind-variants").ClassValue;
451
+ };
452
+ };
453
+ } | {
454
+ [x: string]: {
455
+ [x: string]: import("tailwind-variants").ClassValue | {
456
+ base?: import("tailwind-variants").ClassValue;
457
+ };
458
+ };
459
+ } | {}, {
460
+ base: string;
461
+ }, undefined, {
462
+ [key: string]: {
463
+ [key: string]: import("tailwind-variants").ClassValue | {
464
+ base?: import("tailwind-variants").ClassValue;
465
+ };
466
+ };
467
+ } | {}, {
468
+ base: string;
469
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
470
+ base: string;
471
+ }>>;
472
+ /** A keyboard key, e.g. `<Kbd>⌘K</Kbd>`. */
473
+ export declare function Kbd(inProps: ComponentProps<'kbd'>): import("react").JSX.Element;
474
+ //#endregion
475
+ //#region src/components/label/label.d.ts
476
+ export declare const labelStyles: import("tailwind-variants").TVReturnType<{
477
+ [key: string]: {
478
+ [key: string]: import("tailwind-variants").ClassValue | {
479
+ base?: import("tailwind-variants").ClassValue;
480
+ };
481
+ };
482
+ } | {
483
+ [x: string]: {
484
+ [x: string]: import("tailwind-variants").ClassValue | {
485
+ base?: import("tailwind-variants").ClassValue;
486
+ };
487
+ };
488
+ } | {}, {
489
+ base: string;
490
+ }, undefined, {
491
+ [key: string]: {
492
+ [key: string]: import("tailwind-variants").ClassValue | {
493
+ base?: import("tailwind-variants").ClassValue;
494
+ };
495
+ };
496
+ } | {}, {
497
+ base: string;
498
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
499
+ base: string;
500
+ }>>;
501
+ export declare function Label(inProps: ComponentProps<typeof Label$1.Root>): import("react").JSX.Element;
502
+ //#endregion
503
+ //#region src/components/segmented-control/segmented-control.d.ts
504
+ export declare const segmentedControlStyles: import("tailwind-variants").TVReturnType<{
505
+ size: {
506
+ sm: {
507
+ root: string;
508
+ item: string;
509
+ };
510
+ md: {
511
+ root: string;
512
+ item: string;
513
+ };
514
+ };
515
+ fullWidth: {
516
+ true: {
517
+ root: string;
518
+ item: string;
519
+ };
520
+ };
521
+ }, {
522
+ root: string[];
523
+ item: string[];
524
+ }, undefined, {
525
+ size: {
526
+ sm: {
527
+ root: string;
528
+ item: string;
529
+ };
530
+ md: {
531
+ root: string;
532
+ item: string;
533
+ };
534
+ };
535
+ fullWidth: {
536
+ true: {
537
+ root: string;
538
+ item: string;
539
+ };
540
+ };
541
+ }, {
542
+ root: string[];
543
+ item: string[];
544
+ }, import("tailwind-variants").TVReturnTypeLike<{
545
+ size: {
546
+ sm: {
547
+ root: string;
548
+ item: string;
549
+ };
550
+ md: {
551
+ root: string;
552
+ item: string;
553
+ };
554
+ };
555
+ fullWidth: {
556
+ true: {
557
+ root: string;
558
+ item: string;
559
+ };
560
+ };
561
+ }, {
562
+ root: string[];
563
+ item: string[];
564
+ }>>;
565
+ interface SegmentedOption<T extends string> {
566
+ value: T;
567
+ label: ReactNode;
568
+ disabled?: boolean;
569
+ }
570
+ interface SegmentedControlProps<T extends string> extends VariantProps<typeof segmentedControlStyles> {
571
+ options: readonly SegmentedOption<T>[];
572
+ value?: T;
573
+ defaultValue?: T;
574
+ onValueChange?: (value: T) => void;
575
+ 'aria-label': string;
576
+ className?: string;
577
+ id?: string;
578
+ }
579
+ /**
580
+ * Pick exactly one of a few options. `T` is inferred from `options`, so `onValueChange`
581
+ * receives your union type, not `string`.
582
+ */
583
+ export declare function SegmentedControl<T extends string>(inProps: SegmentedControlProps<T>): import("react").JSX.Element;
584
+ //#endregion
585
+ //#region src/components/select/select.d.ts
586
+ export declare const selectStyles: import("tailwind-variants").TVReturnType<{
587
+ size: {
588
+ sm: {
589
+ trigger: string;
590
+ };
591
+ md: {
592
+ trigger: string;
593
+ };
594
+ lg: {
595
+ trigger: string;
596
+ };
597
+ };
598
+ }, {
599
+ trigger: string[];
600
+ icon: string;
601
+ content: string[];
602
+ viewport: string;
603
+ item: string[];
604
+ indicator: string;
605
+ }, undefined, {
606
+ size: {
607
+ sm: {
608
+ trigger: string;
609
+ };
610
+ md: {
611
+ trigger: string;
612
+ };
613
+ lg: {
614
+ trigger: string;
615
+ };
616
+ };
617
+ }, {
618
+ trigger: string[];
619
+ icon: string;
620
+ content: string[];
621
+ viewport: string;
622
+ item: string[];
623
+ indicator: string;
624
+ }, import("tailwind-variants").TVReturnTypeLike<{
625
+ size: {
626
+ sm: {
627
+ trigger: string;
628
+ };
629
+ md: {
630
+ trigger: string;
631
+ };
632
+ lg: {
633
+ trigger: string;
634
+ };
635
+ };
636
+ }, {
637
+ trigger: string[];
638
+ icon: string;
639
+ content: string[];
640
+ viewport: string;
641
+ item: string[];
642
+ indicator: string;
643
+ }>>;
644
+ type RootProps<T extends string> = Omit<ComponentProps<typeof Select$1.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {
645
+ value?: T;
646
+ defaultValue?: T;
647
+ onValueChange?: (value: T) => void;
648
+ };
649
+ interface SelectProps<T extends string = string> extends RootProps<T>, VariantProps<typeof selectStyles> {
650
+ placeholder?: ReactNode;
651
+ id?: string;
652
+ className?: string;
653
+ contentClassName?: string;
654
+ 'aria-label'?: string;
655
+ 'aria-describedby'?: string;
656
+ 'aria-invalid'?: boolean;
657
+ }
658
+ /**
659
+ * A dropdown select. `value` is typed by the `T` you use:
660
+ * `<Select<Plan> value={plan} onValueChange={setPlan}>` only accepts `Plan` values.
661
+ */
662
+ export declare function Select<T extends string = string>(inProps: SelectProps<T>): import("react").JSX.Element;
663
+ interface SelectItemProps extends ComponentProps<typeof Select$1.Item> {}
664
+ export declare function SelectItem({ className, children, ...props }: SelectItemProps): import("react").JSX.Element;
665
+ //#endregion
666
+ //#region src/components/separator/separator.d.ts
667
+ export declare const separatorStyles: import("tailwind-variants").TVReturnType<{
668
+ orientation: {
669
+ horizontal: {
670
+ base: string;
671
+ };
672
+ vertical: {
673
+ base: string;
674
+ };
675
+ };
676
+ }, {
677
+ base: string;
678
+ }, undefined, {
679
+ orientation: {
680
+ horizontal: {
681
+ base: string;
682
+ };
683
+ vertical: {
684
+ base: string;
685
+ };
686
+ };
687
+ }, {
688
+ base: string;
689
+ }, import("tailwind-variants").TVReturnTypeLike<{
690
+ orientation: {
691
+ horizontal: {
692
+ base: string;
693
+ };
694
+ vertical: {
695
+ base: string;
696
+ };
697
+ };
698
+ }, {
699
+ base: string;
700
+ }>>;
701
+ export declare function Separator(inProps: ComponentProps<typeof Separator$1.Root>): import("react").JSX.Element;
702
+ //#endregion
703
+ //#region src/components/skeleton/skeleton.d.ts
704
+ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
705
+ [key: string]: {
706
+ [key: string]: import("tailwind-variants").ClassValue | {
707
+ base?: import("tailwind-variants").ClassValue;
708
+ };
709
+ };
710
+ } | {
711
+ [x: string]: {
712
+ [x: string]: import("tailwind-variants").ClassValue | {
713
+ base?: import("tailwind-variants").ClassValue;
714
+ };
715
+ };
716
+ } | {}, {
717
+ base: string;
718
+ }, undefined, {
719
+ [key: string]: {
720
+ [key: string]: import("tailwind-variants").ClassValue | {
721
+ base?: import("tailwind-variants").ClassValue;
722
+ };
723
+ };
724
+ } | {}, {
725
+ base: string;
726
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
727
+ base: string;
728
+ }>>;
729
+ /** Placeholder block shown while content loads. Size it with classes: `h-4 w-32`. */
730
+ export declare function Skeleton(inProps: ComponentProps<'div'>): import("react").JSX.Element;
731
+ //#endregion
732
+ //#region src/components/spinner/spinner.styles.d.ts
733
+ export declare const spinnerStyles: import("tailwind-variants").TVReturnType<{
734
+ size: {
735
+ sm: {
736
+ base: string;
737
+ };
738
+ md: {
739
+ base: string;
740
+ };
741
+ lg: {
742
+ base: string;
743
+ };
744
+ };
745
+ }, {
746
+ base: string;
747
+ track: string;
748
+ arc: string;
749
+ }, undefined, {
750
+ size: {
751
+ sm: {
752
+ base: string;
753
+ };
754
+ md: {
755
+ base: string;
756
+ };
757
+ lg: {
758
+ base: string;
759
+ };
760
+ };
761
+ }, {
762
+ base: string;
763
+ track: string;
764
+ arc: string;
765
+ }, import("tailwind-variants").TVReturnTypeLike<{
766
+ size: {
767
+ sm: {
768
+ base: string;
769
+ };
770
+ md: {
771
+ base: string;
772
+ };
773
+ lg: {
774
+ base: string;
775
+ };
776
+ };
777
+ }, {
778
+ base: string;
779
+ track: string;
780
+ arc: string;
781
+ }>>;
782
+ type SpinnerVariants = VariantProps<typeof spinnerStyles>;
783
+ //#endregion
784
+ //#region src/components/switch/switch.d.ts
785
+ export declare const switchStyles: import("tailwind-variants").TVReturnType<{
786
+ size: {
787
+ sm: {
788
+ root: string;
789
+ thumb: string;
790
+ };
791
+ md: {
792
+ root: string;
793
+ thumb: string;
794
+ };
795
+ };
796
+ }, {
797
+ root: string[];
798
+ thumb: string;
799
+ }, undefined, {
800
+ size: {
801
+ sm: {
802
+ root: string;
803
+ thumb: string;
804
+ };
805
+ md: {
806
+ root: string;
807
+ thumb: string;
808
+ };
809
+ };
810
+ }, {
811
+ root: string[];
812
+ thumb: string;
813
+ }, import("tailwind-variants").TVReturnTypeLike<{
814
+ size: {
815
+ sm: {
816
+ root: string;
817
+ thumb: string;
818
+ };
819
+ md: {
820
+ root: string;
821
+ thumb: string;
822
+ };
823
+ };
824
+ }, {
825
+ root: string[];
826
+ thumb: string;
827
+ }>>;
828
+ interface SwitchProps extends ComponentProps<typeof Switch$1.Root>, VariantProps<typeof switchStyles> {}
829
+ export declare function Switch(inProps: SwitchProps): import("react").JSX.Element;
830
+ //#endregion
831
+ //#region src/components/table/table.d.ts
832
+ export declare const tableStyles: import("tailwind-variants").TVReturnType<{
833
+ [key: string]: {
834
+ [key: string]: import("tailwind-variants").ClassValue | {
835
+ header?: import("tailwind-variants").ClassValue;
836
+ body?: import("tailwind-variants").ClassValue;
837
+ wrapper?: import("tailwind-variants").ClassValue;
838
+ table?: import("tailwind-variants").ClassValue;
839
+ row?: import("tailwind-variants").ClassValue;
840
+ head?: import("tailwind-variants").ClassValue;
841
+ cell?: import("tailwind-variants").ClassValue;
842
+ caption?: import("tailwind-variants").ClassValue;
843
+ };
844
+ };
845
+ } | {
846
+ [x: string]: {
847
+ [x: string]: import("tailwind-variants").ClassValue | {
848
+ header?: import("tailwind-variants").ClassValue;
849
+ body?: import("tailwind-variants").ClassValue;
850
+ wrapper?: import("tailwind-variants").ClassValue;
851
+ table?: import("tailwind-variants").ClassValue;
852
+ row?: import("tailwind-variants").ClassValue;
853
+ head?: import("tailwind-variants").ClassValue;
854
+ cell?: import("tailwind-variants").ClassValue;
855
+ caption?: import("tailwind-variants").ClassValue;
856
+ };
857
+ };
858
+ } | {}, {
859
+ wrapper: string;
860
+ table: string;
861
+ header: string;
862
+ body: string;
863
+ row: string;
864
+ head: string;
865
+ cell: string;
866
+ caption: string;
867
+ }, undefined, {
868
+ [key: string]: {
869
+ [key: string]: import("tailwind-variants").ClassValue | {
870
+ header?: import("tailwind-variants").ClassValue;
871
+ body?: import("tailwind-variants").ClassValue;
872
+ wrapper?: import("tailwind-variants").ClassValue;
873
+ table?: import("tailwind-variants").ClassValue;
874
+ row?: import("tailwind-variants").ClassValue;
875
+ head?: import("tailwind-variants").ClassValue;
876
+ cell?: import("tailwind-variants").ClassValue;
877
+ caption?: import("tailwind-variants").ClassValue;
878
+ };
879
+ };
880
+ } | {}, {
881
+ wrapper: string;
882
+ table: string;
883
+ header: string;
884
+ body: string;
885
+ row: string;
886
+ head: string;
887
+ cell: string;
888
+ caption: string;
889
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
890
+ wrapper: string;
891
+ table: string;
892
+ header: string;
893
+ body: string;
894
+ row: string;
895
+ head: string;
896
+ cell: string;
897
+ caption: string;
898
+ }>>;
899
+ /** Semantic table primitives styled by the theme. For sorting and pagination use DataTable. */
900
+ export declare function Table({ className, ...props }: ComponentProps<'table'>): import("react").JSX.Element;
901
+ export declare function TableHeader({ className, ...props }: ComponentProps<'thead'>): import("react").JSX.Element;
902
+ export declare function TableBody({ className, ...props }: ComponentProps<'tbody'>): import("react").JSX.Element;
903
+ export declare function TableRow({ className, ...props }: ComponentProps<'tr'>): import("react").JSX.Element;
904
+ export declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react").JSX.Element;
905
+ export declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react").JSX.Element;
906
+ export declare function TableCaption({ className, ...props }: ComponentProps<'caption'>): import("react").JSX.Element;
907
+ //#endregion
908
+ //#region src/components/tabs/tabs.d.ts
909
+ export declare const tabsStyles: import("tailwind-variants").TVReturnType<{
910
+ variant: {
911
+ underline: {
912
+ list: string;
913
+ trigger: string;
914
+ };
915
+ pill: {
916
+ list: string[];
917
+ trigger: string;
918
+ };
919
+ };
920
+ }, {
921
+ root: string;
922
+ list: string;
923
+ trigger: string[];
924
+ content: string;
925
+ }, undefined, {
926
+ variant: {
927
+ underline: {
928
+ list: string;
929
+ trigger: string;
930
+ };
931
+ pill: {
932
+ list: string[];
933
+ trigger: string;
934
+ };
935
+ };
936
+ }, {
937
+ root: string;
938
+ list: string;
939
+ trigger: string[];
940
+ content: string;
941
+ }, import("tailwind-variants").TVReturnTypeLike<{
942
+ variant: {
943
+ underline: {
944
+ list: string;
945
+ trigger: string;
946
+ };
947
+ pill: {
948
+ list: string[];
949
+ trigger: string;
950
+ };
951
+ };
952
+ }, {
953
+ root: string;
954
+ list: string;
955
+ trigger: string[];
956
+ content: string;
957
+ }>>;
958
+ type TabsVariants = VariantProps<typeof tabsStyles>;
959
+ interface TabsProps extends ComponentProps<typeof Tabs$1.Root>, TabsVariants {}
960
+ export declare function Tabs(inProps: TabsProps): import("react").JSX.Element;
961
+ export declare function TabsList({ className, ...props }: ComponentProps<typeof Tabs$1.List>): import("react").JSX.Element;
962
+ export declare function TabsTrigger({ className, ...props }: ComponentProps<typeof Tabs$1.Trigger>): import("react").JSX.Element;
963
+ export declare function TabsContent({ className, ...props }: ComponentProps<typeof Tabs$1.Content>): import("react").JSX.Element;
964
+ //#endregion
965
+ //#region src/components/text/text.styles.d.ts
966
+ export declare const textStyles: import("tailwind-variants").TVReturnType<{
967
+ size: {
968
+ lead: {
969
+ base: string;
970
+ };
971
+ body: {
972
+ base: string;
973
+ };
974
+ small: {
975
+ base: string;
976
+ };
977
+ caption: {
978
+ base: string;
979
+ };
980
+ };
981
+ tone: {
982
+ default: {
983
+ base: string;
984
+ };
985
+ muted: {
986
+ base: string;
987
+ };
988
+ faint: {
989
+ base: string;
990
+ };
991
+ primary: {
992
+ base: string;
993
+ };
994
+ success: {
995
+ base: string;
996
+ };
997
+ warning: {
998
+ base: string;
999
+ };
1000
+ danger: {
1001
+ base: string;
1002
+ };
1003
+ };
1004
+ weight: {
1005
+ regular: {
1006
+ base: string;
1007
+ };
1008
+ medium: {
1009
+ base: string;
1010
+ };
1011
+ semibold: {
1012
+ base: string;
1013
+ };
1014
+ };
1015
+ mono: {
1016
+ true: {
1017
+ base: string;
1018
+ };
1019
+ };
1020
+ truncate: {
1021
+ true: {
1022
+ base: string;
1023
+ };
1024
+ };
1025
+ }, {
1026
+ base: string;
1027
+ }, undefined, {
1028
+ size: {
1029
+ lead: {
1030
+ base: string;
1031
+ };
1032
+ body: {
1033
+ base: string;
1034
+ };
1035
+ small: {
1036
+ base: string;
1037
+ };
1038
+ caption: {
1039
+ base: string;
1040
+ };
1041
+ };
1042
+ tone: {
1043
+ default: {
1044
+ base: string;
1045
+ };
1046
+ muted: {
1047
+ base: string;
1048
+ };
1049
+ faint: {
1050
+ base: string;
1051
+ };
1052
+ primary: {
1053
+ base: string;
1054
+ };
1055
+ success: {
1056
+ base: string;
1057
+ };
1058
+ warning: {
1059
+ base: string;
1060
+ };
1061
+ danger: {
1062
+ base: string;
1063
+ };
1064
+ };
1065
+ weight: {
1066
+ regular: {
1067
+ base: string;
1068
+ };
1069
+ medium: {
1070
+ base: string;
1071
+ };
1072
+ semibold: {
1073
+ base: string;
1074
+ };
1075
+ };
1076
+ mono: {
1077
+ true: {
1078
+ base: string;
1079
+ };
1080
+ };
1081
+ truncate: {
1082
+ true: {
1083
+ base: string;
1084
+ };
1085
+ };
1086
+ }, {
1087
+ base: string;
1088
+ }, import("tailwind-variants").TVReturnTypeLike<{
1089
+ size: {
1090
+ lead: {
1091
+ base: string;
1092
+ };
1093
+ body: {
1094
+ base: string;
1095
+ };
1096
+ small: {
1097
+ base: string;
1098
+ };
1099
+ caption: {
1100
+ base: string;
1101
+ };
1102
+ };
1103
+ tone: {
1104
+ default: {
1105
+ base: string;
1106
+ };
1107
+ muted: {
1108
+ base: string;
1109
+ };
1110
+ faint: {
1111
+ base: string;
1112
+ };
1113
+ primary: {
1114
+ base: string;
1115
+ };
1116
+ success: {
1117
+ base: string;
1118
+ };
1119
+ warning: {
1120
+ base: string;
1121
+ };
1122
+ danger: {
1123
+ base: string;
1124
+ };
1125
+ };
1126
+ weight: {
1127
+ regular: {
1128
+ base: string;
1129
+ };
1130
+ medium: {
1131
+ base: string;
1132
+ };
1133
+ semibold: {
1134
+ base: string;
1135
+ };
1136
+ };
1137
+ mono: {
1138
+ true: {
1139
+ base: string;
1140
+ };
1141
+ };
1142
+ truncate: {
1143
+ true: {
1144
+ base: string;
1145
+ };
1146
+ };
1147
+ }, {
1148
+ base: string;
1149
+ }>>;
1150
+ type TextVariants = VariantProps<typeof textStyles>;
1151
+ //#endregion
1152
+ //#region src/components/textarea/textarea.d.ts
1153
+ export declare const textareaStyles: import("tailwind-variants").TVReturnType<{
1154
+ [key: string]: {
1155
+ [key: string]: import("tailwind-variants").ClassValue | {
1156
+ base?: import("tailwind-variants").ClassValue;
1157
+ };
1158
+ };
1159
+ } | {
1160
+ [x: string]: {
1161
+ [x: string]: import("tailwind-variants").ClassValue | {
1162
+ base?: import("tailwind-variants").ClassValue;
1163
+ };
1164
+ };
1165
+ } | {}, {
1166
+ base: string[];
1167
+ }, undefined, {
1168
+ [key: string]: {
1169
+ [key: string]: import("tailwind-variants").ClassValue | {
1170
+ base?: import("tailwind-variants").ClassValue;
1171
+ };
1172
+ };
1173
+ } | {}, {
1174
+ base: string[];
1175
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
1176
+ base: string[];
1177
+ }>>;
1178
+ export declare function Textarea(inProps: ComponentProps<'textarea'>): import("react").JSX.Element;
1179
+ //#endregion
1180
+ //#region src/components/tooltip/tooltip.d.ts
1181
+ export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
1182
+ [key: string]: {
1183
+ [key: string]: import("tailwind-variants").ClassValue | {
1184
+ content?: import("tailwind-variants").ClassValue;
1185
+ };
1186
+ };
1187
+ } | {
1188
+ [x: string]: {
1189
+ [x: string]: import("tailwind-variants").ClassValue | {
1190
+ content?: import("tailwind-variants").ClassValue;
1191
+ };
1192
+ };
1193
+ } | {}, {
1194
+ content: string;
1195
+ }, undefined, {
1196
+ [key: string]: {
1197
+ [key: string]: import("tailwind-variants").ClassValue | {
1198
+ content?: import("tailwind-variants").ClassValue;
1199
+ };
1200
+ };
1201
+ } | {}, {
1202
+ content: string;
1203
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
1204
+ content: string;
1205
+ }>>;
1206
+ interface TooltipProps extends Omit<ComponentProps<typeof Tooltip$1.Content>, 'content'> {
1207
+ content: ReactNode;
1208
+ children: ReactNode;
1209
+ /** Skip the tooltip entirely, e.g. when the label is already visible. */
1210
+ disabled?: boolean;
1211
+ delayDuration?: number;
1212
+ }
1213
+ /** A short hint on hover or focus. The child must be focusable (a button or link). */
1214
+ export declare function Tooltip(inProps: TooltipProps): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
1215
+ //#endregion
1216
+ //#region src/patterns/app-shell/app-shell.styles.d.ts
1217
+ export declare const appShellStyles: import("tailwind-variants").TVReturnType<{
1218
+ layout: {
1219
+ page: {
1220
+ root: string;
1221
+ sidebar: string;
1222
+ mobileBar: string;
1223
+ };
1224
+ embedded: {
1225
+ root: string;
1226
+ sidebar: string;
1227
+ main: string;
1228
+ };
1229
+ };
1230
+ }, {
1231
+ root: string;
1232
+ sidebar: string;
1233
+ main: string;
1234
+ mobileBar: string[];
1235
+ overlay: string;
1236
+ drawer: string;
1237
+ }, undefined, {
1238
+ layout: {
1239
+ page: {
1240
+ root: string;
1241
+ sidebar: string;
1242
+ mobileBar: string;
1243
+ };
1244
+ embedded: {
1245
+ root: string;
1246
+ sidebar: string;
1247
+ main: string;
1248
+ };
1249
+ };
1250
+ }, {
1251
+ root: string;
1252
+ sidebar: string;
1253
+ main: string;
1254
+ mobileBar: string[];
1255
+ overlay: string;
1256
+ drawer: string;
1257
+ }, import("tailwind-variants").TVReturnTypeLike<{
1258
+ layout: {
1259
+ page: {
1260
+ root: string;
1261
+ sidebar: string;
1262
+ mobileBar: string;
1263
+ };
1264
+ embedded: {
1265
+ root: string;
1266
+ sidebar: string;
1267
+ main: string;
1268
+ };
1269
+ };
1270
+ }, {
1271
+ root: string;
1272
+ sidebar: string;
1273
+ main: string;
1274
+ mobileBar: string[];
1275
+ overlay: string;
1276
+ drawer: string;
1277
+ }>>;
1278
+ type AppShellVariants = VariantProps<typeof appShellStyles>;
1279
+ export declare const sidebarStyles: import("tailwind-variants").TVReturnType<{
1280
+ [key: string]: {
1281
+ [key: string]: import("tailwind-variants").ClassValue | {
1282
+ root?: import("tailwind-variants").ClassValue;
1283
+ footer?: import("tailwind-variants").ClassValue;
1284
+ header?: import("tailwind-variants").ClassValue;
1285
+ item?: import("tailwind-variants").ClassValue;
1286
+ content?: import("tailwind-variants").ClassValue;
1287
+ section?: import("tailwind-variants").ClassValue;
1288
+ sectionLabel?: import("tailwind-variants").ClassValue;
1289
+ itemIcon?: import("tailwind-variants").ClassValue;
1290
+ itemLabel?: import("tailwind-variants").ClassValue;
1291
+ itemBadge?: import("tailwind-variants").ClassValue;
1292
+ };
1293
+ };
1294
+ } | {
1295
+ [x: string]: {
1296
+ [x: string]: import("tailwind-variants").ClassValue | {
1297
+ root?: import("tailwind-variants").ClassValue;
1298
+ footer?: import("tailwind-variants").ClassValue;
1299
+ header?: import("tailwind-variants").ClassValue;
1300
+ item?: import("tailwind-variants").ClassValue;
1301
+ content?: import("tailwind-variants").ClassValue;
1302
+ section?: import("tailwind-variants").ClassValue;
1303
+ sectionLabel?: import("tailwind-variants").ClassValue;
1304
+ itemIcon?: import("tailwind-variants").ClassValue;
1305
+ itemLabel?: import("tailwind-variants").ClassValue;
1306
+ itemBadge?: import("tailwind-variants").ClassValue;
1307
+ };
1308
+ };
1309
+ } | {}, {
1310
+ root: string[];
1311
+ header: string;
1312
+ content: string;
1313
+ section: string;
1314
+ sectionLabel: string;
1315
+ item: string[];
1316
+ itemIcon: string;
1317
+ itemLabel: string;
1318
+ itemBadge: string;
1319
+ footer: string[];
1320
+ }, undefined, {
1321
+ [key: string]: {
1322
+ [key: string]: import("tailwind-variants").ClassValue | {
1323
+ root?: import("tailwind-variants").ClassValue;
1324
+ footer?: import("tailwind-variants").ClassValue;
1325
+ header?: import("tailwind-variants").ClassValue;
1326
+ item?: import("tailwind-variants").ClassValue;
1327
+ content?: import("tailwind-variants").ClassValue;
1328
+ section?: import("tailwind-variants").ClassValue;
1329
+ sectionLabel?: import("tailwind-variants").ClassValue;
1330
+ itemIcon?: import("tailwind-variants").ClassValue;
1331
+ itemLabel?: import("tailwind-variants").ClassValue;
1332
+ itemBadge?: import("tailwind-variants").ClassValue;
1333
+ };
1334
+ };
1335
+ } | {}, {
1336
+ root: string[];
1337
+ header: string;
1338
+ content: string;
1339
+ section: string;
1340
+ sectionLabel: string;
1341
+ item: string[];
1342
+ itemIcon: string;
1343
+ itemLabel: string;
1344
+ itemBadge: string;
1345
+ footer: string[];
1346
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
1347
+ root: string[];
1348
+ header: string;
1349
+ content: string;
1350
+ section: string;
1351
+ sectionLabel: string;
1352
+ item: string[];
1353
+ itemIcon: string;
1354
+ itemLabel: string;
1355
+ itemBadge: string;
1356
+ footer: string[];
1357
+ }>>;
1358
+ export declare const navbarStyles: import("tailwind-variants").TVReturnType<{
1359
+ sticky: {
1360
+ true: {
1361
+ root: string;
1362
+ };
1363
+ false: {
1364
+ root: string;
1365
+ };
1366
+ };
1367
+ blur: {
1368
+ true: {
1369
+ root: string;
1370
+ };
1371
+ false: {
1372
+ root: string;
1373
+ };
1374
+ };
1375
+ }, {
1376
+ root: string[];
1377
+ inner: string;
1378
+ brand: string;
1379
+ links: string;
1380
+ link: string[];
1381
+ actions: string;
1382
+ menuButton: string;
1383
+ overlay: string;
1384
+ panel: string[];
1385
+ panelHeader: string;
1386
+ panelLinks: string;
1387
+ panelLink: string[];
1388
+ panelActions: string[];
1389
+ }, undefined, {
1390
+ sticky: {
1391
+ true: {
1392
+ root: string;
1393
+ };
1394
+ false: {
1395
+ root: string;
1396
+ };
1397
+ };
1398
+ blur: {
1399
+ true: {
1400
+ root: string;
1401
+ };
1402
+ false: {
1403
+ root: string;
1404
+ };
1405
+ };
1406
+ }, {
1407
+ root: string[];
1408
+ inner: string;
1409
+ brand: string;
1410
+ links: string;
1411
+ link: string[];
1412
+ actions: string;
1413
+ menuButton: string;
1414
+ overlay: string;
1415
+ panel: string[];
1416
+ panelHeader: string;
1417
+ panelLinks: string;
1418
+ panelLink: string[];
1419
+ panelActions: string[];
1420
+ }, import("tailwind-variants").TVReturnTypeLike<{
1421
+ sticky: {
1422
+ true: {
1423
+ root: string;
1424
+ };
1425
+ false: {
1426
+ root: string;
1427
+ };
1428
+ };
1429
+ blur: {
1430
+ true: {
1431
+ root: string;
1432
+ };
1433
+ false: {
1434
+ root: string;
1435
+ };
1436
+ };
1437
+ }, {
1438
+ root: string[];
1439
+ inner: string;
1440
+ brand: string;
1441
+ links: string;
1442
+ link: string[];
1443
+ actions: string;
1444
+ menuButton: string;
1445
+ overlay: string;
1446
+ panel: string[];
1447
+ panelHeader: string;
1448
+ panelLinks: string;
1449
+ panelLink: string[];
1450
+ panelActions: string[];
1451
+ }>>;
1452
+ export declare const pageHeaderStyles: import("tailwind-variants").TVReturnType<{
1453
+ [key: string]: {
1454
+ [key: string]: import("tailwind-variants").ClassValue | {
1455
+ root?: import("tailwind-variants").ClassValue;
1456
+ actions?: import("tailwind-variants").ClassValue;
1457
+ text?: import("tailwind-variants").ClassValue;
1458
+ description?: import("tailwind-variants").ClassValue;
1459
+ title?: import("tailwind-variants").ClassValue;
1460
+ eyebrow?: import("tailwind-variants").ClassValue;
1461
+ };
1462
+ };
1463
+ } | {
1464
+ [x: string]: {
1465
+ [x: string]: import("tailwind-variants").ClassValue | {
1466
+ root?: import("tailwind-variants").ClassValue;
1467
+ actions?: import("tailwind-variants").ClassValue;
1468
+ text?: import("tailwind-variants").ClassValue;
1469
+ description?: import("tailwind-variants").ClassValue;
1470
+ title?: import("tailwind-variants").ClassValue;
1471
+ eyebrow?: import("tailwind-variants").ClassValue;
1472
+ };
1473
+ };
1474
+ } | {}, {
1475
+ root: string[];
1476
+ text: string;
1477
+ eyebrow: string;
1478
+ title: string;
1479
+ description: string;
1480
+ actions: string;
1481
+ }, undefined, {
1482
+ [key: string]: {
1483
+ [key: string]: import("tailwind-variants").ClassValue | {
1484
+ root?: import("tailwind-variants").ClassValue;
1485
+ actions?: import("tailwind-variants").ClassValue;
1486
+ text?: import("tailwind-variants").ClassValue;
1487
+ description?: import("tailwind-variants").ClassValue;
1488
+ title?: import("tailwind-variants").ClassValue;
1489
+ eyebrow?: import("tailwind-variants").ClassValue;
1490
+ };
1491
+ };
1492
+ } | {}, {
1493
+ root: string[];
1494
+ text: string;
1495
+ eyebrow: string;
1496
+ title: string;
1497
+ description: string;
1498
+ actions: string;
1499
+ }, import("tailwind-variants").TVReturnTypeLike<unknown, {
1500
+ root: string[];
1501
+ text: string;
1502
+ eyebrow: string;
1503
+ title: string;
1504
+ description: string;
1505
+ actions: string;
1506
+ }>>;
1507
+ //#endregion
1508
+ //#region src/patterns/async/states.d.ts
1509
+ export declare const stateStyles: import("tailwind-variants").TVReturnType<{
1510
+ tone: {
1511
+ neutral: {};
1512
+ danger: {
1513
+ icon: string;
1514
+ };
1515
+ };
1516
+ }, {
1517
+ root: string;
1518
+ icon: string;
1519
+ text: string;
1520
+ title: string;
1521
+ description: string;
1522
+ action: string;
1523
+ }, undefined, {
1524
+ tone: {
1525
+ neutral: {};
1526
+ danger: {
1527
+ icon: string;
1528
+ };
1529
+ };
1530
+ }, {
1531
+ root: string;
1532
+ icon: string;
1533
+ text: string;
1534
+ title: string;
1535
+ description: string;
1536
+ action: string;
1537
+ }, import("tailwind-variants").TVReturnTypeLike<{
1538
+ tone: {
1539
+ neutral: {};
1540
+ danger: {
1541
+ icon: string;
1542
+ };
1543
+ };
1544
+ }, {
1545
+ root: string;
1546
+ icon: string;
1547
+ text: string;
1548
+ title: string;
1549
+ description: string;
1550
+ action: string;
1551
+ }>>;
1552
+ interface StateProps extends Omit<ComponentProps<'div'>, 'title'> {
1553
+ icon?: ReactNode;
1554
+ title: ReactNode;
1555
+ description?: ReactNode;
1556
+ action?: ReactNode;
1557
+ }
1558
+ /** Shown when a list or page has no content yet. Say what will appear and how to add it. */
1559
+ export declare function EmptyState(inProps: StateProps): import("react").JSX.Element;
1560
+ interface ErrorStateProps extends Omit<StateProps, 'title'> {
1561
+ title?: ReactNode;
1562
+ /** The caught error. Its message is shown when no `description` is given. */
1563
+ error?: unknown;
1564
+ /** Shows a "Try again" button. */
1565
+ onRetry?: (() => unknown) | undefined;
1566
+ }
1567
+ /** Shown when loading failed. Explains what went wrong and offers a retry. */
1568
+ export declare function ErrorState(inProps: ErrorStateProps): import("react").JSX.Element;
1569
+ interface LoadingStateProps extends ComponentProps<'div'> {
1570
+ label?: string;
1571
+ }
1572
+ /** A centered spinner with a label, for content that has no natural skeleton. */
1573
+ export declare function LoadingState({ label, className, ...props }: LoadingStateProps): import("react").JSX.Element;
1574
+ //#endregion
1575
+ //#region src/register.d.ts
1576
+ declare module '@glyphui/tokens' {
1577
+ interface GlyphComponentRegistry {
1578
+ AppShell: StylesEntry<typeof appShellStyles>;
1579
+ Avatar: StylesEntry<typeof avatarStyles>;
1580
+ Badge: StylesEntry<typeof badgeStyles>;
1581
+ Button: StylesEntry<typeof buttonStyles>;
1582
+ Card: StylesEntry<typeof cardStyles>;
1583
+ Checkbox: StylesEntry<typeof checkboxStyles>;
1584
+ EmptyState: StylesEntry<typeof stateStyles>;
1585
+ Eyebrow: StylesEntry<typeof eyebrowStyles>;
1586
+ Field: StylesEntry<typeof fieldStyles>;
1587
+ Heading: StylesEntry<typeof headingStyles>;
1588
+ Input: StylesEntry<typeof inputStyles>;
1589
+ Kbd: StylesEntry<typeof kbdStyles>;
1590
+ Label: StylesEntry<typeof labelStyles>;
1591
+ Navbar: StylesEntry<typeof navbarStyles>;
1592
+ PageHeader: StylesEntry<typeof pageHeaderStyles>;
1593
+ SegmentedControl: StylesEntry<typeof segmentedControlStyles>;
1594
+ Select: StylesEntry<typeof selectStyles>;
1595
+ Separator: StylesEntry<typeof separatorStyles>;
1596
+ Sidebar: StylesEntry<typeof sidebarStyles>;
1597
+ Skeleton: StylesEntry<typeof skeletonStyles>;
1598
+ Spinner: StylesEntry<typeof spinnerStyles>;
1599
+ Switch: StylesEntry<typeof switchStyles>;
1600
+ Table: StylesEntry<typeof tableStyles>;
1601
+ Tabs: StylesEntry<typeof tabsStyles>;
1602
+ Text: StylesEntry<typeof textStyles>;
1603
+ Textarea: StylesEntry<typeof textareaStyles>;
1604
+ Tooltip: StylesEntry<typeof tooltipStyles>;
1605
+ }
1606
+ }
1607
+ //#endregion
1608
+ //#region src/components/avatar/avatar.d.ts
1609
+ interface AvatarProps extends ComponentProps<typeof Avatar$1.Root>, AvatarVariants {
1610
+ /** Used for the image alt text and the initials fallback. */
1611
+ name: string;
1612
+ src?: string | undefined;
1613
+ }
1614
+ export declare function Avatar(inProps: AvatarProps): import("react").JSX.Element;
1615
+ export declare function AvatarGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
1616
+ //#endregion
1617
+ //#region src/components/badge/badge.d.ts
1618
+ interface BadgeProps extends ComponentProps<'span'>, BadgeVariants {
1619
+ /** Leading status dot in the badge's color. */
1620
+ dot?: boolean;
1621
+ asChild?: boolean;
1622
+ }
1623
+ export declare function Badge(inProps: BadgeProps): import("react").JSX.Element;
1624
+ //#endregion
1625
+ //#region src/components/card/card.d.ts
1626
+ interface CardProps extends ComponentProps<'div'>, CardVariants {
1627
+ asChild?: boolean;
1628
+ }
1629
+ /** A surface that groups related content. Compose with CardHeader, CardTitle, CardBody, CardFooter. */
1630
+ export declare function Card(inProps: CardProps): import("react").JSX.Element;
1631
+ export declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
1632
+ interface CardTitleProps extends ComponentProps<'h3'> {
1633
+ asChild?: boolean;
1634
+ }
1635
+ export declare function CardTitle({ asChild, className, ...props }: CardTitleProps): import("react").JSX.Element;
1636
+ export declare function CardDescription({ className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
1637
+ export declare function CardBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
1638
+ export declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
1639
+ //#endregion
1640
+ //#region src/components/container/container.d.ts
1641
+ export declare const containerStyles: import("tailwind-variants").TVReturnType<{
1642
+ size: {
1643
+ sm: "max-w-2xl";
1644
+ md: "max-w-3xl";
1645
+ lg: "max-w-5xl";
1646
+ xl: "max-w-7xl";
1647
+ full: "max-w-none";
1648
+ };
1649
+ }, undefined, "mx-auto w-full px-4 sm:px-6", {
1650
+ size: {
1651
+ sm: "max-w-2xl";
1652
+ md: "max-w-3xl";
1653
+ lg: "max-w-5xl";
1654
+ xl: "max-w-7xl";
1655
+ full: "max-w-none";
1656
+ };
1657
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
1658
+ size: {
1659
+ sm: "max-w-2xl";
1660
+ md: "max-w-3xl";
1661
+ lg: "max-w-5xl";
1662
+ xl: "max-w-7xl";
1663
+ full: "max-w-none";
1664
+ };
1665
+ }, undefined>>;
1666
+ interface ContainerProps extends ComponentProps<'div'>, VariantProps<typeof containerStyles> {
1667
+ asChild?: boolean;
1668
+ }
1669
+ /** Centers content at a readable max width with consistent side gutters. */
1670
+ export declare function Container({ size, asChild, className, ...props }: ContainerProps): import("react").JSX.Element;
1671
+ //#endregion
1672
+ //#region src/components/eyebrow/eyebrow.d.ts
1673
+ interface EyebrowProps extends ComponentProps<'p'>, EyebrowVariants {
1674
+ asChild?: boolean;
1675
+ }
1676
+ /** Small uppercase label that sits above a heading. */
1677
+ export declare function Eyebrow(inProps: EyebrowProps): import("react").JSX.Element;
1678
+ //#endregion
1679
+ //#region src/components/field/field-context.d.ts
1680
+ interface FieldContextValue {
1681
+ id: string;
1682
+ descriptionId: string | undefined;
1683
+ errorId: string | undefined;
1684
+ invalid: boolean;
1685
+ required: boolean;
1686
+ disabled: boolean;
1687
+ }
1688
+ export declare const FieldContext: import("react").Context<FieldContextValue | null>;
1689
+ interface ControlProps {
1690
+ id?: string | undefined;
1691
+ disabled?: boolean | undefined;
1692
+ required?: boolean | undefined;
1693
+ 'aria-describedby'?: string | undefined;
1694
+ 'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling' | undefined;
1695
+ }
1696
+ /**
1697
+ * Connects a form control to the surrounding `Field`: id for the label, `aria-describedby`
1698
+ * for description and error, `aria-invalid`, `required`, `disabled`. Props passed directly win.
1699
+ */
1700
+ export declare function useFieldControl<P extends ControlProps>(props: P): P;
1701
+ //#endregion
1702
+ //#region src/components/heading/heading.d.ts
1703
+ type Level = 1 | 2 | 3 | 4 | 5 | 6;
1704
+ interface HeadingProps extends ComponentProps<'h2'>, HeadingVariants {
1705
+ /** Document outline level (h1–h6). Visual size follows it unless `size` is set. */
1706
+ level?: Level;
1707
+ asChild?: boolean;
1708
+ }
1709
+ /** A heading whose semantic level and visual size are set independently. */
1710
+ export declare function Heading(inProps: HeadingProps): import("react").JSX.Element;
1711
+ //#endregion
1712
+ //#region src/components/input/input.d.ts
1713
+ interface InputProps extends Omit<ComponentProps<'input'>, 'size' | 'prefix'>, InputVariants {
1714
+ /** Content before the text, e.g. an icon or `https://`. */
1715
+ prefix?: ReactNode;
1716
+ /** Content after the text, e.g. a unit or a Kbd hint. */
1717
+ suffix?: ReactNode;
1718
+ /** Classes for the `<input>` element itself. `className` styles the outer frame. */
1719
+ inputClassName?: string;
1720
+ }
1721
+ export declare function Input(inProps: InputProps): import("react").JSX.Element;
1722
+ //#endregion
1723
+ //#region src/components/section/section.d.ts
1724
+ export declare const sectionStyles: import("tailwind-variants").TVReturnType<{
1725
+ spacing: {
1726
+ none: "py-0";
1727
+ sm: "py-10 sm:py-12";
1728
+ md: "py-16 sm:py-20";
1729
+ lg: "py-20 sm:py-28";
1730
+ };
1731
+ tone: {
1732
+ default: "";
1733
+ subtle: "bg-subtle";
1734
+ };
1735
+ divided: {
1736
+ true: "border-t-(length:--glyph-border-width) border-border";
1737
+ };
1738
+ }, undefined, "w-full", {
1739
+ spacing: {
1740
+ none: "py-0";
1741
+ sm: "py-10 sm:py-12";
1742
+ md: "py-16 sm:py-20";
1743
+ lg: "py-20 sm:py-28";
1744
+ };
1745
+ tone: {
1746
+ default: "";
1747
+ subtle: "bg-subtle";
1748
+ };
1749
+ divided: {
1750
+ true: "border-t-(length:--glyph-border-width) border-border";
1751
+ };
1752
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
1753
+ spacing: {
1754
+ none: "py-0";
1755
+ sm: "py-10 sm:py-12";
1756
+ md: "py-16 sm:py-20";
1757
+ lg: "py-20 sm:py-28";
1758
+ };
1759
+ tone: {
1760
+ default: "";
1761
+ subtle: "bg-subtle";
1762
+ };
1763
+ divided: {
1764
+ true: "border-t-(length:--glyph-border-width) border-border";
1765
+ };
1766
+ }, undefined>>;
1767
+ interface SectionProps extends ComponentProps<'section'>, VariantProps<typeof sectionStyles> {
1768
+ asChild?: boolean;
1769
+ }
1770
+ /** A full-width page band with consistent vertical rhythm. Put a Container inside. */
1771
+ export declare function Section({ spacing, tone, divided, asChild, className, ...props }: SectionProps): import("react").JSX.Element;
1772
+ //#endregion
1773
+ //#region src/components/spinner/spinner.d.ts
1774
+ interface SpinnerProps extends Omit<ComponentProps<'svg'>, 'children'>, SpinnerVariants {
1775
+ /** Accessible label. Omit when the spinner sits inside an element that already says it's busy. */
1776
+ label?: string;
1777
+ }
1778
+ export declare function Spinner(inProps: SpinnerProps): import("react").JSX.Element;
1779
+ //#endregion
1780
+ //#region src/components/stack/stack.d.ts
1781
+ export declare const stackStyles: import("tailwind-variants").TVReturnType<{
1782
+ direction: {
1783
+ column: "flex-col";
1784
+ row: "flex-row";
1785
+ };
1786
+ gap: {
1787
+ 0: "gap-0";
1788
+ 1: "gap-1";
1789
+ 2: "gap-2";
1790
+ 3: "gap-3";
1791
+ 4: "gap-4";
1792
+ 5: "gap-5";
1793
+ 6: "gap-6";
1794
+ 8: "gap-8";
1795
+ 10: "gap-10";
1796
+ 12: "gap-12";
1797
+ };
1798
+ align: {
1799
+ start: "items-start";
1800
+ center: "items-center";
1801
+ end: "items-end";
1802
+ stretch: "items-stretch";
1803
+ baseline: "items-baseline";
1804
+ };
1805
+ justify: {
1806
+ start: "justify-start";
1807
+ center: "justify-center";
1808
+ end: "justify-end";
1809
+ between: "justify-between";
1810
+ };
1811
+ wrap: {
1812
+ true: "flex-wrap";
1813
+ };
1814
+ }, undefined, "flex", {
1815
+ direction: {
1816
+ column: "flex-col";
1817
+ row: "flex-row";
1818
+ };
1819
+ gap: {
1820
+ 0: "gap-0";
1821
+ 1: "gap-1";
1822
+ 2: "gap-2";
1823
+ 3: "gap-3";
1824
+ 4: "gap-4";
1825
+ 5: "gap-5";
1826
+ 6: "gap-6";
1827
+ 8: "gap-8";
1828
+ 10: "gap-10";
1829
+ 12: "gap-12";
1830
+ };
1831
+ align: {
1832
+ start: "items-start";
1833
+ center: "items-center";
1834
+ end: "items-end";
1835
+ stretch: "items-stretch";
1836
+ baseline: "items-baseline";
1837
+ };
1838
+ justify: {
1839
+ start: "justify-start";
1840
+ center: "justify-center";
1841
+ end: "justify-end";
1842
+ between: "justify-between";
1843
+ };
1844
+ wrap: {
1845
+ true: "flex-wrap";
1846
+ };
1847
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
1848
+ direction: {
1849
+ column: "flex-col";
1850
+ row: "flex-row";
1851
+ };
1852
+ gap: {
1853
+ 0: "gap-0";
1854
+ 1: "gap-1";
1855
+ 2: "gap-2";
1856
+ 3: "gap-3";
1857
+ 4: "gap-4";
1858
+ 5: "gap-5";
1859
+ 6: "gap-6";
1860
+ 8: "gap-8";
1861
+ 10: "gap-10";
1862
+ 12: "gap-12";
1863
+ };
1864
+ align: {
1865
+ start: "items-start";
1866
+ center: "items-center";
1867
+ end: "items-end";
1868
+ stretch: "items-stretch";
1869
+ baseline: "items-baseline";
1870
+ };
1871
+ justify: {
1872
+ start: "justify-start";
1873
+ center: "justify-center";
1874
+ end: "justify-end";
1875
+ between: "justify-between";
1876
+ };
1877
+ wrap: {
1878
+ true: "flex-wrap";
1879
+ };
1880
+ }, undefined>>;
1881
+ interface StackProps extends ComponentProps<'div'>, VariantProps<typeof stackStyles> {
1882
+ asChild?: boolean;
1883
+ }
1884
+ /** Flex layout with spacing from the scale. `direction="row"` for horizontal. */
1885
+ export declare function Stack({ direction, gap, align, justify, wrap, asChild, className, ...props }: StackProps): import("react").JSX.Element;
1886
+ //#endregion
1887
+ //#region src/components/text/text.d.ts
1888
+ interface TextProps extends ComponentProps<'p'>, TextVariants {
1889
+ /** Render the child element (e.g. `<span>`, `<label>`) with text styles instead of a `<p>`. */
1890
+ asChild?: boolean;
1891
+ }
1892
+ export declare function Text(inProps: TextProps): import("react").JSX.Element;
1893
+ //#endregion
1894
+ //#region src/hooks/use-component-config.d.ts
1895
+ type SlotsOf<K extends ComponentName> = GlyphComponentRegistry[K] extends {
1896
+ slots: infer S extends string;
1897
+ } ? S : never;
1898
+ type SlotClasses<K extends ComponentName> = Partial<Record<SlotsOf<K>, string>>;
1899
+ /**
1900
+ * Applies the theme's per-component settings (`theme.components[name]`):
1901
+ * fills unset variant props from `defaultVariants` and returns the extra slot classes.
1902
+ * Every styled component calls this first.
1903
+ */
1904
+ export declare function useComponentConfig<K extends ComponentName, P extends object>(name: K, props: P): [props: P, slotClasses: SlotClasses<K>];
1905
+ //#endregion
1906
+ //#region src/hooks/use-controllable-state.d.ts
1907
+ interface Options<T> {
1908
+ value?: T | undefined;
1909
+ defaultValue: T;
1910
+ onChange?: ((value: T) => void) | undefined;
1911
+ }
1912
+ /** State that can be controlled by a parent (`value` + `onChange`) or left uncontrolled. */
1913
+ export declare function useControllableState<T>({ value, defaultValue, onChange }: Options<T>): readonly [T, (next: T | ((prev: T) => T)) => void];
1914
+ //#endregion
1915
+ //#region src/hooks/use-media-query.d.ts
1916
+ /** Subscribes to a CSS media query. Returns `fallback` during SSR. */
1917
+ export declare function useMediaQuery(query: string, fallback?: boolean): boolean;
1918
+ //#endregion
1919
+ //#region src/hooks/use-scrolled.d.ts
1920
+ /** True once the window has scrolled past `threshold` pixels. */
1921
+ export declare function useScrolled(threshold?: number, enabled?: boolean): boolean;
1922
+ //#endregion
1923
+ //#region src/patterns/app-shell/app-shell.d.ts
1924
+ interface AppShellProps extends Omit<ComponentProps<'div'>, 'children'>, AppShellVariants {
1925
+ /** A `<Sidebar>`. Shown fixed on desktop and in a drawer on mobile. */
1926
+ sidebar: ReactNode;
1927
+ children: ReactNode;
1928
+ collapsed?: boolean;
1929
+ defaultCollapsed?: boolean;
1930
+ onCollapsedChange?: (collapsed: boolean) => void;
1931
+ /** Shown next to the menu button in the mobile top bar. */
1932
+ mobileBrand?: ReactNode;
1933
+ }
1934
+ /**
1935
+ * App layout: sidebar plus main content. Handles desktop collapse to an icon rail,
1936
+ * the mobile drawer (focus-trapped, closes on navigation), and the mobile top bar.
1937
+ *
1938
+ * `layout="page"` fills the viewport; `layout="embedded"` fills its parent.
1939
+ */
1940
+ export declare function AppShell(inProps: AppShellProps): import("react").JSX.Element;
1941
+ //#endregion
1942
+ //#region src/patterns/app-shell/app-shell-context.d.ts
1943
+ interface AppShellContextValue {
1944
+ /** Desktop sidebar is collapsed to an icon rail. */
1945
+ collapsed: boolean;
1946
+ setCollapsed: (collapsed: boolean) => void;
1947
+ /** Mobile navigation drawer is open. */
1948
+ mobileOpen: boolean;
1949
+ setMobileOpen: (open: boolean) => void;
1950
+ /** True for the sidebar copy rendered inside the mobile drawer. */
1951
+ inDrawer: boolean;
1952
+ }
1953
+ /** Sidebar state. Works outside an AppShell too (always expanded). */
1954
+ export declare function useAppShell(): AppShellContextValue;
1955
+ //#endregion
1956
+ //#region src/patterns/app-shell/navbar.d.ts
1957
+ interface NavLink {
1958
+ label: ReactNode;
1959
+ href: string;
1960
+ active?: boolean;
1961
+ }
1962
+ interface NavbarProps extends Omit<ComponentProps<'header'>, 'children'> {
1963
+ brand: ReactNode;
1964
+ links?: readonly NavLink[];
1965
+ /** Right side on desktop; bottom of the menu panel on mobile. */
1966
+ actions?: ReactNode;
1967
+ /** Stick to the top of the viewport. Default true. */
1968
+ sticky?: boolean;
1969
+ /** Transparent at the top; translucent with blur and a border once scrolled. Default true. */
1970
+ blurOnScroll?: boolean;
1971
+ containerSize?: ContainerProps['size'];
1972
+ }
1973
+ /**
1974
+ * Site header from data: brand, links, actions. Responsive out of the box: links collapse
1975
+ * into a focus-trapped menu panel on small screens.
1976
+ */
1977
+ export declare function Navbar(inProps: NavbarProps): import("react").JSX.Element;
1978
+ //#endregion
1979
+ //#region src/patterns/app-shell/page-header.d.ts
1980
+ interface PageHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
1981
+ title: ReactNode;
1982
+ description?: ReactNode;
1983
+ eyebrow?: ReactNode;
1984
+ /** Buttons aligned to the end on desktop. */
1985
+ actions?: ReactNode;
1986
+ }
1987
+ /** Title block at the top of a page: optional eyebrow, title, description, actions. */
1988
+ export declare function PageHeader(inProps: PageHeaderProps): import("react").JSX.Element;
1989
+ //#endregion
1990
+ //#region src/patterns/app-shell/sidebar.d.ts
1991
+ /** Navigation sidebar. Place inside `AppShell`'s `sidebar` prop. */
1992
+ export declare function Sidebar({ className, ...props }: ComponentProps<'aside'>): import("react").JSX.Element;
1993
+ export declare function SidebarHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
1994
+ export declare function SidebarContent({ className, ...props }: ComponentProps<'nav'>): import("react").JSX.Element;
1995
+ interface SidebarSectionProps extends ComponentProps<'div'> {
1996
+ label?: ReactNode;
1997
+ }
1998
+ export declare function SidebarSection({ label, className, children, ...props }: SidebarSectionProps): import("react").JSX.Element;
1999
+ interface SidebarItemProps {
2000
+ /** Renders a link through the provider's `linkComponent`. Without it, renders a button. */
2001
+ href?: string;
2002
+ icon?: ReactNode;
2003
+ /** Count or short status shown at the end. */
2004
+ badge?: ReactNode;
2005
+ active?: boolean;
2006
+ onClick?: (event: MouseEvent<HTMLElement>) => void;
2007
+ className?: string;
2008
+ children: ReactNode;
2009
+ }
2010
+ export declare function SidebarItem({ href, icon, badge, active, onClick, className, children }: SidebarItemProps): import("react").JSX.Element;
2011
+ export declare function SidebarFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
2012
+ /** Collapses the sidebar on desktop; opens the navigation drawer on mobile. */
2013
+ export declare function SidebarTrigger(props: Partial<IconButtonProps>): import("react").JSX.Element | null;
2014
+ //#endregion
2015
+ //#region src/patterns/async/async.d.ts
2016
+ type AsyncStatus = 'pending' | 'error' | 'success';
2017
+ /**
2018
+ * The shape of an async result. TanStack Query's `useQuery()` result matches it, as does
2019
+ * Glyph's own `useAsync()`.
2020
+ */
2021
+ interface AsyncResult<T> {
2022
+ status: AsyncStatus;
2023
+ data?: T | undefined;
2024
+ error?: unknown;
2025
+ refetch?: () => unknown;
2026
+ }
2027
+ interface AsyncProps<T> {
2028
+ result: AsyncResult<T>;
2029
+ /** Rendered once data is ready and not empty. */
2030
+ children: (data: NonNullable<T>) => ReactNode;
2031
+ /** Treat ready data as empty. Defaults to: an empty array. */
2032
+ isEmpty?: (data: NonNullable<T>) => boolean;
2033
+ loading?: ReactNode;
2034
+ empty?: ReactNode;
2035
+ error?: ReactNode | ((error: unknown, retry: (() => unknown) | undefined) => ReactNode);
2036
+ }
2037
+ /**
2038
+ * Renders the right UI for every state of an async result: loading, error (with retry),
2039
+ * empty, or your content. One convention for every data-driven screen.
2040
+ *
2041
+ * ```tsx
2042
+ * <Async result={useQuery(...)} empty={<EmptyState title="No invoices yet" />}>
2043
+ * {(invoices) => <InvoiceList invoices={invoices} />}
2044
+ * </Async>
2045
+ * ```
2046
+ */
2047
+ export declare function Async<T>({ result, children, isEmpty, loading, empty, error }: AsyncProps<T>): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
2048
+ /**
2049
+ * Runs an async function and tracks its state as an `AsyncResult`. Re-runs when `deps`
2050
+ * change; stale responses are ignored. For caching and deduping, use TanStack Query.
2051
+ */
2052
+ export declare function useAsync<T>(fn: () => Promise<T>, deps: DependencyList): AsyncResult<T>;
2053
+ //#endregion
2054
+ //#region src/provider/color-mode.d.ts
2055
+ type ColorModePreference = ColorMode$1 | 'system';
2056
+ interface ColorModeContextValue {
2057
+ /** What the user chose. */
2058
+ mode: ColorModePreference;
2059
+ /** What is shown: `system` resolved against the OS setting. */
2060
+ resolvedMode: ColorMode$1;
2061
+ setMode: (mode: ColorModePreference) => void;
2062
+ }
2063
+ interface ColorModeOptions {
2064
+ /** Used when nothing is stored yet. */
2065
+ defaultMode?: ColorModePreference;
2066
+ /** localStorage key. Set to `null` to disable persistence. */
2067
+ storageKey?: string | null;
2068
+ }
2069
+ export declare function ColorModeProvider({ children, defaultMode, storageKey }: ColorModeOptions & {
2070
+ children: ReactNode;
2071
+ }): import("react").JSX.Element;
2072
+ /** Read and change the color mode. */
2073
+ export declare function useColorMode(): ColorModeContextValue;
2074
+ /**
2075
+ * Inline script that sets `data-mode` on `<html>` before first paint, so a dark-mode
2076
+ * visitor never sees a light flash. Put it in `<head>`.
2077
+ */
2078
+ export declare function getColorModeScript({ defaultMode, storageKey }?: ColorModeOptions): string;
2079
+ /** `<script>` element version of `getColorModeScript` for SSR frameworks. */
2080
+ export declare function ColorModeScript(props: ColorModeOptions): import("react").JSX.Element;
2081
+ //#endregion
2082
+ //#region src/provider/glyph-context.d.ts
2083
+ /** Props Glyph passes to your router's link component. */
2084
+ interface LinkComponentProps {
2085
+ href: string;
2086
+ className?: string;
2087
+ children?: ReactNode;
2088
+ onClick?: MouseEventHandler<HTMLAnchorElement>;
2089
+ 'aria-current'?: 'page' | undefined;
2090
+ }
2091
+ /**
2092
+ * Any component that renders a link from these props. Plain `'a'` by default.
2093
+ * React Router: `({ href, ...props }) => <Link to={href} {...props} />`
2094
+ */
2095
+ type LinkComponent = ElementType<LinkComponentProps>;
2096
+ interface GlyphContextValue {
2097
+ theme: Theme$1;
2098
+ linkComponent: LinkComponent;
2099
+ }
2100
+ /** The active theme and app-level settings. Must be used under `GlyphProvider`. */
2101
+ export declare function useGlyph(): GlyphContextValue;
2102
+ /** The router-aware link component configured on `GlyphProvider`. */
2103
+ export declare function useLinkComponent(): LinkComponent;
2104
+ //#endregion
2105
+ //#region src/provider/glyph-provider.d.ts
2106
+ interface GlyphProviderProps {
2107
+ children: ReactNode;
2108
+ /** The theme for the whole app. Defaults to the `glyph` preset. */
2109
+ theme?: Theme$1;
2110
+ /** Color mode used until the user picks one. */
2111
+ defaultMode?: ColorModePreference;
2112
+ /** localStorage key for the user's color mode. `null` disables persistence. */
2113
+ storageKey?: string | null;
2114
+ /** Your router's link, used by Navbar, Sidebar and other navigation components. */
2115
+ linkComponent?: LinkComponent;
2116
+ }
2117
+ /** Provides the theme, color mode and app settings. Render once at the root. */
2118
+ export declare function GlyphProvider({ children, theme, defaultMode, storageKey, linkComponent }: GlyphProviderProps): import("react").JSX.Element;
2119
+ //#endregion
2120
+ //#region src/provider/theme-scope.d.ts
2121
+ interface ThemeScopeProps extends ComponentProps<'div'> {
2122
+ theme: Theme$1;
2123
+ /** Force a color mode for this subtree. Follows the page by default. */
2124
+ mode?: ColorMode$1;
2125
+ asChild?: boolean;
2126
+ }
2127
+ /** Renders a subtree with a different theme, e.g. to compare themes side by side. */
2128
+ export declare function ThemeScope({ theme, mode, asChild, children, ...props }: ThemeScopeProps): import("react").JSX.Element;
2129
+ //#endregion
2130
+ //#region src/themes.d.ts
2131
+ /**
2132
+ * Built-in themes: the token presets from @glyphui/tokens plus per-component recipes.
2133
+ * Extend any of them in your theme file: `defineTheme({ name: 'acme', extends: presets.glyph, ... })`.
2134
+ */
2135
+ /** Precise, dark-first, one electric-blue accent, layered soft shadows, Geist. */
2136
+ export declare const glyph: import("@glyphui/tokens").Theme;
2137
+ /** Zero radius, heavy borders, hard offset shadows, loud color. */
2138
+ export declare const brutalist: import("@glyphui/tokens").Theme;
2139
+ /** Serif display type, warm paper neutrals, deep green ink, hairlines instead of shadows. */
2140
+ export declare const editorial: import("@glyphui/tokens").Theme;
2141
+ /** Pill shapes, lavender and mint, chunky rounded type, springy motion. */
2142
+ export declare const playful: import("@glyphui/tokens").Theme;
2143
+ export declare const presets: {
2144
+ readonly glyph: import("@glyphui/tokens").Theme;
2145
+ readonly brutalist: import("@glyphui/tokens").Theme;
2146
+ readonly editorial: import("@glyphui/tokens").Theme;
2147
+ readonly playful: import("@glyphui/tokens").Theme;
2148
+ };
2149
+ type PresetName = keyof typeof presets;
2150
+ //#endregion
2151
+ //#region src/utils/cn.d.ts
2152
+ /** Joins class names and resolves Tailwind conflicts (last one wins). */
2153
+ export declare function cn(...inputs: ClassValue[]): string;
2154
+ //#endregion
2155
+ export { type AppShellContextValue, type AppShellProps, type AsyncProps, type AsyncResult, type AsyncStatus, type AvatarProps, type AvatarVariants, type BadgeProps, type BadgeVariants, Button, type ButtonProps, type ButtonVariants, type CardProps, type CardTitleProps, type CardVariants, type ClassValue, type ColorMode, type ColorModeContextValue, type ColorModeOptions, type ColorModePreference, type ColorToken, type ComponentOverrides, type ContainerProps, type ErrorStateProps, type EyebrowProps, type EyebrowVariants, Field, type FieldContextValue, type FieldProps, type FieldVariants, type GlyphContextValue, type GlyphProviderProps, type HeadingProps, type HeadingVariants, IconButton, type IconButtonProps, type InputProps, type InputVariants, type LinkComponent, type LinkComponentProps, type LoadingStateProps, type NavLink, type NavbarProps, type PageHeaderProps, type PresetName, type RadiusToken, type SectionProps, type SegmentedControlProps, type SegmentedOption, type SelectItemProps, type SelectProps, type ShadowToken, type SidebarItemProps, type SidebarSectionProps, type SlotClasses, type SpinnerProps, type SpinnerVariants, type StackProps, type StateProps, type SwitchProps, type TabsProps, type TextProps, type TextToken, type TextVariants, type Theme, type ThemeInput, type ThemeScopeProps, type Tone, type TooltipProps, type VariantProps, buttonStyles, defineTheme, fieldStyles, themeToCss, tokenVar, tv };