@mirohq/design-system-base-button 1.1.2 → 1.1.3-fix-button-types.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.
- package/dist/main.js +7 -55
- package/dist/main.js.map +1 -1
- package/dist/module.js +8 -56
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +7 -4
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -8,6 +8,7 @@ var utils = require('@react-aria/utils');
|
|
|
8
8
|
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
9
9
|
var interactions = require('@react-aria/interactions');
|
|
10
10
|
var designSystemUsePress = require('@mirohq/design-system-use-press');
|
|
11
|
+
var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
|
|
11
12
|
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
12
13
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
13
14
|
|
|
@@ -35,55 +36,6 @@ const StyledBaseButton = designSystemStitches.styled(designSystemPrimitive.Primi
|
|
|
35
36
|
}
|
|
36
37
|
});
|
|
37
38
|
|
|
38
|
-
const ariaDisabledEventExceptions = [
|
|
39
|
-
"onAnimationEnd",
|
|
40
|
-
"onAnimationEndCapture",
|
|
41
|
-
"onAnimationIteration",
|
|
42
|
-
"onAnimationIterationCapture",
|
|
43
|
-
"onAnimationStartCapture",
|
|
44
|
-
"onBlur",
|
|
45
|
-
"onBlurCapture",
|
|
46
|
-
"onDragEnter",
|
|
47
|
-
"onDragEnterCapture",
|
|
48
|
-
"onDragExit",
|
|
49
|
-
"onDragExitCapture",
|
|
50
|
-
"onDragLeave",
|
|
51
|
-
"onDragLeave",
|
|
52
|
-
"onDragLeaveCapture",
|
|
53
|
-
"onDragLeaveCapture",
|
|
54
|
-
"onDragOver",
|
|
55
|
-
"onDragOver",
|
|
56
|
-
"onDragOverCapture",
|
|
57
|
-
"onDragOverCapture",
|
|
58
|
-
"onFocus",
|
|
59
|
-
"onFocusCapture",
|
|
60
|
-
"onGotPointerCapture",
|
|
61
|
-
"onGotPointerCaptureCapture",
|
|
62
|
-
"onLostPointerCapture",
|
|
63
|
-
"onLostPointerCaptureCapture",
|
|
64
|
-
"onMouseEnter",
|
|
65
|
-
"onMouseLeave",
|
|
66
|
-
"onMouseMove",
|
|
67
|
-
"onMouseMoveCapture",
|
|
68
|
-
"onMouseOut",
|
|
69
|
-
"onMouseOutCapture",
|
|
70
|
-
"onMouseOver",
|
|
71
|
-
"onMouseOverCapture",
|
|
72
|
-
"onPointerEnter",
|
|
73
|
-
"onPointerLeave",
|
|
74
|
-
"onPointerMove",
|
|
75
|
-
"onPointerMoveCapture",
|
|
76
|
-
"onPointerOut",
|
|
77
|
-
"onPointerOutCapture",
|
|
78
|
-
"onPointerOver",
|
|
79
|
-
"onPointerOverCapture",
|
|
80
|
-
"onTouchMove",
|
|
81
|
-
"onTouchMoveCapture",
|
|
82
|
-
"onTransitionEnd",
|
|
83
|
-
"onTransitionEndCapture",
|
|
84
|
-
"onWheel",
|
|
85
|
-
"onWheelCapture"
|
|
86
|
-
];
|
|
87
39
|
const BaseButton = React__default["default"].forwardRef(
|
|
88
40
|
({
|
|
89
41
|
disabled = false,
|
|
@@ -99,21 +51,21 @@ const BaseButton = React__default["default"].forwardRef(
|
|
|
99
51
|
}, forwardRef) => {
|
|
100
52
|
const asLink = "href" in restProps && restProps.href !== void 0;
|
|
101
53
|
const { href, target, rel = "" } = restProps;
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
54
|
+
const ariaDisabledProps = designSystemUseAriaDisabled.useAriaDisabled({
|
|
55
|
+
ariaDisabled,
|
|
56
|
+
...restProps
|
|
57
|
+
});
|
|
106
58
|
const { pressProps } = designSystemUsePress.usePress({
|
|
107
59
|
preventFocusOnPress: true,
|
|
108
60
|
disabled: disabled || designSystemUtils.booleanify(ariaDisabled),
|
|
109
|
-
...
|
|
61
|
+
...ariaDisabledProps
|
|
110
62
|
});
|
|
111
63
|
const { hoverProps, isHovered } = interactions.useHover({
|
|
112
64
|
onHoverStart,
|
|
113
65
|
onHoverEnd,
|
|
114
66
|
onHoverChange
|
|
115
67
|
});
|
|
116
|
-
elementProps = utils.mergeProps(pressProps, hoverProps);
|
|
68
|
+
const elementProps = utils.mergeProps(pressProps, hoverProps);
|
|
117
69
|
let relProp = rel;
|
|
118
70
|
if (asLink && target === "_blank") {
|
|
119
71
|
if (!relProp.includes("noreferrer")) {
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype LinkAttrs = Pick<\n AnchorHTMLAttributes<'a'>,\n 'download' | 'href' | 'hrefLang' | 'media' | 'ping' | 'target' | 'type'\n>\ntype ButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents & { href?: never }\ntype LinkProps = Omit<ButtonProps, 'href'> & LinkAttrs & { href: string }\nexport type BaseButtonProps = ButtonProps | LinkProps\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps as LinkProps\n\n const ariaDisabledProps = useAriaDisabled({\n ariaDisabled,\n ...restProps,\n })\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","React","useAriaDisabled","usePress","booleanify","useHover","mergeProps","jsx"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { mergeProps } from '@react-aria/utils';
|
|
4
|
-
import { booleanify
|
|
4
|
+
import { booleanify } from '@mirohq/design-system-utils';
|
|
5
5
|
import { useHover } from '@react-aria/interactions';
|
|
6
6
|
import { usePress } from '@mirohq/design-system-use-press';
|
|
7
|
+
import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
|
|
7
8
|
import { Primitive } from '@mirohq/design-system-primitive';
|
|
8
9
|
import { styled } from '@mirohq/design-system-stitches';
|
|
9
10
|
|
|
@@ -27,55 +28,6 @@ const StyledBaseButton = styled(Primitive.button, {
|
|
|
27
28
|
}
|
|
28
29
|
});
|
|
29
30
|
|
|
30
|
-
const ariaDisabledEventExceptions = [
|
|
31
|
-
"onAnimationEnd",
|
|
32
|
-
"onAnimationEndCapture",
|
|
33
|
-
"onAnimationIteration",
|
|
34
|
-
"onAnimationIterationCapture",
|
|
35
|
-
"onAnimationStartCapture",
|
|
36
|
-
"onBlur",
|
|
37
|
-
"onBlurCapture",
|
|
38
|
-
"onDragEnter",
|
|
39
|
-
"onDragEnterCapture",
|
|
40
|
-
"onDragExit",
|
|
41
|
-
"onDragExitCapture",
|
|
42
|
-
"onDragLeave",
|
|
43
|
-
"onDragLeave",
|
|
44
|
-
"onDragLeaveCapture",
|
|
45
|
-
"onDragLeaveCapture",
|
|
46
|
-
"onDragOver",
|
|
47
|
-
"onDragOver",
|
|
48
|
-
"onDragOverCapture",
|
|
49
|
-
"onDragOverCapture",
|
|
50
|
-
"onFocus",
|
|
51
|
-
"onFocusCapture",
|
|
52
|
-
"onGotPointerCapture",
|
|
53
|
-
"onGotPointerCaptureCapture",
|
|
54
|
-
"onLostPointerCapture",
|
|
55
|
-
"onLostPointerCaptureCapture",
|
|
56
|
-
"onMouseEnter",
|
|
57
|
-
"onMouseLeave",
|
|
58
|
-
"onMouseMove",
|
|
59
|
-
"onMouseMoveCapture",
|
|
60
|
-
"onMouseOut",
|
|
61
|
-
"onMouseOutCapture",
|
|
62
|
-
"onMouseOver",
|
|
63
|
-
"onMouseOverCapture",
|
|
64
|
-
"onPointerEnter",
|
|
65
|
-
"onPointerLeave",
|
|
66
|
-
"onPointerMove",
|
|
67
|
-
"onPointerMoveCapture",
|
|
68
|
-
"onPointerOut",
|
|
69
|
-
"onPointerOutCapture",
|
|
70
|
-
"onPointerOver",
|
|
71
|
-
"onPointerOverCapture",
|
|
72
|
-
"onTouchMove",
|
|
73
|
-
"onTouchMoveCapture",
|
|
74
|
-
"onTransitionEnd",
|
|
75
|
-
"onTransitionEndCapture",
|
|
76
|
-
"onWheel",
|
|
77
|
-
"onWheelCapture"
|
|
78
|
-
];
|
|
79
31
|
const BaseButton = React.forwardRef(
|
|
80
32
|
({
|
|
81
33
|
disabled = false,
|
|
@@ -91,21 +43,21 @@ const BaseButton = React.forwardRef(
|
|
|
91
43
|
}, forwardRef) => {
|
|
92
44
|
const asLink = "href" in restProps && restProps.href !== void 0;
|
|
93
45
|
const { href, target, rel = "" } = restProps;
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
46
|
+
const ariaDisabledProps = useAriaDisabled({
|
|
47
|
+
ariaDisabled,
|
|
48
|
+
...restProps
|
|
49
|
+
});
|
|
98
50
|
const { pressProps } = usePress({
|
|
99
51
|
preventFocusOnPress: true,
|
|
100
52
|
disabled: disabled || booleanify(ariaDisabled),
|
|
101
|
-
...
|
|
53
|
+
...ariaDisabledProps
|
|
102
54
|
});
|
|
103
55
|
const { hoverProps, isHovered } = useHover({
|
|
104
56
|
onHoverStart,
|
|
105
57
|
onHoverEnd,
|
|
106
58
|
onHoverChange
|
|
107
59
|
});
|
|
108
|
-
elementProps = mergeProps(pressProps, hoverProps);
|
|
60
|
+
const elementProps = mergeProps(pressProps, hoverProps);
|
|
109
61
|
let relProp = rel;
|
|
110
62
|
if (asLink && target === "_blank") {
|
|
111
63
|
if (!relProp.includes("noreferrer")) {
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype LinkAttrs = Pick<\n AnchorHTMLAttributes<'a'>,\n 'download' | 'href' | 'hrefLang' | 'media' | 'ping' | 'target' | 'type'\n>\ntype ButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents & { href?: never }\ntype LinkProps = Omit<ButtonProps, 'href'> & LinkAttrs & { href: string }\nexport type BaseButtonProps = ButtonProps | LinkProps\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps as LinkProps\n\n const ariaDisabledProps = useAriaDisabled({\n ariaDisabled,\n ...restProps,\n })\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -14,11 +14,14 @@ declare const sizes: {
|
|
|
14
14
|
declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {}, {}>;
|
|
15
15
|
type StyledBaseButtonProps = ComponentPropsWithRef<typeof StyledBaseButton>;
|
|
16
16
|
|
|
17
|
-
type
|
|
18
|
-
type
|
|
17
|
+
type LinkAttrs = Pick<AnchorHTMLAttributes<'a'>, 'download' | 'href' | 'hrefLang' | 'media' | 'ping' | 'target' | 'type'>;
|
|
18
|
+
type ButtonProps = StyledBaseButtonProps & PressProps & HoverEvents & {
|
|
19
|
+
href?: never;
|
|
20
|
+
};
|
|
21
|
+
type LinkProps = Omit<ButtonProps, 'href'> & LinkAttrs & {
|
|
19
22
|
href: string;
|
|
20
23
|
};
|
|
21
|
-
type BaseButtonProps =
|
|
22
|
-
declare const BaseButton: react__default.ForwardRefExoticComponent<(Omit<
|
|
24
|
+
type BaseButtonProps = ButtonProps | LinkProps;
|
|
25
|
+
declare const BaseButton: react__default.ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<LinkProps, "ref">) & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
23
26
|
|
|
24
27
|
export { BaseButton, BaseButtonProps, sizes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-base-button",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3-fix-button-types.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"@react-types/shared": "^3.16.0",
|
|
32
32
|
"@mirohq/design-system-primitive": "^2.1.0",
|
|
33
33
|
"@mirohq/design-system-stitches": "^3.1.2",
|
|
34
|
-
"@mirohq/design-system-types": "^1.0.1",
|
|
35
34
|
"@mirohq/design-system-use-press": "^1.1.1",
|
|
35
|
+
"@mirohq/design-system-use-aria-disabled": "^1.1.1",
|
|
36
36
|
"@mirohq/design-system-utils": "^1.2.1"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|