@mirohq/design-system-toolbar 3.1.4-aria-label-icon-button.2 → 3.2.0-fix-stitches-types.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +9 -15
- package/dist/main.js.map +1 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +26 -6
- package/package.json +6 -6
package/dist/main.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
@@ -14,10 +12,7 @@ var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabl
|
|
|
14
12
|
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
15
13
|
var reactDirection = require('@radix-ui/react-direction');
|
|
16
14
|
|
|
17
|
-
function
|
|
18
|
-
|
|
19
|
-
function _interopNamespace(e) {
|
|
20
|
-
if (e && e.__esModule) return e;
|
|
15
|
+
function _interopNamespaceDefault(e) {
|
|
21
16
|
var n = Object.create(null);
|
|
22
17
|
if (e) {
|
|
23
18
|
Object.keys(e).forEach(function (k) {
|
|
@@ -30,12 +25,11 @@ function _interopNamespace(e) {
|
|
|
30
25
|
}
|
|
31
26
|
});
|
|
32
27
|
}
|
|
33
|
-
n
|
|
28
|
+
n.default = e;
|
|
34
29
|
return Object.freeze(n);
|
|
35
30
|
}
|
|
36
31
|
|
|
37
|
-
var
|
|
38
|
-
var RadixToolbar__namespace = /*#__PURE__*/_interopNamespace(RadixToolbar);
|
|
32
|
+
var RadixToolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixToolbar);
|
|
39
33
|
|
|
40
34
|
const StyledToolbar = designSystemStitches.styled(RadixToolbar.Root, {
|
|
41
35
|
all: "unset",
|
|
@@ -78,7 +72,7 @@ const StyledBaseItem = designSystemStitches.styled(RadixToolbar__namespace.Butto
|
|
|
78
72
|
}
|
|
79
73
|
});
|
|
80
74
|
|
|
81
|
-
const BaseItem =
|
|
75
|
+
const BaseItem = React.forwardRef(
|
|
82
76
|
({
|
|
83
77
|
disabled = false,
|
|
84
78
|
"aria-disabled": ariaDisabled,
|
|
@@ -165,7 +159,7 @@ const StyledIcon = designSystemStitches.styled(BaseItem, {
|
|
|
165
159
|
}
|
|
166
160
|
});
|
|
167
161
|
|
|
168
|
-
const Icon =
|
|
162
|
+
const Icon = React.forwardRef(
|
|
169
163
|
({ active = false, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { ...restProps, active, ref: forwardRef })
|
|
170
164
|
);
|
|
171
165
|
|
|
@@ -186,7 +180,7 @@ const StyledSeparator = designSystemStitches.styled(RadixToolbar.Separator, {
|
|
|
186
180
|
}
|
|
187
181
|
});
|
|
188
182
|
|
|
189
|
-
const Separator =
|
|
183
|
+
const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef }));
|
|
190
184
|
|
|
191
185
|
const StyledLink = designSystemStitches.styled(BaseItem, {
|
|
192
186
|
paddingX: "$150",
|
|
@@ -202,7 +196,7 @@ const StyledLink = designSystemStitches.styled(BaseItem, {
|
|
|
202
196
|
}
|
|
203
197
|
});
|
|
204
198
|
|
|
205
|
-
const Link =
|
|
199
|
+
const Link = React.forwardRef(
|
|
206
200
|
({ children, href, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledLink, { ...restProps, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href, ref: forwardRef, children }) })
|
|
207
201
|
);
|
|
208
202
|
|
|
@@ -224,7 +218,7 @@ const StyledItem = designSystemStitches.styled(BaseItem, {
|
|
|
224
218
|
}
|
|
225
219
|
});
|
|
226
220
|
|
|
227
|
-
const Item =
|
|
221
|
+
const Item = React.forwardRef(
|
|
228
222
|
({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {
|
|
229
223
|
const shouldRenderUnstyled = asChild === true ? unstyled : false;
|
|
230
224
|
if (shouldRenderUnstyled) {
|
|
@@ -299,7 +293,7 @@ const useToolbarKeyboardNavigation = ({
|
|
|
299
293
|
);
|
|
300
294
|
};
|
|
301
295
|
|
|
302
|
-
const Toolbar =
|
|
296
|
+
const Toolbar = React.forwardRef(
|
|
303
297
|
({
|
|
304
298
|
unstyled,
|
|
305
299
|
orientation = "horizontal",
|
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/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/partials/item.styled.tsx","../src/partials/item.tsx","../src/hooks/use-toolbar-keyboard-navigation.ts","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n variant: {\n floating: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n flat: {},\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n extends StyledBaseItemProps,\n HoverEvents,\n PressEvents {\n disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n ElementRef<typeof StyledBaseItem>,\n BaseItemProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const elementProps = useAriaDisabled(\n {\n ...restProps,\n ariaDisabled,\n },\n { allowArrows: true }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n return (\n <StyledBaseItem\n {...mergeProps(pressProps, hoverProps)}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n ...focus.css({\n boxShadow: '$focus',\n }),\n '&[disabled]': {\n pointerEvents: 'none',\n },\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n padding: 0,\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n\n ...sharedStyles.base,\n\n variants: {\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\n\nexport interface IconProps extends BaseItemProps {\n /**\n * Renders icon in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n ({ active = false, ...restProps }, forwardRef) => (\n <StyledIcon {...restProps} active={active} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: '$border-neutrals-subtle',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n paddingX: '$150',\n\n ...sharedStyles.base,\n color: '$text-primary',\n textDecoration: 'underline solid',\n textDecorationThickness: '1px',\n textUnderlineOffset: '4px',\n outline: 'none',\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink {...restProps} asChild>\n <a href={href} ref={forwardRef}>\n {children}\n </a>\n </StyledLink>\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\n\n variants: {\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n if (shouldRenderUnstyled) {\n return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n }\n\n return (\n <StyledItem\n {...restProps}\n asChild={asChild}\n active={active}\n ref={forwardRef}\n />\n )\n }\n)\n","import { useCallback } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { useDirection } from '@radix-ui/react-direction'\n\ninterface UseToolbarKeyboardNavigationProps {\n orientation?: 'horizontal' | 'vertical'\n dir?: 'ltr' | 'rtl'\n loop?: boolean\n onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n}\n\n/**\n * Custom keyboard navigation for Radix Toolbar that allows navigation to aria-disabled items.\n *\n * By default, Radix UI Toolbar skips items with aria-disabled=\"true\" during keyboard navigation.\n * This hook intercepts arrow key events and manually handles focus management when aria-disabled\n * items are involved, while delegating to Radix for normal navigation.\n */\nexport const useToolbarKeyboardNavigation = ({\n orientation = 'horizontal',\n dir,\n loop = true,\n onKeyDown,\n}: UseToolbarKeyboardNavigationProps): ((\n event: KeyboardEvent<HTMLDivElement>\n) => void) => {\n const localDir = useDirection(dir ?? 'ltr')\n\n return useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const { key, currentTarget } = event\n const isHorizontal = orientation === 'horizontal'\n const isRTL = localDir === 'rtl'\n\n const isForward =\n (isHorizontal && key === (isRTL ? 'ArrowLeft' : 'ArrowRight')) ||\n (!isHorizontal && key === 'ArrowDown')\n\n const isBackward =\n (isHorizontal && key === (isRTL ? 'ArrowRight' : 'ArrowLeft')) ||\n (!isHorizontal && key === 'ArrowUp')\n\n if (!isForward && !isBackward) {\n onKeyDown?.(event)\n return\n }\n\n // Find all navigable items (using Radix's collection attribute)\n const items = Array.from(\n currentTarget.querySelectorAll('[data-radix-collection-item]')\n ).filter(item => !item.hasAttribute('disabled')) as HTMLElement[]\n\n // Find currently focused item\n const currentIndex = items.findIndex(item =>\n item.contains(document.activeElement)\n )\n\n if (items.length === 0 || currentIndex === -1) {\n return onKeyDown?.(event)\n }\n\n // Calculate next item index\n let nextIndex: number\n if (isForward) {\n nextIndex = currentIndex + 1\n if (nextIndex >= items.length) {\n nextIndex = loop ? 0 : currentIndex\n }\n } else {\n nextIndex = currentIndex - 1\n if (nextIndex < 0) {\n nextIndex = loop ? items.length - 1 : currentIndex\n }\n }\n\n // Check if aria-disabled items are involved\n const currentIsAriaDisabled =\n items[currentIndex]?.getAttribute('aria-disabled') === 'true'\n const nextIsAriaDisabled =\n items[nextIndex]?.getAttribute('aria-disabled') === 'true'\n\n // Only override Radix if aria-disabled items are involved\n // Otherwise, let Radix handle it with all their edge cases and optimizations\n if (!currentIsAriaDisabled && !nextIsAriaDisabled) {\n onKeyDown?.(event)\n return\n }\n\n // Take control: prevent Radix's handler and manually move focus\n event.preventDefault()\n event.stopPropagation()\n\n if (nextIndex !== currentIndex) {\n items[nextIndex]?.focus()\n }\n\n onKeyDown?.(event)\n },\n [orientation, localDir, loop, onKeyDown]\n )\n}\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { useToolbarKeyboardNavigation } from './hooks/use-toolbar-keyboard-navigation'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n onKeyDown,\n ...restProps\n },\n forwardRef\n ) => {\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n const handleKeyDown = useToolbarKeyboardNavigation({\n orientation,\n dir,\n loop,\n onKeyDown,\n })\n\n return (\n <StyledToolbar\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n onKeyDown={handleKeyDown}\n ref={forwardRef}\n {...restProps}\n />\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","React","useAriaDisabled","usePress","booleanify","useHover","jsx","mergeProps","focus","Separator","useDirection","useCallback"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/base-item.styled.ts","../src/partials/base-item.tsx","../src/styles.ts","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/partials/item.styled.tsx","../src/partials/item.tsx","../src/hooks/use-toolbar-keyboard-navigation.ts","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n variant: {\n floating: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n flat: {},\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n extends StyledBaseItemProps,\n HoverEvents,\n PressEvents {\n disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n ElementRef<typeof StyledBaseItem>,\n BaseItemProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const elementProps = useAriaDisabled(\n {\n ...restProps,\n ariaDisabled,\n },\n { allowArrows: true }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n return (\n <StyledBaseItem\n {...mergeProps(pressProps, hoverProps)}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n ...focus.css({\n boxShadow: '$focus',\n }),\n '&[disabled]': {\n pointerEvents: 'none',\n },\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n padding: 0,\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n\n ...sharedStyles.base,\n\n variants: {\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\n\nexport interface IconProps extends BaseItemProps {\n /**\n * Renders icon in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n ({ active = false, ...restProps }, forwardRef) => (\n <StyledIcon {...restProps} active={active} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: '$border-neutrals-subtle',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n paddingX: '$150',\n\n ...sharedStyles.base,\n color: '$text-primary',\n textDecoration: 'underline solid',\n textDecorationThickness: '1px',\n textUnderlineOffset: '4px',\n outline: 'none',\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink {...restProps} asChild>\n <a href={href} ref={forwardRef}>\n {children}\n </a>\n </StyledLink>\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\n\n variants: {\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n if (shouldRenderUnstyled) {\n return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n }\n\n return (\n <StyledItem\n {...restProps}\n asChild={asChild}\n active={active}\n ref={forwardRef}\n />\n )\n }\n)\n","import { useCallback } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { useDirection } from '@radix-ui/react-direction'\n\ninterface UseToolbarKeyboardNavigationProps {\n orientation?: 'horizontal' | 'vertical'\n dir?: 'ltr' | 'rtl'\n loop?: boolean\n onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n}\n\n/**\n * Custom keyboard navigation for Radix Toolbar that allows navigation to aria-disabled items.\n *\n * By default, Radix UI Toolbar skips items with aria-disabled=\"true\" during keyboard navigation.\n * This hook intercepts arrow key events and manually handles focus management when aria-disabled\n * items are involved, while delegating to Radix for normal navigation.\n */\nexport const useToolbarKeyboardNavigation = ({\n orientation = 'horizontal',\n dir,\n loop = true,\n onKeyDown,\n}: UseToolbarKeyboardNavigationProps): ((\n event: KeyboardEvent<HTMLDivElement>\n) => void) => {\n const localDir = useDirection(dir ?? 'ltr')\n\n return useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const { key, currentTarget } = event\n const isHorizontal = orientation === 'horizontal'\n const isRTL = localDir === 'rtl'\n\n const isForward =\n (isHorizontal && key === (isRTL ? 'ArrowLeft' : 'ArrowRight')) ||\n (!isHorizontal && key === 'ArrowDown')\n\n const isBackward =\n (isHorizontal && key === (isRTL ? 'ArrowRight' : 'ArrowLeft')) ||\n (!isHorizontal && key === 'ArrowUp')\n\n if (!isForward && !isBackward) {\n onKeyDown?.(event)\n return\n }\n\n // Find all navigable items (using Radix's collection attribute)\n const items = Array.from(\n currentTarget.querySelectorAll('[data-radix-collection-item]')\n ).filter(item => !item.hasAttribute('disabled')) as HTMLElement[]\n\n // Find currently focused item\n const currentIndex = items.findIndex(item =>\n item.contains(document.activeElement)\n )\n\n if (items.length === 0 || currentIndex === -1) {\n return onKeyDown?.(event)\n }\n\n // Calculate next item index\n let nextIndex: number\n if (isForward) {\n nextIndex = currentIndex + 1\n if (nextIndex >= items.length) {\n nextIndex = loop ? 0 : currentIndex\n }\n } else {\n nextIndex = currentIndex - 1\n if (nextIndex < 0) {\n nextIndex = loop ? items.length - 1 : currentIndex\n }\n }\n\n // Check if aria-disabled items are involved\n const currentIsAriaDisabled =\n items[currentIndex]?.getAttribute('aria-disabled') === 'true'\n const nextIsAriaDisabled =\n items[nextIndex]?.getAttribute('aria-disabled') === 'true'\n\n // Only override Radix if aria-disabled items are involved\n // Otherwise, let Radix handle it with all their edge cases and optimizations\n if (!currentIsAriaDisabled && !nextIsAriaDisabled) {\n onKeyDown?.(event)\n return\n }\n\n // Take control: prevent Radix's handler and manually move focus\n event.preventDefault()\n event.stopPropagation()\n\n if (nextIndex !== currentIndex) {\n items[nextIndex]?.focus()\n }\n\n onKeyDown?.(event)\n },\n [orientation, localDir, loop, onKeyDown]\n )\n}\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { useToolbarKeyboardNavigation } from './hooks/use-toolbar-keyboard-navigation'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n onKeyDown,\n ...restProps\n },\n forwardRef\n ) => {\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n const handleKeyDown = useToolbarKeyboardNavigation({\n orientation,\n dir,\n loop,\n onKeyDown,\n })\n\n return (\n <StyledToolbar\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n onKeyDown={handleKeyDown}\n ref={forwardRef}\n {...restProps}\n />\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","useAriaDisabled","usePress","booleanify","useHover","jsx","mergeProps","focus","Separator","useDirection","useCallback"],"mappings":"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"}
|
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/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/partials/item.styled.tsx","../src/partials/item.tsx","../src/hooks/use-toolbar-keyboard-navigation.ts","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n variant: {\n floating: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n flat: {},\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n extends StyledBaseItemProps,\n HoverEvents,\n PressEvents {\n disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n ElementRef<typeof StyledBaseItem>,\n BaseItemProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const elementProps = useAriaDisabled(\n {\n ...restProps,\n ariaDisabled,\n },\n { allowArrows: true }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n return (\n <StyledBaseItem\n {...mergeProps(pressProps, hoverProps)}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n ...focus.css({\n boxShadow: '$focus',\n }),\n '&[disabled]': {\n pointerEvents: 'none',\n },\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n padding: 0,\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n\n ...sharedStyles.base,\n\n variants: {\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\n\nexport interface IconProps extends BaseItemProps {\n /**\n * Renders icon in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n ({ active = false, ...restProps }, forwardRef) => (\n <StyledIcon {...restProps} active={active} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: '$border-neutrals-subtle',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n paddingX: '$150',\n\n ...sharedStyles.base,\n color: '$text-primary',\n textDecoration: 'underline solid',\n textDecorationThickness: '1px',\n textUnderlineOffset: '4px',\n outline: 'none',\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink {...restProps} asChild>\n <a href={href} ref={forwardRef}>\n {children}\n </a>\n </StyledLink>\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\n\n variants: {\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n if (shouldRenderUnstyled) {\n return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n }\n\n return (\n <StyledItem\n {...restProps}\n asChild={asChild}\n active={active}\n ref={forwardRef}\n />\n )\n }\n)\n","import { useCallback } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { useDirection } from '@radix-ui/react-direction'\n\ninterface UseToolbarKeyboardNavigationProps {\n orientation?: 'horizontal' | 'vertical'\n dir?: 'ltr' | 'rtl'\n loop?: boolean\n onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n}\n\n/**\n * Custom keyboard navigation for Radix Toolbar that allows navigation to aria-disabled items.\n *\n * By default, Radix UI Toolbar skips items with aria-disabled=\"true\" during keyboard navigation.\n * This hook intercepts arrow key events and manually handles focus management when aria-disabled\n * items are involved, while delegating to Radix for normal navigation.\n */\nexport const useToolbarKeyboardNavigation = ({\n orientation = 'horizontal',\n dir,\n loop = true,\n onKeyDown,\n}: UseToolbarKeyboardNavigationProps): ((\n event: KeyboardEvent<HTMLDivElement>\n) => void) => {\n const localDir = useDirection(dir ?? 'ltr')\n\n return useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const { key, currentTarget } = event\n const isHorizontal = orientation === 'horizontal'\n const isRTL = localDir === 'rtl'\n\n const isForward =\n (isHorizontal && key === (isRTL ? 'ArrowLeft' : 'ArrowRight')) ||\n (!isHorizontal && key === 'ArrowDown')\n\n const isBackward =\n (isHorizontal && key === (isRTL ? 'ArrowRight' : 'ArrowLeft')) ||\n (!isHorizontal && key === 'ArrowUp')\n\n if (!isForward && !isBackward) {\n onKeyDown?.(event)\n return\n }\n\n // Find all navigable items (using Radix's collection attribute)\n const items = Array.from(\n currentTarget.querySelectorAll('[data-radix-collection-item]')\n ).filter(item => !item.hasAttribute('disabled')) as HTMLElement[]\n\n // Find currently focused item\n const currentIndex = items.findIndex(item =>\n item.contains(document.activeElement)\n )\n\n if (items.length === 0 || currentIndex === -1) {\n return onKeyDown?.(event)\n }\n\n // Calculate next item index\n let nextIndex: number\n if (isForward) {\n nextIndex = currentIndex + 1\n if (nextIndex >= items.length) {\n nextIndex = loop ? 0 : currentIndex\n }\n } else {\n nextIndex = currentIndex - 1\n if (nextIndex < 0) {\n nextIndex = loop ? items.length - 1 : currentIndex\n }\n }\n\n // Check if aria-disabled items are involved\n const currentIsAriaDisabled =\n items[currentIndex]?.getAttribute('aria-disabled') === 'true'\n const nextIsAriaDisabled =\n items[nextIndex]?.getAttribute('aria-disabled') === 'true'\n\n // Only override Radix if aria-disabled items are involved\n // Otherwise, let Radix handle it with all their edge cases and optimizations\n if (!currentIsAriaDisabled && !nextIsAriaDisabled) {\n onKeyDown?.(event)\n return\n }\n\n // Take control: prevent Radix's handler and manually move focus\n event.preventDefault()\n event.stopPropagation()\n\n if (nextIndex !== currentIndex) {\n items[nextIndex]?.focus()\n }\n\n onKeyDown?.(event)\n },\n [orientation, localDir, loop, onKeyDown]\n )\n}\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { useToolbarKeyboardNavigation } from './hooks/use-toolbar-keyboard-navigation'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n onKeyDown,\n ...restProps\n },\n forwardRef\n ) => {\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n const handleKeyDown = useToolbarKeyboardNavigation({\n orientation,\n dir,\n loop,\n onKeyDown,\n })\n\n return (\n <StyledToolbar\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n onKeyDown={handleKeyDown}\n ref={forwardRef}\n {...restProps}\n />\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/base-item.styled.ts","../src/partials/base-item.tsx","../src/styles.ts","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/partials/item.styled.tsx","../src/partials/item.tsx","../src/hooks/use-toolbar-keyboard-navigation.ts","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n variant: {\n floating: {\n backgroundColor: '$background-neutrals-layout',\n boxShadow: '$elevation-100',\n border: '0.5px solid $border-neutrals-subtle',\n borderRadius: '$100',\n padding: '$50',\n },\n flat: {},\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\n\nexport const StyledBaseItem = styled(RadixToolbar.Button, {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n})\n\nexport type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\nimport { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\n\nimport { StyledBaseItem } from './base-item.styled'\nimport type { StyledBaseItemProps } from './base-item.styled'\n\nexport interface BaseItemProps\n extends StyledBaseItemProps,\n HoverEvents,\n PressEvents {\n disabled?: boolean\n}\n\nexport const BaseItem = React.forwardRef<\n ElementRef<typeof StyledBaseItem>,\n BaseItemProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const elementProps = useAriaDisabled(\n {\n ...restProps,\n ariaDisabled,\n },\n { allowArrows: true }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n return (\n <StyledBaseItem\n {...mergeProps(pressProps, hoverProps)}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { focus } from '@mirohq/design-system-styles'\n\nexport const disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const sharedStyles = {\n base: {\n backgroundColor: '$transparent',\n borderRadius: '$50',\n height: '$10',\n border: 'none',\n ...focus.css({\n boxShadow: '$focus',\n }),\n '&[disabled]': {\n pointerEvents: 'none',\n },\n '&:not([aria-disabled=\"true\"])': {\n '&[data-hovered]': {\n backgroundColor: '$background-neutrals-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-neutrals-active',\n },\n },\n },\n}\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledIcon = styled(BaseItem, {\n padding: 0,\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n\n ...sharedStyles.base,\n\n variants: {\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$icon-neutrals-disabled',\n },\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledIcon } from './icon.styled'\n\nexport interface IconProps extends BaseItemProps {\n /**\n * Renders icon in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n ({ active = false, ...restProps }, forwardRef) => (\n <StyledIcon {...restProps} active={active} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: '$border-neutrals-subtle',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledLink = styled(BaseItem, {\n paddingX: '$150',\n\n ...sharedStyles.base,\n color: '$text-primary',\n textDecoration: 'underline solid',\n textDecorationThickness: '1px',\n textUnderlineOffset: '4px',\n outline: 'none',\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<'a'>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink {...restProps} asChild>\n <a href={href} ref={forwardRef}>\n {children}\n </a>\n </StyledLink>\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { BaseItem } from './base-item'\nimport { disabledSelector, sharedStyles } from '../styles'\n\nexport const StyledItem = styled(BaseItem, {\n ...sharedStyles.base,\n\n variants: {\n active: {\n true: {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$text-primary-selected',\n },\n false: {\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n },\n },\n },\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { BaseItemProps } from './base-item'\nimport { BaseItem } from './base-item'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends BaseItemProps {\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n ({ active = false, unstyled = true, asChild, ...restProps }, forwardRef) => {\n const shouldRenderUnstyled = asChild === true ? unstyled : false\n\n if (shouldRenderUnstyled) {\n return <BaseItem {...restProps} asChild={asChild} ref={forwardRef} />\n }\n\n return (\n <StyledItem\n {...restProps}\n asChild={asChild}\n active={active}\n ref={forwardRef}\n />\n )\n }\n)\n","import { useCallback } from 'react'\nimport type { KeyboardEvent } from 'react'\nimport { useDirection } from '@radix-ui/react-direction'\n\ninterface UseToolbarKeyboardNavigationProps {\n orientation?: 'horizontal' | 'vertical'\n dir?: 'ltr' | 'rtl'\n loop?: boolean\n onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n}\n\n/**\n * Custom keyboard navigation for Radix Toolbar that allows navigation to aria-disabled items.\n *\n * By default, Radix UI Toolbar skips items with aria-disabled=\"true\" during keyboard navigation.\n * This hook intercepts arrow key events and manually handles focus management when aria-disabled\n * items are involved, while delegating to Radix for normal navigation.\n */\nexport const useToolbarKeyboardNavigation = ({\n orientation = 'horizontal',\n dir,\n loop = true,\n onKeyDown,\n}: UseToolbarKeyboardNavigationProps): ((\n event: KeyboardEvent<HTMLDivElement>\n) => void) => {\n const localDir = useDirection(dir ?? 'ltr')\n\n return useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const { key, currentTarget } = event\n const isHorizontal = orientation === 'horizontal'\n const isRTL = localDir === 'rtl'\n\n const isForward =\n (isHorizontal && key === (isRTL ? 'ArrowLeft' : 'ArrowRight')) ||\n (!isHorizontal && key === 'ArrowDown')\n\n const isBackward =\n (isHorizontal && key === (isRTL ? 'ArrowRight' : 'ArrowLeft')) ||\n (!isHorizontal && key === 'ArrowUp')\n\n if (!isForward && !isBackward) {\n onKeyDown?.(event)\n return\n }\n\n // Find all navigable items (using Radix's collection attribute)\n const items = Array.from(\n currentTarget.querySelectorAll('[data-radix-collection-item]')\n ).filter(item => !item.hasAttribute('disabled')) as HTMLElement[]\n\n // Find currently focused item\n const currentIndex = items.findIndex(item =>\n item.contains(document.activeElement)\n )\n\n if (items.length === 0 || currentIndex === -1) {\n return onKeyDown?.(event)\n }\n\n // Calculate next item index\n let nextIndex: number\n if (isForward) {\n nextIndex = currentIndex + 1\n if (nextIndex >= items.length) {\n nextIndex = loop ? 0 : currentIndex\n }\n } else {\n nextIndex = currentIndex - 1\n if (nextIndex < 0) {\n nextIndex = loop ? items.length - 1 : currentIndex\n }\n }\n\n // Check if aria-disabled items are involved\n const currentIsAriaDisabled =\n items[currentIndex]?.getAttribute('aria-disabled') === 'true'\n const nextIsAriaDisabled =\n items[nextIndex]?.getAttribute('aria-disabled') === 'true'\n\n // Only override Radix if aria-disabled items are involved\n // Otherwise, let Radix handle it with all their edge cases and optimizations\n if (!currentIsAriaDisabled && !nextIsAriaDisabled) {\n onKeyDown?.(event)\n return\n }\n\n // Take control: prevent Radix's handler and manually move focus\n event.preventDefault()\n event.stopPropagation()\n\n if (nextIndex !== currentIndex) {\n items[nextIndex]?.focus()\n }\n\n onKeyDown?.(event)\n },\n [orientation, localDir, loop, onKeyDown]\n )\n}\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\nimport { useToolbarKeyboardNavigation } from './hooks/use-toolbar-keyboard-navigation'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * @deprecated Please use variant for non-floating toolbar\n */\n unstyled?: boolean\n\n /**\n * When floating, the toolbar has shadow and border to differentiate it from the surface\n * @default floating\n */\n variant?: StyledToolbarProps['variant']\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled,\n orientation = 'horizontal',\n variant = 'floating',\n dir = 'ltr',\n loop = true,\n onKeyDown,\n ...restProps\n },\n forwardRef\n ) => {\n const variantProp =\n unstyled === undefined ? variant : unstyled ? 'flat' : 'floating'\n\n const handleKeyDown = useToolbarKeyboardNavigation({\n orientation,\n dir,\n loop,\n onKeyDown,\n })\n\n return (\n <StyledToolbar\n variant={variantProp}\n orientation={orientation}\n dir={dir}\n loop={loop}\n onKeyDown={handleKeyDown}\n ref={forwardRef}\n {...restProps}\n />\n )\n }\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,20 +1,39 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { AnchorHTMLAttributes, ForwardRefExoticComponent } from 'react';
|
|
3
|
-
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
4
3
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
5
4
|
import { StrictComponentProps } from '@mirohq/design-system-stitches';
|
|
6
5
|
import * as _radix_ui_react_toolbar from '@radix-ui/react-toolbar';
|
|
7
6
|
import { HoverEvents } from '@react-types/shared';
|
|
8
7
|
import { PressEvents } from '@mirohq/design-system-use-press';
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
/* Utilities */
|
|
10
|
+
/* ========================================================================== */
|
|
11
|
+
|
|
12
|
+
/** Returns a string with the given prefix followed by the given values. */
|
|
13
|
+
type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
|
|
14
|
+
|
|
15
|
+
type TransformProps<Props, Media> = {
|
|
16
|
+
[K in keyof Props]: (
|
|
17
|
+
| Props[K]
|
|
18
|
+
| (
|
|
19
|
+
& {
|
|
20
|
+
[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
|
|
21
|
+
}
|
|
22
|
+
& {
|
|
23
|
+
[KMedia in string]: Props[K]
|
|
24
|
+
}
|
|
25
|
+
)
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>>, "variant"> & TransformProps<{
|
|
11
30
|
variant?: "flat" | "floating" | undefined;
|
|
12
31
|
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarProps & react.RefAttributes<HTMLDivElement>>, {
|
|
13
32
|
variant?: "flat" | "floating" | undefined;
|
|
14
33
|
}, {}>;
|
|
15
34
|
type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>;
|
|
16
35
|
|
|
17
|
-
declare const StyledBaseItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>>, never> &
|
|
36
|
+
declare const StyledBaseItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarButtonProps & react.RefAttributes<HTMLButtonElement>>, {}, {}>;
|
|
18
37
|
type StyledBaseItemProps = StrictComponentProps<typeof StyledBaseItem>;
|
|
19
38
|
|
|
20
39
|
interface BaseItemProps extends StyledBaseItemProps, HoverEvents, PressEvents {
|
|
@@ -30,14 +49,14 @@ interface IconProps extends BaseItemProps {
|
|
|
30
49
|
}
|
|
31
50
|
declare const Icon: react__default.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
|
|
32
51
|
|
|
33
|
-
declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>>, never> &
|
|
52
|
+
declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toolbar.ToolbarSeparatorProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
|
|
34
53
|
type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>;
|
|
35
54
|
|
|
36
55
|
interface SeparatorProps extends StyledSeparatorProps {
|
|
37
56
|
}
|
|
38
57
|
declare const Separator: react__default.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
|
|
39
58
|
|
|
40
|
-
declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<Omit<BaseItemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>>, never> &
|
|
59
|
+
declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<Omit<BaseItemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<Omit<BaseItemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>, {}, {}>;
|
|
41
60
|
|
|
42
61
|
type ItemPropsWithAnchor = Omit<BaseItemProps, 'ref'> & AnchorHTMLAttributes<typeof StyledLink>;
|
|
43
62
|
interface LinkProps extends ItemPropsWithAnchor {
|
|
@@ -95,4 +114,5 @@ interface Partials {
|
|
|
95
114
|
Separator: typeof Separator;
|
|
96
115
|
}
|
|
97
116
|
|
|
98
|
-
export { Toolbar
|
|
117
|
+
export { Toolbar };
|
|
118
|
+
export type { IconProps as ToolbarIconProps, ItemProps as ToolbarItemProps, LinkProps as ToolbarLinkProps, ToolbarProps, SeparatorProps as ToolbarSeparatorProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-toolbar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.0-fix-stitches-types.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"@react-aria/interactions": "^3.13.0",
|
|
33
33
|
"@react-aria/utils": "^3.31.0",
|
|
34
34
|
"@react-types/shared": "^3.16.0",
|
|
35
|
-
"@mirohq/design-system-stitches": "^3.
|
|
36
|
-
"@mirohq/design-system-styles": "^3.0
|
|
37
|
-
"@mirohq/design-system-use-aria-disabled": "^1.1.1
|
|
38
|
-
"@mirohq/design-system-use-press": "^1.1.1
|
|
39
|
-
"@mirohq/design-system-utils": "^1.2.1
|
|
35
|
+
"@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.0",
|
|
36
|
+
"@mirohq/design-system-styles": "^3.1.0-fix-stitches-types.0",
|
|
37
|
+
"@mirohq/design-system-use-aria-disabled": "^1.1.1",
|
|
38
|
+
"@mirohq/design-system-use-press": "^1.1.1",
|
|
39
|
+
"@mirohq/design-system-utils": "^1.2.1"
|
|
40
40
|
},
|
|
41
41
|
"scripts": {
|
|
42
42
|
"build": "rollup -c ../../../rollup.config.js",
|