@bolttech/atoms-button 0.27.0 → 0.28.0

package/index.cjs

@@ -243,9 +243,9 @@ var symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$5(func
 /* eslint-disable es/no-symbol -- required for testing */
 var NATIVE_SYMBOL$1 = symbolConstructorDetection;
 
-var useSymbolAsUid = NATIVE_SYMBOL$1
-  && !Symbol.sham
-  && typeof Symbol.iterator == 'symbol';
+var useSymbolAsUid = NATIVE_SYMBOL$1 &&
+  !Symbol.sham &&
+  typeof Symbol.iterator == 'symbol';
 
 var getBuiltIn$1 = getBuiltIn$2;
 var isCallable$7 = isCallable$a;
@@ -330,10 +330,10 @@ var SHARED = '__core-js_shared__';
 var store$3 = sharedStore.exports = globalThis$6[SHARED] || defineGlobalProperty$2(SHARED, {});
 
 (store$3.versions || (store$3.versions = [])).push({
-  version: '3.38.1',
+  version: '3.39.0',
   mode: 'global',
   copyright: '© 2014-2024 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.38.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.39.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -1143,7 +1143,7 @@ const Container = /*#__PURE__*/styled__default["default"].div.withConfig({
 const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
   displayName: "atoms-buttonstyles__Button",
   componentId: "sc-i4bzba-1"
-})(["height:fit-content;background-color:", ";border-radius:", ";border:", " solid ", ";box-shadow:", ";color:", ";padding:", ";label.material-symbols-sharp{color:", ";}&:disabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}&:active:enabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}&:hover:enabled{background-color:", ";border:1px solid ", ";color:", ";label.material-symbols-sharp{color:", ";}}", ""], ({
+})(["height:fit-content;background-color:", ";border-radius:", ";border:", " solid ", ";box-shadow:", ";color:", ";padding:", ";label.material-symbols-sharp{color:", ";}&:disabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp{color:", ";}}&:active:enabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp{color:", ";}}&:hover:enabled{background-color:", ";border:", ";color:", ";label.material-symbols-sharp{color:", ";}}", ""], ({
   theme,
   $variant
 }) => theme.components.button[$variant].container.color.default, ({
@@ -1177,7 +1177,8 @@ const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
 }) => theme.components.button[$variant].container.color.disable, ({
   theme,
   $variant
-}) => theme.components.button[$variant].container.border.disable, ({
+}) => `${theme.components.button.borderWidth.default} solid
+        ${theme.components.button[$variant].container.border.disable}`, ({
   theme,
   $variant
 }) => theme.components.button[$variant].text.color.disable, ({
@@ -1189,7 +1190,8 @@ const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
 }) => theme.components.button[$variant].container.color.active, ({
   theme,
   $variant
-}) => theme.components.button[$variant].container.border.active, ({
+}) => `${theme.components.button.borderWidth.default} solid
+        ${theme.components.button[$variant].container.border.active}`, ({
   theme,
   $variant
 }) => theme.components.button[$variant].text.color.active, ({
@@ -1201,7 +1203,8 @@ const Button$1 = /*#__PURE__*/styled__default["default"].button.withConfig({
 }) => theme.components.button[$variant].container.color.hover, ({
   theme,
   $variant
-}) => theme.components.button[$variant].container.border.hover, ({
+}) => `${theme.components.button.borderWidth.default} solid
+        ${theme.components.button[$variant].container.border.hover}`, ({
   theme,
   $variant
 }) => theme.components.button[$variant].text.color.hover, ({
@@ -1245,6 +1248,7 @@ const ButtonTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
 
 const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
   var {
+      id,
       dataTestId,
       disabled = false,
       title = '',
@@ -1256,8 +1260,9 @@ const Button = /*#__PURE__*/react.forwardRef((_a, ref) => {
       type = 'button',
       onClick
     } = _a,
-    props = __rest(_a, ["dataTestId", "disabled", "title", "variant", "size", "iconRight", "iconLeft", "fullWidth", "type", "onClick"]);
+    props = __rest(_a, ["id", "dataTestId", "disabled", "title", "variant", "size", "iconRight", "iconLeft", "fullWidth", "type", "onClick"]);
   return jsxRuntime.jsx(Button$1, Object.assign({
+    id: id,
     "data-testid": dataTestId,
     "$variant": variant,
     "$size": size,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bolttech/atoms-button",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.23.0",
-    "@bolttech/default-theme": "0.8.0",
-    "@bolttech/frontend-foundations": "0.9.0",
-    "@bolttech/ui-utils": "0.4.0",
+    "@bolttech/atoms-icon": "0.24.0",
+    "@bolttech/default-theme": "0.15.0",
+    "@bolttech/frontend-foundations": "0.10.0",
+    "@bolttech/ui-utils": "0.5.0",
     "react": "18.2.0",
     "styled-components": "6.1.1"
   },

package/src/lib/atoms-button.d.ts

@@ -5,6 +5,7 @@ export declare const Button: React.ForwardRefExoticComponent<import("@bolttech/u
     title?: string | undefined;
     variant: import("./atoms-button.type").ButtonVariants;
     size: import("./atoms-button.type").ButtonSizes;
+    id?: string | undefined;
     iconRight?: string | undefined;
     iconLeft?: string | undefined;
     type?: import("./atoms-button.type").ButtonTypes | undefined;

package/src/lib/atoms-button.type.d.ts

@@ -9,6 +9,17 @@ export type ButtonProps = DefaultProps & {
     title?: string;
     variant: ButtonVariants;
     size: ButtonSizes;
+    /**
+     * The HTML `id` attribute for the button.
+     *
+     * Must be unique within the document and conform to
+     * HTML `id` naming rules (no spaces, not starting with a digit, etc.).
+     * Useful for targeting the button in scripts, automated tests,
+     * or associating it with a `<label>` for accessibility.
+     *
+     * @defaultValue - no `id` attribute is rendered
+     */
+    id?: string;
     iconRight?: string;
     iconLeft?: string;
     type?: ButtonTypes;