@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/internal/use-listbox.js

@@ -0,0 +1,69 @@
+import "../../chunk-ORMEWXMH.js";
+import { useId, useState } from "react";
+function toggleValue(selected, value) {
+  return selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value];
+}
+function useListbox({ items, showing, selected, multiple, onOpen, onChoose }) {
+  const listId = useId();
+  const [active, setActive] = useState(-1);
+  const optionId = (index) => `${listId}-${index}`;
+  const isSelected = (value) => selected.includes(value);
+  const choose = (item) => {
+    if (item.disabled) return;
+    onChoose(item);
+  };
+  const move = (step) => {
+    var _a;
+    if (!items.length) return;
+    let next = active < 0 && step < 0 ? items.length : active;
+    for (let i = 0; i < items.length; i++) {
+      next = (next + step + items.length) % items.length;
+      if (!items[next].disabled) break;
+    }
+    onOpen();
+    setActive(next);
+    (_a = document.getElementById(optionId(next))) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === "Enter" && showing && active >= 0 && items[active]) {
+      event.preventDefault();
+      choose(items[active]);
+    } else {
+      return false;
+    }
+    return true;
+  };
+  const controlProps = {
+    "aria-expanded": showing,
+    "aria-controls": showing ? listId : void 0,
+    "aria-activedescendant": showing && active >= 0 ? optionId(active) : void 0
+  };
+  const listProps = {
+    id: listId,
+    role: "listbox",
+    "aria-multiselectable": multiple || void 0
+  };
+  const optionProps = (item, index) => ({
+    id: optionId(index),
+    role: "option",
+    "aria-selected": isSelected(item.value),
+    "aria-disabled": item.disabled || void 0,
+    "data-active": index === active ? "" : void 0,
+    // The focus stays in the field: pressing an option must not blur it.
+    onMouseDown: (event) => event.preventDefault(),
+    // mousemove, not mouseenter: a list that opens under a still cursor must not move the active option.
+    onMouseMove: () => !item.disabled && index !== active && setActive(index),
+    onClick: () => choose(item)
+  });
+  return { listId, active, setActive, move, choose, isSelected, onKeyDown, controlProps, listProps, optionProps };
+}
+export {
+  toggleValue,
+  useListbox
+};

package/dist/components/internal/whatsapp.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+
+type WhatsAppPlatform = 'android' | 'ios';
+declare const WhatsAppPlatformContext: react.Context<WhatsAppPlatform | undefined>;
+/** The platform: the prop, else the chat's, else android. */
+declare function useWhatsAppPlatform(platform: WhatsAppPlatform | undefined): WhatsAppPlatform;
+
+export { type WhatsAppPlatform, WhatsAppPlatformContext, useWhatsAppPlatform };

package/dist/components/internal/whatsapp.js

@@ -0,0 +1,12 @@
+import "../../chunk-ORMEWXMH.js";
+import { createContext, useContext } from "react";
+const WhatsAppPlatformContext = createContext(void 0);
+function useWhatsAppPlatform(platform) {
+  var _a;
+  const inherited = useContext(WhatsAppPlatformContext);
+  return (_a = platform != null ? platform : inherited) != null ? _a : "android";
+}
+export {
+  WhatsAppPlatformContext,
+  useWhatsAppPlatform
+};

package/dist/components/item.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type ItemVariant = 'default' | 'outline' | 'muted';
+type ItemSize = 'default' | 'sm';
+interface ItemProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The thing's name (Figma: `title`). */
+    title: ReactNode;
+    /** One supporting line (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    /** A Tile for a thing, an Avatar for a person (Figma: `showMedia` + `media`). */
+    media?: ReactNode;
+    /** One action or control on the right (Figma: `showAction` + `action`): a ghost Button, an IconButton, a Switch. */
+    action?: ReactNode;
+    /** default: loose in the list, a line between rows; outline: each row a block; muted: a background, no border. */
+    variant?: ItemVariant;
+    /** sm for dense lists: 14 and 12 text, 8 12 padding. */
+    size?: ItemSize;
+}
+/**
+ * Item — Figma [RDS] Content/Item. One row of a list: media, title, description and one action. Inside an ItemGroup
+ * it is a list item (<li>); alone, a <div>. Styles: item.css.
+ */
+declare function Item({ title, description, media, action, variant, size, className, ...rest }: ItemProps): react.JSX.Element;
+interface ItemGroupProps extends HTMLAttributes<HTMLUListElement> {
+    /** The Items. One variant for the whole list. */
+    children: ReactNode;
+}
+/** The list the Items go in (<ul>). default rows get a line between them; outline and muted rows a gap of 8. */
+declare function ItemGroup({ className, children, ...rest }: ItemGroupProps): react.JSX.Element;
+
+export { Item, ItemGroup, type ItemGroupProps, type ItemProps, type ItemSize, type ItemVariant };

package/dist/components/item.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const InGroup = createContext(false);
+function Item(_a) {
+  var _b = _a, { title, description, media, action, variant = "default", size = "default", className } = _b, rest = __objRest(_b, ["title", "description", "media", "action", "variant", "size", "className"]);
+  const Root = useContext(InGroup) ? "li" : "div";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-item", `rds-item--${variant}`, size === "sm" && "rds-item--sm", className].filter(Boolean).join(" "),
+      children: [
+        media && /* @__PURE__ */ jsx("span", { className: "rds-item__media", children: media }),
+        /* @__PURE__ */ jsxs("span", { className: "rds-item__content", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-item__title", children: title }),
+          description && /* @__PURE__ */ jsx("span", { className: "rds-item__description", children: description })
+        ] }),
+        action && /* @__PURE__ */ jsx("span", { className: "rds-item__action", children: action })
+      ]
+    })
+  );
+}
+function ItemGroup(_c) {
+  var _d = _c, { className, children } = _d, rest = __objRest(_d, ["className", "children"]);
+  return /* @__PURE__ */ jsx(InGroup.Provider, { value: true, children: /* @__PURE__ */ jsx("ul", __spreadProps(__spreadValues({}, rest), { className: ["rds-item-group", className].filter(Boolean).join(" "), children })) });
+}
+export {
+  Item,
+  ItemGroup
+};

package/dist/components/kbd.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** One key (Figma: `label`): Ctrl, Enter, ⌘. For a symbol, add aria-label with its name ("Command"). */
+    children: ReactNode;
+}
+/** Kbd — Figma [RDS] Content/Kbd. One keyboard key, for shortcuts. A combination is a KbdGroup. Styles: kbd.css. */
+declare function Kbd({ className, children, ...rest }: KbdProps): react.JSX.Element;
+interface KbdGroupProps extends HTMLAttributes<HTMLElement> {
+    /** The keys, one Kbd each, with "+" between them as text. */
+    children: ReactNode;
+}
+/** A key combination: <kbd><kbd>Ctrl</kbd>+<kbd>K</kbd></kbd>, the HTML way to write it. */
+declare function KbdGroup({ className, children, ...rest }: KbdGroupProps): react.JSX.Element;
+
+export { Kbd, KbdGroup, type KbdGroupProps, type KbdProps };

package/dist/components/kbd.js

@@ -0,0 +1,18 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+function Kbd(_a) {
+  var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx("kbd", __spreadProps(__spreadValues({}, rest), { className: ["rds-kbd", className].filter(Boolean).join(" "), children }));
+}
+function KbdGroup(_c) {
+  var _d = _c, { className, children } = _d, rest = __objRest(_d, ["className", "children"]);
+  return /* @__PURE__ */ jsx("kbd", __spreadProps(__spreadValues({}, rest), { className: ["rds-kbd-group", className].filter(Boolean).join(" "), children }));
+}
+export {
+  Kbd,
+  KbdGroup
+};

package/dist/components/listbox.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+interface ListboxProps extends Omit<ComponentPropsWithRef<'ul'>, 'children' | 'defaultValue' | 'onChange'> {
+    /** The ListboxOptions (Figma: the slot `options`). */
+    children: ReactNode;
+    /** Controlled: the chosen option's value. */
+    value?: string;
+    /** Uncontrolled: the option chosen at first. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * Listbox — Figma [RDS] Forms/Listbox. A list of options always on screen, one choice, marked with a check
+ * (role listbox). The list takes the focus: the arrows move the active option past disabled ones, Home and End
+ * go to the ends, Enter or Space choose. It is the list the Select and the Combobox open; on its own, for a
+ * short list that should stay visible (a panel, a sidebar filter). Name it with aria-label or aria-labelledby.
+ * Styles: internal/listbox.css.
+ */
+declare function Listbox({ children, value, defaultValue, onValueChange, className, onKeyDown, onFocus, ref, ...rest }: ListboxProps): react.JSX.Element;
+interface ListboxOptionProps {
+    /** The value it stands for. */
+    value: string;
+    /** The option text (Figma: `text`). */
+    children: ReactNode;
+    /** An icon before the text (Figma: `showIcon` + `icon`). Decorative. */
+    icon?: ReactNode;
+    /** Cannot be chosen now: skipped by the arrows, read as unavailable. */
+    disabled?: boolean;
+}
+/** One option of the Listbox (Figma: .listbox/option). The chosen one gets the tint and the check. */
+declare function ListboxOption({ value, children, icon, disabled }: ListboxOptionProps): react.JSX.Element;
+
+export { Listbox, ListboxOption, type ListboxOptionProps, type ListboxProps };

package/dist/components/listbox.js

@@ -0,0 +1,114 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { warnIfUnlabelled } from "./internal/field.js";
+import { OptionContent } from "./internal/option-content.js";
+const ListboxContext = createContext(null);
+function Listbox(_a) {
+  var _b = _a, { children, value, defaultValue, onValueChange, className, onKeyDown, onFocus, ref } = _b, rest = __objRest(_b, ["children", "value", "defaultValue", "onValueChange", "className", "onKeyDown", "onFocus", "ref"]);
+  warnIfUnlabelled("Listbox", void 0, rest["aria-label"], rest["aria-labelledby"]);
+  const [own, setOwn] = useState(defaultValue);
+  const selected = value !== void 0 ? value : own;
+  const [activeId, setActiveId] = useState(null);
+  const list = useRef(null);
+  const options = () => {
+    var _a2, _b2;
+    return Array.from((_b2 = (_a2 = list.current) == null ? void 0 : _a2.querySelectorAll('[role="option"]')) != null ? _b2 : []).filter(
+      (o) => o.getAttribute("aria-disabled") !== "true"
+    );
+  };
+  function choose(next) {
+    if (value === void 0) setOwn(next);
+    onValueChange == null ? void 0 : onValueChange(next);
+  }
+  function activate(option) {
+    if (!option) return;
+    setActiveId(option.id);
+    option.scrollIntoView({ block: "nearest" });
+  }
+  function keyDown(event) {
+    var _a2;
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    const all = options();
+    const index = all.findIndex((o) => o.id === activeId);
+    const moves = {
+      ArrowDown: () => all[Math.min(index + 1, all.length - 1)],
+      ArrowUp: () => all[Math.max(index - 1, 0)],
+      Home: () => all[0],
+      End: () => all[all.length - 1]
+    };
+    if (moves[event.key]) {
+      event.preventDefault();
+      activate(moves[event.key]());
+    } else if ((event.key === "Enter" || event.key === " ") && index >= 0) {
+      event.preventDefault();
+      choose((_a2 = all[index].dataset.value) != null ? _a2 : "");
+    }
+  }
+  function setRef(node) {
+    list.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }
+  return /* @__PURE__ */ jsx(ListboxContext.Provider, { value: { selected, activeId, setActiveId, choose }, children: /* @__PURE__ */ jsx(
+    "ul",
+    __spreadProps(__spreadValues({
+      tabIndex: 0
+    }, rest), {
+      ref: setRef,
+      role: "listbox",
+      "aria-activedescendant": activeId != null ? activeId : void 0,
+      className: ["rds-listbox", className].filter(Boolean).join(" "),
+      onKeyDown: keyDown,
+      onFocus: (event) => {
+        var _a2;
+        onFocus == null ? void 0 : onFocus(event);
+        if (activeId && document.getElementById(activeId)) return;
+        const all = options();
+        activate((_a2 = all.find((o) => o.dataset.value === selected)) != null ? _a2 : all[0]);
+      },
+      children
+    })
+  ) });
+}
+function ListboxOption({ value, children, icon, disabled }) {
+  const context = useContext(ListboxContext);
+  const id = useId();
+  if (!context) throw new Error("[@rojaostudio/ds] ListboxOption goes inside a Listbox.");
+  const selected = context.selected === value;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      id,
+      role: "option",
+      "data-value": value,
+      "aria-selected": selected,
+      "aria-disabled": disabled || void 0,
+      "data-active": context.activeId === id ? "" : void 0,
+      className: "rds-listbox__option",
+      onMouseMove: () => !disabled && context.activeId !== id && context.setActiveId(id),
+      onClick: () => {
+        if (disabled) return;
+        context.setActiveId(id);
+        context.choose(value);
+      },
+      children: /* @__PURE__ */ jsx(OptionContent, { icon, selected, children })
+    }
+  );
+}
+export {
+  Listbox,
+  ListboxOption
+};

package/dist/components/marker.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type MarkerVariant = 'default' | 'border' | 'separator';
+interface MarkerProps extends HTMLAttributes<HTMLDivElement> {
+    /** default: icon and text; border: with a line under it, to split rows; separator: the text between two lines. */
+    variant?: MarkerVariant;
+    /** The assistant's status, a system note or a date (Figma: `text`). */
+    children: ReactNode;
+    /**
+     * The icon before the text (Figma: `showIcon` + `icon`), decorative. By default the assistant's sparkles; `null`
+     * hides it. Not shown in `separator`.
+     */
+    icon?: ReactNode;
+    /** The status is in progress: a Spinner in place of the icon, and the text is announced (role="status"). */
+    loading?: boolean;
+}
+/**
+ * Marker — Figma [RDS] Chat/Marker. A line inside the conversation that is not a message: the assistant's status
+ * ("Buscando…"), a system note or a date between two lines. Styles: marker.css.
+ */
+declare function Marker({ variant, children, icon, loading, className, ...rest }: MarkerProps): react.JSX.Element;
+
+export { Marker, type MarkerProps, type MarkerVariant };

package/dist/components/marker.js

@@ -0,0 +1,28 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SparklesIcon } from "./internal/icons.js";
+import { Spinner } from "./spinner.js";
+function Marker(_a) {
+  var _b = _a, { variant = "default", children, icon = /* @__PURE__ */ jsx(SparklesIcon, {}), loading, className } = _b, rest = __objRest(_b, ["variant", "children", "icon", "loading", "className"]);
+  const classes = ["rds-marker", `rds-marker--${variant}`, className].filter(Boolean).join(" ");
+  const role = loading ? "status" : void 0;
+  if (variant === "separator") {
+    return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ role }, rest), { className: classes, children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-marker__line", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { className: "rds-marker__text", children }),
+      /* @__PURE__ */ jsx("span", { className: "rds-marker__line", "aria-hidden": "true" })
+    ] }));
+  }
+  const shown = loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : icon;
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ role }, rest), { className: classes, children: [
+    shown && /* @__PURE__ */ jsx("span", { className: "rds-marker__icon", "aria-hidden": "true", children: shown }),
+    /* @__PURE__ */ jsx("span", { className: "rds-marker__text", children })
+  ] }));
+}
+export {
+  Marker
+};

package/dist/components/media-tile.d.ts

@@ -1,24 +1,27 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-/**
- * MediaTile — miniatura de mídia (produto, imagem) com fallback e label opcional.
- * Substitui o `<div className="rounded-xl border overflow-hidden">` + `<img>`/fallback
- * reimplementado em listas/grids. Agnóstico de framework: usa `<img>` nativo
- * (o consumidor que quiser next/image passa via `image` slot).
- */
-interface MediaTileProps {
+type MediaTileAspect = 'square' | 'video';
+interface MediaTileProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** The image (Figma: `media=image`). Without it, or when it fails to load, the tile shows the fallback. */
     src?: string | null;
+    /** The image's text alternative. Empty when the label already says what it is. */
     alt?: string;
-    /** Conteúdo de imagem custom (ex: next/image). Tem precedência sobre `src`. */
+    /** Your own image element (next/image, a <picture>). Takes precedence over `src`. */
     image?: ReactNode;
+    /** The name under the image, cut at two lines (Figma: `showLabel` + `label`). */
     label?: ReactNode;
-    /** Se passado, o tile vira um link de navegação. */
+    /** Makes the tile a link; only then it has the hover and focus outline (Figma: `state=hover`). */
     href?: string;
+    /** What shows when the image is missing (Figma: `media=fallback`). Defaults to the image-off icon. */
     fallback?: ReactNode;
-    aspect?: 'square' | 'video';
-    className?: string;
+    /** square (1:1) or video (16:9) (Figma: `aspect`). */
+    aspect?: MediaTileAspect;
 }
-declare function MediaTile({ src, alt, image, label, href, fallback, aspect, className }: MediaTileProps): react.JSX.Element;
+/**
+ * MediaTile — Figma [RDS] Content/MediaTile. A thumbnail of a product or image with an optional label, for lists
+ * and grids. A link when it has `href`, otherwise a plain box. Styles: media-tile.css.
+ */
+declare function MediaTile({ src, alt, image, label, href, fallback, aspect, className, ...rest }: MediaTileProps): react.JSX.Element;
 
-export { MediaTile, type MediaTileProps };
+export { MediaTile, type MediaTileAspect, type MediaTileProps };

package/dist/components/media-tile.js

@@ -1,27 +1,22 @@
-import "../chunk-ORMEWXMH.js";
-import { ImageOff } from "lucide-react";
-const ASPECT = {
-  square: "aspect-square",
-  video: "aspect-video"
-};
-function MediaTile({ src, alt = "", image, label, href, fallback, aspect = "square", className = "" }) {
-  const Wrapper = href ? "a" : "div";
-  return /* @__PURE__ */ React.createElement(
-    Wrapper,
-    {
-      href,
-      className: [
-        "group flex flex-col rounded-(--radius-card) overflow-hidden border border-stroke-default bg-surface-default transition-all",
-        href ? "hover:shadow-md hover:ring-2 hover:ring-stroke-focus cursor-pointer" : "",
-        className
-      ].filter(Boolean).join(" ")
-    },
-    /* @__PURE__ */ React.createElement("div", { className: `relative w-full ${ASPECT[aspect]} bg-surface-raised overflow-hidden` }, image ? image : src ? (
-      // eslint-disable-next-line @next/next/no-img-element
-      /* @__PURE__ */ React.createElement("img", { src, alt, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" })
-    ) : /* @__PURE__ */ React.createElement("div", { className: "w-full h-full flex items-center justify-center text-fg-disabled" }, fallback != null ? fallback : /* @__PURE__ */ React.createElement(ImageOff, { className: "size-5", strokeWidth: 1.5 }))),
-    label != null && /* @__PURE__ */ React.createElement("div", { className: "p-1.5" }, /* @__PURE__ */ React.createElement("p", { className: "text-[11px] font-medium text-fg-primary line-clamp-2 leading-snug" }, label))
-  );
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ImageOffIcon } from "./internal/icons.js";
+function MediaTile(_a) {
+  var _b = _a, { src, alt = "", image, label, href, fallback, aspect = "square", className } = _b, rest = __objRest(_b, ["src", "alt", "image", "label", "href", "fallback", "aspect", "className"]);
+  const [failed, setFailed] = useState(null);
+  const showImage = !image && src && failed !== src;
+  const classes = ["rds-media-tile", `rds-media-tile--${aspect}`, href && "rds-media-tile--link", className].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-media-tile__media", children: image != null ? image : showImage ? /* @__PURE__ */ jsx("img", { src, alt, onError: () => setFailed(src) }) : /* @__PURE__ */ jsx("span", { className: "rds-media-tile__fallback", "aria-hidden": fallback ? void 0 : true, children: fallback != null ? fallback : /* @__PURE__ */ jsx(ImageOffIcon, {}) }) }),
+    label != null && label !== "" && /* @__PURE__ */ jsx("span", { className: "rds-media-tile__label", children: label })
+  ] });
+  return href ? /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, rest), { href, className: classes, children: content })) : /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), { className: classes, children: content }));
 }
 export {
   MediaTile

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface MessageScrollerProps extends HTMLAttributes<HTMLDivElement> {
+    /** The Messages and Markers, from the oldest to the newest (Figma: slot `content`). */
+    children: ReactNode;
+    /** Names the conversation for screen readers. */
+    label?: string;
+    /** The accessible name of the "go to the end" button. */
+    scrollButtonLabel?: string;
+}
+/**
+ * MessageScroller — Figma [RDS] Chat/MessageScroller. The frame that scrolls the conversation, held to the bottom
+ * (role="log", so screen readers hear what arrives). A new item keeps it at the end; if the person scrolled up to
+ * read, it stays put and the "go to the end" button appears by itself (Figma: `showButton` only simulates that).
+ * It fills its parent's height: size the parent to the chat area. Styles: message-scroller.css.
+ */
+declare function MessageScroller({ children, label, scrollButtonLabel, className, onScroll, ...rest }: MessageScrollerProps): react.JSX.Element;
+
+export { MessageScroller, type MessageScrollerProps };

package/dist/components/message-scroller.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { ArrowDownIcon } from "./internal/icons.js";
+const NEAR_END = 24;
+const reducedMotion = () => {
+  var _a;
+  return typeof window !== "undefined" && ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+};
+function MessageScroller(_a) {
+  var _b = _a, {
+    children,
+    label = "Conversa",
+    scrollButtonLabel = "Ir para a mensagem mais nova",
+    className,
+    onScroll
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "label",
+    "scrollButtonLabel",
+    "className",
+    "onScroll"
+  ]);
+  const ref = useRef(null);
+  const atEnd = useRef(true);
+  const goingToEnd = useRef(false);
+  const [showButton, setShowButton] = useState(false);
+  const toEnd = (behavior = "auto") => {
+    const box = ref.current;
+    if (box) box.scrollTo({ top: box.scrollHeight, behavior });
+  };
+  useLayoutEffect(() => {
+    if (atEnd.current) toEnd();
+  }, [children]);
+  useEffect(() => toEnd(), []);
+  useEffect(() => {
+    const box = ref.current;
+    if (!box) return;
+    const isAtEnd = () => box.scrollHeight - box.scrollTop - box.clientHeight <= NEAR_END;
+    const settle = () => {
+      atEnd.current = isAtEnd();
+      if (goingToEnd.current && !atEnd.current) {
+        const top = box.scrollTop;
+        requestAnimationFrame(
+          () => requestAnimationFrame(() => {
+            if (!goingToEnd.current || box.scrollTop !== top) return;
+            goingToEnd.current = false;
+            setShowButton(!isAtEnd());
+          })
+        );
+        return;
+      }
+      goingToEnd.current = false;
+      setShowButton(!atEnd.current);
+    };
+    box.addEventListener("scrollend", settle);
+    return () => box.removeEventListener("scrollend", settle);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-scroller", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "log",
+        "aria-label": label,
+        tabIndex: 0
+      }, rest), {
+        className: "rds-scroller__viewport",
+        onScroll: (event) => {
+          const box = event.currentTarget;
+          atEnd.current = box.scrollHeight - box.scrollTop - box.clientHeight <= NEAR_END;
+          if (atEnd.current) goingToEnd.current = false;
+          if (!goingToEnd.current) setShowButton(!atEnd.current);
+          onScroll == null ? void 0 : onScroll(event);
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "rds-scroller__content", children })
+      })
+    ),
+    showButton && /* @__PURE__ */ jsx(Tooltip, { text: scrollButtonLabel, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "rds-scroller__to-end",
+        icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+        label: scrollButtonLabel,
+        tone: "neutral",
+        variant: "outline",
+        onClick: () => {
+          var _a2;
+          (_a2 = ref.current) == null ? void 0 : _a2.focus({ preventScroll: true });
+          atEnd.current = true;
+          goingToEnd.current = true;
+          setShowButton(false);
+          toEnd(reducedMotion() ? "auto" : "smooth");
+        }
+      }
+    ) })
+  ] });
+}
+export {
+  MessageScroller
+};