@a-type/ui 1.5.7 → 1.5.8

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 (8) hide show
  1. package/dist/cjs/components/button/Button.d.ts +1 -1
  2. package/dist/cjs/components/button/Button.js +6 -3
  3. package/dist/cjs/components/button/Button.js.map +1 -1
  4. package/dist/esm/components/button/Button.d.ts +1 -1
  5. package/dist/esm/components/button/Button.js +6 -3
  6. package/dist/esm/components/button/Button.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/button/Button.tsx +10 -6
package/dist/cjs/components/button/Button.d.ts CHANGED
@@ -3,7 +3,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
3
3
  color?: 'primary' | 'default' | 'ghost' | 'destructive' | 'ghostDestructive' | 'ghostAccent' | 'accent' | 'contrast' | 'unstyled';
4
4
  size?: 'default' | 'small' | 'icon' | 'icon-small';
5
5
  toggled?: boolean;
6
- toggleMode?: 'color' | 'indicator' | 'state-only';
6
+ toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
7
7
  align?: 'start' | 'stretch' | 'end';
8
8
  visuallyDisabled?: boolean;
9
9
  loading?: boolean;
package/dist/cjs/components/button/Button.js CHANGED
@@ -24,12 +24,13 @@ const index_js_1 = require("../icon/index.js");
24
24
  const index_js_2 = require("../spinner/index.js");
25
25
  const classes_js_1 = require("./classes.js");
26
26
  function Button(_a) {
27
- var { className, color, size, toggled, toggleMode = 'color', align, visuallyDisabled, visuallyFocused, loading, children, disabled, asChild, ref } = _a, props = __rest(_a, ["className", "color", "size", "toggled", "toggleMode", "align", "visuallyDisabled", "visuallyFocused", "loading", "children", "disabled", "asChild", "ref"]);
27
+ var { className, color, size, toggled, toggleMode = 'color-and-indicator', align, visuallyDisabled, visuallyFocused, loading, children, disabled, asChild, ref } = _a, props = __rest(_a, ["className", "color", "size", "toggled", "toggleMode", "align", "visuallyDisabled", "visuallyFocused", "loading", "children", "disabled", "asChild", "ref"]);
28
28
  const Comp = asChild ? react_slot_1.Slot : 'button';
29
29
  const buttonProps = Object.assign(Object.assign({ ref: ref }, props), { disabled: disabled || loading, 'data-disabled': visuallyDisabled, 'data-focus': visuallyFocused, 'data-size': size, tabIndex: visuallyDisabled ? -1 : undefined, className: (0, clsx_1.default)((0, classes_js_1.getButtonClassName)({
30
30
  color,
31
31
  size,
32
- toggleable: toggled !== undefined && toggleMode === 'color',
32
+ toggleable: toggled !== undefined &&
33
+ (toggleMode === 'color' || toggleMode === 'color-and-indicator'),
33
34
  align,
34
35
  }), className) });
35
36
  // set state when toggleable
@@ -40,7 +41,9 @@ function Button(_a) {
40
41
  // avoid rendering loading spinner with asChild
41
42
  return (0, jsx_runtime_1.jsx)(Comp, Object.assign({}, buttonProps, { children: children }));
42
43
  }
43
- return ((0, jsx_runtime_1.jsxs)(Comp, Object.assign({}, buttonProps, { children: [loading && (0, jsx_runtime_1.jsx)(index_js_2.Spinner, { size: 16, className: "inline-block w-1em h-1em" }), toggled !== undefined && toggleMode !== 'state-only' && ((0, jsx_runtime_1.jsx)(ToggleIndicator, { value: toggled })), children] })));
44
+ return ((0, jsx_runtime_1.jsxs)(Comp, Object.assign({}, buttonProps, { children: [loading && (0, jsx_runtime_1.jsx)(index_js_2.Spinner, { size: 16, className: "inline-block w-1em h-1em" }), toggled !== undefined &&
45
+ (toggleMode === 'indicator' ||
46
+ toggleMode === 'color-and-indicator') && ((0, jsx_runtime_1.jsx)(ToggleIndicator, { value: toggled })), children] })));
44
47
  }
45
48
  const ToggleIndicator = (0, react_1.memo)(function ToggleIndicator({ value, }) {
46
49
  return ((0, jsx_runtime_1.jsx)(index_js_1.Icon, { "aria-hidden": true, name: "check", className: "transition-width w-0 ml--1", style: {
package/dist/cjs/components/button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA6BA,wBAsDC;;AAnFD,qDAA4C;AAC5C,gDAA8B;AAC9B,iCAAwD;AACxD,+CAAwC;AACxC,kDAA8C;AAC9C,6CAAkD;AAwBlD,SAAgB,MAAM,CAAC,EAeT;QAfS,EACtB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,UAAU,GAAG,OAAO,EACpB,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,OAEU,EADV,KAAK,cAdc,4JAetB,CADQ;IAER,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,WAAW,iCAChB,GAAG,EAAE,GAAG,IACL,KAAK,KACR,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,eAAe,EAAE,gBAAgB,EACjC,YAAY,EAAE,eAAe,EAC7B,WAAW,EAAE,IAAI,EACjB,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3C,SAAS,EAAE,IAAA,cAAU,EACpB,IAAA,+BAAkB,EAAC;YAClB,KAAK;YACL,IAAI;YACJ,UAAU,EAAE,OAAO,KAAK,SAAS,IAAI,UAAU,KAAK,OAAO;YAC3D,KAAK;SACL,CAAC,EACF,SAAS,CACT,GACD,CAAC;IACF,4BAA4B;IAC5B,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC3B,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;IACzC,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACb,+CAA+C;QAC/C,OAAO,uBAAC,IAAI,oBAAK,WAAW,cAAG,QAAQ,IAAQ,CAAC;IACjD,CAAC;IAED,OAAO,CACN,wBAAC,IAAI,oBAAK,WAAW,eACnB,OAAO,IAAI,uBAAC,kBAAO,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,0BAA0B,GAAG,EACrE,OAAO,KAAK,SAAS,IAAI,UAAU,KAAK,YAAY,IAAI,CACxD,uBAAC,eAAe,IAAC,KAAK,EAAE,OAAO,GAAI,CACnC,EACA,QAAQ,KACH,CACP,CAAC;AACH,CAAC;AAED,MAAM,eAAe,GAAG,IAAA,YAAI,EAAC,SAAS,eAAe,CAAC,EACrD,KAAK,GAGL;IACA,OAAO,CACN,uBAAC,eAAI,yBAEJ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE;YACN,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACzB,GACA,CACF,CAAC;AACH,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA6BA,wBA0DC;;AAvFD,qDAA4C;AAC5C,gDAA8B;AAC9B,iCAAwD;AACxD,+CAAwC;AACxC,kDAA8C;AAC9C,6CAAkD;AAwBlD,SAAgB,MAAM,CAAC,EAeT;QAfS,EACtB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,UAAU,GAAG,qBAAqB,EAClC,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,OAEU,EADV,KAAK,cAdc,4JAetB,CADQ;IAER,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,WAAW,iCAChB,GAAG,EAAE,GAAG,IACL,KAAK,KACR,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,eAAe,EAAE,gBAAgB,EACjC,YAAY,EAAE,eAAe,EAC7B,WAAW,EAAE,IAAI,EACjB,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3C,SAAS,EAAE,IAAA,cAAU,EACpB,IAAA,+BAAkB,EAAC;YAClB,KAAK;YACL,IAAI;YACJ,UAAU,EACT,OAAO,KAAK,SAAS;gBACrB,CAAC,UAAU,KAAK,OAAO,IAAI,UAAU,KAAK,qBAAqB,CAAC;YACjE,KAAK;SACL,CAAC,EACF,SAAS,CACT,GACD,CAAC;IACF,4BAA4B;IAC5B,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC3B,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;IACzC,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACb,+CAA+C;QAC/C,OAAO,uBAAC,IAAI,oBAAK,WAAW,cAAG,QAAQ,IAAQ,CAAC;IACjD,CAAC;IAED,OAAO,CACN,wBAAC,IAAI,oBAAK,WAAW,eACnB,OAAO,IAAI,uBAAC,kBAAO,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,0BAA0B,GAAG,EACrE,OAAO,KAAK,SAAS;gBACrB,CAAC,UAAU,KAAK,WAAW;oBAC1B,UAAU,KAAK,qBAAqB,CAAC,IAAI,CACzC,uBAAC,eAAe,IAAC,KAAK,EAAE,OAAO,GAAI,CACnC,EACD,QAAQ,KACH,CACP,CAAC;AACH,CAAC;AAED,MAAM,eAAe,GAAG,IAAA,YAAI,EAAC,SAAS,eAAe,CAAC,EACrD,KAAK,GAGL;IACA,OAAO,CACN,uBAAC,eAAI,yBAEJ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE;YACN,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACzB,GACA,CACF,CAAC;AACH,CAAC,CAAC,CAAC"}
package/dist/esm/components/button/Button.d.ts CHANGED
@@ -3,7 +3,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
3
3
  color?: 'primary' | 'default' | 'ghost' | 'destructive' | 'ghostDestructive' | 'ghostAccent' | 'accent' | 'contrast' | 'unstyled';
4
4
  size?: 'default' | 'small' | 'icon' | 'icon-small';
5
5
  toggled?: boolean;
6
- toggleMode?: 'color' | 'indicator' | 'state-only';
6
+ toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
7
7
  align?: 'start' | 'stretch' | 'end';
8
8
  visuallyDisabled?: boolean;
9
9
  loading?: boolean;
package/dist/esm/components/button/Button.js CHANGED
@@ -18,12 +18,13 @@ import { Icon } from '../icon/index.js';
18
18
  import { Spinner } from '../spinner/index.js';
19
19
  import { getButtonClassName } from './classes.js';
20
20
  export function Button(_a) {
21
- var { className, color, size, toggled, toggleMode = 'color', align, visuallyDisabled, visuallyFocused, loading, children, disabled, asChild, ref } = _a, props = __rest(_a, ["className", "color", "size", "toggled", "toggleMode", "align", "visuallyDisabled", "visuallyFocused", "loading", "children", "disabled", "asChild", "ref"]);
21
+ var { className, color, size, toggled, toggleMode = 'color-and-indicator', align, visuallyDisabled, visuallyFocused, loading, children, disabled, asChild, ref } = _a, props = __rest(_a, ["className", "color", "size", "toggled", "toggleMode", "align", "visuallyDisabled", "visuallyFocused", "loading", "children", "disabled", "asChild", "ref"]);
22
22
  const Comp = asChild ? Slot : 'button';
23
23
  const buttonProps = Object.assign(Object.assign({ ref: ref }, props), { disabled: disabled || loading, 'data-disabled': visuallyDisabled, 'data-focus': visuallyFocused, 'data-size': size, tabIndex: visuallyDisabled ? -1 : undefined, className: classNames(getButtonClassName({
24
24
  color,
25
25
  size,
26
- toggleable: toggled !== undefined && toggleMode === 'color',
26
+ toggleable: toggled !== undefined &&
27
+ (toggleMode === 'color' || toggleMode === 'color-and-indicator'),
27
28
  align,
28
29
  }), className) });
29
30
  // set state when toggleable
@@ -34,7 +35,9 @@ export function Button(_a) {
34
35
  // avoid rendering loading spinner with asChild
35
36
  return _jsx(Comp, Object.assign({}, buttonProps, { children: children }));
36
37
  }
37
- return (_jsxs(Comp, Object.assign({}, buttonProps, { children: [loading && _jsx(Spinner, { size: 16, className: "inline-block w-1em h-1em" }), toggled !== undefined && toggleMode !== 'state-only' && (_jsx(ToggleIndicator, { value: toggled })), children] })));
38
+ return (_jsxs(Comp, Object.assign({}, buttonProps, { children: [loading && _jsx(Spinner, { size: 16, className: "inline-block w-1em h-1em" }), toggled !== undefined &&
39
+ (toggleMode === 'indicator' ||
40
+ toggleMode === 'color-and-indicator') && (_jsx(ToggleIndicator, { value: toggled })), children] })));
38
41
  }
39
42
  const ToggleIndicator = memo(function ToggleIndicator({ value, }) {
40
43
  return (_jsx(Icon, { "aria-hidden": true, name: "check", className: "transition-width w-0 ml--1", style: {
package/dist/esm/components/button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAwB,IAAI,EAAO,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAwBlD,MAAM,UAAU,MAAM,CAAC,EAeT;QAfS,EACtB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,UAAU,GAAG,OAAO,EACpB,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,OAEU,EADV,KAAK,cAdc,4JAetB,CADQ;IAER,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,WAAW,iCAChB,GAAG,EAAE,GAAG,IACL,KAAK,KACR,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,eAAe,EAAE,gBAAgB,EACjC,YAAY,EAAE,eAAe,EAC7B,WAAW,EAAE,IAAI,EACjB,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3C,SAAS,EAAE,UAAU,CACpB,kBAAkB,CAAC;YAClB,KAAK;YACL,IAAI;YACJ,UAAU,EAAE,OAAO,KAAK,SAAS,IAAI,UAAU,KAAK,OAAO;YAC3D,KAAK;SACL,CAAC,EACF,SAAS,CACT,GACD,CAAC;IACF,4BAA4B;IAC5B,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC3B,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;IACzC,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACb,+CAA+C;QAC/C,OAAO,KAAC,IAAI,oBAAK,WAAW,cAAG,QAAQ,IAAQ,CAAC;IACjD,CAAC;IAED,OAAO,CACN,MAAC,IAAI,oBAAK,WAAW,eACnB,OAAO,IAAI,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,0BAA0B,GAAG,EACrE,OAAO,KAAK,SAAS,IAAI,UAAU,KAAK,YAAY,IAAI,CACxD,KAAC,eAAe,IAAC,KAAK,EAAE,OAAO,GAAI,CACnC,EACA,QAAQ,KACH,CACP,CAAC;AACH,CAAC;AAED,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,eAAe,CAAC,EACrD,KAAK,GAGL;IACA,OAAO,CACN,KAAC,IAAI,yBAEJ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE;YACN,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACzB,GACA,CACF,CAAC;AACH,CAAC,CAAC,CAAC"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAwB,IAAI,EAAO,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAwBlD,MAAM,UAAU,MAAM,CAAC,EAeT;QAfS,EACtB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,UAAU,GAAG,qBAAqB,EAClC,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,OAEU,EADV,KAAK,cAdc,4JAetB,CADQ;IAER,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,MAAM,WAAW,iCAChB,GAAG,EAAE,GAAG,IACL,KAAK,KACR,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,eAAe,EAAE,gBAAgB,EACjC,YAAY,EAAE,eAAe,EAC7B,WAAW,EAAE,IAAI,EACjB,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3C,SAAS,EAAE,UAAU,CACpB,kBAAkB,CAAC;YAClB,KAAK;YACL,IAAI;YACJ,UAAU,EACT,OAAO,KAAK,SAAS;gBACrB,CAAC,UAAU,KAAK,OAAO,IAAI,UAAU,KAAK,qBAAqB,CAAC;YACjE,KAAK;SACL,CAAC,EACF,SAAS,CACT,GACD,CAAC;IACF,4BAA4B;IAC5B,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC3B,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;IACzC,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACb,+CAA+C;QAC/C,OAAO,KAAC,IAAI,oBAAK,WAAW,cAAG,QAAQ,IAAQ,CAAC;IACjD,CAAC;IAED,OAAO,CACN,MAAC,IAAI,oBAAK,WAAW,eACnB,OAAO,IAAI,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,0BAA0B,GAAG,EACrE,OAAO,KAAK,SAAS;gBACrB,CAAC,UAAU,KAAK,WAAW;oBAC1B,UAAU,KAAK,qBAAqB,CAAC,IAAI,CACzC,KAAC,eAAe,IAAC,KAAK,EAAE,OAAO,GAAI,CACnC,EACD,QAAQ,KACH,CACP,CAAC;AACH,CAAC;AAED,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,eAAe,CAAC,EACrD,KAAK,GAGL;IACA,OAAO,CACN,KAAC,IAAI,yBAEJ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE;YACN,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SACzB,GACA,CACF,CAAC;AACH,CAAC,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "1.5.7",
3
+ "version": "1.5.8",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "/dist",
package/src/components/button/Button.tsx CHANGED
@@ -18,7 +18,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
18
18
  | 'unstyled';
19
19
  size?: 'default' | 'small' | 'icon' | 'icon-small';
20
20
  toggled?: boolean;
21
- toggleMode?: 'color' | 'indicator' | 'state-only';
21
+ toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
22
22
  align?: 'start' | 'stretch' | 'end';
23
23
  visuallyDisabled?: boolean;
24
24
  loading?: boolean;
@@ -32,7 +32,7 @@ export function Button({
32
32
  color,
33
33
  size,
34
34
  toggled,
35
- toggleMode = 'color',
35
+ toggleMode = 'color-and-indicator',
36
36
  align,
37
37
  visuallyDisabled,
38
38
  visuallyFocused,
@@ -56,7 +56,9 @@ export function Button({
56
56
  getButtonClassName({
57
57
  color,
58
58
  size,
59
- toggleable: toggled !== undefined && toggleMode === 'color',
59
+ toggleable:
60
+ toggled !== undefined &&
61
+ (toggleMode === 'color' || toggleMode === 'color-and-indicator'),
60
62
  align,
61
63
  }),
62
64
  className,
@@ -75,9 +77,11 @@ export function Button({
75
77
  return (
76
78
  <Comp {...buttonProps}>
77
79
  {loading && <Spinner size={16} className="inline-block w-1em h-1em" />}
78
- {toggled !== undefined && toggleMode !== 'state-only' && (
79
- <ToggleIndicator value={toggled} />
80
- )}
80
+ {toggled !== undefined &&
81
+ (toggleMode === 'indicator' ||
82
+ toggleMode === 'color-and-indicator') && (
83
+ <ToggleIndicator value={toggled} />
84
+ )}
81
85
  {children}
82
86
  </Comp>
83
87
  );