@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
package/dist/reset.d.mts DELETED
@@ -1,2 +0,0 @@
1
-
2
- export { }
package/dist/reset.mjs DELETED
@@ -1,2 +0,0 @@
1
- import "./lib/css/atoms/sprinkles.css.mjs";
2
- import "./lib/css/reset/reset.css.mjs";
@@ -1,103 +0,0 @@
1
- "use strict";
2
- const fileScope = require("@vanilla-extract/css/fileScope");
3
- const css = require("@vanilla-extract/css");
4
- const lib_css_style_style_cjs = require("../../../lib/css/style/style.cjs");
5
- const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
6
- const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
7
- const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
8
- fileScope.setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
9
- const intentColor = css.createVar("intentColor");
10
- const hoverBackgroundColor = css.createVar("hoverBackgroundColor");
11
- const button = lib_theme_makeComponentTheme_cjs.makeComponentTheme("button", {
12
- base: lib_css_style_style_cjs.style([{
13
- display: "inline-flex",
14
- placeItems: "center",
15
- fontSize: "medium",
16
- borderRadius: "medium",
17
- fontWeight: "medium",
18
- // Space between `startSlot | children | endSlot`
19
- gap: "small",
20
- selectors: {
21
- "&:hover:not(:disabled)": {
22
- backgroundColor: hoverBackgroundColor
23
- }
24
- }
25
- }, themes_momotaro_components_helpers_css_cjs.clickable]),
26
- variants: {
27
- variant: {
28
- solid: lib_css_style_style_cjs.style({
29
- color: lib_theme_vars_css_cjs.vars.color.white,
30
- backgroundColor: intentColor,
31
- border: "none"
32
- }),
33
- outline: lib_css_style_style_cjs.style({
34
- color: intentColor,
35
- borderWidth: "small",
36
- borderStyle: "solid",
37
- borderColor: intentColor,
38
- background: "transparent"
39
- }),
40
- ghost: lib_css_style_style_cjs.style({
41
- color: intentColor,
42
- background: "transparent"
43
- })
44
- },
45
- size: {
46
- small: lib_css_style_style_cjs.style({
47
- paddingInline: "large",
48
- height: 40
49
- }),
50
- medium: lib_css_style_style_cjs.style({
51
- paddingInline: "xlarge",
52
- height: 56
53
- }),
54
- large: lib_css_style_style_cjs.style({
55
- paddingInline: "xlarge",
56
- height: 72
57
- })
58
- },
59
- intent: {
60
- neutral: lib_css_style_style_cjs.style({
61
- vars: {
62
- [intentColor]: lib_theme_vars_css_cjs.vars.color.primary,
63
- [hoverBackgroundColor]: lib_theme_vars_css_cjs.vars.color.primaryLight
64
- }
65
- }),
66
- danger: lib_css_style_style_cjs.style({
67
- vars: {
68
- [intentColor]: lib_theme_vars_css_cjs.vars.color.danger,
69
- [hoverBackgroundColor]: "#fff8f7",
70
- [themes_momotaro_components_helpers_css_cjs.focusRingColor]: lib_theme_vars_css_cjs.vars.color.danger
71
- }
72
- })
73
- }
74
- },
75
- compoundVariants: [{
76
- variants: {
77
- variant: "solid",
78
- intent: "neutral"
79
- },
80
- style: lib_css_style_style_cjs.style({
81
- vars: {
82
- [hoverBackgroundColor]: lib_theme_vars_css_cjs.vars.color.primaryDark
83
- }
84
- })
85
- }, {
86
- variants: {
87
- variant: "solid",
88
- intent: "danger"
89
- },
90
- style: lib_css_style_style_cjs.style({
91
- vars: {
92
- [hoverBackgroundColor]: "#f9b1a9"
93
- }
94
- })
95
- }],
96
- defaultVariants: {
97
- size: "small",
98
- variant: "solid",
99
- intent: "neutral"
100
- }
101
- });
102
- fileScope.endFileScope();
103
- exports.button = button;
@@ -1,104 +0,0 @@
1
- import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { createVar } from "@vanilla-extract/css";
3
- import { style } from "../../../lib/css/style/style.mjs";
4
- import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
5
- import { vars } from "../../../lib/theme/vars.css.mjs";
6
- import { focusRingColor, clickable } from "./helpers.css.mjs";
7
- setFileScope("src/themes/momotaro/components/button.css.ts", "@blockle/blocks");
8
- const intentColor = createVar("intentColor");
9
- const hoverBackgroundColor = createVar("hoverBackgroundColor");
10
- const button = makeComponentTheme("button", {
11
- base: style([{
12
- display: "inline-flex",
13
- placeItems: "center",
14
- fontSize: "medium",
15
- borderRadius: "medium",
16
- fontWeight: "medium",
17
- // Space between `startSlot | children | endSlot`
18
- gap: "small",
19
- selectors: {
20
- "&:hover:not(:disabled)": {
21
- backgroundColor: hoverBackgroundColor
22
- }
23
- }
24
- }, clickable]),
25
- variants: {
26
- variant: {
27
- solid: style({
28
- color: vars.color.white,
29
- backgroundColor: intentColor,
30
- border: "none"
31
- }),
32
- outline: style({
33
- color: intentColor,
34
- borderWidth: "small",
35
- borderStyle: "solid",
36
- borderColor: intentColor,
37
- background: "transparent"
38
- }),
39
- ghost: style({
40
- color: intentColor,
41
- background: "transparent"
42
- })
43
- },
44
- size: {
45
- small: style({
46
- paddingInline: "large",
47
- height: 40
48
- }),
49
- medium: style({
50
- paddingInline: "xlarge",
51
- height: 56
52
- }),
53
- large: style({
54
- paddingInline: "xlarge",
55
- height: 72
56
- })
57
- },
58
- intent: {
59
- neutral: style({
60
- vars: {
61
- [intentColor]: vars.color.primary,
62
- [hoverBackgroundColor]: vars.color.primaryLight
63
- }
64
- }),
65
- danger: style({
66
- vars: {
67
- [intentColor]: vars.color.danger,
68
- [hoverBackgroundColor]: "#fff8f7",
69
- [focusRingColor]: vars.color.danger
70
- }
71
- })
72
- }
73
- },
74
- compoundVariants: [{
75
- variants: {
76
- variant: "solid",
77
- intent: "neutral"
78
- },
79
- style: style({
80
- vars: {
81
- [hoverBackgroundColor]: vars.color.primaryDark
82
- }
83
- })
84
- }, {
85
- variants: {
86
- variant: "solid",
87
- intent: "danger"
88
- },
89
- style: style({
90
- vars: {
91
- [hoverBackgroundColor]: "#f9b1a9"
92
- }
93
- })
94
- }],
95
- defaultVariants: {
96
- size: "small",
97
- variant: "solid",
98
- intent: "neutral"
99
- }
100
- });
101
- endFileScope();
102
- export {
103
- button
104
- };
@@ -1,59 +0,0 @@
1
- "use strict";
2
- const fileScope = require("@vanilla-extract/css/fileScope");
3
- const css = require("@vanilla-extract/css");
4
- const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
5
- const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
6
- const themes_momotaro_components_helpers_css_cjs = require("./helpers.css.cjs");
7
- const themes_momotaro_components_transitions_cjs = require("./transitions.cjs");
8
- const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
9
- fileScope.setFileScope("src/themes/momotaro/components/checkbox.css.ts", "@blockle/blocks");
10
- const checkbox = lib_theme_makeComponentTheme_cjs.makeComponentTheme("checkbox", {
11
- base: css.style([{
12
- display: "flex",
13
- alignItems: "center",
14
- justifyContent: "center",
15
- inlineSize: 24,
16
- blockSize: 24,
17
- "@media": {
18
- "(prefers-reduced-motion: no-preference)": {
19
- transition: `background-color ${lib_theme_vars_css_cjs.vars.transition.normal}, box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
20
- }
21
- },
22
- selectors: {
23
- "&:hover:not(:has(input:disabled))": {
24
- backgroundColor: lib_theme_vars_css_cjs.vars.color.primaryDark
25
- },
26
- "&:has(input:checked)": {
27
- backgroundColor: lib_theme_vars_css_cjs.vars.color.primary
28
- }
29
- }
30
- }, lib_css_atoms_sprinkles_css_cjs.atoms({
31
- backgroundColor: "primaryLight",
32
- borderRadius: "small"
33
- }), themes_momotaro_components_helpers_css_cjs.focusable], "checkbox_base"),
34
- icon: css.style({
35
- inlineSize: "1rem",
36
- blockSize: "1rem",
37
- color: "white",
38
- transform: "scale(0)",
39
- selectors: {
40
- "input:checked ~ &": {
41
- transform: "scale(1)"
42
- }
43
- },
44
- "@media": {
45
- "(prefers-reduced-motion: no-preference)": {
46
- transition: `transform ${lib_theme_vars_css_cjs.vars.transition.normal} ${themes_momotaro_components_transitions_cjs.bounceOut}`
47
- }
48
- }
49
- }, "checkbox_icon"),
50
- label: lib_css_atoms_sprinkles_css_cjs.atoms({
51
- display: "flex",
52
- flexDirection: "row",
53
- padding: "xsmall",
54
- gap: "medium",
55
- cursor: "pointer"
56
- })
57
- });
58
- fileScope.endFileScope();
59
- exports.checkbox = checkbox;
@@ -1,60 +0,0 @@
1
- import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { style } from "@vanilla-extract/css";
3
- import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
4
- import { vars } from "../../../lib/theme/vars.css.mjs";
5
- import { focusable } from "./helpers.css.mjs";
6
- import { bounceOut } from "./transitions.mjs";
7
- import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
8
- setFileScope("src/themes/momotaro/components/checkbox.css.ts", "@blockle/blocks");
9
- const checkbox = makeComponentTheme("checkbox", {
10
- base: style([{
11
- display: "flex",
12
- alignItems: "center",
13
- justifyContent: "center",
14
- inlineSize: 24,
15
- blockSize: 24,
16
- "@media": {
17
- "(prefers-reduced-motion: no-preference)": {
18
- transition: `background-color ${vars.transition.normal}, box-shadow ${vars.transition.fast}`
19
- }
20
- },
21
- selectors: {
22
- "&:hover:not(:has(input:disabled))": {
23
- backgroundColor: vars.color.primaryDark
24
- },
25
- "&:has(input:checked)": {
26
- backgroundColor: vars.color.primary
27
- }
28
- }
29
- }, atoms({
30
- backgroundColor: "primaryLight",
31
- borderRadius: "small"
32
- }), focusable], "checkbox_base"),
33
- icon: style({
34
- inlineSize: "1rem",
35
- blockSize: "1rem",
36
- color: "white",
37
- transform: "scale(0)",
38
- selectors: {
39
- "input:checked ~ &": {
40
- transform: "scale(1)"
41
- }
42
- },
43
- "@media": {
44
- "(prefers-reduced-motion: no-preference)": {
45
- transition: `transform ${vars.transition.normal} ${bounceOut}`
46
- }
47
- }
48
- }, "checkbox_icon"),
49
- label: atoms({
50
- display: "flex",
51
- flexDirection: "row",
52
- padding: "xsmall",
53
- gap: "medium",
54
- cursor: "pointer"
55
- })
56
- });
57
- endFileScope();
58
- export {
59
- checkbox
60
- };
@@ -1,78 +0,0 @@
1
- "use strict";
2
- const fileScope = require("@vanilla-extract/css/fileScope");
3
- const css = require("@vanilla-extract/css");
4
- const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
5
- const lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
6
- fileScope.setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
7
- const dialog = lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialog", {
8
- dialog: css.style([lib_css_atoms_sprinkles_css_cjs.atoms({
9
- display: "flex",
10
- flexDirection: "column",
11
- padding: "gutter",
12
- border: "none",
13
- overflow: "auto",
14
- borderRadius: "medium",
15
- boxShadow: "large"
16
- }), {
17
- maxHeight: "90%",
18
- minWidth: "300px",
19
- "::backdrop": {
20
- backgroundColor: "rgba(0, 0, 0, 0.5)"
21
- },
22
- selectors: {
23
- "&[open]": {
24
- transform: "translate(0, 0)",
25
- opacity: 1,
26
- // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
27
- "@starting-style": {
28
- transform: "translate(0, -120px)",
29
- opacity: 0
30
- }
31
- },
32
- "&[open]::backdrop": {
33
- opacity: 1,
34
- "@starting-style": {
35
- opacity: 0
36
- }
37
- }
38
- },
39
- // Apply the animation only if the user has not requested reduced motion
40
- "@media": {
41
- "(prefers-reduced-motion: no-preference)": {
42
- // Ending style
43
- transform: "translate(0, -120px)",
44
- opacity: 0,
45
- transitionBehavior: "allow-discrete",
46
- transitionProperty: "opacity, transform, overlay, display",
47
- transitionDuration: "240ms, 160ms, 240ms, 240ms",
48
- "::backdrop": {
49
- opacity: 0,
50
- transitionBehavior: "allow-discrete",
51
- transitionProperty: "opacity, overlay, display",
52
- transitionDuration: "160ms, 240ms, 240ms"
53
- }
54
- }
55
- }
56
- }], "dialog_dialog"),
57
- variants: {
58
- size: {
59
- small: css.style({
60
- width: "400px",
61
- maxWidth: "min(400px, 90%)"
62
- }, "dialog_variants_size_small"),
63
- medium: css.style({
64
- width: "600px",
65
- maxWidth: "min(600px, 90%)"
66
- }, "dialog_variants_size_medium"),
67
- large: css.style({
68
- width: "800px",
69
- maxWidth: "min(800px, 90%)"
70
- }, "dialog_variants_size_large")
71
- }
72
- },
73
- defaultVariants: {
74
- size: "small"
75
- }
76
- });
77
- fileScope.endFileScope();
78
- exports.dialog = dialog;
@@ -1,79 +0,0 @@
1
- import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { style } from "@vanilla-extract/css";
3
- import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
4
- import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
5
- setFileScope("src/themes/momotaro/components/dialog.css.ts", "@blockle/blocks");
6
- const dialog = makeComponentTheme("dialog", {
7
- dialog: style([atoms({
8
- display: "flex",
9
- flexDirection: "column",
10
- padding: "gutter",
11
- border: "none",
12
- overflow: "auto",
13
- borderRadius: "medium",
14
- boxShadow: "large"
15
- }), {
16
- maxHeight: "90%",
17
- minWidth: "300px",
18
- "::backdrop": {
19
- backgroundColor: "rgba(0, 0, 0, 0.5)"
20
- },
21
- selectors: {
22
- "&[open]": {
23
- transform: "translate(0, 0)",
24
- opacity: 1,
25
- // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
26
- "@starting-style": {
27
- transform: "translate(0, -120px)",
28
- opacity: 0
29
- }
30
- },
31
- "&[open]::backdrop": {
32
- opacity: 1,
33
- "@starting-style": {
34
- opacity: 0
35
- }
36
- }
37
- },
38
- // Apply the animation only if the user has not requested reduced motion
39
- "@media": {
40
- "(prefers-reduced-motion: no-preference)": {
41
- // Ending style
42
- transform: "translate(0, -120px)",
43
- opacity: 0,
44
- transitionBehavior: "allow-discrete",
45
- transitionProperty: "opacity, transform, overlay, display",
46
- transitionDuration: "240ms, 160ms, 240ms, 240ms",
47
- "::backdrop": {
48
- opacity: 0,
49
- transitionBehavior: "allow-discrete",
50
- transitionProperty: "opacity, overlay, display",
51
- transitionDuration: "160ms, 240ms, 240ms"
52
- }
53
- }
54
- }
55
- }], "dialog_dialog"),
56
- variants: {
57
- size: {
58
- small: style({
59
- width: "400px",
60
- maxWidth: "min(400px, 90%)"
61
- }, "dialog_variants_size_small"),
62
- medium: style({
63
- width: "600px",
64
- maxWidth: "min(600px, 90%)"
65
- }, "dialog_variants_size_medium"),
66
- large: style({
67
- width: "800px",
68
- maxWidth: "min(800px, 90%)"
69
- }, "dialog_variants_size_large")
70
- }
71
- },
72
- defaultVariants: {
73
- size: "small"
74
- }
75
- });
76
- endFileScope();
77
- export {
78
- dialog
79
- };
@@ -1,15 +0,0 @@
1
- "use strict";
2
- const fileScope = require("@vanilla-extract/css/fileScope");
3
- const css = require("@vanilla-extract/css");
4
- const lib_theme_makeComponentTheme_cjs = require("../../../lib/theme/makeComponentTheme.cjs");
5
- fileScope.setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
6
- const divider = lib_theme_makeComponentTheme_cjs.makeComponentTheme("divider", {
7
- base: css.style({
8
- blockSize: 1
9
- }, "divider_base"),
10
- defaultVariants: {
11
- color: "textLight"
12
- }
13
- });
14
- fileScope.endFileScope();
15
- exports.divider = divider;
@@ -1,16 +0,0 @@
1
- import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { style } from "@vanilla-extract/css";
3
- import { makeComponentTheme } from "../../../lib/theme/makeComponentTheme.mjs";
4
- setFileScope("src/themes/momotaro/components/divider.css.ts", "@blockle/blocks");
5
- const divider = makeComponentTheme("divider", {
6
- base: style({
7
- blockSize: 1
8
- }, "divider_base"),
9
- defaultVariants: {
10
- color: "textLight"
11
- }
12
- });
13
- endFileScope();
14
- export {
15
- divider
16
- };
@@ -1,43 +0,0 @@
1
- "use strict";
2
- const fileScope = require("@vanilla-extract/css/fileScope");
3
- const css = require("@vanilla-extract/css");
4
- const lib_theme_vars_css_cjs = require("../../../lib/theme/vars.css.cjs");
5
- fileScope.setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
6
- const focusRingColor = css.createVar("focusRingColor");
7
- const focusable = css.style({
8
- "@media": {
9
- "(prefers-reduced-motion: no-preference)": {
10
- transition: `box-shadow ${lib_theme_vars_css_cjs.vars.transition.fast}`
11
- }
12
- },
13
- ":focus-visible": {
14
- outline: "2px solid transparent",
15
- outlineOffset: "2px",
16
- boxShadow: `0 0 1px 2px ${css.fallbackVar(focusRingColor, "#AF8EFF")}`
17
- },
18
- selectors: {
19
- "&:disabled, &[disabled]": {
20
- opacity: 0.5,
21
- cursor: "auto",
22
- pointerEvents: "none"
23
- },
24
- "&:has(input:focus-visible)": {
25
- outline: "2px solid transparent",
26
- outlineOffset: "2px",
27
- boxShadow: lib_theme_vars_css_cjs.vars.focus.boxShadow
28
- },
29
- "&:has(input:disabled)": {
30
- opacity: 0.5,
31
- cursor: "auto"
32
- }
33
- }
34
- }, "focusable");
35
- const clickable = css.style([focusable, {
36
- ":active": {
37
- transform: "scale(0.975)"
38
- }
39
- }], "clickable");
40
- fileScope.endFileScope();
41
- exports.clickable = clickable;
42
- exports.focusRingColor = focusRingColor;
43
- exports.focusable = focusable;
@@ -1,44 +0,0 @@
1
- import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { style, fallbackVar, createVar } from "@vanilla-extract/css";
3
- import { vars } from "../../../lib/theme/vars.css.mjs";
4
- setFileScope("src/themes/momotaro/components/helpers.css.ts", "@blockle/blocks");
5
- const focusRingColor = createVar("focusRingColor");
6
- const focusable = style({
7
- "@media": {
8
- "(prefers-reduced-motion: no-preference)": {
9
- transition: `box-shadow ${vars.transition.fast}`
10
- }
11
- },
12
- ":focus-visible": {
13
- outline: "2px solid transparent",
14
- outlineOffset: "2px",
15
- boxShadow: `0 0 1px 2px ${fallbackVar(focusRingColor, "#AF8EFF")}`
16
- },
17
- selectors: {
18
- "&:disabled, &[disabled]": {
19
- opacity: 0.5,
20
- cursor: "auto",
21
- pointerEvents: "none"
22
- },
23
- "&:has(input:focus-visible)": {
24
- outline: "2px solid transparent",
25
- outlineOffset: "2px",
26
- boxShadow: vars.focus.boxShadow
27
- },
28
- "&:has(input:disabled)": {
29
- opacity: 0.5,
30
- cursor: "auto"
31
- }
32
- }
33
- }, "focusable");
34
- const clickable = style([focusable, {
35
- ":active": {
36
- transform: "scale(0.975)"
37
- }
38
- }], "clickable");
39
- endFileScope();
40
- export {
41
- clickable,
42
- focusRingColor,
43
- focusable
44
- };
@@ -1,34 +0,0 @@
1
- "use strict";
2
- const themes_momotaro_components_button_css_cjs = require("./button.css.cjs");
3
- const themes_momotaro_components_checkbox_css_cjs = require("./checkbox.css.cjs");
4
- const themes_momotaro_components_dialog_css_cjs = require("./dialog.css.cjs");
5
- const themes_momotaro_components_divider_css_cjs = require("./divider.css.cjs");
6
- const themes_momotaro_components_input_css_cjs = require("./input.css.cjs");
7
- const themes_momotaro_components_label_css_cjs = require("./label.css.cjs");
8
- const themes_momotaro_components_link_css_cjs = require("./link.css.cjs");
9
- const themes_momotaro_components_popover_css_cjs = require("./popover.css.cjs");
10
- const themes_momotaro_components_progress_css_cjs = require("./progress.css.cjs");
11
- const themes_momotaro_components_radio_css_cjs = require("./radio.css.cjs");
12
- const themes_momotaro_components_select_css_cjs = require("./select.css.cjs");
13
- const themes_momotaro_components_slider_css_cjs = require("./slider.css.cjs");
14
- const themes_momotaro_components_spinner_css_cjs = require("./spinner.css.cjs");
15
- const themes_momotaro_components_switch_css_cjs = require("./switch.css.cjs");
16
- const themes_momotaro_components_tooltip_css_cjs = require("./tooltip.css.cjs");
17
- const components = {
18
- button: themes_momotaro_components_button_css_cjs.button,
19
- checkbox: themes_momotaro_components_checkbox_css_cjs.checkbox,
20
- dialog: themes_momotaro_components_dialog_css_cjs.dialog,
21
- divider: themes_momotaro_components_divider_css_cjs.divider,
22
- input: themes_momotaro_components_input_css_cjs.input,
23
- label: themes_momotaro_components_label_css_cjs.label,
24
- link: themes_momotaro_components_link_css_cjs.link,
25
- popover: themes_momotaro_components_popover_css_cjs.popover,
26
- progress: themes_momotaro_components_progress_css_cjs.progress,
27
- radio: themes_momotaro_components_radio_css_cjs.radio,
28
- select: themes_momotaro_components_select_css_cjs.select,
29
- slider: themes_momotaro_components_slider_css_cjs.slider,
30
- spinner: themes_momotaro_components_spinner_css_cjs.spinner,
31
- switch: themes_momotaro_components_switch_css_cjs.switchTheme,
32
- tooltip: themes_momotaro_components_tooltip_css_cjs.tooltip
33
- };
34
- exports.components = components;
@@ -1,35 +0,0 @@
1
- import { button } from "./button.css.mjs";
2
- import { checkbox } from "./checkbox.css.mjs";
3
- import { dialog } from "./dialog.css.mjs";
4
- import { divider } from "./divider.css.mjs";
5
- import { input } from "./input.css.mjs";
6
- import { label } from "./label.css.mjs";
7
- import { link } from "./link.css.mjs";
8
- import { popover } from "./popover.css.mjs";
9
- import { progress } from "./progress.css.mjs";
10
- import { radio } from "./radio.css.mjs";
11
- import { select } from "./select.css.mjs";
12
- import { slider } from "./slider.css.mjs";
13
- import { spinner } from "./spinner.css.mjs";
14
- import { switchTheme } from "./switch.css.mjs";
15
- import { tooltip } from "./tooltip.css.mjs";
16
- const components = {
17
- button,
18
- checkbox,
19
- dialog,
20
- divider,
21
- input,
22
- label,
23
- link,
24
- popover,
25
- progress,
26
- radio,
27
- select,
28
- slider,
29
- spinner,
30
- switch: switchTheme,
31
- tooltip
32
- };
33
- export {
34
- components
35
- };