@mirohq/design-system-toolbar 3.3.25 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +37 -4
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +37 -4
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +7 -7
  6. package/package.json +6 -6
package/dist/main.js CHANGED
@@ -60,6 +60,15 @@ const StyledToolbar = designSystemStitches.styled(RadixToolbar.Root, {
60
60
  height: "$10"
61
61
  }
62
62
  },
63
+ compact: {
64
+ '&[data-orientation="vertical"]': {
65
+ flexDirection: "column",
66
+ width: "$10"
67
+ },
68
+ '&[data-orientation="horizontal"]': {
69
+ height: "$10"
70
+ }
71
+ },
63
72
  medium: {
64
73
  '&[data-orientation="vertical"]': {
65
74
  flexDirection: "column",
@@ -78,6 +87,7 @@ const StyledToolbar = designSystemStitches.styled(RadixToolbar.Root, {
78
87
 
79
88
  const sizes = {
80
89
  small: "$8",
90
+ compact: "$8",
81
91
  medium: "$10"
82
92
  };
83
93
  const StyledBaseItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
@@ -94,6 +104,10 @@ const StyledBaseItem = designSystemStitches.styled(RadixToolbar__namespace.Butto
94
104
  height: sizes.small,
95
105
  fontSize: "$175"
96
106
  },
107
+ compact: {
108
+ height: sizes.compact,
109
+ fontSize: "$175"
110
+ },
97
111
  medium: {
98
112
  height: sizes.medium,
99
113
  fontSize: "$200"
@@ -162,10 +176,10 @@ const sharedStyles = {
162
176
  },
163
177
  '&:not([aria-disabled="true"])': {
164
178
  "&[data-hovered]": {
165
- backgroundColor: "$background-interactive-surface-hover"
179
+ backgroundColor: "$toolbar-item-background-hover"
166
180
  },
167
181
  "&:active, &[data-pressed]": {
168
- backgroundColor: "$background-interactive-surface-pressed"
182
+ backgroundColor: "$toolbar-item-background-pressed"
169
183
  }
170
184
  }
171
185
  }
@@ -180,7 +194,7 @@ const StyledIcon = designSystemStitches.styled(BaseItem, {
180
194
  variants: {
181
195
  active: {
182
196
  true: {
183
- backgroundColor: "$background-interactive-secondary-selected",
197
+ backgroundColor: "$toolbar-item-background-selected",
184
198
  color: "$icon-on-interactive-selected"
185
199
  },
186
200
  false: {
@@ -198,6 +212,13 @@ const StyledIcon = designSystemStitches.styled(BaseItem, {
198
212
  ...designSystemBaseIcon.styles.size.small
199
213
  }
200
214
  },
215
+ compact: {
216
+ width: sizes.compact,
217
+ height: sizes.compact,
218
+ [iconSelector]: {
219
+ ...designSystemBaseIcon.styles.size.compact
220
+ }
221
+ },
201
222
  medium: {
202
223
  width: sizes.medium,
203
224
  height: sizes.medium,
@@ -247,6 +268,18 @@ const StyledSeparator = designSystemStitches.styled(RadixToolbar.Separator, {
247
268
  margin: "$50 0"
248
269
  }
249
270
  },
271
+ compact: {
272
+ '&[data-orientation="vertical"]': {
273
+ width: "1px",
274
+ height: "$5",
275
+ margin: "0 $50"
276
+ },
277
+ '&[data-orientation="horizontal"]': {
278
+ height: "1px",
279
+ width: "$5",
280
+ margin: "$50 0"
281
+ }
282
+ },
250
283
  medium: {
251
284
  '&[data-orientation="vertical"]': {
252
285
  width: "1px",
@@ -297,7 +330,7 @@ const StyledItem = designSystemStitches.styled(BaseItem, {
297
330
  variants: {
298
331
  active: {
299
332
  true: {
300
- backgroundColor: "$background-interactive-secondary-selected",
333
+ backgroundColor: "$toolbar-item-background-selected",
301
334
  color: "$text-on-interactive-selected"
302
335
  },
303
336
  false: {
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/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-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-subtle',\n borderRadius: '$toolbar',\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: '$toolbar-item',\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-interactive-surface-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-interactive-surface-pressed',\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-default',\n ...sharedStyles.base,\n variants: {\n active: {\n true: {\n backgroundColor: '$background-interactive-secondary-selected',\n color: '$icon-on-interactive-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-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-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-interactive-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-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-interactive-secondary-selected',\n color: '$text-on-interactive-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,oBAAA;AAAA,QACjB,SAAA,EAAW,gBAAA;AAAA,QACX,MAAA,EAAQ,4BAAA;AAAA,QACR,YAAA,EAAc,UAAA;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;;AC3CM,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,EAEZ,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;;ACXM,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;;ACrEO,MAAM,gBAAA,GAAmB,sCAAA;AAEzB,MAAM,YAAA,GAAe;AAAA,EAC1B,IAAA,EAAM;AAAA,IACJ,eAAA,EAAiB,cAAA;AAAA,IACjB,YAAA,EAAc,eAAA;AAAA,IACd,MAAA,EAAQ,MAAA;AAAA,IACR,GAAGI,yBAAM,GAAA,CAAI;AAAA,MACX,SAAA,EAAW;AAAA,KACZ,CAAA;AAAA,IACD,aAAA,EAAe;AAAA,MACb,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,+BAAA,EAAiC;AAAA,MAC/B,iBAAA,EAAmB;AAAA,QACjB,eAAA,EAAiB;AAAA,OACnB;AAAA,MAEA,2BAAA,EAA6B;AAAA,QAC3B,eAAA,EAAiB;AAAA;AACnB;AACF;AAEJ,CAAA;;AClBA,MAAM,YAAA,GAAe,cAAA;AAEd,MAAM,UAAA,GAAaT,4BAAO,QAAA,EAAU;AAAA,EACzC,OAAA,EAAS,CAAA;AAAA,EACT,IAAA,EAAM,OAAA;AAAA,EACN,KAAA,EAAO,eAAA;AAAA,EACP,GAAG,YAAA,CAAa,IAAA;AAAA,EAChB,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,eAAA,EAAiB,4CAAA;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;;ACjCD,MAAM,iBAAiBC,mBAAA,CAAmC;AAAA,EACxD,IAAA,EAAM;AACR,CAAC,CAAA;AAEM,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,IAAA,GAAO;AACT,CAAA,qBACEJ,cAAA,CAAC,eAAe,QAAA,EAAf,EAAwB,OAAO,EAAE,IAAA,IAAS,QAAA,EAAS,CAAA;AAG/C,MAAM,iBAAA,GAAoB,MAC/BK,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,gBAAA;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,2BAAA;AAAA,EACP,cAAA,EAAgB,iBAAA;AAAA,EAChB,uBAAA,EAAyB,KAAA;AAAA,EACzB,mBAAA,EAAqB,KAAA;AAAA,EACrB,OAAA,EAAS,MAAA;AAAA,EACT,GAAG,YAAA,CAAa,IAAA;AAAA,EAEhB,CAAC,gBAAgB,GAAG;AAAA,IAClB,aAAA,EAAe,MAAA;AAAA,IACf,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;ACPM,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,uBACEO,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,GAAaP,4BAAO,QAAA,EAAU;AAAA,EACzC,GAAG,YAAA,CAAa,IAAA;AAAA,EAChB,QAAA,EAAU;AAAA,IACR,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,eAAA,EAAiB,4CAAA;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;;ACIM,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,uBACEO,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,GAAWO,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,uBACER,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;;;;"}
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-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-subtle',\n borderRadius: '$toolbar',\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 compact: {\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 compact: '$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 compact: {\n height: sizes.compact,\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: '$toolbar-item',\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: '$toolbar-item-background-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$toolbar-item-background-pressed',\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-default',\n ...sharedStyles.base,\n variants: {\n active: {\n true: {\n backgroundColor: '$toolbar-item-background-selected',\n color: '$icon-on-interactive-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-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 compact: {\n width: sizes.compact,\n height: sizes.compact,\n [iconSelector]: {\n ...baseIconStyles.size.compact,\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-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 compact: {\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-interactive-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-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: '$toolbar-item-background-selected',\n color: '$text-on-interactive-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-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
@@ -40,6 +40,15 @@ const StyledToolbar = styled(Root, {
40
40
  height: "$10"
41
41
  }
42
42
  },
43
+ compact: {
44
+ '&[data-orientation="vertical"]': {
45
+ flexDirection: "column",
46
+ width: "$10"
47
+ },
48
+ '&[data-orientation="horizontal"]': {
49
+ height: "$10"
50
+ }
51
+ },
43
52
  medium: {
44
53
  '&[data-orientation="vertical"]': {
45
54
  flexDirection: "column",
@@ -58,6 +67,7 @@ const StyledToolbar = styled(Root, {
58
67
 
59
68
  const sizes = {
60
69
  small: "$8",
70
+ compact: "$8",
61
71
  medium: "$10"
62
72
  };
63
73
  const StyledBaseItem = styled(RadixToolbar.Button, {
@@ -74,6 +84,10 @@ const StyledBaseItem = styled(RadixToolbar.Button, {
74
84
  height: sizes.small,
75
85
  fontSize: "$175"
76
86
  },
87
+ compact: {
88
+ height: sizes.compact,
89
+ fontSize: "$175"
90
+ },
77
91
  medium: {
78
92
  height: sizes.medium,
79
93
  fontSize: "$200"
@@ -142,10 +156,10 @@ const sharedStyles = {
142
156
  },
143
157
  '&:not([aria-disabled="true"])': {
144
158
  "&[data-hovered]": {
145
- backgroundColor: "$background-interactive-surface-hover"
159
+ backgroundColor: "$toolbar-item-background-hover"
146
160
  },
147
161
  "&:active, &[data-pressed]": {
148
- backgroundColor: "$background-interactive-surface-pressed"
162
+ backgroundColor: "$toolbar-item-background-pressed"
149
163
  }
150
164
  }
151
165
  }
@@ -160,7 +174,7 @@ const StyledIcon = styled(BaseItem, {
160
174
  variants: {
161
175
  active: {
162
176
  true: {
163
- backgroundColor: "$background-interactive-secondary-selected",
177
+ backgroundColor: "$toolbar-item-background-selected",
164
178
  color: "$icon-on-interactive-selected"
165
179
  },
166
180
  false: {
@@ -178,6 +192,13 @@ const StyledIcon = styled(BaseItem, {
178
192
  ...styles.size.small
179
193
  }
180
194
  },
195
+ compact: {
196
+ width: sizes.compact,
197
+ height: sizes.compact,
198
+ [iconSelector]: {
199
+ ...styles.size.compact
200
+ }
201
+ },
181
202
  medium: {
182
203
  width: sizes.medium,
183
204
  height: sizes.medium,
@@ -227,6 +248,18 @@ const StyledSeparator = styled(Separator$1, {
227
248
  margin: "$50 0"
228
249
  }
229
250
  },
251
+ compact: {
252
+ '&[data-orientation="vertical"]': {
253
+ width: "1px",
254
+ height: "$5",
255
+ margin: "0 $50"
256
+ },
257
+ '&[data-orientation="horizontal"]': {
258
+ height: "1px",
259
+ width: "$5",
260
+ margin: "$50 0"
261
+ }
262
+ },
230
263
  medium: {
231
264
  '&[data-orientation="vertical"]': {
232
265
  width: "1px",
@@ -277,7 +310,7 @@ const StyledItem = styled(BaseItem, {
277
310
  variants: {
278
311
  active: {
279
312
  true: {
280
- backgroundColor: "$background-interactive-secondary-selected",
313
+ backgroundColor: "$toolbar-item-background-selected",
281
314
  color: "$text-on-interactive-selected"
282
315
  },
283
316
  false: {
package/dist/module.js.map CHANGED
@@ -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/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-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-subtle',\n borderRadius: '$toolbar',\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: '$toolbar-item',\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-interactive-surface-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-interactive-surface-pressed',\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-default',\n ...sharedStyles.base,\n variants: {\n active: {\n true: {\n backgroundColor: '$background-interactive-secondary-selected',\n color: '$icon-on-interactive-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-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-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-interactive-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-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-interactive-secondary-selected',\n color: '$text-on-interactive-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-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-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-subtle',\n borderRadius: '$toolbar',\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 compact: {\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 compact: '$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 compact: {\n height: sizes.compact,\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: '$toolbar-item',\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: '$toolbar-item-background-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$toolbar-item-background-pressed',\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-default',\n ...sharedStyles.base,\n variants: {\n active: {\n true: {\n backgroundColor: '$toolbar-item-background-selected',\n color: '$icon-on-interactive-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-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 compact: {\n width: sizes.compact,\n height: sizes.compact,\n [iconSelector]: {\n ...baseIconStyles.size.compact,\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-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 compact: {\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-interactive-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-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: '$toolbar-item-background-selected',\n color: '$text-on-interactive-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-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 CHANGED
@@ -28,21 +28,21 @@ type TransformProps<Props, Media> = {
28
28
 
29
29
  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<{
30
30
  variant?: "flat" | "floating" | undefined;
31
- size?: "small" | "medium" | undefined;
31
+ size?: "small" | "medium" | "compact" | undefined;
32
32
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>, {
33
33
  variant?: "flat" | "floating" | undefined;
34
- size?: "small" | "medium" | undefined;
34
+ size?: "small" | "medium" | "compact" | undefined;
35
35
  }, {}>;
36
36
  type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>;
37
37
 
38
38
  declare const StyledBaseItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>>, "size"> & TransformProps<{
39
- size?: "small" | "medium" | undefined;
39
+ size?: "small" | "medium" | "compact" | undefined;
40
40
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>, {
41
- size?: "small" | "medium" | undefined;
41
+ size?: "small" | "medium" | "compact" | undefined;
42
42
  }, {}>;
43
43
  type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>;
44
44
 
45
- type ToolbarSize = 'small' | 'medium';
45
+ type ToolbarSize = 'small' | 'compact' | 'medium';
46
46
 
47
47
  interface BaseItemProps extends StyledBaseItemProps, HoverEvents, PressEvents {
48
48
  disabled?: boolean;
@@ -59,9 +59,9 @@ interface IconProps extends BaseItemProps {
59
59
  declare const Icon: react__default.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
60
60
 
61
61
  declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>>, "size"> & TransformProps<{
62
- size?: "small" | "medium" | undefined;
62
+ size?: "small" | "medium" | "compact" | undefined;
63
63
  }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>, {
64
- size?: "small" | "medium" | undefined;
64
+ size?: "small" | "medium" | "compact" | undefined;
65
65
  }, {}>;
66
66
  type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>;
67
67
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-toolbar",
3
- "version": "3.3.25",
3
+ "version": "3.4.0",
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.25",
36
- "@mirohq/design-system-styles": "^3.2.25",
37
- "@mirohq/design-system-use-press": "^1.1.4",
35
+ "@mirohq/design-system-base-icon": "^1.2.1",
36
+ "@mirohq/design-system-styles": "^3.2.26",
38
37
  "@mirohq/design-system-use-aria-disabled": "^1.1.4",
39
- "@mirohq/design-system-utils": "^1.3.0",
40
- "@mirohq/design-system-base-icon": "^1.2.1"
38
+ "@mirohq/design-system-stitches": "^3.3.26",
39
+ "@mirohq/design-system-use-press": "^1.1.4",
40
+ "@mirohq/design-system-utils": "^1.3.0"
41
41
  },
42
42
  "scripts": {
43
43
  "build": "rollup -c ../../../rollup.config.js",