@jordan-mace/chaser-design-system 1.2.7 → 1.2.8

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 (118) hide show
  1. package/dist/components/Accordion/Accordion.d.ts +5 -6
  2. package/dist/components/Accordion/Accordion.js +4 -4
  3. package/dist/components/Alert/Alert.d.ts +2 -1
  4. package/dist/components/Avatar/Avatar.d.ts +2 -2
  5. package/dist/components/Avatar/Avatar.js +1 -1
  6. package/dist/components/Badge/Badge.d.ts +3 -2
  7. package/dist/components/Breadcrumb/Breadcrumb.d.ts +4 -3
  8. package/dist/components/Breadcrumb/Breadcrumb.js +1 -1
  9. package/dist/components/Button/Button.d.ts +2 -1
  10. package/dist/components/Card/Card.d.ts +2 -1
  11. package/dist/components/Checkbox/Checkbox.d.ts +145 -0
  12. package/dist/components/Checkbox/Checkbox.js +1 -1
  13. package/dist/components/Collapse/Collapse.d.ts +3 -3
  14. package/dist/components/Combobox/Combobox.d.ts +3 -2
  15. package/dist/components/Combobox/Combobox.js +15 -8
  16. package/dist/components/Container/Container.d.ts +155 -3
  17. package/dist/components/Divider/Divider.d.ts +3 -2
  18. package/dist/components/Divider/Divider.js +3 -1
  19. package/dist/components/Drawer/Drawer.d.ts +4 -2
  20. package/dist/components/Drawer/Drawer.js +1 -1
  21. package/dist/components/DropdownMenu/DropdownMenu.d.ts +3 -2
  22. package/dist/components/DropdownMenu/DropdownMenu.js +6 -3
  23. package/dist/components/EmptyState/EmptyState.d.ts +3 -3
  24. package/dist/components/EmptyState/EmptyState.js +1 -1
  25. package/dist/components/FileUpload/FileUpload.d.ts +3 -2
  26. package/dist/components/FileUpload/FileUpload.js +8 -4
  27. package/dist/components/Form/Form.d.ts +2 -2
  28. package/dist/components/Grid/Grid.d.ts +154 -5
  29. package/dist/components/Grid/Grid.js +4 -4
  30. package/dist/components/Icon/Icon.d.ts +2 -2
  31. package/dist/components/Input/Input.d.ts +2 -1
  32. package/dist/components/Kbd/Kbd.d.ts +3 -3
  33. package/dist/components/List/List.d.ts +3 -2
  34. package/dist/components/List/List.js +2 -2
  35. package/dist/components/List/ListItem.d.ts +3 -2
  36. package/dist/components/List/ListItem.js +2 -2
  37. package/dist/components/Modal/Modal.d.ts +4 -2
  38. package/dist/components/Modal/Modal.js +1 -1
  39. package/dist/components/Navbar/Navbar.d.ts +2 -1
  40. package/dist/components/Navbar/NavbarItem.d.ts +2 -1
  41. package/dist/components/NumberInput/NumberInput.d.ts +3 -2
  42. package/dist/components/Pagination/Pagination.d.ts +4 -2
  43. package/dist/components/Pagination/Pagination.js +6 -3
  44. package/dist/components/Popover/Popover.d.ts +3 -2
  45. package/dist/components/Popover/Popover.js +2 -1
  46. package/dist/components/Progress/Progress.d.ts +3 -2
  47. package/dist/components/Radio/Radio.d.ts +145 -0
  48. package/dist/components/Radio/Radio.js +1 -1
  49. package/dist/components/ScrollArea/ScrollArea.d.ts +3 -3
  50. package/dist/components/Select/Select.d.ts +145 -0
  51. package/dist/components/Separator/Separator.d.ts +4 -3
  52. package/dist/components/Separator/Separator.js +1 -1
  53. package/dist/components/Skeleton/Skeleton.d.ts +3 -2
  54. package/dist/components/Spinner/Spinner.d.ts +3 -2
  55. package/dist/components/Spinner/Spinner.js +1 -1
  56. package/dist/components/Stack/Stack.d.ts +156 -5
  57. package/dist/components/Stepper/Stepper.d.ts +3 -2
  58. package/dist/components/Table/Table.d.ts +3 -4
  59. package/dist/components/Table/Table.js +6 -6
  60. package/dist/components/Tabs/Tabs.d.ts +3 -3
  61. package/dist/components/Tabs/Tabs.js +2 -2
  62. package/dist/components/Tag/Tag.d.ts +2 -2
  63. package/dist/components/Text/Header.d.ts +2 -2
  64. package/dist/components/Text/P.d.ts +2 -2
  65. package/dist/components/TextArea/TextArea.d.ts +2 -1
  66. package/dist/components/Toggle/Toggle.d.ts +3 -2
  67. package/dist/components/Toggle/Toggle.js +1 -1
  68. package/dist/components/Tooltip/Tooltip.d.ts +3 -2
  69. package/dist/components/VisuallyHidden/VisuallyHidden.d.ts +4 -4
  70. package/dist/components/VisuallyHidden/VisuallyHidden.js +1 -1
  71. package/package.json +1 -1
  72. package/src/components/Accordion/Accordion.tsx +21 -16
  73. package/src/components/Alert/Alert.tsx +11 -7
  74. package/src/components/Avatar/Avatar.tsx +16 -14
  75. package/src/components/Badge/Badge.tsx +8 -6
  76. package/src/components/Breadcrumb/Breadcrumb.tsx +7 -10
  77. package/src/components/Button/Button.tsx +9 -11
  78. package/src/components/Card/Card.tsx +8 -10
  79. package/src/components/Checkbox/Checkbox.tsx +11 -8
  80. package/src/components/Collapse/Collapse.tsx +12 -9
  81. package/src/components/Combobox/Combobox.tsx +60 -31
  82. package/src/components/Container/Container.tsx +4 -3
  83. package/src/components/Divider/Divider.tsx +9 -5
  84. package/src/components/Drawer/Drawer.tsx +20 -13
  85. package/src/components/DropdownMenu/DropdownMenu.tsx +37 -15
  86. package/src/components/EmptyState/EmptyState.tsx +9 -12
  87. package/src/components/FileUpload/FileUpload.tsx +61 -45
  88. package/src/components/Form/Form.tsx +6 -8
  89. package/src/components/Grid/Grid.tsx +18 -13
  90. package/src/components/Icon/Icon.tsx +7 -6
  91. package/src/components/Input/Input.tsx +7 -8
  92. package/src/components/Kbd/Kbd.tsx +5 -4
  93. package/src/components/List/List.tsx +6 -2
  94. package/src/components/List/ListItem.tsx +6 -2
  95. package/src/components/Modal/Modal.tsx +16 -5
  96. package/src/components/Navbar/Navbar.tsx +2 -1
  97. package/src/components/Navbar/NavbarItem.tsx +2 -1
  98. package/src/components/NumberInput/NumberInput.tsx +29 -22
  99. package/src/components/Pagination/Pagination.tsx +39 -28
  100. package/src/components/Popover/Popover.tsx +37 -21
  101. package/src/components/Progress/Progress.tsx +39 -38
  102. package/src/components/Radio/Radio.tsx +12 -6
  103. package/src/components/ScrollArea/ScrollArea.tsx +9 -10
  104. package/src/components/Select/Select.tsx +12 -7
  105. package/src/components/Separator/Separator.tsx +8 -14
  106. package/src/components/Skeleton/Skeleton.tsx +11 -13
  107. package/src/components/Spinner/Spinner.tsx +15 -11
  108. package/src/components/Stack/Stack.tsx +34 -15
  109. package/src/components/Stepper/Stepper.tsx +19 -17
  110. package/src/components/Table/Table.tsx +31 -21
  111. package/src/components/Tabs/Tabs.tsx +14 -10
  112. package/src/components/Tag/Tag.tsx +8 -7
  113. package/src/components/Text/Header.tsx +6 -5
  114. package/src/components/Text/P.tsx +5 -4
  115. package/src/components/TextArea/TextArea.tsx +7 -8
  116. package/src/components/Toggle/Toggle.tsx +16 -7
  117. package/src/components/Tooltip/Tooltip.tsx +16 -11
  118. package/src/components/VisuallyHidden/VisuallyHidden.tsx +7 -8
package/dist/components/Select/Select.d.ts CHANGED
@@ -5,6 +5,151 @@ type SelectOption = {
5
5
  disabled?: boolean;
6
6
  };
7
7
  declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & {
8
+ display?: ("flex" | "none" | "block" | "inline" | {
9
+ mobile?: "flex" | "none" | "block" | "inline";
10
+ tablet?: "flex" | "none" | "block" | "inline";
11
+ desktop?: "flex" | "none" | "block" | "inline";
12
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
13
+ width?: ("auto" | "100%" | "50%" | "25%" | {
14
+ mobile?: "auto" | "100%" | "50%" | "25%";
15
+ tablet?: "auto" | "100%" | "50%" | "25%";
16
+ desktop?: "auto" | "100%" | "50%" | "25%";
17
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
18
+ height?: ("auto" | "100%" | "50%" | "25%" | {
19
+ mobile?: "auto" | "100%" | "50%" | "25%";
20
+ tablet?: "auto" | "100%" | "50%" | "25%";
21
+ desktop?: "auto" | "100%" | "50%" | "25%";
22
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
23
+ flexDirection?: ("column" | "row" | {
24
+ mobile?: "column" | "row";
25
+ tablet?: "column" | "row";
26
+ desktop?: "column" | "row";
27
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
28
+ justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
29
+ mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
30
+ tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
31
+ desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
32
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
33
+ alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
34
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start";
35
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start";
36
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start";
37
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
38
+ paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
39
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
40
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
41
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
42
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
43
+ paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
44
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
45
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
46
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
47
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
48
+ paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
49
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
50
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
51
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
52
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
53
+ paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
54
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
55
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
56
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
57
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
58
+ marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
59
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
60
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
61
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
62
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
63
+ marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
64
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
65
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
66
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
67
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
68
+ marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
69
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
70
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
71
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
72
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
73
+ marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
74
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
75
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
76
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
77
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
78
+ borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
79
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
80
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
81
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
82
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
83
+ borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
84
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
85
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
86
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
87
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
88
+ borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
89
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
90
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
91
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
92
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
93
+ borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
94
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
95
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
96
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
97
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
98
+ borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
99
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
100
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
101
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
102
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
103
+ gap?: ("auto" | "medium" | "none" | "large" | "small" | {
104
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
105
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
106
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
107
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
108
+ padding?: ("auto" | "medium" | "none" | "large" | "small" | {
109
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
110
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
111
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
112
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
113
+ border?: ("auto" | "medium" | "none" | "large" | "small" | {
114
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
115
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
116
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
117
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
118
+ paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
119
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
120
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
121
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
122
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
123
+ paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
124
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
125
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
126
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
127
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
128
+ marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
129
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
130
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
131
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
132
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
133
+ marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
134
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
135
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
136
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
137
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
138
+ placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
139
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start";
140
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start";
141
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start";
142
+ });
143
+ } & {
144
+ color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
145
+ lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
146
+ darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
147
+ };
148
+ background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
149
+ lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
150
+ darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
151
+ };
152
+ } & {
8
153
  label?: string;
9
154
  options: SelectOption[];
10
155
  error?: boolean;
package/dist/components/Separator/Separator.d.ts CHANGED
@@ -1,8 +1,9 @@
1
+ import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
1
3
  export type SeparatorOrientation = 'horizontal' | 'vertical';
2
- export interface SeparatorProps {
4
+ export type SeparatorProps = React.HTMLAttributes<HTMLHRElement> & Sprinkles & {
3
5
  orientation?: SeparatorOrientation;
4
6
  decorative?: boolean;
5
- className?: string;
6
- }
7
+ };
7
8
  declare const Separator: ({ orientation, decorative, className, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
8
9
  export default Separator;
package/dist/components/Separator/Separator.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import clsx from 'clsx';
3
- import { separator, separatorOrientation, } from './styles.css';
3
+ import { separator, separatorOrientation } from './styles.css';
4
4
  import Box from '../Box';
5
5
  const Separator = ({ orientation = 'horizontal', decorative = false, className, ...props }) => {
6
6
  return (_jsx(Box, { as: "hr", className: clsx(separator, separatorOrientation[orientation], className), "aria-hidden": decorative, ...props }));
package/dist/components/Skeleton/Skeleton.d.ts CHANGED
@@ -1,14 +1,15 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
3
4
  export type SkeletonSize = 'small' | 'medium' | 'large';
4
5
  export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
5
- export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
6
+ export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
6
7
  variant?: SkeletonVariant;
7
8
  size?: SkeletonSize;
8
9
  animation?: SkeletonAnimation;
9
10
  width?: string | number;
10
11
  height?: string | number;
11
12
  count?: number;
12
- }
13
+ };
13
14
  declare const Skeleton: ({ variant, size, animation, width, height, count, className, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
14
15
  export default Skeleton;
package/dist/components/Spinner/Spinner.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type SpinnerColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
3
4
  export type SpinnerSize = 'small' | 'medium' | 'large';
4
- export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ export type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
5
6
  color?: SpinnerColor;
6
7
  size?: SpinnerSize;
7
8
  role?: string;
8
- }
9
+ };
9
10
  declare const Spinner: ({ color, size, role, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
10
11
  export default Spinner;
package/dist/components/Spinner/Spinner.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import clsx from 'clsx';
3
- import { spinner, spinnerColors, spinnerSizes, } from './styles.css';
3
+ import { spinner, spinnerColors, spinnerSizes } from './styles.css';
4
4
  import Box from '../Box';
5
5
  const Spinner = ({ color = 'primary', size = 'medium', role = 'status', ...props }) => {
6
6
  return (_jsx(Box, { as: "div", className: clsx(spinner, spinnerColors[color], spinnerSizes[size], props.className), role: role, "aria-label": "Loading", ...props }));
package/dist/components/Stack/Stack.d.ts CHANGED
@@ -1,16 +1,167 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type StackDirection = 'row' | 'column';
3
4
  export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
4
5
  export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
5
- export interface StackProps {
6
+ export type StackProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
6
7
  direction?: StackDirection;
7
8
  align?: StackAlign;
8
9
  justify?: StackJustify;
9
10
  gap?: 'none' | 'small' | 'medium' | 'large';
10
11
  wrap?: boolean;
11
12
  children?: React.ReactNode;
12
- className?: string;
13
- style?: React.CSSProperties;
14
- }
15
- declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
13
+ };
14
+ declare const Stack: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
15
+ display?: ("flex" | "none" | "block" | "inline" | {
16
+ mobile?: "flex" | "none" | "block" | "inline";
17
+ tablet?: "flex" | "none" | "block" | "inline";
18
+ desktop?: "flex" | "none" | "block" | "inline";
19
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
20
+ width?: ("auto" | "100%" | "50%" | "25%" | {
21
+ mobile?: "auto" | "100%" | "50%" | "25%";
22
+ tablet?: "auto" | "100%" | "50%" | "25%";
23
+ desktop?: "auto" | "100%" | "50%" | "25%";
24
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
25
+ height?: ("auto" | "100%" | "50%" | "25%" | {
26
+ mobile?: "auto" | "100%" | "50%" | "25%";
27
+ tablet?: "auto" | "100%" | "50%" | "25%";
28
+ desktop?: "auto" | "100%" | "50%" | "25%";
29
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
30
+ flexDirection?: ("column" | "row" | {
31
+ mobile?: "column" | "row";
32
+ tablet?: "column" | "row";
33
+ desktop?: "column" | "row";
34
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
35
+ justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
36
+ mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
37
+ tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
38
+ desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
39
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
40
+ alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
41
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start";
42
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start";
43
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start";
44
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
45
+ paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
46
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
47
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
48
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
49
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
50
+ paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
51
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
52
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
53
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
54
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
55
+ paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
56
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
57
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
58
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
59
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
60
+ paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
61
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
62
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
63
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
64
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
65
+ marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
66
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
67
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
68
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
69
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
70
+ marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
71
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
72
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
73
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
74
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
75
+ marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
76
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
77
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
78
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
79
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
80
+ marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
81
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
82
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
83
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
84
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
85
+ borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
86
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
87
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
88
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
89
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
90
+ borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
91
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
92
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
93
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
94
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
95
+ borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
96
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
97
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
98
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
99
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
100
+ borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
101
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
102
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
103
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
104
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
105
+ borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
106
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
107
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
108
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
109
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
110
+ gap?: ("auto" | "medium" | "none" | "large" | "small" | {
111
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
112
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
113
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
114
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
115
+ padding?: ("auto" | "medium" | "none" | "large" | "small" | {
116
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
117
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
118
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
119
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
120
+ border?: ("auto" | "medium" | "none" | "large" | "small" | {
121
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
122
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
123
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
124
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
125
+ paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
126
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
127
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
128
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
129
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
130
+ paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
131
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
132
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
133
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
134
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
135
+ marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
136
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
137
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
138
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
139
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
140
+ marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
141
+ mobile?: "auto" | "medium" | "none" | "large" | "small";
142
+ tablet?: "auto" | "medium" | "none" | "large" | "small";
143
+ desktop?: "auto" | "medium" | "none" | "large" | "small";
144
+ }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
145
+ placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
146
+ mobile?: "stretch" | "center" | "flex-end" | "flex-start";
147
+ tablet?: "stretch" | "center" | "flex-end" | "flex-start";
148
+ desktop?: "stretch" | "center" | "flex-end" | "flex-start";
149
+ });
150
+ } & {
151
+ color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
152
+ lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
153
+ darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
154
+ };
155
+ background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
156
+ lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
157
+ darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
158
+ };
159
+ } & {
160
+ direction?: StackDirection;
161
+ align?: StackAlign;
162
+ justify?: StackJustify;
163
+ gap?: "none" | "small" | "medium" | "large";
164
+ wrap?: boolean;
165
+ children?: React.ReactNode;
166
+ } & React.RefAttributes<HTMLElement>>;
16
167
  export default Stack;
package/dist/components/Stepper/Stepper.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
2
3
  export type StepperOrientation = 'horizontal' | 'vertical';
3
4
  export type StepStatus = 'pending' | 'current' | 'completed';
4
5
  export interface Step {
@@ -6,13 +7,13 @@ export interface Step {
6
7
  description?: string;
7
8
  status?: StepStatus;
8
9
  }
9
- export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
10
+ export type StepperProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
10
11
  steps: Step[];
11
12
  currentStep?: number;
12
13
  orientation?: StepperOrientation;
13
14
  showConnectors?: boolean;
14
15
  onStepClick?: (stepIndex: number) => void;
15
16
  clickable?: boolean;
16
- }
17
+ };
17
18
  declare const Stepper: ({ steps, currentStep, orientation, showConnectors, onStepClick, clickable, className, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;
18
19
  export default Stepper;
package/dist/components/Table/Table.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import React from 'react';
2
- type TableProps = {
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
3
+ type TableProps = React.HTMLAttributes<HTMLTableElement> & Sprinkles & {
3
4
  children: React.ReactNode;
4
- className?: string;
5
5
  striped?: boolean;
6
- containerClassName?: string;
7
6
  };
8
7
  type TheadProps = {
9
8
  children: React.ReactNode;
@@ -31,7 +30,7 @@ type TdProps = {
31
30
  colSpan?: number;
32
31
  rowSpan?: number;
33
32
  };
34
- declare const Table: (({ children, className, striped, containerClassName, }: TableProps) => import("react/jsx-runtime").JSX.Element) & {
33
+ declare const Table: (({ children, striped, className, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element) & {
35
34
  Thead: ({ children, className }: TheadProps) => import("react/jsx-runtime").JSX.Element;
36
35
  Tbody: ({ children, className }: TbodyProps) => import("react/jsx-runtime").JSX.Element;
37
36
  Tfoot: ({ children, className }: TfootProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Table/Table.js CHANGED
@@ -5,24 +5,24 @@ import { table, thead, tbody, tfoot, tr, th, td, tableContainer, } from './style
5
5
  import Box from '../Box';
6
6
  // Context to pass striping info to rows
7
7
  const TableContext = createContext({});
8
- const TableComponent = ({ children, className, striped = false, containerClassName, }) => {
9
- return (_jsx(TableContext.Provider, { value: { striped }, children: _jsx(Box, { className: clsx(tableContainer, containerClassName), width: "100%", children: _jsx(Box, { as: "table", className: clsx(table, className), children: children }) }) }));
8
+ const TableComponent = ({ children, striped = false, className, ...props }) => {
9
+ return (_jsx(TableContext.Provider, { value: { striped }, children: _jsx(Box, { className: clsx(tableContainer, className), width: "100%", children: _jsx(Box, { as: "table", className: clsx(table), ...props, children: children }) }) }));
10
10
  };
11
11
  const Thead = ({ children, className }) => {
12
- return _jsx(Box, { as: "thead", className: clsx(thead, className), children: children });
12
+ return (_jsx(Box, { as: "thead", className: clsx(thead, className), children: children }));
13
13
  };
14
14
  const Tbody = ({ children, className }) => {
15
- return _jsx(Box, { as: "tbody", className: clsx(tbody, className), children: children });
15
+ return (_jsx(Box, { as: "tbody", className: clsx(tbody, className), children: children }));
16
16
  };
17
17
  const Tfoot = ({ children, className }) => {
18
- return _jsx(Box, { as: "tfoot", className: clsx(tfoot, className), children: children });
18
+ return (_jsx(Box, { as: "tfoot", className: clsx(tfoot, className), children: children }));
19
19
  };
20
20
  const Tr = ({ children, className }) => {
21
21
  const { striped } = useContext(TableContext);
22
22
  return (_jsx(Box, { as: "tr", className: clsx(tr[striped ? 'striped' : 'default'], className), children: children }));
23
23
  };
24
24
  const Th = ({ children, className }) => {
25
- return _jsx(Box, { as: "th", className: clsx(th, className), children: children });
25
+ return (_jsx(Box, { as: "th", className: clsx(th, className), children: children }));
26
26
  };
27
27
  const Td = ({ children, className, colSpan, rowSpan }) => {
28
28
  return (_jsx(Box, { as: "td", className: clsx(td, className), colSpan: colSpan, rowSpan: rowSpan, children: children }));
package/dist/components/Tabs/Tabs.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
- type TabsProps = {
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
3
+ type TabsProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
3
4
  children: React.ReactNode;
4
5
  defaultValue?: string;
5
6
  orientation?: 'horizontal' | 'vertical';
6
- className?: string;
7
7
  onChange?: (value: string) => void;
8
8
  };
9
9
  type TabListProps = {
@@ -21,7 +21,7 @@ type TabPanelProps = {
21
21
  children: React.ReactNode;
22
22
  className?: string;
23
23
  };
24
- declare const TabsComponent: (({ children, defaultValue, orientation, className, onChange, }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
24
+ declare const TabsComponent: (({ children, defaultValue, orientation, onChange, className, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
25
25
  List: ({ children, className }: TabListProps) => import("react/jsx-runtime").JSX.Element;
26
26
  Tab: ({ value, children, disabled, className }: TabProps) => import("react/jsx-runtime").JSX.Element;
27
27
  Panel: ({ value, children, className }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Tabs/Tabs.js CHANGED
@@ -7,7 +7,7 @@ const TabsContext = createContext({
7
7
  activeTab: '',
8
8
  setActiveTab: () => { },
9
9
  });
10
- const Tabs = ({ children, defaultValue = '', orientation = 'horizontal', className, onChange, }) => {
10
+ const Tabs = ({ children, defaultValue = '', orientation = 'horizontal', onChange, className, ...props }) => {
11
11
  const [activeTab, setActiveTab] = useState(defaultValue);
12
12
  const handleTabChange = (value) => {
13
13
  setActiveTab(value);
@@ -15,7 +15,7 @@ const Tabs = ({ children, defaultValue = '', orientation = 'horizontal', classNa
15
15
  onChange(value);
16
16
  }
17
17
  };
18
- return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange, orientation }, children: _jsx(Box, { className: clsx(tabsContainer, className), width: "100%", children: children }) }));
18
+ return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange, orientation }, children: _jsx(Box, { className: clsx(tabsContainer, className), width: "100%", ...props, children: children }) }));
19
19
  };
20
20
  const TabList = ({ children, className }) => {
21
21
  const { orientation } = useContext(TabsContext);
package/dist/components/Tag/Tag.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- type TagProps = {
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
3
+ type TagProps = React.HTMLAttributes<HTMLSpanElement> & Sprinkles & {
3
4
  children: React.ReactNode;
4
5
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
5
6
  onRemove?: () => void;
6
7
  removable?: boolean;
7
- className?: string;
8
8
  };
9
9
  type TagGroupProps = {
10
10
  children: React.ReactNode;
package/dist/components/Text/Header.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
- type HeaderProps = {
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
3
+ type HeaderProps = React.HTMLAttributes<HTMLHeadingElement> & Sprinkles & {
3
4
  variant: 'h1' | 'h2' | 'h3';
4
- className?: string;
5
5
  children?: React.ReactNode;
6
6
  };
7
7
  declare const Header: ({ variant, children, className }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/Text/P.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
- type PProps = React.HTMLAttributes<HTMLParagraphElement> & {
2
+ import { Sprinkles } from '../../styles/sprinkles.css';
3
+ type PProps = React.HTMLAttributes<HTMLParagraphElement> & Sprinkles & {
3
4
  children: React.ReactNode;
4
- className?: string;
5
5
  };
6
6
  declare const P: (props: PProps) => import("react/jsx-runtime").JSX.Element;
7
7
  export default P;