@mirohq/design-system-icon-button 1.0.4 → 1.0.6

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 CHANGED
@@ -38,7 +38,8 @@ const IconButton = React__default["default"].forwardRef(
38
38
  ref: forwardRef
39
39
  }, /* @__PURE__ */ React__default["default"].createElement(designSystemBadge.Badge, {
40
40
  show: showBadge,
41
- content: badgeContent
41
+ content: badgeContent,
42
+ inverted: variant === "solid-prominent"
42
43
  }, children))), /* @__PURE__ */ React__default["default"].createElement(designSystemTooltip.Tooltip.Content, {
43
44
  align: tooltipAlign,
44
45
  side: tooltipSide,
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/icon-button.tsx"],"sourcesContent":["import React from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport type { ElementRef } from 'react'\n\nexport interface IconButtonProps extends BaseButtonProps {\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof BaseButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n onPress,\n onClick,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n ...restProps\n },\n forwardRef\n ) => (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <BaseButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n >\n <Badge show={showBadge} content={badgeContent}>\n {children}\n </Badge>\n </BaseButton>\n </Tooltip.Trigger>\n <Tooltip.Content align={tooltipAlign} side={tooltipSide} hideWhenDetached>\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n)\n"],"names":["React","Tooltip","BaseButton","Badge"],"mappings":";;;;;;;;;;;;;AAgDO,MAAM,aAAaA,yBAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,YAAe,GAAA,QAAA;AAAA,IACf,WAAc,GAAA,QAAA;AAAA,IACd,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACJ,GAAA,SAAA;AAAA,GACL,EACA,+BAECA,yBAAA,CAAA,aAAA,CAAAC,2BAAA,EAAA;AAAA,IACC,aAAe,EAAA,oBAAA;AAAA,IACf,iBAAmB,EAAA,wBAAA;AAAA,GAEnB,kBAAAD,yBAAA,CAAA,aAAA,CAACC,4BAAQ,OAAR,EAAA;AAAA,IAAgB,OAAO,EAAA,IAAA;AAAA,GAAA,kBACrBD,yBAAA,CAAA,aAAA,CAAAE,iCAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,GAAA,kBAEJF,yBAAA,CAAA,aAAA,CAAAG,uBAAA,EAAA;AAAA,IAAM,IAAM,EAAA,SAAA;AAAA,IAAW,OAAS,EAAA,YAAA;AAAA,GAAA,EAC9B,QACH,CACF,CACF,CACA,kBAAAH,yBAAA,CAAA,aAAA,CAACC,4BAAQ,OAAR,EAAA;AAAA,IAAgB,KAAO,EAAA,YAAA;AAAA,IAAc,IAAM,EAAA,WAAA;AAAA,IAAa,gBAAgB,EAAA,IAAA;AAAA,GAAA,EACtE,KACH,CACF,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"main.js","sources":["../src/icon-button.tsx"],"sourcesContent":["import React from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport type { ElementRef } from 'react'\n\nexport interface IconButtonProps extends BaseButtonProps {\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof BaseButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n onPress,\n onClick,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n ...restProps\n },\n forwardRef\n ) => (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <BaseButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n >\n <Badge\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {children}\n </Badge>\n </BaseButton>\n </Tooltip.Trigger>\n <Tooltip.Content align={tooltipAlign} side={tooltipSide} hideWhenDetached>\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n)\n"],"names":["React","Tooltip","BaseButton","Badge"],"mappings":";;;;;;;;;;;;;AAgDO,MAAM,aAAaA,yBAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,YAAe,GAAA,QAAA;AAAA,IACf,WAAc,GAAA,QAAA;AAAA,IACd,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACJ,GAAA,SAAA;AAAA,GACL,EACA,+BAECA,yBAAA,CAAA,aAAA,CAAAC,2BAAA,EAAA;AAAA,IACC,aAAe,EAAA,oBAAA;AAAA,IACf,iBAAmB,EAAA,wBAAA;AAAA,GAEnB,kBAAAD,yBAAA,CAAA,aAAA,CAACC,4BAAQ,OAAR,EAAA;AAAA,IAAgB,OAAO,EAAA,IAAA;AAAA,GAAA,kBACrBD,yBAAA,CAAA,aAAA,CAAAE,iCAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,GAAA,kBAEJF,yBAAA,CAAA,aAAA,CAAAG,uBAAA,EAAA;AAAA,IACC,IAAM,EAAA,SAAA;AAAA,IACN,OAAS,EAAA,YAAA;AAAA,IACT,UAAU,OAAY,KAAA,iBAAA;AAAA,GAAA,EAErB,QACH,CACF,CACF,CACA,kBAAAH,yBAAA,CAAA,aAAA,CAACC,4BAAQ,OAAR,EAAA;AAAA,IAAgB,KAAO,EAAA,YAAA;AAAA,IAAc,IAAM,EAAA,WAAA;AAAA,IAAa,gBAAgB,EAAA,IAAA;AAAA,GAAA,EACtE,KACH,CACF,CAAA;AAEJ;;;;"}
package/dist/module.js CHANGED
@@ -30,7 +30,8 @@ const IconButton = React.forwardRef(
30
30
  ref: forwardRef
31
31
  }, /* @__PURE__ */ React.createElement(Badge, {
32
32
  show: showBadge,
33
- content: badgeContent
33
+ content: badgeContent,
34
+ inverted: variant === "solid-prominent"
34
35
  }, children))), /* @__PURE__ */ React.createElement(Tooltip.Content, {
35
36
  align: tooltipAlign,
36
37
  side: tooltipSide,
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/icon-button.tsx"],"sourcesContent":["import React from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport type { ElementRef } from 'react'\n\nexport interface IconButtonProps extends BaseButtonProps {\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof BaseButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n onPress,\n onClick,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n ...restProps\n },\n forwardRef\n ) => (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <BaseButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n >\n <Badge show={showBadge} content={badgeContent}>\n {children}\n </Badge>\n </BaseButton>\n </Tooltip.Trigger>\n <Tooltip.Content align={tooltipAlign} side={tooltipSide} hideWhenDetached>\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n)\n"],"names":[],"mappings":";;;;;AAgDO,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,YAAe,GAAA,QAAA;AAAA,IACf,WAAc,GAAA,QAAA;AAAA,IACd,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACJ,GAAA,SAAA;AAAA,GACL,EACA,+BAEC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IACC,aAAe,EAAA,oBAAA;AAAA,IACf,iBAAmB,EAAA,wBAAA;AAAA,GAEnB,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,OAAR,EAAA;AAAA,IAAgB,OAAO,EAAA,IAAA;AAAA,GAAA,kBACrB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,GAAA,kBAEJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAM,IAAM,EAAA,SAAA;AAAA,IAAW,OAAS,EAAA,YAAA;AAAA,GAAA,EAC9B,QACH,CACF,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,OAAR,EAAA;AAAA,IAAgB,KAAO,EAAA,YAAA;AAAA,IAAc,IAAM,EAAA,WAAA;AAAA,IAAa,gBAAgB,EAAA,IAAA;AAAA,GAAA,EACtE,KACH,CACF,CAAA;AAEJ;;;;"}
1
+ {"version":3,"file":"module.js","sources":["../src/icon-button.tsx"],"sourcesContent":["import React from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { BaseButton } from '@mirohq/design-system-base-button'\nimport type { ElementRef } from 'react'\n\nexport interface IconButtonProps extends BaseButtonProps {\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof BaseButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n onPress,\n onClick,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n ...restProps\n },\n forwardRef\n ) => (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <BaseButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n >\n <Badge\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {children}\n </Badge>\n </BaseButton>\n </Tooltip.Trigger>\n <Tooltip.Content align={tooltipAlign} side={tooltipSide} hideWhenDetached>\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n)\n"],"names":[],"mappings":";;;;;AAgDO,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,YAAe,GAAA,QAAA;AAAA,IACf,WAAc,GAAA,QAAA;AAAA,IACd,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACJ,GAAA,SAAA;AAAA,GACL,EACA,+BAEC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IACC,aAAe,EAAA,oBAAA;AAAA,IACf,iBAAmB,EAAA,wBAAA;AAAA,GAEnB,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,OAAR,EAAA;AAAA,IAAgB,OAAO,EAAA,IAAA;AAAA,GAAA,kBACrB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAK,EAAA,UAAA;AAAA,GAAA,kBAEJ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,IAAM,EAAA,SAAA;AAAA,IACN,OAAS,EAAA,YAAA;AAAA,IACT,UAAU,OAAY,KAAA,iBAAA;AAAA,GAAA,EAErB,QACH,CACF,CACF,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,OAAR,EAAA;AAAA,IAAgB,KAAO,EAAA,YAAA;AAAA,IAAc,IAAM,EAAA,WAAA;AAAA,IAAa,gBAAgB,EAAA,IAAA;AAAA,GAAA,EACtE,KACH,CACF,CAAA;AAEJ;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-icon-button",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,8 +27,8 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@mirohq/design-system-badge": "^0.1.3",
30
- "@mirohq/design-system-base-button": "^0.2.3",
31
- "@mirohq/design-system-icons": "^0.3.1",
30
+ "@mirohq/design-system-base-button": "^0.2.4",
31
+ "@mirohq/design-system-icons": "^0.4.0",
32
32
  "@mirohq/design-system-stitches": "^2.0.11",
33
33
  "@mirohq/design-system-tooltip": "^3.1.10"
34
34
  },