@blockle/blocks 0.18.4 → 0.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +25 -9
- package/dist/index.mjs +25 -9
- package/dist/momotaro.chunk.d.ts +52 -314
- package/dist/styles/components/display/Divider/Divider.cjs +48 -35
- package/dist/styles/components/display/Divider/Divider.mjs +49 -36
- package/dist/styles/components/form/Button/Button.cjs +9 -9
- package/dist/styles/components/form/Button/Button.mjs +9 -9
- package/dist/styles/components/form/Checkbox/Checkbox.cjs +10 -2
- package/dist/styles/components/form/Checkbox/Checkbox.mjs +12 -4
- package/dist/styles/components/form/Input/Input.cjs +11 -2
- package/dist/styles/components/form/Input/Input.mjs +12 -3
- package/dist/styles/components/form/Radio/Radio.cjs +2 -3
- package/dist/styles/components/form/Radio/Radio.mjs +3 -4
- package/dist/styles/components/form/Select/Select.cjs +9 -3
- package/dist/styles/components/form/Select/Select.mjs +10 -4
- package/dist/styles/components/form/Slider/Slider.cjs +5 -1
- package/dist/styles/components/form/Slider/Slider.mjs +6 -2
- package/dist/styles/components/form/Switch/Switch.cjs +9 -2
- package/dist/styles/components/form/Switch/Switch.mjs +11 -4
- package/dist/styles/components/other/BlocksProvider/BlocksProvider.cjs +2 -12
- package/dist/styles/components/other/BlocksProvider/BlocksProvider.mjs +3 -13
- package/dist/styles/components/typography/Text/Text.cjs +14 -4
- package/dist/styles/components/typography/Text/Text.mjs +14 -4
- package/dist/styles/lib/css/atoms/sprinkles.css.mjs +1 -1
- package/dist/styles/themes/momotaro/components/button.css.mjs +1 -1
- package/dist/styles/themes/momotaro/components/helpers.css.mjs +1 -1
- package/dist/styles/themes/momotaro/components/progress.css.mjs +1 -1
- package/dist/styles/themes/momotaro/components/spinner.css.mjs +1 -1
- package/package.json +34 -34
package/dist/index.cjs
CHANGED
|
@@ -9,7 +9,6 @@ const styles_components_display_Divider_Divider_cjs = require("./styles/componen
|
|
|
9
9
|
const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.cjs");
|
|
10
10
|
const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
|
|
11
11
|
const jsxRuntime = require("react/jsx-runtime");
|
|
12
|
-
const react = require("react");
|
|
13
12
|
const styles_components_form_Button_Button_cjs = require("./styles/components/form/Button/Button.cjs");
|
|
14
13
|
const styles_components_form_Checkbox_Checkbox_cjs = require("./styles/components/form/Checkbox/Checkbox.cjs");
|
|
15
14
|
const styles_components_form_Input_Input_cjs = require("./styles/components/form/Input/Input.cjs");
|
|
@@ -20,9 +19,17 @@ const styles_components_form_Switch_Switch_cjs = require("./styles/components/fo
|
|
|
20
19
|
const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("./styles/components/other/BlocksProvider/BlocksProvider.cjs");
|
|
21
20
|
const reactDom = require("react-dom");
|
|
22
21
|
const styles_components_overlay_Dialog_Dialog_cjs = require("./styles/components/overlay/Dialog/Dialog.cjs");
|
|
22
|
+
const react = require("react");
|
|
23
23
|
const styles_components_typography_Heading_Heading_cjs = require("./styles/components/typography/Heading/Heading.cjs");
|
|
24
24
|
const styles_components_typography_Text_Text_cjs = require("./styles/components/typography/Text/Text.cjs");
|
|
25
|
-
const Progress =
|
|
25
|
+
const Progress = ({
|
|
26
|
+
className,
|
|
27
|
+
indeterminate,
|
|
28
|
+
max = 100,
|
|
29
|
+
ref,
|
|
30
|
+
value = 0,
|
|
31
|
+
...restProps
|
|
32
|
+
}) => {
|
|
26
33
|
const progress = value / max * 100;
|
|
27
34
|
const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
|
|
28
35
|
"progress",
|
|
@@ -59,7 +66,7 @@ const Progress = react.forwardRef(function Progress2({ className, indeterminate,
|
|
|
59
66
|
)
|
|
60
67
|
}
|
|
61
68
|
);
|
|
62
|
-
}
|
|
69
|
+
};
|
|
63
70
|
const justifyContentMap = {
|
|
64
71
|
left: "flex-start",
|
|
65
72
|
right: "flex-end",
|
|
@@ -122,7 +129,15 @@ const Stack = ({
|
|
|
122
129
|
);
|
|
123
130
|
};
|
|
124
131
|
const { Template, Slot } = styles_components_display_Divider_Divider_cjs.createAsChildTemplate("a");
|
|
125
|
-
const Link =
|
|
132
|
+
const Link = ({
|
|
133
|
+
asChild,
|
|
134
|
+
children,
|
|
135
|
+
className,
|
|
136
|
+
ref,
|
|
137
|
+
underline,
|
|
138
|
+
variant,
|
|
139
|
+
...restProps
|
|
140
|
+
}) => {
|
|
126
141
|
const linkClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("link", {
|
|
127
142
|
base: true,
|
|
128
143
|
variants: { variant, underline }
|
|
@@ -137,7 +152,7 @@ const Link = react.forwardRef(function Link2({ asChild, className, children, var
|
|
|
137
152
|
children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
|
|
138
153
|
}
|
|
139
154
|
);
|
|
140
|
-
}
|
|
155
|
+
};
|
|
141
156
|
const Portal = ({ children, container }) => {
|
|
142
157
|
const context = styles_components_display_Divider_Divider_cjs.useTheme();
|
|
143
158
|
return reactDom.createPortal(
|
|
@@ -146,17 +161,17 @@ const Portal = ({ children, container }) => {
|
|
|
146
161
|
);
|
|
147
162
|
};
|
|
148
163
|
const useLayer = () => {
|
|
149
|
-
const layerRef = react.useRef();
|
|
164
|
+
const layerRef = react.useRef(null);
|
|
150
165
|
react.useEffect(
|
|
151
166
|
() => () => {
|
|
152
167
|
if (layerRef.current) {
|
|
153
168
|
layerRef.current.remove();
|
|
154
|
-
layerRef.current =
|
|
169
|
+
layerRef.current = null;
|
|
155
170
|
}
|
|
156
171
|
},
|
|
157
172
|
[]
|
|
158
173
|
);
|
|
159
|
-
|
|
174
|
+
function getLayer() {
|
|
160
175
|
if (!layerRef.current) {
|
|
161
176
|
const div = document.createElement("div");
|
|
162
177
|
div.dataset.layer = "blocks";
|
|
@@ -164,7 +179,8 @@ const useLayer = () => {
|
|
|
164
179
|
document.body.append(layerRef.current);
|
|
165
180
|
}
|
|
166
181
|
return layerRef.current;
|
|
167
|
-
}
|
|
182
|
+
}
|
|
183
|
+
return getLayer;
|
|
168
184
|
};
|
|
169
185
|
const useVisibilityState = (open) => {
|
|
170
186
|
const [visible, setVisible] = react.useState(open);
|
package/dist/index.mjs
CHANGED
|
@@ -11,7 +11,6 @@ import { classnames } from "./styles/components/Accessibility/VisuallyHidden/Vis
|
|
|
11
11
|
import { VisuallyHidden } from "./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.mjs";
|
|
12
12
|
import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
|
|
13
13
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
14
|
-
import { forwardRef, useRef, useEffect, useState, useCallback, useLayoutEffect, useId, Children, isValidElement, cloneElement, useContext } from "react";
|
|
15
14
|
import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
|
|
16
15
|
import { Checkbox, Label } from "./styles/components/form/Checkbox/Checkbox.mjs";
|
|
17
16
|
import { Input } from "./styles/components/form/Input/Input.mjs";
|
|
@@ -23,9 +22,17 @@ import { BlocksProvider } from "./styles/components/other/BlocksProvider/BlocksP
|
|
|
23
22
|
import { createPortal } from "react-dom";
|
|
24
23
|
import { useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, useClickOutside } from "./styles/components/overlay/Dialog/Dialog.mjs";
|
|
25
24
|
import { Dialog, usePreventBodyScroll } from "./styles/components/overlay/Dialog/Dialog.mjs";
|
|
25
|
+
import { useRef, useEffect, useState, useCallback, useLayoutEffect, useId, Children, isValidElement, cloneElement, useContext } from "react";
|
|
26
26
|
import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
|
|
27
27
|
import { Text } from "./styles/components/typography/Text/Text.mjs";
|
|
28
|
-
const Progress =
|
|
28
|
+
const Progress = ({
|
|
29
|
+
className,
|
|
30
|
+
indeterminate,
|
|
31
|
+
max = 100,
|
|
32
|
+
ref,
|
|
33
|
+
value = 0,
|
|
34
|
+
...restProps
|
|
35
|
+
}) => {
|
|
29
36
|
const progress = value / max * 100;
|
|
30
37
|
const containerClassName = useComponentStyles(
|
|
31
38
|
"progress",
|
|
@@ -62,7 +69,7 @@ const Progress = forwardRef(function Progress2({ className, indeterminate, max =
|
|
|
62
69
|
)
|
|
63
70
|
}
|
|
64
71
|
);
|
|
65
|
-
}
|
|
72
|
+
};
|
|
66
73
|
const justifyContentMap = {
|
|
67
74
|
left: "flex-start",
|
|
68
75
|
right: "flex-end",
|
|
@@ -125,7 +132,15 @@ const Stack = ({
|
|
|
125
132
|
);
|
|
126
133
|
};
|
|
127
134
|
const { Template, Slot } = createAsChildTemplate("a");
|
|
128
|
-
const Link =
|
|
135
|
+
const Link = ({
|
|
136
|
+
asChild,
|
|
137
|
+
children,
|
|
138
|
+
className,
|
|
139
|
+
ref,
|
|
140
|
+
underline,
|
|
141
|
+
variant,
|
|
142
|
+
...restProps
|
|
143
|
+
}) => {
|
|
129
144
|
const linkClassName = useComponentStyles("link", {
|
|
130
145
|
base: true,
|
|
131
146
|
variants: { variant, underline }
|
|
@@ -140,7 +155,7 @@ const Link = forwardRef(function Link2({ asChild, className, children, variant,
|
|
|
140
155
|
children: /* @__PURE__ */ jsx(Slot, { children })
|
|
141
156
|
}
|
|
142
157
|
);
|
|
143
|
-
}
|
|
158
|
+
};
|
|
144
159
|
const Portal = ({ children, container }) => {
|
|
145
160
|
const context = useTheme();
|
|
146
161
|
return createPortal(
|
|
@@ -149,17 +164,17 @@ const Portal = ({ children, container }) => {
|
|
|
149
164
|
);
|
|
150
165
|
};
|
|
151
166
|
const useLayer = () => {
|
|
152
|
-
const layerRef = useRef();
|
|
167
|
+
const layerRef = useRef(null);
|
|
153
168
|
useEffect(
|
|
154
169
|
() => () => {
|
|
155
170
|
if (layerRef.current) {
|
|
156
171
|
layerRef.current.remove();
|
|
157
|
-
layerRef.current =
|
|
172
|
+
layerRef.current = null;
|
|
158
173
|
}
|
|
159
174
|
},
|
|
160
175
|
[]
|
|
161
176
|
);
|
|
162
|
-
|
|
177
|
+
function getLayer() {
|
|
163
178
|
if (!layerRef.current) {
|
|
164
179
|
const div = document.createElement("div");
|
|
165
180
|
div.dataset.layer = "blocks";
|
|
@@ -167,7 +182,8 @@ const useLayer = () => {
|
|
|
167
182
|
document.body.append(layerRef.current);
|
|
168
183
|
}
|
|
169
184
|
return layerRef.current;
|
|
170
|
-
}
|
|
185
|
+
}
|
|
186
|
+
return getLayer;
|
|
171
187
|
};
|
|
172
188
|
const useVisibilityState = (open) => {
|
|
173
189
|
const [visible, setVisible] = useState(open);
|