@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/tooltip.js

@@ -1,93 +1,20 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useId } from "react";
-const GAP = 8;
-function getFixedPos(rect, side) {
-  const vpW = typeof window !== "undefined" ? window.innerWidth : 1920;
-  const EDGE = 80;
-  switch (side) {
-    case "right":
-      return { top: rect.top + rect.height / 2, left: rect.right + GAP, transform: "translateY(-50%)" };
-    case "left":
-      return { top: rect.top + rect.height / 2, left: rect.left - GAP, transform: "translate(-100%, -50%)" };
-    case "bottom": {
-      const cx = rect.left + rect.width / 2;
-      if (cx > vpW - EDGE) return { top: rect.bottom + GAP, left: rect.right, transform: "translateX(-100%)" };
-      if (cx < EDGE) return { top: rect.bottom + GAP, left: rect.left, transform: "" };
-      return { top: rect.bottom + GAP, left: cx, transform: "translateX(-50%)" };
-    }
-    case "top":
-    default: {
-      const cx = rect.left + rect.width / 2;
-      if (cx > vpW - EDGE) return { top: rect.top - GAP, left: rect.right, transform: "translate(-100%, -100%)" };
-      if (cx < EDGE) return { top: rect.top - GAP, left: rect.left, transform: "translateY(-100%)" };
-      return { top: rect.top - GAP, left: cx, transform: "translate(-50%, -100%)" };
-    }
-  }
-}
-const ARROW_CLASSES = {
-  top: `bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-t-[var(--tooltip-bg)] border-x-transparent border-b-transparent`,
-  bottom: `top-0 left-1/2 -translate-x-1/2 -translate-y-full border-b-[var(--tooltip-bg)] border-x-transparent border-t-transparent`,
-  left: `right-0 top-1/2 -translate-y-1/2 translate-x-full border-l-[var(--tooltip-bg)] border-y-transparent border-r-transparent`,
-  right: `left-0 top-1/2 -translate-y-1/2 -translate-x-full border-r-[var(--tooltip-bg)] border-y-transparent border-l-transparent`
-};
-function Tooltip({ content, children, side = "top", delay = 300, className, wrapperClassName }) {
-  const id = useId();
-  const ref = useRef(null);
-  const timer = useRef(null);
-  const [pos, setPos] = useState(null);
-  function show() {
-    timer.current = setTimeout(() => {
-      if (!ref.current) return;
-      setPos(getFixedPos(ref.current.getBoundingClientRect(), side));
-    }, delay);
-  }
-  function hide() {
-    if (timer.current) clearTimeout(timer.current);
-    setPos(null);
-  }
-  useEffect(() => () => {
-    if (timer.current) clearTimeout(timer.current);
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref,
-      className: wrapperClassName != null ? wrapperClassName : "inline-flex items-center",
-      onMouseEnter: show,
-      onMouseLeave: hide,
-      onFocus: show,
-      onBlur: hide,
-      "aria-describedby": pos ? id : void 0,
-      children: [
-        children,
-        pos && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            id,
-            role: "tooltip",
-            style: { position: "fixed", top: pos.top, left: pos.left, transform: pos.transform },
-            className: `z-[9999] px-2.5 py-1.5 bg-[var(--tooltip-bg)] text-[var(--tooltip-text)] text-caption font-medium rounded-(--radius-tooltip) whitespace-nowrap pointer-events-none shadow-md${className ? ` ${className}` : ""}`,
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: [
-                    "absolute border-[5px]",
-                    ARROW_CLASSES[side]
-                  ].join(" "),
-                  style: { width: 0, height: 0 }
-                }
-              ),
-              content
-            ]
-          }
-        )
-      ]
-    }
-  );
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+function Tooltip(_a) {
+  var _b = _a, { children, text, side = "top", delay = 300 } = _b, trigger = __objRest(_b, ["children", "text", "side", "delay"]);
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, __spreadProps(__spreadValues({}, trigger), { asChild: true, children })),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, { side, sideOffset: 4, collisionPadding: 8, className: "rds-tooltip", children: [
+      text,
+      /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "rds-tooltip__arrow", width: 16, height: 8 })
+    ] }) })
+  ] }) });
 }
 export {
   Tooltip

package/dist/components/top-navigation.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface TopNavigationProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The brand (Figma: `logo`), always by slot: the design system carries no client logo. Usually a link to the home
+     * page named after the brand, around the logotype.
+     */
+    logo: ReactNode;
+    /** The main sections: neutral ghost Buttons as links, through asChild (Figma: slot `links`). */
+    links?: ReactNode;
+    /** Sign in and the main action: a neutral outline and an action fill Button (Figma: slot `actions`). */
+    actions?: ReactNode;
+    /** Names the links' navigation. */
+    label?: string;
+    /** The menu panel open, below 768 of container width (Figma: `open`). Controlled; pair with `onOpenChange`. */
+    open?: boolean;
+    /** Uncontrolled: the panel open at first. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The menu button's accessible name, closed and open. */
+    openLabel?: string;
+    closeLabel?: string;
+}
+/**
+ * TopNavigation — Figma [RDS] Blocks/TopNavigation. The top bar of the public pages (<header>, the banner landmark
+ * at the top level): logo, links and actions. Below 768 of container width the links and the actions go into the
+ * panel the menu button opens (Figma: `screen=mobile`, `open`); Escape closes it and returns the focus to the
+ * button. Styles: top-navigation.css.
+ */
+declare function TopNavigation({ logo, links, actions, label, open: openProp, defaultOpen, onOpenChange, openLabel, closeLabel, className, onKeyDown, ...rest }: TopNavigationProps): react.JSX.Element;
+
+export { TopNavigation, type TopNavigationProps };

package/dist/components/top-navigation.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { CloseIcon, MenuIcon } from "./internal/icons.js";
+function TopNavigation(_a) {
+  var _b = _a, {
+    logo,
+    links,
+    actions,
+    label = "Principal",
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    openLabel = "Abrir menu",
+    closeLabel = "Fechar menu",
+    className,
+    onKeyDown
+  } = _b, rest = __objRest(_b, [
+    "logo",
+    "links",
+    "actions",
+    "label",
+    "open",
+    "defaultOpen",
+    "onOpenChange",
+    "openLabel",
+    "closeLabel",
+    "className",
+    "onKeyDown"
+  ]);
+  const [own, setOwn] = useState(defaultOpen);
+  const open = openProp != null ? openProp : own;
+  const panelId = useId();
+  const toggle = useRef(null);
+  const setOpen = (next) => {
+    setOwn(next);
+    onOpenChange == null ? void 0 : onOpenChange(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "header",
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-topnav", className].filter(Boolean).join(" "),
+      "data-open": open ? "" : void 0,
+      onKeyDown: (event) => {
+        var _a2;
+        onKeyDown == null ? void 0 : onKeyDown(event);
+        if (event.key === "Escape" && open) {
+          setOpen(false);
+          (_a2 = toggle.current) == null ? void 0 : _a2.focus();
+        }
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "rds-topnav__bar", children: [
+        /* @__PURE__ */ jsx("div", { className: "rds-topnav__brand", children: logo }),
+        /* @__PURE__ */ jsxs("div", { id: panelId, className: "rds-topnav__panel", children: [
+          links && /* @__PURE__ */ jsx("nav", { className: "rds-topnav__links", "aria-label": label, children: links }),
+          actions && /* @__PURE__ */ jsx("div", { className: "rds-topnav__actions", children: actions })
+        ] }),
+        /* @__PURE__ */ jsx(Tooltip, { text: open ? closeLabel : openLabel, children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ref: toggle,
+            className: "rds-topnav__toggle",
+            icon: open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {}),
+            label: open ? closeLabel : openLabel,
+            tone: "neutral",
+            variant: "ghost",
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            onClick: () => setOpen(!open)
+          }
+        ) })
+      ] })
+    })
+  );
+}
+export {
+  TopNavigation
+};

package/dist/components/typing-indicator.d.ts

@@ -1,8 +1,14 @@
 import * as react from 'react';
 
+/** @deprecated Use Bubble with variant="typing". */
 interface TypingIndicatorProps {
+    /** What a screen reader hears. Default "Digitando". */
     ariaLabel?: string;
 }
+/**
+ * @deprecated Use `<Bubble variant="typing" />` (Figma [RDS] Chat/Bubble, style=typing). A thin wrapper over it: the
+ * label becomes the bubble's announcement.
+ */
 declare function TypingIndicator({ ariaLabel }: TypingIndicatorProps): react.JSX.Element;
 
 export { TypingIndicator, type TypingIndicatorProps };

package/dist/components/typing-indicator.js

@@ -1,29 +1,8 @@
-"use client";
 import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ChatBubble } from "./chat-bubble.js";
+import { jsx } from "react/jsx-runtime";
+import { Bubble } from "./bubble.js";
 function TypingIndicator({ ariaLabel = "Digitando" }) {
-  const dotStyle = (delay) => ({
-    width: "var(--typing-dot-size)",
-    height: "var(--typing-dot-size)",
-    background: "var(--typing-dot-color)",
-    borderRadius: "9999px",
-    animation: "rojao-typing-pulse 1400ms infinite",
-    animationDelay: delay
-  });
-  return /* @__PURE__ */ jsx(ChatBubble, { variant: "bot", ariaLabel, children: /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: "inline-flex items-center",
-      style: { gap: "var(--typing-dot-gap)" },
-      "aria-live": "polite",
-      children: [
-        /* @__PURE__ */ jsx("span", { style: dotStyle("0ms") }),
-        /* @__PURE__ */ jsx("span", { style: dotStyle("200ms") }),
-        /* @__PURE__ */ jsx("span", { style: dotStyle("400ms") })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsx(Bubble, { variant: "typing", align: "start", children: ariaLabel });
 }
 export {
   TypingIndicator

package/dist/components/whatsapp-chat.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { WhatsAppPlatform } from './internal/whatsapp.js';
+
+interface WhatsAppChatProps extends HTMLAttributes<HTMLDivElement> {
+    /** WhatsAppTemplate and WhatsAppMessage, from the oldest to the newest (Figma: slot `messages`). */
+    children?: ReactNode;
+    /** The business's name in the header (Figma: `name`). */
+    name?: string;
+    /** The line under the name (Figma: `subtitle`). */
+    subtitle?: string;
+    /** The verified badge next to the name (Figma: `showVerified`). */
+    showVerified?: boolean;
+    /** The business's picture: its logo, always by slot (the design system carries no client logo). */
+    avatar?: ReactNode;
+    /** android (Roboto) or ios. The messages inside follow it. */
+    platform?: WhatsAppPlatform;
+    /** The time in the status bar. */
+    time?: string;
+}
+/**
+ * WhatsAppChat — Figma [RDS] External/WhatsAppChat. A MOCKUP of a WhatsApp Business conversation, 360 × 780, for
+ * flows: the status bar, the header, the day, Meta's notice, the messages and the composer. Nothing in it works;
+ * the bars are decorative and the messages are read. Styles: whatsapp-chat.css and internal/whatsapp.css.
+ */
+declare function WhatsAppChat({ children, name, subtitle, showVerified, avatar, platform, time, className, ...rest }: WhatsAppChatProps): react.JSX.Element;
+
+export { WhatsAppChat, type WhatsAppChatProps };

package/dist/components/whatsapp-chat.js

@@ -0,0 +1,95 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowLeftIcon,
+  BadgeCheckIcon,
+  CameraIcon,
+  ChevronLeftIcon,
+  MicIcon,
+  MoreVerticalIcon,
+  PaperclipIcon,
+  PhoneIcon,
+  SmileIcon
+} from "./internal/icons.js";
+import { WhatsAppPlatformContext } from "./internal/whatsapp.js";
+function WhatsAppChat(_a) {
+  var _b = _a, {
+    children,
+    name = "Roj\xE3o",
+    subtitle = "Conta comercial",
+    showVerified,
+    avatar,
+    platform = "android",
+    time,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "name",
+    "subtitle",
+    "showVerified",
+    "avatar",
+    "platform",
+    "time",
+    "className"
+  ]);
+  const ios = platform === "ios";
+  return /* @__PURE__ */ jsx(WhatsAppPlatformContext.Provider, { value: platform, children: /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "group",
+      "aria-label": `Mockup: conversa do WhatsApp com ${name}`
+    }, rest), {
+      className: ["rds-whatsapp-chat", `rds-whatsapp--${platform}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-chat__status", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { children: time != null ? time : ios ? "9:41" : "12:30" }),
+          /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-chat__indicators", children: [
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", {})
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-chat__header", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-chat__icon", "aria-hidden": "true", children: ios ? /* @__PURE__ */ jsx(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-chat__avatar", children: avatar }),
+          /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-chat__contact", children: [
+            /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-chat__name", children: [
+              name,
+              showVerified && /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-chat__verified", children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(BadgeCheckIcon, {}) }),
+                /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: "(verificada)" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-chat__subtitle", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-chat__actions", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(PhoneIcon, {}),
+            !ios && /* @__PURE__ */ jsx(MoreVerticalIcon, {})
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-chat__conversation", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-chat__date", children: "Hoje" }),
+          /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-chat__notice", children: "Esta empresa usa um servi\xE7o seguro da Meta para gerenciar esta conversa. Saiba mais" }),
+          /* @__PURE__ */ jsx("div", { className: "rds-whatsapp-chat__messages", children })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-chat__composer", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-chat__field", children: [
+            !ios && /* @__PURE__ */ jsx(SmileIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-chat__placeholder", children: "Mensagem" }),
+            /* @__PURE__ */ jsx(PaperclipIcon, {}),
+            /* @__PURE__ */ jsx(CameraIcon, {})
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-chat__mic", children: /* @__PURE__ */ jsx(MicIcon, {}) })
+        ] })
+      ]
+    })
+  ) });
+}
+export {
+  WhatsAppChat
+};

package/dist/components/whatsapp-message.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { WhatsAppPlatform } from './internal/whatsapp.js';
+
+type WhatsAppMessageType = 'received' | 'sent' | 'delivered' | 'read';
+interface WhatsAppMessageProps extends HTMLAttributes<HTMLDivElement> {
+    /** The message (Figma: `text`). Line breaks are kept. */
+    text: ReactNode;
+    /** The time under it, such as "11:59" (Figma: `time`). */
+    time?: string;
+    /** android (Roboto) or ios. Inside a WhatsAppChat, the chat's by default. */
+    platform?: WhatsAppPlatform;
+    /** received: white, on the left; sent, delivered or read: green, on the right, with one tick, two grey or two blue. */
+    type?: WhatsAppMessageType;
+}
+/**
+ * WhatsAppMessage — Figma [RDS] External/WhatsAppMessage. A MOCKUP of a WhatsApp message bubble (2024 look), for
+ * flows. The ticks are said in words to screen readers. Styles: whatsapp-message.css and internal/whatsapp.css.
+ */
+declare function WhatsAppMessage({ text, time, platform, type, className, ...rest }: WhatsAppMessageProps): react.JSX.Element;
+
+export { WhatsAppMessage, type WhatsAppMessageProps, type WhatsAppMessageType, WhatsAppPlatform };

package/dist/components/whatsapp-message.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCheckIcon, CheckIcon } from "./internal/icons.js";
+import { useWhatsAppPlatform } from "./internal/whatsapp.js";
+const TICKS = { sent: "Enviada", delivered: "Entregue", read: "Lida" };
+function WhatsAppMessage(_a) {
+  var _b = _a, { text, time = "11:59", platform, type = "received", className } = _b, rest = __objRest(_b, ["text", "time", "platform", "type", "className"]);
+  const finalPlatform = useWhatsAppPlatform(platform);
+  const out = type !== "received";
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-whatsapp-message", `rds-whatsapp--${finalPlatform}`, out ? "rds-whatsapp-message--out" : "rds-whatsapp-message--in", className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-message__bubble", children: [
+        /* @__PURE__ */ jsx("div", { className: "rds-whatsapp-message__text", children: text }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-message__meta", children: [
+          /* @__PURE__ */ jsx("span", { children: time }),
+          out && /* @__PURE__ */ jsxs("span", { className: `rds-whatsapp-message__ticks rds-whatsapp-message__ticks--${type}`, children: [
+            type === "sent" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CheckCheckIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: TICKS[type] })
+          ] })
+        ] })
+      ] })
+    })
+  );
+}
+export {
+  WhatsAppMessage
+};

package/dist/components/whatsapp-notification.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { WhatsAppPlatform } from './internal/whatsapp.js';
+
+interface WhatsAppNotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /** Who sent it: the business's name (Figma: `title`). */
+    title?: string;
+    /** The message, cut at three lines (Figma: `message`). */
+    message: ReactNode;
+    /** When, such as "agora" (Figma: `when`). */
+    when?: string;
+    /** android: the Android notification anatomy; ios: Apple's, the picture with the app icon over it. */
+    platform?: WhatsAppPlatform;
+    /** The sender's picture: its logo, always by slot (the design system carries no client logo). */
+    avatar?: ReactNode;
+    /** The lock screen's clock and date. */
+    time?: string;
+    date?: string;
+}
+/**
+ * WhatsAppNotification — Figma [RDS] External/WhatsAppNotification. A MOCKUP of a WhatsApp notification on the
+ * lock screen, for flows. The wallpaper is a neutral gradient, no real picture. Nothing in it works; the clock is
+ * decorative and the notification is read. Styles: whatsapp-notification.css.
+ */
+declare function WhatsAppNotification({ title, message, when, platform, avatar, time, date, className, ...rest }: WhatsAppNotificationProps): react.JSX.Element;
+
+export { WhatsAppNotification, type WhatsAppNotificationProps };

package/dist/components/whatsapp-notification.js

@@ -0,0 +1,73 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PhoneIcon } from "./internal/icons.js";
+function WhatsAppNotification(_a) {
+  var _b = _a, {
+    title = "Roj\xE3o",
+    message,
+    when = "agora",
+    platform = "android",
+    avatar,
+    time,
+    date,
+    className
+  } = _b, rest = __objRest(_b, [
+    "title",
+    "message",
+    "when",
+    "platform",
+    "avatar",
+    "time",
+    "date",
+    "className"
+  ]);
+  const ios = platform === "ios";
+  const appIcon = /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__app", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PhoneIcon, {}) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      role: "group",
+      "aria-label": "Mockup: notifica\xE7\xE3o do WhatsApp"
+    }, rest), {
+      className: ["rds-whatsapp-notification", `rds-whatsapp--${platform}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-notification__clock", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__date", children: date != null ? date : ios ? "S\xE1b. 26 de set." : "s\xE1b., 26 de set." }),
+          /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__time", children: time != null ? time : ios ? "09:41" : "12:30" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "rds-whatsapp-notification__card", children: ios ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-notification__picture", children: [
+            /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__avatar", children: avatar }),
+            appIcon
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-notification__text", children: [
+            /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-notification__title-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__title", children: title }),
+              /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__when", children: when })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__message", children: message })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-notification__text", children: [
+            /* @__PURE__ */ jsxs("span", { className: "rds-whatsapp-notification__app-row", children: [
+              appIcon,
+              /* @__PURE__ */ jsx("span", { children: "WhatsApp" }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { children: when })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__title", children: title }),
+            /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__message", children: message })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-notification__avatar", children: avatar })
+        ] }) })
+      ]
+    })
+  );
+}
+export {
+  WhatsAppNotification
+};

package/dist/components/whatsapp-template.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { WhatsAppPlatform } from './internal/whatsapp.js';
+
+type WhatsAppTemplateHeader = 'none' | 'text' | 'image';
+interface WhatsAppTemplateProps extends HTMLAttributes<HTMLDivElement> {
+    /** WhatsAppTemplateButton, up to 10 (Figma: slot `buttons`); with more than 3, WhatsApp shows 2 and "all-options". */
+    children?: ReactNode;
+    /** The header kind (Figma: `header`): none, a bold line (up to 60 characters) or an image. */
+    header?: WhatsAppTemplateHeader;
+    /** The header line, with `header="text"` (Figma: `headerText`). */
+    headerText?: ReactNode;
+    /** The header image, with `header="image"`: an `<img>` with its alt. Without it, a grey placeholder. */
+    image?: ReactNode;
+    /** The message, up to 1024 characters (Figma: `body`). */
+    body: ReactNode;
+    /** The grey line under the body, up to 60 characters (Figma: `showFooter` + `footer`). */
+    footer?: ReactNode;
+    time?: string;
+    /** android or ios. Inside a WhatsAppChat, the chat's by default. */
+    platform?: WhatsAppPlatform;
+}
+/**
+ * WhatsAppTemplate — Figma [RDS] External/WhatsAppTemplate. A MOCKUP of a WhatsApp Business template message, for
+ * flows: the header, the body, the footer, the time and the buttons under the bubble. Limits from Meta's
+ * documentation. Styles: whatsapp-template.css and internal/whatsapp.css.
+ */
+declare function WhatsAppTemplate({ children, header, headerText, image, body, footer, time, platform, className, ...rest }: WhatsAppTemplateProps): react.JSX.Element;
+type WhatsAppTemplateButtonType = 'quick-reply' | 'url' | 'phone' | 'all-options';
+type WhatsAppTemplateButtonStatus = 'default' | 'used';
+interface WhatsAppTemplateButtonProps extends HTMLAttributes<HTMLDivElement> {
+    /** The label, up to 25 characters (Figma: `label`). With all-options, "Ver todas as opções" by default. */
+    children?: ReactNode;
+    /** quick-reply (a reply), url (a link), phone (a call) or all-options (more than 3 buttons). */
+    type?: WhatsAppTemplateButtonType;
+    /** used: a quick reply already tapped, in grey. */
+    status?: WhatsAppTemplateButtonStatus;
+}
+/** One button under a WhatsAppTemplate (Figma: .whatsapp/template-button). A mockup: it does nothing. */
+declare function WhatsAppTemplateButton({ children, type, status, className, ...rest }: WhatsAppTemplateButtonProps): react.JSX.Element;
+
+export { WhatsAppTemplate, WhatsAppTemplateButton, type WhatsAppTemplateButtonProps, type WhatsAppTemplateButtonStatus, type WhatsAppTemplateButtonType, type WhatsAppTemplateHeader, type WhatsAppTemplateProps };