@yamada-ui/button 0.1.10 → 0.2.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 (12) hide show
  1. package/dist/button-group.d.ts +13 -0
  2. package/dist/button.d.ts +41 -4
  3. package/dist/button.mjs +1 -1
  4. package/dist/{chunk-3D73QVPP.mjs → chunk-2U57OXHK.mjs} +0 -12
  5. package/dist/chunk-UNYNUYOU.mjs +16 -0
  6. package/dist/icon-button.d.ts +9 -1
  7. package/dist/icon-button.js +90 -88
  8. package/dist/icon-button.mjs +2 -1
  9. package/dist/index.d.ts +2 -2
  10. package/dist/index.js +92 -94
  11. package/dist/index.mjs +7 -9
  12. package/package.json +3 -3
package/dist/button-group.d.ts CHANGED
@@ -2,8 +2,21 @@ import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
3
3
 
4
4
  type ButtonGroupOptions = {
5
+ /**
6
+ * The CSS `flex-direction` property.
7
+ */
5
8
  direction?: CSSUIProps['flexDirection'];
9
+ /**
10
+ * If `true`, the borderRadius of button that are direct children will be altered to look flushed together.
11
+ *
12
+ * @default false
13
+ */
6
14
  isAttached?: boolean;
15
+ /**
16
+ * If `true`, all wrapped button will be disabled.
17
+ *
18
+ * @default false
19
+ */
7
20
  isDisabled?: boolean;
8
21
  };
9
22
  type ButtonGroupProps = HTMLUIProps<'div'> & ThemeProps<'Button'> & ButtonGroupOptions;
package/dist/button.d.ts CHANGED
@@ -1,17 +1,54 @@
1
1
  import * as _yamada_ui_core from '@yamada-ui/core';
2
2
  import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
3
3
  import { LoadingProps } from '@yamada-ui/loading';
4
- import { ElementType } from 'react';
4
+ import { ElementType, ReactElement } from 'react';
5
5
 
6
6
  type ButtonOptions = {
7
+ /**
8
+ * The type of button. Accepts `button`, `reset`, or `submit`.
9
+ *
10
+ * @default 'button'
11
+ */
7
12
  type?: 'button' | 'reset' | 'submit';
13
+ /**
14
+ * If `true`, the loading state of the button is represented.
15
+ *
16
+ * @default false
17
+ */
8
18
  isLoading?: boolean;
19
+ /**
20
+ * If `true`, the button is represented as active.
21
+ *
22
+ * @default false
23
+ */
9
24
  isActive?: boolean;
25
+ /**
26
+ * If `true`, the button is disabled.
27
+ *
28
+ * @default false
29
+ */
10
30
  isDisabled?: boolean;
11
- leftIcon?: React.ReactElement;
12
- rightIcon?: React.ReactElement;
13
- loadingIcon?: React.ReactElement | LoadingProps['variant'];
31
+ /**
32
+ * The icon to display at the left side of the button.
33
+ */
34
+ leftIcon?: ReactElement;
35
+ /**
36
+ * The icon to display at the right side of the button.
37
+ */
38
+ rightIcon?: ReactElement;
39
+ /**
40
+ * The icon to display when the button is loading.
41
+ */
42
+ loadingIcon?: ReactElement | LoadingProps['variant'];
43
+ /**
44
+ * The text to display when the button is loading.
45
+ */
14
46
  loadingText?: string;
47
+ /**
48
+ * The placement of the loading indicator. Accepts `start` or `end`.
49
+ *
50
+ * @default 'start'
51
+ */
15
52
  loadingPlacement?: 'start' | 'end';
16
53
  };
17
54
  type ButtonProps = HTMLUIProps<'button'> & ThemeProps<'Button'> & ButtonOptions;
package/dist/button.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Button,
3
3
  useButtonType
4
- } from "./chunk-3D73QVPP.mjs";
4
+ } from "./chunk-2U57OXHK.mjs";
5
5
  import "./chunk-ZJ6VNE3P.mjs";
6
6
  export {
7
7
  Button,
package/dist/{chunk-3D73QVPP.mjs → chunk-2U57OXHK.mjs} RENAMED
@@ -2,9 +2,6 @@ import {
2
2
  useButtonGroup
3
3
  } from "./chunk-ZJ6VNE3P.mjs";
4
4
 
5
- // src/icon-button.tsx
6
- import { forwardRef as forwardRef2 } from "@yamada-ui/core";
7
-
8
5
  // src/button.tsx
9
6
  import {
10
7
  ui,
@@ -143,16 +140,7 @@ var useButtonType = (value) => {
143
140
  return { ref, type };
144
141
  };
145
142
 
146
- // src/icon-button.tsx
147
- import { jsx as jsx2 } from "react/jsx-runtime";
148
- var IconButton = forwardRef2(
149
- ({ icon, isRound, children, ...rest }, ref) => {
150
- return /* @__PURE__ */ jsx2(Button, { ref, p: 0, ...isRound ? { rounded: "full" } : {}, ...rest, children: icon || children });
151
- }
152
- );
153
-
154
143
  export {
155
- IconButton,
156
144
  Button,
157
145
  useButtonType
158
146
  };
package/dist/chunk-UNYNUYOU.mjs ADDED
@@ -0,0 +1,16 @@
1
+ import {
2
+ Button
3
+ } from "./chunk-2U57OXHK.mjs";
4
+
5
+ // src/icon-button.tsx
6
+ import { forwardRef } from "@yamada-ui/core";
7
+ import { jsx } from "react/jsx-runtime";
8
+ var IconButton = forwardRef(
9
+ ({ icon, isRounded, children, ...rest }, ref) => {
10
+ return /* @__PURE__ */ jsx(Button, { ref, p: 0, ...isRounded ? { rounded: "full" } : {}, ...rest, children: icon || children });
11
+ }
12
+ );
13
+
14
+ export {
15
+ IconButton
16
+ };
package/dist/icon-button.d.ts CHANGED
@@ -4,8 +4,16 @@ import { ButtonProps } from './button.js';
4
4
  import '@yamada-ui/loading';
5
5
 
6
6
  type IconButtonOptions = {
7
+ /**
8
+ * The icon to be used in the button.
9
+ */
7
10
  icon?: ReactElement;
8
- isRound?: boolean;
11
+ /**
12
+ * If `true`, the button will be perfectly round. Else, it'll be slightly round.
13
+ *
14
+ * @default false
15
+ */
16
+ isRounded?: boolean;
9
17
  };
10
18
  type IconButtonProps = Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'loadingIcon' | 'loadingText' | 'loadingPlacement'> & IconButtonOptions;
11
19
  declare const IconButton: _yamada_ui_core.Component<"button", IconButtonProps>;
package/dist/icon-button.js CHANGED
@@ -26,14 +26,74 @@ module.exports = __toCommonJS(icon_button_exports);
26
26
  var import_core3 = require("@yamada-ui/core");
27
27
 
28
28
  // src/button.tsx
29
- var import_core = require("@yamada-ui/core");
29
+ var import_core2 = require("@yamada-ui/core");
30
30
  var import_loading = require("@yamada-ui/loading");
31
+ var import_utils2 = require("@yamada-ui/utils");
32
+ var import_react2 = require("react");
33
+
34
+ // src/button-group.tsx
35
+ var import_core = require("@yamada-ui/core");
31
36
  var import_utils = require("@yamada-ui/utils");
32
37
  var import_react = require("react");
33
38
  var import_jsx_runtime = require("react/jsx-runtime");
34
- var Button = (0, import_core.forwardRef)(({ children, ...props }, customRef) => {
39
+ var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)({
40
+ strict: false,
41
+ name: "ButtonGroupContext"
42
+ });
43
+ var ButtonGroup = (0, import_core.forwardRef)(
44
+ ({
45
+ className,
46
+ size,
47
+ variant,
48
+ direction: flexDirection,
49
+ isAttached,
50
+ isDisabled,
51
+ gap,
52
+ columnGap,
53
+ rowGap,
54
+ ...rest
55
+ }, ref) => {
56
+ const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
57
+ const css = {
58
+ display: "inline-flex",
59
+ flexDirection
60
+ };
61
+ const context = (0, import_react.useMemo)(
62
+ () => ({ size, variant, isDisabled }),
63
+ [size, variant, isDisabled]
64
+ );
65
+ if (isAttached) {
66
+ Object.assign(css, {
67
+ "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
68
+ "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
69
+ "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
70
+ });
71
+ } else {
72
+ Object.assign(css, {
73
+ gap,
74
+ columnGap,
75
+ rowGap
76
+ });
77
+ }
78
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
+ import_core.ui.div,
80
+ {
81
+ ref,
82
+ role: "group",
83
+ className: (0, import_utils.cx)("ui-button-group", className),
84
+ "data-attached": (0, import_utils.dataAttr)(isAttached),
85
+ __css: css,
86
+ ...rest
87
+ }
88
+ ) });
89
+ }
90
+ );
91
+
92
+ // src/button.tsx
93
+ var import_jsx_runtime2 = require("react/jsx-runtime");
94
+ var Button = (0, import_core2.forwardRef)(({ children, ...props }, customRef) => {
35
95
  const group = useButtonGroup();
36
- const [styles, mergedProps] = (0, import_core.useComponentStyle)("Button", { ...group, ...props });
96
+ const [styles, mergedProps] = (0, import_core2.useComponentStyle)("Button", { ...group, ...props });
37
97
  const {
38
98
  className,
39
99
  as,
@@ -48,12 +108,12 @@ var Button = (0, import_core.forwardRef)(({ children, ...props }, customRef) =>
48
108
  loadingPlacement = "start",
49
109
  __css,
50
110
  ...rest
51
- } = (0, import_core.omitThemeProps)(mergedProps);
111
+ } = (0, import_core2.omitThemeProps)(mergedProps);
52
112
  const { ref: buttonRef, type: defaultType } = useButtonType(as);
53
- const ref = (0, import_utils.useMergeRefs)(customRef, buttonRef);
54
- const css = (0, import_react.useMemo)(() => {
113
+ const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
114
+ const css = (0, import_react2.useMemo)(() => {
55
115
  var _a;
56
- const _focus = "_focus" in styles ? (0, import_utils.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
116
+ const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
57
117
  return {
58
118
  display: "inline-flex",
59
119
  alignItems: "center",
@@ -79,22 +139,22 @@ var Button = (0, import_core.forwardRef)(({ children, ...props }, customRef) =>
79
139
  loadingIcon,
80
140
  loadingText
81
141
  };
82
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
83
- import_core.ui.button,
142
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
143
+ import_core2.ui.button,
84
144
  {
85
145
  ref,
86
146
  as,
87
- className: (0, import_utils.cx)("ui-button", className),
147
+ className: (0, import_utils2.cx)("ui-button", className),
88
148
  type: type != null ? type : defaultType,
89
149
  disabled: isDisabled || isLoading,
90
- "data-active": (0, import_utils.dataAttr)(isActive),
91
- "data-loading": (0, import_utils.dataAttr)(isLoading),
150
+ "data-active": (0, import_utils2.dataAttr)(isActive),
151
+ "data-loading": (0, import_utils2.dataAttr)(isLoading),
92
152
  __css: css,
93
153
  ...rest,
94
154
  children: [
95
- isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
96
- isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...contentProps }),
97
- isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
155
+ isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
156
+ isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
157
+ isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
98
158
  ]
99
159
  }
100
160
  );
@@ -104,7 +164,7 @@ var Loading = ({
104
164
  loadingIcon,
105
165
  loadingText
106
166
  }) => {
107
- const css = (0, import_react.useMemo)(
167
+ const css = (0, import_react2.useMemo)(
108
168
  () => ({
109
169
  display: "flex",
110
170
  alignItems: "center",
@@ -114,31 +174,31 @@ var Loading = ({
114
174
  }),
115
175
  [loadingText]
116
176
  );
117
- const element = (0, import_react.useMemo)(() => {
177
+ const element = (0, import_react2.useMemo)(() => {
118
178
  if (typeof loadingIcon === "string") {
119
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
179
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
120
180
  } else {
121
- return loadingIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { color: "current" });
181
+ return loadingIcon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current" });
122
182
  }
123
183
  }, [loadingIcon]);
124
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-button-loading", className), __css: css, children: element });
184
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: (0, import_utils2.cx)("ui-button-loading", className), __css: css, children: element });
125
185
  };
126
186
  var Content = ({
127
187
  leftIcon,
128
188
  rightIcon,
129
189
  children
130
190
  }) => {
131
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
132
- leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: leftIcon }) : null,
191
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
192
+ leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { children: leftIcon }) : null,
133
193
  children,
134
- rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: rightIcon }) : null
194
+ rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { children: rightIcon }) : null
135
195
  ] });
136
196
  };
137
197
  var Icon = ({ children, className, ...rest }) => {
138
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
139
- import_core.ui.span,
198
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
199
+ import_core2.ui.span,
140
200
  {
141
- className: (0, import_utils.cx)("ui-button-icon", className),
201
+ className: (0, import_utils2.cx)("ui-button-icon", className),
142
202
  display: "inline-flex",
143
203
  alignSelf: "center",
144
204
  flexShrink: 0,
@@ -149,8 +209,8 @@ var Icon = ({ children, className, ...rest }) => {
149
209
  );
150
210
  };
151
211
  var useButtonType = (value) => {
152
- const [isButton, setIsButton] = (0, import_react.useState)(!value);
153
- const ref = (0, import_react.useCallback)((node) => {
212
+ const [isButton, setIsButton] = (0, import_react2.useState)(!value);
213
+ const ref = (0, import_react2.useCallback)((node) => {
154
214
  if (node)
155
215
  setIsButton(node.tagName === "BUTTON");
156
216
  }, []);
@@ -158,69 +218,11 @@ var useButtonType = (value) => {
158
218
  return { ref, type };
159
219
  };
160
220
 
161
- // src/button-group.tsx
162
- var import_core2 = require("@yamada-ui/core");
163
- var import_utils2 = require("@yamada-ui/utils");
164
- var import_react2 = require("react");
165
- var import_jsx_runtime2 = require("react/jsx-runtime");
166
- var [ButtonGroupProvider, useButtonGroup] = (0, import_utils2.createContext)({
167
- strict: false,
168
- name: "ButtonGroupContext"
169
- });
170
- var ButtonGroup = (0, import_core2.forwardRef)(
171
- ({
172
- className,
173
- size,
174
- variant,
175
- direction: flexDirection,
176
- isAttached,
177
- isDisabled,
178
- gap,
179
- columnGap,
180
- rowGap,
181
- ...rest
182
- }, ref) => {
183
- const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
184
- const css = {
185
- display: "inline-flex",
186
- flexDirection
187
- };
188
- const context = (0, import_react2.useMemo)(
189
- () => ({ size, variant, isDisabled }),
190
- [size, variant, isDisabled]
191
- );
192
- if (isAttached) {
193
- Object.assign(css, {
194
- "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
195
- "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
196
- "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
197
- });
198
- } else {
199
- Object.assign(css, {
200
- gap,
201
- columnGap,
202
- rowGap
203
- });
204
- }
205
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
206
- import_core2.ui.div,
207
- {
208
- ref,
209
- role: "group",
210
- className: (0, import_utils2.cx)("ui-button-group", className),
211
- "data-attached": (0, import_utils2.dataAttr)(isAttached),
212
- __css: css,
213
- ...rest
214
- }
215
- ) });
216
- }
217
- );
218
-
219
221
  // src/icon-button.tsx
220
222
  var import_jsx_runtime3 = require("react/jsx-runtime");
221
223
  var IconButton = (0, import_core3.forwardRef)(
222
- ({ icon, isRound, children, ...rest }, ref) => {
223
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ref, p: 0, ...isRound ? { rounded: "full" } : {}, ...rest, children: icon || children });
224
+ ({ icon, isRounded, children, ...rest }, ref) => {
225
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ref, p: 0, ...isRounded ? { rounded: "full" } : {}, ...rest, children: icon || children });
224
226
  }
225
227
  );
226
228
  // Annotate the CommonJS export names for ESM import in node:
package/dist/icon-button.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
2
  IconButton
3
- } from "./chunk-3D73QVPP.mjs";
3
+ } from "./chunk-UNYNUYOU.mjs";
4
+ import "./chunk-2U57OXHK.mjs";
4
5
  import "./chunk-ZJ6VNE3P.mjs";
5
6
  export {
6
7
  IconButton
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export { Button, ButtonProps, useButtonType } from './button.js';
2
- export { ButtonGroup, ButtonGroupProps, useButtonGroup } from './button-group.js';
1
+ export { Button, ButtonProps } from './button.js';
2
+ export { ButtonGroup, ButtonGroupProps } from './button-group.js';
3
3
  export { IconButton, IconButtonProps } from './icon-button.js';
4
4
  import '@yamada-ui/core';
5
5
  import '@yamada-ui/loading';
package/dist/index.js CHANGED
@@ -22,21 +22,79 @@ var src_exports = {};
22
22
  __export(src_exports, {
23
23
  Button: () => Button,
24
24
  ButtonGroup: () => ButtonGroup,
25
- IconButton: () => IconButton,
26
- useButtonGroup: () => useButtonGroup,
27
- useButtonType: () => useButtonType
25
+ IconButton: () => IconButton
28
26
  });
29
27
  module.exports = __toCommonJS(src_exports);
30
28
 
31
29
  // src/button.tsx
32
- var import_core = require("@yamada-ui/core");
30
+ var import_core2 = require("@yamada-ui/core");
33
31
  var import_loading = require("@yamada-ui/loading");
32
+ var import_utils2 = require("@yamada-ui/utils");
33
+ var import_react2 = require("react");
34
+
35
+ // src/button-group.tsx
36
+ var import_core = require("@yamada-ui/core");
34
37
  var import_utils = require("@yamada-ui/utils");
35
38
  var import_react = require("react");
36
39
  var import_jsx_runtime = require("react/jsx-runtime");
37
- var Button = (0, import_core.forwardRef)(({ children, ...props }, customRef) => {
40
+ var [ButtonGroupProvider, useButtonGroup] = (0, import_utils.createContext)({
41
+ strict: false,
42
+ name: "ButtonGroupContext"
43
+ });
44
+ var ButtonGroup = (0, import_core.forwardRef)(
45
+ ({
46
+ className,
47
+ size,
48
+ variant,
49
+ direction: flexDirection,
50
+ isAttached,
51
+ isDisabled,
52
+ gap,
53
+ columnGap,
54
+ rowGap,
55
+ ...rest
56
+ }, ref) => {
57
+ const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
58
+ const css = {
59
+ display: "inline-flex",
60
+ flexDirection
61
+ };
62
+ const context = (0, import_react.useMemo)(
63
+ () => ({ size, variant, isDisabled }),
64
+ [size, variant, isDisabled]
65
+ );
66
+ if (isAttached) {
67
+ Object.assign(css, {
68
+ "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
69
+ "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
70
+ "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
71
+ });
72
+ } else {
73
+ Object.assign(css, {
74
+ gap,
75
+ columnGap,
76
+ rowGap
77
+ });
78
+ }
79
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
80
+ import_core.ui.div,
81
+ {
82
+ ref,
83
+ role: "group",
84
+ className: (0, import_utils.cx)("ui-button-group", className),
85
+ "data-attached": (0, import_utils.dataAttr)(isAttached),
86
+ __css: css,
87
+ ...rest
88
+ }
89
+ ) });
90
+ }
91
+ );
92
+
93
+ // src/button.tsx
94
+ var import_jsx_runtime2 = require("react/jsx-runtime");
95
+ var Button = (0, import_core2.forwardRef)(({ children, ...props }, customRef) => {
38
96
  const group = useButtonGroup();
39
- const [styles, mergedProps] = (0, import_core.useComponentStyle)("Button", { ...group, ...props });
97
+ const [styles, mergedProps] = (0, import_core2.useComponentStyle)("Button", { ...group, ...props });
40
98
  const {
41
99
  className,
42
100
  as,
@@ -51,12 +109,12 @@ var Button = (0, import_core.forwardRef)(({ children, ...props }, customRef) =>
51
109
  loadingPlacement = "start",
52
110
  __css,
53
111
  ...rest
54
- } = (0, import_core.omitThemeProps)(mergedProps);
112
+ } = (0, import_core2.omitThemeProps)(mergedProps);
55
113
  const { ref: buttonRef, type: defaultType } = useButtonType(as);
56
- const ref = (0, import_utils.useMergeRefs)(customRef, buttonRef);
57
- const css = (0, import_react.useMemo)(() => {
114
+ const ref = (0, import_utils2.useMergeRefs)(customRef, buttonRef);
115
+ const css = (0, import_react2.useMemo)(() => {
58
116
  var _a;
59
- const _focus = "_focus" in styles ? (0, import_utils.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
117
+ const _focus = "_focus" in styles ? (0, import_utils2.merge)((_a = styles._focus) != null ? _a : {}, { zIndex: 1 }) : {};
60
118
  return {
61
119
  display: "inline-flex",
62
120
  alignItems: "center",
@@ -82,22 +140,22 @@ var Button = (0, import_core.forwardRef)(({ children, ...props }, customRef) =>
82
140
  loadingIcon,
83
141
  loadingText
84
142
  };
85
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
86
- import_core.ui.button,
143
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
144
+ import_core2.ui.button,
87
145
  {
88
146
  ref,
89
147
  as,
90
- className: (0, import_utils.cx)("ui-button", className),
148
+ className: (0, import_utils2.cx)("ui-button", className),
91
149
  type: type != null ? type : defaultType,
92
150
  disabled: isDisabled || isLoading,
93
- "data-active": (0, import_utils.dataAttr)(isActive),
94
- "data-loading": (0, import_utils.dataAttr)(isLoading),
151
+ "data-active": (0, import_utils2.dataAttr)(isActive),
152
+ "data-loading": (0, import_utils2.dataAttr)(isLoading),
95
153
  __css: css,
96
154
  ...rest,
97
155
  children: [
98
- isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
99
- isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, { ...contentProps }),
100
- isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
156
+ isLoading && loadingPlacement === "start" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--start", ...loadingProps }) : null,
157
+ isLoading ? loadingText || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { opacity: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, { ...contentProps }),
158
+ isLoading && loadingPlacement === "end" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loading, { className: "ui-button-loading--end", ...loadingProps }) : null
101
159
  ]
102
160
  }
103
161
  );
@@ -107,7 +165,7 @@ var Loading = ({
107
165
  loadingIcon,
108
166
  loadingText
109
167
  }) => {
110
- const css = (0, import_react.useMemo)(
168
+ const css = (0, import_react2.useMemo)(
111
169
  () => ({
112
170
  display: "flex",
113
171
  alignItems: "center",
@@ -117,31 +175,31 @@ var Loading = ({
117
175
  }),
118
176
  [loadingText]
119
177
  );
120
- const element = (0, import_react.useMemo)(() => {
178
+ const element = (0, import_react2.useMemo)(() => {
121
179
  if (typeof loadingIcon === "string") {
122
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
180
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current", variant: loadingIcon });
123
181
  } else {
124
- return loadingIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { color: "current" });
182
+ return loadingIcon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_loading.Loading, { color: "current" });
125
183
  }
126
184
  }, [loadingIcon]);
127
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: (0, import_utils.cx)("ui-button-loading", className), __css: css, children: element });
185
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: (0, import_utils2.cx)("ui-button-loading", className), __css: css, children: element });
128
186
  };
129
187
  var Content = ({
130
188
  leftIcon,
131
189
  rightIcon,
132
190
  children
133
191
  }) => {
134
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
135
- leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: leftIcon }) : null,
192
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
193
+ leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { children: leftIcon }) : null,
136
194
  children,
137
- rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { children: rightIcon }) : null
195
+ rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { children: rightIcon }) : null
138
196
  ] });
139
197
  };
140
198
  var Icon = ({ children, className, ...rest }) => {
141
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
142
- import_core.ui.span,
199
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
200
+ import_core2.ui.span,
143
201
  {
144
- className: (0, import_utils.cx)("ui-button-icon", className),
202
+ className: (0, import_utils2.cx)("ui-button-icon", className),
145
203
  display: "inline-flex",
146
204
  alignSelf: "center",
147
205
  flexShrink: 0,
@@ -152,8 +210,8 @@ var Icon = ({ children, className, ...rest }) => {
152
210
  );
153
211
  };
154
212
  var useButtonType = (value) => {
155
- const [isButton, setIsButton] = (0, import_react.useState)(!value);
156
- const ref = (0, import_react.useCallback)((node) => {
213
+ const [isButton, setIsButton] = (0, import_react2.useState)(!value);
214
+ const ref = (0, import_react2.useCallback)((node) => {
157
215
  if (node)
158
216
  setIsButton(node.tagName === "BUTTON");
159
217
  }, []);
@@ -161,77 +219,17 @@ var useButtonType = (value) => {
161
219
  return { ref, type };
162
220
  };
163
221
 
164
- // src/button-group.tsx
165
- var import_core2 = require("@yamada-ui/core");
166
- var import_utils2 = require("@yamada-ui/utils");
167
- var import_react2 = require("react");
168
- var import_jsx_runtime2 = require("react/jsx-runtime");
169
- var [ButtonGroupProvider, useButtonGroup] = (0, import_utils2.createContext)({
170
- strict: false,
171
- name: "ButtonGroupContext"
172
- });
173
- var ButtonGroup = (0, import_core2.forwardRef)(
174
- ({
175
- className,
176
- size,
177
- variant,
178
- direction: flexDirection,
179
- isAttached,
180
- isDisabled,
181
- gap,
182
- columnGap,
183
- rowGap,
184
- ...rest
185
- }, ref) => {
186
- const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
187
- const css = {
188
- display: "inline-flex",
189
- flexDirection
190
- };
191
- const context = (0, import_react2.useMemo)(
192
- () => ({ size, variant, isDisabled }),
193
- [size, variant, isDisabled]
194
- );
195
- if (isAttached) {
196
- Object.assign(css, {
197
- "> *:first-of-type:not(:last-of-type)": isColumn ? { borderBottomRadius: 0, marginBlockEnd: "-1px" } : { borderRightRadius: 0, marginInlineEnd: "-1px" },
198
- "> *:not(:first-of-type):not(:last-of-type)": isColumn ? { borderRadius: 0, marginBlockStart: "-1px" } : { borderRadius: 0, marginInlineEnd: "-1px" },
199
- "> *:not(:first-of-type):last-of-type": isColumn ? { borderTopRadius: 0, marginBlockStart: "-1px" } : { borderLeftRadius: 0 }
200
- });
201
- } else {
202
- Object.assign(css, {
203
- gap,
204
- columnGap,
205
- rowGap
206
- });
207
- }
208
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonGroupProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
209
- import_core2.ui.div,
210
- {
211
- ref,
212
- role: "group",
213
- className: (0, import_utils2.cx)("ui-button-group", className),
214
- "data-attached": (0, import_utils2.dataAttr)(isAttached),
215
- __css: css,
216
- ...rest
217
- }
218
- ) });
219
- }
220
- );
221
-
222
222
  // src/icon-button.tsx
223
223
  var import_core3 = require("@yamada-ui/core");
224
224
  var import_jsx_runtime3 = require("react/jsx-runtime");
225
225
  var IconButton = (0, import_core3.forwardRef)(
226
- ({ icon, isRound, children, ...rest }, ref) => {
227
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ref, p: 0, ...isRound ? { rounded: "full" } : {}, ...rest, children: icon || children });
226
+ ({ icon, isRounded, children, ...rest }, ref) => {
227
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ref, p: 0, ...isRounded ? { rounded: "full" } : {}, ...rest, children: icon || children });
228
228
  }
229
229
  );
230
230
  // Annotate the CommonJS export names for ESM import in node:
231
231
  0 && (module.exports = {
232
232
  Button,
233
233
  ButtonGroup,
234
- IconButton,
235
- useButtonGroup,
236
- useButtonType
234
+ IconButton
237
235
  });
package/dist/index.mjs CHANGED
@@ -1,16 +1,14 @@
1
1
  import {
2
- Button,
3
- IconButton,
4
- useButtonType
5
- } from "./chunk-3D73QVPP.mjs";
2
+ IconButton
3
+ } from "./chunk-UNYNUYOU.mjs";
6
4
  import {
7
- ButtonGroup,
8
- useButtonGroup
5
+ Button
6
+ } from "./chunk-2U57OXHK.mjs";
7
+ import {
8
+ ButtonGroup
9
9
  } from "./chunk-ZJ6VNE3P.mjs";
10
10
  export {
11
11
  Button,
12
12
  ButtonGroup,
13
- IconButton,
14
- useButtonGroup,
15
- useButtonType
13
+ IconButton
16
14
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/button",
3
- "version": "0.1.10",
3
+ "version": "0.2.0",
4
4
  "description": "Yamada UI button components",
5
5
  "keywords": [
6
6
  "yamada",
@@ -37,9 +37,9 @@
37
37
  "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
38
38
  },
39
39
  "dependencies": {
40
- "@yamada-ui/core": "0.2.3",
40
+ "@yamada-ui/core": "0.3.1",
41
41
  "@yamada-ui/utils": "0.1.1",
42
- "@yamada-ui/loading": "0.2.7"
42
+ "@yamada-ui/loading": "0.3.0"
43
43
  },
44
44
  "devDependencies": {
45
45
  "react": "^18.0.0",