@mirohq/design-system-base-button 0.1.2 → 0.2.1

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 (6) hide show
  1. package/dist/main.js +46 -12
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +46 -12
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +5 -5
  6. package/package.json +7 -3
package/dist/main.js CHANGED
@@ -3,7 +3,9 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
+ var designSystemUtils = require('@mirohq/design-system-utils');
6
7
  var button = require('@react-aria/button');
8
+ var interactions = require('@react-aria/interactions');
7
9
  var utils = require('@react-aria/utils');
8
10
  var link = require('@react-aria/link');
9
11
  var focus = require('@react-aria/focus');
@@ -130,37 +132,69 @@ const BaseButton = React__default["default"].forwardRef(
130
132
  target,
131
133
  rel,
132
134
  children,
133
- onPress,
134
135
  onClick,
135
136
  asChild,
137
+ onHoverStart,
138
+ onHoverEnd,
139
+ onHoverChange,
140
+ onPress,
141
+ onPressStart,
142
+ onPressEnd,
143
+ onPressChange,
144
+ onFocus,
145
+ onBlur,
146
+ onFocusChange,
136
147
  ...restProps
137
148
  }, forwardRef) => {
138
149
  const asLink = href != null;
139
150
  const ref = React.useRef(null);
140
151
  const refWithFallback = forwardRef != null ? forwardRef : ref;
152
+ const commonProps = {
153
+ isDisabled: disabled,
154
+ onPress: onPress != null ? onPress : onClick,
155
+ onPressStart,
156
+ onPressEnd,
157
+ onPressChange,
158
+ onFocusChange,
159
+ onFocus,
160
+ onBlur
161
+ };
141
162
  const { buttonProps, isPressed } = button.useButton(
142
163
  {
143
- isDisabled: disabled,
144
164
  href,
145
- onPress: onPress != null ? onPress : onClick,
146
165
  allowFocusWhenDisabled: false,
166
+ ...commonProps,
147
167
  ...restProps
148
168
  },
149
169
  refWithFallback
150
170
  );
151
171
  const { linkProps } = link.useLink(
152
- {
153
- isDisabled: disabled,
154
- onPress: onPress != null ? onPress : onClick,
155
- ...restProps
156
- },
172
+ { ...commonProps, ...restProps },
157
173
  refWithFallback
158
174
  );
159
- const elementProps = utils.mergeProps(restProps, asLink ? linkProps : buttonProps);
160
175
  const tabIndexProp = disabled && {
161
176
  tabIndex: -1
162
177
  };
163
- const { isFocusVisible, focusProps } = focus.useFocusRing();
178
+ const { isFocusVisible, focusProps: focusPropsRing } = focus.useFocusRing();
179
+ const { hoverProps, isHovered } = interactions.useHover({
180
+ onHoverStart: (e) => onHoverStart == null ? void 0 : onHoverStart(e),
181
+ onHoverEnd: (e) => onHoverEnd == null ? void 0 : onHoverEnd(e),
182
+ onHoverChange: (e) => onHoverChange == null ? void 0 : onHoverChange(e)
183
+ });
184
+ const elementProps = utils.mergeProps(
185
+ restProps,
186
+ asLink ? linkProps : buttonProps,
187
+ hoverProps,
188
+ focusPropsRing
189
+ );
190
+ const formattedChildren = variant === "solid-prominent" ? designSystemUtils.addPropsToChildren(
191
+ children,
192
+ (child) => {
193
+ var _a;
194
+ return ((_a = child == null ? void 0 : child.type) == null ? void 0 : _a.displayName) === "Badge";
195
+ },
196
+ { inverted: true }
197
+ ) : children;
164
198
  return /* @__PURE__ */ React__default["default"].createElement(StyledBaseButton, {
165
199
  ...elementProps,
166
200
  variant,
@@ -168,15 +202,15 @@ const BaseButton = React__default["default"].forwardRef(
168
202
  disabled,
169
203
  asChild: asLink || asChild,
170
204
  ...tabIndexProp,
171
- ...focusProps,
172
205
  "data-pressed": isPressed ? "" : void 0,
173
206
  "data-focused": isFocusVisible ? "" : void 0,
207
+ "data-hovered": isHovered ? "" : void 0,
174
208
  ref: refWithFallback
175
209
  }, asLink ? /* @__PURE__ */ React__default["default"].createElement("a", {
176
210
  href,
177
211
  target,
178
212
  rel: target === "_blank" ? `noopener noreferrer ${rel}` : rel
179
- }, children) : children);
213
+ }, formattedChildren) : formattedChildren);
180
214
  }
181
215
  );
182
216
 
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\n// todo move to general focus styles (focus-small)\nexport const focusFilled = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 2px var(--colors-blue-50), inset 0 0 0 3px var(--colors-white)`,\n outline: 'none',\n },\n}\n\nexport const focusOutline = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 1px var(--colors-blue-50), inset 0 0 0 2px var(--colors-white)`,\n outline: 'none',\n borderColor: '$blue-50',\n },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\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 variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '#3859FF', // todo after updating color change to 60\n color: '$font-cta-idle',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '#2436B1', // todo after updating color change to 80\n },\n [activeSelector]: {\n backgroundColor: '$blue-80', // todo after updating color change to 90\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n 'solid-subtle': {\n backgroundColor: '$gray-20',\n color: '$font-primary',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n outline: {\n backgroundColor: '$white',\n color: '$font-primary',\n border: '1px solid $gray-50',\n\n '&:hover': {\n backgroundColor: '$gray-30',\n borderColor: '$indigo-20',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n borderColor: '$indigo-30',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n borderColor: '$gray-40',\n },\n\n // order is important because of borderColor\n ...focusOutline,\n },\n ghost: {\n color: '$font-primary',\n backgroundColor: 'transparent',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n color: '$gray-50',\n },\n },\n },\n size: {\n medium: {\n height: '$8',\n paddingX: '$50',\n },\n large: {\n height: '$10',\n paddingX: '$100',\n },\n 'x-large': {\n height: '$12',\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { ScaleProp } from '@mirohq/design-system-types'\nimport { useButton } from '@react-aria/button'\nimport type { AriaButtonProps } from '@react-types/button'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\n\nimport type { StyledBaseButtonProps } from './base-button.styled'\nimport { StyledBaseButton } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps\n\nexport interface BaseButtonProps\n extends Omit<ButtonPropsA11y, 'onClick' | 'isDisabled' | 'elementType'> {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the button style\n */\n variant?: StyledBaseButtonProps['variant']\n\n /**\n * Change the button size\n */\n size?: ScaleProp<StyledBaseButtonProps['size']>\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\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n variant,\n size,\n disabled = false,\n href,\n target,\n rel,\n children,\n onPress,\n onClick,\n asChild,\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 const { buttonProps, isPressed } = useButton(\n {\n isDisabled: disabled,\n href,\n onPress: onPress ?? onClick,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n ...restProps,\n },\n // @ts-expect-error\n refWithFallback\n )\n\n const elementProps = mergeProps(restProps, asLink ? linkProps : buttonProps)\n\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps } = useFocusRing()\n\n return (\n <StyledBaseButton\n {...elementProps}\n variant={variant}\n size={size}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n {...focusProps}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\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","mergeProps","useFocusRing"],"mappings":"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"}
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\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 2px var(--colors-blue-50), inset 0 0 0 3px var(--colors-white)`,\n outline: 'none',\n },\n}\n\nconst focusOutline = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 1px var(--colors-blue-50), inset 0 0 0 2px var(--colors-white)`,\n outline: 'none',\n borderColor: '$blue-50',\n },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\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 variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '#3859FF', // todo after updating color change to 60\n color: '$font-cta-idle',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '#2436B1', // todo after updating color change to 80\n },\n [activeSelector]: {\n backgroundColor: '$blue-80', // todo after updating color change to 90\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n 'solid-subtle': {\n backgroundColor: '$gray-20',\n color: '$font-primary',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n outline: {\n backgroundColor: '$white',\n color: '$font-primary',\n border: '1px solid $gray-50',\n\n '&:hover': {\n backgroundColor: '$gray-30',\n borderColor: '$indigo-20',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n borderColor: '$indigo-30',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n borderColor: '$gray-40',\n },\n\n // order is important because of borderColor\n ...focusOutline,\n },\n ghost: {\n color: '$font-primary',\n backgroundColor: 'transparent',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n color: '$gray-50',\n },\n },\n },\n size: {\n medium: {\n height: '$8',\n paddingX: '$50',\n },\n large: {\n height: '$10',\n paddingX: '$100',\n },\n 'x-large': {\n height: '$12',\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { BadgeProps } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\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 * Change the button style\n */\n variant?: StyledBaseButtonProps['variant']\n\n /**\n * Change the button size\n */\n size?: StyledBaseButtonProps['size']\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\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n variant,\n size,\n disabled = false,\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 const commonProps = {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n onPressStart,\n onPressEnd,\n onPressChange,\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 const formattedChildren =\n variant === 'solid-prominent'\n ? addPropsToChildren<BadgeProps>(\n children,\n // @ts-expect-error\n child => child?.type?.displayName === 'Badge',\n { inverted: true }\n )\n : children\n\n return (\n <StyledBaseButton\n {...elementProps}\n variant={variant}\n size={size}\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 // @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 {formattedChildren}\n </a>\n ) : (\n formattedChildren\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps","addPropsToChildren"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import React, { useRef } from 'react';
2
+ import { addPropsToChildren } from '@mirohq/design-system-utils';
2
3
  import { useButton } from '@react-aria/button';
4
+ import { useHover } from '@react-aria/interactions';
3
5
  import { mergeProps } from '@react-aria/utils';
4
6
  import { useLink } from '@react-aria/link';
5
7
  import { useFocusRing } from '@react-aria/focus';
@@ -122,37 +124,69 @@ const BaseButton = React.forwardRef(
122
124
  target,
123
125
  rel,
124
126
  children,
125
- onPress,
126
127
  onClick,
127
128
  asChild,
129
+ onHoverStart,
130
+ onHoverEnd,
131
+ onHoverChange,
132
+ onPress,
133
+ onPressStart,
134
+ onPressEnd,
135
+ onPressChange,
136
+ onFocus,
137
+ onBlur,
138
+ onFocusChange,
128
139
  ...restProps
129
140
  }, forwardRef) => {
130
141
  const asLink = href != null;
131
142
  const ref = useRef(null);
132
143
  const refWithFallback = forwardRef != null ? forwardRef : ref;
144
+ const commonProps = {
145
+ isDisabled: disabled,
146
+ onPress: onPress != null ? onPress : onClick,
147
+ onPressStart,
148
+ onPressEnd,
149
+ onPressChange,
150
+ onFocusChange,
151
+ onFocus,
152
+ onBlur
153
+ };
133
154
  const { buttonProps, isPressed } = useButton(
134
155
  {
135
- isDisabled: disabled,
136
156
  href,
137
- onPress: onPress != null ? onPress : onClick,
138
157
  allowFocusWhenDisabled: false,
158
+ ...commonProps,
139
159
  ...restProps
140
160
  },
141
161
  refWithFallback
142
162
  );
143
163
  const { linkProps } = useLink(
144
- {
145
- isDisabled: disabled,
146
- onPress: onPress != null ? onPress : onClick,
147
- ...restProps
148
- },
164
+ { ...commonProps, ...restProps },
149
165
  refWithFallback
150
166
  );
151
- const elementProps = mergeProps(restProps, asLink ? linkProps : buttonProps);
152
167
  const tabIndexProp = disabled && {
153
168
  tabIndex: -1
154
169
  };
155
- const { isFocusVisible, focusProps } = useFocusRing();
170
+ const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing();
171
+ const { hoverProps, isHovered } = useHover({
172
+ onHoverStart: (e) => onHoverStart == null ? void 0 : onHoverStart(e),
173
+ onHoverEnd: (e) => onHoverEnd == null ? void 0 : onHoverEnd(e),
174
+ onHoverChange: (e) => onHoverChange == null ? void 0 : onHoverChange(e)
175
+ });
176
+ const elementProps = mergeProps(
177
+ restProps,
178
+ asLink ? linkProps : buttonProps,
179
+ hoverProps,
180
+ focusPropsRing
181
+ );
182
+ const formattedChildren = variant === "solid-prominent" ? addPropsToChildren(
183
+ children,
184
+ (child) => {
185
+ var _a;
186
+ return ((_a = child == null ? void 0 : child.type) == null ? void 0 : _a.displayName) === "Badge";
187
+ },
188
+ { inverted: true }
189
+ ) : children;
156
190
  return /* @__PURE__ */ React.createElement(StyledBaseButton, {
157
191
  ...elementProps,
158
192
  variant,
@@ -160,15 +194,15 @@ const BaseButton = React.forwardRef(
160
194
  disabled,
161
195
  asChild: asLink || asChild,
162
196
  ...tabIndexProp,
163
- ...focusProps,
164
197
  "data-pressed": isPressed ? "" : void 0,
165
198
  "data-focused": isFocusVisible ? "" : void 0,
199
+ "data-hovered": isHovered ? "" : void 0,
166
200
  ref: refWithFallback
167
201
  }, asLink ? /* @__PURE__ */ React.createElement("a", {
168
202
  href,
169
203
  target,
170
204
  rel: target === "_blank" ? `noopener noreferrer ${rel}` : rel
171
- }, children) : children);
205
+ }, formattedChildren) : formattedChildren);
172
206
  }
173
207
  );
174
208
 
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\n// todo move to general focus styles (focus-small)\nexport const focusFilled = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 2px var(--colors-blue-50), inset 0 0 0 3px var(--colors-white)`,\n outline: 'none',\n },\n}\n\nexport const focusOutline = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 1px var(--colors-blue-50), inset 0 0 0 2px var(--colors-white)`,\n outline: 'none',\n borderColor: '$blue-50',\n },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\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 variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '#3859FF', // todo after updating color change to 60\n color: '$font-cta-idle',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '#2436B1', // todo after updating color change to 80\n },\n [activeSelector]: {\n backgroundColor: '$blue-80', // todo after updating color change to 90\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n 'solid-subtle': {\n backgroundColor: '$gray-20',\n color: '$font-primary',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n outline: {\n backgroundColor: '$white',\n color: '$font-primary',\n border: '1px solid $gray-50',\n\n '&:hover': {\n backgroundColor: '$gray-30',\n borderColor: '$indigo-20',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n borderColor: '$indigo-30',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n borderColor: '$gray-40',\n },\n\n // order is important because of borderColor\n ...focusOutline,\n },\n ghost: {\n color: '$font-primary',\n backgroundColor: 'transparent',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n color: '$gray-50',\n },\n },\n },\n size: {\n medium: {\n height: '$8',\n paddingX: '$50',\n },\n large: {\n height: '$10',\n paddingX: '$100',\n },\n 'x-large': {\n height: '$12',\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { ScaleProp } from '@mirohq/design-system-types'\nimport { useButton } from '@react-aria/button'\nimport type { AriaButtonProps } from '@react-types/button'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\n\nimport type { StyledBaseButtonProps } from './base-button.styled'\nimport { StyledBaseButton } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps\n\nexport interface BaseButtonProps\n extends Omit<ButtonPropsA11y, 'onClick' | 'isDisabled' | 'elementType'> {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the button style\n */\n variant?: StyledBaseButtonProps['variant']\n\n /**\n * Change the button size\n */\n size?: ScaleProp<StyledBaseButtonProps['size']>\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\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n variant,\n size,\n disabled = false,\n href,\n target,\n rel,\n children,\n onPress,\n onClick,\n asChild,\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 const { buttonProps, isPressed } = useButton(\n {\n isDisabled: disabled,\n href,\n onPress: onPress ?? onClick,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n ...restProps,\n },\n // @ts-expect-error\n refWithFallback\n )\n\n const elementProps = mergeProps(restProps, asLink ? linkProps : buttonProps)\n\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps } = useFocusRing()\n\n return (\n <StyledBaseButton\n {...elementProps}\n variant={variant}\n size={size}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n {...focusProps}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\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":"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"}
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\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 2px var(--colors-blue-50), inset 0 0 0 3px var(--colors-white)`,\n outline: 'none',\n },\n}\n\nconst focusOutline = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 1px var(--colors-blue-50), inset 0 0 0 2px var(--colors-white)`,\n outline: 'none',\n borderColor: '$blue-50',\n },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\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 variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '#3859FF', // todo after updating color change to 60\n color: '$font-cta-idle',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '#2436B1', // todo after updating color change to 80\n },\n [activeSelector]: {\n backgroundColor: '$blue-80', // todo after updating color change to 90\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n 'solid-subtle': {\n backgroundColor: '$gray-20',\n color: '$font-primary',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n outline: {\n backgroundColor: '$white',\n color: '$font-primary',\n border: '1px solid $gray-50',\n\n '&:hover': {\n backgroundColor: '$gray-30',\n borderColor: '$indigo-20',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n borderColor: '$indigo-30',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n borderColor: '$gray-40',\n },\n\n // order is important because of borderColor\n ...focusOutline,\n },\n ghost: {\n color: '$font-primary',\n backgroundColor: 'transparent',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n color: '$gray-50',\n },\n },\n },\n size: {\n medium: {\n height: '$8',\n paddingX: '$50',\n },\n large: {\n height: '$10',\n paddingX: '$100',\n },\n 'x-large': {\n height: '$12',\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { BadgeProps } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\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 * Change the button style\n */\n variant?: StyledBaseButtonProps['variant']\n\n /**\n * Change the button size\n */\n size?: StyledBaseButtonProps['size']\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\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n variant,\n size,\n disabled = false,\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 const commonProps = {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n onPressStart,\n onPressEnd,\n onPressChange,\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 const formattedChildren =\n variant === 'solid-prominent'\n ? addPropsToChildren<BadgeProps>(\n children,\n // @ts-expect-error\n child => child?.type?.displayName === 'Badge',\n { inverted: true }\n )\n : children\n\n return (\n <StyledBaseButton\n {...elementProps}\n variant={variant}\n size={size}\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 // @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 {formattedChildren}\n </a>\n ) : (\n formattedChildren\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react from 'react';
2
2
  import react__default, { ComponentPropsWithRef, ReactNode } from 'react';
3
- import { ScaleProp } from '@mirohq/design-system-types';
3
+ import { FocusEvents, HoverEvents } from '@react-types/shared';
4
4
  import { AriaButtonProps } from '@react-types/button';
5
5
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
6
6
  import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
@@ -363,8 +363,8 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{
363
363
  }, {}>;
364
364
  declare type StyledBaseButtonProps = ComponentPropsWithRef<typeof StyledBaseButton>;
365
365
 
366
- declare type ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps;
367
- interface BaseButtonProps extends Omit<ButtonPropsA11y, 'onClick' | 'isDisabled' | 'elementType'> {
366
+ declare type ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>;
367
+ interface BaseButtonProps extends FocusEvents, HoverEvents, Omit<ButtonPropsA11y, 'onClick' | 'isDisabled' | 'elementType' | 'onBlur' | 'onFocus' | 'onPressUp'> {
368
368
  /**
369
369
  * The content
370
370
  */
@@ -376,7 +376,7 @@ interface BaseButtonProps extends Omit<ButtonPropsA11y, 'onClick' | 'isDisabled'
376
376
  /**
377
377
  * Change the button size
378
378
  */
379
- size?: ScaleProp<StyledBaseButtonProps['size']>;
379
+ size?: StyledBaseButtonProps['size'];
380
380
  /**
381
381
  * Prevent pointer events
382
382
  */
@@ -398,6 +398,6 @@ interface BaseButtonProps extends Omit<ButtonPropsA11y, 'onClick' | 'isDisabled'
398
398
  */
399
399
  onClick?: AriaButtonProps['onPress'];
400
400
  }
401
- 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" | "size" | "target" | "href" | "rel" | "asChild" | "css" | "UNSAFE_style" | "variant" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "excludeFromTabOrder"> & react__default.RefAttributes<HTMLButtonElement>>;
401
+ 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" | "size" | "target" | "href" | "rel" | "asChild" | "css" | "UNSAFE_style" | "variant" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onFocusChange" | "excludeFromTabOrder" | "onHoverStart" | "onHoverEnd" | "onHoverChange"> & react__default.RefAttributes<HTMLButtonElement>>;
402
402
 
403
403
  export { BaseButton, BaseButtonProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-button",
3
- "version": "0.1.2",
3
+ "version": "0.2.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -28,14 +28,18 @@
28
28
  "dependencies": {
29
29
  "@react-aria/button": "^3.5.0",
30
30
  "@react-aria/focus": "^3.10.0",
31
+ "@react-aria/interactions": "^3.13.0",
31
32
  "@react-aria/link": "^3.3.0",
32
33
  "@react-aria/utils": "^3.13.0",
33
34
  "@react-types/button": "^3.5.0",
35
+ "@react-types/shared": "^3.16.0",
36
+ "@mirohq/design-system-badge": "^0.1.1",
34
37
  "@mirohq/design-system-primitive": "^1.0.4",
35
- "@mirohq/design-system-stitches": "^2.0.10"
38
+ "@mirohq/design-system-stitches": "^2.0.10",
39
+ "@mirohq/design-system-utils": "^0.11.0"
36
40
  },
37
41
  "devDependencies": {
38
- "@mirohq/design-system-icons": "^0.1.3"
42
+ "@mirohq/design-system-icons": "^0.2.2"
39
43
  },
40
44
  "scripts": {
41
45
  "build": "rollup -c ../../../../rollup.config.js",