@mirohq/design-system-toolbar 2.1.11 → 2.1.13-update-toolbar-alias-tokens.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +13 -9
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +13 -9
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +24 -24
  6. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -46,7 +46,7 @@ const StyledToolbar = designSystemStitches.styled(RadixToolbar.Root, {
46
46
  variants: {
47
47
  unstyled: {
48
48
  false: {
49
- backgroundColor: "$white",
49
+ backgroundColor: "$background-neutrals-container",
50
50
  boxShadow: "$50",
51
51
  borderRadius: "$50",
52
52
  '&[data-orientation="vertical"]': {
@@ -78,15 +78,18 @@ const StyledItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
78
78
  false: {
79
79
  ...defaultStyles,
80
80
  borderRadius: 4,
81
- boxShadow: "0 0 0 2px white inset",
82
81
  height: "$11",
83
82
  "&:hover": {
84
- backgroundColor: "rgba(240, 242, 255, 1)",
85
- color: "rgba(66, 98, 255, 1)"
83
+ backgroundColor: "$background-primary-subtle-hover",
84
+ color: "$icon-primary-hover"
85
+ },
86
+ "&:active": {
87
+ backgroundColor: "$background-primary-subtle-active",
88
+ color: "$icon-primary-active"
86
89
  },
87
90
  ...designSystemStyles.focus.css({
88
- backgroundColor: "rgba(240, 242, 255, 1)",
89
- color: "rgba(66, 98, 255, 1)"
91
+ backgroundColor: "$background-neutrals-container",
92
+ color: "$icon-neutrals"
90
93
  }),
91
94
  "&[disabled]": {
92
95
  opacity: "0.4",
@@ -118,8 +121,8 @@ const StyledItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
118
121
  active: true,
119
122
  css: {
120
123
  "&&": {
121
- backgroundColor: "rgba(232, 236, 255, 1)",
122
- color: "rgba(66, 98, 255, 1)"
124
+ backgroundColor: "$background-primary-subtle-hover",
125
+ color: "$icon-primary-hover"
123
126
  }
124
127
  }
125
128
  }
@@ -147,7 +150,8 @@ const Item = React__default["default"].forwardRef(
147
150
 
148
151
  const StyledIcon = designSystemStitches.styled(Item, {
149
152
  fontSize: "24px",
150
- width: "$11"
153
+ width: "$11",
154
+ color: "$icon-neutrals"
151
155
  });
152
156
 
153
157
  const Icon = React__default["default"].forwardRef(
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/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/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\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$white',\n boxShadow: '$50',\n borderRadius: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n padding: '$50 2px',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n padding: '2px $50',\n },\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'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\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 const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n // (boxshadow-size + actual radius) to get the border-radius working with the inset box-shadow\n borderRadius: 4,\n boxShadow: '0 0 0 2px white inset',\n height: '$11',\n\n '&:hover': {\n backgroundColor: 'rgba(240, 242, 255, 1)',\n color: 'rgba(66, 98, 255, 1)',\n },\n\n ...focus.css({\n backgroundColor: 'rgba(240, 242, 255, 1)',\n color: 'rgba(66, 98, 255, 1)',\n }),\n\n '&[disabled]': {\n opacity: '0.4',\n pointerEvents: 'none',\n },\n\n '&&': {\n ...focus.inner,\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: 'rgba(232, 236, 255, 1)',\n color: 'rgba(66, 98, 255, 1)',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * temporary the same as onClick, later will be added touch events support\n */\n onPress?: DOMAttributes<HTMLElement>['onClick']\n\n /**\n * Renders item in enabled/toggled state\n */\n active?: boolean\n\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 setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n asChild,\n unstyled = true,\n active = false,\n onPress,\n onClick,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledItem\n onClick={onPress ?? onClick}\n {...restProps}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n ref={forwardRef}\n />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n fontSize: '24px',\n width: '$11',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} 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: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $150',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$150 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 { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\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'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\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 * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: '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 dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","focus","React","Separator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIa,MAAA,aAAA,GAAgBA,4BAAOC,iBAAM,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,EAEV,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,QAAU,EAAA;AAAA,MACR,KAAO,EAAA;AAAA,QACL,eAAiB,EAAA,QAAA;AAAA,QACjB,SAAW,EAAA,KAAA;AAAA,QACX,YAAc,EAAA,KAAA;AAAA,QAEd,gCAAkC,EAAA;AAAA,UAChC,OAAS,EAAA,SAAA;AAAA,SACX;AAAA,QAEA,kCAAoC,EAAA;AAAA,UAClC,OAAS,EAAA,SAAA;AAAA,SACX;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AChCD,MAAM,aAAgB,GAAA;AAAA,EACpB,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,CAAA,CAAA;AAEa,MAAA,UAAA,GAAaD,2BAAO,CAAAE,uBAAA,CAAa,MAAQ,EAAA;AAAA,EACpD,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,GAAG,aAAA;AAAA,OACL;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,aAAA;AAAA,QAEH,YAAc,EAAA,CAAA;AAAA,QACd,SAAW,EAAA,uBAAA;AAAA,QACX,MAAQ,EAAA,KAAA;AAAA,QAER,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,wBAAA;AAAA,UACjB,KAAO,EAAA,sBAAA;AAAA,SACT;AAAA,QAEA,GAAGC,yBAAM,GAAI,CAAA;AAAA,UACX,eAAiB,EAAA,wBAAA;AAAA,UACjB,KAAO,EAAA,sBAAA;AAAA,SACR,CAAA;AAAA,QAED,aAAe,EAAA;AAAA,UACb,OAAS,EAAA,KAAA;AAAA,UACT,aAAe,EAAA,MAAA;AAAA,SACjB;AAAA,QAEA,IAAM,EAAA;AAAA,UACJ,GAAGA,wBAAM,CAAA,KAAA;AAAA,SACX;AAAA,OACF;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,aAAA;AAAA,QACjB,MAAQ,EAAA,MAAA;AAAA,QACR,MAAQ,EAAA,SAAA;AAAA,OACV;AAAA,KACF;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,QAAU,EAAA,KAAA;AAAA,MACV,MAAQ,EAAA,IAAA;AAAA,MACR,GAAK,EAAA;AAAA,QACH,IAAM,EAAA;AAAA,UACJ,eAAiB,EAAA,wBAAA;AAAA,UACjB,KAAO,EAAA,sBAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACjDM,MAAM,OAAOC,yBAAM,CAAA,UAAA;AAAA,EACxB,CACE;AAAA,IACE,OAAA;AAAA,IACA,QAAW,GAAA,IAAA;AAAA,IACX,MAAS,GAAA,KAAA;AAAA,IACT,OAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACL,EACA,+BAECA,yBAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAS,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,OAAA;AAAA,IACnB,GAAG,SAAA;AAAA,IACJ,OAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA,EAAU,OAAY,KAAA,IAAA,GAAO,QAAW,GAAA,KAAA;AAAA,IACxC,SAAS,OAAY,KAAA,IAAA;AAAA,IACrB,GAAK,EAAA,UAAA;AAAA,GACP,CAAA;AAEJ,CAAA;;AC9Ca,MAAA,UAAA,GAAaJ,4BAAO,IAAM,EAAA;AAAA,EACrC,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,KAAA;AACT,CAAC,CAAA;;ACCM,MAAM,OAAOI,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,KAAO,EAAA,UAAA,qBACLA,yBAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAW,QAAU,EAAA,KAAA;AAAA,IAAQ,GAAG,KAAA;AAAA,IAAO,GAAK,EAAA,UAAA;AAAA,GAAY,CAAA;AAE7D,CAAA;;ACRa,MAAA,eAAA,GAAkBJ,4BAAOK,sBAAW,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,QAAA;AAAA,GACV;AAAA,EAEA,kCAAoC,EAAA;AAAA,IAClC,MAAQ,EAAA,KAAA;AAAA,IACR,KAAO,EAAA,IAAA;AAAA,IACP,MAAQ,EAAA,QAAA;AAAA,GACV;AACF,CAAC,CAAA;;ACbM,MAAM,YAAYD,yBAAM,CAAA,UAAA,CAG7B,CAAC,KAAA,EAAO,+BAAgBA,yBAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,EAAiB,GAAG,KAAA;AAAA,EAAO,GAAK,EAAA,UAAA;AAAA,CAAY,CAAE,CAAA;;ACP3D,MAAA,UAAA,GAAaJ,4BAAO,IAAM,EAAA;AAAA,EACrC,QAAU,EAAA,MAAA;AAAA,EACV,cAAgB,EAAA,MAAA;AAClB,CAAC,CAAA;;ACGM,MAAM,OAAOI,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,QAAA,EAAU,SAAS,SAAU,EAAA,EAAG,+BAChCA,yBAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAW,OAAO,EAAA,IAAA;AAAA,IAAC,QAAU,EAAA,KAAA;AAAA,IAAQ,GAAG,SAAA;AAAA,IAAW,GAAK,EAAA,UAAA;AAAA,GAAA,kBACtDA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,IAAA;AAAA,GAAA,EAAa,QAAS,CAC3B,CAAA;AAEJ,CAAA;;AC0BO,MAAM,UAAUA,yBAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,WAAc,GAAA,YAAA;AAAA,IACd,GAAM,GAAA,KAAA;AAAA,IACN,IAAO,GAAA,IAAA;AAAA,IACP,SAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACL,EACA,+BAECA,yBAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IACC,QAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAK,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,GAAA;AAAA,IAClB,IAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,IACJ,GAAG,SAAA;AAAA,GACN,CAAA;AAEJ,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":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../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/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\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n padding: '$50 2px',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n padding: '2px $50',\n },\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'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\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 const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$11',\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n\n ...focus.css({\n backgroundColor: '$background-neutrals-container',\n color: '$icon-neutrals',\n }),\n\n '&[disabled]': {\n opacity: '0.4',\n pointerEvents: 'none',\n },\n\n '&&': {\n ...focus.inner,\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * temporary the same as onClick, later will be added touch events support\n */\n onPress?: DOMAttributes<HTMLElement>['onClick']\n\n /**\n * Renders item in enabled/toggled state\n */\n active?: boolean\n\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 setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n asChild,\n unstyled = true,\n active = false,\n onPress,\n onClick,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledItem\n onClick={onPress ?? onClick}\n {...restProps}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n ref={forwardRef}\n />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n fontSize: '24px',\n width: '$11',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} 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: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $150',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$150 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 { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\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'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\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 * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: '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 dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","focus","React","Separator"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -20,7 +20,7 @@ const StyledToolbar = styled(Root, {
20
20
  variants: {
21
21
  unstyled: {
22
22
  false: {
23
- backgroundColor: "$white",
23
+ backgroundColor: "$background-neutrals-container",
24
24
  boxShadow: "$50",
25
25
  borderRadius: "$50",
26
26
  '&[data-orientation="vertical"]': {
@@ -52,15 +52,18 @@ const StyledItem = styled(RadixToolbar.Button, {
52
52
  false: {
53
53
  ...defaultStyles,
54
54
  borderRadius: 4,
55
- boxShadow: "0 0 0 2px white inset",
56
55
  height: "$11",
57
56
  "&:hover": {
58
- backgroundColor: "rgba(240, 242, 255, 1)",
59
- color: "rgba(66, 98, 255, 1)"
57
+ backgroundColor: "$background-primary-subtle-hover",
58
+ color: "$icon-primary-hover"
59
+ },
60
+ "&:active": {
61
+ backgroundColor: "$background-primary-subtle-active",
62
+ color: "$icon-primary-active"
60
63
  },
61
64
  ...focus.css({
62
- backgroundColor: "rgba(240, 242, 255, 1)",
63
- color: "rgba(66, 98, 255, 1)"
65
+ backgroundColor: "$background-neutrals-container",
66
+ color: "$icon-neutrals"
64
67
  }),
65
68
  "&[disabled]": {
66
69
  opacity: "0.4",
@@ -92,8 +95,8 @@ const StyledItem = styled(RadixToolbar.Button, {
92
95
  active: true,
93
96
  css: {
94
97
  "&&": {
95
- backgroundColor: "rgba(232, 236, 255, 1)",
96
- color: "rgba(66, 98, 255, 1)"
98
+ backgroundColor: "$background-primary-subtle-hover",
99
+ color: "$icon-primary-hover"
97
100
  }
98
101
  }
99
102
  }
@@ -121,7 +124,8 @@ const Item = React.forwardRef(
121
124
 
122
125
  const StyledIcon = styled(Item, {
123
126
  fontSize: "24px",
124
- width: "$11"
127
+ width: "$11",
128
+ color: "$icon-neutrals"
125
129
  });
126
130
 
127
131
  const Icon = React.forwardRef(
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/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/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\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$white',\n boxShadow: '$50',\n borderRadius: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n padding: '$50 2px',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n padding: '2px $50',\n },\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'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\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 const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n // (boxshadow-size + actual radius) to get the border-radius working with the inset box-shadow\n borderRadius: 4,\n boxShadow: '0 0 0 2px white inset',\n height: '$11',\n\n '&:hover': {\n backgroundColor: 'rgba(240, 242, 255, 1)',\n color: 'rgba(66, 98, 255, 1)',\n },\n\n ...focus.css({\n backgroundColor: 'rgba(240, 242, 255, 1)',\n color: 'rgba(66, 98, 255, 1)',\n }),\n\n '&[disabled]': {\n opacity: '0.4',\n pointerEvents: 'none',\n },\n\n '&&': {\n ...focus.inner,\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: 'rgba(232, 236, 255, 1)',\n color: 'rgba(66, 98, 255, 1)',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * temporary the same as onClick, later will be added touch events support\n */\n onPress?: DOMAttributes<HTMLElement>['onClick']\n\n /**\n * Renders item in enabled/toggled state\n */\n active?: boolean\n\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 setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n asChild,\n unstyled = true,\n active = false,\n onPress,\n onClick,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledItem\n onClick={onPress ?? onClick}\n {...restProps}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n ref={forwardRef}\n />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n fontSize: '24px',\n width: '$11',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} 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: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $150',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$150 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 { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\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'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\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 * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: '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 dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface 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,EAEV,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,QAAU,EAAA;AAAA,MACR,KAAO,EAAA;AAAA,QACL,eAAiB,EAAA,QAAA;AAAA,QACjB,SAAW,EAAA,KAAA;AAAA,QACX,YAAc,EAAA,KAAA;AAAA,QAEd,gCAAkC,EAAA;AAAA,UAChC,OAAS,EAAA,SAAA;AAAA,SACX;AAAA,QAEA,kCAAoC,EAAA;AAAA,UAClC,OAAS,EAAA,SAAA;AAAA,SACX;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AChCD,MAAM,aAAgB,GAAA;AAAA,EACpB,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,CAAA,CAAA;AAEa,MAAA,UAAA,GAAa,MAAO,CAAA,YAAA,CAAa,MAAQ,EAAA;AAAA,EACpD,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,GAAG,aAAA;AAAA,OACL;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,aAAA;AAAA,QAEH,YAAc,EAAA,CAAA;AAAA,QACd,SAAW,EAAA,uBAAA;AAAA,QACX,MAAQ,EAAA,KAAA;AAAA,QAER,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,wBAAA;AAAA,UACjB,KAAO,EAAA,sBAAA;AAAA,SACT;AAAA,QAEA,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,eAAiB,EAAA,wBAAA;AAAA,UACjB,KAAO,EAAA,sBAAA;AAAA,SACR,CAAA;AAAA,QAED,aAAe,EAAA;AAAA,UACb,OAAS,EAAA,KAAA;AAAA,UACT,aAAe,EAAA,MAAA;AAAA,SACjB;AAAA,QAEA,IAAM,EAAA;AAAA,UACJ,GAAG,KAAM,CAAA,KAAA;AAAA,SACX;AAAA,OACF;AAAA,KACF;AAAA,IACA,OAAS,EAAA;AAAA,MACP,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,aAAA;AAAA,QACjB,MAAQ,EAAA,MAAA;AAAA,QACR,MAAQ,EAAA,SAAA;AAAA,OACV;AAAA,KACF;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,QAAU,EAAA,KAAA;AAAA,MACV,MAAQ,EAAA,IAAA;AAAA,MACR,GAAK,EAAA;AAAA,QACH,IAAM,EAAA;AAAA,UACJ,eAAiB,EAAA,wBAAA;AAAA,UACjB,KAAO,EAAA,sBAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACjDM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CACE;AAAA,IACE,OAAA;AAAA,IACA,QAAW,GAAA,IAAA;AAAA,IACX,MAAS,GAAA,KAAA;AAAA,IACT,OAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACL,EACA,+BAEC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAS,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,OAAA;AAAA,IACnB,GAAG,SAAA;AAAA,IACJ,OAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA,EAAU,OAAY,KAAA,IAAA,GAAO,QAAW,GAAA,KAAA;AAAA,IACxC,SAAS,OAAY,KAAA,IAAA;AAAA,IACrB,GAAK,EAAA,UAAA;AAAA,GACP,CAAA;AAEJ,CAAA;;AC9Ca,MAAA,UAAA,GAAa,OAAO,IAAM,EAAA;AAAA,EACrC,QAAU,EAAA,MAAA;AAAA,EACV,KAAO,EAAA,KAAA;AACT,CAAC,CAAA;;ACCM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,KAAO,EAAA,UAAA,qBACL,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAW,QAAU,EAAA,KAAA;AAAA,IAAQ,GAAG,KAAA;AAAA,IAAO,GAAK,EAAA,UAAA;AAAA,GAAY,CAAA;AAE7D,CAAA;;ACRa,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,QAAA;AAAA,GACV;AAAA,EAEA,kCAAoC,EAAA;AAAA,IAClC,MAAQ,EAAA,KAAA;AAAA,IACR,KAAO,EAAA,IAAA;AAAA,IACP,MAAQ,EAAA,QAAA;AAAA,GACV;AACF,CAAC,CAAA;;ACbM,MAAM,YAAY,KAAM,CAAA,UAAA,CAG7B,CAAC,KAAA,EAAO,+BAAgB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,EAAiB,GAAG,KAAA;AAAA,EAAO,GAAK,EAAA,UAAA;AAAA,CAAY,CAAE,CAAA;;ACP3D,MAAA,UAAA,GAAa,OAAO,IAAM,EAAA;AAAA,EACrC,QAAU,EAAA,MAAA;AAAA,EACV,cAAgB,EAAA,MAAA;AAClB,CAAC,CAAA;;ACGM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,QAAA,EAAU,SAAS,SAAU,EAAA,EAAG,+BAChC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAW,OAAO,EAAA,IAAA;AAAA,IAAC,QAAU,EAAA,KAAA;AAAA,IAAQ,GAAG,SAAA;AAAA,IAAW,GAAK,EAAA,UAAA;AAAA,GAAA,kBACtD,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,IAAA;AAAA,GAAA,EAAa,QAAS,CAC3B,CAAA;AAEJ,CAAA;;AC0BO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,WAAc,GAAA,YAAA;AAAA,IACd,GAAM,GAAA,KAAA;AAAA,IACN,IAAO,GAAA,IAAA;AAAA,IACP,SAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACL,EACA,+BAEC,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IACC,QAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAK,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,GAAA;AAAA,IAClB,IAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,IACJ,GAAG,SAAA;AAAA,GACN,CAAA;AAEJ,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/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/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\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n padding: '$50 2px',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n padding: '2px $50',\n },\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'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\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 const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$11',\n\n '&:hover': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n\n ...focus.css({\n backgroundColor: '$background-neutrals-container',\n color: '$icon-neutrals',\n }),\n\n '&[disabled]': {\n opacity: '0.4',\n pointerEvents: 'none',\n },\n\n '&&': {\n ...focus.inner,\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef, DOMAttributes } from 'react'\n\nimport type { StyledItemProps } from './item.styled'\nimport { StyledItem } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * temporary the same as onClick, later will be added touch events support\n */\n onPress?: DOMAttributes<HTMLElement>['onClick']\n\n /**\n * Renders item in enabled/toggled state\n */\n active?: boolean\n\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 setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n asChild,\n unstyled = true,\n active = false,\n onPress,\n onClick,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledItem\n onClick={onPress ?? onClick}\n {...restProps}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n ref={forwardRef}\n />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n fontSize: '24px',\n width: '$11',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} 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: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $150',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$150 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 { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\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'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\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 * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: '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 dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface 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
@@ -210,28 +210,28 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Pick<Omit<{
210
210
  readonly 'icon-400': "32px";
211
211
  };
212
212
  space: {
213
- readonly none: 0;
213
+ readonly 0: 0;
214
214
  readonly 50: "4px";
215
215
  readonly 100: "8px";
216
216
  readonly 150: "12px";
217
217
  readonly 200: "16px";
218
218
  readonly 300: "24px";
219
219
  readonly 400: "32px";
220
- readonly 500: "64px";
220
+ readonly 500: "40px";
221
221
  readonly 600: "48px";
222
222
  readonly 800: "64px";
223
223
  readonly 1200: "96px";
224
224
  readonly 1600: "128px";
225
225
  };
226
226
  'space-gap': {
227
- readonly none: any;
227
+ readonly 0: any;
228
228
  readonly 50: any;
229
229
  readonly 100: any;
230
230
  readonly 200: any;
231
231
  readonly 300: any;
232
232
  };
233
233
  'space-inset': {
234
- readonly none: any;
234
+ readonly 0: any;
235
235
  readonly 50: any;
236
236
  readonly 100: any;
237
237
  readonly 150: any;
@@ -244,7 +244,7 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Pick<Omit<{
244
244
  readonly 1600: any;
245
245
  };
246
246
  'space-offset': {
247
- readonly none: any;
247
+ readonly 0: any;
248
248
  readonly 50: any;
249
249
  readonly 100: any;
250
250
  readonly 150: any;
@@ -255,7 +255,7 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Pick<Omit<{
255
255
  readonly 800: any;
256
256
  readonly 1200: any;
257
257
  readonly 1600: any;
258
- readonly 'stacking-none': any;
258
+ readonly 'stacking-0': any;
259
259
  readonly 'stacking-100': any;
260
260
  readonly 'stacking-200': any;
261
261
  readonly 'stacking-300': any;
@@ -670,28 +670,28 @@ declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
670
670
  readonly 'icon-400': "32px";
671
671
  };
672
672
  space: {
673
- readonly none: 0;
673
+ readonly 0: 0;
674
674
  readonly 50: "4px";
675
675
  readonly 100: "8px";
676
676
  readonly 150: "12px";
677
677
  readonly 200: "16px";
678
678
  readonly 300: "24px";
679
679
  readonly 400: "32px";
680
- readonly 500: "64px";
680
+ readonly 500: "40px";
681
681
  readonly 600: "48px";
682
682
  readonly 800: "64px";
683
683
  readonly 1200: "96px";
684
684
  readonly 1600: "128px";
685
685
  };
686
686
  'space-gap': {
687
- readonly none: any;
687
+ readonly 0: any;
688
688
  readonly 50: any;
689
689
  readonly 100: any;
690
690
  readonly 200: any;
691
691
  readonly 300: any;
692
692
  };
693
693
  'space-inset': {
694
- readonly none: any;
694
+ readonly 0: any;
695
695
  readonly 50: any;
696
696
  readonly 100: any;
697
697
  readonly 150: any;
@@ -704,7 +704,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
704
704
  readonly 1600: any;
705
705
  };
706
706
  'space-offset': {
707
- readonly none: any;
707
+ readonly 0: any;
708
708
  readonly 50: any;
709
709
  readonly 100: any;
710
710
  readonly 150: any;
@@ -715,7 +715,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
715
715
  readonly 800: any;
716
716
  readonly 1200: any;
717
717
  readonly 1600: any;
718
- readonly 'stacking-none': any;
718
+ readonly 'stacking-0': any;
719
719
  readonly 'stacking-100': any;
720
720
  readonly 'stacking-200': any;
721
721
  readonly 'stacking-300': any;
@@ -1147,28 +1147,28 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Pick<Omit<{}, nev
1147
1147
  readonly 'icon-400': "32px";
1148
1148
  };
1149
1149
  space: {
1150
- readonly none: 0;
1150
+ readonly 0: 0;
1151
1151
  readonly 50: "4px";
1152
1152
  readonly 100: "8px";
1153
1153
  readonly 150: "12px";
1154
1154
  readonly 200: "16px";
1155
1155
  readonly 300: "24px";
1156
1156
  readonly 400: "32px";
1157
- readonly 500: "64px";
1157
+ readonly 500: "40px";
1158
1158
  readonly 600: "48px";
1159
1159
  readonly 800: "64px";
1160
1160
  readonly 1200: "96px";
1161
1161
  readonly 1600: "128px";
1162
1162
  };
1163
1163
  'space-gap': {
1164
- readonly none: any;
1164
+ readonly 0: any;
1165
1165
  readonly 50: any;
1166
1166
  readonly 100: any;
1167
1167
  readonly 200: any;
1168
1168
  readonly 300: any;
1169
1169
  };
1170
1170
  'space-inset': {
1171
- readonly none: any;
1171
+ readonly 0: any;
1172
1172
  readonly 50: any;
1173
1173
  readonly 100: any;
1174
1174
  readonly 150: any;
@@ -1181,7 +1181,7 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Pick<Omit<{}, nev
1181
1181
  readonly 1600: any;
1182
1182
  };
1183
1183
  'space-offset': {
1184
- readonly none: any;
1184
+ readonly 0: any;
1185
1185
  readonly 50: any;
1186
1186
  readonly 100: any;
1187
1187
  readonly 150: any;
@@ -1192,7 +1192,7 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Pick<Omit<{}, nev
1192
1192
  readonly 800: any;
1193
1193
  readonly 1200: any;
1194
1194
  readonly 1600: any;
1195
- readonly 'stacking-none': any;
1195
+ readonly 'stacking-0': any;
1196
1196
  readonly 'stacking-100': any;
1197
1197
  readonly 'stacking-200': any;
1198
1198
  readonly 'stacking-300': any;
@@ -1601,28 +1601,28 @@ declare const StyledLink: react.ForwardRefExoticComponent<Pick<Omit<{}, never> &
1601
1601
  readonly 'icon-400': "32px";
1602
1602
  };
1603
1603
  space: {
1604
- readonly none: 0;
1604
+ readonly 0: 0;
1605
1605
  readonly 50: "4px";
1606
1606
  readonly 100: "8px";
1607
1607
  readonly 150: "12px";
1608
1608
  readonly 200: "16px";
1609
1609
  readonly 300: "24px";
1610
1610
  readonly 400: "32px";
1611
- readonly 500: "64px";
1611
+ readonly 500: "40px";
1612
1612
  readonly 600: "48px";
1613
1613
  readonly 800: "64px";
1614
1614
  readonly 1200: "96px";
1615
1615
  readonly 1600: "128px";
1616
1616
  };
1617
1617
  'space-gap': {
1618
- readonly none: any;
1618
+ readonly 0: any;
1619
1619
  readonly 50: any;
1620
1620
  readonly 100: any;
1621
1621
  readonly 200: any;
1622
1622
  readonly 300: any;
1623
1623
  };
1624
1624
  'space-inset': {
1625
- readonly none: any;
1625
+ readonly 0: any;
1626
1626
  readonly 50: any;
1627
1627
  readonly 100: any;
1628
1628
  readonly 150: any;
@@ -1635,7 +1635,7 @@ declare const StyledLink: react.ForwardRefExoticComponent<Pick<Omit<{}, never> &
1635
1635
  readonly 1600: any;
1636
1636
  };
1637
1637
  'space-offset': {
1638
- readonly none: any;
1638
+ readonly 0: any;
1639
1639
  readonly 50: any;
1640
1640
  readonly 100: any;
1641
1641
  readonly 150: any;
@@ -1646,7 +1646,7 @@ declare const StyledLink: react.ForwardRefExoticComponent<Pick<Omit<{}, never> &
1646
1646
  readonly 800: any;
1647
1647
  readonly 1200: any;
1648
1648
  readonly 1600: any;
1649
- readonly 'stacking-none': any;
1649
+ readonly 'stacking-0': any;
1650
1650
  readonly 'stacking-100': any;
1651
1651
  readonly 'stacking-200': any;
1652
1652
  readonly 'stacking-300': any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-toolbar",
3
- "version": "2.1.11",
3
+ "version": "2.1.13-update-toolbar-alias-tokens.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -28,8 +28,8 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@radix-ui/react-toolbar": "^1.0.0",
31
- "@mirohq/design-system-stitches": "^2.3.2",
32
- "@mirohq/design-system-styles": "^1.0.24"
31
+ "@mirohq/design-system-stitches": "^2.3.3",
32
+ "@mirohq/design-system-styles": "^1.0.25"
33
33
  },
34
34
  "scripts": {
35
35
  "build": "rollup -c ../../../rollup.config.js",