@mirohq/design-system-toolbar 3.3.7 → 3.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.js CHANGED
@@ -76,7 +76,6 @@ const StyledToolbar = designSystemStitches.styled(RadixToolbar.Root, {
76
76
  }
77
77
  });
78
78
 
79
- const disabledSelector = '&[disabled], &[aria-disabled="true"]';
80
79
  const sizes = {
81
80
  small: "$8",
82
81
  medium: "$10"
@@ -89,26 +88,6 @@ const StyledBaseItem = designSystemStitches.styled(RadixToolbar__namespace.Butto
89
88
  alignItems: "center",
90
89
  justifyContent: "center",
91
90
  flexShrink: 0,
92
- backgroundColor: "$transparent",
93
- borderRadius: "$50",
94
- border: "none",
95
- ...designSystemStyles.focus.css({
96
- boxShadow: "$focus"
97
- }),
98
- "&[disabled]": {
99
- pointerEvents: "none"
100
- },
101
- '&:not([aria-disabled="true"])': {
102
- "&[data-hovered]": {
103
- backgroundColor: "$background-neutrals-hover"
104
- },
105
- "&:active, &[data-pressed]": {
106
- backgroundColor: "$background-neutrals-active"
107
- }
108
- },
109
- '&[tabindex="0"]': {
110
- zIndex: "1"
111
- },
112
91
  variants: {
113
92
  size: {
114
93
  small: {
@@ -169,11 +148,35 @@ const BaseItem = React.forwardRef(
169
148
  }
170
149
  );
171
150
 
151
+ const disabledSelector = '&[disabled], &[aria-disabled="true"]';
152
+ const sharedStyles = {
153
+ base: {
154
+ backgroundColor: "$transparent",
155
+ borderRadius: "$50",
156
+ border: "none",
157
+ ...designSystemStyles.focus.css({
158
+ boxShadow: "$focus"
159
+ }),
160
+ "&[disabled]": {
161
+ pointerEvents: "none"
162
+ },
163
+ '&:not([aria-disabled="true"])': {
164
+ "&[data-hovered]": {
165
+ backgroundColor: "$background-neutrals-hover"
166
+ },
167
+ "&:active, &[data-pressed]": {
168
+ backgroundColor: "$background-neutrals-active"
169
+ }
170
+ }
171
+ }
172
+ };
173
+
172
174
  const iconSelector = "& svg, & img";
173
175
  const StyledIcon = designSystemStitches.styled(BaseItem, {
174
176
  padding: 0,
175
177
  font: "unset",
176
178
  color: "$icon-neutrals",
179
+ ...sharedStyles.base,
177
180
  variants: {
178
181
  active: {
179
182
  true: {
@@ -275,6 +278,7 @@ const StyledLink = designSystemStitches.styled(BaseItem, {
275
278
  textDecorationThickness: "1px",
276
279
  textUnderlineOffset: "4px",
277
280
  outline: "none",
281
+ ...sharedStyles.base,
278
282
  [disabledSelector]: {
279
283
  pointerEvents: "none",
280
284
  color: "$text-neutrals-disabled"
@@ -289,6 +293,7 @@ const Link = React.forwardRef(
289
293
  );
290
294
 
291
295
  const StyledItem = designSystemStitches.styled(BaseItem, {
296
+ ...sharedStyles.base,
292
297
  variants: {
293
298
  active: {
294
299
  true: {
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"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":"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"}
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/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'\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\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 { 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 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'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\nimport { 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 ...sharedStyles.base,\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, sharedStyles } from '../styles'\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 ...sharedStyles.base,\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, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\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","useAriaDisabled","usePress","booleanify","useHover","jsx","mergeProps","focus","baseIconStyles","createContext","useContext","Separator","useDirection","useCallback"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -56,7 +56,6 @@ const StyledToolbar = styled(Root, {
56
56
  }
57
57
  });
58
58
 
59
- const disabledSelector = '&[disabled], &[aria-disabled="true"]';
60
59
  const sizes = {
61
60
  small: "$8",
62
61
  medium: "$10"
@@ -69,26 +68,6 @@ const StyledBaseItem = styled(RadixToolbar.Button, {
69
68
  alignItems: "center",
70
69
  justifyContent: "center",
71
70
  flexShrink: 0,
72
- backgroundColor: "$transparent",
73
- borderRadius: "$50",
74
- border: "none",
75
- ...focus.css({
76
- boxShadow: "$focus"
77
- }),
78
- "&[disabled]": {
79
- pointerEvents: "none"
80
- },
81
- '&:not([aria-disabled="true"])': {
82
- "&[data-hovered]": {
83
- backgroundColor: "$background-neutrals-hover"
84
- },
85
- "&:active, &[data-pressed]": {
86
- backgroundColor: "$background-neutrals-active"
87
- }
88
- },
89
- '&[tabindex="0"]': {
90
- zIndex: "1"
91
- },
92
71
  variants: {
93
72
  size: {
94
73
  small: {
@@ -149,11 +128,35 @@ const BaseItem = React.forwardRef(
149
128
  }
150
129
  );
151
130
 
131
+ const disabledSelector = '&[disabled], &[aria-disabled="true"]';
132
+ const sharedStyles = {
133
+ base: {
134
+ backgroundColor: "$transparent",
135
+ borderRadius: "$50",
136
+ border: "none",
137
+ ...focus.css({
138
+ boxShadow: "$focus"
139
+ }),
140
+ "&[disabled]": {
141
+ pointerEvents: "none"
142
+ },
143
+ '&:not([aria-disabled="true"])': {
144
+ "&[data-hovered]": {
145
+ backgroundColor: "$background-neutrals-hover"
146
+ },
147
+ "&:active, &[data-pressed]": {
148
+ backgroundColor: "$background-neutrals-active"
149
+ }
150
+ }
151
+ }
152
+ };
153
+
152
154
  const iconSelector = "& svg, & img";
153
155
  const StyledIcon = styled(BaseItem, {
154
156
  padding: 0,
155
157
  font: "unset",
156
158
  color: "$icon-neutrals",
159
+ ...sharedStyles.base,
157
160
  variants: {
158
161
  active: {
159
162
  true: {
@@ -255,6 +258,7 @@ const StyledLink = styled(BaseItem, {
255
258
  textDecorationThickness: "1px",
256
259
  textUnderlineOffset: "4px",
257
260
  outline: "none",
261
+ ...sharedStyles.base,
258
262
  [disabledSelector]: {
259
263
  pointerEvents: "none",
260
264
  color: "$text-neutrals-disabled"
@@ -269,6 +273,7 @@ const Link = React.forwardRef(
269
273
  );
270
274
 
271
275
  const StyledItem = styled(BaseItem, {
276
+ ...sharedStyles.base,
272
277
  variants: {
273
278
  active: {
274
279
  true: {
@@ -1 +1 @@
1
- {"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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"}
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/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'\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\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 { 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 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'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\nimport { 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 ...sharedStyles.base,\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, sharedStyles } from '../styles'\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 ...sharedStyles.base,\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, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-toolbar",
3
- "version": "3.3.7",
3
+ "version": "3.3.9",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -32,12 +32,12 @@
32
32
  "@react-aria/interactions": "^3.13.0",
33
33
  "@react-aria/utils": "^3.31.0",
34
34
  "@react-types/shared": "^3.16.0",
35
- "@mirohq/design-system-stitches": "^3.3.9",
36
- "@mirohq/design-system-styles": "^3.2.8",
37
- "@mirohq/design-system-use-aria-disabled": "^1.1.4",
38
- "@mirohq/design-system-use-press": "^1.1.4",
39
35
  "@mirohq/design-system-base-icon": "^1.2.1",
40
- "@mirohq/design-system-utils": "^1.3.0"
36
+ "@mirohq/design-system-stitches": "^3.3.10",
37
+ "@mirohq/design-system-styles": "^3.2.9",
38
+ "@mirohq/design-system-utils": "^1.3.0",
39
+ "@mirohq/design-system-use-press": "^1.1.4",
40
+ "@mirohq/design-system-use-aria-disabled": "^1.1.4"
41
41
  },
42
42
  "scripts": {
43
43
  "build": "rollup -c ../../../rollup.config.js",