@spark-web/button 5.5.3 → 5.6.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/CHANGELOG.md +21 -1
  2. package/dist/declarations/src/base-button.d.ts +1 -1
  3. package/dist/declarations/src/button-link.d.ts +3 -4
  4. package/dist/declarations/src/button.d.ts +1 -2
  5. package/dist/declarations/src/types.d.ts +9 -9
  6. package/dist/declarations/src/use-button-styles.d.ts +15 -21
  7. package/dist/declarations/src/utils.d.ts +6 -6
  8. package/dist/spark-web-button.cjs.d.ts +1 -1
  9. package/dist/spark-web-button.cjs.dev.js +1 -1
  10. package/dist/spark-web-button.cjs.prod.js +1 -1
  11. package/dist/spark-web-button.esm.js +1 -1
  12. package/package.json +12 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @spark-web/button
2
2
 
3
+ ## 5.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#667](https://github.com/brighte-labs/spark-web/pull/667)
8
+ [`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)
9
+ Thanks [@Leo704099](https://github.com/Leo704099)! - Support react 17 to 19
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+ [[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
15
+ - @spark-web/spinner@5.1.0
16
+ - @spark-web/theme@5.13.0
17
+ - @spark-web/utils@5.1.0
18
+ - @spark-web/a11y@5.3.0
19
+ - @spark-web/icon@5.1.0
20
+ - @spark-web/link@5.1.0
21
+ - @spark-web/text@5.3.0
22
+ - @spark-web/box@6.0.0
23
+
3
24
  ## 5.5.3
4
25
 
5
26
  ### Patch Changes
@@ -127,7 +148,6 @@
127
148
  ### Minor Changes
128
149
 
129
150
  - This release covers the following changes:
130
-
131
151
  - Updates the primary color palette of the Brighte theme
132
152
  - Add new Storybook story for the `rounded` prop for button components
133
153
  - Tweak focus state styling of buttons at Pantheon theme
package/dist/declarations/src/base-button.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { BoxProps } from '@spark-web/box';
2
2
  import type { MouseEvent as ReactMouseEvent } from 'react';
3
3
  import type { NativeButtonProps } from "./types.js";
4
- export declare type BaseButtonProps = NativeButtonProps & Partial<BoxProps>;
4
+ export type BaseButtonProps = NativeButtonProps & Partial<BoxProps>;
5
5
  export declare const BaseButton: import("react").ForwardRefExoticComponent<NativeButtonProps & Partial<BoxProps> & import("react").RefAttributes<HTMLButtonElement>>;
6
6
  /**
7
7
  * handle "disabled" behaviour w/o disabling buttons
package/dist/declarations/src/button-link.d.ts CHANGED
@@ -1,9 +1,8 @@
1
- /// <reference types="react" />
2
1
  import type { LinkComponentProps } from '@spark-web/link';
3
2
  import type { CommonButtonProps } from "./types.js";
4
- export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
3
+ export type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
5
4
  /** The appearance of a `Button`, with the semantics of a link. */
6
- export declare const ButtonLink: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">(props: {
5
+ export declare const ButtonLink: <Comp extends import("react").ElementType = "a">(props: {
7
6
  as?: Comp | undefined;
8
7
  ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
9
- } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
8
+ } & (Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps)) => import("react").ReactElement;
package/dist/declarations/src/button.d.ts CHANGED
@@ -1,6 +1,5 @@
1
- /// <reference types="react" />
2
1
  import type { CommonButtonProps, NativeButtonProps } from "./types.js";
3
- export declare type ButtonProps = CommonButtonProps & {
2
+ export type ButtonProps = CommonButtonProps & {
4
3
  /**
5
4
  * Identifies the element (or elements) whose contents or presence
6
5
  * are controlled by the current element.
package/dist/declarations/src/types.d.ts CHANGED
@@ -4,14 +4,14 @@ import type { IconProps } from '@spark-web/icon';
4
4
  import type { DataAttributeMap } from '@spark-web/utils/internal';
5
5
  import type { ButtonHTMLAttributes, ReactElement } from 'react';
6
6
  import type { mapTokens } from "./utils.js";
7
- export declare type ButtonSize = keyof (typeof mapTokens)[keyof typeof mapTokens];
8
- export declare type ButtonProminence = 'high' | 'low' | 'none';
9
- export declare type ButtonTone = Exclude<BackgroundTone, 'disabled'>;
10
- declare type ChildrenWithText = {
7
+ export type ButtonSize = keyof (typeof mapTokens)[keyof typeof mapTokens];
8
+ export type ButtonProminence = 'high' | 'low' | 'none';
9
+ export type ButtonTone = Exclude<BackgroundTone, 'disabled'>;
10
+ type ChildrenWithText = {
11
11
  label?: never;
12
12
  children: string | number | [ReactElement<IconProps>, string | number] | [string | number, ReactElement<IconProps>];
13
13
  };
14
- declare type IconOnly = {
14
+ type IconOnly = {
15
15
  /**
16
16
  * Implicit label for buttons only required for icon-only buttons
17
17
  * for accessibility reasons.
@@ -19,15 +19,15 @@ declare type IconOnly = {
19
19
  label: string;
20
20
  children: ReactElement<IconProps>;
21
21
  };
22
- export declare type ButtonChildrenProps = ChildrenWithText | IconOnly;
23
- export declare type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
24
- export declare type CommonButtonProps = {
22
+ export type ButtonChildrenProps = ChildrenWithText | IconOnly;
23
+ export type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
24
+ export type CommonButtonProps = {
25
25
  /** Sets data attributes for the element. */
26
26
  data?: DataAttributeMap;
27
27
  /** Unique identifier for the underlying element. */
28
28
  id?: string;
29
29
  } & ButtonStyleProps & ButtonChildrenProps;
30
- export declare type ButtonStyleProps = {
30
+ export type ButtonStyleProps = {
31
31
  /** Sets override styles for the button. */
32
32
  css?: CSSObject;
33
33
  /** Sets the visual prominence of the button. */
package/dist/declarations/src/use-button-styles.d.ts CHANGED
@@ -47,29 +47,20 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
47
47
  };
48
48
  };
49
49
  readonly ':focus': {
50
+ boxShadow: string;
51
+ outline: string;
52
+ outlineOffset: string;
53
+ } | {
54
+ "[data-brighte-focus-visible] &": {
55
+ boxShadow: string;
56
+ };
50
57
  outline: string;
51
58
  outlineOffset: string;
52
59
  } | {
53
- border?: string | undefined;
54
- outline?: string | undefined;
55
- /**
56
- * useButtonStyles
57
- *
58
- * Custom hook for styling buttons and certain links.
59
- * Returns a tuple where the first item is an object of props to spread onto the
60
- * underlying `Box` component, and the second item is a CSS object that can be
61
- * passed to Emotion's `css` function.
62
- */
63
- outlineOffset?: string | undefined;
64
- /**
65
- * useButtonStyles
66
- *
67
- * Custom hook for styling buttons and certain links.
68
- * Returns a tuple where the first item is an object of props to spread onto the
69
- * underlying `Box` component, and the second item is a CSS object that can be
70
- * passed to Emotion's `css` function.
71
- */
72
- boxShadow?: string | undefined;
60
+ border?: string;
61
+ outline?: string;
62
+ outlineOffset?: string;
63
+ boxShadow?: string;
73
64
  };
74
65
  };
75
66
  readonly '&[aria-disabled=true]': {
@@ -85,6 +76,9 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
85
76
  outline: string;
86
77
  outlineOffset: string;
87
78
  } | {
79
+ "[data-brighte-focus-visible] &": {
80
+ boxShadow: string;
81
+ };
88
82
  outline: string;
89
83
  outlineOffset: string;
90
84
  };
@@ -95,7 +89,7 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
95
89
  }, {
96
90
  readonly fontWeight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
97
91
  }];
98
- export declare type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded' | 'filled'> & Partial<Pick<ButtonStyleProps, 'rounded' | 'filled'>> & {
92
+ export type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded' | 'filled'> & Partial<Pick<ButtonStyleProps, 'rounded' | 'filled'>> & {
99
93
  /** Whether the children of the button is a single icon or not. */
100
94
  iconOnly: boolean;
101
95
  };
package/dist/declarations/src/utils.d.ts CHANGED
@@ -2,30 +2,30 @@ import type { BoxProps } from '@spark-web/box';
2
2
  import type { ForegroundTone } from '@spark-web/text';
3
3
  import type { SparkTheme } from '@spark-web/theme';
4
4
  import type { ButtonProminence, ButtonTone } from "./types.js";
5
- declare type BaseButtonStyles = {
5
+ type BaseButtonStyles = {
6
6
  background: BoxProps['background'];
7
7
  backgroundFill?: BoxProps['background'];
8
8
  border?: BoxProps['border'];
9
9
  borderWidth?: BoxProps['borderWidth'];
10
10
  textTone?: ForegroundTone;
11
11
  };
12
- declare type HoverButtonStyles = {
12
+ type HoverButtonStyles = {
13
13
  backgroundHover: keyof SparkTheme['backgroundInteractions'];
14
14
  borderHover?: keyof SparkTheme['border']['color'];
15
15
  textToneHover?: keyof SparkTheme['color']['foreground'];
16
16
  };
17
- declare type ActiveButtonStyles = {
17
+ type ActiveButtonStyles = {
18
18
  backgroundActive: keyof SparkTheme['backgroundInteractions'];
19
19
  borderActive?: keyof SparkTheme['border']['color'];
20
20
  textToneActive?: keyof SparkTheme['color']['foreground'];
21
21
  };
22
- declare type DisabledButtonStyles = {
22
+ type DisabledButtonStyles = {
23
23
  backgroundDisabled: keyof SparkTheme['color']['background'];
24
24
  borderDisabled?: keyof SparkTheme['border']['color'];
25
25
  textToneDisabled: keyof SparkTheme['color']['foreground'];
26
26
  };
27
- declare type ButtonStyles = BaseButtonStyles & HoverButtonStyles & ActiveButtonStyles & DisabledButtonStyles;
28
- declare type Variants = Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
27
+ type ButtonStyles = BaseButtonStyles & HoverButtonStyles & ActiveButtonStyles & DisabledButtonStyles;
28
+ type Variants = Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
29
29
  export declare const variants: Variants;
30
30
  export declare const mapTokens: {
31
31
  readonly fontSize: {
package/dist/spark-web-button.cjs.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export * from "./declarations/src/index";
1
+ export * from "./declarations/src/index.js";
2
2
  //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJ1dHRvbi5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=
package/dist/spark-web-button.cjs.dev.js CHANGED
@@ -299,7 +299,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
299
299
  })
300
300
  });
301
301
  }
302
- if ( /*#__PURE__*/react.isValidElement(child)) {
302
+ if (/*#__PURE__*/react.isValidElement(child)) {
303
303
  return jsxRuntime.jsx(HiddenWhenLoading, {
304
304
  isLoading: isLoading,
305
305
  children: /*#__PURE__*/react.cloneElement(child, {
package/dist/spark-web-button.cjs.prod.js CHANGED
@@ -299,7 +299,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
299
299
  })
300
300
  });
301
301
  }
302
- if ( /*#__PURE__*/react.isValidElement(child)) {
302
+ if (/*#__PURE__*/react.isValidElement(child)) {
303
303
  return jsxRuntime.jsx(HiddenWhenLoading, {
304
304
  isLoading: isLoading,
305
305
  children: /*#__PURE__*/react.cloneElement(child, {
package/dist/spark-web-button.esm.js CHANGED
@@ -295,7 +295,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
295
295
  })
296
296
  });
297
297
  }
298
- if ( /*#__PURE__*/isValidElement(child)) {
298
+ if (/*#__PURE__*/isValidElement(child)) {
299
299
  return jsx(HiddenWhenLoading, {
300
300
  isLoading: isLoading,
301
301
  children: /*#__PURE__*/cloneElement(child, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/button",
3
- "version": "5.5.3",
3
+ "version": "5.6.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,21 +17,21 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.25.0",
19
19
  "@emotion/react": "^11.14.0",
20
- "@spark-web/a11y": "^5.2.0",
21
- "@spark-web/box": "^5.2.2",
22
- "@spark-web/icon": "^5.0.0",
23
- "@spark-web/link": "^5.0.2",
24
- "@spark-web/spinner": "^5.0.1",
25
- "@spark-web/text": "^5.2.3",
26
- "@spark-web/theme": "^5.12.4",
27
- "@spark-web/utils": "^5.0.0"
20
+ "@spark-web/a11y": "^5.3.0",
21
+ "@spark-web/box": "^6.0.0",
22
+ "@spark-web/icon": "^5.1.0",
23
+ "@spark-web/link": "^5.1.0",
24
+ "@spark-web/spinner": "^5.1.0",
25
+ "@spark-web/text": "^5.3.0",
26
+ "@spark-web/theme": "^5.13.0",
27
+ "@spark-web/utils": "^5.1.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@types/react": "^18.2.0",
31
- "react": "^18.2.0"
30
+ "@types/react": "^19.1.0",
31
+ "react": "^19.1.0"
32
32
  },
33
33
  "peerDependencies": {
34
- "react": ">=17.0.2"
34
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
35
35
  },
36
36
  "engines": {
37
37
  "node": ">=14"