@mirohq/design-system-toolbar 2.5.30 → 2.6.0-tag-api-changes.0

package/dist/main.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var designSystemExperiments = require('@mirohq/design-system-experiments');
 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 designSystemUtils = require('@mirohq/design-system-utils');
+var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
 var designSystemStyles = require('@mirohq/design-system-styles');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -50,97 +52,69 @@ const StyledToolbar = designSystemStitches.styled(RadixToolbar.Root, {
     height: "$12"
   },
   variants: {
-    unstyled: {
-      false: {
+    v1: {
+      true: {}
+    },
+    variant: {
+      floating: {},
+      flat: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "floating",
+      v1: false,
+      css: {
         backgroundColor: "$background-neutrals-container",
         boxShadow: "$50",
         borderRadius: "$50",
         padding: "2px"
       }
+    },
+    {
+      variant: "floating",
+      v1: true,
+      css: {
+        backgroundColor: "$background-neutrals-layout",
+        boxShadow: "0px 1px 8px 0px rgba(34, 36, 40, 0.05)",
+        border: "0.5px solid $border-neutrals-subtle",
+        borderRadius: "$100",
+        padding: "$50"
+      }
     }
-  }
+  ]
 });
 
-const defaultStyles = {
+const StyledBaseItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
   boxSizing: "border-box",
   cursor: "pointer",
   userSelect: "none",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  flexShrink: 0
-};
-const disabledSelector = '&[disabled], &[aria-disabled="true"]';
-const StyledItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
-  variants: {
-    unstyled: {
-      true: {
-        ...defaultStyles
-      },
-      false: {
-        ...defaultStyles,
-        borderRadius: 4,
-        height: "$10",
-        ...designSystemStyles.focus.css({
-          boxShadow: "$focus-small",
-          outline: "1px solid transparent"
-        }),
-        [disabledSelector]: {
-          pointerEvents: "none",
-          color: "$text-neutrals-disabled"
-        },
-        "&[data-hovered]": {
-          backgroundColor: "$background-primary-subtle-hover",
-          color: "$icon-primary-hover"
-        },
-        "&:active, &[data-pressed]": {
-          backgroundColor: "$background-primary-subtle-active",
-          color: "$icon-primary-active"
-        }
-      }
-    },
-    wrapper: {
-      true: {
-        backgroundColor: "transparent",
-        border: "none",
-        cursor: "pointer"
-      }
-    },
-    active: {
-      true: {},
-      false: {}
-    }
-  },
+  flexShrink: 0,
   '&[tabindex="0"]': {
     zIndex: "1"
-  },
-  compoundVariants: [
-    {
-      unstyled: false,
-      active: true,
-      css: {
-        "&&": {
-          backgroundColor: "$background-primary-subtle-selected",
-          color: "$icon-primary-selected"
-        }
-      }
-    }
-  ]
+  }
 });
 
-const Item = React__default["default"].forwardRef(
+const BaseItem = React__default["default"].forwardRef(
   ({
     disabled = false,
     "aria-disabled": ariaDisabled,
     asChild,
-    unstyled = true,
-    active = false,
     onHoverStart,
     onHoverEnd,
     onHoverChange,
     ...restProps
   }, forwardRef) => {
-    let elementProps = restProps;
+    const elementProps = designSystemUseAriaDisabled.useAriaDisabled(
+      {
+        ...restProps,
+        ariaDisabled
+      },
+      { allowArrows: true }
+    );
     const { pressProps } = designSystemUsePress.usePress({
       preventFocusOnPress: "auto",
       disabled: disabled || designSystemUtils.booleanify(ariaDisabled),
@@ -151,16 +125,12 @@ const Item = React__default["default"].forwardRef(
       onHoverEnd,
       onHoverChange
     });
-    elementProps = utils.mergeProps(pressProps, hoverProps);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      StyledItem,
+      StyledBaseItem,
       {
-        ...elementProps,
+        ...utils.mergeProps(pressProps, hoverProps),
         "data-hovered": isHovered ? "" : void 0,
         asChild,
-        active,
-        unstyled: asChild === true ? unstyled : false,
-        wrapper: asChild !== true,
         disabled,
         "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? "true" : ariaDisabled,
         ref: forwardRef
@@ -169,16 +139,127 @@ const Item = React__default["default"].forwardRef(
   }
 );
 
-const StyledIcon = designSystemStitches.styled(Item, {
+const disabledSelector = '&[disabled], &[aria-disabled="true"]';
+const sharedStyles = {
+  base: {
+    backgroundColor: "$transparent",
+    borderRadius: "$50",
+    height: "$10",
+    border: "none"
+  },
+  old: {
+    ...designSystemStyles.focus.css({
+      boxShadow: "$focus-small",
+      outline: "1px solid transparent"
+    }),
+    [disabledSelector]: {
+      cursor: "default",
+      color: "$text-neutrals-disabled"
+    },
+    "&[disabled]": {
+      pointerEvents: "none"
+    },
+    '&:not([aria-disabled="true"])': {
+      "&[data-hovered]": {
+        backgroundColor: "$background-primary-subtle-hover",
+        color: "$icon-primary-hover"
+      },
+      "&:active, &[data-pressed]": {
+        backgroundColor: "$background-primary-subtle-active",
+        color: "$icon-primary-active"
+      }
+    }
+  },
+  v1: {
+    ...designSystemStyles.focus.css({
+      boxShadow: "$focus-v1"
+    }),
+    "&[disabled]": {
+      pointerEvents: "none"
+    },
+    '&:not([aria-disabled="true"])': {
+      "&[data-hovered]": {
+        backgroundColor: "$background-neutrals-hover"
+      },
+      "&:active, &[data-pressed]": {
+        backgroundColor: "$background-neutrals-active"
+      }
+    }
+  }
+};
+
+const StyledIcon = designSystemStitches.styled(BaseItem, {
   padding: 0,
-  border: "none",
   font: "unset",
   width: "$10",
-  color: "$icon-neutrals"
+  color: "$icon-neutrals",
+  ...sharedStyles.base,
+  variants: {
+    v1: {
+      true: {},
+      false: {}
+    },
+    active: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      v1: true,
+      active: true,
+      css: {
+        backgroundColor: "$background-primary-subtle",
+        color: "$icon-primary-selected"
+      }
+    },
+    {
+      v1: false,
+      active: true,
+      css: {
+        backgroundColor: "$background-primary-subtle-selected",
+        color: "$icon-primary-selected"
+      }
+    },
+    {
+      v1: true,
+      active: false,
+      css: {
+        ...sharedStyles.v1,
+        [disabledSelector]: {
+          pointerEvents: "none",
+          color: "$icon-neutrals-disabled"
+        }
+      }
+    },
+    {
+      v1: false,
+      active: false,
+      css: sharedStyles.old
+    }
+  ]
 });
 
+const ToolbarContext = React.createContext({});
+const ToolbarProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  ToolbarContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
+const useToolbarContext = () => React.useContext(ToolbarContext);
+
 const Icon = React__default["default"].forwardRef(
-  (props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { unstyled: false, ...props, ref: forwardRef })
+  ({ active = false, ...restProps }, forwardRef) => {
+    const { v1 } = useToolbarContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { ...restProps, v1, active, ref: forwardRef });
+  }
 );
 
 const StyledSeparator = designSystemStitches.styled(RadixToolbar.Separator, {
@@ -195,39 +276,132 @@ const StyledSeparator = designSystemStitches.styled(RadixToolbar.Separator, {
     height: "1px",
     width: "$6",
     margin: "$50 0"
+  },
+  variants: {
+    v1: {
+      true: { backgroundColor: "$border-neutrals-subtle" }
+    }
   }
 });
 
-const Separator = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef }));
+const Separator = React__default["default"].forwardRef((props, forwardRef) => {
+  const { v1 } = useToolbarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, v1, ref: forwardRef });
+});
 
-const StyledLink = designSystemStitches.styled(Item, {
+const StyledLink = designSystemStitches.styled(BaseItem, {
   paddingX: "$150",
-  textDecoration: "none"
+  textDecoration: "none",
+  ...sharedStyles.base,
+  variants: {
+    v1: {
+      true: {
+        ...sharedStyles.v1,
+        color: "$text-primary",
+        textDecoration: "underline solid",
+        textDecorationThickness: "1px",
+        textUnderlineOffset: "4px",
+        outline: "none",
+        [disabledSelector]: {
+          pointerEvents: "none",
+          color: "$text-neutrals-disabled"
+        }
+      },
+      false: sharedStyles.old
+    }
+  }
 });
 
 const Link = React__default["default"].forwardRef(
-  ({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { asChild: true, unstyled: false, ...restProps, ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, children }) })
+  ({ children, href, ...restProps }, forwardRef) => {
+    const { v1 } = useToolbarContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { ...restProps, asChild: true, v1, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, ref: forwardRef, children }) });
+  }
+);
+
+const StyledItem = designSystemStitches.styled(BaseItem, {
+  ...sharedStyles.base,
+  variants: {
+    v1: {
+      true: {},
+      false: {}
+    },
+    active: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      v1: true,
+      active: true,
+      css: {
+        backgroundColor: "$background-primary-subtle",
+        color: "$text-primary-selected"
+      }
+    },
+    {
+      v1: false,
+      active: true,
+      css: {
+        backgroundColor: "$background-primary-subtle-selected",
+        color: "$text-primary-selected"
+      }
+    },
+    {
+      v1: true,
+      active: false,
+      css: {
+        ...sharedStyles.v1,
+        [disabledSelector]: {
+          pointerEvents: "none",
+          color: "$text-neutrals-disabled"
+        }
+      }
+    },
+    {
+      v1: false,
+      active: false,
+      css: sharedStyles.old
+    }
+  ]
+});
+
+const Item = React__default["default"].forwardRef(
+  ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {
+    const { v1 } = useToolbarContext();
+    const shouldRenderUnstyled = asChild === true ? unstyled : false;
+    if (shouldRenderUnstyled) {
+      return /* @__PURE__ */ jsxRuntime.jsx(BaseItem, { ...restProps, asChild, ref: forwardRef });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledItem, { ...restProps, v1, active, ref: forwardRef });
+  }
 );
 
 const Toolbar = React__default["default"].forwardRef(
   ({
-    unstyled = false,
+    unstyled,
     orientation = "horizontal",
+    variant = "floating",
     dir = "ltr",
     loop = true,
-    direction,
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
-    StyledToolbar,
-    {
-      unstyled,
-      orientation,
-      dir: direction != null ? direction : dir,
-      loop,
-      ref: forwardRef,
-      ...restProps
-    }
-  )
+  }, forwardRef) => {
+    const [v1] = designSystemExperiments.useNewDesignLanguage();
+    const variantProp = unstyled === void 0 ? variant : unstyled ? "flat" : "floating";
+    return /* @__PURE__ */ jsxRuntime.jsx(ToolbarProvider, { v1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      StyledToolbar,
+      {
+        v1,
+        variant: variantProp,
+        orientation,
+        dir,
+        loop,
+        ref: forwardRef,
+        ...restProps
+      }
+    ) });
+  }
 );
 Toolbar.Icon = Icon;
 Toolbar.Item = Item;

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\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\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',\n          outline: '1px solid transparent',\n        }),\n\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$icon-primary-hover',\n        },\n\n        '&:active, &[data-pressed]': {\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 { booleanify } from '@mirohq/design-system-utils'\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      disabled = false,\n      'aria-disabled': ariaDisabled,\n      asChild,\n      unstyled = true,\n      active = false,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    let elementProps = restProps\n\n    const { pressProps } = usePress({\n      preventFocusOnPress: 'auto',\n      disabled: disabled || booleanify(ariaDisabled),\n      ...elementProps,\n    })\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n    })\n\n    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        disabled={disabled}\n        aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\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","usePress","booleanify","useHover","mergeProps","jsx","Separator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,aAAA,GAAgBA,4BAAOC,iBAAM,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,MAAM,gBAAmB,GAAA,sCAAA,CAAA;AAEZ,MAAA,UAAA,GAAaD,2BAAO,CAAAE,uBAAA,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,GAAGC,yBAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,UACX,OAAS,EAAA,uBAAA;AAAA,SACV,CAAA;AAAA,QAED,CAAC,gBAAgB,GAAG;AAAA,UAClB,aAAe,EAAA,MAAA;AAAA,UACf,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,QAEA,iBAAmB,EAAA;AAAA,UACjB,eAAiB,EAAA,kCAAA;AAAA,UACjB,KAAO,EAAA,qBAAA;AAAA,SACT;AAAA,QAEA,2BAA6B,EAAA;AAAA,UAC3B,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;;AC/CM,MAAM,OAAOC,yBAAM,CAAA,UAAA;AAAA,EACxB,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,eAAiB,EAAA,YAAA;AAAA,IACjB,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,IAAI,YAAe,GAAA,SAAA,CAAA;AAEnB,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,6BAAS,CAAA;AAAA,MAC9B,mBAAqB,EAAA,MAAA;AAAA,MACrB,QAAA,EAAU,QAAY,IAAAC,4BAAA,CAAW,YAAY,CAAA;AAAA,MAC7C,GAAG,YAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,SAAU,EAAA,GAAIC,qBAAS,CAAA;AAAA,MACzC,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAe,YAAA,GAAAC,gBAAA,CAAW,YAAY,UAAU,CAAA,CAAA;AAEhD,IACE,uBAAAC,cAAA;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,QAAA;AAAA,QACA,eAAe,EAAAH,4BAAA,CAAW,YAAY,CAAA,GAAI,MAAS,GAAA,YAAA;AAAA,QACnD,GAAK,EAAA,UAAA;AAAA,OAAA;AAAA,KACP,CAAA;AAAA,GAEJ;AACF,CAAA;;ACxEa,MAAA,UAAA,GAAaN,4BAAO,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,OAAOI,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,KAAO,EAAA,UAAA,qBACLK,cAAA,CAAA,UAAA,EAAA,EAAW,UAAU,KAAQ,EAAA,GAAG,KAAO,EAAA,GAAA,EAAK,UAAY,EAAA,CAAA;AAE7D,CAAA;;ACRa,MAAA,eAAA,GAAkBT,4BAAOU,sBAAW,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,GAAAN,yBAAA,CAAM,UAG7B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgBK,cAAA,CAAA,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACP3D,MAAA,UAAA,GAAaT,4BAAO,IAAM,EAAA;AAAA,EACrC,QAAU,EAAA,MAAA;AAAA,EACV,cAAgB,EAAA,MAAA;AAClB,CAAC,CAAA;;ACGM,MAAM,OAAOI,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,QAAU,EAAA,IAAA,EAAM,GAAG,SAAU,EAAA,EAAG,UACjC,qBAAAK,cAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAO,MAAC,QAAU,EAAA,KAAA,EAAQ,GAAG,SAAW,EAAA,GAAA,EAAK,YACvD,QAAC,kBAAAA,cAAA,CAAA,GAAA,EAAA,EAAE,IAAa,EAAA,QAAA,EAAS,CAC3B,EAAA,CAAA;AAEJ,CAAA;;AC0BO,MAAM,UAAUL,yBAAM,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,qBAAAK,cAAA;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":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/base-item.styled.ts","../src/partials/base-item.tsx","../src/styles.ts","../src/partials/icon.styled.tsx","../src/hooks/use-toolbar-context.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/partials/item.styled.tsx","../src/partials/item.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    v1: {\n      true: {},\n    },\n    variant: {\n      floating: {},\n      flat: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'floating',\n      v1: false,\n      css: {\n        backgroundColor: '$background-neutrals-container',\n        boxShadow: '$50',\n        borderRadius: '$50',\n        padding: '2px',\n      },\n    },\n    {\n      variant: 'floating',\n      v1: true,\n      css: {\n        backgroundColor: '$background-neutrals-layout',\n        boxShadow: '0px 1px 8px 0px rgba(34, 36, 40, 0.05)',\n        border: '0.5px solid $border-neutrals-subtle',\n        borderRadius: '$100',\n        padding: '$50',\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'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  userSelect: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n\n  '&[tabindex=\"0\"]': {\n    zIndex: '1',\n  },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\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 { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n  extends StyledBaseItemProps,\n    HoverEvents,\n    PressEvents {\n  disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n  ElementRef<typeof StyledBaseItem>,\n  BaseItemProps\n>(\n  (\n    {\n      disabled = false,\n      'aria-disabled': ariaDisabled,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const elementProps = useAriaDisabled(\n      {\n        ...restProps,\n        ariaDisabled,\n      },\n      { allowArrows: true }\n    )\n\n    const { pressProps } = usePress({\n      preventFocusOnPress: 'auto',\n      disabled: disabled || booleanify(ariaDisabled),\n      ...elementProps,\n    })\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n    })\n\n    return (\n      <StyledBaseItem\n        {...mergeProps(pressProps, hoverProps)}\n        data-hovered={isHovered ? '' : undefined}\n        asChild={asChild}\n        disabled={disabled}\n        aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n  base: {\n    backgroundColor: '$transparent',\n    borderRadius: '$50',\n    height: '$10',\n    border: 'none',\n  },\n  old: {\n    ...focus.css({\n      boxShadow: '$focus-small',\n      outline: '1px solid transparent',\n    }),\n\n    [disabledSelector]: {\n      cursor: 'default',\n      color: '$text-neutrals-disabled',\n    },\n\n    '&[disabled]': {\n      pointerEvents: 'none',\n    },\n\n    '&:not([aria-disabled=\"true\"])': {\n      '&[data-hovered]': {\n        backgroundColor: '$background-primary-subtle-hover',\n        color: '$icon-primary-hover',\n      },\n\n      '&:active, &[data-pressed]': {\n        backgroundColor: '$background-primary-subtle-active',\n        color: '$icon-primary-active',\n      },\n    },\n  },\n  v1: {\n    ...focus.css({\n      boxShadow: '$focus-v1',\n    }),\n\n    '&[disabled]': {\n      pointerEvents: 'none',\n    },\n\n    '&:not([aria-disabled=\"true\"])': {\n      '&[data-hovered]': {\n        backgroundColor: '$background-neutrals-hover',\n      },\n\n      '&:active, &[data-pressed]': {\n        backgroundColor: '$background-neutrals-active',\n      },\n    },\n  },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n  padding: 0,\n  font: 'unset',\n  width: '$10',\n  color: '$icon-neutrals',\n\n  ...sharedStyles.base,\n\n  variants: {\n    v1: {\n      true: {},\n      false: {},\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n  },\n\n  compoundVariants: [\n    {\n      v1: true,\n      active: true,\n      css: {\n        backgroundColor: '$background-primary-subtle',\n        color: '$icon-primary-selected',\n      },\n    },\n    {\n      v1: false,\n      active: true,\n      css: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$icon-primary-selected',\n      },\n    },\n    {\n      v1: true,\n      active: false,\n      css: {\n        ...sharedStyles.v1,\n\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    {\n      v1: false,\n      active: false,\n      css: sharedStyles.old,\n    },\n  ],\n})\n","import React, { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\ninterface ToolbarProps {\n  v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport type ToolbarProviderProps = ToolbarProps\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<ToolbarProviderProps>): React.ReactElement => (\n  <ToolbarContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n  useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends BaseItemProps {\n  /**\n   * Renders icon in enabled/toggled state.\n   * @default false\n   */\n  active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n  ({ active = false, ...restProps }, forwardRef) => {\n    const { v1 } = useToolbarContext()\n\n    return (\n      <StyledIcon {...restProps} v1={v1} active={active} ref={forwardRef} />\n    )\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  variants: {\n    v1: {\n      true: { backgroundColor: '$border-neutrals-subtle' },\n    },\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'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface SeparatorProps extends Omit<StyledSeparatorProps, 'v1'> {}\n\nexport const Separator = React.forwardRef<\n  ElementRef<typeof StyledSeparator>,\n  SeparatorProps\n>((props, forwardRef) => {\n  const { v1 } = useToolbarContext()\n\n  return <StyledSeparator {...props} v1={v1} ref={forwardRef} />\n})\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n  paddingX: '$150',\n  textDecoration: 'none',\n\n  ...sharedStyles.base,\n\n  variants: {\n    v1: {\n      true: {\n        ...sharedStyles.v1,\n        color: '$text-primary',\n        textDecoration: 'underline solid',\n        textDecorationThickness: '1px',\n        textUnderlineOffset: '4px',\n        outline: 'none',\n\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n      },\n      false: sharedStyles.old,\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n  AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n  ({ children, href, ...restProps }, forwardRef) => {\n    const { v1 } = useToolbarContext()\n\n    return (\n      <StyledLink {...restProps} asChild v1={v1}>\n        <a href={href} ref={forwardRef}>\n          {children}\n        </a>\n      </StyledLink>\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n  ...sharedStyles.base,\n\n  variants: {\n    v1: {\n      true: {},\n      false: {},\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n  },\n\n  compoundVariants: [\n    {\n      v1: true,\n      active: true,\n      css: {\n        backgroundColor: '$background-primary-subtle',\n        color: '$text-primary-selected',\n      },\n    },\n    {\n      v1: false,\n      active: true,\n      css: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$text-primary-selected',\n      },\n    },\n    {\n      v1: true,\n      active: false,\n      css: {\n        ...sharedStyles.v1,\n\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n      },\n    },\n    {\n      v1: false,\n      active: false,\n      css: sharedStyles.old,\n    },\n  ],\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\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  /**\n   * Renders item in enabled/toggled state.\n   * @default false\n   */\n  active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n  ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n    const { v1 } = useToolbarContext()\n\n    const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n    if (shouldRenderUnstyled) {\n      return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n    }\n\n    return (\n      <StyledItem {...restProps} v1={v1} active={active} ref={forwardRef} />\n    )\n  }\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\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'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\n\nexport interface ToolbarProps extends Omit<StyledToolbarProps, 'v1'> {\n  /**\n   * @deprecated Please use variant for non-floating toolbar\n   */\n  unstyled?: boolean\n\n  /**\n   * When floating, the toolbar has shadow and border to differentiate it from the surface\n   * @default floating\n   */\n  variant?: StyledToolbarProps['variant']\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   * 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,\n      orientation = 'horizontal',\n      variant = 'floating',\n      dir = 'ltr',\n      loop = true,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const [v1] = useNewDesignLanguage()\n\n    const variantProp =\n      unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n    return (\n      <ToolbarProvider v1={v1}>\n        <StyledToolbar\n          v1={v1}\n          variant={variantProp}\n          orientation={orientation}\n          dir={dir}\n          loop={loop}\n          ref={forwardRef}\n          {...restProps}\n        />\n      </ToolbarProvider>\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","React","useAriaDisabled","usePress","booleanify","useHover","jsx","mergeProps","focus","createContext","useContext","Separator","useNewDesignLanguage"],"mappings":"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"}

package/dist/module.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
+import React, { createContext, useContext } from 'react';
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
 import { styled } from '@mirohq/design-system-stitches';
 import * as RadixToolbar from '@radix-ui/react-toolbar';
 import { Root, Separator as Separator$1 } from '@radix-ui/react-toolbar';
@@ -7,6 +8,7 @@ import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { usePress } from '@mirohq/design-system-use-press';
 import { booleanify } from '@mirohq/design-system-utils';
+import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
 import { focus } from '@mirohq/design-system-styles';
 
 const StyledToolbar = styled(Root, {
@@ -24,97 +26,69 @@ const StyledToolbar = styled(Root, {
     height: "$12"
   },
   variants: {
-    unstyled: {
-      false: {
+    v1: {
+      true: {}
+    },
+    variant: {
+      floating: {},
+      flat: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "floating",
+      v1: false,
+      css: {
         backgroundColor: "$background-neutrals-container",
         boxShadow: "$50",
         borderRadius: "$50",
         padding: "2px"
       }
+    },
+    {
+      variant: "floating",
+      v1: true,
+      css: {
+        backgroundColor: "$background-neutrals-layout",
+        boxShadow: "0px 1px 8px 0px rgba(34, 36, 40, 0.05)",
+        border: "0.5px solid $border-neutrals-subtle",
+        borderRadius: "$100",
+        padding: "$50"
+      }
     }
-  }
+  ]
 });
 
-const defaultStyles = {
+const StyledBaseItem = styled(RadixToolbar.Button, {
   boxSizing: "border-box",
   cursor: "pointer",
   userSelect: "none",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  flexShrink: 0
-};
-const disabledSelector = '&[disabled], &[aria-disabled="true"]';
-const StyledItem = styled(RadixToolbar.Button, {
-  variants: {
-    unstyled: {
-      true: {
-        ...defaultStyles
-      },
-      false: {
-        ...defaultStyles,
-        borderRadius: 4,
-        height: "$10",
-        ...focus.css({
-          boxShadow: "$focus-small",
-          outline: "1px solid transparent"
-        }),
-        [disabledSelector]: {
-          pointerEvents: "none",
-          color: "$text-neutrals-disabled"
-        },
-        "&[data-hovered]": {
-          backgroundColor: "$background-primary-subtle-hover",
-          color: "$icon-primary-hover"
-        },
-        "&:active, &[data-pressed]": {
-          backgroundColor: "$background-primary-subtle-active",
-          color: "$icon-primary-active"
-        }
-      }
-    },
-    wrapper: {
-      true: {
-        backgroundColor: "transparent",
-        border: "none",
-        cursor: "pointer"
-      }
-    },
-    active: {
-      true: {},
-      false: {}
-    }
-  },
+  flexShrink: 0,
   '&[tabindex="0"]': {
     zIndex: "1"
-  },
-  compoundVariants: [
-    {
-      unstyled: false,
-      active: true,
-      css: {
-        "&&": {
-          backgroundColor: "$background-primary-subtle-selected",
-          color: "$icon-primary-selected"
-        }
-      }
-    }
-  ]
+  }
 });
 
-const Item = React.forwardRef(
+const BaseItem = React.forwardRef(
   ({
     disabled = false,
     "aria-disabled": ariaDisabled,
     asChild,
-    unstyled = true,
-    active = false,
     onHoverStart,
     onHoverEnd,
     onHoverChange,
     ...restProps
   }, forwardRef) => {
-    let elementProps = restProps;
+    const elementProps = useAriaDisabled(
+      {
+        ...restProps,
+        ariaDisabled
+      },
+      { allowArrows: true }
+    );
     const { pressProps } = usePress({
       preventFocusOnPress: "auto",
       disabled: disabled || booleanify(ariaDisabled),
@@ -125,16 +99,12 @@ const Item = React.forwardRef(
       onHoverEnd,
       onHoverChange
     });
-    elementProps = mergeProps(pressProps, hoverProps);
     return /* @__PURE__ */ jsx(
-      StyledItem,
+      StyledBaseItem,
       {
-        ...elementProps,
+        ...mergeProps(pressProps, hoverProps),
         "data-hovered": isHovered ? "" : void 0,
         asChild,
-        active,
-        unstyled: asChild === true ? unstyled : false,
-        wrapper: asChild !== true,
         disabled,
         "aria-disabled": booleanify(ariaDisabled) ? "true" : ariaDisabled,
         ref: forwardRef
@@ -143,16 +113,127 @@ const Item = React.forwardRef(
   }
 );
 
-const StyledIcon = styled(Item, {
+const disabledSelector = '&[disabled], &[aria-disabled="true"]';
+const sharedStyles = {
+  base: {
+    backgroundColor: "$transparent",
+    borderRadius: "$50",
+    height: "$10",
+    border: "none"
+  },
+  old: {
+    ...focus.css({
+      boxShadow: "$focus-small",
+      outline: "1px solid transparent"
+    }),
+    [disabledSelector]: {
+      cursor: "default",
+      color: "$text-neutrals-disabled"
+    },
+    "&[disabled]": {
+      pointerEvents: "none"
+    },
+    '&:not([aria-disabled="true"])': {
+      "&[data-hovered]": {
+        backgroundColor: "$background-primary-subtle-hover",
+        color: "$icon-primary-hover"
+      },
+      "&:active, &[data-pressed]": {
+        backgroundColor: "$background-primary-subtle-active",
+        color: "$icon-primary-active"
+      }
+    }
+  },
+  v1: {
+    ...focus.css({
+      boxShadow: "$focus-v1"
+    }),
+    "&[disabled]": {
+      pointerEvents: "none"
+    },
+    '&:not([aria-disabled="true"])': {
+      "&[data-hovered]": {
+        backgroundColor: "$background-neutrals-hover"
+      },
+      "&:active, &[data-pressed]": {
+        backgroundColor: "$background-neutrals-active"
+      }
+    }
+  }
+};
+
+const StyledIcon = styled(BaseItem, {
   padding: 0,
-  border: "none",
   font: "unset",
   width: "$10",
-  color: "$icon-neutrals"
+  color: "$icon-neutrals",
+  ...sharedStyles.base,
+  variants: {
+    v1: {
+      true: {},
+      false: {}
+    },
+    active: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      v1: true,
+      active: true,
+      css: {
+        backgroundColor: "$background-primary-subtle",
+        color: "$icon-primary-selected"
+      }
+    },
+    {
+      v1: false,
+      active: true,
+      css: {
+        backgroundColor: "$background-primary-subtle-selected",
+        color: "$icon-primary-selected"
+      }
+    },
+    {
+      v1: true,
+      active: false,
+      css: {
+        ...sharedStyles.v1,
+        [disabledSelector]: {
+          pointerEvents: "none",
+          color: "$icon-neutrals-disabled"
+        }
+      }
+    },
+    {
+      v1: false,
+      active: false,
+      css: sharedStyles.old
+    }
+  ]
 });
 
+const ToolbarContext = createContext({});
+const ToolbarProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsx(
+  ToolbarContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
+const useToolbarContext = () => useContext(ToolbarContext);
+
 const Icon = React.forwardRef(
-  (props, forwardRef) => /* @__PURE__ */ jsx(StyledIcon, { unstyled: false, ...props, ref: forwardRef })
+  ({ active = false, ...restProps }, forwardRef) => {
+    const { v1 } = useToolbarContext();
+    return /* @__PURE__ */ jsx(StyledIcon, { ...restProps, v1, active, ref: forwardRef });
+  }
 );
 
 const StyledSeparator = styled(Separator$1, {
@@ -169,39 +250,132 @@ const StyledSeparator = styled(Separator$1, {
     height: "1px",
     width: "$6",
     margin: "$50 0"
+  },
+  variants: {
+    v1: {
+      true: { backgroundColor: "$border-neutrals-subtle" }
+    }
   }
 });
 
-const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef }));
+const Separator = React.forwardRef((props, forwardRef) => {
+  const { v1 } = useToolbarContext();
+  return /* @__PURE__ */ jsx(StyledSeparator, { ...props, v1, ref: forwardRef });
+});
 
-const StyledLink = styled(Item, {
+const StyledLink = styled(BaseItem, {
   paddingX: "$150",
-  textDecoration: "none"
+  textDecoration: "none",
+  ...sharedStyles.base,
+  variants: {
+    v1: {
+      true: {
+        ...sharedStyles.v1,
+        color: "$text-primary",
+        textDecoration: "underline solid",
+        textDecorationThickness: "1px",
+        textUnderlineOffset: "4px",
+        outline: "none",
+        [disabledSelector]: {
+          pointerEvents: "none",
+          color: "$text-neutrals-disabled"
+        }
+      },
+      false: sharedStyles.old
+    }
+  }
 });
 
 const Link = React.forwardRef(
-  ({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledLink, { asChild: true, unstyled: false, ...restProps, ref: forwardRef, children: /* @__PURE__ */ jsx("a", { href, children }) })
+  ({ children, href, ...restProps }, forwardRef) => {
+    const { v1 } = useToolbarContext();
+    return /* @__PURE__ */ jsx(StyledLink, { ...restProps, asChild: true, v1, children: /* @__PURE__ */ jsx("a", { href, ref: forwardRef, children }) });
+  }
+);
+
+const StyledItem = styled(BaseItem, {
+  ...sharedStyles.base,
+  variants: {
+    v1: {
+      true: {},
+      false: {}
+    },
+    active: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      v1: true,
+      active: true,
+      css: {
+        backgroundColor: "$background-primary-subtle",
+        color: "$text-primary-selected"
+      }
+    },
+    {
+      v1: false,
+      active: true,
+      css: {
+        backgroundColor: "$background-primary-subtle-selected",
+        color: "$text-primary-selected"
+      }
+    },
+    {
+      v1: true,
+      active: false,
+      css: {
+        ...sharedStyles.v1,
+        [disabledSelector]: {
+          pointerEvents: "none",
+          color: "$text-neutrals-disabled"
+        }
+      }
+    },
+    {
+      v1: false,
+      active: false,
+      css: sharedStyles.old
+    }
+  ]
+});
+
+const Item = React.forwardRef(
+  ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {
+    const { v1 } = useToolbarContext();
+    const shouldRenderUnstyled = asChild === true ? unstyled : false;
+    if (shouldRenderUnstyled) {
+      return /* @__PURE__ */ jsx(BaseItem, { ...restProps, asChild, ref: forwardRef });
+    }
+    return /* @__PURE__ */ jsx(StyledItem, { ...restProps, v1, active, ref: forwardRef });
+  }
 );
 
 const Toolbar = React.forwardRef(
   ({
-    unstyled = false,
+    unstyled,
     orientation = "horizontal",
+    variant = "floating",
     dir = "ltr",
     loop = true,
-    direction,
     ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsx(
-    StyledToolbar,
-    {
-      unstyled,
-      orientation,
-      dir: direction != null ? direction : dir,
-      loop,
-      ref: forwardRef,
-      ...restProps
-    }
-  )
+  }, forwardRef) => {
+    const [v1] = useNewDesignLanguage();
+    const variantProp = unstyled === void 0 ? variant : unstyled ? "flat" : "floating";
+    return /* @__PURE__ */ jsx(ToolbarProvider, { v1, children: /* @__PURE__ */ jsx(
+      StyledToolbar,
+      {
+        v1,
+        variant: variantProp,
+        orientation,
+        dir,
+        loop,
+        ref: forwardRef,
+        ...restProps
+      }
+    ) });
+  }
 );
 Toolbar.Icon = Icon;
 Toolbar.Item = Item;

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\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\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',\n          outline: '1px solid transparent',\n        }),\n\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$icon-primary-hover',\n        },\n\n        '&:active, &[data-pressed]': {\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 { booleanify } from '@mirohq/design-system-utils'\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      disabled = false,\n      'aria-disabled': ariaDisabled,\n      asChild,\n      unstyled = true,\n      active = false,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    let elementProps = restProps\n\n    const { pressProps } = usePress({\n      preventFocusOnPress: 'auto',\n      disabled: disabled || booleanify(ariaDisabled),\n      ...elementProps,\n    })\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n    })\n\n    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        disabled={disabled}\n        aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\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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"}
+{"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/base-item.styled.ts","../src/partials/base-item.tsx","../src/styles.ts","../src/partials/icon.styled.tsx","../src/hooks/use-toolbar-context.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/partials/item.styled.tsx","../src/partials/item.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    v1: {\n      true: {},\n    },\n    variant: {\n      floating: {},\n      flat: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'floating',\n      v1: false,\n      css: {\n        backgroundColor: '$background-neutrals-container',\n        boxShadow: '$50',\n        borderRadius: '$50',\n        padding: '2px',\n      },\n    },\n    {\n      variant: 'floating',\n      v1: true,\n      css: {\n        backgroundColor: '$background-neutrals-layout',\n        boxShadow: '0px 1px 8px 0px rgba(34, 36, 40, 0.05)',\n        border: '0.5px solid $border-neutrals-subtle',\n        borderRadius: '$100',\n        padding: '$50',\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'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  userSelect: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n\n  '&[tabindex=\"0\"]': {\n    zIndex: '1',\n  },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\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 { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n  extends StyledBaseItemProps,\n    HoverEvents,\n    PressEvents {\n  disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n  ElementRef<typeof StyledBaseItem>,\n  BaseItemProps\n>(\n  (\n    {\n      disabled = false,\n      'aria-disabled': ariaDisabled,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const elementProps = useAriaDisabled(\n      {\n        ...restProps,\n        ariaDisabled,\n      },\n      { allowArrows: true }\n    )\n\n    const { pressProps } = usePress({\n      preventFocusOnPress: 'auto',\n      disabled: disabled || booleanify(ariaDisabled),\n      ...elementProps,\n    })\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n    })\n\n    return (\n      <StyledBaseItem\n        {...mergeProps(pressProps, hoverProps)}\n        data-hovered={isHovered ? '' : undefined}\n        asChild={asChild}\n        disabled={disabled}\n        aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n  base: {\n    backgroundColor: '$transparent',\n    borderRadius: '$50',\n    height: '$10',\n    border: 'none',\n  },\n  old: {\n    ...focus.css({\n      boxShadow: '$focus-small',\n      outline: '1px solid transparent',\n    }),\n\n    [disabledSelector]: {\n      cursor: 'default',\n      color: '$text-neutrals-disabled',\n    },\n\n    '&[disabled]': {\n      pointerEvents: 'none',\n    },\n\n    '&:not([aria-disabled=\"true\"])': {\n      '&[data-hovered]': {\n        backgroundColor: '$background-primary-subtle-hover',\n        color: '$icon-primary-hover',\n      },\n\n      '&:active, &[data-pressed]': {\n        backgroundColor: '$background-primary-subtle-active',\n        color: '$icon-primary-active',\n      },\n    },\n  },\n  v1: {\n    ...focus.css({\n      boxShadow: '$focus-v1',\n    }),\n\n    '&[disabled]': {\n      pointerEvents: 'none',\n    },\n\n    '&:not([aria-disabled=\"true\"])': {\n      '&[data-hovered]': {\n        backgroundColor: '$background-neutrals-hover',\n      },\n\n      '&:active, &[data-pressed]': {\n        backgroundColor: '$background-neutrals-active',\n      },\n    },\n  },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n  padding: 0,\n  font: 'unset',\n  width: '$10',\n  color: '$icon-neutrals',\n\n  ...sharedStyles.base,\n\n  variants: {\n    v1: {\n      true: {},\n      false: {},\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n  },\n\n  compoundVariants: [\n    {\n      v1: true,\n      active: true,\n      css: {\n        backgroundColor: '$background-primary-subtle',\n        color: '$icon-primary-selected',\n      },\n    },\n    {\n      v1: false,\n      active: true,\n      css: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$icon-primary-selected',\n      },\n    },\n    {\n      v1: true,\n      active: false,\n      css: {\n        ...sharedStyles.v1,\n\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    {\n      v1: false,\n      active: false,\n      css: sharedStyles.old,\n    },\n  ],\n})\n","import React, { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\ninterface ToolbarProps {\n  v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport type ToolbarProviderProps = ToolbarProps\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<ToolbarProviderProps>): React.ReactElement => (\n  <ToolbarContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n  useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends BaseItemProps {\n  /**\n   * Renders icon in enabled/toggled state.\n   * @default false\n   */\n  active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n  ({ active = false, ...restProps }, forwardRef) => {\n    const { v1 } = useToolbarContext()\n\n    return (\n      <StyledIcon {...restProps} v1={v1} active={active} ref={forwardRef} />\n    )\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  variants: {\n    v1: {\n      true: { backgroundColor: '$border-neutrals-subtle' },\n    },\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'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface SeparatorProps extends Omit<StyledSeparatorProps, 'v1'> {}\n\nexport const Separator = React.forwardRef<\n  ElementRef<typeof StyledSeparator>,\n  SeparatorProps\n>((props, forwardRef) => {\n  const { v1 } = useToolbarContext()\n\n  return <StyledSeparator {...props} v1={v1} ref={forwardRef} />\n})\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n  paddingX: '$150',\n  textDecoration: 'none',\n\n  ...sharedStyles.base,\n\n  variants: {\n    v1: {\n      true: {\n        ...sharedStyles.v1,\n        color: '$text-primary',\n        textDecoration: 'underline solid',\n        textDecorationThickness: '1px',\n        textUnderlineOffset: '4px',\n        outline: 'none',\n\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n      },\n      false: sharedStyles.old,\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n  AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n  ({ children, href, ...restProps }, forwardRef) => {\n    const { v1 } = useToolbarContext()\n\n    return (\n      <StyledLink {...restProps} asChild v1={v1}>\n        <a href={href} ref={forwardRef}>\n          {children}\n        </a>\n      </StyledLink>\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n  ...sharedStyles.base,\n\n  variants: {\n    v1: {\n      true: {},\n      false: {},\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n  },\n\n  compoundVariants: [\n    {\n      v1: true,\n      active: true,\n      css: {\n        backgroundColor: '$background-primary-subtle',\n        color: '$text-primary-selected',\n      },\n    },\n    {\n      v1: false,\n      active: true,\n      css: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$text-primary-selected',\n      },\n    },\n    {\n      v1: true,\n      active: false,\n      css: {\n        ...sharedStyles.v1,\n\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n      },\n    },\n    {\n      v1: false,\n      active: false,\n      css: sharedStyles.old,\n    },\n  ],\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\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  /**\n   * Renders item in enabled/toggled state.\n   * @default false\n   */\n  active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n  ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n    const { v1 } = useToolbarContext()\n\n    const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n    if (shouldRenderUnstyled) {\n      return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n    }\n\n    return (\n      <StyledItem {...restProps} v1={v1} active={active} ref={forwardRef} />\n    )\n  }\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\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'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\n\nexport interface ToolbarProps extends Omit<StyledToolbarProps, 'v1'> {\n  /**\n   * @deprecated Please use variant for non-floating toolbar\n   */\n  unstyled?: boolean\n\n  /**\n   * When floating, the toolbar has shadow and border to differentiate it from the surface\n   * @default floating\n   */\n  variant?: StyledToolbarProps['variant']\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   * 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,\n      orientation = 'horizontal',\n      variant = 'floating',\n      dir = 'ltr',\n      loop = true,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const [v1] = useNewDesignLanguage()\n\n    const variantProp =\n      unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n    return (\n      <ToolbarProvider v1={v1}>\n        <StyledToolbar\n          v1={v1}\n          variant={variantProp}\n          orientation={orientation}\n          dir={dir}\n          loop={loop}\n          ref={forwardRef}\n          {...restProps}\n        />\n      </ToolbarProvider>\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

@@ -7,65 +7,80 @@ 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<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>>, "unstyled"> & _stitches_react_types_styled_component.TransformProps<{
-    unstyled?: boolean | "false" | undefined;
+declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>>, "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "true" | undefined;
+    variant?: "flat" | "floating" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>, {
-    unstyled?: boolean | "false" | undefined;
+    v1?: boolean | "true" | undefined;
+    variant?: "flat" | "floating" | undefined;
 }, {}>;
 declare type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>;
 
-declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>>, "unstyled" | "wrapper" | "active"> & _stitches_react_types_styled_component.TransformProps<{
-    unstyled?: boolean | "true" | "false" | undefined;
-    wrapper?: boolean | "true" | undefined;
-    active?: boolean | "true" | "false" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>, {
-    unstyled?: boolean | "true" | "false" | undefined;
-    wrapper?: boolean | "true" | undefined;
-    active?: boolean | "true" | "false" | undefined;
-}, {}>;
-declare type StyledItemProps = StrictComponentProps<typeof StyledItem>;
+declare const StyledBaseItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>, {}, {}>;
+declare type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>;
 
-interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {
+interface BaseItemProps extends StyledBaseItemProps, HoverEvents, PressEvents {
+    disabled?: boolean;
+}
+
+interface IconProps extends BaseItemProps {
     /**
-     * Renders item in enabled/toggled state.
+     * Renders icon 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.
-     * Note: Must be used together with asChild
-     * @default true
-     */
-    unstyled?: boolean;
-    disabled?: boolean;
 }
-declare const Item: react__default.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
-
-declare type IconProps = Omit<ItemProps, 'unstyled'>;
 declare const Icon: react__default.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
 
-declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
+declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>>, "v1"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "true" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>, {
+    v1?: boolean | "true" | undefined;
+}, {}>;
 declare type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>;
 
-interface SeparatorProps extends StyledSeparatorProps {
+interface SeparatorProps extends Omit<StyledSeparatorProps, 'v1'> {
 }
 declare const Separator: react__default.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 
-declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>, {}, {}>;
+declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<Omit<BaseItemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>>, "v1"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "true" | "false" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<Omit<BaseItemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>, {
+    v1?: boolean | "true" | "false" | undefined;
+}, {}>;
 
-declare type ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> & AnchorHTMLAttributes<typeof StyledLink>;
+declare type ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> & AnchorHTMLAttributes<typeof StyledLink>;
 interface LinkProps extends ItemPropsWithAnchor {
 }
-declare const Link: react__default.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+declare const Link: react__default.ForwardRefExoticComponent<LinkProps & react__default.RefAttributes<HTMLAnchorElement>>;
 
-interface ToolbarProps extends StyledToolbarProps {
+interface ItemProps extends BaseItemProps {
+    /**
+     * 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.
+     * Note: Must be used together with asChild
+     * @default true
+     */
+    unstyled?: boolean;
     /**
-     * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)
+     * Renders item in enabled/toggled state.
      * @default false
      */
+    active?: boolean;
+}
+declare const Item: react__default.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+
+interface ToolbarProps extends Omit<StyledToolbarProps, 'v1'> {
+    /**
+     * @deprecated Please use variant for non-floating toolbar
+     */
     unstyled?: boolean;
+    /**
+     * When floating, the toolbar has shadow and border to differentiate it from the surface
+     * @default floating
+     */
+    variant?: StyledToolbarProps['variant'];
     /**
      * The orientation of the toolbar
      * @default 'horizontal'
@@ -76,11 +91,6 @@ interface ToolbarProps extends StyledToolbarProps {
      * @default 'ltr'
      */
     dir?: 'ltr' | 'rtl';
-    /**
-     * The reading direction of the toolbar
-     * @deprecated use dir instead
-     */
-    direction?: 'ltr' | 'rtl';
     /**
      * When true, keyboard navigation will loop from last tab to first, and vice versa
      * @default true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-toolbar",
-  "version": "2.5.30",
+  "version": "2.6.0-tag-api-changes.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -31,10 +31,12 @@
     "@react-aria/interactions": "^3.13.0",
     "@react-aria/utils": "^3.13.0",
     "@react-types/shared": "^3.16.0",
-    "@mirohq/design-system-stitches": "^2.6.25",
+    "@mirohq/design-system-experiments": "^0.2.0",
     "@mirohq/design-system-styles": "^1.2.25",
     "@mirohq/design-system-use-press": "^0.4.1",
-    "@mirohq/design-system-utils": "^0.15.4"
+    "@mirohq/design-system-use-aria-disabled": "^0.2.0-tag-api-changes.0",
+    "@mirohq/design-system-utils": "^0.15.4",
+    "@mirohq/design-system-stitches": "^2.6.25"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",