@mirohq/design-system-banner 0.1.0 → 0.1.2
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 +1 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -1
- package/dist/module.js.map +1 -1
- package/package.json +4 -4
package/dist/main.js
CHANGED
|
@@ -205,7 +205,7 @@ const DismissButton = React.forwardRef((props, forwardRef) => {
|
|
|
205
205
|
children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
|
|
206
206
|
}
|
|
207
207
|
) }),
|
|
208
|
-
/* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: props["aria-label"] })
|
|
208
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: props["aria-label"] }) })
|
|
209
209
|
] });
|
|
210
210
|
});
|
|
211
211
|
DismissButton.displayName = "Banner.DismissButton";
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/banner.styled.tsx","../src/hooks/use-banner-context.tsx","../src/banner.colors.ts","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/image-slot.styled.ts","../src/partials/image-slot.tsx","../src/partials/action.tsx","../src/partials/dismiss-button.tsx","../src/banner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledBanner = styled(Primitive.div, {\n position: 'relative',\n boxSizing: 'border-box',\n width: '100%',\n minHeight: '$11',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '$175',\n variants: {\n variant: {\n information: {\n backgroundColor: '$notification-background-info',\n color: '$notification-text-on-info',\n },\n warning: {\n backgroundColor: '$notification-background-warning',\n color: '$notification-text-on-warning',\n },\n danger: {\n backgroundColor: '$notification-background-danger',\n color: '$notification-text-on-danger',\n },\n announcement: {\n backgroundColor: '$notification-background-announcement',\n color: '$notification-text-on-announcement',\n },\n },\n rounded: {\n true: {\n borderRadius: '$notification-banner',\n },\n false: {\n borderRadius: 0,\n },\n },\n },\n defaultVariants: {\n variant: 'information',\n rounded: true,\n },\n})\n\nexport const StyledBannerContent = styled(Primitive.div, {\n display: 'flex',\n padding: '$100 $200',\n minWidth: 0,\n flexDirection: 'row',\n alignItems: 'center',\n gap: '$200',\n\n variants: {\n align: {\n start: {},\n center: {\n flex: 1,\n justifyContent: 'center',\n textAlign: 'center',\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n})\n\nexport const StyledBannerMessage = styled(Primitive.div, {\n minWidth: 0,\n // Inline links inherit the banner's text colour.\n '& a': {\n color: 'inherit',\n '&:hover, &:active, &:visited, &[data-hovered], &[data-pressed]': {\n color: 'inherit',\n },\n },\n})\n\nexport type StyledBannerProps = ComponentPropsWithRef<typeof StyledBanner>\n\n// Derived from the styled `variant` variants — the single source of truth.\n// `Extract<…, string>` drops the stitches responsive-object form so the union\n// stays a plain, indexable string union (e.g. for VARIANT_ROLE / default-icon).\nexport type BannerVariant = Extract<StyledBannerProps['variant'], string>\n","import { createContext, useContext } from 'react'\n\nimport type { BannerVariant } from '../banner.styled'\n\ninterface BannerContextProps {\n variant?: BannerVariant\n}\n\nexport interface BannerProviderProps extends BannerContextProps {\n children: React.ReactNode\n}\n\nconst BannerContext = createContext<BannerContextProps>({})\n\nexport const BannerProvider = ({\n children,\n ...restProps\n}: BannerProviderProps): JSX.Element => (\n <BannerContext.Provider value={{ ...restProps }}>\n {children}\n </BannerContext.Provider>\n)\n\nexport const useBannerContext = (): BannerContextProps =>\n useContext(BannerContext)\n","import { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nimport type { BannerVariant } from './banner.styled'\n\nexport const FOREGROUND_COLOR: Record<BannerVariant, string> = {\n information: '$notification-icon-on-info',\n warning: '$notification-icon-on-warning',\n danger: '$notification-icon-on-danger',\n announcement: '$notification-icon-on-announcement',\n}\n\nexport const colorVariants = mapKeysToVariants(FOREGROUND_COLOR, key => ({\n color: FOREGROUND_COLOR[key],\n}))\n\nexport const interactiveColorVariants = mapKeysToVariants(\n FOREGROUND_COLOR,\n key => ({\n color: FOREGROUND_COLOR[key],\n backgroundColor: 'transparent',\n '&:hover, &[data-hovered], &:active, &[data-pressed]': {\n color: FOREGROUND_COLOR[key],\n backgroundColor: 'transparent',\n },\n })\n)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { colorVariants } from '../banner.colors'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n variants: {\n variant: colorVariants,\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef, ReactNode } from 'react'\nimport {\n IconExclamationPointCircle,\n IconInformationMarkCircle,\n IconWarning,\n} from '@mirohq/design-system-icons'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport type { BannerVariant } from '../banner.styled'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends Omit<StyledIconSlotProps, 'variant'> {\n /**\n * The DS icon. When omitted, the variant's default icon is shown for\n * information / warning / danger; announcement has no default (consumers\n * supply their own). For image avatars use `Banner.ImageSlot` instead.\n */\n children?: ReactNode\n}\n\nconst defaultIcon: Partial<Record<BannerVariant, ReactNode>> = {\n information: <IconInformationMarkCircle />,\n warning: <IconWarning />,\n danger: <IconExclamationPointCircle />,\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { variant } = useBannerContext()\n\n const content =\n React.Children.count(children) > 0\n ? children\n : variant != null\n ? defaultIcon[variant]\n : undefined\n\n if (content == null) {\n return null\n }\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n {content}\n </StyledIconSlot>\n )\n})\n\nIconSlot.displayName = 'Banner.IconSlot'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledImageSlot = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n '& img': {\n display: 'block',\n width: '$6',\n height: '$6',\n objectFit: 'cover',\n borderRadius: '$50',\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef, ReactNode } from 'react'\n\nimport { StyledImageSlot } from './image-slot.styled'\n\nexport type StyledImageSlotProps = ComponentPropsWithRef<typeof StyledImageSlot>\n\nexport interface ImageSlotProps extends StyledImageSlotProps {\n /**\n * The image icon. Pass an `<img>` (any source) — it is rendered as a square,\n * rounded avatar. For DS icons use `Banner.IconSlot` instead.\n */\n children?: ReactNode\n}\n\nexport const ImageSlot = React.forwardRef<\n ElementRef<typeof StyledImageSlot>,\n ImageSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n if (React.Children.count(children) === 0) {\n return null\n }\n\n return (\n <StyledImageSlot {...restProps} ref={forwardRef}>\n {children}\n </StyledImageSlot>\n )\n})\n\nImageSlot.displayName = 'Banner.ImageSlot'\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Link } from '@mirohq/design-system-link'\nimport type { LinkProps } from '@mirohq/design-system-link'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport { interactiveColorVariants } from '../banner.colors'\n\nconst StyledAction = styled(Link, {\n whiteSpace: 'nowrap',\n variants: {\n color: interactiveColorVariants,\n },\n})\n\nexport type ActionProps = Omit<LinkProps, 'variant'>\n\nexport const Action = React.forwardRef<ElementRef<typeof Link>, ActionProps>(\n (props, forwardRef) => {\n const { variant: bannerVariant } = useBannerContext()\n return (\n <StyledAction\n {...props}\n ref={forwardRef}\n variant='primary'\n color={bannerVariant}\n />\n )\n }\n)\n\nAction.displayName = 'Banner.Action'\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport { interactiveColorVariants } from '../banner.colors'\n\nconst StyledDismissButton = styled(IconButton, {\n flexShrink: 0,\n alignSelf: 'center',\n marginInlineEnd: '$100',\n backgroundColor: 'transparent',\n '&:hover, &[data-hovered], &:active, &[data-pressed]': {\n backgroundColor: 'transparent',\n },\n variants: {\n color: interactiveColorVariants,\n },\n})\n\n// The icon, ghost variant and size are owned by the banner\nexport type DismissButtonProps = Omit<\n IconButtonProps,\n 'variant' | 'size' | 'children'\n>\n\nexport const DismissButton = React.forwardRef<\n ElementRef<typeof IconButton>,\n DismissButtonProps\n>((props, forwardRef) => {\n const { variant: bannerVariant } = useBannerContext()\n\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledDismissButton\n {...props}\n ref={forwardRef}\n variant='ghost'\n size='medium'\n color={bannerVariant}\n >\n <IconCross />\n </StyledDismissButton>\n </Tooltip.Trigger>\n <Tooltip.Content>{props['aria-label']}</Tooltip.Content>\n </Tooltip>\n )\n})\n\nDismissButton.displayName = 'Banner.DismissButton'\n","import React, { useState, isValidElement } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent, ReactNode } from 'react'\n\nimport {\n StyledBanner,\n StyledBannerContent,\n StyledBannerMessage,\n} from './banner.styled'\nimport type { StyledBannerProps, BannerVariant } from './banner.styled'\nimport { BannerProvider } from './hooks/use-banner-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { ImageSlot } from './partials/image-slot'\nimport { Action } from './partials/action'\nimport { DismissButton } from './partials/dismiss-button'\n\nexport interface BannerProps extends StyledBannerProps {\n /**\n * Visual style — drives background, default icon and tone.\n * @default 'information'\n */\n variant?: Extract<StyledBannerProps['variant'], string>\n\n /**\n * Rounded floating banner (`true`) or full-page, edge-to-edge banner (`false`).\n * @default true\n */\n rounded?: boolean\n\n /**\n * Content alignment. `center` fills the row and centres the content.\n * @default 'start'\n */\n align?: 'start' | 'center'\n\n /**\n * Whether to show the dismiss button.\n * @default true\n */\n dismissible?: boolean\n\n /**\n * Controlled dismissed state. When set, the consumer owns visibility and the\n * banner does not self-hide on dismiss. Omit for uncontrolled self-hide.\n */\n dismissed?: boolean\n\n /**\n * aria-label for the dismiss button. Required for the dismiss button to render.\n */\n dismissLabel?: string\n\n /**\n * Callback invoked once the dismiss button is clicked.\n */\n onDismiss?: () => void\n\n /**\n * The banner message. Rich text (bold, inline links) is composed by the\n * consumer and passed as children — there is no markdown parsing here.\n */\n children?: ReactNode\n}\n\n// danger/warning announce assertively (alert); the rest politely (status).\nconst VARIANT_ROLE: Record<BannerVariant, 'alert' | 'status'> = {\n information: 'status',\n warning: 'alert',\n danger: 'alert',\n announcement: 'status',\n}\n\n/**\n * Banner displays a prominent, full-width message at the top of a surface.\n *\n * @experimental Beta — the API may still change while teams adopt it.\n */\nexport const Banner = React.forwardRef<\n ElementRef<typeof StyledBanner>,\n BannerProps\n>(\n (\n {\n variant = 'information',\n rounded = true,\n align = 'start',\n dismissible = true,\n dismissed,\n dismissLabel,\n onDismiss,\n children,\n role,\n ...props\n },\n forwardRef\n ) => {\n const [internalDismissed, setInternalDismissed] = useState<boolean>(false)\n\n // Controlled when `dismissed` is provided; otherwise self-managed.\n if (dismissed ?? internalDismissed) {\n return null\n }\n\n // The dismiss button renders only when a label is provided.\n const dismissButtonLabel =\n dismissible && dismissLabel != null && dismissLabel.length > 0\n ? dismissLabel\n : null\n\n const handleDismiss = (): void => {\n setInternalDismissed(true)\n onDismiss?.()\n }\n\n // Pull out the leading visual (IconSlot/ImageSlot) and the action; the rest\n // is the message, wrapped so its rich-text children flow inline as one block.\n const items = React.Children.toArray(children)\n const isType = (child: ReactNode, type: unknown): boolean =>\n isValidElement(child) && child.type === type\n const leading = items.find(\n child => isType(child, IconSlot) || isType(child, ImageSlot)\n )\n const action = items.find(child => isType(child, Action))\n const message = items.filter(child => child !== leading && child !== action)\n\n return (\n <BannerProvider variant={variant}>\n <StyledBanner\n {...props}\n ref={forwardRef}\n variant={variant}\n rounded={rounded}\n role={role ?? VARIANT_ROLE[variant]}\n >\n <StyledBannerContent align={align}>\n {leading}\n <StyledBannerMessage>{message}</StyledBannerMessage>\n {action}\n </StyledBannerContent>\n {dismissButtonLabel != null && (\n <DismissButton\n aria-label={dismissButtonLabel}\n onPress={handleDismiss}\n />\n )}\n </StyledBanner>\n </BannerProvider>\n )\n }\n) as ForwardRefExoticComponent<BannerProps> & Partials\n\nexport interface Partials {\n IconSlot: typeof IconSlot\n ImageSlot: typeof ImageSlot\n Action: typeof Action\n}\n\nBanner.IconSlot = IconSlot\nBanner.ImageSlot = ImageSlot\nBanner.Action = Action\n"],"names":["styled","Primitive","createContext","jsx","useContext","mapKeysToVariants","IconInformationMarkCircle","IconWarning","IconExclamationPointCircle","Link","IconButton","Tooltip","IconCross","useState","isValidElement","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/banner.styled.tsx","../src/hooks/use-banner-context.tsx","../src/banner.colors.ts","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/image-slot.styled.ts","../src/partials/image-slot.tsx","../src/partials/action.tsx","../src/partials/dismiss-button.tsx","../src/banner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledBanner = styled(Primitive.div, {\n position: 'relative',\n boxSizing: 'border-box',\n width: '100%',\n minHeight: '$11',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '$175',\n variants: {\n variant: {\n information: {\n backgroundColor: '$notification-background-info',\n color: '$notification-text-on-info',\n },\n warning: {\n backgroundColor: '$notification-background-warning',\n color: '$notification-text-on-warning',\n },\n danger: {\n backgroundColor: '$notification-background-danger',\n color: '$notification-text-on-danger',\n },\n announcement: {\n backgroundColor: '$notification-background-announcement',\n color: '$notification-text-on-announcement',\n },\n },\n rounded: {\n true: {\n borderRadius: '$notification-banner',\n },\n false: {\n borderRadius: 0,\n },\n },\n },\n defaultVariants: {\n variant: 'information',\n rounded: true,\n },\n})\n\nexport const StyledBannerContent = styled(Primitive.div, {\n display: 'flex',\n padding: '$100 $200',\n minWidth: 0,\n flexDirection: 'row',\n alignItems: 'center',\n gap: '$200',\n\n variants: {\n align: {\n start: {},\n center: {\n flex: 1,\n justifyContent: 'center',\n textAlign: 'center',\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n})\n\nexport const StyledBannerMessage = styled(Primitive.div, {\n minWidth: 0,\n // Inline links inherit the banner's text colour.\n '& a': {\n color: 'inherit',\n '&:hover, &:active, &:visited, &[data-hovered], &[data-pressed]': {\n color: 'inherit',\n },\n },\n})\n\nexport type StyledBannerProps = ComponentPropsWithRef<typeof StyledBanner>\n\n// Derived from the styled `variant` variants — the single source of truth.\n// `Extract<…, string>` drops the stitches responsive-object form so the union\n// stays a plain, indexable string union (e.g. for VARIANT_ROLE / default-icon).\nexport type BannerVariant = Extract<StyledBannerProps['variant'], string>\n","import { createContext, useContext } from 'react'\n\nimport type { BannerVariant } from '../banner.styled'\n\ninterface BannerContextProps {\n variant?: BannerVariant\n}\n\nexport interface BannerProviderProps extends BannerContextProps {\n children: React.ReactNode\n}\n\nconst BannerContext = createContext<BannerContextProps>({})\n\nexport const BannerProvider = ({\n children,\n ...restProps\n}: BannerProviderProps): JSX.Element => (\n <BannerContext.Provider value={{ ...restProps }}>\n {children}\n </BannerContext.Provider>\n)\n\nexport const useBannerContext = (): BannerContextProps =>\n useContext(BannerContext)\n","import { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nimport type { BannerVariant } from './banner.styled'\n\nexport const FOREGROUND_COLOR: Record<BannerVariant, string> = {\n information: '$notification-icon-on-info',\n warning: '$notification-icon-on-warning',\n danger: '$notification-icon-on-danger',\n announcement: '$notification-icon-on-announcement',\n}\n\nexport const colorVariants = mapKeysToVariants(FOREGROUND_COLOR, key => ({\n color: FOREGROUND_COLOR[key],\n}))\n\nexport const interactiveColorVariants = mapKeysToVariants(\n FOREGROUND_COLOR,\n key => ({\n color: FOREGROUND_COLOR[key],\n backgroundColor: 'transparent',\n '&:hover, &[data-hovered], &:active, &[data-pressed]': {\n color: FOREGROUND_COLOR[key],\n backgroundColor: 'transparent',\n },\n })\n)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { colorVariants } from '../banner.colors'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n variants: {\n variant: colorVariants,\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef, ReactNode } from 'react'\nimport {\n IconExclamationPointCircle,\n IconInformationMarkCircle,\n IconWarning,\n} from '@mirohq/design-system-icons'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport type { BannerVariant } from '../banner.styled'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends Omit<StyledIconSlotProps, 'variant'> {\n /**\n * The DS icon. When omitted, the variant's default icon is shown for\n * information / warning / danger; announcement has no default (consumers\n * supply their own). For image avatars use `Banner.ImageSlot` instead.\n */\n children?: ReactNode\n}\n\nconst defaultIcon: Partial<Record<BannerVariant, ReactNode>> = {\n information: <IconInformationMarkCircle />,\n warning: <IconWarning />,\n danger: <IconExclamationPointCircle />,\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { variant } = useBannerContext()\n\n const content =\n React.Children.count(children) > 0\n ? children\n : variant != null\n ? defaultIcon[variant]\n : undefined\n\n if (content == null) {\n return null\n }\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n {content}\n </StyledIconSlot>\n )\n})\n\nIconSlot.displayName = 'Banner.IconSlot'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledImageSlot = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n '& img': {\n display: 'block',\n width: '$6',\n height: '$6',\n objectFit: 'cover',\n borderRadius: '$50',\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef, ReactNode } from 'react'\n\nimport { StyledImageSlot } from './image-slot.styled'\n\nexport type StyledImageSlotProps = ComponentPropsWithRef<typeof StyledImageSlot>\n\nexport interface ImageSlotProps extends StyledImageSlotProps {\n /**\n * The image icon. Pass an `<img>` (any source) — it is rendered as a square,\n * rounded avatar. For DS icons use `Banner.IconSlot` instead.\n */\n children?: ReactNode\n}\n\nexport const ImageSlot = React.forwardRef<\n ElementRef<typeof StyledImageSlot>,\n ImageSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n if (React.Children.count(children) === 0) {\n return null\n }\n\n return (\n <StyledImageSlot {...restProps} ref={forwardRef}>\n {children}\n </StyledImageSlot>\n )\n})\n\nImageSlot.displayName = 'Banner.ImageSlot'\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Link } from '@mirohq/design-system-link'\nimport type { LinkProps } from '@mirohq/design-system-link'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport { interactiveColorVariants } from '../banner.colors'\n\nconst StyledAction = styled(Link, {\n whiteSpace: 'nowrap',\n variants: {\n color: interactiveColorVariants,\n },\n})\n\nexport type ActionProps = Omit<LinkProps, 'variant'>\n\nexport const Action = React.forwardRef<ElementRef<typeof Link>, ActionProps>(\n (props, forwardRef) => {\n const { variant: bannerVariant } = useBannerContext()\n return (\n <StyledAction\n {...props}\n ref={forwardRef}\n variant='primary'\n color={bannerVariant}\n />\n )\n }\n)\n\nAction.displayName = 'Banner.Action'\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport { interactiveColorVariants } from '../banner.colors'\n\nconst StyledDismissButton = styled(IconButton, {\n flexShrink: 0,\n alignSelf: 'center',\n marginInlineEnd: '$100',\n backgroundColor: 'transparent',\n '&:hover, &[data-hovered], &:active, &[data-pressed]': {\n backgroundColor: 'transparent',\n },\n variants: {\n color: interactiveColorVariants,\n },\n})\n\n// The icon, ghost variant and size are owned by the banner\nexport type DismissButtonProps = Omit<\n IconButtonProps,\n 'variant' | 'size' | 'children'\n>\n\nexport const DismissButton = React.forwardRef<\n ElementRef<typeof IconButton>,\n DismissButtonProps\n>((props, forwardRef) => {\n const { variant: bannerVariant } = useBannerContext()\n\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledDismissButton\n {...props}\n ref={forwardRef}\n variant='ghost'\n size='medium'\n color={bannerVariant}\n >\n <IconCross />\n </StyledDismissButton>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content>{props['aria-label']}</Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip>\n )\n})\n\nDismissButton.displayName = 'Banner.DismissButton'\n","import React, { useState, isValidElement } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent, ReactNode } from 'react'\n\nimport {\n StyledBanner,\n StyledBannerContent,\n StyledBannerMessage,\n} from './banner.styled'\nimport type { StyledBannerProps, BannerVariant } from './banner.styled'\nimport { BannerProvider } from './hooks/use-banner-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { ImageSlot } from './partials/image-slot'\nimport { Action } from './partials/action'\nimport { DismissButton } from './partials/dismiss-button'\n\nexport interface BannerProps extends StyledBannerProps {\n /**\n * Visual style — drives background, default icon and tone.\n * @default 'information'\n */\n variant?: Extract<StyledBannerProps['variant'], string>\n\n /**\n * Rounded floating banner (`true`) or full-page, edge-to-edge banner (`false`).\n * @default true\n */\n rounded?: boolean\n\n /**\n * Content alignment. `center` fills the row and centres the content.\n * @default 'start'\n */\n align?: 'start' | 'center'\n\n /**\n * Whether to show the dismiss button.\n * @default true\n */\n dismissible?: boolean\n\n /**\n * Controlled dismissed state. When set, the consumer owns visibility and the\n * banner does not self-hide on dismiss. Omit for uncontrolled self-hide.\n */\n dismissed?: boolean\n\n /**\n * aria-label for the dismiss button. Required for the dismiss button to render.\n */\n dismissLabel?: string\n\n /**\n * Callback invoked once the dismiss button is clicked.\n */\n onDismiss?: () => void\n\n /**\n * The banner message. Rich text (bold, inline links) is composed by the\n * consumer and passed as children — there is no markdown parsing here.\n */\n children?: ReactNode\n}\n\n// danger/warning announce assertively (alert); the rest politely (status).\nconst VARIANT_ROLE: Record<BannerVariant, 'alert' | 'status'> = {\n information: 'status',\n warning: 'alert',\n danger: 'alert',\n announcement: 'status',\n}\n\n/**\n * Banner displays a prominent, full-width message at the top of a surface.\n *\n * @experimental Beta — the API may still change while teams adopt it.\n */\nexport const Banner = React.forwardRef<\n ElementRef<typeof StyledBanner>,\n BannerProps\n>(\n (\n {\n variant = 'information',\n rounded = true,\n align = 'start',\n dismissible = true,\n dismissed,\n dismissLabel,\n onDismiss,\n children,\n role,\n ...props\n },\n forwardRef\n ) => {\n const [internalDismissed, setInternalDismissed] = useState<boolean>(false)\n\n // Controlled when `dismissed` is provided; otherwise self-managed.\n if (dismissed ?? internalDismissed) {\n return null\n }\n\n // The dismiss button renders only when a label is provided.\n const dismissButtonLabel =\n dismissible && dismissLabel != null && dismissLabel.length > 0\n ? dismissLabel\n : null\n\n const handleDismiss = (): void => {\n setInternalDismissed(true)\n onDismiss?.()\n }\n\n // Pull out the leading visual (IconSlot/ImageSlot) and the action; the rest\n // is the message, wrapped so its rich-text children flow inline as one block.\n const items = React.Children.toArray(children)\n const isType = (child: ReactNode, type: unknown): boolean =>\n isValidElement(child) && child.type === type\n const leading = items.find(\n child => isType(child, IconSlot) || isType(child, ImageSlot)\n )\n const action = items.find(child => isType(child, Action))\n const message = items.filter(child => child !== leading && child !== action)\n\n return (\n <BannerProvider variant={variant}>\n <StyledBanner\n {...props}\n ref={forwardRef}\n variant={variant}\n rounded={rounded}\n role={role ?? VARIANT_ROLE[variant]}\n >\n <StyledBannerContent align={align}>\n {leading}\n <StyledBannerMessage>{message}</StyledBannerMessage>\n {action}\n </StyledBannerContent>\n {dismissButtonLabel != null && (\n <DismissButton\n aria-label={dismissButtonLabel}\n onPress={handleDismiss}\n />\n )}\n </StyledBanner>\n </BannerProvider>\n )\n }\n) as ForwardRefExoticComponent<BannerProps> & Partials\n\nexport interface Partials {\n IconSlot: typeof IconSlot\n ImageSlot: typeof ImageSlot\n Action: typeof Action\n}\n\nBanner.IconSlot = IconSlot\nBanner.ImageSlot = ImageSlot\nBanner.Action = Action\n"],"names":["styled","Primitive","createContext","jsx","useContext","mapKeysToVariants","IconInformationMarkCircle","IconWarning","IconExclamationPointCircle","Link","IconButton","Tooltip","IconCross","useState","isValidElement","jsxs"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -203,7 +203,7 @@ const DismissButton = React.forwardRef((props, forwardRef) => {
|
|
|
203
203
|
children: /* @__PURE__ */ jsx(IconCross, {})
|
|
204
204
|
}
|
|
205
205
|
) }),
|
|
206
|
-
/* @__PURE__ */ jsx(Tooltip.Content, { children: props["aria-label"] })
|
|
206
|
+
/* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: props["aria-label"] }) })
|
|
207
207
|
] });
|
|
208
208
|
});
|
|
209
209
|
DismissButton.displayName = "Banner.DismissButton";
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/banner.styled.tsx","../src/hooks/use-banner-context.tsx","../src/banner.colors.ts","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/image-slot.styled.ts","../src/partials/image-slot.tsx","../src/partials/action.tsx","../src/partials/dismiss-button.tsx","../src/banner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledBanner = styled(Primitive.div, {\n position: 'relative',\n boxSizing: 'border-box',\n width: '100%',\n minHeight: '$11',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '$175',\n variants: {\n variant: {\n information: {\n backgroundColor: '$notification-background-info',\n color: '$notification-text-on-info',\n },\n warning: {\n backgroundColor: '$notification-background-warning',\n color: '$notification-text-on-warning',\n },\n danger: {\n backgroundColor: '$notification-background-danger',\n color: '$notification-text-on-danger',\n },\n announcement: {\n backgroundColor: '$notification-background-announcement',\n color: '$notification-text-on-announcement',\n },\n },\n rounded: {\n true: {\n borderRadius: '$notification-banner',\n },\n false: {\n borderRadius: 0,\n },\n },\n },\n defaultVariants: {\n variant: 'information',\n rounded: true,\n },\n})\n\nexport const StyledBannerContent = styled(Primitive.div, {\n display: 'flex',\n padding: '$100 $200',\n minWidth: 0,\n flexDirection: 'row',\n alignItems: 'center',\n gap: '$200',\n\n variants: {\n align: {\n start: {},\n center: {\n flex: 1,\n justifyContent: 'center',\n textAlign: 'center',\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n})\n\nexport const StyledBannerMessage = styled(Primitive.div, {\n minWidth: 0,\n // Inline links inherit the banner's text colour.\n '& a': {\n color: 'inherit',\n '&:hover, &:active, &:visited, &[data-hovered], &[data-pressed]': {\n color: 'inherit',\n },\n },\n})\n\nexport type StyledBannerProps = ComponentPropsWithRef<typeof StyledBanner>\n\n// Derived from the styled `variant` variants — the single source of truth.\n// `Extract<…, string>` drops the stitches responsive-object form so the union\n// stays a plain, indexable string union (e.g. for VARIANT_ROLE / default-icon).\nexport type BannerVariant = Extract<StyledBannerProps['variant'], string>\n","import { createContext, useContext } from 'react'\n\nimport type { BannerVariant } from '../banner.styled'\n\ninterface BannerContextProps {\n variant?: BannerVariant\n}\n\nexport interface BannerProviderProps extends BannerContextProps {\n children: React.ReactNode\n}\n\nconst BannerContext = createContext<BannerContextProps>({})\n\nexport const BannerProvider = ({\n children,\n ...restProps\n}: BannerProviderProps): JSX.Element => (\n <BannerContext.Provider value={{ ...restProps }}>\n {children}\n </BannerContext.Provider>\n)\n\nexport const useBannerContext = (): BannerContextProps =>\n useContext(BannerContext)\n","import { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nimport type { BannerVariant } from './banner.styled'\n\nexport const FOREGROUND_COLOR: Record<BannerVariant, string> = {\n information: '$notification-icon-on-info',\n warning: '$notification-icon-on-warning',\n danger: '$notification-icon-on-danger',\n announcement: '$notification-icon-on-announcement',\n}\n\nexport const colorVariants = mapKeysToVariants(FOREGROUND_COLOR, key => ({\n color: FOREGROUND_COLOR[key],\n}))\n\nexport const interactiveColorVariants = mapKeysToVariants(\n FOREGROUND_COLOR,\n key => ({\n color: FOREGROUND_COLOR[key],\n backgroundColor: 'transparent',\n '&:hover, &[data-hovered], &:active, &[data-pressed]': {\n color: FOREGROUND_COLOR[key],\n backgroundColor: 'transparent',\n },\n })\n)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { colorVariants } from '../banner.colors'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n variants: {\n variant: colorVariants,\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef, ReactNode } from 'react'\nimport {\n IconExclamationPointCircle,\n IconInformationMarkCircle,\n IconWarning,\n} from '@mirohq/design-system-icons'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport type { BannerVariant } from '../banner.styled'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends Omit<StyledIconSlotProps, 'variant'> {\n /**\n * The DS icon. When omitted, the variant's default icon is shown for\n * information / warning / danger; announcement has no default (consumers\n * supply their own). For image avatars use `Banner.ImageSlot` instead.\n */\n children?: ReactNode\n}\n\nconst defaultIcon: Partial<Record<BannerVariant, ReactNode>> = {\n information: <IconInformationMarkCircle />,\n warning: <IconWarning />,\n danger: <IconExclamationPointCircle />,\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { variant } = useBannerContext()\n\n const content =\n React.Children.count(children) > 0\n ? children\n : variant != null\n ? defaultIcon[variant]\n : undefined\n\n if (content == null) {\n return null\n }\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n {content}\n </StyledIconSlot>\n )\n})\n\nIconSlot.displayName = 'Banner.IconSlot'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledImageSlot = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n '& img': {\n display: 'block',\n width: '$6',\n height: '$6',\n objectFit: 'cover',\n borderRadius: '$50',\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef, ReactNode } from 'react'\n\nimport { StyledImageSlot } from './image-slot.styled'\n\nexport type StyledImageSlotProps = ComponentPropsWithRef<typeof StyledImageSlot>\n\nexport interface ImageSlotProps extends StyledImageSlotProps {\n /**\n * The image icon. Pass an `<img>` (any source) — it is rendered as a square,\n * rounded avatar. For DS icons use `Banner.IconSlot` instead.\n */\n children?: ReactNode\n}\n\nexport const ImageSlot = React.forwardRef<\n ElementRef<typeof StyledImageSlot>,\n ImageSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n if (React.Children.count(children) === 0) {\n return null\n }\n\n return (\n <StyledImageSlot {...restProps} ref={forwardRef}>\n {children}\n </StyledImageSlot>\n )\n})\n\nImageSlot.displayName = 'Banner.ImageSlot'\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Link } from '@mirohq/design-system-link'\nimport type { LinkProps } from '@mirohq/design-system-link'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport { interactiveColorVariants } from '../banner.colors'\n\nconst StyledAction = styled(Link, {\n whiteSpace: 'nowrap',\n variants: {\n color: interactiveColorVariants,\n },\n})\n\nexport type ActionProps = Omit<LinkProps, 'variant'>\n\nexport const Action = React.forwardRef<ElementRef<typeof Link>, ActionProps>(\n (props, forwardRef) => {\n const { variant: bannerVariant } = useBannerContext()\n return (\n <StyledAction\n {...props}\n ref={forwardRef}\n variant='primary'\n color={bannerVariant}\n />\n )\n }\n)\n\nAction.displayName = 'Banner.Action'\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport { interactiveColorVariants } from '../banner.colors'\n\nconst StyledDismissButton = styled(IconButton, {\n flexShrink: 0,\n alignSelf: 'center',\n marginInlineEnd: '$100',\n backgroundColor: 'transparent',\n '&:hover, &[data-hovered], &:active, &[data-pressed]': {\n backgroundColor: 'transparent',\n },\n variants: {\n color: interactiveColorVariants,\n },\n})\n\n// The icon, ghost variant and size are owned by the banner\nexport type DismissButtonProps = Omit<\n IconButtonProps,\n 'variant' | 'size' | 'children'\n>\n\nexport const DismissButton = React.forwardRef<\n ElementRef<typeof IconButton>,\n DismissButtonProps\n>((props, forwardRef) => {\n const { variant: bannerVariant } = useBannerContext()\n\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledDismissButton\n {...props}\n ref={forwardRef}\n variant='ghost'\n size='medium'\n color={bannerVariant}\n >\n <IconCross />\n </StyledDismissButton>\n </Tooltip.Trigger>\n <Tooltip.Content>{props['aria-label']}</Tooltip.Content>\n </Tooltip>\n )\n})\n\nDismissButton.displayName = 'Banner.DismissButton'\n","import React, { useState, isValidElement } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent, ReactNode } from 'react'\n\nimport {\n StyledBanner,\n StyledBannerContent,\n StyledBannerMessage,\n} from './banner.styled'\nimport type { StyledBannerProps, BannerVariant } from './banner.styled'\nimport { BannerProvider } from './hooks/use-banner-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { ImageSlot } from './partials/image-slot'\nimport { Action } from './partials/action'\nimport { DismissButton } from './partials/dismiss-button'\n\nexport interface BannerProps extends StyledBannerProps {\n /**\n * Visual style — drives background, default icon and tone.\n * @default 'information'\n */\n variant?: Extract<StyledBannerProps['variant'], string>\n\n /**\n * Rounded floating banner (`true`) or full-page, edge-to-edge banner (`false`).\n * @default true\n */\n rounded?: boolean\n\n /**\n * Content alignment. `center` fills the row and centres the content.\n * @default 'start'\n */\n align?: 'start' | 'center'\n\n /**\n * Whether to show the dismiss button.\n * @default true\n */\n dismissible?: boolean\n\n /**\n * Controlled dismissed state. When set, the consumer owns visibility and the\n * banner does not self-hide on dismiss. Omit for uncontrolled self-hide.\n */\n dismissed?: boolean\n\n /**\n * aria-label for the dismiss button. Required for the dismiss button to render.\n */\n dismissLabel?: string\n\n /**\n * Callback invoked once the dismiss button is clicked.\n */\n onDismiss?: () => void\n\n /**\n * The banner message. Rich text (bold, inline links) is composed by the\n * consumer and passed as children — there is no markdown parsing here.\n */\n children?: ReactNode\n}\n\n// danger/warning announce assertively (alert); the rest politely (status).\nconst VARIANT_ROLE: Record<BannerVariant, 'alert' | 'status'> = {\n information: 'status',\n warning: 'alert',\n danger: 'alert',\n announcement: 'status',\n}\n\n/**\n * Banner displays a prominent, full-width message at the top of a surface.\n *\n * @experimental Beta — the API may still change while teams adopt it.\n */\nexport const Banner = React.forwardRef<\n ElementRef<typeof StyledBanner>,\n BannerProps\n>(\n (\n {\n variant = 'information',\n rounded = true,\n align = 'start',\n dismissible = true,\n dismissed,\n dismissLabel,\n onDismiss,\n children,\n role,\n ...props\n },\n forwardRef\n ) => {\n const [internalDismissed, setInternalDismissed] = useState<boolean>(false)\n\n // Controlled when `dismissed` is provided; otherwise self-managed.\n if (dismissed ?? internalDismissed) {\n return null\n }\n\n // The dismiss button renders only when a label is provided.\n const dismissButtonLabel =\n dismissible && dismissLabel != null && dismissLabel.length > 0\n ? dismissLabel\n : null\n\n const handleDismiss = (): void => {\n setInternalDismissed(true)\n onDismiss?.()\n }\n\n // Pull out the leading visual (IconSlot/ImageSlot) and the action; the rest\n // is the message, wrapped so its rich-text children flow inline as one block.\n const items = React.Children.toArray(children)\n const isType = (child: ReactNode, type: unknown): boolean =>\n isValidElement(child) && child.type === type\n const leading = items.find(\n child => isType(child, IconSlot) || isType(child, ImageSlot)\n )\n const action = items.find(child => isType(child, Action))\n const message = items.filter(child => child !== leading && child !== action)\n\n return (\n <BannerProvider variant={variant}>\n <StyledBanner\n {...props}\n ref={forwardRef}\n variant={variant}\n rounded={rounded}\n role={role ?? VARIANT_ROLE[variant]}\n >\n <StyledBannerContent align={align}>\n {leading}\n <StyledBannerMessage>{message}</StyledBannerMessage>\n {action}\n </StyledBannerContent>\n {dismissButtonLabel != null && (\n <DismissButton\n aria-label={dismissButtonLabel}\n onPress={handleDismiss}\n />\n )}\n </StyledBanner>\n </BannerProvider>\n )\n }\n) as ForwardRefExoticComponent<BannerProps> & Partials\n\nexport interface Partials {\n IconSlot: typeof IconSlot\n ImageSlot: typeof ImageSlot\n Action: typeof Action\n}\n\nBanner.IconSlot = IconSlot\nBanner.ImageSlot = ImageSlot\nBanner.Action = Action\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/banner.styled.tsx","../src/hooks/use-banner-context.tsx","../src/banner.colors.ts","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/image-slot.styled.ts","../src/partials/image-slot.tsx","../src/partials/action.tsx","../src/partials/dismiss-button.tsx","../src/banner.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledBanner = styled(Primitive.div, {\n position: 'relative',\n boxSizing: 'border-box',\n width: '100%',\n minHeight: '$11',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '$175',\n variants: {\n variant: {\n information: {\n backgroundColor: '$notification-background-info',\n color: '$notification-text-on-info',\n },\n warning: {\n backgroundColor: '$notification-background-warning',\n color: '$notification-text-on-warning',\n },\n danger: {\n backgroundColor: '$notification-background-danger',\n color: '$notification-text-on-danger',\n },\n announcement: {\n backgroundColor: '$notification-background-announcement',\n color: '$notification-text-on-announcement',\n },\n },\n rounded: {\n true: {\n borderRadius: '$notification-banner',\n },\n false: {\n borderRadius: 0,\n },\n },\n },\n defaultVariants: {\n variant: 'information',\n rounded: true,\n },\n})\n\nexport const StyledBannerContent = styled(Primitive.div, {\n display: 'flex',\n padding: '$100 $200',\n minWidth: 0,\n flexDirection: 'row',\n alignItems: 'center',\n gap: '$200',\n\n variants: {\n align: {\n start: {},\n center: {\n flex: 1,\n justifyContent: 'center',\n textAlign: 'center',\n },\n },\n },\n defaultVariants: {\n align: 'start',\n },\n})\n\nexport const StyledBannerMessage = styled(Primitive.div, {\n minWidth: 0,\n // Inline links inherit the banner's text colour.\n '& a': {\n color: 'inherit',\n '&:hover, &:active, &:visited, &[data-hovered], &[data-pressed]': {\n color: 'inherit',\n },\n },\n})\n\nexport type StyledBannerProps = ComponentPropsWithRef<typeof StyledBanner>\n\n// Derived from the styled `variant` variants — the single source of truth.\n// `Extract<…, string>` drops the stitches responsive-object form so the union\n// stays a plain, indexable string union (e.g. for VARIANT_ROLE / default-icon).\nexport type BannerVariant = Extract<StyledBannerProps['variant'], string>\n","import { createContext, useContext } from 'react'\n\nimport type { BannerVariant } from '../banner.styled'\n\ninterface BannerContextProps {\n variant?: BannerVariant\n}\n\nexport interface BannerProviderProps extends BannerContextProps {\n children: React.ReactNode\n}\n\nconst BannerContext = createContext<BannerContextProps>({})\n\nexport const BannerProvider = ({\n children,\n ...restProps\n}: BannerProviderProps): JSX.Element => (\n <BannerContext.Provider value={{ ...restProps }}>\n {children}\n </BannerContext.Provider>\n)\n\nexport const useBannerContext = (): BannerContextProps =>\n useContext(BannerContext)\n","import { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nimport type { BannerVariant } from './banner.styled'\n\nexport const FOREGROUND_COLOR: Record<BannerVariant, string> = {\n information: '$notification-icon-on-info',\n warning: '$notification-icon-on-warning',\n danger: '$notification-icon-on-danger',\n announcement: '$notification-icon-on-announcement',\n}\n\nexport const colorVariants = mapKeysToVariants(FOREGROUND_COLOR, key => ({\n color: FOREGROUND_COLOR[key],\n}))\n\nexport const interactiveColorVariants = mapKeysToVariants(\n FOREGROUND_COLOR,\n key => ({\n color: FOREGROUND_COLOR[key],\n backgroundColor: 'transparent',\n '&:hover, &[data-hovered], &:active, &[data-pressed]': {\n color: FOREGROUND_COLOR[key],\n backgroundColor: 'transparent',\n },\n })\n)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { colorVariants } from '../banner.colors'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n variants: {\n variant: colorVariants,\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef, ReactNode } from 'react'\nimport {\n IconExclamationPointCircle,\n IconInformationMarkCircle,\n IconWarning,\n} from '@mirohq/design-system-icons'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport type { BannerVariant } from '../banner.styled'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends Omit<StyledIconSlotProps, 'variant'> {\n /**\n * The DS icon. When omitted, the variant's default icon is shown for\n * information / warning / danger; announcement has no default (consumers\n * supply their own). For image avatars use `Banner.ImageSlot` instead.\n */\n children?: ReactNode\n}\n\nconst defaultIcon: Partial<Record<BannerVariant, ReactNode>> = {\n information: <IconInformationMarkCircle />,\n warning: <IconWarning />,\n danger: <IconExclamationPointCircle />,\n}\n\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n const { variant } = useBannerContext()\n\n const content =\n React.Children.count(children) > 0\n ? children\n : variant != null\n ? defaultIcon[variant]\n : undefined\n\n if (content == null) {\n return null\n }\n\n return (\n <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n {content}\n </StyledIconSlot>\n )\n})\n\nIconSlot.displayName = 'Banner.IconSlot'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledImageSlot = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n flexShrink: 0,\n '& img': {\n display: 'block',\n width: '$6',\n height: '$6',\n objectFit: 'cover',\n borderRadius: '$50',\n },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef, ReactNode } from 'react'\n\nimport { StyledImageSlot } from './image-slot.styled'\n\nexport type StyledImageSlotProps = ComponentPropsWithRef<typeof StyledImageSlot>\n\nexport interface ImageSlotProps extends StyledImageSlotProps {\n /**\n * The image icon. Pass an `<img>` (any source) — it is rendered as a square,\n * rounded avatar. For DS icons use `Banner.IconSlot` instead.\n */\n children?: ReactNode\n}\n\nexport const ImageSlot = React.forwardRef<\n ElementRef<typeof StyledImageSlot>,\n ImageSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n if (React.Children.count(children) === 0) {\n return null\n }\n\n return (\n <StyledImageSlot {...restProps} ref={forwardRef}>\n {children}\n </StyledImageSlot>\n )\n})\n\nImageSlot.displayName = 'Banner.ImageSlot'\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Link } from '@mirohq/design-system-link'\nimport type { LinkProps } from '@mirohq/design-system-link'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport { interactiveColorVariants } from '../banner.colors'\n\nconst StyledAction = styled(Link, {\n whiteSpace: 'nowrap',\n variants: {\n color: interactiveColorVariants,\n },\n})\n\nexport type ActionProps = Omit<LinkProps, 'variant'>\n\nexport const Action = React.forwardRef<ElementRef<typeof Link>, ActionProps>(\n (props, forwardRef) => {\n const { variant: bannerVariant } = useBannerContext()\n return (\n <StyledAction\n {...props}\n ref={forwardRef}\n variant='primary'\n color={bannerVariant}\n />\n )\n }\n)\n\nAction.displayName = 'Banner.Action'\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\n\nimport { useBannerContext } from '../hooks/use-banner-context'\nimport { interactiveColorVariants } from '../banner.colors'\n\nconst StyledDismissButton = styled(IconButton, {\n flexShrink: 0,\n alignSelf: 'center',\n marginInlineEnd: '$100',\n backgroundColor: 'transparent',\n '&:hover, &[data-hovered], &:active, &[data-pressed]': {\n backgroundColor: 'transparent',\n },\n variants: {\n color: interactiveColorVariants,\n },\n})\n\n// The icon, ghost variant and size are owned by the banner\nexport type DismissButtonProps = Omit<\n IconButtonProps,\n 'variant' | 'size' | 'children'\n>\n\nexport const DismissButton = React.forwardRef<\n ElementRef<typeof IconButton>,\n DismissButtonProps\n>((props, forwardRef) => {\n const { variant: bannerVariant } = useBannerContext()\n\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledDismissButton\n {...props}\n ref={forwardRef}\n variant='ghost'\n size='medium'\n color={bannerVariant}\n >\n <IconCross />\n </StyledDismissButton>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content>{props['aria-label']}</Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip>\n )\n})\n\nDismissButton.displayName = 'Banner.DismissButton'\n","import React, { useState, isValidElement } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent, ReactNode } from 'react'\n\nimport {\n StyledBanner,\n StyledBannerContent,\n StyledBannerMessage,\n} from './banner.styled'\nimport type { StyledBannerProps, BannerVariant } from './banner.styled'\nimport { BannerProvider } from './hooks/use-banner-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { ImageSlot } from './partials/image-slot'\nimport { Action } from './partials/action'\nimport { DismissButton } from './partials/dismiss-button'\n\nexport interface BannerProps extends StyledBannerProps {\n /**\n * Visual style — drives background, default icon and tone.\n * @default 'information'\n */\n variant?: Extract<StyledBannerProps['variant'], string>\n\n /**\n * Rounded floating banner (`true`) or full-page, edge-to-edge banner (`false`).\n * @default true\n */\n rounded?: boolean\n\n /**\n * Content alignment. `center` fills the row and centres the content.\n * @default 'start'\n */\n align?: 'start' | 'center'\n\n /**\n * Whether to show the dismiss button.\n * @default true\n */\n dismissible?: boolean\n\n /**\n * Controlled dismissed state. When set, the consumer owns visibility and the\n * banner does not self-hide on dismiss. Omit for uncontrolled self-hide.\n */\n dismissed?: boolean\n\n /**\n * aria-label for the dismiss button. Required for the dismiss button to render.\n */\n dismissLabel?: string\n\n /**\n * Callback invoked once the dismiss button is clicked.\n */\n onDismiss?: () => void\n\n /**\n * The banner message. Rich text (bold, inline links) is composed by the\n * consumer and passed as children — there is no markdown parsing here.\n */\n children?: ReactNode\n}\n\n// danger/warning announce assertively (alert); the rest politely (status).\nconst VARIANT_ROLE: Record<BannerVariant, 'alert' | 'status'> = {\n information: 'status',\n warning: 'alert',\n danger: 'alert',\n announcement: 'status',\n}\n\n/**\n * Banner displays a prominent, full-width message at the top of a surface.\n *\n * @experimental Beta — the API may still change while teams adopt it.\n */\nexport const Banner = React.forwardRef<\n ElementRef<typeof StyledBanner>,\n BannerProps\n>(\n (\n {\n variant = 'information',\n rounded = true,\n align = 'start',\n dismissible = true,\n dismissed,\n dismissLabel,\n onDismiss,\n children,\n role,\n ...props\n },\n forwardRef\n ) => {\n const [internalDismissed, setInternalDismissed] = useState<boolean>(false)\n\n // Controlled when `dismissed` is provided; otherwise self-managed.\n if (dismissed ?? internalDismissed) {\n return null\n }\n\n // The dismiss button renders only when a label is provided.\n const dismissButtonLabel =\n dismissible && dismissLabel != null && dismissLabel.length > 0\n ? dismissLabel\n : null\n\n const handleDismiss = (): void => {\n setInternalDismissed(true)\n onDismiss?.()\n }\n\n // Pull out the leading visual (IconSlot/ImageSlot) and the action; the rest\n // is the message, wrapped so its rich-text children flow inline as one block.\n const items = React.Children.toArray(children)\n const isType = (child: ReactNode, type: unknown): boolean =>\n isValidElement(child) && child.type === type\n const leading = items.find(\n child => isType(child, IconSlot) || isType(child, ImageSlot)\n )\n const action = items.find(child => isType(child, Action))\n const message = items.filter(child => child !== leading && child !== action)\n\n return (\n <BannerProvider variant={variant}>\n <StyledBanner\n {...props}\n ref={forwardRef}\n variant={variant}\n rounded={rounded}\n role={role ?? VARIANT_ROLE[variant]}\n >\n <StyledBannerContent align={align}>\n {leading}\n <StyledBannerMessage>{message}</StyledBannerMessage>\n {action}\n </StyledBannerContent>\n {dismissButtonLabel != null && (\n <DismissButton\n aria-label={dismissButtonLabel}\n onPress={handleDismiss}\n />\n )}\n </StyledBanner>\n </BannerProvider>\n )\n }\n) as ForwardRefExoticComponent<BannerProps> & Partials\n\nexport interface Partials {\n IconSlot: typeof IconSlot\n ImageSlot: typeof ImageSlot\n Action: typeof Action\n}\n\nBanner.IconSlot = IconSlot\nBanner.ImageSlot = ImageSlot\nBanner.Action = Action\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-banner",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-icon-button": "^4.2.37",
|
|
30
|
-
"@mirohq/design-system-icons": "^1.
|
|
30
|
+
"@mirohq/design-system-icons": "^1.41.0",
|
|
31
31
|
"@mirohq/design-system-link": "^2.5.22",
|
|
32
|
-
"@mirohq/design-system-stitches": "^3.3.30",
|
|
33
32
|
"@mirohq/design-system-primitive": "^2.2.1",
|
|
33
|
+
"@mirohq/design-system-utils": "^1.3.0",
|
|
34
34
|
"@mirohq/design-system-tooltip": "^4.4.32",
|
|
35
|
-
"@mirohq/design-system-
|
|
35
|
+
"@mirohq/design-system-stitches": "^3.3.30"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "rollup -c ../../../rollup.config.js",
|