@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/summary-bar.d.ts

@@ -1,31 +1,31 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { StatTone } from './stat.js';
 
-type SummaryBarTone = 'default' | 'positive' | 'negative' | 'warning' | 'muted';
+/** @deprecated Use StatTone. */
+type SummaryBarTone = StatTone;
+/** @deprecated Pass Stats as children. */
 interface SummaryBarItem {
-    /** Short label, e.g. "Valor em estoque" */
     label: string;
-    /** Pre-formatted value (currency, count, etc.) — formatting is the consumer's job */
     value: string;
-    /** Tints the value. Counters use warning/negative; money uses default/positive. */
-    tone?: SummaryBarTone;
-    /** Optional leading icon shown before the value */
+    tone?: StatTone;
+    /** Ignored: the Stat has no icon in the Figma [RDS]. */
     icon?: ReactNode;
 }
-interface SummaryBarProps {
-    items: SummaryBarItem[];
-    className?: string;
+/** row: the wide screen, the cells share the width (many scroll sideways). grid: the phone, two columns. */
+type SummaryBarLayout = 'row' | 'grid';
+interface SummaryBarProps extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    /** The Stats (Figma: slot `items`). Inside the bar a Stat is a cell (framed=false) by default. */
+    children?: ReactNode;
+    /** Figma: `layout`. In grid, the last cell takes the whole line when the count is odd. */
+    layout?: SummaryBarLayout;
+    /** @deprecated Pass Stats as children. Kept so 1.x code compiles; the icon is dropped. */
+    items?: SummaryBarItem[];
 }
 /**
- * Strip of aggregated metrics shown above a list (stock summary, finance totals,
- * report KPIs). Mobile: grid 2-colunas (não estoura nem esconde scroll). sm+: linha
- * flex com scroll horizontal se precisar. Contagem ímpar → último item ocupa a linha
- * inteira no mobile (sem célula vazia). Valores são pré-formatados pelo consumidor.
- *
- * Truque do divisor: no mobile, o fundo do CONTAINER é a cor do divisor e o gap-px
- * revela essa cor entre as células (cada célula tem o fundo normal) → linhas de grade
- * limpas. No sm+, o fundo volta ao normal e os divisores são border-left por item.
+ * SummaryBar — Figma [RDS] Content/SummaryBar. The strip of aggregated numbers above a list (stock, finance,
+ * report): Stats 1px apart, the gap showing summary-bar/divider. A list: each Stat is an item. Styles: summary-bar.css.
  */
-declare function SummaryBar({ items, className }: SummaryBarProps): react.JSX.Element;
+declare function SummaryBar({ children, layout, items, className, ...rest }: SummaryBarProps): react.JSX.Element;
 
-export { SummaryBar, type SummaryBarItem, type SummaryBarProps, type SummaryBarTone };
+export { SummaryBar, type SummaryBarItem, type SummaryBarLayout, type SummaryBarProps, type SummaryBarTone };

package/dist/components/summary-bar.js

@@ -1,58 +1,16 @@
-import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-const TONE_CLASS = {
-  default: "[color:var(--summary-bar-value)]",
-  positive: "[color:var(--summary-bar-value-positive)]",
-  negative: "[color:var(--summary-bar-value-negative)]",
-  warning: "[color:var(--summary-bar-value-warning)]",
-  muted: "[color:var(--summary-bar-value-muted)]"
-};
-function SummaryBar({ items, className }) {
-  const odd = items.length % 2 === 1;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: [
-        "grid grid-cols-2 gap-px overflow-hidden rounded-(--radius-card) border",
-        "sm:flex sm:gap-0 sm:overflow-x-auto sm:[scrollbar-width:none]",
-        "[background:var(--summary-bar-divider)] sm:[background:var(--summary-bar-bg)]",
-        "[border-color:var(--summary-bar-border)]",
-        className != null ? className : ""
-      ].join(" "),
-      children: items.map((item, i) => {
-        var _a;
-        const spanFull = odd && i === items.length - 1;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: [
-              "flex flex-1 flex-col gap-1.5 px-4 py-3 [background:var(--summary-bar-bg)]",
-              "min-w-0 sm:min-w-[7.5rem] sm:whitespace-nowrap",
-              spanFull ? "col-span-2 sm:col-span-1" : "",
-              i > 0 ? "sm:[border-left:1px_solid_var(--summary-bar-divider)]" : ""
-            ].join(" "),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-wide [color:var(--summary-bar-label)]", children: item.label }),
-              /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: [
-                    "flex items-center gap-1.5 text-heading-sm font-semibold leading-none tabular-nums",
-                    TONE_CLASS[(_a = item.tone) != null ? _a : "default"]
-                  ].join(" "),
-                  children: [
-                    item.icon,
-                    item.value
-                  ]
-                }
-              )
-            ]
-          },
-          i
-        );
-      })
-    }
-  );
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { Stat, StatFramedDefault } from "./stat.js";
+function SummaryBar(_a) {
+  var _b = _a, { children, layout = "row", items, className } = _b, rest = __objRest(_b, ["children", "layout", "items", "className"]);
+  const cells = items ? items.map((item, i) => /* @__PURE__ */ jsx(Stat, { label: item.label, value: item.value, tone: item.tone }, i)) : Children.toArray(children);
+  return /* @__PURE__ */ jsx(StatFramedDefault.Provider, { value: false, children: /* @__PURE__ */ jsx("ul", __spreadProps(__spreadValues({}, rest), { className: ["rds-summary-bar", `rds-summary-bar--${layout}`, className].filter(Boolean).join(" "), children: cells.map((cell, i) => /* @__PURE__ */ jsx("li", { className: "rds-summary-bar__cell", children: cell }, i)) })) });
 }
 export {
   SummaryBar

package/dist/components/switch.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'children' | 'role' | 'size'> {
+    /** The setting it turns on (Figma: `showLabel` + `label`). It never changes with the state. Without it, pass aria-label. */
+    children?: ReactNode;
+    /** A line under the label (Figma: `showHint` + `hint`), tied by aria-describedby. */
+    hint?: ReactNode;
+    /** Called with the new state on every change (Figma: `checked`; `checked` + `onCheckedChange` to control it). */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * Switch — Figma [RDS] Forms/Switch. Turns on and off a setting that applies right away, with no save
+ * button (so no error and no required). Native <input type="checkbox" role="switch">: Space toggles it.
+ * Not the Toggle, which turns on a mode or a format. If the setting fails, turn it back and say so.
+ * Styles: switch.css and internal/choice.css.
+ */
+declare function Switch({ children, hint, disabled, id, className, style, onChange, onCheckedChange, ...input }: SwitchProps): react.JSX.Element;
+
+export { Switch, type SwitchProps };

package/dist/components/switch.js

@@ -0,0 +1,46 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChoiceRow } from "./internal/choice.js";
+import { warnIfUnlabelled } from "./internal/field.js";
+function Switch(_a) {
+  var _b = _a, { children, hint, disabled, id, className, style, onChange, onCheckedChange } = _b, input = __objRest(_b, ["children", "hint", "disabled", "id", "className", "style", "onChange", "onCheckedChange"]);
+  warnIfUnlabelled("Switch", children, input["aria-label"], input["aria-labelledby"]);
+  function change(event) {
+    onChange == null ? void 0 : onChange(event);
+    onCheckedChange == null ? void 0 : onCheckedChange(event.target.checked);
+  }
+  return /* @__PURE__ */ jsx(
+    ChoiceRow,
+    {
+      kind: "rds-switch",
+      id,
+      label: children,
+      hint,
+      disabled,
+      className,
+      style,
+      control: ({ id: controlId, describedBy }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, input), {
+            id: controlId,
+            type: "checkbox",
+            role: "switch",
+            disabled,
+            "aria-describedby": [describedBy, input["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+            onChange: change
+          })
+        ),
+        /* @__PURE__ */ jsx("span", { className: "rds-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "rds-switch__thumb" }) })
+      ] })
+    }
+  );
+}
+export {
+  Switch
+};

package/dist/components/table.d.ts

@@ -1,23 +1,62 @@
 import * as react from 'react';
+import { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 
-type Align = 'left' | 'right' | 'center';
-declare function Table({ className, children, ...props }: React.HTMLAttributes<HTMLTableElement>): react.JSX.Element;
-declare function TableHead({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
-declare function TableBody({ className, children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
-interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
-    header?: boolean;
-    noHover?: boolean;
+type TableAlign = 'start' | 'end';
+type TableSort = 'ascending' | 'descending' | 'none';
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** What the table shows. Required: it names the table (and its scroll area) for screen readers. */
+    caption: ReactNode;
+    /** Show the caption on screen. By default it is only for screen readers. */
+    showCaption?: boolean;
+    /** TableHeader and TableBody (Figma: the `rows` slot). */
+    children: ReactNode;
+    /** loading marks the table busy. Outside default, put a TableStatus in the body. */
+    status?: TableStatus;
 }
-declare function TableRow({ header, noHover, className, children, onClick, ...props }: TableRowProps): react.JSX.Element;
-interface ThProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
-    align?: Align;
+/**
+ * Table — Figma [RDS] Content/Table. Data to compare across rows: text on the left, numbers on the right. On a narrow
+ * screen it scrolls sideways inside its border (a focusable, named region). Styles: table.css.
+ */
+declare function Table({ caption, showCaption, status, className, children, ...rest }: TableProps): react.JSX.Element;
+declare function TableHeader(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableBody(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TableRow(props: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
+interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** start for text columns, end for number columns. Same as the column's cells. */
+    align?: TableAlign;
+    /** A column that sorts: its current order. The header becomes a button, and aria-sort says the order. */
+    sort?: TableSort;
+    /** Called when the person asks to sort by this column. Required with `sort`. */
+    onSort?: () => void;
 }
-declare function Th({ align, className, children, ...props }: ThProps): react.JSX.Element;
-interface TdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-    align?: Align;
-    muted?: boolean;
-    bold?: boolean;
+/** A column header (Figma: .table/cell type=header). */
+declare function TableHead({ align, sort, onSort, className, children, ...rest }: TableHeadProps): react.JSX.Element;
+interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** start for text, end for numbers (tabular figures). */
+    align?: TableAlign;
+    /** body for text; slot when the cell holds a component (Status, Badge, Avatar, Button): less padding. */
+    type?: 'body' | 'slot';
 }
-declare function Td({ align, muted, bold, className, children, ...props }: TdProps): react.JSX.Element;
+/** A body cell (Figma: .table/cell type=body or slot). */
+declare function TableCell({ align, type, className, ...rest }: TableCellProps): react.JSX.Element;
+interface TableStatusProps {
+    /** loading: 3 rows of Skeleton; empty, noResults and error: an Empty across the columns. */
+    status: Exclude<TableStatus, 'default'>;
+    /** How many columns the table has, so the state spans all of them. */
+    columns: number;
+    /** Which columns hold numbers (aligned to the end), for the loading rows. */
+    numericColumns?: number[];
+    /** The Empty's title, in the words of the screen ("Nenhum pedido ainda"). */
+    title?: ReactNode;
+    description?: ReactNode;
+    /** The Empty title's level, one below the page's last heading. */
+    titleAs?: 'h2' | 'h3' | 'h4';
+    /** The way out, an outline Button: create, clear the search, try again. */
+    action?: ReactNode;
+}
+/** The data's life cycle (Figma: `status`). */
+type TableStatus = 'default' | 'loading' | 'empty' | 'noResults' | 'error';
+/** The table's body when there is no data to show yet: loading, empty, no results or error. Inside TableBody. */
+declare function TableStatus({ status, columns, numericColumns, title, titleAs, description, action }: TableStatusProps): react.JSX.Element;
 
-export { Table, TableBody, TableHead, TableRow, type TableRowProps, Td, type TdProps, Th, type ThProps };
+export { Table, type TableAlign, TableBody, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableSort, TableStatus, type TableStatusProps };

package/dist/components/table.js

@@ -1,85 +1,86 @@
+"use client";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { jsx } from "react/jsx-runtime";
-const ALIGN = { left: "text-left", right: "text-right", center: "text-center" };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Empty } from "./empty.js";
+import { Skeleton } from "./skeleton.js";
+import { AlertIcon, ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, SearchXIcon, TableIcon } from "./internal/icons.js";
 function Table(_a) {
-  var _b = _a, { className = "", children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx("table", __spreadProps(__spreadValues({ className: ["w-full text-label", className].join(" ") }, props), { children }));
+  var _b = _a, { caption, showCaption, status = "default", className, children } = _b, rest = __objRest(_b, ["caption", "showCaption", "status", "className", "children"]);
+  const captionId = useId();
+  return /* @__PURE__ */ jsx("div", { className: ["rds-table", className].filter(Boolean).join(" "), role: "region", "aria-labelledby": captionId, tabIndex: 0, children: /* @__PURE__ */ jsxs("table", __spreadProps(__spreadValues({}, rest), { className: "rds-table__table", "aria-busy": status === "loading" || void 0, children: [
+    /* @__PURE__ */ jsx("caption", { id: captionId, className: showCaption ? "rds-table__caption" : "rds-visually-hidden", children: caption }),
+    children
+  ] })) });
 }
-function TableHead(_c) {
-  var _d = _c, { className = "", children } = _d, props = __objRest(_d, ["className", "children"]);
-  return /* @__PURE__ */ jsx("thead", __spreadProps(__spreadValues({ className: className || void 0 }, props), { children }));
+function TableHeader(props) {
+  return /* @__PURE__ */ jsx("thead", __spreadValues({}, props));
 }
-function TableBody(_e) {
-  var _f = _e, { className = "", children } = _f, props = __objRest(_f, ["className", "children"]);
-  return /* @__PURE__ */ jsx("tbody", __spreadProps(__spreadValues({ className: ["divide-y divide-stroke-default", className].join(" ") }, props), { children }));
+function TableBody(props) {
+  return /* @__PURE__ */ jsx("tbody", __spreadValues({}, props));
 }
-function TableRow(_g) {
-  var _h = _g, { header, noHover, className = "", children, onClick } = _h, props = __objRest(_h, ["header", "noHover", "className", "children", "onClick"]);
-  const base = header ? "border-b border-stroke-default" : [
-    !noHover && "hover:bg-surface-raised transition-colors",
-    onClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-stroke-focus"
-  ].filter(Boolean).join(" ");
-  const interactiveProps = !header && onClick ? {
-    role: "button",
-    tabIndex: 0,
-    onKeyDown: (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        onClick(e);
-      }
-    }
-  } : {};
-  return /* @__PURE__ */ jsx(
-    "tr",
-    __spreadProps(__spreadValues(__spreadValues({
-      className: [base, className].filter(Boolean).join(" "),
-      onClick
-    }, interactiveProps), props), {
-      children
-    })
-  );
+function TableRow(props) {
+  return /* @__PURE__ */ jsx("tr", __spreadValues({}, props));
 }
-function Th(_i) {
-  var _j = _i, { align = "left", className = "", children } = _j, props = __objRest(_j, ["align", "className", "children"]);
+function TableHead(_c) {
+  var _d = _c, { align = "start", sort, onSort, className, children } = _d, rest = __objRest(_d, ["align", "sort", "onSort", "className", "children"]);
+  const SortIcon = sort === "ascending" ? ArrowUpIcon : sort === "descending" ? ArrowDownIcon : ArrowUpDownIcon;
   return /* @__PURE__ */ jsx(
     "th",
     __spreadProps(__spreadValues({
-      className: [
-        "px-5 py-3 text-caption font-semibold text-fg-muted uppercase tracking-wide whitespace-nowrap",
-        ALIGN[align],
-        className
-      ].filter(Boolean).join(" ")
-    }, props), {
-      children
+      scope: "col",
+      "aria-sort": sort
+    }, rest), {
+      className: ["rds-table__head", `rds-table__cell--${align}`, className].filter(Boolean).join(" "),
+      children: sort ? /* @__PURE__ */ jsxs("button", { type: "button", className: "rds-table__sort", onClick: onSort, children: [
+        children,
+        /* @__PURE__ */ jsx("span", { className: "rds-table__sort-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(SortIcon, {}) })
+      ] }) : children
     })
   );
 }
-function Td(_k) {
-  var _l = _k, { align = "left", muted, bold, className = "", children } = _l, props = __objRest(_l, ["align", "muted", "bold", "className", "children"]);
+function TableCell(_e) {
+  var _f = _e, { align = "start", type = "body", className } = _f, rest = __objRest(_f, ["align", "type", "className"]);
   return /* @__PURE__ */ jsx(
     "td",
-    __spreadProps(__spreadValues({
-      className: [
-        "px-5 py-3",
-        ALIGN[align],
-        muted ? "text-fg-muted" : "text-fg-primary",
-        bold ? "font-medium" : "",
-        className
-      ].filter(Boolean).join(" ")
-    }, props), {
-      children
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-table__cell", `rds-table__cell--${align}`, type === "slot" && "rds-table__cell--slot", className].filter(Boolean).join(" ")
     })
   );
 }
+const STATUS_COPY = {
+  empty: { icon: /* @__PURE__ */ jsx(TableIcon, {}), title: "Nada por aqui ainda", description: "Quando houver dados, eles aparecem nesta tabela." },
+  noResults: { icon: /* @__PURE__ */ jsx(SearchXIcon, {}), title: "Nada encontrado", description: "Tente outro termo ou limpe a busca." },
+  error: { icon: /* @__PURE__ */ jsx(AlertIcon, {}), title: "N\xE3o deu para carregar", description: "Verifique a conex\xE3o e tente de novo." }
+};
+function TableStatus({ status, columns, numericColumns = [], title, titleAs, description, action }) {
+  if (status === "loading") {
+    return /* @__PURE__ */ jsx(Fragment, { children: [0, 1, 2].map((row) => /* @__PURE__ */ jsx("tr", { children: Array.from({ length: columns }, (_, col) => /* @__PURE__ */ jsx(TableCell, { type: "slot", align: numericColumns.includes(col) ? "end" : "start", children: /* @__PURE__ */ jsx(Skeleton, { width: numericColumns.includes(col) ? 48 : "70%" }) }, col)) }, row)) });
+  }
+  const copy = STATUS_COPY[status];
+  return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "rds-table__status", colSpan: columns, children: /* @__PURE__ */ jsx(
+    Empty,
+    {
+      icon: copy.icon,
+      tone: status === "error" ? "danger" : "neutral",
+      title: title != null ? title : copy.title,
+      titleAs,
+      description: description != null ? description : copy.description,
+      action,
+      role: status === "error" ? "alert" : void 0
+    }
+  ) }) });
+}
 export {
   Table,
   TableBody,
+  TableCell,
   TableHead,
+  TableHeader,
   TableRow,
-  Td,
-  Th
+  TableStatus
 };

package/dist/components/tabs.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TabsProps {
+    /** The TabsList and a TabsContent per tab. */
+    children: ReactNode;
+    /** The open tab (controlled). With links (asChild), the value of the current route. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * automatic (default): the arrows open the tab they land on. manual: the arrows only move the focus, Enter or
+     * Space opens. Use manual when the tabs are links (asChild), so the arrows do not change the selection without
+     * navigating.
+     */
+    activationMode?: 'automatic' | 'manual';
+    className?: string;
+}
+/**
+ * Tabs — Figma [RDS] Navigation/Tabs. Views of the same place, one at a time (Radix Tabs): role="tablist",
+ * the arrows, Home and End move between tabs, aria-selected marks the open one. Styles: tabs.css.
+ */
+declare function Tabs({ className, activationMode, ...props }: TabsProps): react.JSX.Element;
+interface TabsListProps {
+    /** What the tabs switch ("Pedidos"). The tablist's accessible name. */
+    'aria-label': string;
+    /** The TabsTriggers, in the order of use (Figma: the `tabs` slot). */
+    children: ReactNode;
+    /** A page action at the right end of the strip, outside the tablist: a small Button, a filter (Figma: `trailing`). */
+    trailing?: ReactNode;
+    className?: string;
+}
+/** The strip of tabs over the baseline (Figma: the `tabs` slot), with the `trailing` slot on the right. */
+declare function TabsList({ children, trailing, className, ...rest }: TabsListProps): react.JSX.Element;
+interface TabsTriggerProps {
+    value: string;
+    /**
+     * The tab's name (Figma: `label`). With `asChild`, a single link element (an `<a>`, a framework `Link`) whose
+     * text is the name: the tab is then that link.
+     */
+    children: ReactNode;
+    /** A count after the name, when the number helps choosing (Figma: `showCount` + `count`). */
+    count?: number | string;
+    /** The "em breve" tag: the view is not there yet (Figma: `showSoon`). Usually with `disabled`. */
+    soon?: boolean;
+    /** The status dot: there is something new in this view (Figma: `showDot`). */
+    dot?: boolean;
+    /** What the dot means, read by screen readers (the dot alone is only colour). */
+    dotLabel?: string;
+    disabled?: boolean;
+    /**
+     * Render the single child element (an `<a>`, a framework `Link`) as the tab instead of a `<button>`: the way
+     * to make tabs that navigate. Control `value` from the current route.
+     */
+    asChild?: boolean;
+}
+/** One tab (Figma: .tabs/tab). Order inside: name, "em breve", dot, count. */
+declare function TabsTrigger({ value, children, count, soon, dot, dotLabel, disabled, asChild }: TabsTriggerProps): react.JSX.Element;
+interface TabsContentProps {
+    value: string;
+    children: ReactNode;
+    className?: string;
+}
+/** The view of one tab: role="tabpanel", named by its tab. */
+declare function TabsContent({ value, children, className }: TabsContentProps): react.JSX.Element;
+
+export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps };

package/dist/components/tabs.js

@@ -0,0 +1,56 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+function Tabs(_a) {
+  var _b = _a, { className, activationMode = "automatic" } = _b, props = __objRest(_b, ["className", "activationMode"]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    __spreadProps(__spreadValues({}, props), {
+      activationMode,
+      className: ["rds-tabs", className].filter(Boolean).join(" ")
+    })
+  );
+}
+function TabsList(_c) {
+  var _d = _c, { children, trailing, className } = _d, rest = __objRest(_d, ["children", "trailing", "className"]);
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-tabs__bar", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx(TabsPrimitive.List, __spreadProps(__spreadValues({}, rest), { className: "rds-tabs__list", children })),
+    trailing && /* @__PURE__ */ jsx("div", { className: "rds-tabs__trailing", children: trailing })
+  ] });
+}
+function TabsTrigger({ value, children, count, soon, dot, dotLabel = "Tem novidade", disabled, asChild }) {
+  const extras = /* @__PURE__ */ jsxs(Fragment, { children: [
+    soon && /* @__PURE__ */ jsx("span", { className: "rds-tabs__soon", children: "em breve" }),
+    dot && /* @__PURE__ */ jsx("span", { className: "rds-tabs__dot", children: /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: dotLabel }) }),
+    count !== void 0 && /* @__PURE__ */ jsx("span", { className: "rds-tabs__count", children: count })
+  ] });
+  if (asChild && isValidElement(children)) {
+    const link = children;
+    return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { value, disabled, asChild: true, children: cloneElement(link, {
+      className: ["rds-tabs__tab", link.props.className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-tabs__label", children: link.props.children }),
+        extras
+      ] })
+    }) });
+  }
+  return /* @__PURE__ */ jsxs(TabsPrimitive.Trigger, { value, disabled, className: "rds-tabs__tab", children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-tabs__label", children }),
+    extras
+  ] });
+}
+function TabsContent({ value, children, className }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Content, { value, className: ["rds-tabs__panel", className].filter(Boolean).join(" "), children });
+}
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};

package/dist/components/testimonial.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    eyebrow?: ReactNode;
+    /** The block's title, an h2 that names the section. */
+    title: ReactNode;
+    description?: ReactNode;
+    /** TestimonialItem cards (Figma: slot `items`): 3 per row, one column below 640 of container width. */
+    children: ReactNode;
+}
+/**
+ * Testimonial — Figma [RDS] Blocks/Testimonial. Testimonials of a public page: only real ones, with the consent of
+ * who said them. Adapts to the width of its container (Figma: `screen`). Styles: testimonial.css.
+ */
+declare function Testimonial({ eyebrow, title, description, children, className, ...rest }: TestimonialProps): react.JSX.Element;
+interface TestimonialItemProps extends HTMLAttributes<HTMLLIElement> {
+    /** The words of who said it (Figma: `quote`). */
+    quote: ReactNode;
+    /** Who said it (Figma: `name`). */
+    name: ReactNode;
+    /** Job title and company (Figma: `jobTitle`). */
+    jobTitle?: ReactNode;
+    /** An Avatar of the person (the Figma exposes it). */
+    avatar?: ReactNode;
+}
+/** One testimonial card (Figma: .testimonial/item), a figure with the quote and its author. Only inside a Testimonial. */
+declare function TestimonialItem({ quote, name, jobTitle, avatar, className, ...rest }: TestimonialItemProps): react.JSX.Element;
+
+export { Testimonial, TestimonialItem, type TestimonialItemProps, type TestimonialProps };

package/dist/components/testimonial.js

@@ -0,0 +1,36 @@
+"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";
+import { QuoteIcon } from "./internal/icons.js";
+function Testimonial(_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-testimonial", 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-testimonial__items", children })
+  ] }) }));
+}
+function TestimonialItem(_c) {
+  var _d = _c, { quote, name, jobTitle, avatar, className } = _d, rest = __objRest(_d, ["quote", "name", "jobTitle", "avatar", "className"]);
+  return /* @__PURE__ */ jsx("li", __spreadProps(__spreadValues({}, rest), { className: ["rds-testimonial__item", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("figure", { className: "rds-testimonial__figure", children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-testimonial__mark", "aria-hidden": "true", children: /* @__PURE__ */ jsx(QuoteIcon, {}) }),
+    /* @__PURE__ */ jsx("blockquote", { className: "rds-testimonial__quote", children: quote }),
+    /* @__PURE__ */ jsxs("figcaption", { className: "rds-testimonial__author", children: [
+      avatar,
+      /* @__PURE__ */ jsxs("span", { className: "rds-testimonial__byline", children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-testimonial__name", children: name }),
+        jobTitle && /* @__PURE__ */ jsx("span", { className: "rds-testimonial__role", children: jobTitle })
+      ] })
+    ] })
+  ] }) }));
+}
+export {
+  Testimonial,
+  TestimonialItem
+};