@mirohq/design-system-base-button 1.2.17-canvas-26.0 → 1.2.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.js CHANGED
@@ -20,11 +20,8 @@ const StyledBaseButton = designSystemStitches.styled(designSystemPrimitive.Primi
20
20
  display: "inline-flex",
21
21
  alignItems: "center",
22
22
  boxSizing: "border-box",
23
- borderRadius: "$button",
23
+ borderRadius: "$50",
24
24
  cursor: "pointer",
25
- "@media (prefers-reduced-motion: no-preference)": {
26
- transition: "background-color 120ms ease, border-color 120ms ease, color 120ms ease"
27
- },
28
25
  "&[disabled]": {
29
26
  pointerEvents: "none"
30
27
  },
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$button',\n cursor: 'pointer',\n\n '@media (prefers-reduced-motion: no-preference)': {\n transition:\n 'background-color 120ms ease, border-color 120ms ease, color 120ms ease',\n },\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target'\ntype LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>\nexport type BaseButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents &\n LinkProps\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps\n\n const ariaDisabledProps = useAriaDisabled({\n ariaDisabled,\n ...restProps,\n })\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","useAriaDisabled","usePress","booleanify","useHover","mergeProps","jsx"],"mappings":";;;;;;;;;;;;AAIO,MAAM,KAAA,GAAQ;AAAA,EACnB,MAAA,EAAQ,IAAA;AAAA,EACR,KAAA,EAAO,KAAA;AAAA,EACP,MAAA,EAAQ;AACV;AAEO,MAAM,gBAAA,GAAmBA,2BAAA,CAAOC,+BAAA,CAAU,MAAA,EAAQ;AAAA,EACvD,GAAA,EAAK,OAAA;AAAA,EACL,OAAA,EAAS,aAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,SAAA,EAAW,YAAA;AAAA,EACX,YAAA,EAAc,SAAA;AAAA,EACd,MAAA,EAAQ,SAAA;AAAA,EAER,gDAAA,EAAkD;AAAA,IAChD,UAAA,EACE;AAAA,GACJ;AAAA,EAEA,aAAA,EAAe;AAAA,IACb,aAAA,EAAe;AAAA,GACjB;AAAA,EAEA,kBAAA,EAAoB;AAAA,IAClB,MAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;;ACJM,MAAM,aAAa,KAAA,CAAM,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA,GAAW,KAAA;AAAA,IACX,eAAA,EAAiB,YAAA;AAAA,IACjB,QAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,UAAA,KACG;AACH,IAAA,MAAM,MAAA,GAAS,MAAA,IAAU,SAAA,IAAa,SAAA,CAAU,IAAA,KAAS,MAAA;AACzD,IAAA,MAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,GAAA,GAAM,IAAG,GAAI,SAAA;AAEnC,IAAA,MAAM,oBAAoBC,2CAAA,CAAgB;AAAA,MACxC,YAAA;AAAA,MACA,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,6BAAA,CAAS;AAAA,MAC9B,mBAAA,EAAqB,IAAA;AAAA,MACrB,QAAA,EAAU,QAAA,IAAYC,4BAAA,CAAW,YAAY,CAAA;AAAA,MAC7C,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAU,GAAIC,qBAAA,CAAS;AAAA,MACzC,YAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,YAAA,GAAeC,gBAAA,CAAW,UAAA,EAAY,UAAU,CAAA;AAEtD,IAAA,IAAI,OAAA,GAA8B,GAAA;AAElC,IAAA,IAAI,MAAA,IAAU,WAAW,QAAA,EAAU;AACjC,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAA,CAAS,YAAY,CAAA,EAAG;AACnC,QAAA,OAAA,GAAU,aAAA,CAAc,MAAA,CAAA,OAAA,CAAA;AAAA,MAC1B;AAEA,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAA,CAAS,UAAU,CAAA,EAAG;AACjC,QAAA,OAAA,GAAU,WAAA,CAAY,MAAA,CAAA,OAAA,CAAA;AAAA,MACxB;AAEA,MAAA,OAAA,GAAU,QAAQ,IAAA,EAAK;AAAA,IACzB;AAEA,IAAA,IAAI,YAAY,EAAA,EAAI;AAClB,MAAA,OAAA,GAAU,MAAA;AAAA,IACZ;AAEA,IAAA,MAAM,aAAA,GACJ,OAAO,QAAA,KAAa,QAAA,GAChB;AAAA,MACE;AAAA,QAEF,EAAC;AAEP,IAAA,IAAI,QAAA,KAAa,MAAA,IAAU,OAAA,KAAY,IAAA,CAAA,EAAO;AAC5C,MAAA,aAAA,CAAc,QAAA,GAAW,EAAA;AAAA,IAC3B;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACH,GAAG,aAAA;AAAA,QACJ,cAAA,EAAc,SAAA,GAAY,EAAA,GAAM,YAAA,CAAqB,cAAc,CAAA;AAAA,QACnE,SAAS,MAAA,IAAU,OAAA;AAAA,QACnB,QAAA;AAAA,QACA,IAAA,EAAM,IAAA,IAAA,IAAA,GAAA,IAAA,GAAS,OAAA,KAAY,IAAA,GAAO,QAAA,GAAW,MAAA;AAAA,QAC7C,eAAA,EAAeH,4BAAA,CAAW,YAAY,CAAA,GAAI,MAAA,GAAS,YAAA;AAAA,QAGnD,GAAA,EAAK,UAAA;AAAA,QAEJ,QAAA,EAAA,MAAA,mBACCG,cAAA;AAAA,UAACN,+BAAA,CAAU,CAAA;AAAA,UAAV;AAAA,YACC,IAAA;AAAA,YACA,MAAA;AAAA,YACA,GAAA,EAAK,OAAA;AAAA,YACL,OAAA;AAAA,YAEC;AAAA;AAAA,SACH,GAEA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target'\ntype LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>\nexport type BaseButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents &\n LinkProps\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps\n\n const ariaDisabledProps = useAriaDisabled({\n ariaDisabled,\n ...restProps,\n })\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","useAriaDisabled","usePress","booleanify","useHover","mergeProps","jsx"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -18,11 +18,8 @@ const StyledBaseButton = styled(Primitive.button, {
18
18
  display: "inline-flex",
19
19
  alignItems: "center",
20
20
  boxSizing: "border-box",
21
- borderRadius: "$button",
21
+ borderRadius: "$50",
22
22
  cursor: "pointer",
23
- "@media (prefers-reduced-motion: no-preference)": {
24
- transition: "background-color 120ms ease, border-color 120ms ease, color 120ms ease"
25
- },
26
23
  "&[disabled]": {
27
24
  pointerEvents: "none"
28
25
  },
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$button',\n cursor: 'pointer',\n\n '@media (prefers-reduced-motion: no-preference)': {\n transition:\n 'background-color 120ms ease, border-color 120ms ease, color 120ms ease',\n },\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target'\ntype LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>\nexport type BaseButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents &\n LinkProps\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps\n\n const ariaDisabledProps = useAriaDisabled({\n ariaDisabled,\n ...restProps,\n })\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target'\ntype LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>\nexport type BaseButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents &\n LinkProps\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps\n\n const ariaDisabledProps = useAriaDisabled({\n ariaDisabled,\n ...restProps,\n })\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-button",
3
- "version": "1.2.17-canvas-26.0",
3
+ "version": "1.2.17",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -30,7 +30,7 @@
30
30
  "@react-aria/utils": "^3.31.0",
31
31
  "@react-types/shared": "^3.16.0",
32
32
  "@mirohq/design-system-primitive": "^2.2.1",
33
- "@mirohq/design-system-stitches": "^3.3.13",
33
+ "@mirohq/design-system-stitches": "^3.3.14",
34
34
  "@mirohq/design-system-use-aria-disabled": "^1.1.4",
35
35
  "@mirohq/design-system-use-press": "^1.1.4",
36
36
  "@mirohq/design-system-utils": "^1.3.0"