npm - @mirohq/design-system-button - Versions diffs - 2.0.14-colors.0 → 2.0.15 - Mend

@mirohq/design-system-button 2.0.14-colors.0 → 2.0.15

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

package/dist/main.js CHANGED Viewed

@@ -170,15 +170,15 @@ const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive
       variant: "primary",
       appearance: "filled",
       css: {
-        color: "$white",
-        backgroundColor: "$blue-600",
+        color: "$font-cta-idle",
+        backgroundColor: "$background-cta-idle",
         ...focusFilled,
         "&:hover": {
           color: "$white",
-          backgroundColor: "$blue-700"
+          backgroundColor: "$background-cta-hover"
         },
         [pressedSelector]: {
-          backgroundColor: "$blue-900"
+          backgroundColor: "$background-cta-active"
         }
       }
     },
@@ -361,7 +361,6 @@ const Button = React__default["default"].forwardRef(
       },
       refWithFallback
     );
-    const elementProps = utils.mergeProps(restProps, asLink ? linkProps : buttonProps);
     const Content = /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, _loading && /* @__PURE__ */ React__default["default"].createElement(StyledSpinnerBox, null, /* @__PURE__ */ React__default["default"].createElement(designSystemSpinner.Spinner, {
       size: spinnerSize
     })), /* @__PURE__ */ React__default["default"].createElement("span", null, children));
@@ -369,6 +368,11 @@ const Button = React__default["default"].forwardRef(
       tabIndex: -1
     };
     const { isFocusVisible, focusProps } = focus.useFocusRing();
+    const elementProps = utils.mergeProps(
+      restProps,
+      asLink ? linkProps : buttonProps,
+      focusProps
+    );
     return /* @__PURE__ */ React__default["default"].createElement(StyledButton, {
       ...elementProps,
       variant,
@@ -380,7 +384,6 @@ const Button = React__default["default"].forwardRef(
       disabled: shouldBeDisabled,
       asChild: asLink || asChild,
       ...tabIndexProp,
-      ...focusProps,
       "data-pressed": isPressed ? "" : void 0,
       "data-focused": isFocusVisible ? "" : void 0,
       ref: refWithFallback

package/dist/main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main.js","sources":["../src/button.styled.ts","../src/button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const focusFilled = {\n '&[data-focused]': {\n boxShadow: `inset 0 0 0 1px white, ${focus.defaults['&:focus-visible'].boxShadow}`,\n },\n}\n\nexport const focusOutline = {\n '&[data-focused]': {\n ...focus.defaults,\n borderColor: 'transparent',\n },\n}\n\nconst focusDefault = {\n '&[data-focused]': focus.defaults,\n}\n\nconst pressedSelector = '&:active, &[data-pressed]'\n\nexport const StyledButton = styled(Primitive.button, {\n boxSizing: 'border-box',\n display: 'inline-block',\n outline: 'none',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n verticalAlign: 'middle',\n userSelect: 'none',\n fontFamily: 'inherit',\n fontStyle: 'normal',\n fontStretch: 'normal',\n letterSpacing: 'normal',\n fontWeight: 'normal',\n position: 'relative',\n cursor: 'pointer',\n border: 'none',\n textDecoration: 'none',\n backgroundColor: 'transparent',\n '&[disabled]': {\n pointerEvents: 'none',\n opacity: 0.4,\n },\n variants: {\n variant: {\n primary: {},\n secondary: {},\n danger: {},\n },\n appearance: {\n filled: {},\n outlined: {},\n flat: {},\n },\n size: {\n large: {\n padding: '14px 32px 18px 32px',\n fontSize: '20px',\n lineHeight: '28px',\n height: '60px',\n },\n medium: {\n padding: '11px 24px 13px 24px',\n fontSize: '16px',\n lineHeight: '24px',\n height: '48px',\n },\n small: {\n padding: '7px 16px 9px 16px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '36px',\n },\n 'x-small': {\n padding: '5px 12px 7px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '32px',\n },\n 'xx-small': {\n padding: '3px 12px',\n fontSize: '12px',\n lineHeight: '18px',\n height: '24px',\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n loading: {\n true: {\n '&[disabled]': {\n cursor: 'default',\n opacity: 1,\n pointerEvents: 'none',\n '& > span': {\n visibility: 'hidden',\n },\n },\n },\n },\n fluid: {\n true: {\n width: '100%',\n display: 'block',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n rounded: true,\n css: {\n padding: '10px 16px',\n height: '40px',\n },\n },\n {\n size: 'large',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'medium',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'x-small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'xx-small',\n rounded: false,\n css: {\n borderRadius: '$25',\n },\n },\n {\n variant: 'primary',\n appearance: 'filled',\n css: {\n color: '$white',\n backgroundColor: '$blue-600',\n ...focusFilled,\n '&:hover': {\n color: '$white',\n backgroundColor: '$blue-700',\n },\n [pressedSelector]: {\n backgroundColor: '$blue-900',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'outlined',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n border: '1px solid rgba(66, 98, 255, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(66, 98, 255, 1)',\n backgroundColor: 'rgba(244, 246, 255, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(240, 242, 255, 1)',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'flat',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n color: 'rgba(61, 81, 212, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'filled',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n ...focusFilled,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(240, 240, 243, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'outlined',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n border: '1px solid rgba(205, 204, 215, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'flat',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'filled',\n css: {\n color: '$white',\n backgroundColor: 'rgba(217, 41, 41, 1)',\n ...focusFilled,\n '&:hover': {\n backgroundColor: 'rgba(199, 20, 20, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(184, 13, 13, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'outlined',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n border: '1px solid rgba(217, 41, 41, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(254, 247, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(253, 242, 242, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'flat',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n ],\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport type { AriaButtonProps } from '@react-types/button'\nimport { mergeProps } from '@react-aria/utils'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { ScaleProp } from '@mirohq/design-system-types'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\n\nimport type { StyledButtonProps } from './button.styled'\nimport { StyledButton, StyledSpinnerBox } from './button.styled'\n\ntype ButtonPropsA11y = StyledButtonProps & AriaButtonProps\n\nexport interface ButtonProps\n extends Omit<ButtonPropsA11y, 'onClick' \| 'isDisabled' \| 'elementType'> {\n /*\n The content\n /\n children: ReactNode\n\n /\n Change the button color\n /\n variant?: StyledButtonProps['variant']\n\n /\n Change the button style\n /\n appearance?: StyledButtonProps['appearance']\n\n /\n Change the button height and font-size\n /\n size?: ScaleProp<StyledButtonProps['size']>\n\n /\n Make border-radius circle\n /\n rounded?: StyledButtonProps['rounded']\n\n /\n Add spinner and disable\n /\n loading?: StyledButtonProps['loading']\n\n /\n Make width 100%\n /\n fluid?: StyledButtonProps['fluid']\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 Button = React.forwardRef<\n ElementRef<typeof StyledButton \| 'a'>,\n ButtonProps\n>(\n (\n {\n variant = 'primary',\n appearance = 'filled',\n size = 'medium',\n loading = false,\n rounded = false,\n fluid = false,\n disabled = false,\n href,\n target,\n rel,\n children,\n onPress,\n onClick,\n asChild,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size']\n\n if (typeof size === 'string') {\n spinnerSize = ['x-small', 'xx-small'].includes(size) ? 'small' : 'medium'\n } else {\n spinnerSize = 'medium'\n }\n\n const _loading = loading === 'true' \|\| loading === true\n const shouldBeDisabled = disabled \|\| _loading\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: shouldBeDisabled,\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 Content = (\n <>\n {_loading && (\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n )}\n <span>{children}</span>\n </>\n )\n\n const tabIndexProp = shouldBeDisabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps } = useFocusRing()\n\n return (\n <StyledButton\n {...elementProps}\n variant={variant}\n appearance={appearance}\n size={size}\n loading={loading}\n rounded={rounded}\n fluid={fluid}\n disabled={shouldBeDisabled}\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 {Content}\n </a>\n ) : (\n Content\n )}\n </StyledButton>\n )\n }\n)\n"],"names":["focus","styled","Primitive","React","useRef","useButton","useLink","mergeProps","Spinner","useFocusRing"],"mappings":"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"}
1	+ {"version":3,"file":"main.js","sources":["../src/button.styled.ts","../src/button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const focusFilled = {\n '&[data-focused]': {\n boxShadow: `inset 0 0 0 1px white, ${focus.defaults['&:focus-visible'].boxShadow}`,\n },\n}\n\nexport const focusOutline = {\n '&[data-focused]': {\n ...focus.defaults,\n borderColor: 'transparent',\n },\n}\n\nconst focusDefault = {\n '&[data-focused]': focus.defaults,\n}\n\nconst pressedSelector = '&:active, &[data-pressed]'\n\nexport const StyledButton = styled(Primitive.button, {\n boxSizing: 'border-box',\n display: 'inline-block',\n outline: 'none',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n verticalAlign: 'middle',\n userSelect: 'none',\n fontFamily: 'inherit',\n fontStyle: 'normal',\n fontStretch: 'normal',\n letterSpacing: 'normal',\n fontWeight: 'normal',\n position: 'relative',\n cursor: 'pointer',\n border: 'none',\n textDecoration: 'none',\n backgroundColor: 'transparent',\n '&[disabled]': {\n pointerEvents: 'none',\n opacity: 0.4,\n },\n variants: {\n variant: {\n primary: {},\n secondary: {},\n danger: {},\n },\n appearance: {\n filled: {},\n outlined: {},\n flat: {},\n },\n size: {\n large: {\n padding: '14px 32px 18px 32px',\n fontSize: '20px',\n lineHeight: '28px',\n height: '60px',\n },\n medium: {\n padding: '11px 24px 13px 24px',\n fontSize: '16px',\n lineHeight: '24px',\n height: '48px',\n },\n small: {\n padding: '7px 16px 9px 16px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '36px',\n },\n 'x-small': {\n padding: '5px 12px 7px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '32px',\n },\n 'xx-small': {\n padding: '3px 12px',\n fontSize: '12px',\n lineHeight: '18px',\n height: '24px',\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n loading: {\n true: {\n '&[disabled]': {\n cursor: 'default',\n opacity: 1,\n pointerEvents: 'none',\n '& > span': {\n visibility: 'hidden',\n },\n },\n },\n },\n fluid: {\n true: {\n width: '100%',\n display: 'block',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n rounded: true,\n css: {\n padding: '10px 16px',\n height: '40px',\n },\n },\n {\n size: 'large',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'medium',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'x-small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'xx-small',\n rounded: false,\n css: {\n borderRadius: '$25',\n },\n },\n {\n variant: 'primary',\n appearance: 'filled',\n css: {\n color: '$font-cta-idle',\n backgroundColor: '$background-cta-idle',\n ...focusFilled,\n '&:hover': {\n color: '$white',\n backgroundColor: '$background-cta-hover',\n },\n [pressedSelector]: {\n backgroundColor: '$background-cta-active',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'outlined',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n border: '1px solid rgba(66, 98, 255, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(66, 98, 255, 1)',\n backgroundColor: 'rgba(244, 246, 255, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(240, 242, 255, 1)',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'flat',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n color: 'rgba(61, 81, 212, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'filled',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n ...focusFilled,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(240, 240, 243, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'outlined',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n border: '1px solid rgba(205, 204, 215, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'flat',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'filled',\n css: {\n color: '$white',\n backgroundColor: 'rgba(217, 41, 41, 1)',\n ...focusFilled,\n '&:hover': {\n backgroundColor: 'rgba(199, 20, 20, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(184, 13, 13, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'outlined',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n border: '1px solid rgba(217, 41, 41, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(254, 247, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(253, 242, 242, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'flat',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n ],\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport type { AriaButtonProps } from '@react-types/button'\nimport { mergeProps } from '@react-aria/utils'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { ScaleProp } from '@mirohq/design-system-types'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\n\nimport type { StyledButtonProps } from './button.styled'\nimport { StyledButton, StyledSpinnerBox } from './button.styled'\n\ntype ButtonPropsA11y = StyledButtonProps & AriaButtonProps\n\nexport interface ButtonProps\n extends Omit<ButtonPropsA11y, 'onClick' \| 'isDisabled' \| 'elementType'> {\n /*\n The content\n /\n children: ReactNode\n\n /\n Change the button color\n /\n variant?: StyledButtonProps['variant']\n\n /\n Change the button style\n /\n appearance?: StyledButtonProps['appearance']\n\n /\n Change the button height and font-size\n /\n size?: ScaleProp<StyledButtonProps['size']>\n\n /\n Make border-radius circle\n /\n rounded?: StyledButtonProps['rounded']\n\n /\n Add spinner and disable\n /\n loading?: StyledButtonProps['loading']\n\n /\n Make width 100%\n /\n fluid?: StyledButtonProps['fluid']\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 Button = React.forwardRef<\n ElementRef<typeof StyledButton \| 'a'>,\n ButtonProps\n>(\n (\n {\n variant = 'primary',\n appearance = 'filled',\n size = 'medium',\n loading = false,\n rounded = false,\n fluid = false,\n disabled = false,\n href,\n target,\n rel,\n children,\n onPress,\n onClick,\n asChild,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size']\n\n if (typeof size === 'string') {\n spinnerSize = ['x-small', 'xx-small'].includes(size) ? 'small' : 'medium'\n } else {\n spinnerSize = 'medium'\n }\n\n const _loading = loading === 'true' \|\| loading === true\n const shouldBeDisabled = disabled \|\| _loading\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: shouldBeDisabled,\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 Content = (\n <>\n {_loading && (\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n )}\n <span>{children}</span>\n </>\n )\n\n const tabIndexProp = shouldBeDisabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps } = useFocusRing()\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n focusProps\n )\n\n return (\n <StyledButton\n {...elementProps}\n variant={variant}\n appearance={appearance}\n size={size}\n loading={loading}\n rounded={rounded}\n fluid={fluid}\n disabled={shouldBeDisabled}\n asChild={asLink \|\| asChild}\n {...tabIndexProp}\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 {Content}\n </a>\n ) : (\n Content\n )}\n </StyledButton>\n )\n }\n)\n"],"names":["focus","styled","Primitive","React","useRef","useButton","useLink","Spinner","useFocusRing","mergeProps"],"mappings":"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"}

package/dist/module.js CHANGED Viewed

@@ -162,15 +162,15 @@ const StyledButton = styled(Primitive.button, {
       variant: "primary",
       appearance: "filled",
       css: {
-        color: "$white",
-        backgroundColor: "$blue-600",
+        color: "$font-cta-idle",
+        backgroundColor: "$background-cta-idle",
         ...focusFilled,
         "&:hover": {
           color: "$white",
-          backgroundColor: "$blue-700"
+          backgroundColor: "$background-cta-hover"
         },
         [pressedSelector]: {
-          backgroundColor: "$blue-900"
+          backgroundColor: "$background-cta-active"
         }
       }
     },
@@ -353,7 +353,6 @@ const Button = React.forwardRef(
       },
       refWithFallback
     );
-    const elementProps = mergeProps(restProps, asLink ? linkProps : buttonProps);
     const Content = /* @__PURE__ */ React.createElement(React.Fragment, null, _loading && /* @__PURE__ */ React.createElement(StyledSpinnerBox, null, /* @__PURE__ */ React.createElement(Spinner, {
       size: spinnerSize
     })), /* @__PURE__ */ React.createElement("span", null, children));
@@ -361,6 +360,11 @@ const Button = React.forwardRef(
       tabIndex: -1
     };
     const { isFocusVisible, focusProps } = useFocusRing();
+    const elementProps = mergeProps(
+      restProps,
+      asLink ? linkProps : buttonProps,
+      focusProps
+    );
     return /* @__PURE__ */ React.createElement(StyledButton, {
       ...elementProps,
       variant,
@@ -372,7 +376,6 @@ const Button = React.forwardRef(
       disabled: shouldBeDisabled,
       asChild: asLink || asChild,
       ...tabIndexProp,
-      ...focusProps,
       "data-pressed": isPressed ? "" : void 0,
       "data-focused": isFocusVisible ? "" : void 0,
       ref: refWithFallback

package/dist/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"module.js","sources":["../src/button.styled.ts","../src/button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const focusFilled = {\n '&[data-focused]': {\n boxShadow: `inset 0 0 0 1px white, ${focus.defaults['&:focus-visible'].boxShadow}`,\n },\n}\n\nexport const focusOutline = {\n '&[data-focused]': {\n ...focus.defaults,\n borderColor: 'transparent',\n },\n}\n\nconst focusDefault = {\n '&[data-focused]': focus.defaults,\n}\n\nconst pressedSelector = '&:active, &[data-pressed]'\n\nexport const StyledButton = styled(Primitive.button, {\n boxSizing: 'border-box',\n display: 'inline-block',\n outline: 'none',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n verticalAlign: 'middle',\n userSelect: 'none',\n fontFamily: 'inherit',\n fontStyle: 'normal',\n fontStretch: 'normal',\n letterSpacing: 'normal',\n fontWeight: 'normal',\n position: 'relative',\n cursor: 'pointer',\n border: 'none',\n textDecoration: 'none',\n backgroundColor: 'transparent',\n '&[disabled]': {\n pointerEvents: 'none',\n opacity: 0.4,\n },\n variants: {\n variant: {\n primary: {},\n secondary: {},\n danger: {},\n },\n appearance: {\n filled: {},\n outlined: {},\n flat: {},\n },\n size: {\n large: {\n padding: '14px 32px 18px 32px',\n fontSize: '20px',\n lineHeight: '28px',\n height: '60px',\n },\n medium: {\n padding: '11px 24px 13px 24px',\n fontSize: '16px',\n lineHeight: '24px',\n height: '48px',\n },\n small: {\n padding: '7px 16px 9px 16px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '36px',\n },\n 'x-small': {\n padding: '5px 12px 7px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '32px',\n },\n 'xx-small': {\n padding: '3px 12px',\n fontSize: '12px',\n lineHeight: '18px',\n height: '24px',\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n loading: {\n true: {\n '&[disabled]': {\n cursor: 'default',\n opacity: 1,\n pointerEvents: 'none',\n '& > span': {\n visibility: 'hidden',\n },\n },\n },\n },\n fluid: {\n true: {\n width: '100%',\n display: 'block',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n rounded: true,\n css: {\n padding: '10px 16px',\n height: '40px',\n },\n },\n {\n size: 'large',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'medium',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'x-small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'xx-small',\n rounded: false,\n css: {\n borderRadius: '$25',\n },\n },\n {\n variant: 'primary',\n appearance: 'filled',\n css: {\n color: '$white',\n backgroundColor: '$blue-600',\n ...focusFilled,\n '&:hover': {\n color: '$white',\n backgroundColor: '$blue-700',\n },\n [pressedSelector]: {\n backgroundColor: '$blue-900',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'outlined',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n border: '1px solid rgba(66, 98, 255, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(66, 98, 255, 1)',\n backgroundColor: 'rgba(244, 246, 255, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(240, 242, 255, 1)',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'flat',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n color: 'rgba(61, 81, 212, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'filled',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n ...focusFilled,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(240, 240, 243, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'outlined',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n border: '1px solid rgba(205, 204, 215, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'flat',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'filled',\n css: {\n color: '$white',\n backgroundColor: 'rgba(217, 41, 41, 1)',\n ...focusFilled,\n '&:hover': {\n backgroundColor: 'rgba(199, 20, 20, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(184, 13, 13, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'outlined',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n border: '1px solid rgba(217, 41, 41, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(254, 247, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(253, 242, 242, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'flat',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n ],\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport type { AriaButtonProps } from '@react-types/button'\nimport { mergeProps } from '@react-aria/utils'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { ScaleProp } from '@mirohq/design-system-types'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\n\nimport type { StyledButtonProps } from './button.styled'\nimport { StyledButton, StyledSpinnerBox } from './button.styled'\n\ntype ButtonPropsA11y = StyledButtonProps & AriaButtonProps\n\nexport interface ButtonProps\n extends Omit<ButtonPropsA11y, 'onClick' \| 'isDisabled' \| 'elementType'> {\n /*\n The content\n /\n children: ReactNode\n\n /\n Change the button color\n /\n variant?: StyledButtonProps['variant']\n\n /\n Change the button style\n /\n appearance?: StyledButtonProps['appearance']\n\n /\n Change the button height and font-size\n /\n size?: ScaleProp<StyledButtonProps['size']>\n\n /\n Make border-radius circle\n /\n rounded?: StyledButtonProps['rounded']\n\n /\n Add spinner and disable\n /\n loading?: StyledButtonProps['loading']\n\n /\n Make width 100%\n /\n fluid?: StyledButtonProps['fluid']\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 Button = React.forwardRef<\n ElementRef<typeof StyledButton \| 'a'>,\n ButtonProps\n>(\n (\n {\n variant = 'primary',\n appearance = 'filled',\n size = 'medium',\n loading = false,\n rounded = false,\n fluid = false,\n disabled = false,\n href,\n target,\n rel,\n children,\n onPress,\n onClick,\n asChild,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size']\n\n if (typeof size === 'string') {\n spinnerSize = ['x-small', 'xx-small'].includes(size) ? 'small' : 'medium'\n } else {\n spinnerSize = 'medium'\n }\n\n const _loading = loading === 'true' \|\| loading === true\n const shouldBeDisabled = disabled \|\| _loading\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: shouldBeDisabled,\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 Content = (\n <>\n {_loading && (\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n )}\n <span>{children}</span>\n </>\n )\n\n const tabIndexProp = shouldBeDisabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps } = useFocusRing()\n\n return (\n <StyledButton\n {...elementProps}\n variant={variant}\n appearance={appearance}\n size={size}\n loading={loading}\n rounded={rounded}\n fluid={fluid}\n disabled={shouldBeDisabled}\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 {Content}\n </a>\n ) : (\n Content\n )}\n </StyledButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"module.js","sources":["../src/button.styled.ts","../src/button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const focusFilled = {\n '&[data-focused]': {\n boxShadow: `inset 0 0 0 1px white, ${focus.defaults['&:focus-visible'].boxShadow}`,\n },\n}\n\nexport const focusOutline = {\n '&[data-focused]': {\n ...focus.defaults,\n borderColor: 'transparent',\n },\n}\n\nconst focusDefault = {\n '&[data-focused]': focus.defaults,\n}\n\nconst pressedSelector = '&:active, &[data-pressed]'\n\nexport const StyledButton = styled(Primitive.button, {\n boxSizing: 'border-box',\n display: 'inline-block',\n outline: 'none',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n verticalAlign: 'middle',\n userSelect: 'none',\n fontFamily: 'inherit',\n fontStyle: 'normal',\n fontStretch: 'normal',\n letterSpacing: 'normal',\n fontWeight: 'normal',\n position: 'relative',\n cursor: 'pointer',\n border: 'none',\n textDecoration: 'none',\n backgroundColor: 'transparent',\n '&[disabled]': {\n pointerEvents: 'none',\n opacity: 0.4,\n },\n variants: {\n variant: {\n primary: {},\n secondary: {},\n danger: {},\n },\n appearance: {\n filled: {},\n outlined: {},\n flat: {},\n },\n size: {\n large: {\n padding: '14px 32px 18px 32px',\n fontSize: '20px',\n lineHeight: '28px',\n height: '60px',\n },\n medium: {\n padding: '11px 24px 13px 24px',\n fontSize: '16px',\n lineHeight: '24px',\n height: '48px',\n },\n small: {\n padding: '7px 16px 9px 16px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '36px',\n },\n 'x-small': {\n padding: '5px 12px 7px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '32px',\n },\n 'xx-small': {\n padding: '3px 12px',\n fontSize: '12px',\n lineHeight: '18px',\n height: '24px',\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n loading: {\n true: {\n '&[disabled]': {\n cursor: 'default',\n opacity: 1,\n pointerEvents: 'none',\n '& > span': {\n visibility: 'hidden',\n },\n },\n },\n },\n fluid: {\n true: {\n width: '100%',\n display: 'block',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n rounded: true,\n css: {\n padding: '10px 16px',\n height: '40px',\n },\n },\n {\n size: 'large',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'medium',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'x-small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'xx-small',\n rounded: false,\n css: {\n borderRadius: '$25',\n },\n },\n {\n variant: 'primary',\n appearance: 'filled',\n css: {\n color: '$font-cta-idle',\n backgroundColor: '$background-cta-idle',\n ...focusFilled,\n '&:hover': {\n color: '$white',\n backgroundColor: '$background-cta-hover',\n },\n [pressedSelector]: {\n backgroundColor: '$background-cta-active',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'outlined',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n border: '1px solid rgba(66, 98, 255, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(66, 98, 255, 1)',\n backgroundColor: 'rgba(244, 246, 255, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(240, 242, 255, 1)',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'flat',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n color: 'rgba(61, 81, 212, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'filled',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n ...focusFilled,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(240, 240, 243, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'outlined',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n border: '1px solid rgba(205, 204, 215, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'flat',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'filled',\n css: {\n color: '$white',\n backgroundColor: 'rgba(217, 41, 41, 1)',\n ...focusFilled,\n '&:hover': {\n backgroundColor: 'rgba(199, 20, 20, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(184, 13, 13, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'outlined',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n border: '1px solid rgba(217, 41, 41, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(254, 247, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(253, 242, 242, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'flat',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n ],\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport type { AriaButtonProps } from '@react-types/button'\nimport { mergeProps } from '@react-aria/utils'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { ScaleProp } from '@mirohq/design-system-types'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\n\nimport type { StyledButtonProps } from './button.styled'\nimport { StyledButton, StyledSpinnerBox } from './button.styled'\n\ntype ButtonPropsA11y = StyledButtonProps & AriaButtonProps\n\nexport interface ButtonProps\n extends Omit<ButtonPropsA11y, 'onClick' \| 'isDisabled' \| 'elementType'> {\n /*\n The content\n /\n children: ReactNode\n\n /\n Change the button color\n /\n variant?: StyledButtonProps['variant']\n\n /\n Change the button style\n /\n appearance?: StyledButtonProps['appearance']\n\n /\n Change the button height and font-size\n /\n size?: ScaleProp<StyledButtonProps['size']>\n\n /\n Make border-radius circle\n /\n rounded?: StyledButtonProps['rounded']\n\n /\n Add spinner and disable\n /\n loading?: StyledButtonProps['loading']\n\n /\n Make width 100%\n /\n fluid?: StyledButtonProps['fluid']\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 Button = React.forwardRef<\n ElementRef<typeof StyledButton \| 'a'>,\n ButtonProps\n>(\n (\n {\n variant = 'primary',\n appearance = 'filled',\n size = 'medium',\n loading = false,\n rounded = false,\n fluid = false,\n disabled = false,\n href,\n target,\n rel,\n children,\n onPress,\n onClick,\n asChild,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size']\n\n if (typeof size === 'string') {\n spinnerSize = ['x-small', 'xx-small'].includes(size) ? 'small' : 'medium'\n } else {\n spinnerSize = 'medium'\n }\n\n const _loading = loading === 'true' \|\| loading === true\n const shouldBeDisabled = disabled \|\| _loading\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: shouldBeDisabled,\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 Content = (\n <>\n {_loading && (\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n )}\n <span>{children}</span>\n </>\n )\n\n const tabIndexProp = shouldBeDisabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps } = useFocusRing()\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n focusProps\n )\n\n return (\n <StyledButton\n {...elementProps}\n variant={variant}\n appearance={appearance}\n size={size}\n loading={loading}\n rounded={rounded}\n fluid={fluid}\n disabled={shouldBeDisabled}\n asChild={asLink \|\| asChild}\n {...tabIndexProp}\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 {Content}\n </a>\n ) : (\n Content\n )}\n </StyledButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts CHANGED Viewed

@@ -29,141 +29,80 @@ declare const StyledButton: react.ForwardRefExoticComponent<Pick<Omit<{
         readonly lg: "4px";
     };
     colors: {
-        readonly 'blue-100': any;
-        readonly 'blue-200': any;
-        readonly 'blue-300': any;
-        readonly 'blue-400': any;
-        readonly 'blue-500': any;
-        readonly 'blue-600': any;
-        readonly 'blue-700': any;
-        readonly 'blue-800': any;
-        readonly 'blue-900': any;
-        readonly 'blue-1000': any;
-        readonly 'gray-100': any;
-        readonly 'gray-200': any;
-        readonly 'gray-300': any;
-        readonly 'gray-400': any;
-        readonly 'gray-500': any;
-        readonly 'gray-600': any;
-        readonly 'gray-700': any;
-        readonly 'gray-800': any;
-        readonly 'gray-900': any;
-        readonly 'indigo-100': any;
-        readonly 'indigo-200': any;
-        readonly 'indigo-300': any;
-        readonly 'indigo-400': any;
-        readonly 'indigo-500': any;
-        readonly 'indigo-600': any;
-        readonly 'indigo-700': any;
-        readonly 'indigo-800': any;
-        readonly 'indigo-900': any;
-        readonly 'red-100': any;
-        readonly 'red-200': any;
-        readonly 'red-300': any;
-        readonly 'red-400': any;
-        readonly 'red-500': any;
-        readonly 'red-600': any;
-        readonly 'red-700': any;
-        readonly 'red-800': any;
-        readonly 'red-900': any;
-        readonly 'yellow-100': any;
-        readonly 'yellow-200': any;
-        readonly 'yellow-300': any;
-        readonly 'yellow-400': any;
-        readonly 'yellow-500': any;
-        readonly 'yellow-600': any;
-        readonly 'yellow-700': any;
-        readonly 'yellow-800': any;
-        readonly 'yellow-900': any;
-        readonly 'green-100': any;
-        readonly 'green-200': any;
-        readonly 'green-300': any;
-        readonly 'green-400': any;
-        readonly 'green-500': any;
-        readonly 'green-600': any;
-        readonly 'green-700': any;
-        readonly 'green-800': any;
-        readonly 'green-900': any;
         readonly black: any;
-        readonly white: any;
+        readonly 'blue-10': any;
+        readonly 'blue-20': any;
+        readonly 'blue-50': any;
+        readonly 'blue-60': any;
+        readonly 'blue-70': any;
+        readonly 'blue-80': any;
+        readonly 'gray-20': any;
+        readonly 'gray-30': any;
+        readonly 'gray-40': any;
+        readonly 'gray-50': any;
+        readonly 'green-70': any;
+        readonly 'indigo-20': any;
+        readonly 'indigo-30': any;
+        readonly 'indigo-50': any;
+        readonly 'indigo-70': any;
+        readonly 'indigo-90': any;
+        readonly 'pink-20': any;
+        readonly 'pink-50': any;
+        readonly 'red-10': any;
+        readonly 'red-20': any;
+        readonly 'red-30': any;
+        readonly 'red-50': any;
+        readonly 'red-60': any;
         readonly transparent: any;
-        readonly 'background-neutrals'?: any;
-        readonly 'background-neutrals-body'?: any;
-        readonly 'background-neutrals-container'?: any;
-        readonly 'background-neutrals-inverted'?: any;
-        readonly 'background-neutrals-subtle'?: any;
-        readonly 'background-neutrals-subtle-hover'?: any;
-        readonly 'background-neutrals-subtle-active'?: any;
-        readonly 'background-neutrals-disabled'?: any;
-        readonly 'background-neutrals-disabled-controls'?: any;
-        readonly 'background-neutrals-scrolls'?: any;
-        readonly 'background-neutrals-inactive'?: any;
-        readonly 'background-neutrals-inactive-hover'?: any;
-        readonly 'background-primary-prominent'?: any;
-        readonly 'background-primary-prominent-hover'?: any;
-        readonly 'background-primary-prominent-active'?: any;
-        readonly 'background-primary-prominent-selected'?: any;
-        readonly 'background-primary-subtle'?: any;
-        readonly 'background-primary-subtle-hover'?: any;
-        readonly 'background-primary-subtle-active'?: any;
-        readonly 'background-primary-subtle-selected'?: any;
-        readonly 'background-danger-prominent'?: any;
-        readonly 'background-danger-prominent-hover'?: any;
-        readonly 'background-danger-prominent-active'?: any;
-        readonly 'background-danger'?: any;
+        readonly white: any;
+        readonly 'yellow-20': any;
+        readonly 'yellow-60': any;
+        readonly 'background-cta-active'?: any;
+        readonly 'background-cta-disabled'?: any;
+        readonly 'background-cta-hover'?: any;
+        readonly 'background-cta-idle'?: any;
+        readonly 'background-danger-active'?: any;
         readonly 'background-danger-hover'?: any;
-        readonly 'background-success'?: any;
-        readonly 'background-warning-subtle'?: any;
-        readonly 'background-warning-prominent'?: any;
-        readonly 'text-neutrals-inverted'?: any;
-        readonly 'text-neutrals'?: any;
-        readonly 'text-neutrals-secondary'?: any;
-        readonly 'text-neutrals-placeholder-only'?: any;
-        readonly 'text-neutrals-placeholder'?: any;
-        readonly 'text-neutrals-disabled'?: any;
-        readonly 'text-primary-inverted'?: any;
-        readonly 'text-primary'?: any;
-        readonly 'text-primary-hover'?: any;
-        readonly 'text-primary-active'?: any;
-        readonly 'text-primary-selected'?: any;
-        readonly 'text-danger-inverted'?: any;
-        readonly 'text-danger'?: any;
-        readonly 'text-danger-hover'?: any;
-        readonly 'text-danger-active'?: any;
-        readonly 'text-success'?: any;
-        readonly 'text-warning'?: any;
-        readonly 'icon-neutrals-inverted'?: any;
-        readonly 'icon-neutrals'?: any;
-        readonly 'icon-neutrals-secondary'?: any;
-        readonly 'icon-neutrals-disabled'?: any;
-        readonly 'icon-neutrals-search'?: any;
-        readonly 'icon-primary-inverted'?: any;
-        readonly 'icon-primary'?: any;
-        readonly 'icon-primary-hover'?: any;
-        readonly 'icon-primary-active'?: any;
-        readonly 'icon-primary-selected'?: any;
-        readonly 'icon-danger-inverted'?: any;
-        readonly 'icon-danger'?: any;
-        readonly 'icon-danger-hover'?: any;
-        readonly 'icon-danger-active'?: any;
-        readonly 'icon-success-inverted'?: any;
-        readonly 'icon-success'?: any;
-        readonly 'icon-warning'?: any;
-        readonly 'border-neutrals'?: any;
-        readonly 'border-neutrals-hover'?: any;
-        readonly 'border-neutrals-active'?: any;
-        readonly 'border-neutrals-disabled'?: any;
-        readonly 'border-neutrals-controls'?: any;
-        readonly 'border-neutrals-controls-disabled'?: any;
-        readonly 'border-neutrals-subtle'?: any;
-        readonly 'border-neutrals-inverted'?: any;
-        readonly 'border-primary'?: any;
-        readonly 'border-primary-hover'?: any;
-        readonly 'border-primary-active'?: any;
-        readonly 'border-primary-inverted'?: any;
-        readonly 'border-danger'?: any;
-        readonly 'border-success'?: any;
-        readonly 'border-warning'?: any;
+        readonly 'background-danger-idle'?: any;
+        readonly 'background-default-active'?: any;
+        readonly 'background-default-disabled'?: any;
+        readonly 'background-default-hover'?: any;
+        readonly 'background-default-idle'?: any;
+        readonly 'background-default-selected'?: any;
+        readonly 'background-default-selected-active'?: any;
+        readonly 'background-info-idle'?: any;
+        readonly 'background-primary'?: any;
+        readonly 'background-secondary'?: any;
+        readonly 'background-success-idle'?: any;
+        readonly 'background-warning-idle'?: any;
+        readonly 'border-cta-idle'?: any;
+        readonly 'border-default-active'?: any;
+        readonly 'border-default-error'?: any;
+        readonly 'border-default-hover'?: any;
+        readonly 'border-default-idle'?: any;
+        readonly 'border-default-selected'?: any;
+        readonly 'canvas-primary'?: any;
+        readonly 'divider-default'?: any;
+        readonly 'focus-ring-default'?: any;
+        readonly 'font-cta-idle'?: any;
+        readonly 'font-default-active'?: any;
+        readonly 'font-default-disabled'?: any;
+        readonly 'font-default-error'?: any;
+        readonly 'font-default-hover'?: any;
+        readonly 'font-default-idle'?: any;
+        readonly 'font-default-selected'?: any;
+        readonly 'font-default-visited'?: any;
+        readonly 'font-primary'?: any;
+        readonly 'font-secondary'?: any;
+        readonly 'font-tertiary'?: any;
+        readonly 'icon-cta-idle'?: any;
+        readonly 'icon-default'?: any;
+        readonly 'icon-default-active'?: any;
+        readonly 'icon-default-disabled'?: any;
+        readonly 'icon-default-error'?: any;
+        readonly 'icon-default-hover'?: any;
+        readonly 'icon-default-idle'?: any;
+        readonly 'icon-default-selected'?: any;
     };
     'font-sizes': {
         readonly 150: "0.75rem";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-button",
-  "version": "2.0.14-colors.0",
+  "version": "2.0.15",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -32,14 +32,14 @@
     "@react-aria/utils": "^3.13.0",
     "@react-types/button": "^3.5.0",
     "@mirohq/design-system-primitive": "^1.0.4",
-    "@mirohq/design-system-spinner": "^1.0.11-colors.0",
-    "@mirohq/design-system-stitches": "^2.0.10-colors.0",
-    "@mirohq/design-system-styles": "^1.0.10-colors.0",
+    "@mirohq/design-system-spinner": "^1.0.11",
+    "@mirohq/design-system-stitches": "^2.0.10",
     "@mirohq/design-system-types": "^0.2.0",
+    "@mirohq/design-system-styles": "^1.0.10",
     "@mirohq/design-system-utils": "^0.10.0"
   },
   "devDependencies": {
-    "@mirohq/design-system-flex": "^2.0.11-colors.0"
+    "@mirohq/design-system-flex": "^2.0.11"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",