@mirohq/design-system-toolbar 2.6.13 → 2.6.15

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 (5) hide show
  1. package/dist/main.js +8 -34
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +8 -34
  4. package/dist/module.js.map +1 -1
  5. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -196,27 +196,14 @@ const StyledIcon = designSystemStitches.styled(BaseItem, {
196
196
  false: {}
197
197
  },
198
198
  active: {
199
- true: {},
199
+ true: {
200
+ backgroundColor: "$background-primary-subtle-selected",
201
+ color: "$icon-primary-selected"
202
+ },
200
203
  false: {}
201
204
  }
202
205
  },
203
206
  compoundVariants: [
204
- {
205
- v1: true,
206
- active: true,
207
- css: {
208
- backgroundColor: "$background-primary-subtle",
209
- color: "$icon-primary-selected"
210
- }
211
- },
212
- {
213
- v1: false,
214
- active: true,
215
- css: {
216
- backgroundColor: "$background-primary-subtle-selected",
217
- color: "$icon-primary-selected"
218
- }
219
- },
220
207
  {
221
208
  v1: true,
222
209
  active: false,
@@ -323,27 +310,14 @@ const StyledItem = designSystemStitches.styled(BaseItem, {
323
310
  false: {}
324
311
  },
325
312
  active: {
326
- true: {},
313
+ true: {
314
+ backgroundColor: "$background-primary-subtle-selected",
315
+ color: "$text-primary-selected"
316
+ },
327
317
  false: {}
328
318
  }
329
319
  },
330
320
  compoundVariants: [
331
- {
332
- v1: true,
333
- active: true,
334
- css: {
335
- backgroundColor: "$background-primary-subtle",
336
- color: "$text-primary-selected"
337
- }
338
- },
339
- {
340
- v1: false,
341
- active: true,
342
- css: {
343
- backgroundColor: "$background-primary-subtle-selected",
344
- color: "$text-primary-selected"
345
- }
346
- },
347
321
  {
348
322
  v1: true,
349
323
  active: 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/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n v1: {\n true: {},\n },\n variant: {\n floating: {},\n flat: {},\n },\n },\n compoundVariants: [\n {\n variant: 'floating',\n v1: false,\n css: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n {\n variant: 'floating',\n v1: true,\n css: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n },\n ],\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n extends StyledBaseItemProps,\n HoverEvents,\n PressEvents {\n disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n ElementRef<typeof StyledBaseItem>,\n BaseItemProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const elementProps = useAriaDisabled(\n {\n ...restProps,\n ariaDisabled,\n },\n { allowArrows: true }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n return (\n <StyledBaseItem\n {...mergeProps(pressProps, hoverProps)}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n ...focus.css({\n boxShadow: '$focus',\n }),\n },\n old: {\n [disabledSelector]: {\n cursor: 'default',\n color: '$text-neutrals-disabled',\n },\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n v1: {\n '&[disabled]': {\n pointerEvents: 'none',\n },\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n padding: 0,\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n compoundVariants: [\n {\n v1: true,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: false,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React, { createContext, useContext } from 'react'\n\ninterface ToolbarProps {\n v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport interface ToolbarProviderProps extends ToolbarProps {\n children: React.ReactNode\n}\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n children,\n ...restProps\n}: ToolbarProviderProps): React.ReactElement => (\n <ToolbarContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends BaseItemProps {\n /**\n * Renders icon in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n ({ active = false, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return (\n <StyledIcon {...restProps} v1={v1} active={active} ref={forwardRef} />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n\n variants: {\n v1: {\n true: { backgroundColor: '$border-neutrals-subtle' },\n },\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface SeparatorProps extends Omit<StyledSeparatorProps, 'v1'> {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return <StyledSeparator {...props} v1={v1} ref={forwardRef} />\n})\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n paddingX: '$150',\n textDecoration: 'none',\n\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {\n ...sharedStyles.v1,\n color: '$text-primary',\n textDecoration: 'underline solid',\n textDecorationThickness: '1px',\n textUnderlineOffset: '4px',\n outline: 'none',\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n false: sharedStyles.old,\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return (\n <StyledLink {...restProps} asChild v1={v1}>\n <a href={href} ref={forwardRef}>\n {children}\n </a>\n </StyledLink>\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n compoundVariants: [\n {\n v1: true,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle',\n color: '$text-primary-selected',\n },\n },\n {\n v1: false,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n },\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n if (shouldRenderUnstyled) {\n return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n }\n\n return (\n <StyledItem\n {...restProps}\n asChild={asChild}\n v1={v1}\n active={active}\n ref={forwardRef}\n />\n )\n }\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\n\nexport interface ToolbarProps extends Omit<StyledToolbarProps, 'v1'> {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n return (\n <ToolbarProvider v1={v1}>\n <StyledToolbar\n v1={v1}\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n </ToolbarProvider>\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","React","useAriaDisabled","usePress","booleanify","useHover","jsx","mergeProps","focus","createContext","useContext","Separator","useNewDesignLanguage"],"mappings":"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"}
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/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n v1: {\n true: {},\n },\n variant: {\n floating: {},\n flat: {},\n },\n },\n compoundVariants: [\n {\n variant: 'floating',\n v1: false,\n css: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n {\n variant: 'floating',\n v1: true,\n css: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n },\n ],\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n extends StyledBaseItemProps,\n HoverEvents,\n PressEvents {\n disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n ElementRef<typeof StyledBaseItem>,\n BaseItemProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const elementProps = useAriaDisabled(\n {\n ...restProps,\n ariaDisabled,\n },\n { allowArrows: true }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n return (\n <StyledBaseItem\n {...mergeProps(pressProps, hoverProps)}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n ...focus.css({\n boxShadow: '$focus',\n }),\n },\n old: {\n [disabledSelector]: {\n cursor: 'default',\n color: '$text-neutrals-disabled',\n },\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n v1: {\n '&[disabled]': {\n pointerEvents: 'none',\n },\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n padding: 0,\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n false: {},\n },\n },\n\n compoundVariants: [\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React, { createContext, useContext } from 'react'\n\ninterface ToolbarProps {\n v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport interface ToolbarProviderProps extends ToolbarProps {\n children: React.ReactNode\n}\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n children,\n ...restProps\n}: ToolbarProviderProps): React.ReactElement => (\n <ToolbarContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends BaseItemProps {\n /**\n * Renders icon in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n ({ active = false, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return (\n <StyledIcon {...restProps} v1={v1} active={active} ref={forwardRef} />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n\n variants: {\n v1: {\n true: { backgroundColor: '$border-neutrals-subtle' },\n },\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface SeparatorProps extends Omit<StyledSeparatorProps, 'v1'> {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return <StyledSeparator {...props} v1={v1} ref={forwardRef} />\n})\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n paddingX: '$150',\n textDecoration: 'none',\n\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {\n ...sharedStyles.v1,\n color: '$text-primary',\n textDecoration: 'underline solid',\n textDecorationThickness: '1px',\n textUnderlineOffset: '4px',\n outline: 'none',\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n false: sharedStyles.old,\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return (\n <StyledLink {...restProps} asChild v1={v1}>\n <a href={href} ref={forwardRef}>\n {children}\n </a>\n </StyledLink>\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n false: {},\n },\n },\n\n compoundVariants: [\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n if (shouldRenderUnstyled) {\n return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n }\n\n return (\n <StyledItem\n {...restProps}\n asChild={asChild}\n v1={v1}\n active={active}\n ref={forwardRef}\n />\n )\n }\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\n\nexport interface ToolbarProps extends Omit<StyledToolbarProps, 'v1'> {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n return (\n <ToolbarProvider v1={v1}>\n <StyledToolbar\n v1={v1}\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n </ToolbarProvider>\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","React","useAriaDisabled","usePress","booleanify","useHover","jsx","mergeProps","focus","createContext","useContext","Separator","useNewDesignLanguage"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -170,27 +170,14 @@ const StyledIcon = styled(BaseItem, {
170
170
  false: {}
171
171
  },
172
172
  active: {
173
- true: {},
173
+ true: {
174
+ backgroundColor: "$background-primary-subtle-selected",
175
+ color: "$icon-primary-selected"
176
+ },
174
177
  false: {}
175
178
  }
176
179
  },
177
180
  compoundVariants: [
178
- {
179
- v1: true,
180
- active: true,
181
- css: {
182
- backgroundColor: "$background-primary-subtle",
183
- color: "$icon-primary-selected"
184
- }
185
- },
186
- {
187
- v1: false,
188
- active: true,
189
- css: {
190
- backgroundColor: "$background-primary-subtle-selected",
191
- color: "$icon-primary-selected"
192
- }
193
- },
194
181
  {
195
182
  v1: true,
196
183
  active: false,
@@ -297,27 +284,14 @@ const StyledItem = styled(BaseItem, {
297
284
  false: {}
298
285
  },
299
286
  active: {
300
- true: {},
287
+ true: {
288
+ backgroundColor: "$background-primary-subtle-selected",
289
+ color: "$text-primary-selected"
290
+ },
301
291
  false: {}
302
292
  }
303
293
  },
304
294
  compoundVariants: [
305
- {
306
- v1: true,
307
- active: true,
308
- css: {
309
- backgroundColor: "$background-primary-subtle",
310
- color: "$text-primary-selected"
311
- }
312
- },
313
- {
314
- v1: false,
315
- active: true,
316
- css: {
317
- backgroundColor: "$background-primary-subtle-selected",
318
- color: "$text-primary-selected"
319
- }
320
- },
321
295
  {
322
296
  v1: true,
323
297
  active: 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/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n v1: {\n true: {},\n },\n variant: {\n floating: {},\n flat: {},\n },\n },\n compoundVariants: [\n {\n variant: 'floating',\n v1: false,\n css: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n {\n variant: 'floating',\n v1: true,\n css: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n },\n ],\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n extends StyledBaseItemProps,\n HoverEvents,\n PressEvents {\n disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n ElementRef<typeof StyledBaseItem>,\n BaseItemProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const elementProps = useAriaDisabled(\n {\n ...restProps,\n ariaDisabled,\n },\n { allowArrows: true }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n return (\n <StyledBaseItem\n {...mergeProps(pressProps, hoverProps)}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n ...focus.css({\n boxShadow: '$focus',\n }),\n },\n old: {\n [disabledSelector]: {\n cursor: 'default',\n color: '$text-neutrals-disabled',\n },\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n v1: {\n '&[disabled]': {\n pointerEvents: 'none',\n },\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n padding: 0,\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n compoundVariants: [\n {\n v1: true,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: false,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React, { createContext, useContext } from 'react'\n\ninterface ToolbarProps {\n v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport interface ToolbarProviderProps extends ToolbarProps {\n children: React.ReactNode\n}\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n children,\n ...restProps\n}: ToolbarProviderProps): React.ReactElement => (\n <ToolbarContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends BaseItemProps {\n /**\n * Renders icon in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n ({ active = false, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return (\n <StyledIcon {...restProps} v1={v1} active={active} ref={forwardRef} />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n\n variants: {\n v1: {\n true: { backgroundColor: '$border-neutrals-subtle' },\n },\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface SeparatorProps extends Omit<StyledSeparatorProps, 'v1'> {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return <StyledSeparator {...props} v1={v1} ref={forwardRef} />\n})\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n paddingX: '$150',\n textDecoration: 'none',\n\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {\n ...sharedStyles.v1,\n color: '$text-primary',\n textDecoration: 'underline solid',\n textDecorationThickness: '1px',\n textUnderlineOffset: '4px',\n outline: 'none',\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n false: sharedStyles.old,\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return (\n <StyledLink {...restProps} asChild v1={v1}>\n <a href={href} ref={forwardRef}>\n {children}\n </a>\n </StyledLink>\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n compoundVariants: [\n {\n v1: true,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle',\n color: '$text-primary-selected',\n },\n },\n {\n v1: false,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n },\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n if (shouldRenderUnstyled) {\n return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n }\n\n return (\n <StyledItem\n {...restProps}\n asChild={asChild}\n v1={v1}\n active={active}\n ref={forwardRef}\n />\n )\n }\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\n\nexport interface ToolbarProps extends Omit<StyledToolbarProps, 'v1'> {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n return (\n <ToolbarProvider v1={v1}>\n <StyledToolbar\n v1={v1}\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n </ToolbarProvider>\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
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/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n v1: {\n true: {},\n },\n variant: {\n floating: {},\n flat: {},\n },\n },\n compoundVariants: [\n {\n variant: 'floating',\n v1: false,\n css: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n {\n variant: 'floating',\n v1: true,\n css: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n },\n ],\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n extends StyledBaseItemProps,\n HoverEvents,\n PressEvents {\n disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n ElementRef<typeof StyledBaseItem>,\n BaseItemProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const elementProps = useAriaDisabled(\n {\n ...restProps,\n ariaDisabled,\n },\n { allowArrows: true }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n return (\n <StyledBaseItem\n {...mergeProps(pressProps, hoverProps)}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n ...focus.css({\n boxShadow: '$focus',\n }),\n },\n old: {\n [disabledSelector]: {\n cursor: 'default',\n color: '$text-neutrals-disabled',\n },\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n v1: {\n '&[disabled]': {\n pointerEvents: 'none',\n },\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n padding: 0,\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n false: {},\n },\n },\n\n compoundVariants: [\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React, { createContext, useContext } from 'react'\n\ninterface ToolbarProps {\n v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport interface ToolbarProviderProps extends ToolbarProps {\n children: React.ReactNode\n}\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n children,\n ...restProps\n}: ToolbarProviderProps): React.ReactElement => (\n <ToolbarContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends BaseItemProps {\n /**\n * Renders icon in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n ({ active = false, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return (\n <StyledIcon {...restProps} v1={v1} active={active} ref={forwardRef} />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n\n variants: {\n v1: {\n true: { backgroundColor: '$border-neutrals-subtle' },\n },\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface SeparatorProps extends Omit<StyledSeparatorProps, 'v1'> {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return <StyledSeparator {...props} v1={v1} ref={forwardRef} />\n})\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n paddingX: '$150',\n textDecoration: 'none',\n\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {\n ...sharedStyles.v1,\n color: '$text-primary',\n textDecoration: 'underline solid',\n textDecorationThickness: '1px',\n textUnderlineOffset: '4px',\n outline: 'none',\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n false: sharedStyles.old,\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n return (\n <StyledLink {...restProps} asChild v1={v1}>\n <a href={href} ref={forwardRef}>\n {children}\n </a>\n </StyledLink>\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\n\n variants: {\n v1: {\n true: {},\n false: {},\n },\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n false: {},\n },\n },\n\n compoundVariants: [\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n const { v1 } = useToolbarContext()\n\n const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n if (shouldRenderUnstyled) {\n return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n }\n\n return (\n <StyledItem\n {...restProps}\n asChild={asChild}\n v1={v1}\n active={active}\n ref={forwardRef}\n />\n )\n }\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\n\nexport interface ToolbarProps extends Omit<StyledToolbarProps, 'v1'> {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n return (\n <ToolbarProvider v1={v1}>\n <StyledToolbar\n v1={v1}\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n </ToolbarProvider>\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,aAAA,GAAgB,OAAO,IAAM,EAAA;AAAA,EACxC,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,MAAA;AAAA,EACT,SAAW,EAAA,YAAA;AAAA,EACX,UAAY,EAAA,QAAA;AAAA,EACZ,QAAU,EAAA,MAAA;AAAA,EACV,GAAK,EAAA,KAAA;AAAA,EAEL,gCAAkC,EAAA;AAAA,IAChC,aAAe,EAAA,QAAA;AAAA,IACf,KAAO,EAAA,KAAA;AAAA,GACT;AAAA,EAEA,kCAAoC,EAAA;AAAA,IAClC,MAAQ,EAAA,KAAA;AAAA,GACV;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,EAAI,EAAA;AAAA,MACF,MAAM,EAAC;AAAA,KACT;AAAA,IACA,OAAS,EAAA;AAAA,MACP,UAAU,EAAC;AAAA,MACX,MAAM,EAAC;AAAA,KACT;AAAA,GACF;AAAA,EACA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,OAAS,EAAA,UAAA;AAAA,MACT,EAAI,EAAA,KAAA;AAAA,MACJ,GAAK,EAAA;AAAA,QACH,eAAiB,EAAA,gCAAA;AAAA,QACjB,SAAW,EAAA,KAAA;AAAA,QACX,YAAc,EAAA,KAAA;AAAA,QACd,OAAS,EAAA,KAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,UAAA;AAAA,MACT,EAAI,EAAA,IAAA;AAAA,MACJ,GAAK,EAAA;AAAA,QACH,eAAiB,EAAA,6BAAA;AAAA,QACjB,SAAW,EAAA,gBAAA;AAAA,QACX,MAAQ,EAAA,qCAAA;AAAA,QACR,YAAc,EAAA,MAAA;AAAA,QACd,OAAS,EAAA,KAAA;AAAA,OACX;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACjDY,MAAA,cAAA,GAAiB,MAAO,CAAA,YAAA,CAAa,MAAQ,EAAA;AAAA,EACxD,SAAW,EAAA,YAAA;AAAA,EACX,MAAQ,EAAA,SAAA;AAAA,EACR,UAAY,EAAA,MAAA;AAAA,EACZ,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,cAAgB,EAAA,QAAA;AAAA,EAChB,UAAY,EAAA,CAAA;AAAA,EAEZ,iBAAmB,EAAA;AAAA,IACjB,MAAQ,EAAA,GAAA;AAAA,GACV;AACF,CAAC,CAAA;;ACIM,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EAI5B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,eAAiB,EAAA,YAAA;AAAA,IACjB,OAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,YAAe,GAAA,eAAA;AAAA,MACnB;AAAA,QACE,GAAG,SAAA;AAAA,QACH,YAAA;AAAA,OACF;AAAA,MACA,EAAE,aAAa,IAAK,EAAA;AAAA,KACtB,CAAA;AAEA,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,QAAS,CAAA;AAAA,MAC9B,mBAAqB,EAAA,MAAA;AAAA,MACrB,QAAA,EAAU,QAAY,IAAA,UAAA,CAAW,YAAY,CAAA;AAAA,MAC7C,GAAG,YAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,SAAU,EAAA,GAAI,QAAS,CAAA;AAAA,MACzC,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,KACD,CAAA,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAW,CAAA,UAAA,EAAY,UAAU,CAAA;AAAA,QACrC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,QAC/B,OAAA;AAAA,QACA,QAAA;AAAA,QACA,eAAe,EAAA,UAAA,CAAW,YAAY,CAAA,GAAI,MAAS,GAAA,YAAA;AAAA,QACnD,GAAK,EAAA,UAAA;AAAA,OAAA;AAAA,KACP,CAAA;AAAA,GAEJ;AACF,CAAA;;ACjEO,MAAM,gBAAmB,GAAA,sCAAA,CAAA;AAEzB,MAAM,YAAe,GAAA;AAAA,EAC1B,IAAM,EAAA;AAAA,IACJ,eAAiB,EAAA,cAAA;AAAA,IACjB,YAAc,EAAA,KAAA;AAAA,IACd,MAAQ,EAAA,KAAA;AAAA,IACR,MAAQ,EAAA,MAAA;AAAA,IACR,GAAG,MAAM,GAAI,CAAA;AAAA,MACX,SAAW,EAAA,QAAA;AAAA,KACZ,CAAA;AAAA,GACH;AAAA,EACA,GAAK,EAAA;AAAA,IACH,CAAC,gBAAgB,GAAG;AAAA,MAClB,MAAQ,EAAA,SAAA;AAAA,MACR,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,IAEA,aAAe,EAAA;AAAA,MACb,aAAe,EAAA,MAAA;AAAA,KACjB;AAAA,IAEA,+BAAiC,EAAA;AAAA,MAC/B,iBAAmB,EAAA;AAAA,QACjB,eAAiB,EAAA,kCAAA;AAAA,QACjB,KAAO,EAAA,qBAAA;AAAA,OACT;AAAA,MAEA,2BAA6B,EAAA;AAAA,QAC3B,eAAiB,EAAA,mCAAA;AAAA,QACjB,KAAO,EAAA,sBAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AAAA,EACA,EAAI,EAAA;AAAA,IACF,aAAe,EAAA;AAAA,MACb,aAAe,EAAA,MAAA;AAAA,KACjB;AAAA,IACA,+BAAiC,EAAA;AAAA,MAC/B,iBAAmB,EAAA;AAAA,QACjB,eAAiB,EAAA,4BAAA;AAAA,OACnB;AAAA,MAEA,2BAA6B,EAAA;AAAA,QAC3B,eAAiB,EAAA,6BAAA;AAAA,OACnB;AAAA,KACF;AAAA,GACF;AACF,CAAA;;AC7Ca,MAAA,UAAA,GAAa,OAAO,QAAU,EAAA;AAAA,EACzC,OAAS,EAAA,CAAA;AAAA,EACT,IAAM,EAAA,OAAA;AAAA,EACN,KAAO,EAAA,KAAA;AAAA,EACP,KAAO,EAAA,gBAAA;AAAA,EAEP,GAAG,YAAa,CAAA,IAAA;AAAA,EAEhB,QAAU,EAAA;AAAA,IACR,EAAI,EAAA;AAAA,MACF,MAAM,EAAC;AAAA,MACP,OAAO,EAAC;AAAA,KACV;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,qCAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,OAAO,EAAC;AAAA,KACV;AAAA,GACF;AAAA,EAEA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,EAAI,EAAA,IAAA;AAAA,MACJ,MAAQ,EAAA,KAAA;AAAA,MACR,GAAK,EAAA;AAAA,QACH,GAAG,YAAa,CAAA,EAAA;AAAA,QAEhB,CAAC,gBAAgB,GAAG;AAAA,UAClB,aAAe,EAAA,MAAA;AAAA,UACf,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,KAAA;AAAA,MACJ,MAAQ,EAAA,KAAA;AAAA,MACR,KAAK,YAAa,CAAA,GAAA;AAAA,KACpB;AAAA,GACF;AACF,CAAC,CAAA;;AClCD,MAAM,cAAA,GAAiB,aAAmC,CAAA,EAAS,CAAA,CAAA;AAE5D,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,GAAG,SAAA;AACL,CACE,qBAAA,GAAA;AAAA,EAAC,cAAe,CAAA,QAAA;AAAA,EAAf;AAAA,IACC,KAAO,EAAA;AAAA,MACL,GAAG,SAAA;AAAA,KACL;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA,CAAA;AAGW,MAAA,iBAAA,GAAoB,MAC/B,UAAA,CAAW,cAAc,CAAA;;ACbpB,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,MAAA,GAAS,OAAO,GAAG,SAAA,IAAa,UAAe,KAAA;AAChD,IAAM,MAAA,EAAE,EAAG,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEjC,IAAA,2BACG,UAAY,EAAA,EAAA,GAAG,WAAW,EAAQ,EAAA,MAAA,EAAgB,KAAK,UAAY,EAAA,CAAA,CAAA;AAAA,GAExE;AACF,CAAA;;ACnBa,MAAA,eAAA,GAAkB,OAAOA,WAAW,EAAA;AAAA,EAC/C,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,OAAA;AAAA,EACT,SAAW,EAAA,YAAA;AAAA,EACX,eAAiB,EAAA,wBAAA;AAAA,EAEjB,gCAAkC,EAAA;AAAA,IAChC,KAAO,EAAA,KAAA;AAAA,IACP,MAAQ,EAAA,IAAA;AAAA,IACR,MAAQ,EAAA,OAAA;AAAA,GACV;AAAA,EAEA,kCAAoC,EAAA;AAAA,IAClC,MAAQ,EAAA,KAAA;AAAA,IACR,KAAO,EAAA,IAAA;AAAA,IACP,MAAQ,EAAA,OAAA;AAAA,GACV;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,EAAI,EAAA;AAAA,MACF,IAAA,EAAM,EAAE,eAAA,EAAiB,yBAA0B,EAAA;AAAA,KACrD;AAAA,GACF;AACF,CAAC,CAAA;;AClBM,MAAM,SAAY,GAAA,KAAA,CAAM,UAG7B,CAAA,CAAC,OAAO,UAAe,KAAA;AACvB,EAAM,MAAA,EAAE,EAAG,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEjC,EAAA,2BAAQ,eAAiB,EAAA,EAAA,GAAG,KAAO,EAAA,EAAA,EAAQ,KAAK,UAAY,EAAA,CAAA,CAAA;AAC9D,CAAC,CAAA;;ACXY,MAAA,UAAA,GAAa,OAAO,QAAU,EAAA;AAAA,EACzC,QAAU,EAAA,MAAA;AAAA,EACV,cAAgB,EAAA,MAAA;AAAA,EAEhB,GAAG,YAAa,CAAA,IAAA;AAAA,EAEhB,QAAU,EAAA;AAAA,IACR,EAAI,EAAA;AAAA,MACF,IAAM,EAAA;AAAA,QACJ,GAAG,YAAa,CAAA,EAAA;AAAA,QAChB,KAAO,EAAA,eAAA;AAAA,QACP,cAAgB,EAAA,iBAAA;AAAA,QAChB,uBAAyB,EAAA,KAAA;AAAA,QACzB,mBAAqB,EAAA,KAAA;AAAA,QACrB,OAAS,EAAA,MAAA;AAAA,QAET,CAAC,gBAAgB,GAAG;AAAA,UAClB,aAAe,EAAA,MAAA;AAAA,UACf,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,OAAO,YAAa,CAAA,GAAA;AAAA,KACtB;AAAA,GACF;AACF,CAAC,CAAA;;AClBM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,QAAA,EAAU,MAAM,GAAG,SAAA,IAAa,UAAe,KAAA;AAChD,IAAM,MAAA,EAAE,EAAG,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEjC,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,OAAO,EAAA,IAAA,EAAC,EACjC,EAAA,QAAA,kBAAA,GAAA,CAAC,GAAE,EAAA,EAAA,IAAA,EAAY,GAAK,EAAA,UAAA,EACjB,UACH,CACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;;AClBa,MAAA,UAAA,GAAa,OAAO,QAAU,EAAA;AAAA,EACzC,GAAG,YAAa,CAAA,IAAA;AAAA,EAEhB,QAAU,EAAA;AAAA,IACR,EAAI,EAAA;AAAA,MACF,MAAM,EAAC;AAAA,MACP,OAAO,EAAC;AAAA,KACV;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,qCAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,MACA,OAAO,EAAC;AAAA,KACV;AAAA,GACF;AAAA,EAEA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,EAAI,EAAA,IAAA;AAAA,MACJ,MAAQ,EAAA,KAAA;AAAA,MACR,GAAK,EAAA;AAAA,QACH,GAAG,YAAa,CAAA,EAAA;AAAA,QAEhB,CAAC,gBAAgB,GAAG;AAAA,UAClB,aAAe,EAAA,MAAA;AAAA,UACf,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,KAAA;AAAA,MACJ,MAAQ,EAAA,KAAA;AAAA,MACR,KAAK,YAAa,CAAA,GAAA;AAAA,KACpB;AAAA,GACF;AACF,CAAC,CAAA;;AChBM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,MAAA,GAAS,KAAO,EAAA,QAAA,GAAW,MAAM,OAAS,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AAC1E,IAAM,MAAA,EAAE,EAAG,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEjC,IAAM,MAAA,oBAAA,GAAuB,OAAY,KAAA,IAAA,GAAO,QAAW,GAAA,KAAA,CAAA;AAE3D,IAAA,IAAI,oBAAsB,EAAA;AACxB,MAAA,2BAAQ,QAAU,EAAA,EAAA,GAAG,SAAW,EAAA,OAAA,EAAkB,KAAK,UAAY,EAAA,CAAA,CAAA;AAAA,KACrE;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,OAAA;AAAA,QACA,EAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,OAAA;AAAA,KACP,CAAA;AAAA,GAEJ;AACF,CAAA;;ACFO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,WAAc,GAAA,YAAA;AAAA,IACd,OAAU,GAAA,UAAA;AAAA,IACV,GAAM,GAAA,KAAA;AAAA,IACN,IAAO,GAAA,IAAA;AAAA,IACP,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,CAAC,EAAE,CAAA,GAAI,oBAAqB,EAAA,CAAA;AAElC,IAAA,MAAM,WACJ,GAAA,QAAA,KAAa,KAAY,CAAA,GAAA,OAAA,GAAU,WAAW,MAAS,GAAA,UAAA,CAAA;AAEzD,IACE,uBAAA,GAAA,CAAC,mBAAgB,EACf,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,OAAS,EAAA,WAAA;AAAA,QACT,WAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACJ,GAAG,SAAA;AAAA,OAAA;AAAA,KAER,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAYA,OAAA,CAAQ,IAAO,GAAA,IAAA,CAAA;AACf,OAAA,CAAQ,IAAO,GAAA,IAAA,CAAA;AACf,OAAA,CAAQ,IAAO,GAAA,IAAA,CAAA;AACf,OAAA,CAAQ,SAAY,GAAA,SAAA;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-toolbar",
3
- "version": "2.6.13",
3
+ "version": "2.6.15",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -31,11 +31,11 @@
31
31
  "@react-aria/interactions": "^3.13.0",
32
32
  "@react-aria/utils": "^3.13.0",
33
33
  "@react-types/shared": "^3.16.0",
34
- "@mirohq/design-system-experiments": "^0.2.0",
34
+ "@mirohq/design-system-experiments": "^0.3.0",
35
35
  "@mirohq/design-system-stitches": "^2.6.34",
36
36
  "@mirohq/design-system-styles": "^1.2.34",
37
- "@mirohq/design-system-use-press": "^0.4.3",
38
37
  "@mirohq/design-system-use-aria-disabled": "^0.3.1",
38
+ "@mirohq/design-system-use-press": "^0.4.3",
39
39
  "@mirohq/design-system-utils": "^0.15.6"
40
40
  },
41
41
  "scripts": {