@mirohq/design-system-banner 0.1.0

package/dist/main.js

@@ -0,0 +1,279 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
+var designSystemStitches = require('@mirohq/design-system-stitches');
+var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemUtils = require('@mirohq/design-system-utils');
+var designSystemLink = require('@mirohq/design-system-link');
+var designSystemIconButton = require('@mirohq/design-system-icon-button');
+var designSystemTooltip = require('@mirohq/design-system-tooltip');
+
+const StyledBanner = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  position: "relative",
+  boxSizing: "border-box",
+  width: "100%",
+  minHeight: "$11",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontSize: "$175",
+  variants: {
+    variant: {
+      information: {
+        backgroundColor: "$notification-background-info",
+        color: "$notification-text-on-info"
+      },
+      warning: {
+        backgroundColor: "$notification-background-warning",
+        color: "$notification-text-on-warning"
+      },
+      danger: {
+        backgroundColor: "$notification-background-danger",
+        color: "$notification-text-on-danger"
+      },
+      announcement: {
+        backgroundColor: "$notification-background-announcement",
+        color: "$notification-text-on-announcement"
+      }
+    },
+    rounded: {
+      true: {
+        borderRadius: "$notification-banner"
+      },
+      false: {
+        borderRadius: 0
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "information",
+    rounded: true
+  }
+});
+const StyledBannerContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  padding: "$100 $200",
+  minWidth: 0,
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "$200",
+  variants: {
+    align: {
+      start: {},
+      center: {
+        flex: 1,
+        justifyContent: "center",
+        textAlign: "center"
+      }
+    }
+  },
+  defaultVariants: {
+    align: "start"
+  }
+});
+const StyledBannerMessage = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  minWidth: 0,
+  // Inline links inherit the banner's text colour.
+  "& a": {
+    color: "inherit",
+    "&:hover, &:active, &:visited, &[data-hovered], &[data-pressed]": {
+      color: "inherit"
+    }
+  }
+});
+
+const BannerContext = React.createContext({});
+const BannerProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(BannerContext.Provider, { value: { ...restProps }, children });
+const useBannerContext = () => React.useContext(BannerContext);
+
+const FOREGROUND_COLOR = {
+  information: "$notification-icon-on-info",
+  warning: "$notification-icon-on-warning",
+  danger: "$notification-icon-on-danger",
+  announcement: "$notification-icon-on-announcement"
+};
+const colorVariants = designSystemUtils.mapKeysToVariants(FOREGROUND_COLOR, (key) => ({
+  color: FOREGROUND_COLOR[key]
+}));
+const interactiveColorVariants = designSystemUtils.mapKeysToVariants(
+  FOREGROUND_COLOR,
+  (key) => ({
+    color: FOREGROUND_COLOR[key],
+    backgroundColor: "transparent",
+    "&:hover, &[data-hovered], &:active, &[data-pressed]": {
+      color: FOREGROUND_COLOR[key],
+      backgroundColor: "transparent"
+    }
+  })
+);
+
+const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+  variants: {
+    variant: colorVariants
+  }
+});
+
+const defaultIcon = {
+  information: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconInformationMarkCircle, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconWarning, {}),
+  danger: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconExclamationPointCircle, {})
+};
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { variant } = useBannerContext();
+  const content = React.Children.count(children) > 0 ? children : variant != null ? defaultIcon[variant] : void 0;
+  if (content == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, variant, children: content });
+});
+IconSlot.displayName = "Banner.IconSlot";
+
+const StyledImageSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+  "& img": {
+    display: "block",
+    width: "$6",
+    height: "$6",
+    objectFit: "cover",
+    borderRadius: "$50"
+  }
+});
+
+const ImageSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  if (React.Children.count(children) === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledImageSlot, { ...restProps, ref: forwardRef, children });
+});
+ImageSlot.displayName = "Banner.ImageSlot";
+
+const StyledAction = designSystemStitches.styled(designSystemLink.Link, {
+  whiteSpace: "nowrap",
+  variants: {
+    color: interactiveColorVariants
+  }
+});
+const Action = React.forwardRef(
+  (props, forwardRef) => {
+    const { variant: bannerVariant } = useBannerContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledAction,
+      {
+        ...props,
+        ref: forwardRef,
+        variant: "primary",
+        color: bannerVariant
+      }
+    );
+  }
+);
+Action.displayName = "Banner.Action";
+
+const StyledDismissButton = designSystemStitches.styled(designSystemIconButton.IconButton, {
+  flexShrink: 0,
+  alignSelf: "center",
+  marginInlineEnd: "$100",
+  backgroundColor: "transparent",
+  "&:hover, &[data-hovered], &:active, &[data-pressed]": {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    color: interactiveColorVariants
+  }
+});
+const DismissButton = React.forwardRef((props, forwardRef) => {
+  const { variant: bannerVariant } = useBannerContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      StyledDismissButton,
+      {
+        ...props,
+        ref: forwardRef,
+        variant: "ghost",
+        size: "medium",
+        color: bannerVariant,
+        children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: props["aria-label"] })
+  ] });
+});
+DismissButton.displayName = "Banner.DismissButton";
+
+const VARIANT_ROLE = {
+  information: "status",
+  warning: "alert",
+  danger: "alert",
+  announcement: "status"
+};
+const Banner = React.forwardRef(
+  ({
+    variant = "information",
+    rounded = true,
+    align = "start",
+    dismissible = true,
+    dismissed,
+    dismissLabel,
+    onDismiss,
+    children,
+    role,
+    ...props
+  }, forwardRef) => {
+    const [internalDismissed, setInternalDismissed] = React.useState(false);
+    if (dismissed != null ? dismissed : internalDismissed) {
+      return null;
+    }
+    const dismissButtonLabel = dismissible && dismissLabel != null && dismissLabel.length > 0 ? dismissLabel : null;
+    const handleDismiss = () => {
+      setInternalDismissed(true);
+      onDismiss == null ? void 0 : onDismiss();
+    };
+    const items = React.Children.toArray(children);
+    const isType = (child, type) => React.isValidElement(child) && child.type === type;
+    const leading = items.find(
+      (child) => isType(child, IconSlot) || isType(child, ImageSlot)
+    );
+    const action = items.find((child) => isType(child, Action));
+    const message = items.filter((child) => child !== leading && child !== action);
+    return /* @__PURE__ */ jsxRuntime.jsx(BannerProvider, { variant, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledBanner,
+      {
+        ...props,
+        ref: forwardRef,
+        variant,
+        rounded,
+        role: role != null ? role : VARIANT_ROLE[variant],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(StyledBannerContent, { align, children: [
+            leading,
+            /* @__PURE__ */ jsxRuntime.jsx(StyledBannerMessage, { children: message }),
+            action
+          ] }),
+          dismissButtonLabel != null && /* @__PURE__ */ jsxRuntime.jsx(
+            DismissButton,
+            {
+              "aria-label": dismissButtonLabel,
+              onPress: handleDismiss
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+Banner.IconSlot = IconSlot;
+Banner.ImageSlot = ImageSlot;
+Banner.Action = Action;
+
+exports.Banner = Banner;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +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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"}

package/dist/module.js

@@ -0,0 +1,277 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { createContext, useContext, useState, isValidElement } from 'react';
+import { Primitive } from '@mirohq/design-system-primitive';
+import { styled } from '@mirohq/design-system-stitches';
+import { IconExclamationPointCircle, IconWarning, IconInformationMarkCircle, IconCross } from '@mirohq/design-system-icons';
+import { mapKeysToVariants } from '@mirohq/design-system-utils';
+import { Link } from '@mirohq/design-system-link';
+import { IconButton } from '@mirohq/design-system-icon-button';
+import { Tooltip } from '@mirohq/design-system-tooltip';
+
+const StyledBanner = styled(Primitive.div, {
+  position: "relative",
+  boxSizing: "border-box",
+  width: "100%",
+  minHeight: "$11",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  fontSize: "$175",
+  variants: {
+    variant: {
+      information: {
+        backgroundColor: "$notification-background-info",
+        color: "$notification-text-on-info"
+      },
+      warning: {
+        backgroundColor: "$notification-background-warning",
+        color: "$notification-text-on-warning"
+      },
+      danger: {
+        backgroundColor: "$notification-background-danger",
+        color: "$notification-text-on-danger"
+      },
+      announcement: {
+        backgroundColor: "$notification-background-announcement",
+        color: "$notification-text-on-announcement"
+      }
+    },
+    rounded: {
+      true: {
+        borderRadius: "$notification-banner"
+      },
+      false: {
+        borderRadius: 0
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "information",
+    rounded: true
+  }
+});
+const StyledBannerContent = styled(Primitive.div, {
+  display: "flex",
+  padding: "$100 $200",
+  minWidth: 0,
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "$200",
+  variants: {
+    align: {
+      start: {},
+      center: {
+        flex: 1,
+        justifyContent: "center",
+        textAlign: "center"
+      }
+    }
+  },
+  defaultVariants: {
+    align: "start"
+  }
+});
+const StyledBannerMessage = styled(Primitive.div, {
+  minWidth: 0,
+  // Inline links inherit the banner's text colour.
+  "& a": {
+    color: "inherit",
+    "&:hover, &:active, &:visited, &[data-hovered], &[data-pressed]": {
+      color: "inherit"
+    }
+  }
+});
+
+const BannerContext = createContext({});
+const BannerProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsx(BannerContext.Provider, { value: { ...restProps }, children });
+const useBannerContext = () => useContext(BannerContext);
+
+const FOREGROUND_COLOR = {
+  information: "$notification-icon-on-info",
+  warning: "$notification-icon-on-warning",
+  danger: "$notification-icon-on-danger",
+  announcement: "$notification-icon-on-announcement"
+};
+const colorVariants = mapKeysToVariants(FOREGROUND_COLOR, (key) => ({
+  color: FOREGROUND_COLOR[key]
+}));
+const interactiveColorVariants = mapKeysToVariants(
+  FOREGROUND_COLOR,
+  (key) => ({
+    color: FOREGROUND_COLOR[key],
+    backgroundColor: "transparent",
+    "&:hover, &[data-hovered], &:active, &[data-pressed]": {
+      color: FOREGROUND_COLOR[key],
+      backgroundColor: "transparent"
+    }
+  })
+);
+
+const StyledIconSlot = styled(Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+  variants: {
+    variant: colorVariants
+  }
+});
+
+const defaultIcon = {
+  information: /* @__PURE__ */ jsx(IconInformationMarkCircle, {}),
+  warning: /* @__PURE__ */ jsx(IconWarning, {}),
+  danger: /* @__PURE__ */ jsx(IconExclamationPointCircle, {})
+};
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { variant } = useBannerContext();
+  const content = React.Children.count(children) > 0 ? children : variant != null ? defaultIcon[variant] : void 0;
+  if (content == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, variant, children: content });
+});
+IconSlot.displayName = "Banner.IconSlot";
+
+const StyledImageSlot = styled(Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+  "& img": {
+    display: "block",
+    width: "$6",
+    height: "$6",
+    objectFit: "cover",
+    borderRadius: "$50"
+  }
+});
+
+const ImageSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  if (React.Children.count(children) === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StyledImageSlot, { ...restProps, ref: forwardRef, children });
+});
+ImageSlot.displayName = "Banner.ImageSlot";
+
+const StyledAction = styled(Link, {
+  whiteSpace: "nowrap",
+  variants: {
+    color: interactiveColorVariants
+  }
+});
+const Action = React.forwardRef(
+  (props, forwardRef) => {
+    const { variant: bannerVariant } = useBannerContext();
+    return /* @__PURE__ */ jsx(
+      StyledAction,
+      {
+        ...props,
+        ref: forwardRef,
+        variant: "primary",
+        color: bannerVariant
+      }
+    );
+  }
+);
+Action.displayName = "Banner.Action";
+
+const StyledDismissButton = styled(IconButton, {
+  flexShrink: 0,
+  alignSelf: "center",
+  marginInlineEnd: "$100",
+  backgroundColor: "transparent",
+  "&:hover, &[data-hovered], &:active, &[data-pressed]": {
+    backgroundColor: "transparent"
+  },
+  variants: {
+    color: interactiveColorVariants
+  }
+});
+const DismissButton = React.forwardRef((props, forwardRef) => {
+  const { variant: bannerVariant } = useBannerContext();
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      StyledDismissButton,
+      {
+        ...props,
+        ref: forwardRef,
+        variant: "ghost",
+        size: "medium",
+        color: bannerVariant,
+        children: /* @__PURE__ */ jsx(IconCross, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip.Content, { children: props["aria-label"] })
+  ] });
+});
+DismissButton.displayName = "Banner.DismissButton";
+
+const VARIANT_ROLE = {
+  information: "status",
+  warning: "alert",
+  danger: "alert",
+  announcement: "status"
+};
+const Banner = React.forwardRef(
+  ({
+    variant = "information",
+    rounded = true,
+    align = "start",
+    dismissible = true,
+    dismissed,
+    dismissLabel,
+    onDismiss,
+    children,
+    role,
+    ...props
+  }, forwardRef) => {
+    const [internalDismissed, setInternalDismissed] = useState(false);
+    if (dismissed != null ? dismissed : internalDismissed) {
+      return null;
+    }
+    const dismissButtonLabel = dismissible && dismissLabel != null && dismissLabel.length > 0 ? dismissLabel : null;
+    const handleDismiss = () => {
+      setInternalDismissed(true);
+      onDismiss == null ? void 0 : onDismiss();
+    };
+    const items = React.Children.toArray(children);
+    const isType = (child, type) => isValidElement(child) && child.type === type;
+    const leading = items.find(
+      (child) => isType(child, IconSlot) || isType(child, ImageSlot)
+    );
+    const action = items.find((child) => isType(child, Action));
+    const message = items.filter((child) => child !== leading && child !== action);
+    return /* @__PURE__ */ jsx(BannerProvider, { variant, children: /* @__PURE__ */ jsxs(
+      StyledBanner,
+      {
+        ...props,
+        ref: forwardRef,
+        variant,
+        rounded,
+        role: role != null ? role : VARIANT_ROLE[variant],
+        children: [
+          /* @__PURE__ */ jsxs(StyledBannerContent, { align, children: [
+            leading,
+            /* @__PURE__ */ jsx(StyledBannerMessage, { children: message }),
+            action
+          ] }),
+          dismissButtonLabel != null && /* @__PURE__ */ jsx(
+            DismissButton,
+            {
+              "aria-label": dismissButtonLabel,
+              onPress: handleDismiss
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+Banner.IconSlot = IconSlot;
+Banner.ImageSlot = ImageSlot;
+Banner.Action = Action;
+
+export { Banner };
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +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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"}

package/dist/types.d.ts

@@ -0,0 +1,122 @@
+import * as react from 'react';
+import react__default, { ComponentPropsWithRef, ReactNode, ForwardRefExoticComponent } from 'react';
+import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
+import { LinkProps } from '@mirohq/design-system-link';
+
+/* Utilities */
+/* ========================================================================== */
+
+/** Returns a string with the given prefix followed by the given values. */
+type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
+
+type TransformProps<Props, Media> = {
+	[K in keyof Props]: (
+		| Props[K]
+		| (
+			& {
+				[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
+			}
+			& {
+				[KMedia in string]: Props[K]
+			}
+		)
+	)
+}
+
+declare const StyledBanner: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant" | "rounded"> & TransformProps<{
+    variant?: "information" | "warning" | "danger" | "announcement" | undefined;
+    rounded?: boolean | "true" | "false" | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
+    variant?: "information" | "warning" | "danger" | "announcement" | undefined;
+    rounded?: boolean | "true" | "false" | undefined;
+}, {}>;
+type StyledBannerProps = ComponentPropsWithRef<typeof StyledBanner>;
+type BannerVariant = Extract<StyledBannerProps['variant'], string>;
+
+declare const StyledIconSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant"> & TransformProps<{
+    variant?: BannerVariant | undefined;
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
+    variant?: BannerVariant | undefined;
+}, {}>;
+
+type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>;
+interface IconSlotProps extends Omit<StyledIconSlotProps, 'variant'> {
+    /**
+     * The DS icon. When omitted, the variant's default icon is shown for
+     * information / warning / danger; announcement has no default (consumers
+     * supply their own). For image avatars use `Banner.ImageSlot` instead.
+     */
+    children?: ReactNode;
+}
+declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+declare const StyledImageSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+
+type StyledImageSlotProps = ComponentPropsWithRef<typeof StyledImageSlot>;
+interface ImageSlotProps extends StyledImageSlotProps {
+    /**
+     * The image icon. Pass an `<img>` (any source) — it is rendered as a square,
+     * rounded avatar. For DS icons use `Banner.IconSlot` instead.
+     */
+    children?: ReactNode;
+}
+declare const ImageSlot: react__default.ForwardRefExoticComponent<Omit<ImageSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+type ActionProps = Omit<LinkProps, 'variant'>;
+declare const Action: react__default.ForwardRefExoticComponent<Omit<ActionProps, "ref"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+interface BannerProps extends StyledBannerProps {
+    /**
+     * Visual style — drives background, default icon and tone.
+     * @default 'information'
+     */
+    variant?: Extract<StyledBannerProps['variant'], string>;
+    /**
+     * Rounded floating banner (`true`) or full-page, edge-to-edge banner (`false`).
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Content alignment. `center` fills the row and centres the content.
+     * @default 'start'
+     */
+    align?: 'start' | 'center';
+    /**
+     * Whether to show the dismiss button.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Controlled dismissed state. When set, the consumer owns visibility and the
+     * banner does not self-hide on dismiss. Omit for uncontrolled self-hide.
+     */
+    dismissed?: boolean;
+    /**
+     * aria-label for the dismiss button. Required for the dismiss button to render.
+     */
+    dismissLabel?: string;
+    /**
+     * Callback invoked once the dismiss button is clicked.
+     */
+    onDismiss?: () => void;
+    /**
+     * The banner message. Rich text (bold, inline links) is composed by the
+     * consumer and passed as children — there is no markdown parsing here.
+     */
+    children?: ReactNode;
+}
+/**
+ * Banner displays a prominent, full-width message at the top of a surface.
+ *
+ * @experimental Beta — the API may still change while teams adopt it.
+ */
+declare const Banner: ForwardRefExoticComponent<BannerProps> & Partials;
+interface Partials {
+    IconSlot: typeof IconSlot;
+    ImageSlot: typeof ImageSlot;
+    Action: typeof Action;
+}
+
+export { Banner };
+export type { BannerProps };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mirohq/design-system-banner",
+  "version": "0.1.0",
+  "description": "",
+  "author": "Miro",
+  "source": "src/index.ts",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/main.js",
+      "import": "./dist/module.js",
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@stitches/react": "^1.2.8",
+    "react": "^16.14 || ^17 || ^18 || ^19"
+  },
+  "dependencies": {
+    "@mirohq/design-system-icon-button": "^4.2.37",
+    "@mirohq/design-system-icons": "^1.40.2",
+    "@mirohq/design-system-link": "^2.5.22",
+    "@mirohq/design-system-stitches": "^3.3.30",
+    "@mirohq/design-system-primitive": "^2.2.1",
+    "@mirohq/design-system-tooltip": "^4.4.32",
+    "@mirohq/design-system-utils": "^1.3.0"
+  },
+  "scripts": {
+    "build": "rollup -c ../../../rollup.config.js",
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean"
+  }
+}