@mirohq/design-system-link 2.3.0 → 2.4.0-fix-stitches-types.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.
- package/dist/main.js +1 -7
- package/dist/main.js.map +1 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +27 -7
- package/package.json +6 -6
package/dist/main.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var utils = require('@react-aria/utils');
|
|
@@ -12,10 +10,6 @@ var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
|
12
10
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
13
11
|
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
14
12
|
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
|
-
|
|
19
13
|
const TRANSITION_TIME = "250ms";
|
|
20
14
|
const activeSelector = "&:active, &[data-pressed]";
|
|
21
15
|
const hoverSelector = "&:hover, &[data-hovered]";
|
|
@@ -68,7 +62,7 @@ const StyledLink = designSystemStitches.styled(designSystemPrimitive.Primitive.a
|
|
|
68
62
|
}
|
|
69
63
|
});
|
|
70
64
|
|
|
71
|
-
const Link =
|
|
65
|
+
const Link = React.forwardRef(
|
|
72
66
|
({
|
|
73
67
|
variant = "primary",
|
|
74
68
|
disabled = false,
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/link.styled.ts","../src/link.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\nconst TRANSITION_TIME = '250ms'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst hoverSelector = '&:hover, &[data-hovered]'\n\nexport const StyledLink = styled(Primitive.a, {\n textDecoration: 'none',\n border: 0,\n borderBottom: '1px solid currentColor',\n cursor: 'pointer',\n transition: `border ${TRANSITION_TIME}, color ${TRANSITION_TIME}`,\n paddingX: '2px',\n\n ...focus.css({\n boxShadow: '$focus',\n outline: 'none',\n borderRadius: '2px',\n }),\n\n variants: {\n variant: {\n primary: {\n color: '$text-primary',\n borderColor: '$border-primary',\n [hoverSelector]: {\n color: '$text-primary-hover',\n borderColor: '$border-primary-hover',\n },\n [activeSelector]: {\n color: '$text-primary-active',\n borderColor: '$border-primary-active',\n },\n },\n secondary: {\n color: '$text-neutrals-subtle',\n borderColor: '$border-neutrals-text-subtle',\n [hoverSelector]: {\n color: '$text-neutrals-subtle-hover',\n borderColor: '$border-neutrals-text-subtle-hover',\n },\n [activeSelector]: {\n color: '$text-neutrals-subtle-active',\n borderColor: '$border-neutrals-text-subtle-active',\n },\n },\n },\n asButton: {\n true: {\n background: 'none',\n paddingY: '$0',\n font: 'inherit',\n },\n },\n },\n})\n\nexport type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>\n","import React from 'react'\nimport type { ElementRef, ReactNode, DOMAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } 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'\n\nimport type { StyledLinkProps } from './link.styled'\nimport { StyledLink } from './link.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\nexport interface LinkProps\n extends Omit<StyledLinkProps, 'asButton'>,\n PressProps,\n HoverEvents {\n /**\n * The content.\n */\n children: ReactNode\n\n /**\n * Change the link appearance.\n * @default 'primary'\n */\n variant?: StyledLinkProps['variant']\n}\n\nexport const Link = React.forwardRef<ElementRef<'a' | 'button'>, LinkProps>(\n (\n {\n variant = 'primary',\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n rel = '',\n target,\n href,\n onClick,\n onPress,\n children,\n tabIndex,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asButton = href === undefined && Boolean(onPress ?? onClick)\n let elementProps: DOMAttributes<any> = { ...restProps, onClick }\n\n if (disabled || booleanify(ariaDisabled)) {\n elementProps = removeEventProps(\n elementProps,\n disabled ? [] : ['onBlur', 'onFocus']\n )\n }\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n onPress,\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (!asButton && 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 return (\n <StyledLink\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asButton || asChild}\n asButton={asButton}\n href={href}\n variant={variant}\n disabled={disabled}\n aria-disabled={\n disabled || booleanify(ariaDisabled) ? 'true' : undefined\n }\n tabIndex={\n tabIndex != null\n ? tabIndex\n : disabled\n ? -1\n : asChild === true || asButton\n ? 0\n : undefined\n }\n rel={relProp}\n target={target}\n // Link can be an <button> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {/*\n why not use a <button />?\n buttons break the read flow see the link\n https://codepen.io/ivanbanov/pen/WNVXMMx\n */}\n {asButton ? <span role='button'>{children}</span> : children}\n </StyledLink>\n )\n }\n)\n"],"names":["styled","Primitive","focus","
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/link.styled.ts","../src/link.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\nconst TRANSITION_TIME = '250ms'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst hoverSelector = '&:hover, &[data-hovered]'\n\nexport const StyledLink = styled(Primitive.a, {\n textDecoration: 'none',\n border: 0,\n borderBottom: '1px solid currentColor',\n cursor: 'pointer',\n transition: `border ${TRANSITION_TIME}, color ${TRANSITION_TIME}`,\n paddingX: '2px',\n\n ...focus.css({\n boxShadow: '$focus',\n outline: 'none',\n borderRadius: '2px',\n }),\n\n variants: {\n variant: {\n primary: {\n color: '$text-primary',\n borderColor: '$border-primary',\n [hoverSelector]: {\n color: '$text-primary-hover',\n borderColor: '$border-primary-hover',\n },\n [activeSelector]: {\n color: '$text-primary-active',\n borderColor: '$border-primary-active',\n },\n },\n secondary: {\n color: '$text-neutrals-subtle',\n borderColor: '$border-neutrals-text-subtle',\n [hoverSelector]: {\n color: '$text-neutrals-subtle-hover',\n borderColor: '$border-neutrals-text-subtle-hover',\n },\n [activeSelector]: {\n color: '$text-neutrals-subtle-active',\n borderColor: '$border-neutrals-text-subtle-active',\n },\n },\n },\n asButton: {\n true: {\n background: 'none',\n paddingY: '$0',\n font: 'inherit',\n },\n },\n },\n})\n\nexport type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>\n","import React from 'react'\nimport type { ElementRef, ReactNode, DOMAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } 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'\n\nimport type { StyledLinkProps } from './link.styled'\nimport { StyledLink } from './link.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\nexport interface LinkProps\n extends Omit<StyledLinkProps, 'asButton'>,\n PressProps,\n HoverEvents {\n /**\n * The content.\n */\n children: ReactNode\n\n /**\n * Change the link appearance.\n * @default 'primary'\n */\n variant?: StyledLinkProps['variant']\n}\n\nexport const Link = React.forwardRef<ElementRef<'a' | 'button'>, LinkProps>(\n (\n {\n variant = 'primary',\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n rel = '',\n target,\n href,\n onClick,\n onPress,\n children,\n tabIndex,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asButton = href === undefined && Boolean(onPress ?? onClick)\n let elementProps: DOMAttributes<any> = { ...restProps, onClick }\n\n if (disabled || booleanify(ariaDisabled)) {\n elementProps = removeEventProps(\n elementProps,\n disabled ? [] : ['onBlur', 'onFocus']\n )\n }\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n onPress,\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (!asButton && 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 return (\n <StyledLink\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asButton || asChild}\n asButton={asButton}\n href={href}\n variant={variant}\n disabled={disabled}\n aria-disabled={\n disabled || booleanify(ariaDisabled) ? 'true' : undefined\n }\n tabIndex={\n tabIndex != null\n ? tabIndex\n : disabled\n ? -1\n : asChild === true || asButton\n ? 0\n : undefined\n }\n rel={relProp}\n target={target}\n // Link can be an <button> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {/*\n why not use a <button />?\n buttons break the read flow see the link\n https://codepen.io/ivanbanov/pen/WNVXMMx\n */}\n {asButton ? <span role='button'>{children}</span> : children}\n </StyledLink>\n )\n }\n)\n"],"names":["styled","Primitive","focus","booleanify","removeEventProps","usePress","useHover","mergeProps","jsx"],"mappings":"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"}
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/link.styled.ts","../src/link.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\nconst TRANSITION_TIME = '250ms'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst hoverSelector = '&:hover, &[data-hovered]'\n\nexport const StyledLink = styled(Primitive.a, {\n textDecoration: 'none',\n border: 0,\n borderBottom: '1px solid currentColor',\n cursor: 'pointer',\n transition: `border ${TRANSITION_TIME}, color ${TRANSITION_TIME}`,\n paddingX: '2px',\n\n ...focus.css({\n boxShadow: '$focus',\n outline: 'none',\n borderRadius: '2px',\n }),\n\n variants: {\n variant: {\n primary: {\n color: '$text-primary',\n borderColor: '$border-primary',\n [hoverSelector]: {\n color: '$text-primary-hover',\n borderColor: '$border-primary-hover',\n },\n [activeSelector]: {\n color: '$text-primary-active',\n borderColor: '$border-primary-active',\n },\n },\n secondary: {\n color: '$text-neutrals-subtle',\n borderColor: '$border-neutrals-text-subtle',\n [hoverSelector]: {\n color: '$text-neutrals-subtle-hover',\n borderColor: '$border-neutrals-text-subtle-hover',\n },\n [activeSelector]: {\n color: '$text-neutrals-subtle-active',\n borderColor: '$border-neutrals-text-subtle-active',\n },\n },\n },\n asButton: {\n true: {\n background: 'none',\n paddingY: '$0',\n font: 'inherit',\n },\n },\n },\n})\n\nexport type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>\n","import React from 'react'\nimport type { ElementRef, ReactNode, DOMAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } 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'\n\nimport type { StyledLinkProps } from './link.styled'\nimport { StyledLink } from './link.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\nexport interface LinkProps\n extends Omit<StyledLinkProps, 'asButton'>,\n PressProps,\n HoverEvents {\n /**\n * The content.\n */\n children: ReactNode\n\n /**\n * Change the link appearance.\n * @default 'primary'\n */\n variant?: StyledLinkProps['variant']\n}\n\nexport const Link = React.forwardRef<ElementRef<'a' | 'button'>, LinkProps>(\n (\n {\n variant = 'primary',\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n rel = '',\n target,\n href,\n onClick,\n onPress,\n children,\n tabIndex,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asButton = href === undefined && Boolean(onPress ?? onClick)\n let elementProps: DOMAttributes<any> = { ...restProps, onClick }\n\n if (disabled || booleanify(ariaDisabled)) {\n elementProps = removeEventProps(\n elementProps,\n disabled ? [] : ['onBlur', 'onFocus']\n )\n }\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n onPress,\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (!asButton && 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 return (\n <StyledLink\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asButton || asChild}\n asButton={asButton}\n href={href}\n variant={variant}\n disabled={disabled}\n aria-disabled={\n disabled || booleanify(ariaDisabled) ? 'true' : undefined\n }\n tabIndex={\n tabIndex != null\n ? tabIndex\n : disabled\n ? -1\n : asChild === true || asButton\n ? 0\n : undefined\n }\n rel={relProp}\n target={target}\n // Link can be an <button> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {/*\n why not use a <button />?\n buttons break the read flow see the link\n https://codepen.io/ivanbanov/pen/WNVXMMx\n */}\n {asButton ? <span role='button'>{children}</span> : children}\n </StyledLink>\n )\n }\n)\n"],"names":[],"mappings":";;;;;;;;;;AAKA,MAAM,
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/link.styled.ts","../src/link.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\nconst TRANSITION_TIME = '250ms'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst hoverSelector = '&:hover, &[data-hovered]'\n\nexport const StyledLink = styled(Primitive.a, {\n textDecoration: 'none',\n border: 0,\n borderBottom: '1px solid currentColor',\n cursor: 'pointer',\n transition: `border ${TRANSITION_TIME}, color ${TRANSITION_TIME}`,\n paddingX: '2px',\n\n ...focus.css({\n boxShadow: '$focus',\n outline: 'none',\n borderRadius: '2px',\n }),\n\n variants: {\n variant: {\n primary: {\n color: '$text-primary',\n borderColor: '$border-primary',\n [hoverSelector]: {\n color: '$text-primary-hover',\n borderColor: '$border-primary-hover',\n },\n [activeSelector]: {\n color: '$text-primary-active',\n borderColor: '$border-primary-active',\n },\n },\n secondary: {\n color: '$text-neutrals-subtle',\n borderColor: '$border-neutrals-text-subtle',\n [hoverSelector]: {\n color: '$text-neutrals-subtle-hover',\n borderColor: '$border-neutrals-text-subtle-hover',\n },\n [activeSelector]: {\n color: '$text-neutrals-subtle-active',\n borderColor: '$border-neutrals-text-subtle-active',\n },\n },\n },\n asButton: {\n true: {\n background: 'none',\n paddingY: '$0',\n font: 'inherit',\n },\n },\n },\n})\n\nexport type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>\n","import React from 'react'\nimport type { ElementRef, ReactNode, DOMAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } 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'\n\nimport type { StyledLinkProps } from './link.styled'\nimport { StyledLink } from './link.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\nexport interface LinkProps\n extends Omit<StyledLinkProps, 'asButton'>,\n PressProps,\n HoverEvents {\n /**\n * The content.\n */\n children: ReactNode\n\n /**\n * Change the link appearance.\n * @default 'primary'\n */\n variant?: StyledLinkProps['variant']\n}\n\nexport const Link = React.forwardRef<ElementRef<'a' | 'button'>, LinkProps>(\n (\n {\n variant = 'primary',\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n rel = '',\n target,\n href,\n onClick,\n onPress,\n children,\n tabIndex,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asButton = href === undefined && Boolean(onPress ?? onClick)\n let elementProps: DOMAttributes<any> = { ...restProps, onClick }\n\n if (disabled || booleanify(ariaDisabled)) {\n elementProps = removeEventProps(\n elementProps,\n disabled ? [] : ['onBlur', 'onFocus']\n )\n }\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n onPress,\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (!asButton && 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 return (\n <StyledLink\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asButton || asChild}\n asButton={asButton}\n href={href}\n variant={variant}\n disabled={disabled}\n aria-disabled={\n disabled || booleanify(ariaDisabled) ? 'true' : undefined\n }\n tabIndex={\n tabIndex != null\n ? tabIndex\n : disabled\n ? -1\n : asChild === true || asButton\n ? 0\n : undefined\n }\n rel={relProp}\n target={target}\n // Link can be an <button> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {/*\n why not use a <button />?\n buttons break the read flow see the link\n https://codepen.io/ivanbanov/pen/WNVXMMx\n */}\n {asButton ? <span role='button'>{children}</span> : children}\n </StyledLink>\n )\n }\n)\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,15 +1,34 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
3
3
|
import { HoverEvents } from '@react-types/shared';
|
|
4
4
|
import { PressProps } from '@mirohq/design-system-use-press';
|
|
5
|
-
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
6
5
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
7
6
|
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
/* Utilities */
|
|
9
|
+
/* ========================================================================== */
|
|
10
|
+
|
|
11
|
+
/** Returns a string with the given prefix followed by the given values. */
|
|
12
|
+
type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
|
|
13
|
+
|
|
14
|
+
type TransformProps<Props, Media> = {
|
|
15
|
+
[K in keyof Props]: (
|
|
16
|
+
| Props[K]
|
|
17
|
+
| (
|
|
18
|
+
& {
|
|
19
|
+
[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
|
|
20
|
+
}
|
|
21
|
+
& {
|
|
22
|
+
[KMedia in string]: Props[K]
|
|
23
|
+
}
|
|
24
|
+
)
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
declare const StyledLink: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"a">>>, "variant" | "asButton"> & TransformProps<{
|
|
10
29
|
variant?: "primary" | "secondary" | undefined;
|
|
11
30
|
asButton?: boolean | "true" | undefined;
|
|
12
|
-
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> &
|
|
31
|
+
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLAnchorElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"a">>, {
|
|
13
32
|
variant?: "primary" | "secondary" | undefined;
|
|
14
33
|
asButton?: boolean | "true" | undefined;
|
|
15
34
|
}, {}>;
|
|
@@ -26,6 +45,7 @@ interface LinkProps extends Omit<StyledLinkProps, 'asButton'>, PressProps, Hover
|
|
|
26
45
|
*/
|
|
27
46
|
variant?: StyledLinkProps['variant'];
|
|
28
47
|
}
|
|
29
|
-
declare const Link:
|
|
48
|
+
declare const Link: React__default.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
30
49
|
|
|
31
|
-
export { Link
|
|
50
|
+
export { Link };
|
|
51
|
+
export type { LinkProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-link",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0-fix-stitches-types.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
"@react-aria/interactions": "^3.13.0",
|
|
30
30
|
"@react-aria/utils": "^3.31.0",
|
|
31
31
|
"@react-types/shared": "^3.16.0",
|
|
32
|
-
"@mirohq/design-system-primitive": "^2.
|
|
33
|
-
"@mirohq/design-system-stitches": "^3.1
|
|
34
|
-
"@mirohq/design-system-
|
|
35
|
-
"@mirohq/design-system-
|
|
36
|
-
"@mirohq/design-system-
|
|
32
|
+
"@mirohq/design-system-primitive": "^2.2.0-fix-stitches-types.1",
|
|
33
|
+
"@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.1",
|
|
34
|
+
"@mirohq/design-system-use-press": "^1.1.1",
|
|
35
|
+
"@mirohq/design-system-styles": "^3.1.0-fix-stitches-types.1",
|
|
36
|
+
"@mirohq/design-system-utils": "^1.2.1"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "rollup -c ../../../rollup.config.js",
|