@mirohq/design-system-toolbar 2.4.12 → 2.5.0-toolbar-item-use-press.1

package/dist/main.js

@@ -8,6 +8,7 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
 var RadixToolbar = require('@radix-ui/react-toolbar');
 var interactions = require('@react-aria/interactions');
 var utils = require('@react-aria/utils');
+var designSystemUsePress = require('@mirohq/design-system-use-press');
 var designSystemStyles = require('@mirohq/design-system-styles');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -140,7 +141,8 @@ const Item = React__default["default"].forwardRef(
       onHoverEnd,
       onHoverChange
     });
-    const elementProps = utils.mergeProps(restProps, hoverProps);
+    const { pressProps } = designSystemUsePress.usePress({ ...restProps });
+    const elementProps = utils.mergeProps(pressProps, hoverProps);
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledItem,
       {

package/dist/main.js.map

@@ -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  gap: '$50',\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        padding: '2px',\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: '$10',\n\n        ...focus.css({\n          boxShadow: '$focus-small-outline',\n          borderColor: '$blue-500',\n        }),\n\n        '&[disabled]': {\n          opacity: '0.4',\n          pointerEvents: 'none',\n        },\n\n        '&[data-hovered]': {\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    },\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-selected',\n          color: '$icon-primary-selected',\n        },\n      },\n    },\n  ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents {\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      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n    })\n    const elementProps = mergeProps(restProps, hoverProps)\n\n    return (\n      <StyledItem\n        {...elementProps}\n        data-hovered={isHovered ? '' : undefined}\n        asChild={asChild}\n        active={active}\n        unstyled={asChild === true ? unstyled : false}\n        wrapper={asChild !== true}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n  padding: 0,\n  border: 'none',\n  font: 'unset',\n  width: '$10',\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 $50',\n  },\n\n  '&[data-orientation=\"horizontal\"]': {\n    height: '1px',\n    width: '$6',\n    margin: '$50 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\nexport interface 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","useHover","mergeProps","jsx","Separator"],"mappings":"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"}
+{"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  gap: '$50',\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        padding: '2px',\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: '$10',\n\n        ...focus.css({\n          boxShadow: '$focus-small-outline',\n          borderColor: '$blue-500',\n        }),\n\n        '&[disabled]': {\n          opacity: '0.4',\n          pointerEvents: 'none',\n        },\n\n        '&[data-hovered]': {\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    },\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-selected',\n          color: '$icon-primary-selected',\n        },\n      },\n    },\n  ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n  /**\n   * Renders item in enabled/toggled state.\n   * @default false\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\n   * 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      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n    })\n\n    const { pressProps } = usePress({ ...restProps })\n\n    const elementProps = mergeProps(pressProps, hoverProps)\n\n    return (\n      <StyledItem\n        {...elementProps}\n        data-hovered={isHovered ? '' : undefined}\n        asChild={asChild}\n        active={active}\n        unstyled={asChild === true ? unstyled : false}\n        wrapper={asChild !== true}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n  padding: 0,\n  border: 'none',\n  font: 'unset',\n  width: '$10',\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 $50',\n  },\n\n  '&[data-orientation=\"horizontal\"]': {\n    height: '1px',\n    width: '$6',\n    margin: '$50 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\nexport interface 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","useHover","usePress","mergeProps","jsx","Separator"],"mappings":"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"}

package/dist/module.js

@@ -5,6 +5,7 @@ import * as RadixToolbar from '@radix-ui/react-toolbar';
 import { Root, Separator as Separator$1 } from '@radix-ui/react-toolbar';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
+import { usePress } from '@mirohq/design-system-use-press';
 import { focus } from '@mirohq/design-system-styles';
 
 const StyledToolbar = styled(Root, {
@@ -114,7 +115,8 @@ const Item = React.forwardRef(
       onHoverEnd,
       onHoverChange
     });
-    const elementProps = mergeProps(restProps, hoverProps);
+    const { pressProps } = usePress({ ...restProps });
+    const elementProps = mergeProps(pressProps, hoverProps);
     return /* @__PURE__ */ jsx(
       StyledItem,
       {

package/dist/module.js.map

@@ -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  gap: '$50',\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        padding: '2px',\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: '$10',\n\n        ...focus.css({\n          boxShadow: '$focus-small-outline',\n          borderColor: '$blue-500',\n        }),\n\n        '&[disabled]': {\n          opacity: '0.4',\n          pointerEvents: 'none',\n        },\n\n        '&[data-hovered]': {\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    },\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-selected',\n          color: '$icon-primary-selected',\n        },\n      },\n    },\n  ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents {\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      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n    })\n    const elementProps = mergeProps(restProps, hoverProps)\n\n    return (\n      <StyledItem\n        {...elementProps}\n        data-hovered={isHovered ? '' : undefined}\n        asChild={asChild}\n        active={active}\n        unstyled={asChild === true ? unstyled : false}\n        wrapper={asChild !== true}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n  padding: 0,\n  border: 'none',\n  font: 'unset',\n  width: '$10',\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 $50',\n  },\n\n  '&[data-orientation=\"horizontal\"]': {\n    height: '1px',\n    width: '$6',\n    margin: '$50 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\nexport interface 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":";;;;;;;;;AAIa,MAAA,aAAA,GAAgB,OAAO,IAAM,EAAA;AAAA,EACxC,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,MAAA;AAAA,EACT,SAAW,EAAA,YAAA;AAAA,EACX,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA,KAAA;AAAA,EAEL,gCAAkC,EAAA;AAAA,IAChC,aAAe,EAAA,QAAA;AAAA,IACf,KAAO,EAAA,KAAA;AAAA,GACT;AAAA,EAEA,kCAAoC,EAAA;AAAA,IAClC,MAAQ,EAAA,KAAA;AAAA,GACV;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,KAAO,EAAA;AAAA,QACL,eAAiB,EAAA,gCAAA;AAAA,QACjB,SAAW,EAAA,KAAA;AAAA,QACX,YAAc,EAAA,KAAA;AAAA,QACd,OAAS,EAAA,KAAA;AAAA,OACX;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC1BD,MAAM,aAAgB,GAAA;AAAA,EACpB,SAAW,EAAA,YAAA;AAAA,EACX,MAAQ,EAAA,SAAA;AAAA,EACR,UAAY,EAAA,MAAA;AAAA,EACZ,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,cAAgB,EAAA,QAAA;AAAA,EAChB,UAAY,EAAA,CAAA;AACd,CAAA,CAAA;AAEa,MAAA,UAAA,GAAa,MAAO,CAAA,YAAA,CAAa,MAAQ,EAAA;AAAA,EACpD,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,GAAG,aAAA;AAAA,OACL;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,aAAA;AAAA,QACH,YAAc,EAAA,CAAA;AAAA,QACd,MAAQ,EAAA,KAAA;AAAA,QAER,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,sBAAA;AAAA,UACX,WAAa,EAAA,WAAA;AAAA,SACd,CAAA;AAAA,QAED,aAAe,EAAA;AAAA,UACb,OAAS,EAAA,KAAA;AAAA,UACT,aAAe,EAAA,MAAA;AAAA,SACjB;AAAA,QAEA,iBAAmB,EAAA;AAAA,UACjB,eAAiB,EAAA,kCAAA;AAAA,UACjB,KAAO,EAAA,qBAAA;AAAA,SACT;AAAA,QAEA,UAAY,EAAA;AAAA,UACV,eAAiB,EAAA,mCAAA;AAAA,UACjB,KAAO,EAAA,sBAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,aAAA;AAAA,QACjB,MAAQ,EAAA,MAAA;AAAA,QACR,MAAQ,EAAA,SAAA;AAAA,OACV;AAAA,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,MAAM,EAAC;AAAA,MACP,OAAO,EAAC;AAAA,KACV;AAAA,GACF;AAAA,EAEA,iBAAmB,EAAA;AAAA,IACjB,MAAQ,EAAA,GAAA;AAAA,GACV;AAAA,EAEA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,QAAU,EAAA,KAAA;AAAA,MACV,MAAQ,EAAA,IAAA;AAAA,MACR,GAAK,EAAA;AAAA,QACH,IAAM,EAAA;AAAA,UACJ,eAAiB,EAAA,qCAAA;AAAA,UACjB,KAAO,EAAA,wBAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AClDM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CACE;AAAA,IACE,OAAA;AAAA,IACA,QAAW,GAAA,IAAA;AAAA,IACX,MAAS,GAAA,KAAA;AAAA,IACT,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,EAAE,UAAA,EAAY,SAAU,EAAA,GAAI,QAAS,CAAA;AAAA,MACzC,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,KACD,CAAA,CAAA;AACD,IAAM,MAAA,YAAA,GAAe,UAAW,CAAA,SAAA,EAAW,UAAU,CAAA,CAAA;AAErD,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,QAC/B,OAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA,EAAU,OAAY,KAAA,IAAA,GAAO,QAAW,GAAA,KAAA;AAAA,QACxC,SAAS,OAAY,KAAA,IAAA;AAAA,QACrB,GAAK,EAAA,UAAA;AAAA,OAAA;AAAA,KACP,CAAA;AAAA,GAEJ;AACF,CAAA;;ACtDa,MAAA,UAAA,GAAa,OAAO,IAAM,EAAA;AAAA,EACrC,OAAS,EAAA,CAAA;AAAA,EACT,MAAQ,EAAA,MAAA;AAAA,EACR,IAAM,EAAA,OAAA;AAAA,EACN,KAAO,EAAA,KAAA;AAAA,EACP,KAAO,EAAA,gBAAA;AACT,CAAC,CAAA;;ACFM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,KAAO,EAAA,UAAA,qBACL,GAAA,CAAA,UAAA,EAAA,EAAW,UAAU,KAAQ,EAAA,GAAG,KAAO,EAAA,GAAA,EAAK,UAAY,EAAA,CAAA;AAE7D,CAAA;;ACRa,MAAA,eAAA,GAAkB,OAAOA,WAAW,EAAA;AAAA,EAC/C,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,OAAA;AAAA,EACT,SAAW,EAAA,YAAA;AAAA,EACX,eAAiB,EAAA,wBAAA;AAAA,EAEjB,gCAAkC,EAAA;AAAA,IAChC,KAAO,EAAA,KAAA;AAAA,IACP,MAAQ,EAAA,IAAA;AAAA,IACR,MAAQ,EAAA,OAAA;AAAA,GACV;AAAA,EAEA,kCAAoC,EAAA;AAAA,IAClC,MAAQ,EAAA,KAAA;AAAA,IACR,KAAO,EAAA,IAAA;AAAA,IACP,MAAQ,EAAA,OAAA;AAAA,GACV;AACF,CAAC,CAAA;;ACbM,MAAM,SAAY,GAAA,KAAA,CAAM,UAG7B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgB,GAAA,CAAA,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACP3D,MAAA,UAAA,GAAa,OAAO,IAAM,EAAA;AAAA,EACrC,QAAU,EAAA,MAAA;AAAA,EACV,cAAgB,EAAA,MAAA;AAClB,CAAC,CAAA;;ACGM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,QAAU,EAAA,IAAA,EAAM,GAAG,SAAU,EAAA,EAAG,UACjC,qBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAO,MAAC,QAAU,EAAA,KAAA,EAAQ,GAAG,SAAW,EAAA,GAAA,EAAK,YACvD,QAAC,kBAAA,GAAA,CAAA,GAAA,EAAA,EAAE,IAAa,EAAA,QAAA,EAAS,CAC3B,EAAA,CAAA;AAEJ,CAAA;;AC0BO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,WAAc,GAAA,YAAA;AAAA,IACd,GAAM,GAAA,KAAA;AAAA,IACN,IAAO,GAAA,IAAA;AAAA,IACP,SAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UAEA,qBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAK,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,GAAA;AAAA,MAClB,IAAA;AAAA,MACA,GAAK,EAAA,UAAA;AAAA,MACJ,GAAG,SAAA;AAAA,KAAA;AAAA,GACN;AAEJ,EAAA;AAYA,OAAA,CAAQ,IAAO,GAAA,IAAA,CAAA;AACf,OAAA,CAAQ,IAAO,GAAA,IAAA,CAAA;AACf,OAAA,CAAQ,IAAO,GAAA,IAAA,CAAA;AACf,OAAA,CAAQ,SAAY,GAAA,SAAA;;;;"}
+{"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  gap: '$50',\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        padding: '2px',\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: '$10',\n\n        ...focus.css({\n          boxShadow: '$focus-small-outline',\n          borderColor: '$blue-500',\n        }),\n\n        '&[disabled]': {\n          opacity: '0.4',\n          pointerEvents: 'none',\n        },\n\n        '&[data-hovered]': {\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    },\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-selected',\n          color: '$icon-primary-selected',\n        },\n      },\n    },\n  ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n  /**\n   * Renders item in enabled/toggled state.\n   * @default false\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\n   * 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      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n    })\n\n    const { pressProps } = usePress({ ...restProps })\n\n    const elementProps = mergeProps(pressProps, hoverProps)\n\n    return (\n      <StyledItem\n        {...elementProps}\n        data-hovered={isHovered ? '' : undefined}\n        asChild={asChild}\n        active={active}\n        unstyled={asChild === true ? unstyled : false}\n        wrapper={asChild !== true}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n  padding: 0,\n  border: 'none',\n  font: 'unset',\n  width: '$10',\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 $50',\n  },\n\n  '&[data-orientation=\"horizontal\"]': {\n    height: '1px',\n    width: '$6',\n    margin: '$50 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\nexport interface 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

@@ -6,6 +6,7 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/s
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as _radix_ui_react_toolbar from '@radix-ui/react-toolbar';
 import { HoverEvents } from '@react-types/shared';
+import { PressEvents } from '@mirohq/design-system-use-press';
 
 declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
@@ -1001,14 +1002,16 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
 }, {}>;
 declare type StyledItemProps = StrictComponentProps<typeof StyledItem>;
 
-interface ItemProps extends StyledItemProps, HoverEvents {
+interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {
     /**
-     * Renders item in enabled/toggled state
+     * Renders item in enabled/toggled state.
+     * @default false
      */
     active?: boolean;
     /**
      * It's applied by default when using with asChild attribute.
-     * You can still combine default Item styles with your own component by setting this prop to false.
+     * You can still combine default Item styles with your own component by
+     * setting this prop to false.
      * Note: Must be used together with asChild
      * @default true
      */
@@ -2018,12 +2021,12 @@ interface ToolbarProps extends StyledToolbarProps {
     unstyled?: boolean;
     /**
      * The orientation of the toolbar
-     * @default horizontal
+     * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
     /**
      * The reading direction of the toolbar
-     * @default ltr
+     * @default 'ltr'
      */
     dir?: 'ltr' | 'rtl';
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-toolbar",
-  "version": "2.4.12",
+  "version": "2.5.0-toolbar-item-use-press.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -32,7 +32,8 @@
     "@react-aria/utils": "^3.13.0",
     "@react-types/shared": "^3.16.0",
     "@mirohq/design-system-stitches": "^2.6.0",
-    "@mirohq/design-system-styles": "^1.1.19"
+    "@mirohq/design-system-styles": "^1.1.19",
+    "@mirohq/design-system-use-press": "^0.2.4-toolbar-item-use-press.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",