@mirohq/design-system-base-button 0.4.9-use-press.0 → 0.4.10
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 +70 -30
- package/dist/main.js.map +1 -1
- package/dist/module.js +71 -31
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +50 -22
- package/package.json +8 -4
package/dist/main.js
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
7
|
-
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
6
|
+
var button = require('@react-aria/button');
|
|
8
7
|
var interactions = require('@react-aria/interactions');
|
|
9
|
-
var
|
|
8
|
+
var utils = require('@react-aria/utils');
|
|
9
|
+
var link = require('@react-aria/link');
|
|
10
|
+
var focus = require('@react-aria/focus');
|
|
10
11
|
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
11
12
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
12
|
-
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
13
13
|
|
|
14
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
15
15
|
|
|
@@ -30,55 +30,95 @@ const StyledBaseButton = designSystemStitches.styled(designSystemPrimitive.Primi
|
|
|
30
30
|
"&[disabled]": {
|
|
31
31
|
pointerEvents: "none"
|
|
32
32
|
},
|
|
33
|
-
|
|
33
|
+
'&[aria-disabled="true"]': {
|
|
34
34
|
cursor: "default"
|
|
35
|
-
}
|
|
36
|
-
...designSystemStyles.focus.defaults
|
|
35
|
+
}
|
|
37
36
|
});
|
|
38
37
|
|
|
38
|
+
function eventHandler(callback, allowEvent) {
|
|
39
|
+
if (allowEvent) {
|
|
40
|
+
return callback;
|
|
41
|
+
}
|
|
42
|
+
return void 0;
|
|
43
|
+
}
|
|
39
44
|
const BaseButton = React__default["default"].forwardRef(
|
|
40
45
|
({
|
|
41
46
|
disabled = false,
|
|
42
47
|
"aria-disabled": ariaDisabled,
|
|
48
|
+
href,
|
|
49
|
+
target,
|
|
50
|
+
rel,
|
|
43
51
|
children,
|
|
52
|
+
onClick,
|
|
44
53
|
asChild,
|
|
45
|
-
role,
|
|
46
54
|
onHoverStart,
|
|
47
55
|
onHoverEnd,
|
|
48
56
|
onHoverChange,
|
|
57
|
+
onPress,
|
|
58
|
+
onPressStart,
|
|
59
|
+
onPressEnd,
|
|
60
|
+
onPressChange,
|
|
61
|
+
onFocus,
|
|
62
|
+
onBlur,
|
|
63
|
+
onFocusChange,
|
|
49
64
|
...restProps
|
|
50
65
|
}, forwardRef) => {
|
|
51
|
-
const asLink =
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
66
|
+
const asLink = href != null;
|
|
67
|
+
const ref = React.useRef(null);
|
|
68
|
+
const refWithFallback = forwardRef != null ? forwardRef : ref;
|
|
69
|
+
const allowPressEvents = ariaDisabled !== "true" && ariaDisabled !== true;
|
|
70
|
+
const commonProps = {
|
|
71
|
+
isDisabled: disabled,
|
|
72
|
+
onPress: eventHandler(onPress != null ? onPress : onClick, allowPressEvents),
|
|
73
|
+
onPressStart: eventHandler(onPressStart, allowPressEvents),
|
|
74
|
+
onPressEnd: eventHandler(onPressEnd, allowPressEvents),
|
|
75
|
+
onPressChange: eventHandler(onPressChange, allowPressEvents),
|
|
76
|
+
onFocusChange,
|
|
77
|
+
onFocus,
|
|
78
|
+
onBlur
|
|
79
|
+
};
|
|
80
|
+
const { buttonProps, isPressed } = button.useButton(
|
|
81
|
+
{
|
|
82
|
+
href,
|
|
83
|
+
allowFocusWhenDisabled: false,
|
|
84
|
+
...commonProps,
|
|
85
|
+
...restProps
|
|
86
|
+
},
|
|
87
|
+
refWithFallback
|
|
88
|
+
);
|
|
89
|
+
const { linkProps } = link.useLink(
|
|
90
|
+
{ ...commonProps, ...restProps },
|
|
91
|
+
refWithFallback
|
|
92
|
+
);
|
|
93
|
+
const tabIndexProp = disabled && {
|
|
94
|
+
tabIndex: -1
|
|
95
|
+
};
|
|
96
|
+
const { isFocusVisible, focusProps: focusPropsRing } = focus.useFocusRing();
|
|
62
97
|
const { hoverProps, isHovered } = interactions.useHover({
|
|
63
|
-
onHoverStart,
|
|
64
|
-
onHoverEnd,
|
|
65
|
-
onHoverChange
|
|
98
|
+
onHoverStart: (e) => onHoverStart == null ? void 0 : onHoverStart(e),
|
|
99
|
+
onHoverEnd: (e) => onHoverEnd == null ? void 0 : onHoverEnd(e),
|
|
100
|
+
onHoverChange: (e) => onHoverChange == null ? void 0 : onHoverChange(e)
|
|
66
101
|
});
|
|
67
|
-
elementProps = utils.mergeProps(
|
|
102
|
+
const elementProps = utils.mergeProps(
|
|
103
|
+
restProps,
|
|
104
|
+
asLink ? linkProps : buttonProps,
|
|
105
|
+
hoverProps,
|
|
106
|
+
focusPropsRing
|
|
107
|
+
);
|
|
68
108
|
return /* @__PURE__ */ React__default["default"].createElement(StyledBaseButton, {
|
|
69
109
|
...elementProps,
|
|
110
|
+
disabled,
|
|
111
|
+
asChild: asLink || asChild,
|
|
112
|
+
...tabIndexProp,
|
|
70
113
|
"data-pressed": isPressed ? "" : void 0,
|
|
114
|
+
"data-focused": isFocusVisible ? "" : void 0,
|
|
71
115
|
"data-hovered": isHovered ? "" : void 0,
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
role: role != null ? role : asChild === true ? "button" : void 0,
|
|
75
|
-
"aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? "true" : void 0,
|
|
76
|
-
tabIndex: disabled && (asLink || asChild === true) ? -1 : void 0,
|
|
77
|
-
ref: forwardRef
|
|
116
|
+
"aria-disabled": ariaDisabled,
|
|
117
|
+
ref: refWithFallback
|
|
78
118
|
}, asLink ? /* @__PURE__ */ React__default["default"].createElement("a", {
|
|
79
119
|
href,
|
|
80
120
|
target,
|
|
81
|
-
rel: target === "_blank" ? `noopener noreferrer ${rel}
|
|
121
|
+
rel: target === "_blank" ? `noopener noreferrer ${rel}` : rel
|
|
82
122
|
}, children) : children);
|
|
83
123
|
}
|
|
84
124
|
);
|
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'\
|
|
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=\"true\"]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nfunction eventHandler<T>(\n callback: ((e: T) => void) | undefined,\n allowEvent: boolean\n): ((e: T) => void) | undefined {\n if (allowEvent) {\n return callback\n }\n\n return undefined\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n // we cannot rely on useButton with ariaDisabled, because it doesn't support onFocus when isDisabled\n const allowPressEvents = ariaDisabled !== 'true' && ariaDisabled !== true\n\n const commonProps = {\n isDisabled: disabled,\n onPress: eventHandler(onPress ?? onClick, allowPressEvents),\n onPressStart: eventHandler(onPressStart, allowPressEvents),\n onPressEnd: eventHandler(onPressEnd, allowPressEvents),\n onPressChange: eventHandler(onPressChange, allowPressEvents),\n onFocusChange,\n onFocus,\n onBlur,\n }\n\n const { buttonProps, isPressed } = useButton(\n {\n href,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...commonProps,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n { ...commonProps, ...restProps },\n // @ts-expect-error\n refWithFallback\n )\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart: e => onHoverStart?.(e),\n onHoverEnd: e => onHoverEnd?.(e),\n onHoverChange: e => onHoverChange?.(e),\n })\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n hoverProps,\n focusPropsRing\n )\n\n return (\n <StyledBaseButton\n {...elementProps}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n aria-disabled={ariaDisabled}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {children}\n </a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { booleanify, removeEventProps } from '@mirohq/design-system-utils';
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
import { useButton } from '@react-aria/button';
|
|
4
3
|
import { useHover } from '@react-aria/interactions';
|
|
5
|
-
import {
|
|
4
|
+
import { mergeProps } from '@react-aria/utils';
|
|
5
|
+
import { useLink } from '@react-aria/link';
|
|
6
|
+
import { useFocusRing } from '@react-aria/focus';
|
|
6
7
|
import { Primitive } from '@mirohq/design-system-primitive';
|
|
7
8
|
import { styled } from '@mirohq/design-system-stitches';
|
|
8
|
-
import { focus } from '@mirohq/design-system-styles';
|
|
9
9
|
|
|
10
10
|
const sizes = {
|
|
11
11
|
medium: "$8",
|
|
@@ -22,55 +22,95 @@ const StyledBaseButton = styled(Primitive.button, {
|
|
|
22
22
|
"&[disabled]": {
|
|
23
23
|
pointerEvents: "none"
|
|
24
24
|
},
|
|
25
|
-
|
|
25
|
+
'&[aria-disabled="true"]': {
|
|
26
26
|
cursor: "default"
|
|
27
|
-
}
|
|
28
|
-
...focus.defaults
|
|
27
|
+
}
|
|
29
28
|
});
|
|
30
29
|
|
|
30
|
+
function eventHandler(callback, allowEvent) {
|
|
31
|
+
if (allowEvent) {
|
|
32
|
+
return callback;
|
|
33
|
+
}
|
|
34
|
+
return void 0;
|
|
35
|
+
}
|
|
31
36
|
const BaseButton = React.forwardRef(
|
|
32
37
|
({
|
|
33
38
|
disabled = false,
|
|
34
39
|
"aria-disabled": ariaDisabled,
|
|
40
|
+
href,
|
|
41
|
+
target,
|
|
42
|
+
rel,
|
|
35
43
|
children,
|
|
44
|
+
onClick,
|
|
36
45
|
asChild,
|
|
37
|
-
role,
|
|
38
46
|
onHoverStart,
|
|
39
47
|
onHoverEnd,
|
|
40
48
|
onHoverChange,
|
|
49
|
+
onPress,
|
|
50
|
+
onPressStart,
|
|
51
|
+
onPressEnd,
|
|
52
|
+
onPressChange,
|
|
53
|
+
onFocus,
|
|
54
|
+
onBlur,
|
|
55
|
+
onFocusChange,
|
|
41
56
|
...restProps
|
|
42
57
|
}, forwardRef) => {
|
|
43
|
-
const asLink =
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
const asLink = href != null;
|
|
59
|
+
const ref = useRef(null);
|
|
60
|
+
const refWithFallback = forwardRef != null ? forwardRef : ref;
|
|
61
|
+
const allowPressEvents = ariaDisabled !== "true" && ariaDisabled !== true;
|
|
62
|
+
const commonProps = {
|
|
63
|
+
isDisabled: disabled,
|
|
64
|
+
onPress: eventHandler(onPress != null ? onPress : onClick, allowPressEvents),
|
|
65
|
+
onPressStart: eventHandler(onPressStart, allowPressEvents),
|
|
66
|
+
onPressEnd: eventHandler(onPressEnd, allowPressEvents),
|
|
67
|
+
onPressChange: eventHandler(onPressChange, allowPressEvents),
|
|
68
|
+
onFocusChange,
|
|
69
|
+
onFocus,
|
|
70
|
+
onBlur
|
|
71
|
+
};
|
|
72
|
+
const { buttonProps, isPressed } = useButton(
|
|
73
|
+
{
|
|
74
|
+
href,
|
|
75
|
+
allowFocusWhenDisabled: false,
|
|
76
|
+
...commonProps,
|
|
77
|
+
...restProps
|
|
78
|
+
},
|
|
79
|
+
refWithFallback
|
|
80
|
+
);
|
|
81
|
+
const { linkProps } = useLink(
|
|
82
|
+
{ ...commonProps, ...restProps },
|
|
83
|
+
refWithFallback
|
|
84
|
+
);
|
|
85
|
+
const tabIndexProp = disabled && {
|
|
86
|
+
tabIndex: -1
|
|
87
|
+
};
|
|
88
|
+
const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing();
|
|
54
89
|
const { hoverProps, isHovered } = useHover({
|
|
55
|
-
onHoverStart,
|
|
56
|
-
onHoverEnd,
|
|
57
|
-
onHoverChange
|
|
90
|
+
onHoverStart: (e) => onHoverStart == null ? void 0 : onHoverStart(e),
|
|
91
|
+
onHoverEnd: (e) => onHoverEnd == null ? void 0 : onHoverEnd(e),
|
|
92
|
+
onHoverChange: (e) => onHoverChange == null ? void 0 : onHoverChange(e)
|
|
58
93
|
});
|
|
59
|
-
elementProps = mergeProps(
|
|
94
|
+
const elementProps = mergeProps(
|
|
95
|
+
restProps,
|
|
96
|
+
asLink ? linkProps : buttonProps,
|
|
97
|
+
hoverProps,
|
|
98
|
+
focusPropsRing
|
|
99
|
+
);
|
|
60
100
|
return /* @__PURE__ */ React.createElement(StyledBaseButton, {
|
|
61
101
|
...elementProps,
|
|
102
|
+
disabled,
|
|
103
|
+
asChild: asLink || asChild,
|
|
104
|
+
...tabIndexProp,
|
|
62
105
|
"data-pressed": isPressed ? "" : void 0,
|
|
106
|
+
"data-focused": isFocusVisible ? "" : void 0,
|
|
63
107
|
"data-hovered": isHovered ? "" : void 0,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
role: role != null ? role : asChild === true ? "button" : void 0,
|
|
67
|
-
"aria-disabled": booleanify(ariaDisabled) ? "true" : void 0,
|
|
68
|
-
tabIndex: disabled && (asLink || asChild === true) ? -1 : void 0,
|
|
69
|
-
ref: forwardRef
|
|
108
|
+
"aria-disabled": ariaDisabled,
|
|
109
|
+
ref: refWithFallback
|
|
70
110
|
}, asLink ? /* @__PURE__ */ React.createElement("a", {
|
|
71
111
|
href,
|
|
72
112
|
target,
|
|
73
|
-
rel: target === "_blank" ? `noopener noreferrer ${rel}
|
|
113
|
+
rel: target === "_blank" ? `noopener noreferrer ${rel}` : rel
|
|
74
114
|
}, children) : children);
|
|
75
115
|
}
|
|
76
116
|
);
|
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'\
|
|
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=\"true\"]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nfunction eventHandler<T>(\n callback: ((e: T) => void) | undefined,\n allowEvent: boolean\n): ((e: T) => void) | undefined {\n if (allowEvent) {\n return callback\n }\n\n return undefined\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n // we cannot rely on useButton with ariaDisabled, because it doesn't support onFocus when isDisabled\n const allowPressEvents = ariaDisabled !== 'true' && ariaDisabled !== true\n\n const commonProps = {\n isDisabled: disabled,\n onPress: eventHandler(onPress ?? onClick, allowPressEvents),\n onPressStart: eventHandler(onPressStart, allowPressEvents),\n onPressEnd: eventHandler(onPressEnd, allowPressEvents),\n onPressChange: eventHandler(onPressChange, allowPressEvents),\n onFocusChange,\n onFocus,\n onBlur,\n }\n\n const { buttonProps, isPressed } = useButton(\n {\n href,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...commonProps,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n { ...commonProps, ...restProps },\n // @ts-expect-error\n refWithFallback\n )\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart: e => onHoverStart?.(e),\n onHoverEnd: e => onHoverEnd?.(e),\n onHoverChange: e => onHoverChange?.(e),\n })\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n hoverProps,\n focusPropsRing\n )\n\n return (\n <StyledBaseButton\n {...elementProps}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n aria-disabled={ariaDisabled}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {children}\n </a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":";;;;;;;;;AAIO,MAAM,KAAQ,GAAA;AAAA,EACnB,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,KAAA;AAAA,EACP,MAAQ,EAAA,KAAA;AACV,EAAA;AAEa,MAAA,gBAAA,GAAmB,MAAO,CAAA,SAAA,CAAU,MAAQ,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,aAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,SAAW,EAAA,YAAA;AAAA,EACX,YAAc,EAAA,KAAA;AAAA,EACd,MAAQ,EAAA,SAAA;AAAA,EAER,aAAe,EAAA;AAAA,IACb,aAAe,EAAA,MAAA;AAAA,GACjB;AAAA,EAEA,yBAA2B,EAAA;AAAA,IACzB,MAAQ,EAAA,SAAA;AAAA,GACV;AACF,CAAC,CAAA;;ACiCD,SAAS,YAAA,CACP,UACA,UAC8B,EAAA;AAC9B,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,OAAA,QAAA,CAAA;AAAA,GACT;AAEA,EAAO,OAAA,KAAA,CAAA,CAAA;AACT,CAAA;AAEO,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,eAAiB,EAAA,YAAA;AAAA,IACjB,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,SAAS,IAAQ,IAAA,IAAA,CAAA;AAEvB,IAAM,MAAA,GAAA,GAAM,OAA8C,IAAI,CAAA,CAAA;AAC9D,IAAA,MAAM,kBAAkB,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,GAAA,CAAA;AAGtC,IAAM,MAAA,gBAAA,GAAmB,YAAiB,KAAA,MAAA,IAAU,YAAiB,KAAA,IAAA,CAAA;AAErE,IAAA,MAAM,WAAc,GAAA;AAAA,MAClB,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,YAAA,CAAa,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,OAAA,EAAS,gBAAgB,CAAA;AAAA,MAC1D,YAAA,EAAc,YAAa,CAAA,YAAA,EAAc,gBAAgB,CAAA;AAAA,MACzD,UAAA,EAAY,YAAa,CAAA,UAAA,EAAY,gBAAgB,CAAA;AAAA,MACrD,aAAA,EAAe,YAAa,CAAA,aAAA,EAAe,gBAAgB,CAAA;AAAA,MAC3D,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,EAAE,WAAa,EAAA,SAAA,EAAc,GAAA,SAAA;AAAA,MACjC;AAAA,QACE,IAAA;AAAA,QAEA,sBAAwB,EAAA,KAAA;AAAA,QACxB,GAAG,WAAA;AAAA,QACH,GAAG,SAAA;AAAA,OACL;AAAA,MACA,eAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,EAAE,WAAc,GAAA,OAAA;AAAA,MACpB,EAAE,GAAG,WAAa,EAAA,GAAG,SAAU,EAAA;AAAA,MAE/B,eAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAM,eAAe,QAAY,IAAA;AAAA,MAC/B,QAAU,EAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAA,MAAM,EAAE,cAAA,EAAgB,UAAY,EAAA,cAAA,KAAmB,YAAa,EAAA,CAAA;AAEpE,IAAA,MAAM,EAAE,UAAA,EAAY,SAAU,EAAA,GAAI,QAAS,CAAA;AAAA,MACzC,YAAA,EAAc,OAAK,YAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,CAAA,CAAA;AAAA,MAClC,UAAA,EAAY,OAAK,UAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,CAAA,CAAA;AAAA,MAC9B,aAAA,EAAe,OAAK,aAAgB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,CAAA,CAAA;AAAA,KACrC,CAAA,CAAA;AAED,IAAA,MAAM,YAAe,GAAA,UAAA;AAAA,MACnB,SAAA;AAAA,MACA,SAAS,SAAY,GAAA,WAAA;AAAA,MACrB,UAAA;AAAA,MACA,cAAA;AAAA,KACF,CAAA;AAEA,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAS,MAAU,IAAA,OAAA;AAAA,MAClB,GAAG,YAAA;AAAA,MACJ,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC/B,cAAA,EAAc,iBAAiB,EAAK,GAAA,KAAA,CAAA;AAAA,MACpC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC/B,eAAe,EAAA,YAAA;AAAA,MAEf,GAAK,EAAA,eAAA;AAAA,KAAA,EAEJ,yBACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,MACC,IAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAK,EAAA,MAAA,KAAW,QAAW,GAAA,CAAA,oBAAA,EAAuB,GAAQ,CAAA,CAAA,GAAA,GAAA;AAAA,KAEzD,EAAA,QACH,IAEA,QAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
2
1
|
import * as react from 'react';
|
|
3
|
-
import react__default, { ComponentPropsWithRef,
|
|
4
|
-
import { HoverEvents } from '@react-types/shared';
|
|
5
|
-
import {
|
|
2
|
+
import react__default, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
3
|
+
import { FocusEvents, HoverEvents } from '@react-types/shared';
|
|
4
|
+
import { AriaButtonProps } from '@react-types/button';
|
|
6
5
|
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
6
|
+
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
7
7
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
8
8
|
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
9
9
|
|
|
@@ -89,7 +89,6 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
89
89
|
readonly 'background-danger-prominent-active'?: any;
|
|
90
90
|
readonly 'background-danger-prominent-hover'?: any;
|
|
91
91
|
readonly 'background-neutrals'?: any;
|
|
92
|
-
readonly 'background-neutrals-body'?: any;
|
|
93
92
|
readonly 'background-neutrals-container'?: any;
|
|
94
93
|
readonly 'background-neutrals-controls-disabled'?: any;
|
|
95
94
|
readonly 'background-neutrals-disabled'?: any;
|
|
@@ -97,6 +96,8 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
97
96
|
readonly 'background-neutrals-inactive-hover'?: any;
|
|
98
97
|
readonly 'background-neutrals-inverted'?: any;
|
|
99
98
|
readonly 'background-neutrals-inverted-subtle'?: any;
|
|
99
|
+
readonly 'background-neutrals-page'?: any;
|
|
100
|
+
readonly 'background-neutrals-page-subtle'?: any;
|
|
100
101
|
readonly 'background-neutrals-scrolls'?: any;
|
|
101
102
|
readonly 'background-neutrals-scrolls-hover'?: any;
|
|
102
103
|
readonly 'background-neutrals-subtle'?: any;
|
|
@@ -120,12 +121,11 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
120
121
|
readonly 'text-neutrals'?: any;
|
|
121
122
|
readonly 'text-neutrals-disabled'?: any;
|
|
122
123
|
readonly 'text-neutrals-inverted'?: any;
|
|
123
|
-
readonly 'text-neutrals-link'?: any;
|
|
124
|
-
readonly 'text-neutrals-link-active'?: any;
|
|
125
|
-
readonly 'text-neutrals-link-hover'?: any;
|
|
126
124
|
readonly 'text-neutrals-placeholder'?: any;
|
|
127
125
|
readonly 'text-neutrals-placeholder-only'?: any;
|
|
128
126
|
readonly 'text-neutrals-subtle'?: any;
|
|
127
|
+
readonly 'text-neutrals-subtle-active'?: any;
|
|
128
|
+
readonly 'text-neutrals-subtle-hover'?: any;
|
|
129
129
|
readonly 'text-primary'?: any;
|
|
130
130
|
readonly 'text-primary-active'?: any;
|
|
131
131
|
readonly 'text-primary-hover'?: any;
|
|
@@ -145,7 +145,7 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
145
145
|
readonly 'icon-neutrals-inverted'?: any;
|
|
146
146
|
readonly 'icon-neutrals-search'?: any;
|
|
147
147
|
readonly 'icon-neutrals-subtle'?: any;
|
|
148
|
-
readonly 'icon-neutrals-
|
|
148
|
+
readonly 'icon-neutrals-text'?: any;
|
|
149
149
|
readonly 'icon-primary'?: any;
|
|
150
150
|
readonly 'icon-primary-active'?: any;
|
|
151
151
|
readonly 'icon-primary-hover'?: any;
|
|
@@ -154,7 +154,10 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
154
154
|
readonly 'icon-success'?: any;
|
|
155
155
|
readonly 'icon-success-inverted'?: any;
|
|
156
156
|
readonly 'icon-warning'?: any;
|
|
157
|
+
readonly 'icon-warning-prominent'?: any;
|
|
157
158
|
readonly 'border-danger'?: any;
|
|
159
|
+
readonly 'border-danger-active'?: any;
|
|
160
|
+
readonly 'border-danger-hover'?: any;
|
|
158
161
|
readonly 'border-focus-inner'?: any;
|
|
159
162
|
readonly 'border-focus-middle'?: any;
|
|
160
163
|
readonly 'border-focus-outer'?: any;
|
|
@@ -166,6 +169,9 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
166
169
|
readonly 'border-neutrals-hover'?: any;
|
|
167
170
|
readonly 'border-neutrals-inverted'?: any;
|
|
168
171
|
readonly 'border-neutrals-subtle'?: any;
|
|
172
|
+
readonly 'border-neutrals-text-subtle'?: any;
|
|
173
|
+
readonly 'border-neutrals-text-subtle-active'?: any;
|
|
174
|
+
readonly 'border-neutrals-text-subtle-hover'?: any;
|
|
169
175
|
readonly 'border-primary'?: any;
|
|
170
176
|
readonly 'border-primary-active'?: any;
|
|
171
177
|
readonly 'border-primary-hover'?: any;
|
|
@@ -210,28 +216,28 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
210
216
|
readonly 'icon-400': "32px";
|
|
211
217
|
};
|
|
212
218
|
space: {
|
|
213
|
-
readonly
|
|
219
|
+
readonly 0: 0;
|
|
214
220
|
readonly 50: "4px";
|
|
215
221
|
readonly 100: "8px";
|
|
216
222
|
readonly 150: "12px";
|
|
217
223
|
readonly 200: "16px";
|
|
218
224
|
readonly 300: "24px";
|
|
219
225
|
readonly 400: "32px";
|
|
220
|
-
readonly 500: "
|
|
226
|
+
readonly 500: "40px";
|
|
221
227
|
readonly 600: "48px";
|
|
222
228
|
readonly 800: "64px";
|
|
223
229
|
readonly 1200: "96px";
|
|
224
230
|
readonly 1600: "128px";
|
|
225
231
|
};
|
|
226
232
|
'space-gap': {
|
|
227
|
-
readonly
|
|
233
|
+
readonly 0: any;
|
|
228
234
|
readonly 50: any;
|
|
229
235
|
readonly 100: any;
|
|
230
236
|
readonly 200: any;
|
|
231
237
|
readonly 300: any;
|
|
232
238
|
};
|
|
233
239
|
'space-inset': {
|
|
234
|
-
readonly
|
|
240
|
+
readonly 0: any;
|
|
235
241
|
readonly 50: any;
|
|
236
242
|
readonly 100: any;
|
|
237
243
|
readonly 150: any;
|
|
@@ -244,7 +250,7 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
244
250
|
readonly 1600: any;
|
|
245
251
|
};
|
|
246
252
|
'space-offset': {
|
|
247
|
-
readonly
|
|
253
|
+
readonly 0: any;
|
|
248
254
|
readonly 50: any;
|
|
249
255
|
readonly 100: any;
|
|
250
256
|
readonly 150: any;
|
|
@@ -255,7 +261,7 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
255
261
|
readonly 800: any;
|
|
256
262
|
readonly 1200: any;
|
|
257
263
|
readonly 1600: any;
|
|
258
|
-
readonly 'stacking-
|
|
264
|
+
readonly 'stacking-0': any;
|
|
259
265
|
readonly 'stacking-100': any;
|
|
260
266
|
readonly 'stacking-200': any;
|
|
261
267
|
readonly 'stacking-300': any;
|
|
@@ -457,14 +463,36 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
|
|
|
457
463
|
}> | undefined;
|
|
458
464
|
}> & {
|
|
459
465
|
children?: react.ReactNode;
|
|
460
|
-
} & _mirohq_design_system_stitches.CustomStylesProps, "
|
|
466
|
+
} & _mirohq_design_system_stitches.CustomStylesProps, "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "asChild" | keyof _mirohq_design_system_stitches.CustomStylesProps> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {}, {}>;
|
|
461
467
|
declare type StyledBaseButtonProps = ComponentPropsWithRef<typeof StyledBaseButton>;
|
|
462
468
|
|
|
463
|
-
declare type
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
+
declare type ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>;
|
|
470
|
+
interface BaseButtonProps extends FocusEvents, HoverEvents, Omit<ButtonPropsA11y, 'onClick' | 'isDisabled' | 'elementType' | 'onBlur' | 'onFocus' | 'onPressUp'> {
|
|
471
|
+
/**
|
|
472
|
+
* The content
|
|
473
|
+
*/
|
|
474
|
+
children: ReactNode;
|
|
475
|
+
/**
|
|
476
|
+
* Prevent pointer events
|
|
477
|
+
*/
|
|
478
|
+
disabled?: boolean;
|
|
479
|
+
/**
|
|
480
|
+
* A URL to link when using the button as a link
|
|
481
|
+
*/
|
|
482
|
+
href?: string;
|
|
483
|
+
/**
|
|
484
|
+
* The target window using the button as a link
|
|
485
|
+
*/
|
|
486
|
+
target?: string;
|
|
487
|
+
/**
|
|
488
|
+
* The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
|
|
489
|
+
*/
|
|
490
|
+
rel?: string;
|
|
491
|
+
/**
|
|
492
|
+
* Alias for onPress
|
|
493
|
+
*/
|
|
494
|
+
onClick?: AriaButtonProps['onPress'];
|
|
495
|
+
}
|
|
496
|
+
declare const BaseButton: react__default.ForwardRefExoticComponent<Pick<BaseButtonProps, "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "target" | "href" | "rel" | "asChild" | "css" | "UNSAFE_style" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onFocusChange" | "excludeFromTabOrder" | "onHoverStart" | "onHoverEnd" | "onHoverChange"> & react__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
469
497
|
|
|
470
498
|
export { BaseButton, BaseButtonProps, sizes };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-base-button",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.10",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,15 +26,19 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
+
"@react-aria/button": "^3.5.0",
|
|
30
|
+
"@react-aria/focus": "^3.10.0",
|
|
29
31
|
"@react-aria/interactions": "^3.13.0",
|
|
32
|
+
"@react-aria/link": "^3.3.0",
|
|
30
33
|
"@react-aria/utils": "^3.13.0",
|
|
34
|
+
"@react-types/button": "^3.5.0",
|
|
31
35
|
"@react-types/shared": "^3.16.0",
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
-
"@mirohq/design-system-
|
|
36
|
+
"@mirohq/design-system-stitches": "^2.3.3",
|
|
37
|
+
"@mirohq/design-system-primitive": "^1.1.0"
|
|
34
38
|
},
|
|
35
39
|
"scripts": {
|
|
36
40
|
"build": "rollup -c ../../../../rollup.config.js",
|
|
37
|
-
"clean": "rm -rf
|
|
41
|
+
"clean": "rm -rf dist",
|
|
38
42
|
"prebuild": "pnpm clean"
|
|
39
43
|
}
|
|
40
44
|
}
|