@mirohq/design-system-toolbar 2.6.0-update-toolbar.0 → 2.6.0-update-toolbar.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +3 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +3 -3
- package/dist/module.js.map +1 -1
- package/package.json +4 -4
package/dist/main.js
CHANGED
|
@@ -305,7 +305,7 @@ const Link = React__default["default"].forwardRef(
|
|
|
305
305
|
|
|
306
306
|
const Toolbar = React__default["default"].forwardRef(
|
|
307
307
|
({
|
|
308
|
-
unstyled
|
|
308
|
+
unstyled,
|
|
309
309
|
orientation = "horizontal",
|
|
310
310
|
variant = "floating",
|
|
311
311
|
dir = "ltr",
|
|
@@ -313,12 +313,12 @@ const Toolbar = React__default["default"].forwardRef(
|
|
|
313
313
|
...restProps
|
|
314
314
|
}, forwardRef) => {
|
|
315
315
|
const [v1] = designSystemExperiments.useNewDesignLanguage();
|
|
316
|
-
const
|
|
316
|
+
const variantProp = unstyled === void 0 ? variant : unstyled ? "flat" : "floating";
|
|
317
317
|
return /* @__PURE__ */ jsxRuntime.jsx(ToolbarProvider, { v1, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
318
318
|
StyledToolbar,
|
|
319
319
|
{
|
|
320
320
|
v1,
|
|
321
|
-
variant:
|
|
321
|
+
variant: variantProp,
|
|
322
322
|
orientation,
|
|
323
323
|
dir,
|
|
324
324
|
loop,
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/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/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n v1: {\n true: {},\n },\n variant: {\n floating: {},\n flat: {},\n },\n },\n compoundVariants: [\n {\n variant: 'floating',\n v1: false,\n css: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n {\n variant: 'floating',\n v1: true,\n css: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '0px 1px 8px 0px rgba(34, 36, 40, 0.05)',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n },\n ],\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledItem = 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\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * @deprecated Toolbar.Item does no longer support any styling\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n },\n old: {\n ...focus.css({\n boxShadow: '$focus-small',\n outline: '1px solid transparent',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n v1: {\n ...focus.css({\n boxShadow: '$focus-v1',\n }),\n\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(Item, {\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 '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n v1: true,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: false,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React, { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\ninterface ToolbarProps {\n v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport type ToolbarProviderProps = ToolbarProps\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<ToolbarProviderProps>): React.ReactElement => (\n <ToolbarContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends Omit<ItemProps, 'unstyled' | 'v1'> {\n /**\n * Renders item 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 { Item } from './item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(Item, {\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 { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled' | 'v1' | '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 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 = false,\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 unstyledVariant = unstyled ? 'flat' : 'floating'\n\n return (\n <ToolbarProvider v1={v1}>\n <StyledToolbar\n v1={v1}\n variant={variant ?? unstyledVariant}\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","usePress","booleanify","useHover","mergeProps","jsx","focus","createContext","useContext","Separator","useNewDesignLanguage"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/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/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n v1: {\n true: {},\n },\n variant: {\n floating: {},\n flat: {},\n },\n },\n compoundVariants: [\n {\n variant: 'floating',\n v1: false,\n css: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n {\n variant: 'floating',\n v1: true,\n css: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '0px 1px 8px 0px rgba(34, 36, 40, 0.05)',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n },\n ],\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledItem = 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\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * @deprecated Toolbar.Item does no longer support any styling\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n },\n old: {\n ...focus.css({\n boxShadow: '$focus-small',\n outline: '1px solid transparent',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n v1: {\n ...focus.css({\n boxShadow: '$focus-v1',\n }),\n\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(Item, {\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 '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n v1: true,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: false,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React, { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\ninterface ToolbarProps {\n v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport type ToolbarProviderProps = ToolbarProps\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<ToolbarProviderProps>): React.ReactElement => (\n <ToolbarContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends Omit<ItemProps, 'unstyled' | 'v1'> {\n /**\n * Renders item 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 { Item } from './item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(Item, {\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 { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled' | 'v1' | '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 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","usePress","booleanify","useHover","mergeProps","jsx","focus","createContext","useContext","Separator","useNewDesignLanguage"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -279,7 +279,7 @@ const Link = React.forwardRef(
|
|
|
279
279
|
|
|
280
280
|
const Toolbar = React.forwardRef(
|
|
281
281
|
({
|
|
282
|
-
unstyled
|
|
282
|
+
unstyled,
|
|
283
283
|
orientation = "horizontal",
|
|
284
284
|
variant = "floating",
|
|
285
285
|
dir = "ltr",
|
|
@@ -287,12 +287,12 @@ const Toolbar = React.forwardRef(
|
|
|
287
287
|
...restProps
|
|
288
288
|
}, forwardRef) => {
|
|
289
289
|
const [v1] = useNewDesignLanguage();
|
|
290
|
-
const
|
|
290
|
+
const variantProp = unstyled === void 0 ? variant : unstyled ? "flat" : "floating";
|
|
291
291
|
return /* @__PURE__ */ jsx(ToolbarProvider, { v1, children: /* @__PURE__ */ jsx(
|
|
292
292
|
StyledToolbar,
|
|
293
293
|
{
|
|
294
294
|
v1,
|
|
295
|
-
variant:
|
|
295
|
+
variant: variantProp,
|
|
296
296
|
orientation,
|
|
297
297
|
dir,
|
|
298
298
|
loop,
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/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/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n v1: {\n true: {},\n },\n variant: {\n floating: {},\n flat: {},\n },\n },\n compoundVariants: [\n {\n variant: 'floating',\n v1: false,\n css: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n {\n variant: 'floating',\n v1: true,\n css: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '0px 1px 8px 0px rgba(34, 36, 40, 0.05)',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n },\n ],\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledItem = 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\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * @deprecated Toolbar.Item does no longer support any styling\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n },\n old: {\n ...focus.css({\n boxShadow: '$focus-small',\n outline: '1px solid transparent',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n v1: {\n ...focus.css({\n boxShadow: '$focus-v1',\n }),\n\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(Item, {\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 '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n v1: true,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: false,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React, { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\ninterface ToolbarProps {\n v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport type ToolbarProviderProps = ToolbarProps\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<ToolbarProviderProps>): React.ReactElement => (\n <ToolbarContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends Omit<ItemProps, 'unstyled' | 'v1'> {\n /**\n * Renders item 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 { Item } from './item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(Item, {\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 { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled' | 'v1' | '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 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 = false,\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 unstyledVariant = unstyled ? 'flat' : 'floating'\n\n return (\n <ToolbarProvider v1={v1}>\n <StyledToolbar\n v1={v1}\n variant={variant ?? unstyledVariant}\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,wCAAA;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,UAAA,GAAa,MAAO,CAAA,YAAA,CAAa,MAAQ,EAAA;AAAA,EACpD,SAAW,EAAA,YAAA;AAAA,EACX,MAAQ,EAAA,SAAA;AAAA,EACR,UAAY,EAAA,MAAA;AAAA,EACZ,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,cAAgB,EAAA,QAAA;AAAA,EAChB,UAAY,EAAA,CAAA;AACd,CAAC,CAAA;;ACSM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,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,IAAI,YAAe,GAAA,SAAA,CAAA;AAEnB,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,IAAe,YAAA,GAAA,UAAA,CAAW,YAAY,UAAU,CAAA,CAAA;AAEhD,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,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;;AC3DO,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,GACV;AAAA,EACA,GAAK,EAAA;AAAA,IACH,GAAG,MAAM,GAAI,CAAA;AAAA,MACX,SAAW,EAAA,cAAA;AAAA,MACX,OAAS,EAAA,uBAAA;AAAA,KACV,CAAA;AAAA,IAED,CAAC,gBAAgB,GAAG;AAAA,MAClB,aAAe,EAAA,MAAA;AAAA,MACf,KAAO,EAAA,yBAAA;AAAA,KACT;AAAA,IAEA,iBAAmB,EAAA;AAAA,MACjB,eAAiB,EAAA,kCAAA;AAAA,MACjB,KAAO,EAAA,qBAAA;AAAA,KACT;AAAA,IAEA,2BAA6B,EAAA;AAAA,MAC3B,eAAiB,EAAA,mCAAA;AAAA,MACjB,KAAO,EAAA,sBAAA;AAAA,KACT;AAAA,GACF;AAAA,EACA,EAAI,EAAA;AAAA,IACF,GAAG,MAAM,GAAI,CAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,KACZ,CAAA;AAAA,IAED,iBAAmB,EAAA;AAAA,MACjB,eAAiB,EAAA,4BAAA;AAAA,KACnB;AAAA,IAEA,2BAA6B,EAAA;AAAA,MAC3B,eAAiB,EAAA,6BAAA;AAAA,KACnB;AAAA,GACF;AACF,CAAA;;ACxCa,MAAA,UAAA,GAAa,OAAO,IAAM,EAAA;AAAA,EACrC,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,MAAM,EAAC;AAAA,MACP,OAAO,EAAC;AAAA,KACV;AAAA,GACF;AAAA,EAEA,iBAAmB,EAAA;AAAA,IACjB,MAAQ,EAAA,GAAA;AAAA,GACV;AAAA,EAEA,gBAAkB,EAAA;AAAA,IAChB;AAAA,MACE,EAAI,EAAA,IAAA;AAAA,MACJ,MAAQ,EAAA,IAAA;AAAA,MACR,GAAK,EAAA;AAAA,QACH,eAAiB,EAAA,4BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA;AAAA,MACE,EAAI,EAAA,KAAA;AAAA,MACJ,MAAQ,EAAA,IAAA;AAAA,MACR,GAAK,EAAA;AAAA,QACH,eAAiB,EAAA,qCAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA;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;;ACpDD,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;;ACZpB,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,IAAM,EAAA;AAAA,EACrC,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;;ACoBO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,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,IAAM,MAAA,eAAA,GAAkB,WAAW,MAAS,GAAA,UAAA,CAAA;AAE5C,IACE,uBAAA,GAAA,CAAC,mBAAgB,EACf,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAS,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,eAAA;AAAA,QACpB,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;;;;"}
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/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/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n v1: {\n true: {},\n },\n variant: {\n floating: {},\n flat: {},\n },\n },\n compoundVariants: [\n {\n variant: 'floating',\n v1: false,\n css: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n {\n variant: 'floating',\n v1: true,\n css: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '0px 1px 8px 0px rgba(34, 36, 40, 0.05)',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n },\n ],\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledItem = 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\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * @deprecated Toolbar.Item does no longer support any styling\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n },\n old: {\n ...focus.css({\n boxShadow: '$focus-small',\n outline: '1px solid transparent',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n v1: {\n ...focus.css({\n boxShadow: '$focus-v1',\n }),\n\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(Item, {\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 '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n v1: true,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: false,\n active: true,\n css: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n {\n v1: true,\n active: false,\n css: {\n ...sharedStyles.v1,\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n {\n v1: false,\n active: false,\n css: sharedStyles.old,\n },\n ],\n})\n","import React, { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\ninterface ToolbarProps {\n v1: boolean\n}\n\ntype ToolbarContextProps = ToolbarProps\n\nexport type ToolbarProviderProps = ToolbarProps\n\nconst ToolbarContext = createContext<ToolbarContextProps>({} as any)\n\nexport const ToolbarProvider = ({\n children,\n ...restProps\n}: PropsWithChildren<ToolbarProviderProps>): React.ReactElement => (\n <ToolbarContext.Provider\n value={{\n ...restProps,\n }}\n >\n {children}\n </ToolbarContext.Provider>\n)\n\nexport const useToolbarContext = (): ToolbarContextProps =>\n useContext(ToolbarContext)\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\nexport interface IconProps extends Omit<ItemProps, 'unstyled' | 'v1'> {\n /**\n * Renders item 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 { Item } from './item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(Item, {\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 { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\nimport { useToolbarContext } from '../hooks/use-toolbar-context'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled' | 'v1' | '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 React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { ToolbarProvider } from './hooks/use-toolbar-context'\n\nexport interface ToolbarProps extends Omit<StyledToolbarProps, 'v1'> {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n return (\n <ToolbarProvider v1={v1}>\n <StyledToolbar\n v1={v1}\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n </ToolbarProvider>\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-toolbar",
|
|
3
|
-
"version": "2.6.0-update-toolbar.
|
|
3
|
+
"version": "2.6.0-update-toolbar.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -31,10 +31,10 @@
|
|
|
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-
|
|
35
|
-
"@mirohq/design-system-
|
|
36
|
-
"@mirohq/design-system-styles": "^1.2.25-update-toolbar.0",
|
|
34
|
+
"@mirohq/design-system-stitches": "^2.6.25",
|
|
35
|
+
"@mirohq/design-system-styles": "^1.2.25",
|
|
37
36
|
"@mirohq/design-system-use-press": "^0.4.1",
|
|
37
|
+
"@mirohq/design-system-experiments": "^0.2.0",
|
|
38
38
|
"@mirohq/design-system-utils": "^0.15.4"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|