@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/badge.js

@@ -3,119 +3,22 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const LABEL_VARIANTS = {
-  default: "bg-surface-default text-fg-muted border border-stroke-default",
-  primary: "bg-brand-primary text-brand-on-primary",
-  success: "bg-success-soft text-success-text border border-success-border",
-  warning: "bg-warning-soft text-warning-text border border-warning-border",
-  danger: "bg-danger-soft  text-danger-text  border border-danger-border",
-  info: "bg-info-soft    text-info-text    border border-info-border",
-  neutral: "bg-neutral-soft text-neutral-text border border-neutral-border"
-};
-const STATUS_VARIANTS = {
-  active: { dot: "bg-success", text: "text-success-text" },
-  inactive: { dot: "bg-state-disabled-text", text: "text-state-disabled-text" },
-  pending: { dot: "bg-warning", text: "text-warning-text" },
-  error: { dot: "bg-danger", text: "text-danger-text" }
-};
-const BASE = "inline-flex items-center rounded-(--radius-badge) font-medium transition-colors";
-const SIZE_CLASS = {
-  sm: "text-[10px]",
-  md: "text-caption"
-};
-const DOT_BG = {
-  brand: "bg-brand-primary",
-  success: "bg-success",
-  warning: "bg-warning",
-  danger: "bg-danger",
-  info: "bg-info",
-  neutral: "bg-neutral"
-};
-const Badge = forwardRef(function Badge2(_a, ref) {
-  var _b = _a, {
-    variant = "default",
-    size = "md",
-    count,
-    max = 99,
-    dotColor = "brand",
-    className = "",
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "count",
-    "max",
-    "dotColor",
-    "className",
-    "children"
-  ]);
-  if (variant === "dot") {
-    return /* @__PURE__ */ jsx(
-      "span",
-      __spreadValues({
-        ref,
-        role: "status",
-        className: [
-          "inline-block rounded-full",
-          size === "sm" ? "size-2" : "size-2.5",
-          DOT_BG[dotColor],
-          className
-        ].join(" ")
-      }, props)
-    );
-  }
-  if (variant === "count") {
-    const display = count !== void 0 ? count > max ? `${max}+` : String(count) : children;
-    if (count !== void 0 && count <= 0) return null;
-    return /* @__PURE__ */ jsx(
-      "span",
-      __spreadProps(__spreadValues({
-        ref,
-        className: [
-          BASE,
-          SIZE_CLASS[size],
-          size === "sm" ? "min-w-[16px] h-4 px-1" : "min-w-[20px] h-5 px-1.5",
-          "bg-brand-primary text-brand-on-primary justify-center tabular-nums",
-          className
-        ].join(" ")
-      }, props), {
-        children: display
-      })
-    );
-  }
-  if (variant in STATUS_VARIANTS) {
-    const { dot, text } = STATUS_VARIANTS[variant];
-    return /* @__PURE__ */ jsxs(
-      "span",
-      __spreadProps(__spreadValues({
-        ref,
-        className: [BASE, SIZE_CLASS[size], "gap-1.5", text, className].join(" ")
-      }, props), {
-        children: [
-          /* @__PURE__ */ jsx("span", { className: ["shrink-0 size-1.5 rounded-full", dot].join(" "), "aria-hidden": "true" }),
-          children
-        ]
-      })
-    );
-  }
+import { jsx } from "react/jsx-runtime";
+function formatBadgeValue(value) {
+  return value > 99 ? "99+" : String(value);
+}
+function Badge(_a) {
+  var _b = _a, { tone = "neutral", variant = "fill", value, children, className } = _b, rest = __objRest(_b, ["tone", "variant", "value", "children", "className"]);
+  const isNumber = value !== void 0;
   return /* @__PURE__ */ jsx(
     "span",
-    __spreadProps(__spreadValues({
-      ref,
-      className: [
-        BASE,
-        SIZE_CLASS[size],
-        size === "sm" ? "px-1.5 py-px" : "px-2 py-0.5",
-        LABEL_VARIANTS[variant],
-        className
-      ].join(" ")
-    }, props), {
-      children
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-badge", `rds-badge--${tone}-${variant}`, isNumber && "rds-badge--number", className].filter(Boolean).join(" "),
+      children: isNumber ? formatBadgeValue(value) : children
     })
   );
-});
+}
 export {
-  Badge
+  Badge,
+  formatBadgeValue
 };

package/dist/components/banner.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Decorative (Figma: `showIcon` + `icon`). By default a megaphone; `null` hides it. */
+    icon?: ReactNode;
+    /** The highlight before the message, such as "Novidade:" (Figma: `highlight`). */
+    highlight?: ReactNode;
+    /** The message, one short line (Figma: `message`). */
+    message: ReactNode;
+    /** An action ghost Button, or a link through Button asChild (Figma: `showAction`). */
+    action?: ReactNode;
+    /** Shows the × (Figma: `showClose`). The Banner hides itself, calls this, and the focus moves on. */
+    onClose?: () => void;
+    /** The ×'s accessible name. */
+    closeLabel?: string;
+    /** Names the strip for screen readers (a region landmark). */
+    label?: string;
+}
+/**
+ * Banner — Figma [RDS] Blocks/Banner. The notice strip on top of the site: a short piece of news. An error or a
+ * status is the Alert. Below 640 of container width the text and the action stack (Figma: screen=mobile).
+ * Styles: banner.css.
+ */
+declare function Banner({ icon, highlight, message, action, onClose, closeLabel, label, className, ...rest }: BannerProps): react.JSX.Element | null;
+
+export { Banner, type BannerProps };

package/dist/components/banner.js

@@ -0,0 +1,66 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { focusAfter } from "./internal/focus-after.js";
+import { CloseIcon, MegaphoneIcon } from "./internal/icons.js";
+function Banner(_a) {
+  var _b = _a, {
+    icon = /* @__PURE__ */ jsx(MegaphoneIcon, {}),
+    highlight,
+    message,
+    action,
+    onClose,
+    closeLabel = "Fechar aviso",
+    label = "Aviso",
+    className
+  } = _b, rest = __objRest(_b, [
+    "icon",
+    "highlight",
+    "message",
+    "action",
+    "onClose",
+    "closeLabel",
+    "label",
+    "className"
+  ]);
+  const [open, setOpen] = useState(true);
+  const ref = useRef(null);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, role: "region", "aria-label": label }, rest), { className: ["rds-banner", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-banner__inner", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-banner__content", children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "rds-banner__icon", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "rds-banner__body", children: [
+        /* @__PURE__ */ jsxs("p", { className: "rds-banner__text", children: [
+          highlight && /* @__PURE__ */ jsx("strong", { className: "rds-banner__highlight", children: highlight }),
+          highlight && " ",
+          /* @__PURE__ */ jsx("span", { className: "rds-banner__message", children: message })
+        ] }),
+        action && /* @__PURE__ */ jsx("div", { className: "rds-banner__action", children: action })
+      ] })
+    ] }),
+    onClose && /* @__PURE__ */ jsx(Tooltip, { text: closeLabel, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+        label: closeLabel,
+        tone: "neutral",
+        variant: "ghost",
+        onClick: () => {
+          focusAfter(ref.current);
+          setOpen(false);
+          onClose();
+        }
+      }
+    ) })
+  ] }) }));
+}
+export {
+  Banner
+};

package/dist/components/benefits.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface BenefitsProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** A short label above the title (Figma: `eyebrow`). */
+    eyebrow?: ReactNode;
+    /** The block's title, an h2 that names the section (Figma: `title`). */
+    title: ReactNode;
+    description?: ReactNode;
+    /** 3 to 6 BenefitsItem (Figma: slot `items`): 3 per row, one column below 640 of container width. */
+    children: ReactNode;
+}
+/**
+ * Benefits — Figma [RDS] Blocks/Benefits. The benefits of a public page: label, title, a sentence and a grid of
+ * reasons to use the product. Adapts to the width of its container (Figma: `screen`). Styles: benefits.css.
+ */
+declare function Benefits({ eyebrow, title, description, children, className, ...rest }: BenefitsProps): react.JSX.Element;
+interface BenefitsItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    /** Decorative, in the 40 plate (Figma: `icon`). */
+    icon: ReactNode;
+    /** An h3 (Figma: `title`). */
+    title: ReactNode;
+    description: ReactNode;
+    /** An action ghost Button, a link through asChild (Figma: `showLink`). */
+    link?: ReactNode;
+}
+/** One card of the Benefits (Figma: .benefits/item). Only inside a Benefits. */
+declare function BenefitsItem({ icon, title, description, link, className, ...rest }: BenefitsItemProps): react.JSX.Element;
+
+export { Benefits, BenefitsItem, type BenefitsItemProps, type BenefitsProps };

package/dist/components/benefits.js

@@ -0,0 +1,32 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { BlockHeading } from "./internal/block.js";
+function Benefits(_a) {
+  var _b = _a, { eyebrow, title, description, children, className } = _b, rest = __objRest(_b, ["eyebrow", "title", "description", "children", "className"]);
+  const titleId = useId();
+  return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({ "aria-labelledby": titleId }, rest), { className: ["rds-block", "rds-benefits", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-block__inner", children: [
+    /* @__PURE__ */ jsx(BlockHeading, { eyebrow, title, description, titleId }),
+    /* @__PURE__ */ jsx("ul", { className: "rds-benefits__items", children })
+  ] }) }));
+}
+function BenefitsItem(_c) {
+  var _d = _c, { icon, title, description, link, className } = _d, rest = __objRest(_d, ["icon", "title", "description", "link", "className"]);
+  return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({}, rest), { className: ["rds-benefits__item", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-benefits__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "rds-benefits__text", children: [
+      /* @__PURE__ */ jsx("h3", { className: "rds-benefits__item-title", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "rds-benefits__item-description", children: description })
+    ] }),
+    link && /* @__PURE__ */ jsx("div", { className: "rds-benefits__link", children: link })
+  ] }));
+}
+export {
+  Benefits,
+  BenefitsItem
+};

package/dist/components/breadcrumb.d.ts

@@ -1,28 +1,35 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ComponentType, ReactNode } from 'react';
 
 interface BreadcrumbItem {
     label: string;
+    /** Where the step leads. The last step is the current page and never gets a link. */
     href?: string;
-    /** Ícone leading opcional (ex: Home no primeiro item). */
-    icon?: ReactNode;
 }
-interface BreadcrumbProps {
+type BreadcrumbTone = 'default' | 'inverse';
+type BreadcrumbLinkComponent = ComponentType<{
+    href: string;
+    className?: string;
+    children: ReactNode;
+}>;
+interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** The path, from the most general to the current page, the last one (Figma: the `items` slot). */
     items: BreadcrumbItem[];
-    /** Separador customizado. default = ChevronRight. */
-    separator?: ReactNode;
-    /** Trunca pra mostrar só primeiro + último com `…` no meio quando > este número. */
+    /**
+     * default on a light surface; inverse over colors/primary. Deprecated in the Figma since 27/09/2026: for the brand
+     * colour, put the Breadcrumb in a brand-mode scope and keep the default tone.
+     */
+    tone?: BreadcrumbTone;
+    /** More steps than this: the middle ones hide behind "…", a button that shows the whole path. */
     maxItems?: number;
-    className?: string;
-    /** Tag de link (default = `<a>`). Pra Next.js, passa `Link` daqui. */
-    linkAs?: React.ComponentType<{
-        href: string;
-        className?: string;
-        children: ReactNode;
-    }>;
+    /** The link element (default `<a>`). Pass a framework Link (Next's `Link`) to navigate on the client. */
+    linkAs?: BreadcrumbLinkComponent;
 }
-declare function Breadcrumb({ items, separator, maxItems, className, linkAs: LinkAs, }: BreadcrumbProps): react.JSX.Element;
-/** Helper pra primeiro item sempre ter ícone Home. */
-declare function homeItem(href?: string): BreadcrumbItem;
+/**
+ * Breadcrumb — Figma [RDS] Navigation/Breadcrumb. The path to the current page: a <nav aria-label="Caminho"> with an
+ * <ol>; the current step has aria-current="page" and no link; the arrows are hidden from screen readers.
+ * Styles: breadcrumb.css.
+ */
+declare function Breadcrumb({ items, tone, maxItems, linkAs: Link, className, ...rest }: BreadcrumbProps): react.JSX.Element;
 
-export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, homeItem };
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbLinkComponent, type BreadcrumbProps, type BreadcrumbTone };

package/dist/components/breadcrumb.js

@@ -1,62 +1,44 @@
-import "../chunk-ORMEWXMH.js";
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Home } from "lucide-react";
-function DefaultLink({ href, className, children }) {
+import { useRef, useState } from "react";
+import { ChevronRightIcon } from "./internal/icons.js";
+function Anchor({ href, className, children }) {
   return /* @__PURE__ */ jsx("a", { href, className, children });
 }
-function Breadcrumb({
-  items,
-  separator,
-  maxItems = 4,
-  className = "",
-  linkAs: LinkAs = DefaultLink
-}) {
-  const sep = separator != null ? separator : /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "text-fg-muted shrink-0" });
-  let displayed = items;
-  if (items.length > maxItems) {
-    displayed = [
-      items[0],
-      { ellipsis: true },
-      ...items.slice(items.length - 2)
-    ];
-  }
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1.5 text-label flex-wrap", children: displayed.map((entry, idx) => {
-    const isLast = idx === displayed.length - 1;
-    if ("ellipsis" in entry) {
-      return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-fg-muted px-1", "aria-hidden": true, children: "\u2026" }),
-        !isLast && sep
-      ] }, `ell-${idx}`);
-    }
-    const item = entry;
-    const labelEl = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-      item.icon,
-      item.label
-    ] });
-    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5", children: [
-      item.href && !isLast ? /* @__PURE__ */ jsx(
-        LinkAs,
-        {
-          href: item.href,
-          className: "text-fg-muted hover:text-fg-primary transition-colors",
-          children: labelEl
-        }
-      ) : /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: isLast ? "text-fg-primary font-medium" : "text-fg-muted",
-          "aria-current": isLast ? "page" : void 0,
-          children: labelEl
-        }
-      ),
-      !isLast && sep
-    ] }, idx);
-  }) }) });
-}
-function homeItem(href = "/") {
-  return { label: "In\xEDcio", href, icon: /* @__PURE__ */ jsx(Home, { size: 14 }) };
+function Breadcrumb(_a) {
+  var _b = _a, { items, tone = "default", maxItems = 4, linkAs: Link = Anchor, className } = _b, rest = __objRest(_b, ["items", "tone", "maxItems", "linkAs", "className"]);
+  const [expanded, setExpanded] = useState(false);
+  const list = useRef(null);
+  const collapse = !expanded && items.length > maxItems;
+  const shown = collapse ? [items[0], "ellipsis", ...items.slice(-2)] : items;
+  const expand = () => {
+    setExpanded(true);
+    requestAnimationFrame(() => {
+      var _a2, _b2, _c;
+      return (_c = (_b2 = (_a2 = list.current) == null ? void 0 : _a2.children[1]) == null ? void 0 : _b2.querySelector("a")) == null ? void 0 : _c.focus();
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "nav",
+    __spreadProps(__spreadValues({
+      "aria-label": "Caminho"
+    }, rest), {
+      className: ["rds-breadcrumb", tone === "inverse" && "rds-breadcrumb--inverse", className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx("ol", { ref: list, className: "rds-breadcrumb__list", children: shown.map((step, index) => {
+        const last = index === shown.length - 1;
+        return /* @__PURE__ */ jsxs("li", { className: "rds-breadcrumb__item", children: [
+          step === "ellipsis" ? /* @__PURE__ */ jsx("button", { type: "button", className: "rds-breadcrumb__link", "aria-label": "Mostrar o caminho completo", onClick: expand, children: "\u2026" }) : last ? /* @__PURE__ */ jsx("span", { className: "rds-breadcrumb__link rds-breadcrumb__link--current", "aria-current": "page", children: step.label }) : step.href ? /* @__PURE__ */ jsx(Link, { href: step.href, className: "rds-breadcrumb__link", children: step.label }) : /* @__PURE__ */ jsx("span", { className: "rds-breadcrumb__link", children: step.label }),
+          !last && /* @__PURE__ */ jsx("span", { className: "rds-breadcrumb__separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+        ] }, step === "ellipsis" ? "ellipsis" : `${index}-${step.label}`);
+      }) })
+    })
+  );
 }
 export {
-  Breadcrumb,
-  homeItem
+  Breadcrumb
 };

package/dist/components/browser.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface BrowserProps extends HTMLAttributes<HTMLDivElement> {
+    /** The page (Figma: slot `screen`): the useful area, 1278 × 746 at full size. It scrolls when taller. */
+    children?: ReactNode;
+    /** The address in the bar (Figma: `url`). */
+    url?: string;
+}
+/**
+ * Browser — Figma [RDS] External/Browser. A MOCKUP for flows, specs and showrooms: a desktop browser window,
+ * minimal in the Safari way (the window buttons, back and forward, the address in the centre). Up to 1280 wide; it
+ * narrows with its container and keeps the page's proportion. The toolbar is decorative; the page is live.
+ * Styles: browser.css.
+ */
+declare function Browser({ children, url, className, ...rest }: BrowserProps): react.JSX.Element;
+
+export { Browser, type BrowserProps };

package/dist/components/browser.js

@@ -0,0 +1,32 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LockIcon } from "./internal/icons.js";
+function Browser(_a) {
+  var _b = _a, { children, url = "rojao.studio", className } = _b, rest = __objRest(_b, ["children", "url", "className"]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-browser", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-browser__toolbar", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxs("span", { className: "rds-browser__controls", children: [
+        /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", {})
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "rds-browser__navigation", children: [
+        /* @__PURE__ */ jsx("span", { children: "\u2039" }),
+        /* @__PURE__ */ jsx("span", { children: "\u203A" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "rds-browser__center", children: /* @__PURE__ */ jsxs("span", { className: "rds-browser__address", children: [
+        /* @__PURE__ */ jsx(LockIcon, {}),
+        /* @__PURE__ */ jsx("span", { children: url })
+      ] }) }),
+      /* @__PURE__ */ jsx("span", { className: "rds-browser__actions", children: "+" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rds-browser__screen", children })
+  ] }));
+}
+export {
+  Browser
+};

package/dist/components/bubble.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type BubbleVariant = 'fill' | 'muted' | 'tinted' | 'outline' | 'ghost' | 'error' | 'typing';
+type BubbleAlign = 'start' | 'end';
+interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The surface (Figma: `style`). fill: the person writing, in the brand colour. muted or tinted: the one answering.
+     * outline: on a coloured background. ghost: a long answer from the assistant, no box. error: it was not sent.
+     * typing: the three dots of the one answering while they write; no text, no reactions.
+     */
+    variant?: BubbleVariant;
+    /** start: the one answering, the small corner bottom left; end: the person writing, bottom right. */
+    align?: BubbleAlign;
+    /**
+     * The message (Figma: `text`). Line breaks are kept. In `typing` it is what a screen reader hears instead of the
+     * dots, "digitando…" by default ("Ana está digitando…").
+     */
+    children?: ReactNode;
+    /** How many reacted (Figma: `showReactions` + `reactions`). The pill goes under the text; 0 hides it. */
+    reactions?: number;
+}
+/**
+ * Bubble — Figma [RDS] Chat/Bubble. The surface of a message: it grows up to 480 and wraps. Inside a Message,
+ * which adds the avatar, the name and the actions. Styles: bubble.css.
+ */
+declare function Bubble({ variant, align, children, reactions, className, ...rest }: BubbleProps): react.JSX.Element;
+
+export { Bubble, type BubbleAlign, type BubbleProps, type BubbleVariant };

package/dist/components/bubble.js

@@ -0,0 +1,33 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ThumbsUpIcon } from "./internal/icons.js";
+function Bubble(_a) {
+  var _b = _a, { variant = "muted", align = "start", children, reactions, className } = _b, rest = __objRest(_b, ["variant", "align", "children", "reactions", "className"]);
+  if (variant === "typing") {
+    return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ role: "status" }, rest), { className: ["rds-bubble", "rds-bubble--typing", `rds-bubble--${align}`, className].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsxs("span", { className: "rds-bubble__dots", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", {})
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: children != null ? children : "digitando\u2026" })
+    ] }));
+  }
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-bubble", `rds-bubble--${variant}`, `rds-bubble--${align}`, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("div", { className: "rds-bubble__text", children }),
+    reactions !== void 0 && reactions > 0 && /* @__PURE__ */ jsx("div", { className: "rds-bubble__reactions-row", children: /* @__PURE__ */ jsxs("span", { className: "rds-bubble__reactions", children: [
+      /* @__PURE__ */ jsxs("span", { className: "rds-bubble__reactions-count", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(ThumbsUpIcon, {}),
+        reactions
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: reactions === 1 ? "1 rea\xE7\xE3o" : `${reactions} rea\xE7\xF5es` })
+    ] }) })
+  ] }));
+}
+export {
+  Bubble
+};

package/dist/components/button-group.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
+interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** The sibling actions (Figma: slot `buttons`): Buttons of the same tone and variant, up to 4. */
+    children: ReactNode;
+    /** In a row or stacked (Figma: `orientation`). */
+    orientation?: ButtonGroupOrientation;
+    /** Required: what the actions act on ("Rascunho"). The group is announced with this name. */
+    'aria-label': string;
+}
+/**
+ * ButtonGroup — Figma [RDS] Actions/ButtonGroup. Buttons joined in one piece: inner corners square,
+ * borders overlapping by 1px. Each Button stays in the tab order. Styles: button-group.css.
+ */
+declare function ButtonGroup({ orientation, className, children, ...rest }: ButtonGroupProps): react.JSX.Element;
+
+export { ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps };

package/dist/components/button-group.js

@@ -0,0 +1,20 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+function ButtonGroup(_a) {
+  var _b = _a, { orientation = "horizontal", className, children } = _b, rest = __objRest(_b, ["orientation", "className", "children"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      role: "group",
+      className: ["rds-button-group", `rds-button-group--${orientation}`, className].filter(Boolean).join(" "),
+      children
+    })
+  );
+}
+export {
+  ButtonGroup
+};