@spark-web/button 2.0.0-rc.9 → 5.0.0-rc.24

package/dist/declarations/src/utils.d.ts

@@ -1,6 +1,6 @@
 import type { BoxProps } from '@spark-web/box';
 import type { ForegroundTone } from '@spark-web/text';
-import type { BrighteTheme } from '@spark-web/theme';
+import type { SparkTheme } from '@spark-web/theme';
 import type { ButtonProminence, ButtonTone } from "./types.js";
 declare type BaseButtonStyles = {
     background: BoxProps['background'];
@@ -9,19 +9,19 @@ declare type BaseButtonStyles = {
     textTone?: ForegroundTone;
 };
 declare type HoverButtonStyles = {
-    backgroundHover: keyof BrighteTheme['backgroundInteractions'];
-    borderHover?: keyof BrighteTheme['border']['color'];
-    textToneHover?: keyof BrighteTheme['color']['foreground'];
+    backgroundHover: keyof SparkTheme['backgroundInteractions'];
+    borderHover?: keyof SparkTheme['border']['color'];
+    textToneHover?: keyof SparkTheme['color']['foreground'];
 };
 declare type ActiveButtonStyles = {
-    backgroundActive: keyof BrighteTheme['backgroundInteractions'];
-    borderActive?: keyof BrighteTheme['border']['color'];
-    textToneActive?: keyof BrighteTheme['color']['foreground'];
+    backgroundActive: keyof SparkTheme['backgroundInteractions'];
+    borderActive?: keyof SparkTheme['border']['color'];
+    textToneActive?: keyof SparkTheme['color']['foreground'];
 };
 declare type DisabledButtonStyles = {
-    backgroundDisabled: keyof BrighteTheme['color']['background'];
-    borderDisabled?: keyof BrighteTheme['border']['color'];
-    textToneDisabled: keyof BrighteTheme['color']['foreground'];
+    backgroundDisabled: keyof SparkTheme['color']['background'];
+    borderDisabled?: keyof SparkTheme['border']['color'];
+    textToneDisabled: keyof SparkTheme['color']['foreground'];
 };
 declare type ButtonStyles = BaseButtonStyles & HoverButtonStyles & ActiveButtonStyles & DisabledButtonStyles;
 declare type Variants = Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;

package/dist/spark-web-button.cjs.dev.js

@@ -12,8 +12,8 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react$1 = require('@emotion/react');
 var a11y = require('@spark-web/a11y');
 var spinner = require('@spark-web/spinner');
-var text = require('@spark-web/text');
 var theme = require('@spark-web/theme');
+var text = require('@spark-web/text');
 var link = require('@spark-web/link');
 var ts = require('@spark-web/utils/ts');
 
@@ -293,8 +293,10 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var iconOnly = _ref.iconOnly,
+  var css = _ref.css,
+    iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
+    rounded = _ref.rounded,
     size = _ref.size,
     tone = _ref.tone;
   var theme$1 = theme.useTheme();
@@ -311,12 +313,12 @@ function useButtonStyles(_ref) {
     transitionTimingFunction: theme$1.animation.standard.easing,
     transitionDuration: "".concat(theme$1.animation.standard.duration, "ms")
   };
-  return [{
+  return [_objectSpread({
     alignItems: 'center',
     background: variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
-    borderRadius: isLarge ? 'medium' : 'small',
+    borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
     cursor: 'pointer',
     display: 'inline-flex',
     gap: 'small',
@@ -325,7 +327,7 @@ function useButtonStyles(_ref) {
     paddingX: iconOnly ? undefined : mapTokens.spacing[size],
     position: 'relative',
     width: iconOnly ? mapTokens.size[size] : undefined
-  }, _objectSpread(_objectSpread({}, transitionColors), {}, {
+  }, css), _objectSpread(_objectSpread({}, transitionColors), {}, {
     // Styles for buttons that aren't disabled.
     // Using the :not() pseudo-class so we don't have to undo the styles when
     // the button is disabled.
@@ -364,12 +366,12 @@ function useButtonStyles(_ref) {
   })];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
+var UnthemedButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
   var ariaControls = _ref['aria-controls'],
     ariaDescribedBy = _ref['aria-describedby'],
     ariaExpanded = _ref['aria-expanded'],
@@ -379,6 +381,9 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     onClick = _ref.onClick,
+    customCss = _ref.css,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     _ref$prominence = _ref.prominence,
     prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
     _ref$size = _ref.size,
@@ -389,7 +394,9 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
+      css: customCss,
       iconOnly: iconOnly,
+      rounded: rounded,
       size: size,
       tone: tone,
       prominence: prominence
@@ -420,6 +427,16 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     })]
   }));
 });
+UnthemedButton.displayName = 'UnthemedButton';
+var Button = /*#__PURE__*/react.forwardRef(function (props, ref) {
+  var theme$1 = props.theme;
+  return jsxRuntime.jsx(theme.ThemeProvider, {
+    theme: theme$1,
+    children: jsxRuntime.jsx(UnthemedButton, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref
+    }))
+  });
+});
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
@@ -442,15 +459,18 @@ function Loading(_ref2) {
   });
 }
 
-var _excluded = ["data", "href", "target", "id", "prominence", "size", "tone"];
+var _excluded = ["data", "href", "target", "id", "css", "prominence", "rounded", "size", "tone"];
 /** The appearance of a `Button`, with the semantics of a link. */
-var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
+var UnthemedButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var data = _ref.data,
     href = _ref.href,
     target = _ref.target,
     id = _ref.id,
+    customCss = _ref.css,
     _ref$prominence = _ref.prominence,
     prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$tone = _ref.tone,
@@ -459,8 +479,10 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var LinkComponent = link.useLinkComponent(forwardedRef);
   var iconOnly = Boolean(consumerProps.label);
   var _useButtonStyles = useButtonStyles({
+      css: customCss,
       iconOnly: iconOnly,
       prominence: prominence,
+      rounded: rounded,
       size: size,
       tone: tone
     }),
@@ -485,6 +507,15 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     }))
   }));
 });
+var ButtonLink = ts.forwardRefWithAs(function (props, ref) {
+  var theme$1 = props.theme;
+  return jsxRuntime.jsx(theme.ThemeProvider, {
+    theme: theme$1,
+    children: jsxRuntime.jsx(UnthemedButtonLink, _objectSpread(_objectSpread({}, props), {}, {
+      forwardedRef: ref
+    }))
+  });
+});
 
 exports.BaseButton = BaseButton;
 exports.Button = Button;

package/dist/spark-web-button.cjs.prod.js

@@ -12,8 +12,8 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react$1 = require('@emotion/react');
 var a11y = require('@spark-web/a11y');
 var spinner = require('@spark-web/spinner');
-var text = require('@spark-web/text');
 var theme = require('@spark-web/theme');
+var text = require('@spark-web/text');
 var link = require('@spark-web/link');
 var ts = require('@spark-web/utils/ts');
 
@@ -293,8 +293,10 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var iconOnly = _ref.iconOnly,
+  var css = _ref.css,
+    iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
+    rounded = _ref.rounded,
     size = _ref.size,
     tone = _ref.tone;
   var theme$1 = theme.useTheme();
@@ -311,12 +313,12 @@ function useButtonStyles(_ref) {
     transitionTimingFunction: theme$1.animation.standard.easing,
     transitionDuration: "".concat(theme$1.animation.standard.duration, "ms")
   };
-  return [{
+  return [_objectSpread({
     alignItems: 'center',
     background: variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
-    borderRadius: isLarge ? 'medium' : 'small',
+    borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
     cursor: 'pointer',
     display: 'inline-flex',
     gap: 'small',
@@ -325,7 +327,7 @@ function useButtonStyles(_ref) {
     paddingX: iconOnly ? undefined : mapTokens.spacing[size],
     position: 'relative',
     width: iconOnly ? mapTokens.size[size] : undefined
-  }, _objectSpread(_objectSpread({}, transitionColors), {}, {
+  }, css), _objectSpread(_objectSpread({}, transitionColors), {}, {
     // Styles for buttons that aren't disabled.
     // Using the :not() pseudo-class so we don't have to undo the styles when
     // the button is disabled.
@@ -364,12 +366,12 @@ function useButtonStyles(_ref) {
   })];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
+var UnthemedButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
   var ariaControls = _ref['aria-controls'],
     ariaDescribedBy = _ref['aria-describedby'],
     ariaExpanded = _ref['aria-expanded'],
@@ -379,6 +381,9 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     onClick = _ref.onClick,
+    customCss = _ref.css,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     _ref$prominence = _ref.prominence,
     prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
     _ref$size = _ref.size,
@@ -389,7 +394,9 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
+      css: customCss,
       iconOnly: iconOnly,
+      rounded: rounded,
       size: size,
       tone: tone,
       prominence: prominence
@@ -420,6 +427,16 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     })]
   }));
 });
+UnthemedButton.displayName = 'UnthemedButton';
+var Button = /*#__PURE__*/react.forwardRef(function (props, ref) {
+  var theme$1 = props.theme;
+  return jsxRuntime.jsx(theme.ThemeProvider, {
+    theme: theme$1,
+    children: jsxRuntime.jsx(UnthemedButton, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref
+    }))
+  });
+});
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
@@ -442,15 +459,18 @@ function Loading(_ref2) {
   });
 }
 
-var _excluded = ["data", "href", "target", "id", "prominence", "size", "tone"];
+var _excluded = ["data", "href", "target", "id", "css", "prominence", "rounded", "size", "tone"];
 /** The appearance of a `Button`, with the semantics of a link. */
-var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
+var UnthemedButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var data = _ref.data,
     href = _ref.href,
     target = _ref.target,
     id = _ref.id,
+    customCss = _ref.css,
     _ref$prominence = _ref.prominence,
     prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$tone = _ref.tone,
@@ -459,8 +479,10 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var LinkComponent = link.useLinkComponent(forwardedRef);
   var iconOnly = Boolean(consumerProps.label);
   var _useButtonStyles = useButtonStyles({
+      css: customCss,
       iconOnly: iconOnly,
       prominence: prominence,
+      rounded: rounded,
       size: size,
       tone: tone
     }),
@@ -485,6 +507,15 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     }))
   }));
 });
+var ButtonLink = ts.forwardRefWithAs(function (props, ref) {
+  var theme$1 = props.theme;
+  return jsxRuntime.jsx(theme.ThemeProvider, {
+    theme: theme$1,
+    children: jsxRuntime.jsx(UnthemedButtonLink, _objectSpread(_objectSpread({}, props), {}, {
+      forwardedRef: ref
+    }))
+  });
+});
 
 exports.BaseButton = BaseButton;
 exports.Button = Button;

package/dist/spark-web-button.esm.js

@@ -8,8 +8,8 @@ import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import { css } from '@emotion/react';
 import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
 import { Spinner } from '@spark-web/spinner';
+import { useTheme, ThemeProvider } from '@spark-web/theme';
 import { Text } from '@spark-web/text';
-import { useTheme } from '@spark-web/theme';
 import { useLinkComponent } from '@spark-web/link';
 import { forwardRefWithAs } from '@spark-web/utils/ts';
 
@@ -289,8 +289,10 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var iconOnly = _ref.iconOnly,
+  var css = _ref.css,
+    iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
+    rounded = _ref.rounded,
     size = _ref.size,
     tone = _ref.tone;
   var theme = useTheme();
@@ -307,12 +309,12 @@ function useButtonStyles(_ref) {
     transitionTimingFunction: theme.animation.standard.easing,
     transitionDuration: "".concat(theme.animation.standard.duration, "ms")
   };
-  return [{
+  return [_objectSpread({
     alignItems: 'center',
     background: variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
-    borderRadius: isLarge ? 'medium' : 'small',
+    borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
     cursor: 'pointer',
     display: 'inline-flex',
     gap: 'small',
@@ -321,7 +323,7 @@ function useButtonStyles(_ref) {
     paddingX: iconOnly ? undefined : mapTokens.spacing[size],
     position: 'relative',
     width: iconOnly ? mapTokens.size[size] : undefined
-  }, _objectSpread(_objectSpread({}, transitionColors), {}, {
+  }, css), _objectSpread(_objectSpread({}, transitionColors), {}, {
     // Styles for buttons that aren't disabled.
     // Using the :not() pseudo-class so we don't have to undo the styles when
     // the button is disabled.
@@ -360,12 +362,12 @@ function useButtonStyles(_ref) {
   })];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+var UnthemedButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var ariaControls = _ref['aria-controls'],
     ariaDescribedBy = _ref['aria-describedby'],
     ariaExpanded = _ref['aria-expanded'],
@@ -375,6 +377,9 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     onClick = _ref.onClick,
+    customCss = _ref.css,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     _ref$prominence = _ref.prominence,
     prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
     _ref$size = _ref.size,
@@ -385,7 +390,9 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
+      css: customCss,
       iconOnly: iconOnly,
+      rounded: rounded,
       size: size,
       tone: tone,
       prominence: prominence
@@ -416,6 +423,16 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     })]
   }));
 });
+UnthemedButton.displayName = 'UnthemedButton';
+var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var theme = props.theme;
+  return jsx(ThemeProvider, {
+    theme: theme,
+    children: jsx(UnthemedButton, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref
+    }))
+  });
+});
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
@@ -438,15 +455,18 @@ function Loading(_ref2) {
   });
 }
 
-var _excluded = ["data", "href", "target", "id", "prominence", "size", "tone"];
+var _excluded = ["data", "href", "target", "id", "css", "prominence", "rounded", "size", "tone"];
 /** The appearance of a `Button`, with the semantics of a link. */
-var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
+var UnthemedButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
   var data = _ref.data,
     href = _ref.href,
     target = _ref.target,
     id = _ref.id,
+    customCss = _ref.css,
     _ref$prominence = _ref.prominence,
     prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$tone = _ref.tone,
@@ -455,8 +475,10 @@ var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
   var LinkComponent = useLinkComponent(forwardedRef);
   var iconOnly = Boolean(consumerProps.label);
   var _useButtonStyles = useButtonStyles({
+      css: customCss,
       iconOnly: iconOnly,
       prominence: prominence,
+      rounded: rounded,
       size: size,
       tone: tone
     }),
@@ -481,5 +503,14 @@ var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
     }))
   }));
 });
+var ButtonLink = forwardRefWithAs(function (props, ref) {
+  var theme = props.theme;
+  return jsx(ThemeProvider, {
+    theme: theme,
+    children: jsx(UnthemedButtonLink, _objectSpread(_objectSpread({}, props), {}, {
+      forwardedRef: ref
+    }))
+  });
+});
 
 export { BaseButton, Button, ButtonLink, useButtonStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "2.0.0-rc.9",
+  "version": "5.0.0-rc.24",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,14 +17,14 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^2.0.0-rc.9",
-    "@spark-web/box": "^2.0.0-rc.9",
-    "@spark-web/icon": "^2.0.0-rc.9",
-    "@spark-web/link": "^2.0.0-rc.9",
-    "@spark-web/spinner": "^2.0.0-rc.9",
-    "@spark-web/text": "^2.0.0-rc.9",
-    "@spark-web/theme": "^4.0.0-rc.9",
-    "@spark-web/utils": "^2.0.0-rc.9"
+    "@spark-web/a11y": "^5.0.0-rc.24",
+    "@spark-web/box": "^5.0.0-rc.24",
+    "@spark-web/icon": "^5.0.0-rc.24",
+    "@spark-web/link": "^5.0.0-rc.24",
+    "@spark-web/spinner": "^5.0.0-rc.24",
+    "@spark-web/text": "^5.0.0-rc.24",
+    "@spark-web/theme": "^5.0.0-rc.24",
+    "@spark-web/utils": "^5.0.0-rc.24"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",