@mirohq/design-system-toolbar 3.2.6 → 3.3.0

package/dist/main.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var RadixToolbar = require('@radix-ui/react-toolbar');
+var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 var interactions = require('@react-aria/interactions');
 var utils = require('@react-aria/utils');
 var designSystemUsePress = require('@mirohq/design-system-use-press');
@@ -38,13 +39,6 @@ const StyledToolbar = designSystemStitches.styled(RadixToolbar.Root, {
   alignItems: "center",
   maxWidth: "100%",
   gap: "$50",
-  '&[data-orientation="vertical"]': {
-    flexDirection: "column",
-    width: "$12"
-  },
-  '&[data-orientation="horizontal"]': {
-    height: "$12"
-  },
   variants: {
     variant: {
       floating: {
@@ -55,10 +49,38 @@ const StyledToolbar = designSystemStitches.styled(RadixToolbar.Root, {
         padding: "$50"
       },
       flat: {}
+    },
+    size: {
+      small: {
+        '&[data-orientation="vertical"]': {
+          flexDirection: "column",
+          width: "$10"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "$10"
+        }
+      },
+      medium: {
+        '&[data-orientation="vertical"]': {
+          flexDirection: "column",
+          width: "$12"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "$12"
+        }
+      }
     }
+  },
+  defaultVariants: {
+    size: "medium"
   }
 });
 
+const disabledSelector = '&[disabled], &[aria-disabled="true"]';
+const sizes = {
+  small: "$8",
+  medium: "$10"
+};
 const StyledBaseItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
   boxSizing: "border-box",
   cursor: "pointer",
@@ -67,8 +89,40 @@ const StyledBaseItem = designSystemStitches.styled(RadixToolbar__namespace.Butto
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
+  backgroundColor: "$transparent",
+  borderRadius: "$50",
+  border: "none",
+  ...designSystemStyles.focus.css({
+    boxShadow: "$focus"
+  }),
+  "&[disabled]": {
+    pointerEvents: "none"
+  },
+  '&:not([aria-disabled="true"])': {
+    "&[data-hovered]": {
+      backgroundColor: "$background-neutrals-hover"
+    },
+    "&:active, &[data-pressed]": {
+      backgroundColor: "$background-neutrals-active"
+    }
+  },
   '&[tabindex="0"]': {
     zIndex: "1"
+  },
+  variants: {
+    size: {
+      small: {
+        height: sizes.small,
+        fontSize: "$175"
+      },
+      medium: {
+        height: sizes.medium,
+        fontSize: "$200"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
   }
 });
 
@@ -77,6 +131,7 @@ const BaseItem = React.forwardRef(
     disabled = false,
     "aria-disabled": ariaDisabled,
     asChild,
+    size,
     onHoverStart,
     onHoverEnd,
     onHoverChange,
@@ -105,6 +160,7 @@ const BaseItem = React.forwardRef(
         ...utils.mergeProps(pressProps, hoverProps),
         "data-hovered": isHovered ? "" : void 0,
         asChild,
+        size,
         disabled,
         "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? "true" : ariaDisabled,
         ref: forwardRef
@@ -113,36 +169,11 @@ const BaseItem = React.forwardRef(
   }
 );
 
-const disabledSelector = '&[disabled], &[aria-disabled="true"]';
-const sharedStyles = {
-  base: {
-    backgroundColor: "$transparent",
-    borderRadius: "$50",
-    height: "$10",
-    border: "none",
-    ...designSystemStyles.focus.css({
-      boxShadow: "$focus"
-    }),
-    "&[disabled]": {
-      pointerEvents: "none"
-    },
-    '&:not([aria-disabled="true"])': {
-      "&[data-hovered]": {
-        backgroundColor: "$background-neutrals-hover"
-      },
-      "&:active, &[data-pressed]": {
-        backgroundColor: "$background-neutrals-active"
-      }
-    }
-  }
-};
-
+const iconSelector = "& svg, & img";
 const StyledIcon = designSystemStitches.styled(BaseItem, {
   padding: 0,
   font: "unset",
-  width: "$10",
   color: "$icon-neutrals",
-  ...sharedStyles.base,
   variants: {
     active: {
       true: {
@@ -155,12 +186,43 @@ const StyledIcon = designSystemStitches.styled(BaseItem, {
           color: "$icon-neutrals-disabled"
         }
       }
+    },
+    size: {
+      small: {
+        width: sizes.small,
+        height: sizes.small,
+        [iconSelector]: {
+          ...designSystemBaseIcon.styles.size.small
+        }
+      },
+      medium: {
+        width: sizes.medium,
+        height: sizes.medium,
+        [iconSelector]: {
+          ...designSystemBaseIcon.styles.size.medium
+        }
+      }
     }
+  },
+  defaultVariants: {
+    size: "medium"
   }
 });
 
+const ToolbarContext = React.createContext({
+  size: "medium"
+});
+const ToolbarProvider = ({
+  children,
+  size = "medium"
+}) => /* @__PURE__ */ jsxRuntime.jsx(ToolbarContext.Provider, { value: { size }, children });
+const useToolbarContext = () => React.useContext(ToolbarContext);
+
 const Icon = React.forwardRef(
-  ({ active = false, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { ...restProps, active, ref: forwardRef })
+  ({ active = false, ...restProps }, forwardRef) => {
+    const { size } = useToolbarContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { ...restProps, active, size, ref: forwardRef });
+  }
 );
 
 const StyledSeparator = designSystemStitches.styled(RadixToolbar.Separator, {
@@ -168,23 +230,46 @@ const StyledSeparator = designSystemStitches.styled(RadixToolbar.Separator, {
   display: "block",
   boxSizing: "border-box",
   backgroundColor: "$border-neutrals-subtle",
-  '&[data-orientation="vertical"]': {
-    width: "1px",
-    height: "$6",
-    margin: "0 $50"
+  variants: {
+    size: {
+      small: {
+        '&[data-orientation="vertical"]': {
+          width: "1px",
+          height: "$5",
+          margin: "0 $50"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "1px",
+          width: "$5",
+          margin: "$50 0"
+        }
+      },
+      medium: {
+        '&[data-orientation="vertical"]': {
+          width: "1px",
+          height: "$6",
+          margin: "0 $50"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "1px",
+          width: "$6",
+          margin: "$50 0"
+        }
+      }
+    }
   },
-  '&[data-orientation="horizontal"]': {
-    height: "1px",
-    width: "$6",
-    margin: "$50 0"
+  defaultVariants: {
+    size: "medium"
   }
 });
 
-const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef }));
+const Separator = React.forwardRef((props, forwardRef) => {
+  const { size } = useToolbarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, size, ref: forwardRef });
+});
 
 const StyledLink = designSystemStitches.styled(BaseItem, {
   paddingX: "$150",
-  ...sharedStyles.base,
   color: "$text-primary",
   textDecoration: "underline solid",
   textDecorationThickness: "1px",
@@ -197,11 +282,13 @@ const StyledLink = designSystemStitches.styled(BaseItem, {
 });
 
 const Link = React.forwardRef(
-  ({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { ...restProps, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, ref: forwardRef, children }) })
+  ({ children, href, ...restProps }, forwardRef) => {
+    const { size } = useToolbarContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { ...restProps, size, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, ref: forwardRef, children }) });
+  }
 );
 
 const StyledItem = designSystemStitches.styled(BaseItem, {
-  ...sharedStyles.base,
   variants: {
     active: {
       true: {
@@ -220,6 +307,7 @@ const StyledItem = designSystemStitches.styled(BaseItem, {
 
 const Item = React.forwardRef(
   ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {
+    const { size } = useToolbarContext();
     const shouldRenderUnstyled = asChild === true ? unstyled : false;
     if (shouldRenderUnstyled) {
       return /* @__PURE__ */ jsxRuntime.jsx(BaseItem, { ...restProps, asChild, ref: forwardRef });
@@ -230,6 +318,7 @@ const Item = React.forwardRef(
         ...restProps,
         asChild,
         active,
+        size,
         ref: forwardRef
       }
     );
@@ -300,6 +389,7 @@ const Toolbar = React.forwardRef(
     variant = "floating",
     dir = "ltr",
     loop = true,
+    size = "medium",
     onKeyDown,
     ...restProps
   }, forwardRef) => {
@@ -310,18 +400,19 @@ const Toolbar = React.forwardRef(
       loop,
       onKeyDown
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ToolbarProvider, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
       StyledToolbar,
       {
         variant: variantProp,
         orientation,
         dir,
         loop,
+        size,
         onKeyDown: handleKeyDown,
         ref: forwardRef,
         ...restProps
       }
-    );
+    ) });
   }
 );
 Toolbar.Icon = Icon;

package/dist/main.js.map

@@ -1 +1 @@
-{"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/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/hooks/use-toolbar-keyboard-navigation.ts","../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    variant: {\n      floating: {\n        backgroundColor: '$background-neutrals-layout',\n        boxShadow: '$elevation-100',\n        border: '0.5px solid $border-neutrals-subtle',\n        borderRadius: '$100',\n        padding: '$50',\n      },\n      flat: {},\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    ...focus.css({\n      boxShadow: '$focus',\n    }),\n    '&[disabled]': {\n      pointerEvents: 'none',\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    active: {\n      true: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$icon-primary-selected',\n      },\n      false: {\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\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    <StyledIcon {...restProps} active={active} 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: '$border-neutrals-subtle',\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 { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n  paddingX: '$150',\n\n  ...sharedStyles.base,\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","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\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    <StyledLink {...restProps} asChild>\n      <a href={href} ref={forwardRef}>\n        {children}\n      </a>\n    </StyledLink>\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    active: {\n      true: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$text-primary-selected',\n      },\n      false: {\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\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 shouldRenderUnstyled = asChild === true ? unstyled : false\n\n    if (shouldRenderUnstyled) {\n      return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n    }\n\n    return (\n      <StyledItem\n        {...restProps}\n        asChild={asChild}\n        active={active}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { useCallback } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { useDirection } from '@radix-ui/react-direction'\n\ninterface UseToolbarKeyboardNavigationProps {\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  loop?: boolean\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n}\n\n/**\n * Custom keyboard navigation for Radix Toolbar that allows navigation to aria-disabled items.\n *\n * By default, Radix UI Toolbar skips items with aria-disabled=\"true\" during keyboard navigation.\n * This hook intercepts arrow key events and manually handles focus management when aria-disabled\n * items are involved, while delegating to Radix for normal navigation.\n */\nexport const useToolbarKeyboardNavigation = ({\n  orientation = 'horizontal',\n  dir,\n  loop = true,\n  onKeyDown,\n}: UseToolbarKeyboardNavigationProps): ((\n  event: KeyboardEvent<HTMLDivElement>\n) => void) => {\n  const localDir = useDirection(dir ?? 'ltr')\n\n  return useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      const { key, currentTarget } = event\n      const isHorizontal = orientation === 'horizontal'\n      const isRTL = localDir === 'rtl'\n\n      const isForward =\n        (isHorizontal && key === (isRTL ? 'ArrowLeft' : 'ArrowRight')) ||\n        (!isHorizontal && key === 'ArrowDown')\n\n      const isBackward =\n        (isHorizontal && key === (isRTL ? 'ArrowRight' : 'ArrowLeft')) ||\n        (!isHorizontal && key === 'ArrowUp')\n\n      if (!isForward && !isBackward) {\n        onKeyDown?.(event)\n        return\n      }\n\n      // Find all navigable items (using Radix's collection attribute)\n      const items = Array.from(\n        currentTarget.querySelectorAll('[data-radix-collection-item]')\n      ).filter(item => !item.hasAttribute('disabled')) as HTMLElement[]\n\n      // Find currently focused item\n      const currentIndex = items.findIndex(item =>\n        item.contains(document.activeElement)\n      )\n\n      if (items.length === 0 || currentIndex === -1) {\n        return onKeyDown?.(event)\n      }\n\n      // Calculate next item index\n      let nextIndex: number\n      if (isForward) {\n        nextIndex = currentIndex + 1\n        if (nextIndex >= items.length) {\n          nextIndex = loop ? 0 : currentIndex\n        }\n      } else {\n        nextIndex = currentIndex - 1\n        if (nextIndex < 0) {\n          nextIndex = loop ? items.length - 1 : currentIndex\n        }\n      }\n\n      // Check if aria-disabled items are involved\n      const currentIsAriaDisabled =\n        items[currentIndex]?.getAttribute('aria-disabled') === 'true'\n      const nextIsAriaDisabled =\n        items[nextIndex]?.getAttribute('aria-disabled') === 'true'\n\n      // Only override Radix if aria-disabled items are involved\n      // Otherwise, let Radix handle it with all their edge cases and optimizations\n      if (!currentIsAriaDisabled && !nextIsAriaDisabled) {\n        onKeyDown?.(event)\n        return\n      }\n\n      // Take control: prevent Radix's handler and manually move focus\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (nextIndex !== currentIndex) {\n        items[nextIndex]?.focus()\n      }\n\n      onKeyDown?.(event)\n    },\n    [orientation, localDir, loop, onKeyDown]\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'\nimport { useToolbarKeyboardNavigation } from './hooks/use-toolbar-keyboard-navigation'\n\nexport interface ToolbarProps extends StyledToolbarProps {\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      onKeyDown,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const variantProp =\n      unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n    const handleKeyDown = useToolbarKeyboardNavigation({\n      orientation,\n      dir,\n      loop,\n      onKeyDown,\n    })\n\n    return (\n      <StyledToolbar\n        variant={variantProp}\n        orientation={orientation}\n        dir={dir}\n        loop={loop}\n        onKeyDown={handleKeyDown}\n        ref={forwardRef}\n        {...restProps}\n      />\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","useAriaDisabled","usePress","booleanify","useHover","jsx","mergeProps","focus","Separator","useDirection","useCallback"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/base-item.styled.ts","../src/partials/base-item.tsx","../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/hooks/use-toolbar-keyboard-navigation.ts","../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  variants: {\n    variant: {\n      floating: {\n        backgroundColor: '$background-neutrals-layout',\n        boxShadow: '$elevation-100',\n        border: '0.5px solid $border-neutrals-subtle',\n        borderRadius: '$100',\n        padding: '$50',\n      },\n      flat: {},\n    },\n    size: {\n      small: {\n        '&[data-orientation=\"vertical\"]': {\n          flexDirection: 'column',\n          width: '$10',\n        },\n        '&[data-orientation=\"horizontal\"]': {\n          height: '$10',\n        },\n      },\n      medium: {\n        '&[data-orientation=\"vertical\"]': {\n          flexDirection: 'column',\n          width: '$12',\n        },\n        '&[data-orientation=\"horizontal\"]': {\n          height: '$12',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\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\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sizes = {\n  small: '$8',\n  medium: '$10',\n} as const\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  backgroundColor: '$transparent',\n  borderRadius: '$50',\n  border: 'none',\n  ...focus.css({\n    boxShadow: '$focus',\n  }),\n  '&[disabled]': {\n    pointerEvents: 'none',\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  '&[tabindex=\"0\"]': {\n    zIndex: '1',\n  },\n\n  variants: {\n    size: {\n      small: {\n        height: sizes.small,\n        fontSize: '$175',\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$200',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\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'\nimport type { ToolbarSize } from '../types'\n\nexport interface BaseItemProps\n  extends StyledBaseItemProps,\n    HoverEvents,\n    PressEvents {\n  disabled?: boolean\n  size?: ToolbarSize\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      size,\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        size={size}\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'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sizes } from './base-item.styled'\n\nconst iconSelector = '& svg, & img'\n\nexport const StyledIcon = styled(BaseItem, {\n  padding: 0,\n  font: 'unset',\n  color: '$icon-neutrals',\n\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$icon-primary-selected',\n      },\n      false: {\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      small: {\n        width: sizes.small,\n        height: sizes.small,\n        [iconSelector]: {\n          ...baseIconStyles.size.small,\n        },\n      },\n      medium: {\n        width: sizes.medium,\n        height: sizes.medium,\n        [iconSelector]: {\n          ...baseIconStyles.size.medium,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n})\n","import { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nimport type { ToolbarSize } from '../types'\n\ninterface ToolbarContextProps {\n  size: ToolbarSize\n}\n\nexport interface ToolbarProviderProps {\n  children?: ReactNode\n  size?: ToolbarSize\n}\n\nconst ToolbarContext = createContext<ToolbarContextProps>({\n  size: 'medium',\n})\n\nexport const ToolbarProvider = ({\n  children,\n  size = 'medium',\n}: ToolbarProviderProps): JSX.Element => (\n  <ToolbarContext.Provider value={{ size }}>{children}</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 { size } = useToolbarContext()\n\n    return (\n      <StyledIcon {...restProps} active={active} size={size} 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: '$border-neutrals-subtle',\n\n  variants: {\n    size: {\n      small: {\n        '&[data-orientation=\"vertical\"]': {\n          width: '1px',\n          height: '$5',\n          margin: '0 $50',\n        },\n        '&[data-orientation=\"horizontal\"]': {\n          height: '1px',\n          width: '$5',\n          margin: '$50 0',\n        },\n      },\n      medium: {\n        '&[data-orientation=\"vertical\"]': {\n          width: '1px',\n          height: '$6',\n          margin: '0 $50',\n        },\n        '&[data-orientation=\"horizontal\"]': {\n          height: '1px',\n          width: '$6',\n          margin: '$50 0',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\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 StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n  ElementRef<typeof StyledSeparator>,\n  SeparatorProps\n>((props, forwardRef) => {\n  const { size } = useToolbarContext()\n\n  return <StyledSeparator {...props} size={size} ref={forwardRef} />\n})\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector } from './base-item.styled'\n\nexport const StyledLink = styled(BaseItem, {\n  paddingX: '$150',\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","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 { size } = useToolbarContext()\n\n    return (\n      <StyledLink {...restProps} size={size} asChild>\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 } from './base-item.styled'\n\nexport const StyledItem = styled(BaseItem, {\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$text-primary-selected',\n      },\n      false: {\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\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 { size } = useToolbarContext()\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\n        {...restProps}\n        asChild={asChild}\n        active={active}\n        size={size}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { useCallback } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { useDirection } from '@radix-ui/react-direction'\n\ninterface UseToolbarKeyboardNavigationProps {\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  loop?: boolean\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n}\n\n/**\n * Custom keyboard navigation for Radix Toolbar that allows navigation to aria-disabled items.\n *\n * By default, Radix UI Toolbar skips items with aria-disabled=\"true\" during keyboard navigation.\n * This hook intercepts arrow key events and manually handles focus management when aria-disabled\n * items are involved, while delegating to Radix for normal navigation.\n */\nexport const useToolbarKeyboardNavigation = ({\n  orientation = 'horizontal',\n  dir,\n  loop = true,\n  onKeyDown,\n}: UseToolbarKeyboardNavigationProps): ((\n  event: KeyboardEvent<HTMLDivElement>\n) => void) => {\n  const localDir = useDirection(dir ?? 'ltr')\n\n  return useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      const { key, currentTarget } = event\n      const isHorizontal = orientation === 'horizontal'\n      const isRTL = localDir === 'rtl'\n\n      const isForward =\n        (isHorizontal && key === (isRTL ? 'ArrowLeft' : 'ArrowRight')) ||\n        (!isHorizontal && key === 'ArrowDown')\n\n      const isBackward =\n        (isHorizontal && key === (isRTL ? 'ArrowRight' : 'ArrowLeft')) ||\n        (!isHorizontal && key === 'ArrowUp')\n\n      if (!isForward && !isBackward) {\n        onKeyDown?.(event)\n        return\n      }\n\n      // Find all navigable items (using Radix's collection attribute)\n      const items = Array.from(\n        currentTarget.querySelectorAll('[data-radix-collection-item]')\n      ).filter(item => !item.hasAttribute('disabled')) as HTMLElement[]\n\n      // Find currently focused item\n      const currentIndex = items.findIndex(item =>\n        item.contains(document.activeElement)\n      )\n\n      if (items.length === 0 || currentIndex === -1) {\n        return onKeyDown?.(event)\n      }\n\n      // Calculate next item index\n      let nextIndex: number\n      if (isForward) {\n        nextIndex = currentIndex + 1\n        if (nextIndex >= items.length) {\n          nextIndex = loop ? 0 : currentIndex\n        }\n      } else {\n        nextIndex = currentIndex - 1\n        if (nextIndex < 0) {\n          nextIndex = loop ? items.length - 1 : currentIndex\n        }\n      }\n\n      // Check if aria-disabled items are involved\n      const currentIsAriaDisabled =\n        items[currentIndex]?.getAttribute('aria-disabled') === 'true'\n      const nextIsAriaDisabled =\n        items[nextIndex]?.getAttribute('aria-disabled') === 'true'\n\n      // Only override Radix if aria-disabled items are involved\n      // Otherwise, let Radix handle it with all their edge cases and optimizations\n      if (!currentIsAriaDisabled && !nextIsAriaDisabled) {\n        onKeyDown?.(event)\n        return\n      }\n\n      // Take control: prevent Radix's handler and manually move focus\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (nextIndex !== currentIndex) {\n        items[nextIndex]?.focus()\n      }\n\n      onKeyDown?.(event)\n    },\n    [orientation, localDir, loop, onKeyDown]\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'\nimport { useToolbarKeyboardNavigation } from './hooks/use-toolbar-keyboard-navigation'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\nimport type { ToolbarSize } from './types'\n\nexport interface ToolbarProps extends StyledToolbarProps {\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  /**\n   * The size of toolbar items\n   * @default 'medium'\n   */\n  size?: ToolbarSize\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      size = 'medium',\n      onKeyDown,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const variantProp =\n      unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n    const handleKeyDown = useToolbarKeyboardNavigation({\n      orientation,\n      dir,\n      loop,\n      onKeyDown,\n    })\n\n    return (\n      <ToolbarProvider size={size}>\n        <StyledToolbar\n          variant={variantProp}\n          orientation={orientation}\n          dir={dir}\n          loop={loop}\n          size={size}\n          onKeyDown={handleKeyDown}\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","focus","useAriaDisabled","usePress","booleanify","useHover","jsx","mergeProps","baseIconStyles","createContext","useContext","Separator","useDirection","useCallback"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,aAAA,GAAgBA,4BAAOC,iBAAA,EAAM;AAAA,EACxC,GAAA,EAAK,OAAA;AAAA,EACL,OAAA,EAAS,MAAA;AAAA,EACT,SAAA,EAAW,YAAA;AAAA,EACX,UAAA,EAAY,QAAA;AAAA,EACZ,QAAA,EAAU,MAAA;AAAA,EACV,GAAA,EAAK,KAAA;AAAA,EAEL,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,QAAA,EAAU;AAAA,QACR,eAAA,EAAiB,6BAAA;AAAA,QACjB,SAAA,EAAW,gBAAA;AAAA,QACX,MAAA,EAAQ,qCAAA;AAAA,QACR,YAAA,EAAc,MAAA;AAAA,QACd,OAAA,EAAS;AAAA,OACX;AAAA,MACA,MAAM;AAAC,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,gCAAA,EAAkC;AAAA,UAChC,aAAA,EAAe,QAAA;AAAA,UACf,KAAA,EAAO;AAAA,SACT;AAAA,QACA,kCAAA,EAAoC;AAAA,UAClC,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,gCAAA,EAAkC;AAAA,UAChC,aAAA,EAAe,QAAA;AAAA,UACf,KAAA,EAAO;AAAA,SACT;AAAA,QACA,kCAAA,EAAoC;AAAA,UAClC,MAAA,EAAQ;AAAA;AACV;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;;AC1CM,MAAM,gBAAA,GAAmB,sCAAA;AAEzB,MAAM,KAAA,GAAQ;AAAA,EACnB,KAAA,EAAO,IAAA;AAAA,EACP,MAAA,EAAQ;AACV,CAAA;AAEO,MAAM,cAAA,GAAiBD,2BAAA,CAAOE,uBAAA,CAAa,MAAA,EAAQ;AAAA,EACxD,SAAA,EAAW,YAAA;AAAA,EACX,MAAA,EAAQ,SAAA;AAAA,EACR,UAAA,EAAY,MAAA;AAAA,EACZ,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,QAAA;AAAA,EAChB,UAAA,EAAY,CAAA;AAAA,EACZ,eAAA,EAAiB,cAAA;AAAA,EACjB,YAAA,EAAc,KAAA;AAAA,EACd,MAAA,EAAQ,MAAA;AAAA,EACR,GAAGC,yBAAM,GAAA,CAAI;AAAA,IACX,SAAA,EAAW;AAAA,GACZ,CAAA;AAAA,EACD,aAAA,EAAe;AAAA,IACb,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,+BAAA,EAAiC;AAAA,IAC/B,iBAAA,EAAmB;AAAA,MACjB,eAAA,EAAiB;AAAA,KACnB;AAAA,IAEA,2BAAA,EAA6B;AAAA,MAC3B,eAAA,EAAiB;AAAA;AACnB,GACF;AAAA,EAEA,iBAAA,EAAmB;AAAA,IACjB,MAAA,EAAQ;AAAA,GACV;AAAA,EAEA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,QAAQ,KAAA,CAAM,KAAA;AAAA,QACd,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,QAAQ,KAAA,CAAM,MAAA;AAAA,QACd,QAAA,EAAU;AAAA;AACZ;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;;ACpCM,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EAI5B,CACE;AAAA,IACE,QAAA,GAAW,KAAA;AAAA,IACX,eAAA,EAAiB,YAAA;AAAA,IACjB,OAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAG;AAAA,KAEL,UAAA,KACG;AACH,IAAA,MAAM,YAAA,GAAeC,2CAAA;AAAA,MACnB;AAAA,QACE,GAAG,SAAA;AAAA,QACH;AAAA,OACF;AAAA,MACA,EAAE,aAAa,IAAA;AAAK,KACtB;AAEA,IAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,6BAAA,CAAS;AAAA,MAC9B,mBAAA,EAAqB,MAAA;AAAA,MACrB,QAAA,EAAU,QAAA,IAAYC,4BAAA,CAAW,YAAY,CAAA;AAAA,MAC7C,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAU,GAAIC,qBAAA,CAAS;AAAA,MACzC,YAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACE,GAAGC,gBAAA,CAAW,UAAA,EAAY,UAAU,CAAA;AAAA,QACrC,cAAA,EAAc,YAAY,EAAA,GAAK,MAAA;AAAA,QAC/B,OAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,eAAA,EAAeH,4BAAA,CAAW,YAAY,CAAA,GAAI,MAAA,GAAS,YAAA;AAAA,QACnD,GAAA,EAAK;AAAA;AAAA,KACP;AAAA,EAEJ;AACF,CAAA;;ACjEA,MAAM,YAAA,GAAe,cAAA;AAEd,MAAM,UAAA,GAAaN,4BAAO,QAAA,EAAU;AAAA,EACzC,OAAA,EAAS,CAAA;AAAA,EACT,IAAA,EAAM,OAAA;AAAA,EACN,KAAA,EAAO,gBAAA;AAAA,EAEP,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,eAAA,EAAiB,qCAAA;AAAA,QACjB,KAAA,EAAO;AAAA,OACT;AAAA,MACA,KAAA,EAAO;AAAA,QACL,CAAC,gBAAgB,GAAG;AAAA,UAClB,aAAA,EAAe,MAAA;AAAA,UACf,KAAA,EAAO;AAAA;AACT;AACF,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,OAAO,KAAA,CAAM,KAAA;AAAA,QACb,QAAQ,KAAA,CAAM,KAAA;AAAA,QACd,CAAC,YAAY,GAAG;AAAA,UACd,GAAGU,4BAAe,IAAA,CAAK;AAAA;AACzB,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,OAAO,KAAA,CAAM,MAAA;AAAA,QACb,QAAQ,KAAA,CAAM,MAAA;AAAA,QACd,CAAC,YAAY,GAAG;AAAA,UACd,GAAGA,4BAAe,IAAA,CAAK;AAAA;AACzB;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;;AChCD,MAAM,iBAAiBC,mBAAA,CAAmC;AAAA,EACxD,IAAA,EAAM;AACR,CAAC,CAAA;AAEM,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,IAAA,GAAO;AACT,CAAA,qBACEH,cAAA,CAAC,eAAe,QAAA,EAAf,EAAwB,OAAO,EAAE,IAAA,IAAS,QAAA,EAAS,CAAA;AAG/C,MAAM,iBAAA,GAAoB,MAC/BI,gBAAA,CAAW,cAAc,CAAA;;ACXpB,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,MAAA,GAAS,OAAO,GAAG,SAAA,IAAa,UAAA,KAAe;AAChD,IAAA,MAAM,EAAE,IAAA,EAAK,GAAI,iBAAA,EAAkB;AAEnC,IAAA,sCACG,UAAA,EAAA,EAAY,GAAG,WAAW,MAAA,EAAgB,IAAA,EAAY,KAAK,UAAA,EAAY,CAAA;AAAA,EAE5E;AACF,CAAA;;ACnBO,MAAM,eAAA,GAAkBZ,4BAAOa,sBAAA,EAAW;AAAA,EAC/C,GAAA,EAAK,OAAA;AAAA,EACL,OAAA,EAAS,OAAA;AAAA,EACT,SAAA,EAAW,YAAA;AAAA,EACX,eAAA,EAAiB,yBAAA;AAAA,EAEjB,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,gCAAA,EAAkC;AAAA,UAChC,KAAA,EAAO,KAAA;AAAA,UACP,MAAA,EAAQ,IAAA;AAAA,UACR,MAAA,EAAQ;AAAA,SACV;AAAA,QACA,kCAAA,EAAoC;AAAA,UAClC,MAAA,EAAQ,KAAA;AAAA,UACR,KAAA,EAAO,IAAA;AAAA,UACP,MAAA,EAAQ;AAAA;AACV,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,gCAAA,EAAkC;AAAA,UAChC,KAAA,EAAO,KAAA;AAAA,UACP,MAAA,EAAQ,IAAA;AAAA,UACR,MAAA,EAAQ;AAAA,SACV;AAAA,QACA,kCAAA,EAAoC;AAAA,UAClC,MAAA,EAAQ,KAAA;AAAA,UACR,KAAA,EAAO,IAAA;AAAA,UACP,MAAA,EAAQ;AAAA;AACV;AACF;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;;AChCM,MAAM,SAAA,GAAY,KAAA,CAAM,UAAA,CAG7B,CAAC,OAAO,UAAA,KAAe;AACvB,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,iBAAA,EAAkB;AAEnC,EAAA,sCAAQ,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,IAAA,EAAY,KAAK,UAAA,EAAY,CAAA;AAClE,CAAC,CAAA;;ACXM,MAAM,UAAA,GAAab,4BAAO,QAAA,EAAU;AAAA,EACzC,QAAA,EAAU,MAAA;AAAA,EACV,KAAA,EAAO,eAAA;AAAA,EACP,cAAA,EAAgB,iBAAA;AAAA,EAChB,uBAAA,EAAyB,KAAA;AAAA,EACzB,mBAAA,EAAqB,KAAA;AAAA,EACrB,OAAA,EAAS,MAAA;AAAA,EAET,CAAC,gBAAgB,GAAG;AAAA,IAClB,aAAA,EAAe,MAAA;AAAA,IACf,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;ACNM,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,QAAA,EAAU,MAAM,GAAG,SAAA,IAAa,UAAA,KAAe;AAChD,IAAA,MAAM,EAAE,IAAA,EAAK,GAAI,iBAAA,EAAkB;AAEnC,IAAA,uBACEQ,cAAA,CAAC,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,IAAA,EAAY,OAAA,EAAO,IAAA,EAC5C,QAAA,kBAAAA,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAY,GAAA,EAAK,UAAA,EACjB,UACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF,CAAA;;AClBO,MAAM,UAAA,GAAaR,4BAAO,QAAA,EAAU;AAAA,EACzC,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,eAAA,EAAiB,qCAAA;AAAA,QACjB,KAAA,EAAO;AAAA,OACT;AAAA,MACA,KAAA,EAAO;AAAA,QACL,CAAC,gBAAgB,GAAG;AAAA,UAClB,aAAA,EAAe,MAAA;AAAA,UACf,KAAA,EAAO;AAAA;AACT;AACF;AACF;AAEJ,CAAC,CAAA;;ACKM,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,MAAA,GAAS,KAAA,EAAO,QAAA,GAAW,MAAM,OAAA,EAAS,GAAG,SAAA,EAAU,EAAG,UAAA,KAAe;AAC1E,IAAA,MAAM,EAAE,IAAA,EAAK,GAAI,iBAAA,EAAkB;AACnC,IAAA,MAAM,oBAAA,GAAuB,OAAA,KAAY,IAAA,GAAO,QAAA,GAAW,KAAA;AAE3D,IAAA,IAAI,oBAAA,EAAsB;AACxB,MAAA,sCAAQ,QAAA,EAAA,EAAU,GAAG,SAAA,EAAW,OAAA,EAAkB,KAAK,UAAA,EAAY,CAAA;AAAA,IACrE;AAEA,IAAA,uBACEQ,cAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,OAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAA,EAAK;AAAA;AAAA,KACP;AAAA,EAEJ;AACF,CAAA;;AC1BO,MAAM,+BAA+B,CAAC;AAAA,EAC3C,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAEc;AACZ,EAAA,MAAM,QAAA,GAAWM,2BAAA,CAAa,GAAA,IAAA,IAAA,GAAA,GAAA,GAAO,KAAK,CAAA;AAE1C,EAAA,OAAOC,iBAAA;AAAA,IACL,CAAC,KAAA,KAAyC;AA7B9C,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AA8BM,MAAA,MAAM,EAAE,GAAA,EAAK,aAAA,EAAc,GAAI,KAAA;AAC/B,MAAA,MAAM,eAAe,WAAA,KAAgB,YAAA;AACrC,MAAA,MAAM,QAAQ,QAAA,KAAa,KAAA;AAE3B,MAAA,MAAM,SAAA,GACH,gBAAgB,GAAA,MAAS,KAAA,GAAQ,cAAc,YAAA,CAAA,IAC/C,CAAC,gBAAgB,GAAA,KAAQ,WAAA;AAE5B,MAAA,MAAM,UAAA,GACH,gBAAgB,GAAA,MAAS,KAAA,GAAQ,eAAe,WAAA,CAAA,IAChD,CAAC,gBAAgB,GAAA,KAAQ,SAAA;AAE5B,MAAA,IAAI,CAAC,SAAA,IAAa,CAAC,UAAA,EAAY;AAC7B,QAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AACZ,QAAA;AAAA,MACF;AAGA,MAAA,MAAM,QAAQ,KAAA,CAAM,IAAA;AAAA,QAClB,aAAA,CAAc,iBAAiB,8BAA8B;AAAA,QAC7D,MAAA,CAAO,CAAA,IAAA,KAAQ,CAAC,IAAA,CAAK,YAAA,CAAa,UAAU,CAAC,CAAA;AAG/C,MAAA,MAAM,eAAe,KAAA,CAAM,SAAA;AAAA,QAAU,CAAA,IAAA,KACnC,IAAA,CAAK,QAAA,CAAS,QAAA,CAAS,aAAa;AAAA,OACtC;AAEA,MAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,IAAK,YAAA,KAAiB,EAAA,EAAI;AAC7C,QAAA,OAAO,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,MACrB;AAGA,MAAA,IAAI,SAAA;AACJ,MAAA,IAAI,SAAA,EAAW;AACb,QAAA,SAAA,GAAY,YAAA,GAAe,CAAA;AAC3B,QAAA,IAAI,SAAA,IAAa,MAAM,MAAA,EAAQ;AAC7B,UAAA,SAAA,GAAY,OAAO,CAAA,GAAI,YAAA;AAAA,QACzB;AAAA,MACF,CAAA,MAAO;AACL,QAAA,SAAA,GAAY,YAAA,GAAe,CAAA;AAC3B,QAAA,IAAI,YAAY,CAAA,EAAG;AACjB,UAAA,SAAA,GAAY,IAAA,GAAO,KAAA,CAAM,MAAA,GAAS,CAAA,GAAI,YAAA;AAAA,QACxC;AAAA,MACF;AAGA,MAAA,MAAM,0BACJ,EAAA,GAAA,KAAA,CAAM,YAAY,CAAA,KAAlB,IAAA,GAAA,MAAA,GAAA,EAAA,CAAqB,aAAa,eAAA,CAAA,MAAqB,MAAA;AACzD,MAAA,MAAM,uBACJ,EAAA,GAAA,KAAA,CAAM,SAAS,CAAA,KAAf,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,aAAa,eAAA,CAAA,MAAqB,MAAA;AAItD,MAAA,IAAI,CAAC,qBAAA,IAAyB,CAAC,kBAAA,EAAoB;AACjD,QAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AACZ,QAAA;AAAA,MACF;AAGA,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AAEtB,MAAA,IAAI,cAAc,YAAA,EAAc;AAC9B,QAAA,CAAA,EAAA,GAAA,KAAA,CAAM,SAAS,MAAf,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,KAAA,EAAA;AAAA,MACpB;AAEA,MAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,IACd,CAAA;AAAA,IACA,CAAC,WAAA,EAAa,QAAA,EAAU,IAAA,EAAM,SAAS;AAAA,GACzC;AACF,CAAA;;AClDO,MAAM,UAAU,KAAA,CAAM,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,WAAA,GAAc,YAAA;AAAA,IACd,OAAA,GAAU,UAAA;AAAA,IACV,GAAA,GAAM,KAAA;AAAA,IACN,IAAA,GAAO,IAAA;AAAA,IACP,IAAA,GAAO,QAAA;AAAA,IACP,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,UAAA,KACG;AACH,IAAA,MAAM,WAAA,GACJ,QAAA,KAAa,MAAA,GAAY,OAAA,GAAU,WAAW,MAAA,GAAS,UAAA;AAEzD,IAAA,MAAM,gBAAgB,4BAAA,CAA6B;AAAA,MACjD,WAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACEP,cAAA,CAAC,mBAAgB,IAAA,EACf,QAAA,kBAAAA,cAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,WAAA;AAAA,QACT,WAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA,EAAW,aAAA;AAAA,QACX,GAAA,EAAK,UAAA;AAAA,QACJ,GAAG;AAAA;AAAA,KACN,EACF,CAAA;AAAA,EAEJ;AACF;AAYA,OAAA,CAAQ,IAAA,GAAO,IAAA;AACf,OAAA,CAAQ,IAAA,GAAO,IAAA;AACf,OAAA,CAAQ,IAAA,GAAO,IAAA;AACf,OAAA,CAAQ,SAAA,GAAY,SAAA;;;;"}

package/dist/module.js

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import React, { useCallback } from 'react';
+import React, { createContext, useContext, useCallback } from 'react';
 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';
+import { styles } from '@mirohq/design-system-base-icon';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { usePress } from '@mirohq/design-system-use-press';
@@ -18,13 +19,6 @@ const StyledToolbar = styled(Root, {
   alignItems: "center",
   maxWidth: "100%",
   gap: "$50",
-  '&[data-orientation="vertical"]': {
-    flexDirection: "column",
-    width: "$12"
-  },
-  '&[data-orientation="horizontal"]': {
-    height: "$12"
-  },
   variants: {
     variant: {
       floating: {
@@ -35,10 +29,38 @@ const StyledToolbar = styled(Root, {
         padding: "$50"
       },
       flat: {}
+    },
+    size: {
+      small: {
+        '&[data-orientation="vertical"]': {
+          flexDirection: "column",
+          width: "$10"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "$10"
+        }
+      },
+      medium: {
+        '&[data-orientation="vertical"]': {
+          flexDirection: "column",
+          width: "$12"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "$12"
+        }
+      }
     }
+  },
+  defaultVariants: {
+    size: "medium"
   }
 });
 
+const disabledSelector = '&[disabled], &[aria-disabled="true"]';
+const sizes = {
+  small: "$8",
+  medium: "$10"
+};
 const StyledBaseItem = styled(RadixToolbar.Button, {
   boxSizing: "border-box",
   cursor: "pointer",
@@ -47,8 +69,40 @@ const StyledBaseItem = styled(RadixToolbar.Button, {
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
+  backgroundColor: "$transparent",
+  borderRadius: "$50",
+  border: "none",
+  ...focus.css({
+    boxShadow: "$focus"
+  }),
+  "&[disabled]": {
+    pointerEvents: "none"
+  },
+  '&:not([aria-disabled="true"])': {
+    "&[data-hovered]": {
+      backgroundColor: "$background-neutrals-hover"
+    },
+    "&:active, &[data-pressed]": {
+      backgroundColor: "$background-neutrals-active"
+    }
+  },
   '&[tabindex="0"]': {
     zIndex: "1"
+  },
+  variants: {
+    size: {
+      small: {
+        height: sizes.small,
+        fontSize: "$175"
+      },
+      medium: {
+        height: sizes.medium,
+        fontSize: "$200"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
   }
 });
 
@@ -57,6 +111,7 @@ const BaseItem = React.forwardRef(
     disabled = false,
     "aria-disabled": ariaDisabled,
     asChild,
+    size,
     onHoverStart,
     onHoverEnd,
     onHoverChange,
@@ -85,6 +140,7 @@ const BaseItem = React.forwardRef(
         ...mergeProps(pressProps, hoverProps),
         "data-hovered": isHovered ? "" : void 0,
         asChild,
+        size,
         disabled,
         "aria-disabled": booleanify(ariaDisabled) ? "true" : ariaDisabled,
         ref: forwardRef
@@ -93,36 +149,11 @@ const BaseItem = React.forwardRef(
   }
 );
 
-const disabledSelector = '&[disabled], &[aria-disabled="true"]';
-const sharedStyles = {
-  base: {
-    backgroundColor: "$transparent",
-    borderRadius: "$50",
-    height: "$10",
-    border: "none",
-    ...focus.css({
-      boxShadow: "$focus"
-    }),
-    "&[disabled]": {
-      pointerEvents: "none"
-    },
-    '&:not([aria-disabled="true"])': {
-      "&[data-hovered]": {
-        backgroundColor: "$background-neutrals-hover"
-      },
-      "&:active, &[data-pressed]": {
-        backgroundColor: "$background-neutrals-active"
-      }
-    }
-  }
-};
-
+const iconSelector = "& svg, & img";
 const StyledIcon = styled(BaseItem, {
   padding: 0,
   font: "unset",
-  width: "$10",
   color: "$icon-neutrals",
-  ...sharedStyles.base,
   variants: {
     active: {
       true: {
@@ -135,12 +166,43 @@ const StyledIcon = styled(BaseItem, {
           color: "$icon-neutrals-disabled"
         }
       }
+    },
+    size: {
+      small: {
+        width: sizes.small,
+        height: sizes.small,
+        [iconSelector]: {
+          ...styles.size.small
+        }
+      },
+      medium: {
+        width: sizes.medium,
+        height: sizes.medium,
+        [iconSelector]: {
+          ...styles.size.medium
+        }
+      }
     }
+  },
+  defaultVariants: {
+    size: "medium"
   }
 });
 
+const ToolbarContext = createContext({
+  size: "medium"
+});
+const ToolbarProvider = ({
+  children,
+  size = "medium"
+}) => /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: { size }, children });
+const useToolbarContext = () => useContext(ToolbarContext);
+
 const Icon = React.forwardRef(
-  ({ active = false, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledIcon, { ...restProps, active, ref: forwardRef })
+  ({ active = false, ...restProps }, forwardRef) => {
+    const { size } = useToolbarContext();
+    return /* @__PURE__ */ jsx(StyledIcon, { ...restProps, active, size, ref: forwardRef });
+  }
 );
 
 const StyledSeparator = styled(Separator$1, {
@@ -148,23 +210,46 @@ const StyledSeparator = styled(Separator$1, {
   display: "block",
   boxSizing: "border-box",
   backgroundColor: "$border-neutrals-subtle",
-  '&[data-orientation="vertical"]': {
-    width: "1px",
-    height: "$6",
-    margin: "0 $50"
+  variants: {
+    size: {
+      small: {
+        '&[data-orientation="vertical"]': {
+          width: "1px",
+          height: "$5",
+          margin: "0 $50"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "1px",
+          width: "$5",
+          margin: "$50 0"
+        }
+      },
+      medium: {
+        '&[data-orientation="vertical"]': {
+          width: "1px",
+          height: "$6",
+          margin: "0 $50"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "1px",
+          width: "$6",
+          margin: "$50 0"
+        }
+      }
+    }
   },
-  '&[data-orientation="horizontal"]': {
-    height: "1px",
-    width: "$6",
-    margin: "$50 0"
+  defaultVariants: {
+    size: "medium"
   }
 });
 
-const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef }));
+const Separator = React.forwardRef((props, forwardRef) => {
+  const { size } = useToolbarContext();
+  return /* @__PURE__ */ jsx(StyledSeparator, { ...props, size, ref: forwardRef });
+});
 
 const StyledLink = styled(BaseItem, {
   paddingX: "$150",
-  ...sharedStyles.base,
   color: "$text-primary",
   textDecoration: "underline solid",
   textDecorationThickness: "1px",
@@ -177,11 +262,13 @@ const StyledLink = styled(BaseItem, {
 });
 
 const Link = React.forwardRef(
-  ({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledLink, { ...restProps, asChild: true, children: /* @__PURE__ */ jsx("a", { href, ref: forwardRef, children }) })
+  ({ children, href, ...restProps }, forwardRef) => {
+    const { size } = useToolbarContext();
+    return /* @__PURE__ */ jsx(StyledLink, { ...restProps, size, asChild: true, children: /* @__PURE__ */ jsx("a", { href, ref: forwardRef, children }) });
+  }
 );
 
 const StyledItem = styled(BaseItem, {
-  ...sharedStyles.base,
   variants: {
     active: {
       true: {
@@ -200,6 +287,7 @@ const StyledItem = styled(BaseItem, {
 
 const Item = React.forwardRef(
   ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {
+    const { size } = useToolbarContext();
     const shouldRenderUnstyled = asChild === true ? unstyled : false;
     if (shouldRenderUnstyled) {
       return /* @__PURE__ */ jsx(BaseItem, { ...restProps, asChild, ref: forwardRef });
@@ -210,6 +298,7 @@ const Item = React.forwardRef(
         ...restProps,
         asChild,
         active,
+        size,
         ref: forwardRef
       }
     );
@@ -280,6 +369,7 @@ const Toolbar = React.forwardRef(
     variant = "floating",
     dir = "ltr",
     loop = true,
+    size = "medium",
     onKeyDown,
     ...restProps
   }, forwardRef) => {
@@ -290,18 +380,19 @@ const Toolbar = React.forwardRef(
       loop,
       onKeyDown
     });
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ToolbarProvider, { size, children: /* @__PURE__ */ jsx(
       StyledToolbar,
       {
         variant: variantProp,
         orientation,
         dir,
         loop,
+        size,
         onKeyDown: handleKeyDown,
         ref: forwardRef,
         ...restProps
       }
-    );
+    ) });
   }
 );
 Toolbar.Icon = Icon;

package/dist/module.js.map

@@ -1 +1 @@
-{"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/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/hooks/use-toolbar-keyboard-navigation.ts","../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    variant: {\n      floating: {\n        backgroundColor: '$background-neutrals-layout',\n        boxShadow: '$elevation-100',\n        border: '0.5px solid $border-neutrals-subtle',\n        borderRadius: '$100',\n        padding: '$50',\n      },\n      flat: {},\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    ...focus.css({\n      boxShadow: '$focus',\n    }),\n    '&[disabled]': {\n      pointerEvents: 'none',\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    active: {\n      true: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$icon-primary-selected',\n      },\n      false: {\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\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    <StyledIcon {...restProps} active={active} 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: '$border-neutrals-subtle',\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 { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n  paddingX: '$150',\n\n  ...sharedStyles.base,\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","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\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    <StyledLink {...restProps} asChild>\n      <a href={href} ref={forwardRef}>\n        {children}\n      </a>\n    </StyledLink>\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    active: {\n      true: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$text-primary-selected',\n      },\n      false: {\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\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 shouldRenderUnstyled = asChild === true ? unstyled : false\n\n    if (shouldRenderUnstyled) {\n      return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n    }\n\n    return (\n      <StyledItem\n        {...restProps}\n        asChild={asChild}\n        active={active}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { useCallback } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { useDirection } from '@radix-ui/react-direction'\n\ninterface UseToolbarKeyboardNavigationProps {\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  loop?: boolean\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n}\n\n/**\n * Custom keyboard navigation for Radix Toolbar that allows navigation to aria-disabled items.\n *\n * By default, Radix UI Toolbar skips items with aria-disabled=\"true\" during keyboard navigation.\n * This hook intercepts arrow key events and manually handles focus management when aria-disabled\n * items are involved, while delegating to Radix for normal navigation.\n */\nexport const useToolbarKeyboardNavigation = ({\n  orientation = 'horizontal',\n  dir,\n  loop = true,\n  onKeyDown,\n}: UseToolbarKeyboardNavigationProps): ((\n  event: KeyboardEvent<HTMLDivElement>\n) => void) => {\n  const localDir = useDirection(dir ?? 'ltr')\n\n  return useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      const { key, currentTarget } = event\n      const isHorizontal = orientation === 'horizontal'\n      const isRTL = localDir === 'rtl'\n\n      const isForward =\n        (isHorizontal && key === (isRTL ? 'ArrowLeft' : 'ArrowRight')) ||\n        (!isHorizontal && key === 'ArrowDown')\n\n      const isBackward =\n        (isHorizontal && key === (isRTL ? 'ArrowRight' : 'ArrowLeft')) ||\n        (!isHorizontal && key === 'ArrowUp')\n\n      if (!isForward && !isBackward) {\n        onKeyDown?.(event)\n        return\n      }\n\n      // Find all navigable items (using Radix's collection attribute)\n      const items = Array.from(\n        currentTarget.querySelectorAll('[data-radix-collection-item]')\n      ).filter(item => !item.hasAttribute('disabled')) as HTMLElement[]\n\n      // Find currently focused item\n      const currentIndex = items.findIndex(item =>\n        item.contains(document.activeElement)\n      )\n\n      if (items.length === 0 || currentIndex === -1) {\n        return onKeyDown?.(event)\n      }\n\n      // Calculate next item index\n      let nextIndex: number\n      if (isForward) {\n        nextIndex = currentIndex + 1\n        if (nextIndex >= items.length) {\n          nextIndex = loop ? 0 : currentIndex\n        }\n      } else {\n        nextIndex = currentIndex - 1\n        if (nextIndex < 0) {\n          nextIndex = loop ? items.length - 1 : currentIndex\n        }\n      }\n\n      // Check if aria-disabled items are involved\n      const currentIsAriaDisabled =\n        items[currentIndex]?.getAttribute('aria-disabled') === 'true'\n      const nextIsAriaDisabled =\n        items[nextIndex]?.getAttribute('aria-disabled') === 'true'\n\n      // Only override Radix if aria-disabled items are involved\n      // Otherwise, let Radix handle it with all their edge cases and optimizations\n      if (!currentIsAriaDisabled && !nextIsAriaDisabled) {\n        onKeyDown?.(event)\n        return\n      }\n\n      // Take control: prevent Radix's handler and manually move focus\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (nextIndex !== currentIndex) {\n        items[nextIndex]?.focus()\n      }\n\n      onKeyDown?.(event)\n    },\n    [orientation, localDir, loop, onKeyDown]\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'\nimport { useToolbarKeyboardNavigation } from './hooks/use-toolbar-keyboard-navigation'\n\nexport interface ToolbarProps extends StyledToolbarProps {\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      onKeyDown,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const variantProp =\n      unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n    const handleKeyDown = useToolbarKeyboardNavigation({\n      orientation,\n      dir,\n      loop,\n      onKeyDown,\n    })\n\n    return (\n      <StyledToolbar\n        variant={variantProp}\n        orientation={orientation}\n        dir={dir}\n        loop={loop}\n        onKeyDown={handleKeyDown}\n        ref={forwardRef}\n        {...restProps}\n      />\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/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/hooks/use-toolbar-keyboard-navigation.ts","../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  variants: {\n    variant: {\n      floating: {\n        backgroundColor: '$background-neutrals-layout',\n        boxShadow: '$elevation-100',\n        border: '0.5px solid $border-neutrals-subtle',\n        borderRadius: '$100',\n        padding: '$50',\n      },\n      flat: {},\n    },\n    size: {\n      small: {\n        '&[data-orientation=\"vertical\"]': {\n          flexDirection: 'column',\n          width: '$10',\n        },\n        '&[data-orientation=\"horizontal\"]': {\n          height: '$10',\n        },\n      },\n      medium: {\n        '&[data-orientation=\"vertical\"]': {\n          flexDirection: 'column',\n          width: '$12',\n        },\n        '&[data-orientation=\"horizontal\"]': {\n          height: '$12',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\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\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sizes = {\n  small: '$8',\n  medium: '$10',\n} as const\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  backgroundColor: '$transparent',\n  borderRadius: '$50',\n  border: 'none',\n  ...focus.css({\n    boxShadow: '$focus',\n  }),\n  '&[disabled]': {\n    pointerEvents: 'none',\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  '&[tabindex=\"0\"]': {\n    zIndex: '1',\n  },\n\n  variants: {\n    size: {\n      small: {\n        height: sizes.small,\n        fontSize: '$175',\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$200',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\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'\nimport type { ToolbarSize } from '../types'\n\nexport interface BaseItemProps\n  extends StyledBaseItemProps,\n    HoverEvents,\n    PressEvents {\n  disabled?: boolean\n  size?: ToolbarSize\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      size,\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        size={size}\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'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sizes } from './base-item.styled'\n\nconst iconSelector = '& svg, & img'\n\nexport const StyledIcon = styled(BaseItem, {\n  padding: 0,\n  font: 'unset',\n  color: '$icon-neutrals',\n\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$icon-primary-selected',\n      },\n      false: {\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      small: {\n        width: sizes.small,\n        height: sizes.small,\n        [iconSelector]: {\n          ...baseIconStyles.size.small,\n        },\n      },\n      medium: {\n        width: sizes.medium,\n        height: sizes.medium,\n        [iconSelector]: {\n          ...baseIconStyles.size.medium,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n})\n","import { createContext, useContext } from 'react'\nimport type { ReactNode } from 'react'\n\nimport type { ToolbarSize } from '../types'\n\ninterface ToolbarContextProps {\n  size: ToolbarSize\n}\n\nexport interface ToolbarProviderProps {\n  children?: ReactNode\n  size?: ToolbarSize\n}\n\nconst ToolbarContext = createContext<ToolbarContextProps>({\n  size: 'medium',\n})\n\nexport const ToolbarProvider = ({\n  children,\n  size = 'medium',\n}: ToolbarProviderProps): JSX.Element => (\n  <ToolbarContext.Provider value={{ size }}>{children}</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 { size } = useToolbarContext()\n\n    return (\n      <StyledIcon {...restProps} active={active} size={size} 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: '$border-neutrals-subtle',\n\n  variants: {\n    size: {\n      small: {\n        '&[data-orientation=\"vertical\"]': {\n          width: '1px',\n          height: '$5',\n          margin: '0 $50',\n        },\n        '&[data-orientation=\"horizontal\"]': {\n          height: '1px',\n          width: '$5',\n          margin: '$50 0',\n        },\n      },\n      medium: {\n        '&[data-orientation=\"vertical\"]': {\n          width: '1px',\n          height: '$6',\n          margin: '0 $50',\n        },\n        '&[data-orientation=\"horizontal\"]': {\n          height: '1px',\n          width: '$6',\n          margin: '$50 0',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\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 StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n  ElementRef<typeof StyledSeparator>,\n  SeparatorProps\n>((props, forwardRef) => {\n  const { size } = useToolbarContext()\n\n  return <StyledSeparator {...props} size={size} ref={forwardRef} />\n})\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector } from './base-item.styled'\n\nexport const StyledLink = styled(BaseItem, {\n  paddingX: '$150',\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","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 { size } = useToolbarContext()\n\n    return (\n      <StyledLink {...restProps} size={size} asChild>\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 } from './base-item.styled'\n\nexport const StyledItem = styled(BaseItem, {\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$background-primary-subtle-selected',\n        color: '$text-primary-selected',\n      },\n      false: {\n        [disabledSelector]: {\n          pointerEvents: 'none',\n          color: '$text-neutrals-disabled',\n        },\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\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 { size } = useToolbarContext()\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\n        {...restProps}\n        asChild={asChild}\n        active={active}\n        size={size}\n        ref={forwardRef}\n      />\n    )\n  }\n)\n","import { useCallback } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { useDirection } from '@radix-ui/react-direction'\n\ninterface UseToolbarKeyboardNavigationProps {\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  loop?: boolean\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n}\n\n/**\n * Custom keyboard navigation for Radix Toolbar that allows navigation to aria-disabled items.\n *\n * By default, Radix UI Toolbar skips items with aria-disabled=\"true\" during keyboard navigation.\n * This hook intercepts arrow key events and manually handles focus management when aria-disabled\n * items are involved, while delegating to Radix for normal navigation.\n */\nexport const useToolbarKeyboardNavigation = ({\n  orientation = 'horizontal',\n  dir,\n  loop = true,\n  onKeyDown,\n}: UseToolbarKeyboardNavigationProps): ((\n  event: KeyboardEvent<HTMLDivElement>\n) => void) => {\n  const localDir = useDirection(dir ?? 'ltr')\n\n  return useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      const { key, currentTarget } = event\n      const isHorizontal = orientation === 'horizontal'\n      const isRTL = localDir === 'rtl'\n\n      const isForward =\n        (isHorizontal && key === (isRTL ? 'ArrowLeft' : 'ArrowRight')) ||\n        (!isHorizontal && key === 'ArrowDown')\n\n      const isBackward =\n        (isHorizontal && key === (isRTL ? 'ArrowRight' : 'ArrowLeft')) ||\n        (!isHorizontal && key === 'ArrowUp')\n\n      if (!isForward && !isBackward) {\n        onKeyDown?.(event)\n        return\n      }\n\n      // Find all navigable items (using Radix's collection attribute)\n      const items = Array.from(\n        currentTarget.querySelectorAll('[data-radix-collection-item]')\n      ).filter(item => !item.hasAttribute('disabled')) as HTMLElement[]\n\n      // Find currently focused item\n      const currentIndex = items.findIndex(item =>\n        item.contains(document.activeElement)\n      )\n\n      if (items.length === 0 || currentIndex === -1) {\n        return onKeyDown?.(event)\n      }\n\n      // Calculate next item index\n      let nextIndex: number\n      if (isForward) {\n        nextIndex = currentIndex + 1\n        if (nextIndex >= items.length) {\n          nextIndex = loop ? 0 : currentIndex\n        }\n      } else {\n        nextIndex = currentIndex - 1\n        if (nextIndex < 0) {\n          nextIndex = loop ? items.length - 1 : currentIndex\n        }\n      }\n\n      // Check if aria-disabled items are involved\n      const currentIsAriaDisabled =\n        items[currentIndex]?.getAttribute('aria-disabled') === 'true'\n      const nextIsAriaDisabled =\n        items[nextIndex]?.getAttribute('aria-disabled') === 'true'\n\n      // Only override Radix if aria-disabled items are involved\n      // Otherwise, let Radix handle it with all their edge cases and optimizations\n      if (!currentIsAriaDisabled && !nextIsAriaDisabled) {\n        onKeyDown?.(event)\n        return\n      }\n\n      // Take control: prevent Radix's handler and manually move focus\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (nextIndex !== currentIndex) {\n        items[nextIndex]?.focus()\n      }\n\n      onKeyDown?.(event)\n    },\n    [orientation, localDir, loop, onKeyDown]\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'\nimport { useToolbarKeyboardNavigation } from './hooks/use-toolbar-keyboard-navigation'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\nimport type { ToolbarSize } from './types'\n\nexport interface ToolbarProps extends StyledToolbarProps {\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  /**\n   * The size of toolbar items\n   * @default 'medium'\n   */\n  size?: ToolbarSize\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      size = 'medium',\n      onKeyDown,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const variantProp =\n      unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n    const handleKeyDown = useToolbarKeyboardNavigation({\n      orientation,\n      dir,\n      loop,\n      onKeyDown,\n    })\n\n    return (\n      <ToolbarProvider size={size}>\n        <StyledToolbar\n          variant={variantProp}\n          orientation={orientation}\n          dir={dir}\n          loop={loop}\n          size={size}\n          onKeyDown={handleKeyDown}\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":["baseIconStyles","Separator"],"mappings":"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"}

package/dist/types.d.ts

@@ -26,18 +26,27 @@ type TransformProps<Props, Media> = {
 	)
 }
 
-declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>>, "variant"> & TransformProps<{
+declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>>, "size" | "variant"> & TransformProps<{
     variant?: "flat" | "floating" | undefined;
+    size?: "small" | "medium" | 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>>, {
     variant?: "flat" | "floating" | undefined;
+    size?: "small" | "medium" | undefined;
 }, {}>;
 type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>;
 
-declare const StyledBaseItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>>, never> & 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 const StyledBaseItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>>, "size"> & TransformProps<{
+    size?: "small" | "medium" | 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>>, {
+    size?: "small" | "medium" | undefined;
+}, {}>;
 type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>;
 
+type ToolbarSize = 'small' | 'medium';
+
 interface BaseItemProps extends StyledBaseItemProps, HoverEvents, PressEvents {
     disabled?: boolean;
+    size?: ToolbarSize;
 }
 
 interface IconProps extends BaseItemProps {
@@ -49,7 +58,11 @@ interface IconProps extends BaseItemProps {
 }
 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> & 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>>>, "size"> & TransformProps<{
+    size?: "small" | "medium" | 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>>, {
+    size?: "small" | "medium" | undefined;
+}, {}>;
 type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>;
 
 interface SeparatorProps extends StyledSeparatorProps {
@@ -105,6 +118,11 @@ interface ToolbarProps extends StyledToolbarProps {
      * @default true
      */
     loop?: boolean;
+    /**
+     * The size of toolbar items
+     * @default 'medium'
+     */
+    size?: ToolbarSize;
 }
 declare const Toolbar: ForwardRefExoticComponent<ToolbarProps> & Partials;
 interface Partials {
@@ -115,4 +133,4 @@ interface Partials {
 }
 
 export { Toolbar };
-export type { IconProps as ToolbarIconProps, ItemProps as ToolbarItemProps, LinkProps as ToolbarLinkProps, ToolbarProps, SeparatorProps as ToolbarSeparatorProps };
+export type { IconProps as ToolbarIconProps, ItemProps as ToolbarItemProps, LinkProps as ToolbarLinkProps, ToolbarProps, SeparatorProps as ToolbarSeparatorProps, ToolbarSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-toolbar",
-  "version": "3.2.6",
+  "version": "3.3.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -32,11 +32,12 @@
     "@react-aria/interactions": "^3.13.0",
     "@react-aria/utils": "^3.31.0",
     "@react-types/shared": "^3.16.0",
-    "@mirohq/design-system-stitches": "^3.3.2",
-    "@mirohq/design-system-use-aria-disabled": "^1.1.4",
+    "@mirohq/design-system-base-icon": "^1.2.1",
     "@mirohq/design-system-use-press": "^1.1.4",
+    "@mirohq/design-system-styles": "^3.2.1",
+    "@mirohq/design-system-use-aria-disabled": "^1.1.4",
     "@mirohq/design-system-utils": "^1.3.0",
-    "@mirohq/design-system-styles": "^3.2.1"
+    "@mirohq/design-system-stitches": "^3.3.2"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",