@mirohq/design-system-toolbar 2.1.14-use-press.0 → 2.2.0

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
@@ -80,9 +80,11 @@ const StyledItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
80
80
  ...defaultStyles,
81
81
  borderRadius: 4,
82
82
  height: "$11",
83
- "&:hover": {
84
- backgroundColor: "$background-primary-subtle-hover",
85
- color: "$icon-primary-hover"
83
+ "@media (hover: hover)": {
84
+ "&:hover": {
85
+ backgroundColor: "$background-primary-subtle-hover",
86
+ color: "$icon-primary-hover"
87
+ }
86
88
  },
87
89
  "&:active": {
88
90
  backgroundColor: "$background-primary-subtle-active",
@@ -131,17 +133,9 @@ const StyledItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
131
133
  });
132
134
 
133
135
  const Item = React__default["default"].forwardRef(
134
- ({
135
- asChild,
136
- unstyled = true,
137
- active = false,
138
- onPress,
139
- onClick,
140
- ...restProps
141
- }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
136
+ ({ asChild, unstyled = true, active = false, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
142
137
  StyledItem,
143
138
  {
144
- onClick: onPress != null ? onPress : onClick,
145
139
  ...restProps,
146
140
  asChild,
147
141
  active,
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n padding: '$50 2px',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n padding: '2px $50',\n },\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$11',\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n\n ...focus.css({\n backgroundColor: '$background-neutrals-container',\n color: '$icon-neutrals',\n }),\n\n '&[disabled]': {\n opacity: '0.4',\n pointerEvents: 'none',\n },\n\n '&&': {\n ...focus.inner,\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * temporary the same as onClick, later will be added touch events support\n */\n onPress?: DOMAttributes<HTMLElement>['onClick']\n\n /**\n * Renders item in enabled/toggled state\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n asChild,\n unstyled = true,\n active = false,\n onPress,\n onClick,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledItem\n onClick={onPress ?? onClick}\n {...restProps}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n ref={forwardRef}\n />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n fontSize: '24px',\n width: '$11',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $150',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$150 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default horizontal\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default ltr\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","focus","React","jsx","Separator"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n padding: '$50 2px',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n padding: '2px $50',\n },\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$11',\n\n '@media (hover: hover)': {\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n\n '&:active': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n\n ...focus.css({\n backgroundColor: '$background-neutrals-container',\n color: '$icon-neutrals',\n }),\n\n '&[disabled]': {\n opacity: '0.4',\n pointerEvents: 'none',\n },\n\n '&&': {\n ...focus.inner,\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Renders item in enabled/toggled state\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ asChild, unstyled = true, active = false, ...restProps }, forwardRef) => (\n <StyledItem\n {...restProps}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n ref={forwardRef}\n />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n fontSize: '24px',\n width: '$11',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $150',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$150 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default horizontal\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default ltr\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","focus","React","jsx","Separator"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -54,9 +54,11 @@ const StyledItem = styled(RadixToolbar.Button, {
54
54
  ...defaultStyles,
55
55
  borderRadius: 4,
56
56
  height: "$11",
57
- "&:hover": {
58
- backgroundColor: "$background-primary-subtle-hover",
59
- color: "$icon-primary-hover"
57
+ "@media (hover: hover)": {
58
+ "&:hover": {
59
+ backgroundColor: "$background-primary-subtle-hover",
60
+ color: "$icon-primary-hover"
61
+ }
60
62
  },
61
63
  "&:active": {
62
64
  backgroundColor: "$background-primary-subtle-active",
@@ -105,17 +107,9 @@ const StyledItem = styled(RadixToolbar.Button, {
105
107
  });
106
108
 
107
109
  const Item = React.forwardRef(
108
- ({
109
- asChild,
110
- unstyled = true,
111
- active = false,
112
- onPress,
113
- onClick,
114
- ...restProps
115
- }, forwardRef) => /* @__PURE__ */ jsx(
110
+ ({ asChild, unstyled = true, active = false, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
116
111
  StyledItem,
117
112
  {
118
- onClick: onPress != null ? onPress : onClick,
119
113
  ...restProps,
120
114
  asChild,
121
115
  active,
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n padding: '$50 2px',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n padding: '2px $50',\n },\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$11',\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n\n ...focus.css({\n backgroundColor: '$background-neutrals-container',\n color: '$icon-neutrals',\n }),\n\n '&[disabled]': {\n opacity: '0.4',\n pointerEvents: 'none',\n },\n\n '&&': {\n ...focus.inner,\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * temporary the same as onClick, later will be added touch events support\n */\n onPress?: DOMAttributes<HTMLElement>['onClick']\n\n /**\n * Renders item in enabled/toggled state\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n asChild,\n unstyled = true,\n active = false,\n onPress,\n onClick,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledItem\n onClick={onPress ?? onClick}\n {...restProps}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n ref={forwardRef}\n />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n fontSize: '24px',\n width: '$11',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $150',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$150 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default horizontal\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default ltr\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n padding: '$50 2px',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n padding: '2px $50',\n },\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$11',\n\n '@media (hover: hover)': {\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n\n '&:active': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n\n ...focus.css({\n backgroundColor: '$background-neutrals-container',\n color: '$icon-neutrals',\n }),\n\n '&[disabled]': {\n opacity: '0.4',\n pointerEvents: 'none',\n },\n\n '&&': {\n ...focus.inner,\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Renders item in enabled/toggled state\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ asChild, unstyled = true, active = false, ...restProps }, forwardRef) => (\n <StyledItem\n {...restProps}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n ref={forwardRef}\n />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n fontSize: '24px',\n width: '$11',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $150',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$150 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default horizontal\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default ltr\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import react__default, { DOMAttributes, AnchorHTMLAttributes } from 'react';
2
+ import react__default, { AnchorHTMLAttributes } from 'react';
3
3
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
4
4
  import { StrictComponentProps } from '@mirohq/design-system-stitches';
5
5
  import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
@@ -925,10 +925,6 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<{
925
925
  declare type StyledItemProps = StrictComponentProps<typeof StyledItem>;
926
926
 
927
927
  interface ItemProps extends StyledItemProps {
928
- /**
929
- * temporary the same as onClick, later will be added touch events support
930
- */
931
- onPress?: DOMAttributes<HTMLElement>['onClick'];
932
928
  /**
933
929
  * Renders item in enabled/toggled state
934
930
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-toolbar",
3
- "version": "2.1.14-use-press.0",
3
+ "version": "2.2.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -28,8 +28,8 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@radix-ui/react-toolbar": "^1.0.0",
31
- "@mirohq/design-system-stitches": "^2.3.4-use-press.0",
32
- "@mirohq/design-system-styles": "^1.1.0-use-press.0"
31
+ "@mirohq/design-system-stitches": "^2.3.4",
32
+ "@mirohq/design-system-styles": "^1.1.0"
33
33
  },
34
34
  "scripts": {
35
35
  "build": "rollup -c ../../../rollup.config.js",