@negative-space/button 2.3.2 → 2.4.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.
Files changed (7) hide show
  1. package/dist/index.d.mts +42 -4
  2. package/dist/index.d.ts +42 -4
  3. package/dist/index.js +89 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +90 -6
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +4 -4
package/dist/index.d.mts CHANGED
@@ -7,22 +7,60 @@ interface ButtonProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'class
7
7
  suffix?: React.ReactNode;
8
8
  classNames?: {
9
9
  btn?: string;
10
- content?: string;
11
10
  prefix?: string;
11
+ content?: string;
12
12
  suffix?: string;
13
13
  };
14
14
  styles?: {
15
15
  btn?: React.CSSProperties;
16
- content?: React.CSSProperties;
17
16
  prefix?: React.CSSProperties;
17
+ content?: React.CSSProperties;
18
18
  suffix?: React.CSSProperties;
19
19
  };
20
+ controlled?: boolean;
20
21
  isRippleDisabled?: boolean;
21
22
  isLoading?: boolean;
22
23
  spinner?: React.ReactNode;
23
24
  spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix';
24
- spinnerProps?: SpinnerProps;
25
+ spinnerProps?: Omit<SpinnerProps, 'isLoading'>;
25
26
  }
26
27
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
27
28
 
28
- export { Button, type ButtonProps };
29
+ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
30
+ controlled?: boolean;
31
+ isRippleDisabled?: boolean;
32
+ }
33
+ declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
34
+
35
+ type ButtonComponent = {
36
+ button: Omit<ButtonProps, 'controlled'>;
37
+ } | {
38
+ iconButton: Omit<IconButtonProps, 'controlled'>;
39
+ };
40
+ interface ButtonGroupProps extends Omit<FlexProps, 'as' | 'className' | 'style'> {
41
+ classNames?: {
42
+ root?: string;
43
+ button?: {
44
+ btn?: string;
45
+ content?: string;
46
+ prefix?: string;
47
+ suffix?: string;
48
+ };
49
+ iconButton?: string;
50
+ };
51
+ styles?: {
52
+ root?: React.CSSProperties;
53
+ button?: {
54
+ btn?: React.CSSProperties;
55
+ content?: React.CSSProperties;
56
+ prefix?: React.CSSProperties;
57
+ suffix?: React.CSSProperties;
58
+ };
59
+ iconButton?: React.CSSProperties;
60
+ };
61
+ disabled?: boolean;
62
+ items: ButtonComponent[];
63
+ }
64
+ declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
65
+
66
+ export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps };
package/dist/index.d.ts CHANGED
@@ -7,22 +7,60 @@ interface ButtonProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'class
7
7
  suffix?: React.ReactNode;
8
8
  classNames?: {
9
9
  btn?: string;
10
- content?: string;
11
10
  prefix?: string;
11
+ content?: string;
12
12
  suffix?: string;
13
13
  };
14
14
  styles?: {
15
15
  btn?: React.CSSProperties;
16
- content?: React.CSSProperties;
17
16
  prefix?: React.CSSProperties;
17
+ content?: React.CSSProperties;
18
18
  suffix?: React.CSSProperties;
19
19
  };
20
+ controlled?: boolean;
20
21
  isRippleDisabled?: boolean;
21
22
  isLoading?: boolean;
22
23
  spinner?: React.ReactNode;
23
24
  spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix';
24
- spinnerProps?: SpinnerProps;
25
+ spinnerProps?: Omit<SpinnerProps, 'isLoading'>;
25
26
  }
26
27
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
27
28
 
28
- export { Button, type ButtonProps };
29
+ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
30
+ controlled?: boolean;
31
+ isRippleDisabled?: boolean;
32
+ }
33
+ declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
34
+
35
+ type ButtonComponent = {
36
+ button: Omit<ButtonProps, 'controlled'>;
37
+ } | {
38
+ iconButton: Omit<IconButtonProps, 'controlled'>;
39
+ };
40
+ interface ButtonGroupProps extends Omit<FlexProps, 'as' | 'className' | 'style'> {
41
+ classNames?: {
42
+ root?: string;
43
+ button?: {
44
+ btn?: string;
45
+ content?: string;
46
+ prefix?: string;
47
+ suffix?: string;
48
+ };
49
+ iconButton?: string;
50
+ };
51
+ styles?: {
52
+ root?: React.CSSProperties;
53
+ button?: {
54
+ btn?: React.CSSProperties;
55
+ content?: React.CSSProperties;
56
+ prefix?: React.CSSProperties;
57
+ suffix?: React.CSSProperties;
58
+ };
59
+ iconButton?: React.CSSProperties;
60
+ };
61
+ disabled?: boolean;
62
+ items: ButtonComponent[];
63
+ }
64
+ declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
65
+
66
+ export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps };
package/dist/index.js CHANGED
@@ -12,12 +12,23 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
12
12
  var React__default = /*#__PURE__*/_interopDefault(React);
13
13
 
14
14
  // src/Button.tsx
15
+ var ButtonContext = React__default.default.createContext(null);
16
+
17
+ // src/useButtonContext.ts
18
+ var useButtonContextConditional = (controlled) => {
19
+ const ctx = React.useContext(ButtonContext);
20
+ if (controlled && !ctx) {
21
+ throw new Error("Button components must be used within ButtonGroup");
22
+ }
23
+ return ctx ?? { disabled: false };
24
+ };
15
25
  var Button = React__default.default.forwardRef(
16
26
  ({
17
27
  children,
18
28
  prefix,
19
29
  suffix,
20
30
  classNames,
31
+ controlled,
21
32
  styles,
22
33
  disabled = false,
23
34
  isRippleDisabled,
@@ -31,10 +42,12 @@ var Button = React__default.default.forwardRef(
31
42
  ...props
32
43
  }, ref) => {
33
44
  const { global, components } = system.useNSUI();
45
+ const context = useButtonContextConditional(!!controlled);
46
+ const groupDisabled = context.disabled;
34
47
  const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled;
35
48
  const { createRipple } = ripple.useRipple(`${global.prefixCls}-ripple`);
36
- const isDisabled = disabled || isLoading;
37
- const resolvedSpinner = spinner$1 ?? /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { ...spinnerProps });
49
+ const isDisabled = disabled || isLoading || (controlled ? groupDisabled : false);
50
+ const resolvedSpinner = spinner$1 ?? /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { isLoading: true, ...spinnerProps });
38
51
  const handleClick = (e) => {
39
52
  if (isDisabled) return;
40
53
  const isKeyboard = e.detail === 0;
@@ -55,7 +68,7 @@ var Button = React__default.default.forwardRef(
55
68
  disabled: isDisabled,
56
69
  "data-disabled": isDisabled,
57
70
  onClick: handleClick,
58
- className: system.cn(`${global.prefixCls}-btn`, classNames?.btn),
71
+ className: system.cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn),
59
72
  style: styles?.btn,
60
73
  children: spinnerPosition === "full" && isLoading ? resolvedSpinner : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
61
74
  showPrefix && /* @__PURE__ */ jsxRuntime.jsx(
@@ -88,7 +101,80 @@ var Button = React__default.default.forwardRef(
88
101
  }
89
102
  );
90
103
  Button.displayName = "Button";
104
+ var IconButton = React__default.default.forwardRef(
105
+ ({ className, controlled, style, disabled, isRippleDisabled, onClick, ...props }, ref) => {
106
+ const { global, components } = system.useNSUI();
107
+ const rippleDisabled = isRippleDisabled ?? components.iconButton.isRippleDisabled;
108
+ const context = useButtonContextConditional(!!controlled);
109
+ const groupDisabled = context.disabled;
110
+ const isDisabled = disabled || (controlled ? groupDisabled : false);
111
+ const { createRipple } = ripple.useRipple(`${global.prefixCls}-ripple`);
112
+ const handleClick = (e) => {
113
+ if (isDisabled) return;
114
+ const isKeyboard = e.detail === 0;
115
+ if (!rippleDisabled) createRipple(e, { centered: isKeyboard });
116
+ onClick?.(e);
117
+ };
118
+ return /* @__PURE__ */ jsxRuntime.jsx(
119
+ "button",
120
+ {
121
+ ref,
122
+ disabled: isDisabled,
123
+ "data-disabled": isDisabled,
124
+ onClick: handleClick,
125
+ className: system.cn(`${global.prefixCls}-icon-btn ${global.prefixCls}-clickable`, className),
126
+ style,
127
+ ...props
128
+ }
129
+ );
130
+ }
131
+ );
132
+ IconButton.displayName = "IconButton";
133
+ var ButtonGroup = React__default.default.forwardRef(
134
+ ({ items, classNames, styles, disabled, ...props }, ref) => {
135
+ const { global } = system.useNSUI();
136
+ return /* @__PURE__ */ jsxRuntime.jsx(ButtonContext.Provider, { value: { disabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
137
+ flex.Flex,
138
+ {
139
+ ...props,
140
+ ref,
141
+ className: system.cn(`${global.prefixCls}-btn-group`, classNames?.root),
142
+ style: styles?.root,
143
+ children: items.map((item, index) => {
144
+ if ("button" in item) {
145
+ return /* @__PURE__ */ jsxRuntime.jsx(
146
+ Button,
147
+ {
148
+ controlled: true,
149
+ classNames: system.mergeCn(classNames?.button, item.button.classNames),
150
+ styles: { ...styles?.button, ...item.button.styles },
151
+ ...item.button
152
+ },
153
+ index
154
+ );
155
+ }
156
+ if ("iconButton" in item) {
157
+ return /* @__PURE__ */ jsxRuntime.jsx(
158
+ IconButton,
159
+ {
160
+ controlled: true,
161
+ className: system.cn(classNames?.iconButton, item.iconButton.className),
162
+ style: { ...styles?.iconButton, ...item.iconButton.style },
163
+ ...item.iconButton
164
+ },
165
+ index
166
+ );
167
+ }
168
+ return null;
169
+ })
170
+ }
171
+ ) });
172
+ }
173
+ );
174
+ ButtonGroup.displayName = "ButtonGroup";
91
175
 
92
176
  exports.Button = Button;
177
+ exports.ButtonGroup = ButtonGroup;
178
+ exports.IconButton = IconButton;
93
179
  //# sourceMappingURL=index.js.map
94
180
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Button.tsx"],"names":["React","spinner","useNSUI","useRipple","jsx","Spinner","Flex","cn","jsxs","Fragment"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, FlexProps } from '@negative-space/flex'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { useRipple } from '@negative-space/ripple'\n\nexport interface ButtonProps extends Omit<\n FlexProps<'button'>,\n 'as' | 'prefix' | 'className' | 'style'\n> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n classNames?: {\n btn?: string\n content?: string\n prefix?: string\n suffix?: string\n }\n styles?: {\n btn?: React.CSSProperties\n content?: React.CSSProperties\n prefix?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n isRippleDisabled?: boolean\n isLoading?: boolean\n spinner?: React.ReactNode\n spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n spinnerProps?: SpinnerProps\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n prefix,\n suffix,\n classNames,\n styles,\n disabled = false,\n isRippleDisabled,\n onClick,\n isLoading = false,\n spinner,\n spinnerPosition = 'full',\n spinnerProps,\n alignItems = 'center',\n justify = 'center',\n ...props\n },\n ref\n ) => {\n const { global, components } = useNSUI()\n const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled\n\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n const isDisabled = disabled || isLoading\n\n const resolvedSpinner = spinner ?? <Spinner {...spinnerProps} />\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n const showPrefix = prefix || (isLoading && spinnerPosition === 'prefix')\n const showContent = children || (isLoading && spinnerPosition === 'content')\n const showSuffix = suffix || (isLoading && spinnerPosition === 'suffix')\n\n return (\n <Flex\n {...props}\n ref={ref}\n as=\"button\"\n alignItems={alignItems}\n justify={justify}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-btn`, classNames?.btn)}\n style={styles?.btn}\n >\n {spinnerPosition === 'full' && isLoading ? (\n resolvedSpinner\n ) : (\n <>\n {showPrefix && (\n <span\n className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n style={styles?.prefix}\n >\n {spinnerPosition === 'prefix' && isLoading ? resolvedSpinner : prefix}\n </span>\n )}\n\n {showContent && (\n <span\n className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n style={styles?.content}\n >\n {spinnerPosition === 'content' && isLoading ? resolvedSpinner : children}\n </span>\n )}\n\n {showSuffix && (\n <span\n className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n style={styles?.suffix}\n >\n {spinnerPosition === 'suffix' && isLoading ? resolvedSpinner : suffix}\n </span>\n )}\n </>\n )}\n </Flex>\n )\n }\n)\n\nButton.displayName = 'Button'\n"]}
1
+ {"version":3,"sources":["../src/ButtonContext.ts","../src/useButtonContext.ts","../src/Button.tsx","../src/IconButton.tsx","../src/ButtonGroup.tsx"],"names":["React","useContext","spinner","useNSUI","useRipple","jsx","Spinner","Flex","cn","jsxs","Fragment","mergeCn"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react'\n\nexport type ButtonContextValue = {\n disabled?: boolean\n}\n\nexport const ButtonContext = React.createContext<ButtonContextValue | null>(null)\n","import { useContext } from 'react'\nimport { ButtonContext, type ButtonContextValue } from './ButtonContext'\n\nexport const useButtonContextConditional = (\n controlled: boolean\n): ButtonContextValue | { disabled: false } => {\n const ctx = useContext(ButtonContext)\n\n if (controlled && !ctx) {\n throw new Error('Button components must be used within ButtonGroup')\n }\n\n return ctx ?? { disabled: false }\n}\n","import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, FlexProps } from '@negative-space/flex'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { useRipple } from '@negative-space/ripple'\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface ButtonProps extends Omit<\n FlexProps<'button'>,\n 'as' | 'prefix' | 'className' | 'style'\n> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n classNames?: {\n btn?: string\n prefix?: string\n content?: string\n suffix?: string\n }\n styles?: {\n btn?: React.CSSProperties\n prefix?: React.CSSProperties\n content?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n controlled?: boolean\n isRippleDisabled?: boolean\n isLoading?: boolean\n spinner?: React.ReactNode\n spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n spinnerProps?: Omit<SpinnerProps, 'isLoading'>\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n prefix,\n suffix,\n classNames,\n controlled,\n styles,\n disabled = false,\n isRippleDisabled,\n onClick,\n isLoading = false,\n spinner,\n spinnerPosition = 'full',\n spinnerProps,\n alignItems = 'center',\n justify = 'center',\n ...props\n },\n ref\n ) => {\n const { global, components } = useNSUI()\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n\n const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const isDisabled = disabled || isLoading || (controlled ? groupDisabled : false)\n const resolvedSpinner = spinner ?? <Spinner isLoading {...spinnerProps} />\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n const showPrefix = prefix || (isLoading && spinnerPosition === 'prefix')\n const showContent = children || (isLoading && spinnerPosition === 'content')\n const showSuffix = suffix || (isLoading && spinnerPosition === 'suffix')\n\n return (\n <Flex\n {...props}\n ref={ref}\n as=\"button\"\n alignItems={alignItems}\n justify={justify}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn)}\n style={styles?.btn}\n >\n {spinnerPosition === 'full' && isLoading ? (\n resolvedSpinner\n ) : (\n <>\n {showPrefix && (\n <span\n className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n style={styles?.prefix}\n >\n {spinnerPosition === 'prefix' && isLoading ? resolvedSpinner : prefix}\n </span>\n )}\n\n {showContent && (\n <span\n className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n style={styles?.content}\n >\n {spinnerPosition === 'content' && isLoading ? resolvedSpinner : children}\n </span>\n )}\n\n {showSuffix && (\n <span\n className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n style={styles?.suffix}\n >\n {spinnerPosition === 'suffix' && isLoading ? resolvedSpinner : suffix}\n </span>\n )}\n </>\n )}\n </Flex>\n )\n }\n)\n\nButton.displayName = 'Button'\n","import React from 'react'\nimport { useRipple } from '@negative-space/ripple'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n controlled?: boolean\n isRippleDisabled?: boolean\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, controlled, style, disabled, isRippleDisabled, onClick, ...props }, ref) => {\n const { global, components } = useNSUI()\n const rippleDisabled = isRippleDisabled ?? components.iconButton.isRippleDisabled\n\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n const isDisabled = disabled || (controlled ? groupDisabled : false)\n\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-icon-btn ${global.prefixCls}-clickable`, className)}\n style={style}\n {...props}\n />\n )\n }\n)\n\nIconButton.displayName = 'IconButton'\n","import React from 'react'\nimport { cn, mergeCn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { Button, type ButtonProps } from './Button'\nimport { IconButton, type IconButtonProps } from './IconButton'\nimport { ButtonContext } from './ButtonContext'\n\nexport type ButtonComponent =\n | { button: Omit<ButtonProps, 'controlled'> }\n | { iconButton: Omit<IconButtonProps, 'controlled'> }\n\nexport interface ButtonGroupProps extends Omit<FlexProps, 'as' | 'className' | 'style'> {\n classNames?: {\n root?: string\n button?: {\n btn?: string\n content?: string\n prefix?: string\n suffix?: string\n }\n iconButton?: string\n }\n styles?: {\n root?: React.CSSProperties\n button?: {\n btn?: React.CSSProperties\n content?: React.CSSProperties\n prefix?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n iconButton?: React.CSSProperties\n }\n disabled?: boolean\n items: ButtonComponent[]\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n ({ items, classNames, styles, disabled, ...props }, ref) => {\n const { global } = useNSUI()\n\n return (\n <ButtonContext.Provider value={{ disabled }}>\n <Flex\n {...props}\n ref={ref}\n className={cn(`${global.prefixCls}-btn-group`, classNames?.root)}\n style={styles?.root}\n >\n {items.map((item, index) => {\n if ('button' in item) {\n return (\n <Button\n key={index}\n controlled\n classNames={mergeCn(classNames?.button, item.button.classNames)}\n styles={{ ...styles?.button, ...item.button.styles }}\n {...item.button}\n />\n )\n }\n\n if ('iconButton' in item) {\n return (\n <IconButton\n key={index}\n controlled\n className={cn(classNames?.iconButton, item.iconButton.className)}\n style={{ ...styles?.iconButton, ...item.iconButton.style }}\n {...item.iconButton}\n />\n )\n }\n\n return null\n })}\n </Flex>\n </ButtonContext.Provider>\n )\n }\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n"]}
package/dist/index.mjs CHANGED
@@ -1,17 +1,28 @@
1
- import React from 'react';
2
- import { useNSUI, cn } from '@negative-space/system';
1
+ import React, { useContext } from 'react';
2
+ import { useNSUI, cn, mergeCn } from '@negative-space/system';
3
3
  import { Flex } from '@negative-space/flex';
4
4
  import { Spinner } from '@negative-space/spinner';
5
5
  import { useRipple } from '@negative-space/ripple';
6
6
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
7
7
 
8
8
  // src/Button.tsx
9
+ var ButtonContext = React.createContext(null);
10
+
11
+ // src/useButtonContext.ts
12
+ var useButtonContextConditional = (controlled) => {
13
+ const ctx = useContext(ButtonContext);
14
+ if (controlled && !ctx) {
15
+ throw new Error("Button components must be used within ButtonGroup");
16
+ }
17
+ return ctx ?? { disabled: false };
18
+ };
9
19
  var Button = React.forwardRef(
10
20
  ({
11
21
  children,
12
22
  prefix,
13
23
  suffix,
14
24
  classNames,
25
+ controlled,
15
26
  styles,
16
27
  disabled = false,
17
28
  isRippleDisabled,
@@ -25,10 +36,12 @@ var Button = React.forwardRef(
25
36
  ...props
26
37
  }, ref) => {
27
38
  const { global, components } = useNSUI();
39
+ const context = useButtonContextConditional(!!controlled);
40
+ const groupDisabled = context.disabled;
28
41
  const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled;
29
42
  const { createRipple } = useRipple(`${global.prefixCls}-ripple`);
30
- const isDisabled = disabled || isLoading;
31
- const resolvedSpinner = spinner ?? /* @__PURE__ */ jsx(Spinner, { ...spinnerProps });
43
+ const isDisabled = disabled || isLoading || (controlled ? groupDisabled : false);
44
+ const resolvedSpinner = spinner ?? /* @__PURE__ */ jsx(Spinner, { isLoading: true, ...spinnerProps });
32
45
  const handleClick = (e) => {
33
46
  if (isDisabled) return;
34
47
  const isKeyboard = e.detail === 0;
@@ -49,7 +62,7 @@ var Button = React.forwardRef(
49
62
  disabled: isDisabled,
50
63
  "data-disabled": isDisabled,
51
64
  onClick: handleClick,
52
- className: cn(`${global.prefixCls}-btn`, classNames?.btn),
65
+ className: cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn),
53
66
  style: styles?.btn,
54
67
  children: spinnerPosition === "full" && isLoading ? resolvedSpinner : /* @__PURE__ */ jsxs(Fragment, { children: [
55
68
  showPrefix && /* @__PURE__ */ jsx(
@@ -82,7 +95,78 @@ var Button = React.forwardRef(
82
95
  }
83
96
  );
84
97
  Button.displayName = "Button";
98
+ var IconButton = React.forwardRef(
99
+ ({ className, controlled, style, disabled, isRippleDisabled, onClick, ...props }, ref) => {
100
+ const { global, components } = useNSUI();
101
+ const rippleDisabled = isRippleDisabled ?? components.iconButton.isRippleDisabled;
102
+ const context = useButtonContextConditional(!!controlled);
103
+ const groupDisabled = context.disabled;
104
+ const isDisabled = disabled || (controlled ? groupDisabled : false);
105
+ const { createRipple } = useRipple(`${global.prefixCls}-ripple`);
106
+ const handleClick = (e) => {
107
+ if (isDisabled) return;
108
+ const isKeyboard = e.detail === 0;
109
+ if (!rippleDisabled) createRipple(e, { centered: isKeyboard });
110
+ onClick?.(e);
111
+ };
112
+ return /* @__PURE__ */ jsx(
113
+ "button",
114
+ {
115
+ ref,
116
+ disabled: isDisabled,
117
+ "data-disabled": isDisabled,
118
+ onClick: handleClick,
119
+ className: cn(`${global.prefixCls}-icon-btn ${global.prefixCls}-clickable`, className),
120
+ style,
121
+ ...props
122
+ }
123
+ );
124
+ }
125
+ );
126
+ IconButton.displayName = "IconButton";
127
+ var ButtonGroup = React.forwardRef(
128
+ ({ items, classNames, styles, disabled, ...props }, ref) => {
129
+ const { global } = useNSUI();
130
+ return /* @__PURE__ */ jsx(ButtonContext.Provider, { value: { disabled }, children: /* @__PURE__ */ jsx(
131
+ Flex,
132
+ {
133
+ ...props,
134
+ ref,
135
+ className: cn(`${global.prefixCls}-btn-group`, classNames?.root),
136
+ style: styles?.root,
137
+ children: items.map((item, index) => {
138
+ if ("button" in item) {
139
+ return /* @__PURE__ */ jsx(
140
+ Button,
141
+ {
142
+ controlled: true,
143
+ classNames: mergeCn(classNames?.button, item.button.classNames),
144
+ styles: { ...styles?.button, ...item.button.styles },
145
+ ...item.button
146
+ },
147
+ index
148
+ );
149
+ }
150
+ if ("iconButton" in item) {
151
+ return /* @__PURE__ */ jsx(
152
+ IconButton,
153
+ {
154
+ controlled: true,
155
+ className: cn(classNames?.iconButton, item.iconButton.className),
156
+ style: { ...styles?.iconButton, ...item.iconButton.style },
157
+ ...item.iconButton
158
+ },
159
+ index
160
+ );
161
+ }
162
+ return null;
163
+ })
164
+ }
165
+ ) });
166
+ }
167
+ );
168
+ ButtonGroup.displayName = "ButtonGroup";
85
169
 
86
- export { Button };
170
+ export { Button, ButtonGroup, IconButton };
87
171
  //# sourceMappingURL=index.mjs.map
88
172
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, FlexProps } from '@negative-space/flex'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { useRipple } from '@negative-space/ripple'\n\nexport interface ButtonProps extends Omit<\n FlexProps<'button'>,\n 'as' | 'prefix' | 'className' | 'style'\n> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n classNames?: {\n btn?: string\n content?: string\n prefix?: string\n suffix?: string\n }\n styles?: {\n btn?: React.CSSProperties\n content?: React.CSSProperties\n prefix?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n isRippleDisabled?: boolean\n isLoading?: boolean\n spinner?: React.ReactNode\n spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n spinnerProps?: SpinnerProps\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n prefix,\n suffix,\n classNames,\n styles,\n disabled = false,\n isRippleDisabled,\n onClick,\n isLoading = false,\n spinner,\n spinnerPosition = 'full',\n spinnerProps,\n alignItems = 'center',\n justify = 'center',\n ...props\n },\n ref\n ) => {\n const { global, components } = useNSUI()\n const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled\n\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n const isDisabled = disabled || isLoading\n\n const resolvedSpinner = spinner ?? <Spinner {...spinnerProps} />\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n const showPrefix = prefix || (isLoading && spinnerPosition === 'prefix')\n const showContent = children || (isLoading && spinnerPosition === 'content')\n const showSuffix = suffix || (isLoading && spinnerPosition === 'suffix')\n\n return (\n <Flex\n {...props}\n ref={ref}\n as=\"button\"\n alignItems={alignItems}\n justify={justify}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-btn`, classNames?.btn)}\n style={styles?.btn}\n >\n {spinnerPosition === 'full' && isLoading ? (\n resolvedSpinner\n ) : (\n <>\n {showPrefix && (\n <span\n className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n style={styles?.prefix}\n >\n {spinnerPosition === 'prefix' && isLoading ? resolvedSpinner : prefix}\n </span>\n )}\n\n {showContent && (\n <span\n className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n style={styles?.content}\n >\n {spinnerPosition === 'content' && isLoading ? resolvedSpinner : children}\n </span>\n )}\n\n {showSuffix && (\n <span\n className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n style={styles?.suffix}\n >\n {spinnerPosition === 'suffix' && isLoading ? resolvedSpinner : suffix}\n </span>\n )}\n </>\n )}\n </Flex>\n )\n }\n)\n\nButton.displayName = 'Button'\n"]}
1
+ {"version":3,"sources":["../src/ButtonContext.ts","../src/useButtonContext.ts","../src/Button.tsx","../src/IconButton.tsx","../src/ButtonGroup.tsx"],"names":["React","useNSUI","useRipple","jsx","cn","Flex"],"mappings":"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","file":"index.mjs","sourcesContent":["import React from 'react'\n\nexport type ButtonContextValue = {\n disabled?: boolean\n}\n\nexport const ButtonContext = React.createContext<ButtonContextValue | null>(null)\n","import { useContext } from 'react'\nimport { ButtonContext, type ButtonContextValue } from './ButtonContext'\n\nexport const useButtonContextConditional = (\n controlled: boolean\n): ButtonContextValue | { disabled: false } => {\n const ctx = useContext(ButtonContext)\n\n if (controlled && !ctx) {\n throw new Error('Button components must be used within ButtonGroup')\n }\n\n return ctx ?? { disabled: false }\n}\n","import React from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { Flex, FlexProps } from '@negative-space/flex'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { useRipple } from '@negative-space/ripple'\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface ButtonProps extends Omit<\n FlexProps<'button'>,\n 'as' | 'prefix' | 'className' | 'style'\n> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n classNames?: {\n btn?: string\n prefix?: string\n content?: string\n suffix?: string\n }\n styles?: {\n btn?: React.CSSProperties\n prefix?: React.CSSProperties\n content?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n controlled?: boolean\n isRippleDisabled?: boolean\n isLoading?: boolean\n spinner?: React.ReactNode\n spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n spinnerProps?: Omit<SpinnerProps, 'isLoading'>\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n prefix,\n suffix,\n classNames,\n controlled,\n styles,\n disabled = false,\n isRippleDisabled,\n onClick,\n isLoading = false,\n spinner,\n spinnerPosition = 'full',\n spinnerProps,\n alignItems = 'center',\n justify = 'center',\n ...props\n },\n ref\n ) => {\n const { global, components } = useNSUI()\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n\n const rippleDisabled = isRippleDisabled ?? components.button.isRippleDisabled\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const isDisabled = disabled || isLoading || (controlled ? groupDisabled : false)\n const resolvedSpinner = spinner ?? <Spinner isLoading {...spinnerProps} />\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n const showPrefix = prefix || (isLoading && spinnerPosition === 'prefix')\n const showContent = children || (isLoading && spinnerPosition === 'content')\n const showSuffix = suffix || (isLoading && spinnerPosition === 'suffix')\n\n return (\n <Flex\n {...props}\n ref={ref}\n as=\"button\"\n alignItems={alignItems}\n justify={justify}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn)}\n style={styles?.btn}\n >\n {spinnerPosition === 'full' && isLoading ? (\n resolvedSpinner\n ) : (\n <>\n {showPrefix && (\n <span\n className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n style={styles?.prefix}\n >\n {spinnerPosition === 'prefix' && isLoading ? resolvedSpinner : prefix}\n </span>\n )}\n\n {showContent && (\n <span\n className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n style={styles?.content}\n >\n {spinnerPosition === 'content' && isLoading ? resolvedSpinner : children}\n </span>\n )}\n\n {showSuffix && (\n <span\n className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n style={styles?.suffix}\n >\n {spinnerPosition === 'suffix' && isLoading ? resolvedSpinner : suffix}\n </span>\n )}\n </>\n )}\n </Flex>\n )\n }\n)\n\nButton.displayName = 'Button'\n","import React from 'react'\nimport { useRipple } from '@negative-space/ripple'\nimport { cn, useNSUI } from '@negative-space/system'\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n controlled?: boolean\n isRippleDisabled?: boolean\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, controlled, style, disabled, isRippleDisabled, onClick, ...props }, ref) => {\n const { global, components } = useNSUI()\n const rippleDisabled = isRippleDisabled ?? components.iconButton.isRippleDisabled\n\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n const isDisabled = disabled || (controlled ? groupDisabled : false)\n\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-icon-btn ${global.prefixCls}-clickable`, className)}\n style={style}\n {...props}\n />\n )\n }\n)\n\nIconButton.displayName = 'IconButton'\n","import React from 'react'\nimport { cn, mergeCn, useNSUI } from '@negative-space/system'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { Button, type ButtonProps } from './Button'\nimport { IconButton, type IconButtonProps } from './IconButton'\nimport { ButtonContext } from './ButtonContext'\n\nexport type ButtonComponent =\n | { button: Omit<ButtonProps, 'controlled'> }\n | { iconButton: Omit<IconButtonProps, 'controlled'> }\n\nexport interface ButtonGroupProps extends Omit<FlexProps, 'as' | 'className' | 'style'> {\n classNames?: {\n root?: string\n button?: {\n btn?: string\n content?: string\n prefix?: string\n suffix?: string\n }\n iconButton?: string\n }\n styles?: {\n root?: React.CSSProperties\n button?: {\n btn?: React.CSSProperties\n content?: React.CSSProperties\n prefix?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n iconButton?: React.CSSProperties\n }\n disabled?: boolean\n items: ButtonComponent[]\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n ({ items, classNames, styles, disabled, ...props }, ref) => {\n const { global } = useNSUI()\n\n return (\n <ButtonContext.Provider value={{ disabled }}>\n <Flex\n {...props}\n ref={ref}\n className={cn(`${global.prefixCls}-btn-group`, classNames?.root)}\n style={styles?.root}\n >\n {items.map((item, index) => {\n if ('button' in item) {\n return (\n <Button\n key={index}\n controlled\n classNames={mergeCn(classNames?.button, item.button.classNames)}\n styles={{ ...styles?.button, ...item.button.styles }}\n {...item.button}\n />\n )\n }\n\n if ('iconButton' in item) {\n return (\n <IconButton\n key={index}\n controlled\n className={cn(classNames?.iconButton, item.iconButton.className)}\n style={{ ...styles?.iconButton, ...item.iconButton.style }}\n {...item.iconButton}\n />\n )\n }\n\n return null\n })}\n </Flex>\n </ButtonContext.Provider>\n )\n }\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@negative-space/button",
3
- "version": "2.3.2",
3
+ "version": "2.4.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -32,10 +32,10 @@
32
32
  "url": "https://github.com/negative-space-ui/nsui/issues"
33
33
  },
34
34
  "dependencies": {
35
- "@negative-space/flex": "1.1.2",
35
+ "@negative-space/flex": "1.2.1",
36
36
  "@negative-space/ripple": "1.1.2",
37
- "@negative-space/system": "1.0.2",
38
- "@negative-space/spinner": "2.1.2"
37
+ "@negative-space/system": "1.2.0",
38
+ "@negative-space/spinner": "2.1.4"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "react": "^19.2.3"