@mirohq/design-system-callout 0.1.0

package/dist/main.js

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 designSystemTypography = require('@mirohq/design-system-typography');
+var designSystemIconButton = require('@mirohq/design-system-icon-button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const StyledCallout = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  columnGap: "$150",
+  rowGap: "$150",
+  padding: "$200",
+  borderWidth: "$sm",
+  borderStyle: "solid",
+  borderRadius: "$75",
+  display: "grid",
+  justifyContent: "center",
+  gridTemplateColumns: "auto 1fr $8",
+  gridTemplateAreas: "'icon content close'\n    'icon actions close'",
+  variants: {
+    variant: {
+      information: {
+        backgroundColor: "$background-primary-subtle",
+        borderColor: "$border-primary-subtle"
+      },
+      warning: {
+        backgroundColor: "$background-warning-subtle",
+        borderColor: "$border-warning-subtle"
+      },
+      danger: {
+        backgroundColor: "$background-danger-subtle",
+        borderColor: "$border-danger-subtle"
+      },
+      success: {
+        backgroundColor: "$background-success-subtle",
+        borderColor: "$border-success-subtle"
+      }
+    }
+  }
+});
+
+const Content = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "grid",
+  gap: "$25",
+  maxWidth: "48em",
+  gridArea: "content",
+  gridTemplateRows: "auto 1fr",
+  gridTemplateAreas: "'title'\n    'description'"
+});
+Content.displayName = "Callout.Content";
+
+const Description = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  gridArea: "description",
+  color: "$text-neutrals-subtle",
+  fontSize: "$175",
+  lineHeight: "$400"
+});
+Description.displayName = "Callout.Description";
+
+const CalloutContext = React.createContext({});
+const CalloutProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  CalloutContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
+const useCalloutContext = () => React.useContext(CalloutContext);
+
+const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  variants: {
+    variant: {
+      information: {
+        color: "$icon-primary"
+      },
+      warning: {
+        color: "$icon-warning"
+      },
+      danger: {
+        color: "$icon-danger"
+      },
+      success: {
+        color: "$icon-success"
+      }
+    }
+  }
+});
+
+const iconVariant = {
+  success: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCheckMark, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconExclamationPointCircle, {}),
+  danger: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconExclamationPointCircle, {}),
+  information: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconInformationMarkCircle, {}),
+  default: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCheckMark, {})
+};
+const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
+  var _a;
+  const { variant } = useCalloutContext();
+  let formattedChildren = children;
+  if (React__default["default"].Children.count(children) < 1) {
+    formattedChildren = (_a = iconVariant[variant]) != null ? _a : iconVariant.default;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, variant, children: formattedChildren });
+});
+
+const Title = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(designSystemTypography.Heading, { ...props, ref: forwardRef, level: 4 }));
+
+const Actions = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  gridArea: "actions",
+  display: "flex",
+  gap: "$100"
+});
+Actions.displayName = "Callout.Actions";
+
+const DismissButton = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  designSystemIconButton.IconButton,
+  {
+    css: { gridArea: "close" },
+    variant: "ghost",
+    size: "medium",
+    "data-testid": "dismiss-button",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
+  }
+);
+
+const Callout = React__default["default"].forwardRef(
+  ({
+    dismissed,
+    dismissible = true,
+    onDismiss,
+    dismissLabel,
+    children,
+    variant,
+    ...props
+  }, forwardRef) => {
+    const [internalDismissed, setInternalDismissed] = React.useState(
+      dismissed != null ? dismissed : false
+    );
+    if (dismissed != null ? dismissed : internalDismissed) {
+      return null;
+    }
+    const handleDismissed = () => {
+      setInternalDismissed(true);
+      onDismiss == null ? void 0 : onDismiss();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(CalloutProvider, { variant, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledCallout,
+      {
+        ...props,
+        ref: forwardRef,
+        variant,
+        role: "alert",
+        children: [
+          children,
+          dismissible && onDismiss != null && (dismissLabel == null ? void 0 : dismissLabel.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            DismissButton,
+            {
+              "aria-label": dismissLabel,
+              onPress: handleDismissed
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+Callout.Content = Content;
+Callout.Description = Description;
+Callout.IconSlot = IconSlot;
+Callout.Title = Title;
+Callout.Actions = Actions;
+
+exports.Callout = Callout;
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../src/callout.styled.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/hooks/use-callout-context.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/title.tsx","../src/partials/actions.tsx","../src/partials/dismiss-button.tsx","../src/callout.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCallout = styled(Primitive.div, {\n  columnGap: '$150',\n  rowGap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr $8',\n  gridTemplateAreas: `'icon content close'\n    'icon actions close'`,\n  variants: {\n    variant: {\n      information: {\n        backgroundColor: '$background-primary-subtle',\n        borderColor: '$border-primary-subtle',\n      },\n      warning: {\n        backgroundColor: '$background-warning-subtle',\n        borderColor: '$border-warning-subtle',\n      },\n      danger: {\n        backgroundColor: '$background-danger-subtle',\n        borderColor: '$border-danger-subtle',\n      },\n      success: {\n        backgroundColor: '$background-success-subtle',\n        borderColor: '$border-success-subtle',\n      },\n    },\n  },\n})\n\nexport type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n  display: 'grid',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateAreas: `'title'\n    'description'`,\n})\n\nContent.displayName = 'Callout.Content'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(Primitive.div, {\n  gridArea: 'description',\n  color: '$text-neutrals-subtle',\n  fontSize: '$175',\n  lineHeight: '$400',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<CalloutProviderProps>): JSX.Element => (\n  <CalloutContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n  useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  variants: {\n    variant: {\n      information: {\n        color: '$icon-primary',\n      },\n      warning: {\n        color: '$icon-warning',\n      },\n      danger: {\n        color: '$icon-danger',\n      },\n      success: {\n        color: '$icon-success',\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n  IconCheckMark,\n  IconExclamationPointCircle,\n  IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children?: React.ReactNode\n}\n\nconst iconVariant = {\n  success: <IconCheckMark />,\n  warning: <IconExclamationPointCircle />,\n  danger: <IconExclamationPointCircle />,\n  information: <IconInformationMarkCircle />,\n  default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { variant } = useCalloutContext()\n\n  let formattedChildren = children\n  if (React.Children.count(children) < 1) {\n    formattedChildren =\n      iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n  }\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nexport interface GroupLabelProps extends Omit<HeadingProps, 'level'> {}\n\nexport const Title = React.forwardRef<\n  ElementRef<typeof Heading>,\n  GroupLabelProps\n>((props, forwardRef) => <Heading {...props} ref={forwardRef} level={4} />)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n  gridArea: 'actions',\n  display: 'flex',\n  gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nexport const DismissButton: React.FC<IconButtonProps> = props => (\n  <IconButton\n    css={{ gridArea: 'close' }}\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </IconButton>\n)\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { DismissButton } from './partials/dismiss-button'\nimport { CalloutProvider } from './hooks/use-callout-context'\n\ninterface DismissibleProps {\n  /**\n   * Whether or not the component is dismissed (hidden)\n   */\n  dismissed?: boolean\n\n  /**\n   * Callback invoked once dismiss button is clicked\n   */\n  onDismiss?: () => void\n\n  /**\n   * aria-label for the dismiss button\n   */\n  dismissLabel: string\n}\n\nexport type CalloutProps = (StyledCalloutProps & {\n  /**\n   * Change the component style.\n   */\n  variant: StyledCalloutProps['variant']\n\n  /**\n   * Whether or not the component should display dismiss button\n   * @default true\n   */\n  dismissible?: boolean\n}) &\n  (\n    | DismissibleProps // uncontrolled\n    | Required<DismissibleProps> // controlled\n    | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n  )\n\nexport const Callout = React.forwardRef<\n  ElementRef<typeof StyledCallout>,\n  CalloutProps\n>(\n  (\n    {\n      dismissed,\n      dismissible = true,\n      onDismiss,\n      dismissLabel,\n      children,\n      variant,\n      ...props\n    },\n    forwardRef\n  ) => {\n    const [internalDismissed, setInternalDismissed] = useState<boolean>(\n      dismissed ?? false\n    )\n\n    if (dismissed ?? internalDismissed) {\n      return null\n    }\n\n    const handleDismissed = (): void => {\n      setInternalDismissed(true)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutProvider variant={variant}>\n        <StyledCallout\n          {...props}\n          ref={forwardRef}\n          variant={variant}\n          role='alert'\n        >\n          {children}\n          {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n            <DismissButton\n              aria-label={dismissLabel}\n              onPress={handleDismissed}\n            />\n          )}\n        </StyledCallout>\n      </CalloutProvider>\n    )\n  }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n  Content: typeof Content\n  Description: typeof Description\n  IconSlot: typeof IconSlot\n  Title: typeof Title\n  Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = Title\nCallout.Actions = Actions\n"],"names":["styled","Primitive","createContext","jsx","useContext","IconCheckMark","IconExclamationPointCircle","IconInformationMarkCircle","React","Heading","IconButton","IconCross","useState","jsxs"],"mappings":";;;;;;;;;;;;;;;;AAIa,MAAA,aAAA,GAAgBA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EACjD,SAAW,EAAA,MAAA;AAAA,EACX,MAAQ,EAAA,MAAA;AAAA,EACR,OAAS,EAAA,MAAA;AAAA,EACT,WAAa,EAAA,KAAA;AAAA,EACb,WAAa,EAAA,OAAA;AAAA,EACb,YAAc,EAAA,KAAA;AAAA,EACd,OAAS,EAAA,MAAA;AAAA,EACT,cAAgB,EAAA,QAAA;AAAA,EAChB,mBAAqB,EAAA,aAAA;AAAA,EACrB,iBAAmB,EAAA,gDAAA;AAAA,EAEnB,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,WAAa,EAAA;AAAA,QACX,eAAiB,EAAA,4BAAA;AAAA,QACjB,WAAa,EAAA,wBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,4BAAA;AAAA,QACjB,WAAa,EAAA,wBAAA;AAAA,OACf;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,eAAiB,EAAA,2BAAA;AAAA,QACjB,WAAa,EAAA,uBAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,4BAAA;AAAA,QACjB,WAAa,EAAA,wBAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACjCY,MAAA,OAAA,GAAUD,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC3C,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,KAAA;AAAA,EACL,QAAU,EAAA,MAAA;AAAA,EACV,QAAU,EAAA,SAAA;AAAA,EACV,gBAAkB,EAAA,UAAA;AAAA,EAClB,iBAAmB,EAAA,4BAAA;AAErB,CAAC,CAAA,CAAA;AAED,OAAA,CAAQ,WAAc,GAAA,iBAAA;;ACVT,MAAA,WAAA,GAAcD,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC/C,QAAU,EAAA,aAAA;AAAA,EACV,KAAO,EAAA,uBAAA;AAAA,EACP,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,MAAA;AACd,CAAC,CAAA,CAAA;AAED,WAAA,CAAY,WAAc,GAAA,qBAAA;;ACG1B,MAAM,cAAA,GAAiBC,mBAAmC,CAAA,EAAS,CAAA,CAAA;AAE5D,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,GAAG,SAAA;AACL,CACE,qBAAAC,cAAA;AAAA,EAAC,cAAe,CAAA,QAAA;AAAA,EAAf;AAAA,IACC,KAAO,EAAA;AAAA,MACL,GAAG,SAAA;AAAA,KACL;AAAA,IAEC,QAAA;AAAA,GAAA;AACH,CAAA,CAAA;AAGW,MAAA,iBAAA,GAAoB,MAC/BC,gBAAA,CAAW,cAAc,CAAA;;AC1Bd,MAAA,cAAA,GAAiBJ,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAClD,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA,cAAA;AAAA,OACT;AAAA,MACA,OAAS,EAAA;AAAA,QACP,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACAD,MAAM,WAAc,GAAA;AAAA,EAClB,OAAA,iCAAUI,+BAAc,EAAA,EAAA,CAAA;AAAA,EACxB,OAAA,iCAAUC,4CAA2B,EAAA,EAAA,CAAA;AAAA,EACrC,MAAA,iCAASA,4CAA2B,EAAA,EAAA,CAAA;AAAA,EACpC,WAAA,iCAAcC,2CAA0B,EAAA,EAAA,CAAA;AAAA,EACxC,OAAA,iCAAUF,+BAAc,EAAA,EAAA,CAAA;AAC1B,CAAA,CAAA;AAEa,MAAA,QAAA,GAAWG,0BAAM,UAG5B,CAAA,CAAC,EAAE,QAAU,EAAA,GAAG,SAAU,EAAA,EAAG,UAAe,KAAA;AA/B9C,EAAA,IAAA,EAAA,CAAA;AAgCE,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAEtC,EAAA,IAAI,iBAAoB,GAAA,QAAA,CAAA;AACxB,EAAA,IAAIA,yBAAM,CAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,IAAI,CAAG,EAAA;AACtC,IAAA,iBAAA,GAAA,CACE,EAAY,GAAA,WAAA,CAAA,OAAmC,CAA/C,KAAA,IAAA,GAAA,EAAA,GAAoD,WAAY,CAAA,OAAA,CAAA;AAAA,GACpE;AAEA,EAAA,sCACG,cAAgB,EAAA,EAAA,GAAG,WAAW,GAAK,EAAA,UAAA,EAAY,SAC7C,QACH,EAAA,iBAAA,EAAA,CAAA,CAAA;AAEJ,CAAC,CAAA;;ACtCM,MAAM,KAAQ,GAAAA,yBAAA,CAAM,UAGzB,CAAA,CAAC,OAAO,UAAe,qBAAAL,cAAA,CAACM,8BAAS,EAAA,EAAA,GAAG,KAAO,EAAA,GAAA,EAAK,UAAY,EAAA,KAAA,EAAO,GAAG,CAAE,CAAA;;ACP7D,MAAA,OAAA,GAAUT,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC3C,QAAU,EAAA,SAAA;AAAA,EACV,OAAS,EAAA,MAAA;AAAA,EACT,GAAK,EAAA,MAAA;AACP,CAAC,CAAA,CAAA;AAED,OAAA,CAAQ,WAAc,GAAA,iBAAA;;ACLf,MAAM,gBAA2C,CACtD,KAAA,qBAAAE,cAAA;AAAA,EAACO,iCAAA;AAAA,EAAA;AAAA,IACC,GAAA,EAAK,EAAE,QAAA,EAAU,OAAQ,EAAA;AAAA,IACzB,OAAQ,EAAA,OAAA;AAAA,IACR,IAAK,EAAA,QAAA;AAAA,IACL,aAAY,EAAA,gBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,yCAACC,2BAAU,EAAA,EAAA,CAAA;AAAA,GAAA;AACb,CAAA;;ACmCK,MAAM,UAAUH,yBAAM,CAAA,UAAA;AAAA,EAI3B,CACE;AAAA,IACE,SAAA;AAAA,IACA,WAAc,GAAA,IAAA;AAAA,IACd,SAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG,KAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,CAAC,iBAAmB,EAAA,oBAAoB,CAAI,GAAAI,cAAA;AAAA,MAChD,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,KAAA;AAAA,KACf,CAAA;AAEA,IAAA,IAAI,gCAAa,iBAAmB,EAAA;AAClC,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,MAAM,kBAAkB,MAAY;AAClC,MAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AACzB,MAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,EAAA,CAAA;AAAA,KACF,CAAA;AAEA,IACE,uBAAAT,cAAA,CAAC,mBAAgB,OACf,EAAA,QAAA,kBAAAU,eAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAK,EAAA,UAAA;AAAA,QACL,OAAA;AAAA,QACA,IAAK,EAAA,OAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,UACA,WAAe,IAAA,SAAA,IAAa,IAAQ,IAAA,CAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,UAAS,CAC1D,oBAAAV,cAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,YAAY,EAAA,YAAA;AAAA,cACZ,OAAS,EAAA,eAAA;AAAA,aAAA;AAAA,WACX;AAAA,SAAA;AAAA,OAAA;AAAA,KAGN,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAUA,OAAA,CAAQ,OAAU,GAAA,OAAA,CAAA;AAClB,OAAA,CAAQ,WAAc,GAAA,WAAA,CAAA;AACtB,OAAA,CAAQ,QAAW,GAAA,QAAA,CAAA;AACnB,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAChB,OAAA,CAAQ,OAAU,GAAA,OAAA;;;;"}

package/dist/module.js

@@ -0,0 +1,180 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { createContext, useContext, useState } from 'react';
+import { Primitive } from '@mirohq/design-system-primitive';
+import { styled } from '@mirohq/design-system-stitches';
+import { IconCheckMark, IconExclamationPointCircle, IconInformationMarkCircle, IconCross } from '@mirohq/design-system-icons';
+import { Heading } from '@mirohq/design-system-typography';
+import { IconButton } from '@mirohq/design-system-icon-button';
+
+const StyledCallout = styled(Primitive.div, {
+  columnGap: "$150",
+  rowGap: "$150",
+  padding: "$200",
+  borderWidth: "$sm",
+  borderStyle: "solid",
+  borderRadius: "$75",
+  display: "grid",
+  justifyContent: "center",
+  gridTemplateColumns: "auto 1fr $8",
+  gridTemplateAreas: "'icon content close'\n    'icon actions close'",
+  variants: {
+    variant: {
+      information: {
+        backgroundColor: "$background-primary-subtle",
+        borderColor: "$border-primary-subtle"
+      },
+      warning: {
+        backgroundColor: "$background-warning-subtle",
+        borderColor: "$border-warning-subtle"
+      },
+      danger: {
+        backgroundColor: "$background-danger-subtle",
+        borderColor: "$border-danger-subtle"
+      },
+      success: {
+        backgroundColor: "$background-success-subtle",
+        borderColor: "$border-success-subtle"
+      }
+    }
+  }
+});
+
+const Content = styled(Primitive.div, {
+  display: "grid",
+  gap: "$25",
+  maxWidth: "48em",
+  gridArea: "content",
+  gridTemplateRows: "auto 1fr",
+  gridTemplateAreas: "'title'\n    'description'"
+});
+Content.displayName = "Callout.Content";
+
+const Description = styled(Primitive.div, {
+  gridArea: "description",
+  color: "$text-neutrals-subtle",
+  fontSize: "$175",
+  lineHeight: "$400"
+});
+Description.displayName = "Callout.Description";
+
+const CalloutContext = createContext({});
+const CalloutProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsx(
+  CalloutContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
+const useCalloutContext = () => useContext(CalloutContext);
+
+const StyledIconSlot = styled(Primitive.div, {
+  variants: {
+    variant: {
+      information: {
+        color: "$icon-primary"
+      },
+      warning: {
+        color: "$icon-warning"
+      },
+      danger: {
+        color: "$icon-danger"
+      },
+      success: {
+        color: "$icon-success"
+      }
+    }
+  }
+});
+
+const iconVariant = {
+  success: /* @__PURE__ */ jsx(IconCheckMark, {}),
+  warning: /* @__PURE__ */ jsx(IconExclamationPointCircle, {}),
+  danger: /* @__PURE__ */ jsx(IconExclamationPointCircle, {}),
+  information: /* @__PURE__ */ jsx(IconInformationMarkCircle, {}),
+  default: /* @__PURE__ */ jsx(IconCheckMark, {})
+};
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  var _a;
+  const { variant } = useCalloutContext();
+  let formattedChildren = children;
+  if (React.Children.count(children) < 1) {
+    formattedChildren = (_a = iconVariant[variant]) != null ? _a : iconVariant.default;
+  }
+  return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, variant, children: formattedChildren });
+});
+
+const Title = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(Heading, { ...props, ref: forwardRef, level: 4 }));
+
+const Actions = styled(Primitive.div, {
+  gridArea: "actions",
+  display: "flex",
+  gap: "$100"
+});
+Actions.displayName = "Callout.Actions";
+
+const DismissButton = (props) => /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    css: { gridArea: "close" },
+    variant: "ghost",
+    size: "medium",
+    "data-testid": "dismiss-button",
+    ...props,
+    children: /* @__PURE__ */ jsx(IconCross, {})
+  }
+);
+
+const Callout = React.forwardRef(
+  ({
+    dismissed,
+    dismissible = true,
+    onDismiss,
+    dismissLabel,
+    children,
+    variant,
+    ...props
+  }, forwardRef) => {
+    const [internalDismissed, setInternalDismissed] = useState(
+      dismissed != null ? dismissed : false
+    );
+    if (dismissed != null ? dismissed : internalDismissed) {
+      return null;
+    }
+    const handleDismissed = () => {
+      setInternalDismissed(true);
+      onDismiss == null ? void 0 : onDismiss();
+    };
+    return /* @__PURE__ */ jsx(CalloutProvider, { variant, children: /* @__PURE__ */ jsxs(
+      StyledCallout,
+      {
+        ...props,
+        ref: forwardRef,
+        variant,
+        role: "alert",
+        children: [
+          children,
+          dismissible && onDismiss != null && (dismissLabel == null ? void 0 : dismissLabel.length) > 0 && /* @__PURE__ */ jsx(
+            DismissButton,
+            {
+              "aria-label": dismissLabel,
+              onPress: handleDismissed
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+Callout.Content = Content;
+Callout.Description = Description;
+Callout.IconSlot = IconSlot;
+Callout.Title = Title;
+Callout.Actions = Actions;
+
+export { Callout };
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sources":["../src/callout.styled.tsx","../src/partials/content.tsx","../src/partials/description.tsx","../src/hooks/use-callout-context.tsx","../src/partials/icon-slot.styled.ts","../src/partials/icon-slot.tsx","../src/partials/title.tsx","../src/partials/actions.tsx","../src/partials/dismiss-button.tsx","../src/callout.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledCallout = styled(Primitive.div, {\n  columnGap: '$150',\n  rowGap: '$150',\n  padding: '$200',\n  borderWidth: '$sm',\n  borderStyle: 'solid',\n  borderRadius: '$75',\n  display: 'grid',\n  justifyContent: 'center',\n  gridTemplateColumns: 'auto 1fr $8',\n  gridTemplateAreas: `'icon content close'\n    'icon actions close'`,\n  variants: {\n    variant: {\n      information: {\n        backgroundColor: '$background-primary-subtle',\n        borderColor: '$border-primary-subtle',\n      },\n      warning: {\n        backgroundColor: '$background-warning-subtle',\n        borderColor: '$border-warning-subtle',\n      },\n      danger: {\n        backgroundColor: '$background-danger-subtle',\n        borderColor: '$border-danger-subtle',\n      },\n      success: {\n        backgroundColor: '$background-success-subtle',\n        borderColor: '$border-success-subtle',\n      },\n    },\n  },\n})\n\nexport type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n  display: 'grid',\n  gap: '$25',\n  maxWidth: '48em',\n  gridArea: 'content',\n  gridTemplateRows: 'auto 1fr',\n  gridTemplateAreas: `'title'\n    'description'`,\n})\n\nContent.displayName = 'Callout.Content'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(Primitive.div, {\n  gridArea: 'description',\n  color: '$text-neutrals-subtle',\n  fontSize: '$175',\n  lineHeight: '$400',\n})\n\nDescription.displayName = 'Callout.Description'\n","import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledCalloutProps } from '../callout.styled'\n\ninterface CalloutProps {\n  variant?: StyledCalloutProps['variant']\n}\n\ninterface CalloutContextProps extends CalloutProps {}\n\nexport type CalloutProviderProps = CalloutContextProps\n\nconst CalloutContext = createContext<CalloutContextProps>({} as any)\n\nexport const CalloutProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<CalloutProviderProps>): JSX.Element => (\n  <CalloutContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </CalloutContext.Provider>\n)\n\nexport const useCalloutContext = (): CalloutContextProps =>\n  useContext(CalloutContext)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledIconSlot = styled(Primitive.div, {\n  variants: {\n    variant: {\n      information: {\n        color: '$icon-primary',\n      },\n      warning: {\n        color: '$icon-warning',\n      },\n      danger: {\n        color: '$icon-danger',\n      },\n      success: {\n        color: '$icon-success',\n      },\n    },\n  },\n})\n","import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport {\n  IconCheckMark,\n  IconExclamationPointCircle,\n  IconInformationMarkCircle,\n} from '@mirohq/design-system-icons'\n\nimport { useCalloutContext } from '../hooks/use-callout-context'\nimport { StyledIconSlot } from './icon-slot.styled'\n\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children?: React.ReactNode\n}\n\nconst iconVariant = {\n  success: <IconCheckMark />,\n  warning: <IconExclamationPointCircle />,\n  danger: <IconExclamationPointCircle />,\n  information: <IconInformationMarkCircle />,\n  default: <IconCheckMark />,\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { variant } = useCalloutContext()\n\n  let formattedChildren = children\n  if (React.Children.count(children) < 1) {\n    formattedChildren =\n      iconVariant[variant as keyof typeof iconVariant] ?? iconVariant.default\n  }\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} variant={variant}>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Heading } from '@mirohq/design-system-typography'\nimport type { HeadingProps } from '@mirohq/design-system-typography'\n\nexport interface GroupLabelProps extends Omit<HeadingProps, 'level'> {}\n\nexport const Title = React.forwardRef<\n  ElementRef<typeof Heading>,\n  GroupLabelProps\n>((props, forwardRef) => <Heading {...props} ref={forwardRef} level={4} />)\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Actions = styled(Primitive.div, {\n  gridArea: 'actions',\n  display: 'flex',\n  gap: '$100',\n})\n\nActions.displayName = 'Callout.Actions'\n","import { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\n\nexport const DismissButton: React.FC<IconButtonProps> = props => (\n  <IconButton\n    css={{ gridArea: 'close' }}\n    variant='ghost'\n    size='medium'\n    data-testid='dismiss-button'\n    {...props}\n  >\n    <IconCross />\n  </IconButton>\n)\n","import React, { useState } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledCallout } from './callout.styled'\nimport type { StyledCalloutProps } from './callout.styled'\nimport { Content } from './partials/content'\nimport { Description } from './partials/description'\nimport { IconSlot } from './partials/icon-slot'\nimport { Title } from './partials/title'\nimport { Actions } from './partials/actions'\nimport { DismissButton } from './partials/dismiss-button'\nimport { CalloutProvider } from './hooks/use-callout-context'\n\ninterface DismissibleProps {\n  /**\n   * Whether or not the component is dismissed (hidden)\n   */\n  dismissed?: boolean\n\n  /**\n   * Callback invoked once dismiss button is clicked\n   */\n  onDismiss?: () => void\n\n  /**\n   * aria-label for the dismiss button\n   */\n  dismissLabel: string\n}\n\nexport type CalloutProps = (StyledCalloutProps & {\n  /**\n   * Change the component style.\n   */\n  variant: StyledCalloutProps['variant']\n\n  /**\n   * Whether or not the component should display dismiss button\n   * @default true\n   */\n  dismissible?: boolean\n}) &\n  (\n    | DismissibleProps // uncontrolled\n    | Required<DismissibleProps> // controlled\n    | ({ dismissible?: false } & { [K in keyof DismissibleProps]?: never })\n  )\n\nexport const Callout = React.forwardRef<\n  ElementRef<typeof StyledCallout>,\n  CalloutProps\n>(\n  (\n    {\n      dismissed,\n      dismissible = true,\n      onDismiss,\n      dismissLabel,\n      children,\n      variant,\n      ...props\n    },\n    forwardRef\n  ) => {\n    const [internalDismissed, setInternalDismissed] = useState<boolean>(\n      dismissed ?? false\n    )\n\n    if (dismissed ?? internalDismissed) {\n      return null\n    }\n\n    const handleDismissed = (): void => {\n      setInternalDismissed(true)\n      onDismiss?.()\n    }\n\n    return (\n      <CalloutProvider variant={variant}>\n        <StyledCallout\n          {...props}\n          ref={forwardRef}\n          variant={variant}\n          role='alert'\n        >\n          {children}\n          {dismissible && onDismiss != null && dismissLabel?.length > 0 && (\n            <DismissButton\n              aria-label={dismissLabel}\n              onPress={handleDismissed}\n            />\n          )}\n        </StyledCallout>\n      </CalloutProvider>\n    )\n  }\n) as ForwardRefExoticComponent<CalloutProps> & Partials\n\nexport interface Partials {\n  Content: typeof Content\n  Description: typeof Description\n  IconSlot: typeof IconSlot\n  Title: typeof Title\n  Actions: typeof Actions\n}\n\nCallout.Content = Content\nCallout.Description = Description\nCallout.IconSlot = IconSlot\nCallout.Title = Title\nCallout.Actions = Actions\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,78 @@
+import * as react from 'react';
+import react__default, { ComponentPropsWithRef } from 'react';
+import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
+import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
+import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
+import { HeadingProps } from '@mirohq/design-system-typography';
+
+declare const StyledCallout: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    variant?: "information" | "warning" | "danger" | "success" | 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" | "success" | undefined;
+}, {}>;
+declare type StyledCalloutProps = ComponentPropsWithRef<typeof StyledCallout>;
+
+declare const Content: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+
+declare const Description: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+
+declare const StyledIconSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    variant?: "information" | "warning" | "danger" | "success" | 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" | "success" | undefined;
+}, {}>;
+
+declare type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>;
+interface IconSlotProps extends StyledIconSlotProps {
+    /**
+     * The icon.
+     */
+    children?: react__default.ReactNode;
+}
+declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<IconSlotProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+interface GroupLabelProps extends Omit<HeadingProps, 'level'> {
+}
+declare const Title: react__default.ForwardRefExoticComponent<Omit<GroupLabelProps, "ref"> & react__default.RefAttributes<HTMLHeadingElement>>;
+
+declare const Actions: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
+
+interface DismissibleProps {
+    /**
+     * Whether or not the component is dismissed (hidden)
+     */
+    dismissed?: boolean;
+    /**
+     * Callback invoked once dismiss button is clicked
+     */
+    onDismiss?: () => void;
+    /**
+     * aria-label for the dismiss button
+     */
+    dismissLabel: string;
+}
+declare type CalloutProps = (StyledCalloutProps & {
+    /**
+     * Change the component style.
+     */
+    variant: StyledCalloutProps['variant'];
+    /**
+     * Whether or not the component should display dismiss button
+     * @default true
+     */
+    dismissible?: boolean;
+}) & (DismissibleProps | Required<DismissibleProps> | ({
+    dismissible?: false;
+} & {
+    [K in keyof DismissibleProps]?: never;
+}));
+declare const Callout: react__default.ForwardRefExoticComponent<CalloutProps> & Partials;
+interface Partials {
+    Content: typeof Content;
+    Description: typeof Description;
+    IconSlot: typeof IconSlot;
+    Title: typeof Title;
+    Actions: typeof Actions;
+}
+
+export { Callout, CalloutProps };

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@mirohq/design-system-callout",
+  "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"
+  },
+  "dependencies": {
+    "@mirohq/design-system-icon-button": "^3.2.0",
+    "@mirohq/design-system-primitive": "^1.1.2",
+    "@mirohq/design-system-stitches": "^2.6.25",
+    "@mirohq/design-system-icons": "^0.57.0",
+    "@mirohq/design-system-typography": "^0.6.3"
+  },
+  "scripts": {
+    "build": "rollup -c ../../../rollup.config.js",
+    "clean": "rm -rf dist",
+    "prebuild": "pnpm clean"
+  }
+}