@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/summary-bar.js

@@ -1,53 +1,16 @@
-import "../chunk-ORMEWXMH.js";
-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__ */ React.createElement(
-    "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(" ")
-    },
-    items.map((item, i) => {
-      var _a;
-      const spanFull = odd && i === items.length - 1;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: i,
-          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(" ")
-        },
-        /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-medium uppercase tracking-wide [color:var(--summary-bar-label)]" }, item.label),
-        /* @__PURE__ */ React.createElement(
-          "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(" ")
-          },
-          item.icon,
-          item.value
-        )
-      );
-    })
-  );
+"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,80 +1,86 @@
+"use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-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__ */ React.createElement("table", __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__ */ React.createElement("thead", __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__ */ React.createElement("tbody", __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__ */ React.createElement(
-    "tr",
-    __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"]);
-  return /* @__PURE__ */ React.createElement(
+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",
-    __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
+    __spreadProps(__spreadValues({
+      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"]);
-  return /* @__PURE__ */ React.createElement(
+function TableCell(_e) {
+  var _f = _e, { align = "start", type = "body", className } = _f, rest = __objRest(_f, ["align", "type", "className"]);
+  return /* @__PURE__ */ jsx(
     "td",
-    __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
+};

package/dist/components/textarea.d.ts

@@ -1,21 +1,16 @@
 import * as react from 'react';
-import { TextareaHTMLAttributes } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import { FieldTextProps } from './internal/field.js';
 
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-    label?: string;
-    helper?: string;
-    error?: string;
-    required?: boolean;
-    optional?: boolean;
-    /** Auto-cresce conforme conteúdo (sem scroll bar interna). default = false. */
-    autoResize?: boolean;
-    /** Conta caracteres (mostra "X/Y" se maxLength definido). */
-    showCount?: boolean;
-    /** Min rows quando autoResize. default = 3. */
-    minRows?: number;
-    /** Max rows quando autoResize (cap pra evitar crescer infinito). default = 10. */
-    maxRows?: number;
+interface TextareaProps extends FieldTextProps, Omit<ComponentPropsWithRef<'textarea'>, 'children'> {
+    /** Visible lines at first (3 to 5 fits most). Never under 2. The person can make it taller. */
+    rows?: number;
 }
-declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+/**
+ * Textarea — Figma [RDS] Forms/Textarea. A multi-line text field with its own label, hint and error; same
+ * model and spacing as the Input. The text is the native value (Figma: `content`). Styles: textarea.css
+ * and internal/field.css.
+ */
+declare function Textarea({ label, labelPosition, hint, error, errorMessage, required, id, disabled, rows, className, style, ...textarea }: TextareaProps): react.JSX.Element;
 
 export { Textarea, type TextareaProps };