@blockle/blocks 0.20.0-alpha1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/README.md +1 -70
  2. package/dist/index.cjs +21 -71
  3. package/dist/index.d.ts +3 -1
  4. package/dist/index.js +3 -0
  5. package/dist/index.spec.d.ts +0 -0
  6. package/dist/reset.cjs +1 -2
  7. package/dist/reset.d.ts +0 -2
  8. package/dist/reset.js +1 -0
  9. package/package.json +24 -81
  10. package/LICENSE +0 -21
  11. package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.cjs +0 -19
  12. package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.mjs +0 -20
  13. package/dist/components/accessibility/VisuallyHidden/index.cjs +0 -1
  14. package/dist/components/accessibility/VisuallyHidden/index.mjs +0 -1
  15. package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.cjs +0 -15
  16. package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.mjs +0 -16
  17. package/dist/components/display/Divider/Divider.cjs +0 -25
  18. package/dist/components/display/Divider/Divider.mjs +0 -26
  19. package/dist/components/display/Divider/divider.css.cjs +0 -15
  20. package/dist/components/display/Divider/divider.css.mjs +0 -16
  21. package/dist/components/display/Divider/index.cjs +0 -1
  22. package/dist/components/display/Divider/index.mjs +0 -1
  23. package/dist/components/feedback/Progress/Progress.cjs +0 -53
  24. package/dist/components/feedback/Progress/Progress.mjs +0 -54
  25. package/dist/components/feedback/Progress/index.cjs +0 -1
  26. package/dist/components/feedback/Progress/index.mjs +0 -1
  27. package/dist/components/feedback/Spinner/Spinner.cjs +0 -25
  28. package/dist/components/feedback/Spinner/Spinner.mjs +0 -26
  29. package/dist/components/feedback/Spinner/index.cjs +0 -1
  30. package/dist/components/feedback/Spinner/index.mjs +0 -1
  31. package/dist/components/form/Button/Button.cjs +0 -58
  32. package/dist/components/form/Button/Button.css.cjs +0 -15
  33. package/dist/components/form/Button/Button.css.mjs +0 -16
  34. package/dist/components/form/Button/Button.mjs +0 -59
  35. package/dist/components/form/Button/index.cjs +0 -1
  36. package/dist/components/form/Button/index.mjs +0 -1
  37. package/dist/components/form/Checkbox/Checkbox.cjs +0 -78
  38. package/dist/components/form/Checkbox/Checkbox.mjs +0 -79
  39. package/dist/components/form/Checkbox/checkbox.css.cjs +0 -31
  40. package/dist/components/form/Checkbox/checkbox.css.mjs +0 -32
  41. package/dist/components/form/Checkbox/index.cjs +0 -1
  42. package/dist/components/form/Checkbox/index.mjs +0 -1
  43. package/dist/components/form/Input/Input.cjs +0 -50
  44. package/dist/components/form/Input/Input.mjs +0 -51
  45. package/dist/components/form/Input/index.cjs +0 -1
  46. package/dist/components/form/Input/index.mjs +0 -1
  47. package/dist/components/form/Input/input.css.cjs +0 -20
  48. package/dist/components/form/Input/input.css.mjs +0 -21
  49. package/dist/components/form/Label/Label.cjs +0 -29
  50. package/dist/components/form/Label/Label.mjs +0 -30
  51. package/dist/components/form/Label/index.cjs +0 -1
  52. package/dist/components/form/Label/index.mjs +0 -1
  53. package/dist/components/form/Radio/Radio.cjs +0 -47
  54. package/dist/components/form/Radio/Radio.mjs +0 -48
  55. package/dist/components/form/Radio/RadioGroup.cjs +0 -1
  56. package/dist/components/form/Radio/RadioGroup.mjs +0 -1
  57. package/dist/components/form/Radio/index.cjs +0 -1
  58. package/dist/components/form/Radio/index.mjs +0 -1
  59. package/dist/components/form/Radio/radio.css.cjs +0 -31
  60. package/dist/components/form/Radio/radio.css.mjs +0 -32
  61. package/dist/components/form/Select/Select.cjs +0 -64
  62. package/dist/components/form/Select/Select.mjs +0 -65
  63. package/dist/components/form/Select/index.cjs +0 -1
  64. package/dist/components/form/Select/index.mjs +0 -1
  65. package/dist/components/form/Select/select.css.cjs +0 -37
  66. package/dist/components/form/Select/select.css.mjs +0 -38
  67. package/dist/components/form/Slider/Slider.cjs +0 -139
  68. package/dist/components/form/Slider/Slider.mjs +0 -142
  69. package/dist/components/form/Slider/index.cjs +0 -1
  70. package/dist/components/form/Slider/index.mjs +0 -1
  71. package/dist/components/form/Slider/slider.css.cjs +0 -74
  72. package/dist/components/form/Slider/slider.css.mjs +0 -75
  73. package/dist/components/form/Slider/usePointerProgress.cjs +0 -44
  74. package/dist/components/form/Slider/usePointerProgress.mjs +0 -45
  75. package/dist/components/form/Switch/Switch.cjs +0 -71
  76. package/dist/components/form/Switch/Switch.mjs +0 -74
  77. package/dist/components/form/Switch/index.cjs +0 -1
  78. package/dist/components/form/Switch/index.mjs +0 -1
  79. package/dist/components/form/Switch/switch.css.cjs +0 -26
  80. package/dist/components/form/Switch/switch.css.mjs +0 -27
  81. package/dist/components/layout/Box/Box.cjs +0 -27
  82. package/dist/components/layout/Box/Box.mjs +0 -28
  83. package/dist/components/layout/Box/index.cjs +0 -1
  84. package/dist/components/layout/Box/index.mjs +0 -1
  85. package/dist/components/layout/Inline/Inline.cjs +0 -29
  86. package/dist/components/layout/Inline/Inline.mjs +0 -30
  87. package/dist/components/layout/Inline/index.cjs +0 -1
  88. package/dist/components/layout/Inline/index.mjs +0 -1
  89. package/dist/components/layout/Stack/Stack.cjs +0 -29
  90. package/dist/components/layout/Stack/Stack.mjs +0 -30
  91. package/dist/components/layout/Stack/index.cjs +0 -1
  92. package/dist/components/layout/Stack/index.mjs +0 -1
  93. package/dist/components/navigation/Link/Link.cjs +0 -31
  94. package/dist/components/navigation/Link/Link.mjs +0 -32
  95. package/dist/components/navigation/Link/index.cjs +0 -1
  96. package/dist/components/navigation/Link/index.mjs +0 -1
  97. package/dist/components/other/BlocksProvider/BlocksProvider.cjs +0 -36
  98. package/dist/components/other/BlocksProvider/BlocksProvider.mjs +0 -39
  99. package/dist/components/other/BlocksProvider/context.cjs +0 -4
  100. package/dist/components/other/BlocksProvider/context.mjs +0 -7
  101. package/dist/components/other/BlocksProvider/index.cjs +0 -1
  102. package/dist/components/other/BlocksProvider/index.mjs +0 -1
  103. package/dist/components/other/Portal/Portal.cjs +0 -7
  104. package/dist/components/other/Portal/Portal.mjs +0 -8
  105. package/dist/components/other/Portal/index.cjs +0 -1
  106. package/dist/components/other/Portal/index.mjs +0 -1
  107. package/dist/components/overlay/Dialog/Dialog.cjs +0 -77
  108. package/dist/components/overlay/Dialog/Dialog.mjs +0 -80
  109. package/dist/components/overlay/Dialog/dialog.css.cjs +0 -21
  110. package/dist/components/overlay/Dialog/dialog.css.mjs +0 -22
  111. package/dist/components/overlay/Dialog/dialogHelper.cjs +0 -20
  112. package/dist/components/overlay/Dialog/dialogHelper.mjs +0 -21
  113. package/dist/components/overlay/Dialog/index.cjs +0 -1
  114. package/dist/components/overlay/Dialog/index.mjs +0 -1
  115. package/dist/components/overlay/Popover/Popover.cjs +0 -111
  116. package/dist/components/overlay/Popover/Popover.mjs +0 -112
  117. package/dist/components/overlay/Popover/popover-utils.cjs +0 -61
  118. package/dist/components/overlay/Popover/popover-utils.mjs +0 -62
  119. package/dist/components/overlay/Tooltip/Tooltip.cjs +0 -71
  120. package/dist/components/overlay/Tooltip/Tooltip.mjs +0 -74
  121. package/dist/components/overlay/Tooltip/index.cjs +0 -1
  122. package/dist/components/overlay/Tooltip/index.mjs +0 -1
  123. package/dist/components/typography/Heading/Heading.cjs +0 -23
  124. package/dist/components/typography/Heading/Heading.mjs +0 -24
  125. package/dist/components/typography/Heading/heading.css.cjs +0 -15
  126. package/dist/components/typography/Heading/heading.css.mjs +0 -16
  127. package/dist/components/typography/Heading/index.cjs +0 -1
  128. package/dist/components/typography/Heading/index.mjs +0 -1
  129. package/dist/components/typography/Text/Text.cjs +0 -20
  130. package/dist/components/typography/Text/Text.mjs +0 -21
  131. package/dist/components/typography/Text/index.cjs +0 -1
  132. package/dist/components/typography/Text/index.mjs +0 -1
  133. package/dist/components/typography/Text/text.css.cjs +0 -15
  134. package/dist/components/typography/Text/text.css.mjs +0 -16
  135. package/dist/hooks/useClickOutside/useClickOutside.cjs +0 -22
  136. package/dist/hooks/useClickOutside/useClickOutside.mjs +0 -23
  137. package/dist/hooks/useControlledValue/useControlledValue.cjs +0 -31
  138. package/dist/hooks/useControlledValue/useControlledValue.mjs +0 -32
  139. package/dist/hooks/useIsomorphicLayoutEffect/index.cjs +0 -1
  140. package/dist/hooks/useIsomorphicLayoutEffect/index.mjs +0 -1
  141. package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs +0 -4
  142. package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs +0 -7
  143. package/dist/hooks/useKeyboard/index.cjs +0 -1
  144. package/dist/hooks/useKeyboard/index.mjs +0 -1
  145. package/dist/hooks/useKeyboard/useKeyboard.cjs +0 -19
  146. package/dist/hooks/useKeyboard/useKeyboard.mjs +0 -22
  147. package/dist/hooks/useLayer/index.cjs +0 -1
  148. package/dist/hooks/useLayer/index.mjs +0 -1
  149. package/dist/hooks/useLayer/useLayer.cjs +0 -25
  150. package/dist/hooks/useLayer/useLayer.mjs +0 -26
  151. package/dist/hooks/usePreventBodyScroll/index.cjs +0 -1
  152. package/dist/hooks/usePreventBodyScroll/index.mjs +0 -1
  153. package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs +0 -29
  154. package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.mjs +0 -30
  155. package/dist/hooks/useRestoreFocus/index.cjs +0 -1
  156. package/dist/hooks/useRestoreFocus/index.mjs +0 -1
  157. package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs +0 -17
  158. package/dist/hooks/useRestoreFocus/useRestoreFocus.mjs +0 -18
  159. package/dist/hooks/useRootAriaHidden/index.cjs +0 -1
  160. package/dist/hooks/useRootAriaHidden/index.mjs +0 -1
  161. package/dist/hooks/useRootAriaHidden/useRootAriaHidden.cjs +0 -11
  162. package/dist/hooks/useRootAriaHidden/useRootAriaHidden.mjs +0 -12
  163. package/dist/hooks/useVisibilityState/index.cjs +0 -1
  164. package/dist/hooks/useVisibilityState/index.mjs +0 -1
  165. package/dist/hooks/useVisibilityState/useVisibilityState.cjs +0 -15
  166. package/dist/hooks/useVisibilityState/useVisibilityState.mjs +0 -16
  167. package/dist/index.d.mts +0 -1
  168. package/dist/index.mjs +0 -73
  169. package/dist/lib/asChildRenderer/createAsChildTemplate.cjs +0 -72
  170. package/dist/lib/asChildRenderer/createAsChildTemplate.mjs +0 -73
  171. package/dist/lib/css/atoms/atomicProperties.cjs +0 -89
  172. package/dist/lib/css/atoms/atomicProperties.mjs +0 -90
  173. package/dist/lib/css/atoms/atoms.cjs +0 -2
  174. package/dist/lib/css/atoms/atoms.mjs +0 -1
  175. package/dist/lib/css/atoms/breakpoints.cjs +0 -13
  176. package/dist/lib/css/atoms/breakpoints.mjs +0 -14
  177. package/dist/lib/css/atoms/index.cjs +0 -2
  178. package/dist/lib/css/atoms/index.mjs +0 -1
  179. package/dist/lib/css/atoms/sprinkles.css.cjs +0 -38
  180. package/dist/lib/css/atoms/sprinkles.css.mjs +0 -39
  181. package/dist/lib/css/flexbox/flexbox.cjs +0 -16
  182. package/dist/lib/css/flexbox/flexbox.mjs +0 -17
  183. package/dist/lib/css/layers/layers.css.cjs +0 -7
  184. package/dist/lib/css/layers/layers.css.mjs +0 -8
  185. package/dist/lib/css/reset/reset.css.cjs +0 -38
  186. package/dist/lib/css/reset/reset.css.mjs +0 -37
  187. package/dist/lib/css/style/style.cjs +0 -28
  188. package/dist/lib/css/style/style.mjs +0 -29
  189. package/dist/lib/css/utils/cssUtils.cjs +0 -5
  190. package/dist/lib/css/utils/cssUtils.mjs +0 -6
  191. package/dist/lib/react/mergeProps.cjs +0 -42
  192. package/dist/lib/react/mergeProps.mjs +0 -43
  193. package/dist/lib/react/refs.cjs +0 -16
  194. package/dist/lib/react/refs.mjs +0 -17
  195. package/dist/lib/theme/makeComponentTheme.cjs +0 -5
  196. package/dist/lib/theme/makeComponentTheme.mjs +0 -6
  197. package/dist/lib/theme/makeTheme.cjs +0 -12
  198. package/dist/lib/theme/makeTheme.mjs +0 -13
  199. package/dist/lib/theme/makeVanillaTheme.cjs +0 -19
  200. package/dist/lib/theme/makeVanillaTheme.mjs +0 -20
  201. package/dist/lib/theme/store/theme.cjs +0 -92
  202. package/dist/lib/theme/store/theme.mjs +0 -93
  203. package/dist/lib/theme/tokens.cjs +0 -81
  204. package/dist/lib/theme/tokens.mjs +0 -82
  205. package/dist/lib/theme/vars.css.cjs +0 -9
  206. package/dist/lib/theme/vars.css.mjs +0 -10
  207. package/dist/lib/utils/atom-props.cjs +0 -15
  208. package/dist/lib/utils/atom-props.mjs +0 -16
  209. package/dist/lib/utils/classnames.cjs +0 -6
  210. package/dist/lib/utils/classnames.mjs +0 -7
  211. package/dist/lib/utils/dom.cjs +0 -12
  212. package/dist/lib/utils/dom.mjs +0 -13
  213. package/dist/lib/utils/math.cjs +0 -12
  214. package/dist/lib/utils/math.mjs +0 -13
  215. package/dist/momotaro.chunk.d.ts +0 -906
  216. package/dist/reset.d.mts +0 -2
  217. package/dist/reset.mjs +0 -2
  218. package/dist/themes/momotaro/components/button.css.cjs +0 -103
  219. package/dist/themes/momotaro/components/button.css.mjs +0 -104
  220. package/dist/themes/momotaro/components/checkbox.css.cjs +0 -59
  221. package/dist/themes/momotaro/components/checkbox.css.mjs +0 -60
  222. package/dist/themes/momotaro/components/dialog.css.cjs +0 -78
  223. package/dist/themes/momotaro/components/dialog.css.mjs +0 -79
  224. package/dist/themes/momotaro/components/divider.css.cjs +0 -15
  225. package/dist/themes/momotaro/components/divider.css.mjs +0 -16
  226. package/dist/themes/momotaro/components/helpers.css.cjs +0 -43
  227. package/dist/themes/momotaro/components/helpers.css.mjs +0 -44
  228. package/dist/themes/momotaro/components/index.cjs +0 -34
  229. package/dist/themes/momotaro/components/index.mjs +0 -35
  230. package/dist/themes/momotaro/components/input.css.cjs +0 -41
  231. package/dist/themes/momotaro/components/input.css.mjs +0 -42
  232. package/dist/themes/momotaro/components/label.css.cjs +0 -33
  233. package/dist/themes/momotaro/components/label.css.mjs +0 -34
  234. package/dist/themes/momotaro/components/link.css.cjs +0 -53
  235. package/dist/themes/momotaro/components/link.css.mjs +0 -54
  236. package/dist/themes/momotaro/components/popover.css.cjs +0 -32
  237. package/dist/themes/momotaro/components/popover.css.mjs +0 -33
  238. package/dist/themes/momotaro/components/progress.css.cjs +0 -55
  239. package/dist/themes/momotaro/components/progress.css.mjs +0 -56
  240. package/dist/themes/momotaro/components/radio.css.cjs +0 -60
  241. package/dist/themes/momotaro/components/radio.css.mjs +0 -61
  242. package/dist/themes/momotaro/components/select.css.cjs +0 -44
  243. package/dist/themes/momotaro/components/select.css.mjs +0 -45
  244. package/dist/themes/momotaro/components/slider.css.cjs +0 -89
  245. package/dist/themes/momotaro/components/slider.css.mjs +0 -90
  246. package/dist/themes/momotaro/components/spinner.css.cjs +0 -43
  247. package/dist/themes/momotaro/components/spinner.css.mjs +0 -44
  248. package/dist/themes/momotaro/components/switch.css.cjs +0 -58
  249. package/dist/themes/momotaro/components/switch.css.mjs +0 -59
  250. package/dist/themes/momotaro/components/tooltip.css.cjs +0 -30
  251. package/dist/themes/momotaro/components/tooltip.css.mjs +0 -31
  252. package/dist/themes/momotaro/components/transitions.cjs +0 -3
  253. package/dist/themes/momotaro/components/transitions.mjs +0 -4
  254. package/dist/themes/momotaro/index.cjs +0 -2
  255. package/dist/themes/momotaro/index.mjs +0 -1
  256. package/dist/themes/momotaro/momotaro.css.cjs +0 -13
  257. package/dist/themes/momotaro/momotaro.css.mjs +0 -14
  258. package/dist/themes/momotaro/tokens.css.cjs +0 -85
  259. package/dist/themes/momotaro/tokens.css.mjs +0 -86
  260. package/dist/themes/momotaro.cjs +0 -4
  261. package/dist/themes/momotaro.d.mts +0 -1
  262. package/dist/themes/momotaro.d.ts +0 -1
  263. package/dist/themes/momotaro.mjs +0 -4
  264. package/reset/index.d.ts +0 -1
  265. package/reset/package.json +0 -5
  266. package/themes/momotaro/index.d.ts +0 -1
  267. package/themes/momotaro/package.json +0 -5
@@ -1,906 +0,0 @@
1
- import { StyleRule } from '@vanilla-extract/css';
2
- import React$1, { useEffect } from 'react';
3
- import * as react_jsx_runtime from 'react/jsx-runtime';
4
- import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
5
-
6
- declare const atoms: ((props: {
7
- readonly backgroundColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
8
- readonly borderColor?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
9
- readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
10
- readonly borderWidth?: ("small" | "medium" | "large") | undefined;
11
- readonly border?: "none" | undefined;
12
- readonly insetBlock?: 0 | undefined;
13
- readonly insetBlockStart?: 0 | undefined;
14
- readonly insetBlockEnd?: 0 | undefined;
15
- readonly insetInline?: 0 | undefined;
16
- readonly insetInlineStart?: 0 | undefined;
17
- readonly insetInlineEnd?: 0 | undefined;
18
- readonly boxShadow?: ("small" | "medium" | "large") | undefined;
19
- readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
20
- readonly cursor?: "auto" | "pointer" | undefined;
21
- readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
22
- readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
23
- readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
24
- readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
25
- readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
26
- readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
27
- readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
28
- readonly maxInlineSize?: "auto" | "fit-content" | "full" | undefined;
29
- readonly opacity?: 0 | 1 | undefined;
30
- readonly overflow?: "auto" | "hidden" | "scroll" | "visible" | undefined;
31
- readonly overflowBlock?: "auto" | "hidden" | "scroll" | "visible" | undefined;
32
- readonly overflowInline?: "auto" | "hidden" | "scroll" | "visible" | undefined;
33
- readonly pointerEvents?: "none" | undefined;
34
- readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
35
- readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
36
- readonly textWrap?: "balance" | "wrap" | undefined;
37
- readonly transition?: ("slow" | "normal" | "fast") | undefined;
38
- readonly userSelect?: "none" | undefined;
39
- readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
40
- readonly wordBreak?: "break-word" | undefined;
41
- readonly wordWrap?: "break-word" | undefined;
42
- inset?: 0 | undefined;
43
- } & {
44
- readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
45
- mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
46
- tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
47
- desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
48
- wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
49
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
50
- readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
51
- mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
52
- tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
53
- desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
54
- wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
55
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
56
- readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
57
- mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
58
- tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
59
- desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
60
- wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
61
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
62
- readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
63
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
64
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
65
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
66
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
67
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
68
- readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
69
- mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
70
- tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
71
- desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
72
- wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
73
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
74
- readonly flex?: (1 | {
75
- mobile?: 1 | undefined;
76
- tablet?: 1 | undefined;
77
- desktop?: 1 | undefined;
78
- wide?: 1 | undefined;
79
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, 1 | null>;
80
- readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
81
- mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
82
- tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
83
- desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
84
- wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
85
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "row" | "row-reverse" | "column" | "column-reverse" | null>;
86
- readonly flexGrow?: (0 | 1 | {
87
- mobile?: 0 | 1 | undefined;
88
- tablet?: 0 | 1 | undefined;
89
- desktop?: 0 | 1 | undefined;
90
- wide?: 0 | 1 | undefined;
91
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, 0 | 1 | null>;
92
- readonly flexShrink?: (0 | 1 | {
93
- mobile?: 0 | 1 | undefined;
94
- tablet?: 0 | 1 | undefined;
95
- desktop?: 0 | 1 | undefined;
96
- wide?: 0 | 1 | undefined;
97
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, 0 | 1 | null>;
98
- readonly flexWrap?: ("wrap" | "nowrap" | {
99
- mobile?: "wrap" | "nowrap" | undefined;
100
- tablet?: "wrap" | "nowrap" | undefined;
101
- desktop?: "wrap" | "nowrap" | undefined;
102
- wide?: "wrap" | "nowrap" | undefined;
103
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "wrap" | "nowrap" | null>;
104
- readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
105
- mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
106
- tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
107
- desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
108
- wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
109
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
110
- readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
111
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
112
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
113
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
114
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
115
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
116
- readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
117
- mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
118
- tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
119
- desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
120
- wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
121
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
122
- readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
123
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
124
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
125
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
126
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
127
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
128
- readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
129
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
130
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
131
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
132
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
133
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
134
- readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
135
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
136
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
137
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
138
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
139
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
140
- readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
141
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
142
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
143
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
144
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
145
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
146
- readonly outline?: ("none" | {
147
- mobile?: "none" | undefined;
148
- tablet?: "none" | undefined;
149
- desktop?: "none" | undefined;
150
- wide?: "none" | undefined;
151
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | null>;
152
- readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
153
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
154
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
155
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
156
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
157
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
158
- readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
159
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
160
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
161
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
162
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
163
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
164
- readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
165
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
166
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
167
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
168
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
169
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
170
- readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
171
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
172
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
173
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
174
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
175
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
176
- readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
177
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
178
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
179
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
180
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
181
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
182
- readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
183
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
184
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
185
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
186
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
187
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
188
- readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
189
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
190
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
191
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
192
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
193
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
194
- readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
195
- mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
196
- tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
197
- desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
198
- wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
199
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
200
- readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
201
- mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
202
- tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
203
- desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
204
- wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
205
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
206
- readonly textAlign?: ("left" | "right" | "center" | "justify" | {
207
- mobile?: "left" | "right" | "center" | "justify" | undefined;
208
- tablet?: "left" | "right" | "center" | "justify" | undefined;
209
- desktop?: "left" | "right" | "center" | "justify" | undefined;
210
- wide?: "left" | "right" | "center" | "justify" | undefined;
211
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "left" | "right" | "center" | "justify" | null>;
212
- margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
213
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
214
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
215
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
216
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
217
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
218
- marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
219
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
220
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
221
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
222
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
223
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
224
- marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
225
- mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
226
- tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
227
- desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
228
- wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
229
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
230
- placeItems?: ("center" | "flex-start" | "flex-end" | {
231
- mobile?: "center" | "flex-start" | "flex-end" | undefined;
232
- tablet?: "center" | "flex-start" | "flex-end" | undefined;
233
- desktop?: "center" | "flex-start" | "flex-end" | undefined;
234
- wide?: "center" | "flex-start" | "flex-end" | undefined;
235
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<2 | 1 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
236
- }) => string) & {
237
- properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration">;
238
- };
239
-
240
- declare const breakpoints: {
241
- readonly mobile: 0;
242
- readonly tablet: 740;
243
- readonly desktop: 992;
244
- readonly wide: 1200;
245
- };
246
- type Breakpoint = keyof typeof breakpoints;
247
- declare function minMediaQuery(breakpoint: Exclude<Breakpoint, 'mobile'>): string;
248
-
249
- type AnyString = string & {};
250
- /**
251
- * Suggest a type for a string literal but also allow any string.
252
- */
253
- type OptionalLiteral<T extends string> = T | AnyString;
254
- type RecordLike = Record<string | number, unknown>;
255
-
256
- type Atoms = Parameters<typeof atoms>[0];
257
- type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
258
- type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
259
- type MarginAtoms = {
260
- margin?: Atoms['margin'];
261
- marginBlock?: Atoms['marginBlock'];
262
- marginBlockStart?: Atoms['marginBlockStart'];
263
- marginBlockEnd?: Atoms['marginBlockEnd'];
264
- marginInline?: Atoms['marginInline'];
265
- marginInlineStart?: Atoms['marginInlineStart'];
266
- marginInlineEnd?: Atoms['marginInlineEnd'];
267
- };
268
- type PaddingAtoms = {
269
- padding?: Atoms['padding'];
270
- paddingBlock?: Atoms['paddingBlock'];
271
- paddingBlockStart?: Atoms['paddingBlockStart'];
272
- paddingBlockEnd?: Atoms['paddingBlockEnd'];
273
- paddingInline?: Atoms['paddingInline'];
274
- paddingInlineStart?: Atoms['paddingInlineStart'];
275
- paddingInlineEnd?: Atoms['paddingInlineEnd'];
276
- };
277
- type TextAtoms = {
278
- color?: Atoms['color'];
279
- fontFamily?: Atoms['fontFamily'];
280
- fontSize?: Atoms['fontSize'];
281
- fontStyle?: Atoms['fontStyle'];
282
- fontWeight?: Atoms['fontWeight'];
283
- lineHeight?: Atoms['lineHeight'];
284
- textAlign?: Atoms['textAlign'];
285
- textDecoration?: Atoms['textDecoration'];
286
- textTransform?: Atoms['textTransform'];
287
- textWrap?: Atoms['textWrap'];
288
- whiteSpace?: Atoms['whiteSpace'];
289
- wordBreak?: Atoms['wordBreak'];
290
- wordWrap?: Atoms['wordWrap'];
291
- };
292
-
293
- type StyleRuleWithAtoms = Omit<StyleRule, keyof Atoms> & {
294
- [K in keyof Atoms]?: K extends keyof StyleRule ? Atoms[K] | AnyString | number : Atoms[K];
295
- };
296
- /**
297
- * A wrapper around vanilla-extract's `style` function that allows you to use
298
- * atoms and raw CSS values in the same object.
299
- */
300
- declare function style(props: StyleRuleWithAtoms | (StyleRuleWithAtoms | string)[]): string;
301
-
302
- type ButtonTheme = {
303
- base: string;
304
- variants: {
305
- variant: 'solid' | 'outline' | 'ghost';
306
- intent: 'neutral' | 'danger';
307
- size: 'small' | 'medium' | 'large';
308
- loading: boolean;
309
- disabled: boolean;
310
- };
311
- };
312
- type LinkTheme = {
313
- base: string;
314
- variants: {
315
- variant: 'inherit' | 'primary' | 'secondary';
316
- underline: boolean;
317
- };
318
- };
319
- type SpinnerTheme = {
320
- base: string;
321
- variants: {
322
- size: 'small' | 'medium' | 'large';
323
- color: Exclude<Atoms['color'], undefined>;
324
- };
325
- };
326
- type DividerTheme = {
327
- base?: string;
328
- variants: {
329
- color: Exclude<Atoms['color'], undefined>;
330
- };
331
- };
332
- type DialogTheme = {
333
- dialog: string;
334
- variants: {
335
- size: 'small' | 'medium' | 'large';
336
- };
337
- };
338
- type InputTheme = {
339
- container: string;
340
- input: string;
341
- variants: {
342
- variant: 'solid' | 'outline';
343
- disabled: boolean;
344
- required: boolean;
345
- };
346
- };
347
- type CheckboxTheme = {
348
- base: string;
349
- icon: string;
350
- label: string;
351
- variants: {
352
- required: boolean;
353
- };
354
- };
355
- type RadioTheme = {
356
- base: string;
357
- icon: string;
358
- label: string;
359
- };
360
- type LabelTheme = {
361
- base: string;
362
- variants: {
363
- size: 'small' | 'medium' | 'large';
364
- required: boolean;
365
- };
366
- };
367
- type ProgressTheme = {
368
- base: string;
369
- bar: string;
370
- variants: {
371
- indeterminate: boolean;
372
- };
373
- };
374
- type SwitchTheme = {
375
- base: string;
376
- slider: string;
377
- };
378
- type PopoverTheme = {
379
- base: string;
380
- };
381
- type SelectTheme = {
382
- wrapper?: string;
383
- select: string;
384
- icon: string;
385
- variants: {
386
- variant: 'solid' | 'outline';
387
- };
388
- };
389
- type SliderTheme = {
390
- base: string;
391
- track: string;
392
- filledTrack: string;
393
- thumb: string;
394
- variants: {
395
- size: 'small' | 'medium' | 'large';
396
- colorScheme: 'primary' | 'secondary';
397
- disabled: boolean;
398
- };
399
- };
400
- type TooltipTheme = {
401
- base: string;
402
- variants: {
403
- colorScheme: 'primary' | 'secondary';
404
- };
405
- };
406
- type ComponentThemes = {
407
- button: ButtonTheme;
408
- checkbox: CheckboxTheme;
409
- dialog: DialogTheme;
410
- divider: DividerTheme;
411
- input: InputTheme;
412
- label: LabelTheme;
413
- link: LinkTheme;
414
- popover: PopoverTheme;
415
- progress: ProgressTheme;
416
- radio: RadioTheme;
417
- select: SelectTheme;
418
- slider: SliderTheme;
419
- spinner: SpinnerTheme;
420
- switch: SwitchTheme;
421
- tooltip: TooltipTheme;
422
- };
423
-
424
- /**
425
- * Helper generic to convert a component theme to a styles object
426
- *
427
- * export type ThemeIn = {
428
- * base: string;
429
- * variants: {
430
- * intent: 'neutral' | 'danger';
431
- * level?: 1 | 2;
432
- * loading: boolean;
433
- * };
434
- * };
435
- * export type ThemeOut = {
436
- * base: string;
437
- * variants: {
438
- * intent: Record<'neutral' | 'danger', string>;
439
- * level?: Record<1 | 2, string>;
440
- * loading: string;
441
- * };
442
- * };
443
- */
444
- type VariantsToStyle<T extends RecordLike> = {
445
- [K in keyof T]?: T[K] extends string | number ? Partial<Record<T[K], string>> : T[K] extends boolean ? string : never;
446
- };
447
- /**
448
- * ComponentThemeToStyles is a helper type to define the props passed to useComponentStyles.
449
- */
450
- type ComponentThemeToStyles<T extends RecordLike> = Omit<T, 'variants'> & {
451
- variants?: T['variants'] extends RecordLike ? VariantsToStyle<T['variants']> : never;
452
- };
453
- type ComponentThemeCompoundVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
454
- variants: {
455
- [K in keyof T['variants']]?: T['variants'][K];
456
- };
457
- style: string;
458
- }[] : never;
459
- type ComponentThemeDefaultVariants<T extends RecordLike> = T['variants'] extends RecordLike ? {
460
- [K in keyof T['variants']]?: T['variants'][K];
461
- } : never;
462
- type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
463
- compoundVariants?: ComponentThemeCompoundVariants<T>;
464
- defaultVariants?: ComponentThemeDefaultVariants<T>;
465
- };
466
- type ThemeComponentsStyles = {
467
- [K in keyof ComponentThemes]?: ComponentTheme<ComponentThemes[K]>;
468
- };
469
- declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: ThemeComponentsStyles[T]): ThemeComponentsStyles[T];
470
-
471
- type FontWeight = 'regular' | 'medium' | 'strong';
472
- type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
473
- type Transition = 'slow' | 'normal' | 'fast';
474
- type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
475
- type BorderWidth = 'small' | 'medium' | 'large';
476
- type BoxShadow = 'small' | 'medium' | 'large';
477
- type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
478
- type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
479
- type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
480
- type ThemeTokens = {
481
- typography: {
482
- fontFamily: {
483
- body?: string;
484
- primary?: string;
485
- secondary?: string;
486
- };
487
- fontSize: Record<FontSize, number | string>;
488
- fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
489
- lineHeight: Record<LineHeight, number | string>;
490
- };
491
- spacing: Record<Space, number | string>;
492
- transition: Record<Transition, string>;
493
- border: {
494
- radius: Record<BorderRadius, number | string>;
495
- width: Record<BorderWidth, number | string>;
496
- };
497
- shadow: Record<BoxShadow, string>;
498
- focus: {
499
- boxShadow: string;
500
- };
501
- color: Record<Color, string>;
502
- };
503
-
504
- type ThemeInput = {
505
- name: string;
506
- tokens: ThemeTokens;
507
- components: ThemeComponentsStyles;
508
- };
509
- type Theme = {
510
- name: string;
511
- vars: string;
512
- components: ThemeComponentsStyles;
513
- };
514
- declare function makeTheme(theme: ThemeInput): Theme;
515
-
516
- declare const vars: {
517
- space: {
518
- none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
519
- gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
520
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
521
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
522
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
523
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
524
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
525
- };
526
- borderRadius: {
527
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
528
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
529
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
530
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
531
- };
532
- color: {
533
- link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
534
- white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
535
- black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
536
- body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
537
- primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
538
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
539
- primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
540
- secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
541
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
542
- secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
543
- text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
544
- textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
545
- textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
546
- danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
547
- };
548
- borderWidth: {
549
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
550
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
551
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
552
- };
553
- fontFamily: {
554
- body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
555
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
556
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
557
- };
558
- fontSize: {
559
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
560
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
561
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
562
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
563
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
564
- };
565
- fontWeight: {
566
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
567
- regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
568
- strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
569
- };
570
- lineHeight: {
571
- xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
572
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
573
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
574
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
575
- xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
576
- };
577
- transition: {
578
- slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
579
- normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
580
- fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
581
- };
582
- shadow: {
583
- small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
584
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
585
- large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
586
- };
587
- focus: {
588
- boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
589
- };
590
- };
591
-
592
- type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
593
-
594
- type VisuallyHiddenProps = {
595
- children: React.ReactNode;
596
- } & HTMLElementProps<HTMLSpanElement>;
597
- declare const VisuallyHidden: React.FC<VisuallyHiddenProps>;
598
-
599
- type DividerProps = {
600
- className?: string;
601
- color?: Atoms['backgroundColor'];
602
- style?: React.CSSProperties;
603
- };
604
- declare const Divider: React.FC<DividerProps>;
605
-
606
- type ProgressProps = {
607
- 'aria-label'?: string;
608
- 'aria-labelledby'?: string;
609
- 'aria-valuetext'?: string;
610
- className?: string;
611
- indeterminate?: boolean;
612
- max?: number;
613
- style?: React$1.CSSProperties;
614
- /**
615
- * The value of the progress bar, between 0 and max=100.
616
- */
617
- value?: number;
618
- ref?: React$1.Ref<HTMLDivElement>;
619
- };
620
- declare const Progress: React$1.FC<ProgressProps>;
621
-
622
- type SpinnerProps = {
623
- className?: string;
624
- color?: SpinnerTheme['variants']['color'];
625
- size?: SpinnerTheme['variants']['size'];
626
- style?: React.CSSProperties;
627
- } & MarginAtoms;
628
- declare const Spinner: React.FC<SpinnerProps>;
629
-
630
- type ButtonProps = {
631
- alignSelf?: Atoms['alignSelf'];
632
- asChild?: boolean;
633
- children: React$1.ReactNode;
634
- disabled?: boolean;
635
- endSlot?: React$1.ReactNode;
636
- inlineSize?: Atoms['inlineSize'];
637
- intent?: ButtonTheme['variants']['intent'];
638
- loading?: boolean;
639
- popovertarget?: string;
640
- ref?: React$1.Ref<HTMLButtonElement>;
641
- size?: ButtonTheme['variants']['size'];
642
- startSlot?: React$1.ReactNode;
643
- type?: 'button' | 'submit' | 'reset';
644
- variant?: ButtonTheme['variants']['variant'];
645
- } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
646
- declare const Button: React$1.FC<ButtonProps>;
647
-
648
- type CheckboxProps = {
649
- children?: React$1.ReactNode;
650
- name: string;
651
- ref?: React$1.Ref<HTMLInputElement>;
652
- required?: boolean;
653
- } & HTMLElementProps<HTMLInputElement>;
654
- declare const Checkbox: React$1.FC<CheckboxProps>;
655
-
656
- type InputProps = {
657
- className?: string;
658
- endSlot?: React.ReactNode;
659
- name: string;
660
- ref?: React.Ref<HTMLInputElement>;
661
- startSlot?: React.ReactNode;
662
- type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
663
- } & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
664
- declare const Input: React.FC<InputProps>;
665
-
666
- type LabelProps = {
667
- /**
668
- * If true, the label will be rendered as a span element
669
- * but will still have the same styles as a label.
670
- * Useful for when you want to use a label element but
671
- * can't because of the parent element's structure.
672
- */
673
- asSpan?: boolean;
674
- htmlFor?: string;
675
- children?: React.ReactNode;
676
- required?: boolean;
677
- size?: LabelTheme['variants']['size'];
678
- cursor?: Atoms['cursor'];
679
- } & HTMLElementProps<HTMLLabelElement>;
680
- declare const Label: React.FC<LabelProps>;
681
-
682
- type RadioProps = {
683
- children?: React.ReactNode;
684
- name: string;
685
- ref?: React.Ref<HTMLInputElement>;
686
- value: string;
687
- } & HTMLElementProps<HTMLInputElement>;
688
- declare const Radio: React.FC<RadioProps>;
689
-
690
- type SelectProps = {
691
- children: React$1.ReactNode;
692
- placeholder?: string;
693
- ref?: React$1.Ref<HTMLSelectElement>;
694
- variant?: SelectTheme['variants']['variant'];
695
- } & HTMLElementProps<HTMLSelectElement>;
696
- declare const Select: React$1.FC<SelectProps>;
697
-
698
- type SliderProps = {
699
- name?: string;
700
- min?: number;
701
- max?: number;
702
- step?: number;
703
- value?: number;
704
- defaultValue?: number;
705
- onChange?: (value: number) => void;
706
- orientation?: 'horizontal' | 'vertical';
707
- 'aria-labelledby'?: string;
708
- 'aria-valuetext'?: string;
709
- 'aria-label'?: string;
710
- size: SliderTheme['variants']['size'];
711
- colorScheme: SliderTheme['variants']['colorScheme'];
712
- disabled?: boolean;
713
- precision?: number;
714
- };
715
- declare const Slider: React$1.FC<SliderProps>;
716
-
717
- type SwitchProps = {
718
- onChange?: (value: boolean) => void;
719
- ref?: React.Ref<HTMLInputElement>;
720
- } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
721
- declare const Switch: React.FC<SwitchProps>;
722
-
723
- type BoxProps = {
724
- asChild?: boolean;
725
- children?: React$1.ReactNode;
726
- className?: string;
727
- ref?: React$1.Ref<HTMLDivElement>;
728
- style?: React$1.CSSProperties;
729
- } & Atoms & HTMLElementProps<HTMLDivElement>;
730
- declare const Box: React$1.FC<BoxProps>;
731
-
732
- declare const justifyContentMap: {
733
- readonly left: "flex-start";
734
- readonly right: "flex-end";
735
- readonly center: "center";
736
- readonly between: "space-between";
737
- readonly around: "space-around";
738
- };
739
- type JustifyContentMap = typeof justifyContentMap;
740
- declare const alignItemsMap: {
741
- readonly left: "flex-start";
742
- readonly right: "flex-end";
743
- readonly center: "center";
744
- readonly stretch: "stretch";
745
- };
746
- type AlignItemsMap = typeof alignItemsMap;
747
-
748
- type InlineProps = {
749
- alignX?: keyof JustifyContentMap;
750
- alignY?: keyof AlignItemsMap;
751
- tag?: 'div' | 'ul' | 'ol' | 'nav';
752
- children: React.ReactNode;
753
- className?: string;
754
- display?: ResponsiveDisplayFlex;
755
- spacing: Atoms['gap'];
756
- style?: React.CSSProperties;
757
- } & MarginAtoms & PaddingAtoms;
758
- declare const Inline: React.FC<InlineProps>;
759
-
760
- type StackProps = {
761
- alignX?: keyof AlignItemsMap;
762
- tag?: 'div' | 'section' | 'ul' | 'ol';
763
- children: React.ReactNode;
764
- className?: string;
765
- display?: ResponsiveDisplayFlex;
766
- spacing: Atoms['gap'];
767
- style?: React.CSSProperties;
768
- role?: React.AriaRole;
769
- /**
770
- * Start prop is only valid when tag="ol"
771
- */
772
- start?: number;
773
- } & MarginAtoms & PaddingAtoms;
774
- declare const Stack: React.FC<StackProps>;
775
-
776
- type LinkProps = {
777
- asChild?: boolean;
778
- children?: React.ReactNode;
779
- ref?: React.Ref<HTMLAnchorElement>;
780
- underline?: LinkTheme['variants']['underline'];
781
- variant?: LinkTheme['variants']['variant'];
782
- } & MarginAtoms & HTMLElementProps<HTMLAnchorElement>;
783
- declare const Link: React.FC<LinkProps>;
784
-
785
- type BlocksProviderProps = {
786
- children: React.ReactNode;
787
- theme: Theme;
788
- className?: string;
789
- style?: React.CSSProperties;
790
- };
791
- declare const BlocksProvider: React.FC<BlocksProviderProps>;
792
-
793
- type PortalProps = {
794
- children: React.ReactNode;
795
- container?: HTMLElement;
796
- };
797
- declare const Portal: React.FC<PortalProps>;
798
-
799
- type DialogProps = {
800
- children?: React.ReactNode;
801
- open: boolean;
802
- onRequestClose: () => void;
803
- className?: string;
804
- size?: DialogTheme['variants']['size'];
805
- 'aria-label'?: string;
806
- };
807
- declare const Dialog: React.FC<DialogProps>;
808
-
809
- type PopoverProps = {
810
- align?: 'top' | 'bottom' | 'left' | 'right';
811
- anchorElement: React.RefObject<HTMLElement | null>;
812
- children: React.ReactNode;
813
- className?: string;
814
- onRequestClose: () => void;
815
- open: boolean;
816
- repositionOnScroll?: boolean;
817
- style?: React.CSSProperties;
818
- } & HTMLElementProps<HTMLDivElement>;
819
-
820
- type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
821
- type TooltipProps = {
822
- align?: PopoverProps['align'];
823
- children: ReactElement;
824
- label: React.ReactNode;
825
- colorScheme?: TooltipTheme['variants']['colorScheme'];
826
- };
827
- declare const Tooltip: React.FC<TooltipProps>;
828
-
829
- type HeadingProps = {
830
- children: React.ReactNode;
831
- className?: string;
832
- level: 1 | 2 | 3 | 4 | 5 | 6;
833
- } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
834
- declare const Heading: React.FC<HeadingProps>;
835
-
836
- type Tags = 'del' | 'em' | 'ins' | 'label' | 'p' | 's' | 'small' | 'span' | 'strong' | 'sub' | 'sup';
837
- type TextProps<Tag extends Tags = 'span'> = {
838
- asChild?: boolean;
839
- children: React$1.ReactNode;
840
- ref?: React$1.Ref<HTMLElementTagNameMap[Tag]>;
841
- tag?: Tag;
842
- } & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
843
- declare const Text: <T extends Tags = "span">({ asChild, children, className, ref, tag, ...restProps }: TextProps<T>) => react_jsx_runtime.JSX.Element;
844
-
845
- type TemplateProps = {
846
- asChild?: boolean;
847
- children?: React$1.ReactNode;
848
- ref?: React$1.Ref<Element>;
849
- };
850
- /**
851
- * Create a Template component that can render as a child of another component with asChild prop.
852
- *
853
- * Example
854
- * // Create a Template and Slot components with div as default element
855
- * const { Template, Slot } = createAsChildContainer('div');
856
- *
857
- * const MyComponent = ({ children, asChild, ...restProps }) => {
858
- * return (
859
- * <Template asChild={asChild} {...restProps}>
860
- * <Slot>{childen}</Slot> // Slot is required, will be replaced with children
861
- * </Template>
862
- * );
863
- * }
864
- *
865
- * <MyComponent className="test">Not a link</MyComponent> // Renders as <div class="test">Not a link</div>
866
- * <MyComponent className="test"><a href="#">Link</a></MyComponent> // Renders as <div class="test"><a href="#">Link</a></div>
867
- * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
868
- */
869
- declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
870
- Template: React$1.FC<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]>>;
871
- Slot: React$1.FC<SlotProps>;
872
- };
873
- type SlotProps = {
874
- children: React$1.ReactNode;
875
- };
876
-
877
- /**
878
- * useLayoutEffect is not avaible on server side use useEffect instead.
879
- */
880
- declare const useIsomorphicLayoutEffect: typeof useEffect;
881
-
882
- type UseKeyboardOptions = {
883
- enabled?: boolean;
884
- type?: 'keydown' | 'keyup';
885
- };
886
- declare const useKeyboard: (key: KeyboardEvent["key"], callback: (event: KeyboardEvent) => void, { enabled, type }?: UseKeyboardOptions) => void;
887
-
888
- declare const usePreventBodyScroll: (enabled?: boolean) => void;
889
-
890
- /**
891
- * Sets the `aria-hidden` attribute on this provider's root element.
892
- *
893
- * Usefull for modals and other overlays that should hide the rest of the page from screen readers
894
- * and are rendered inside their own `BlocksProvider`.
895
- */
896
- declare const useRootAriaHidden: (hidden: boolean) => void;
897
-
898
- declare function setTheme(theme: Theme): void;
899
- declare function getTheme(): Theme;
900
-
901
- type Args = null | undefined | boolean | string | unknown;
902
- declare const classnames: (...args: Args[]) => string | undefined;
903
-
904
- declare const momotaro: Theme;
905
-
906
- export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, Tooltip, type TooltipProps, VisuallyHidden, type VisuallyHiddenProps, atoms, classnames, createAsChildTemplate, getTheme, makeComponentTheme, makeTheme, minMediaQuery, momotaro, setTheme, style, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };