@rojaostudio/ds 2.0.0-next.1 → 2.0.0-next.11

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,66 @@
+# Avisos de terceiros
+
+O Rojão DS é distribuído sob a [licença MIT](../../LICENSE). Alguns trechos vêm de projetos de terceiros, ou se apoiam neles, sob as licenças abaixo.
+
+## Incluído no pacote
+
+### Lucide (ícones)
+
+Os SVGs em `packages/ds/icons/svg/` e os traçados de `packages/ds/components/internal/icons.tsx` vêm do [Lucide](https://lucide.dev), sob a licença ISC. Parte do Lucide vem do Feather, sob a licença MIT.
+
+```
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT).
+All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is
+hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
+INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
+DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+```
+
+```
+The MIT License (MIT) — Feather
+
+Copyright (c) 2013-2022 Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without
+limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the
+Software, and to permit persons to whom the Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
+```
+
+### Pix
+
+O símbolo do Pix (`packages/ds/icons/pix.tsx`) é marca do Banco Central do Brasil. Ele está aqui só para indicar o Pix como meio de pagamento, conforme o manual de uso da marca. A licença MIT deste projeto não se estende a ele.
+
+## Dependências (instaladas pelo gerenciador de pacotes, não redistribuídas)
+
+| Pacote | Licença | Uso |
+|---|---|---|
+| `@radix-ui/react-*` | MIT | comportamento acessível de overlays, menus, abas e afins |
+| `lucide-react` (peer opcional) | ISC | re-exportação de ícones em `@rojaostudio/ds/icons` |
+| `react-image-crop` (peer opcional) | ISC | recorte do `ImageCropModal` |
+| `react-international-phone` (peer opcional) | MIT | campo e bandeiras do `PhoneInput` |
+
+## Fontes (referenciadas pelo nome, não distribuídas)
+
+| Fonte | Licença |
+|---|---|
+| Inter | SIL Open Font License 1.1 |
+| Roboto Mono | Apache License 2.0 |

package/dist/components/chart.d.ts

@@ -10,7 +10,7 @@ interface ChartSeries {
     /** line only: which axis it reads on. right only when the two series have different units (volume and rate). */
     axis?: 'left' | 'right';
 }
-interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onSelect'> {
     /** What the chart shows, with the period. It names the chart and captions its data table. */
     label: string;
     /** line: lines over time; bar: a ranking in horizontal bars; column: columns by category. */
@@ -32,8 +32,22 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     showLegend?: boolean;
     /** The values of the point under the pointer or the keyboard (Figma: `showTooltip`). */
     showTooltip?: boolean;
-    /** Off: only the first, middle and last label (Figma: `showAllDates`). Use it under about 360 px. */
+    /**
+     * line and column: which x labels show (Figma: `dates`). edges, the default: the first, middle and last; all: every
+     * label, for short series only.
+     */
+    dates?: 'edges' | 'all';
+    /** line and column: one label every N points, with a tick on every point (Figma: `dates=every`). Wins over `dates`. */
+    dateEvery?: number;
+    /** @deprecated Use `dates="all"` (true) or `dates="edges"` (false). */
     showAllDates?: boolean;
+    /**
+     * bar and column: where each item leads, in the order of `labels`. In bar each bar becomes a link named
+     * "<label>: <value>"; in column a click or Enter on the plot follows the item's link.
+     */
+    hrefs?: Array<string | undefined>;
+    /** bar and column: called with the item's index when it is chosen (click, Enter). In bar each bar becomes a button. */
+    onSelect?: (index: number) => void;
     /** Show the data table under the chart. By default it is there only for screen readers. */
     showTable?: boolean;
     /** Height of the plot area, in px (Figma: 200). */
@@ -44,6 +58,6 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
  * data (visually hidden unless `showTable`). In line and column the plot is a slider for screen readers and the
  * keyboard: the arrows move from point to point, and each point is read with its label and values. Styles: chart.css.
  */
-declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, showAllDates, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
+declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, dates, dateEvery, showAllDates, hrefs, onSelect, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
 
 export { Chart, type ChartProps, type ChartSeries, type ChartType };

package/dist/components/chart.js

@@ -36,7 +36,11 @@ function Chart(_a) {
     showRightAxis = true,
     showLegend = true,
     showTooltip = true,
-    showAllDates = true,
+    dates,
+    dateEvery,
+    showAllDates,
+    hrefs,
+    onSelect,
     showTable = false,
     height = 200,
     className
@@ -50,7 +54,11 @@ function Chart(_a) {
     "showRightAxis",
     "showLegend",
     "showTooltip",
+    "dates",
+    "dateEvery",
     "showAllDates",
+    "hrefs",
+    "onSelect",
     "showTable",
     "height",
     "className"
@@ -78,7 +86,14 @@ function Chart(_a) {
     return `${s.name} ${formatFor(s)((_a3 = s.data[index]) != null ? _a3 : 0)}`;
   }).join(", ");
   const legendName = (s) => dual ? `${s.name} (${onRight(s) ? "direita" : "esquerda"})` : s.name;
-  const labelIndexes = showAllDates || count <= 3 ? labels.map((_, i) => i) : [0, Math.floor((count - 1) / 2), count - 1];
+  const every = dateEvery && dateEvery > 1 ? Math.floor(dateEvery) : null;
+  const allDates = (dates != null ? dates : showAllDates === void 0 ? "edges" : showAllDates ? "all" : "edges") === "all";
+  const labelIndexes = every ? labels.map((_, i) => i).filter((i) => i % every === 0) : allDates || count <= 3 ? labels.map((_, i) => i) : [0, Math.floor((count - 1) / 2), count - 1];
+  const linked = type !== "line" && Boolean(onSelect || (hrefs == null ? void 0 : hrefs.some(Boolean)));
+  const choose = (index) => {
+    if (onSelect) onSelect(index);
+    else if (hrefs == null ? void 0 : hrefs[index]) window.location.assign(hrefs[index]);
+  };
   const onPointerMove = (event) => {
     const box = event.currentTarget.getBoundingClientRect();
     const ratio = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
@@ -94,6 +109,11 @@ function Chart(_a) {
       Home: 0,
       End: count - 1
     };
+    if (linked && event.key === "Enter" && active !== null) {
+      event.preventDefault();
+      choose(active);
+      return;
+    }
     if (!(event.key in keys)) return;
     event.preventDefault();
     setActive(keys[event.key]);
@@ -133,6 +153,7 @@ function Chart(_a) {
     onPointerLeave: (event) => {
       if (document.activeElement !== event.currentTarget) setActive(null);
     },
+    onClick: linked ? () => active !== null && choose(active) : void 0,
     onFocus: () => setActive((current) => current != null ? current : 0),
     onBlur: () => setActive(null),
     onKeyDown
@@ -142,19 +163,37 @@ function Chart(_a) {
   if (type === "bar") {
     const s = shown[0];
     const top = Math.max(0, ...(_a2 = s == null ? void 0 : s.data) != null ? _a2 : [0]);
-    body = /* @__PURE__ */ jsx("div", { className: "rds-chart__bars", "aria-hidden": "true", children: labels.map((name, i) => {
+    body = /* @__PURE__ */ jsx("div", { className: "rds-chart__bars", "aria-hidden": linked ? void 0 : true, children: labels.map((name, i) => {
       var _a3, _b2;
-      return /* @__PURE__ */ jsxs("div", { className: "rds-chart__bar-row", children: [
+      const value = s ? formatLeft((_a3 = s.data[i]) != null ? _a3 : 0) : "";
+      const parts = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-label", children: name }),
         /* @__PURE__ */ jsx("span", { className: "rds-chart__track", children: /* @__PURE__ */ jsx(
           "span",
           {
             className: "rds-chart__bar",
-            style: __spreadProps(__spreadValues({}, seriesStyle(i + 1)), { width: `${top ? ((_a3 = s == null ? void 0 : s.data[i]) != null ? _a3 : 0) / top * 100 : 0}%` })
+            style: __spreadProps(__spreadValues({}, seriesStyle(i + 1)), { width: `${top ? ((_b2 = s == null ? void 0 : s.data[i]) != null ? _b2 : 0) / top * 100 : 0}%` })
           }
         ) }),
-        /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-value", children: s ? formatLeft((_b2 = s.data[i]) != null ? _b2 : 0) : "" })
-      ] }, name);
+        /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-value", children: value })
+      ] });
+      const href = hrefs == null ? void 0 : hrefs[i];
+      const accessibleName = `${name}: ${value}`;
+      if (linked && href && !onSelect)
+        return /* @__PURE__ */ jsx("a", { href, className: "rds-chart__bar-row rds-chart__bar-row--link", "aria-label": accessibleName, children: parts }, name);
+      if (linked && onSelect)
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rds-chart__bar-row rds-chart__bar-row--link",
+            "aria-label": accessibleName,
+            onClick: () => onSelect(i),
+            children: parts
+          },
+          name
+        );
+      return /* @__PURE__ */ jsx("div", { className: "rds-chart__bar-row", children: parts }, name);
     }) });
   } else {
     body = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -208,7 +247,10 @@ function Chart(_a) {
         ] })),
         rightScale && /* @__PURE__ */ jsx(Axis, { ticks: rightScale.ticks, format: formatRight, side: "right" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "rds-chart__labels", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: `rds-chart__labels-track rds-chart__labels-track--${type}`, children: labelIndexes.map((i) => /* @__PURE__ */ jsx("span", { className: "rds-chart__label", style: { left: `${x(i)}%` }, children: labels[i] }, i)) }) })
+      /* @__PURE__ */ jsx("div", { className: "rds-chart__labels", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { className: `rds-chart__labels-track rds-chart__labels-track--${type}${every ? " rds-chart__labels-track--ticks" : ""}`, children: [
+        every && labels.map((_, i) => /* @__PURE__ */ jsx("i", { className: "rds-chart__tick", style: { left: `${x(i)}%` } }, `t${i}`)),
+        labelIndexes.map((i) => /* @__PURE__ */ jsx("span", { className: "rds-chart__label", style: { left: `${x(i)}%` }, children: labels[i] }, i))
+      ] }) })
     ] });
   }
   const firstColumn = type === "line" ? "Data" : "Categoria";
@@ -216,7 +258,7 @@ function Chart(_a) {
     "figure",
     __spreadProps(__spreadValues({}, rest), {
       "aria-label": label,
-      className: ["rds-chart", `rds-chart--${type}`, dual && "rds-chart--dual", className].filter(Boolean).join(" "),
+      className: ["rds-chart", `rds-chart--${type}`, dual && "rds-chart--dual", linked && "rds-chart--linked", className].filter(Boolean).join(" "),
       children: [
         body,
         showLegend && type !== "bar" && /* @__PURE__ */ jsx("ul", { className: "rds-chart__legend", "aria-hidden": "true", children: shown.map((s, n) => /* @__PURE__ */ jsxs("li", { children: [
@@ -229,26 +271,30 @@ function Chart(_a) {
             shown.map((s) => /* @__PURE__ */ jsx(TableHead, { align: "end", children: legendName(s) }, s.name))
           ] }) }),
           /* @__PURE__ */ jsx(TableBody, { children: labels.map((name, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: name }),
+            /* @__PURE__ */ jsx(TableCell, { children: linked && onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "rds-chart__table-link", onClick: () => onSelect(i), children: name }) : linked && (hrefs == null ? void 0 : hrefs[i]) ? /* @__PURE__ */ jsx("a", { className: "rds-chart__table-link", href: hrefs[i], children: name }) : name }),
             shown.map((s) => {
               var _a3;
               return /* @__PURE__ */ jsx(TableCell, { align: "end", children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
             })
           ] }, name)) })
-        ] }) : /* @__PURE__ */ jsxs("table", { className: "rds-visually-hidden", children: [
-          /* @__PURE__ */ jsx("caption", { children: label }),
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { scope: "col", children: firstColumn }),
-            shown.map((s) => /* @__PURE__ */ jsx("th", { scope: "col", children: legendName(s) }, s.name))
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: labels.map((name, i) => /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("th", { scope: "row", children: name }),
-            shown.map((s) => {
-              var _a3;
-              return /* @__PURE__ */ jsx("td", { children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
-            })
-          ] }, name)) })
-        ] })
+        ] }) : (
+          // The clip goes on a wrapper: a <table> ignores the 1px box and overflow of .rds-visually-hidden, so it
+          // kept its full size, anchored to the page and stretched the page scroll.
+          /* @__PURE__ */ jsx("div", { className: "rds-visually-hidden", children: /* @__PURE__ */ jsxs("table", { children: [
+            /* @__PURE__ */ jsx("caption", { children: label }),
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "col", children: firstColumn }),
+              shown.map((s) => /* @__PURE__ */ jsx("th", { scope: "col", children: legendName(s) }, s.name))
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: labels.map((name, i) => /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { scope: "row", children: name }),
+              shown.map((s) => {
+                var _a3;
+                return /* @__PURE__ */ jsx("td", { children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);
+              })
+            ] }, name)) })
+          ] }) })
+        )
       ]
     })
   );

package/dist/components/choice-list.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+interface ChoiceListProps extends Omit<ComponentPropsWithRef<'ul'>, 'children' | 'defaultValue' | 'onChange'> {
+    /** The ChoiceListItems (Figma: the slot `items`). */
+    children: ReactNode;
+    /** Controlled: the chosen row's value. */
+    value?: string;
+    /** Uncontrolled: the row chosen at first. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * ChoiceList — Figma [RDS] Content/ChoiceList. A dense list to choose one thing from: a client, a product, an
+ * order. Each row is media, a title, a muted description and a trailing value; a line under each row, dozens on
+ * screen. One chosen at a time, marked by the tint and a bar on the left (role listbox, aria-selected). The list
+ * takes the focus: the arrows move the active row past disabled ones, Home and End go to the ends, Enter or Space
+ * choose, a click chooses. Name it with aria-label or aria-labelledby. Styles: choice-list.css.
+ *
+ * Not for 2 to 4 options that need an explanation (ChoiceCard), nor for a list that only shows (Item).
+ */
+declare function ChoiceList({ children, value, defaultValue, onValueChange, className, onKeyDown, onFocus, ref, ...rest }: ChoiceListProps): react.JSX.Element;
+interface ChoiceListItemProps {
+    /** The value it stands for. */
+    value: string;
+    /** The name, one line (Figma: `title`). It is the row's accessible name. */
+    title: ReactNode;
+    /** One muted line under the title (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    /** An Avatar for a person, a Tile for a thing, 32 (Figma: `showMedia` + `media`). Decorative: hidden from screen readers. */
+    media?: ReactNode;
+    /** A value or a date on the right (Figma: `showTrailing` + `trailing`). */
+    trailing?: ReactNode;
+    /** Cannot be chosen now: skipped by the arrows, read as unavailable. */
+    disabled?: boolean;
+}
+/** One row of the ChoiceList (Figma: .choice-list/item). The whole row is the target. */
+declare function ChoiceListItem({ value, title, description, media, trailing, disabled }: ChoiceListItemProps): react.JSX.Element;
+
+export { ChoiceList, ChoiceListItem, type ChoiceListItemProps, type ChoiceListProps };

package/dist/components/choice-list.js

@@ -0,0 +1,122 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { warnIfUnlabelled } from "./internal/field.js";
+const ChoiceListContext = createContext(null);
+function ChoiceList(_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("ChoiceList", 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 rows = () => {
+    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(row) {
+    if (!row) return;
+    setActiveId(row.id);
+    row.scrollIntoView({ block: "nearest" });
+  }
+  function keyDown(event) {
+    var _a2;
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented) return;
+    const all = rows();
+    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(ChoiceListContext.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-choice-list", className].filter(Boolean).join(" "),
+      onKeyDown: keyDown,
+      onFocus: (event) => {
+        var _a2;
+        onFocus == null ? void 0 : onFocus(event);
+        if (activeId && document.getElementById(activeId)) return;
+        const all = rows();
+        activate((_a2 = all.find((o) => o.dataset.value === selected)) != null ? _a2 : all[0]);
+      },
+      children
+    })
+  ) });
+}
+function ChoiceListItem({ value, title, description, media, trailing, disabled }) {
+  const context = useContext(ChoiceListContext);
+  const id = useId();
+  if (!context) throw new Error("[@rojaostudio/ds] ChoiceListItem goes inside a ChoiceList.");
+  const selected = context.selected === value;
+  const describedBy = [description != null && `${id}-description`, trailing != null && `${id}-trailing`].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id,
+      role: "option",
+      "data-value": value,
+      "aria-selected": selected,
+      "aria-disabled": disabled || void 0,
+      "aria-labelledby": `${id}-title`,
+      "aria-describedby": describedBy || void 0,
+      "data-active": context.activeId === id ? "" : void 0,
+      className: "rds-choice-list__item",
+      onClick: () => {
+        if (disabled) return;
+        context.setActiveId(id);
+        context.choose(value);
+      },
+      children: [
+        media != null && /* @__PURE__ */ jsx("span", { className: "rds-choice-list__media", "aria-hidden": "true", children: media }),
+        /* @__PURE__ */ jsxs("span", { className: "rds-choice-list__content", children: [
+          /* @__PURE__ */ jsx("span", { id: `${id}-title`, className: "rds-choice-list__title", children: title }),
+          description != null && /* @__PURE__ */ jsx("span", { id: `${id}-description`, className: "rds-choice-list__description", children: description })
+        ] }),
+        trailing != null && /* @__PURE__ */ jsx("span", { id: `${id}-trailing`, className: "rds-choice-list__trailing", children: trailing })
+      ]
+    }
+  );
+}
+export {
+  ChoiceList,
+  ChoiceListItem
+};

package/dist/components/heading.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** The [RDS] type scale for titles: band 36/48, heading 24/30, value 20/30. */
+type HeadingLevel = 'band' | 'heading' | 'value';
+/** default: text/heading (navy on light in Rojão, white on dark and on the brand plate). accent: the logo orange. */
+type HeadingTone = 'default' | 'accent';
+/** The element in the page outline. The visual level never decides it: the order of the page does. */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** The size, from the type scale (Figma `level`). */
+    level?: HeadingLevel;
+    /** The colour of the brand pair (Figma `tone`). The Mark takes the other one. */
+    tone?: HeadingTone;
+    /** The heading element. Default h2. */
+    as?: HeadingElement;
+    /** The text (Figma `text`), with an optional <Heading.Mark> stretch (Figma `showMark` + `mark`). */
+    children: ReactNode;
+}
+interface HeadingMarkProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+/**
+ * Heading.Mark — Figma [RDS] .heading/mark. A stretch of the title in the other colour of the pair: accent inside a
+ * default Heading, default inside an accent one. A plain span: screen readers read the whole title, unannounced.
+ */
+declare function HeadingMark({ className, children, ...rest }: HeadingMarkProps): react.JSX.Element;
+/**
+ * Heading — Figma [RDS] Content/Heading. A title in the brand pair: one colour, or both in the same title with a
+ * Heading.Mark. The colour is chosen per screen; tone=default is the rule. Orange on white fails contrast even for
+ * a large title (2.9:1 in Rojão): tone=accent belongs on dark or on the brand plate. Styles: heading.css.
+ */
+declare function HeadingRoot({ level, tone, as: Tag, className, children, ...rest }: HeadingProps): react.JSX.Element;
+/** `<Heading>` with `<Heading.Mark>` for the stretch in the other colour. */
+declare const Heading: typeof HeadingRoot & {
+    Mark: typeof HeadingMark;
+};
+
+export { Heading, type HeadingElement, type HeadingLevel, HeadingMark, type HeadingMarkProps, type HeadingProps, type HeadingTone };

package/dist/components/heading.js

@@ -0,0 +1,25 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+function HeadingMark(_a) {
+  var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, rest), { className: ["rds-heading__mark", className].filter(Boolean).join(" "), children }));
+}
+function HeadingRoot(_c) {
+  var _d = _c, { level = "heading", tone = "default", as: Tag = "h2", className, children } = _d, rest = __objRest(_d, ["level", "tone", "as", "className", "children"]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-heading", `rds-heading--${level}`, tone === "accent" && "rds-heading--accent", className].filter(Boolean).join(" "),
+      children
+    })
+  );
+}
+const Heading = Object.assign(HeadingRoot, { Mark: HeadingMark });
+export {
+  Heading,
+  HeadingMark
+};

package/dist/components/index.d.ts

@@ -47,6 +47,7 @@ export { ChipInput, ChipInputProps } from './chip-input.js';
 export { CopyField, CopyFieldProps } from './copy-field.js';
 export { QRDisplay, QRDisplayProps } from './qr-display.js';
 export { ChoiceCard } from './choice-card.js';
+export { ChoiceList, ChoiceListItem, ChoiceListItemProps, ChoiceListProps } from './choice-list.js';
 export { OptionTile, OptionTileGrid, OptionTileGridProps, OptionTileItem, OptionTileProps } from './option-tile.js';
 export { SelectableCard, SelectableCardProps } from './selectable-card.js';
 export { ChoicePreviewCard, ChoicePreviewCardProps } from './choice-preview-card.js';
@@ -76,6 +77,7 @@ export { Switch, SwitchProps } from './switch.js';
 export { Tooltip, TooltipProps, TooltipSide } from './tooltip.js';
 export { ToastFn, ToastOptions, ToastTone, ToastVariant, ToastView, ToastViewProps, Toaster, ToasterProps, toast, toastClassName, useToast } from './toast.js';
 export { Separator, SeparatorOrientation, SeparatorProps } from './separator.js';
+export { Heading, HeadingElement, HeadingLevel, HeadingMark, HeadingMarkProps, HeadingProps, HeadingTone } from './heading.js';
 export { Avatar, AvatarGroup, AvatarGroupProps, AvatarGroupSize, AvatarProps, AvatarSize, AvatarType, AvatarVariant, initials } from './avatar.js';
 export { IconButton, IconButtonProps } from './icon-button.js';
 export { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from './button-group.js';

package/dist/components/index.js

@@ -54,6 +54,7 @@ import { ChipInput } from "./chip-input.js";
 import { CopyField } from "./copy-field.js";
 import { QRDisplay } from "./qr-display.js";
 import { ChoiceCard, ChoiceCardGroup } from "./choice-card.js";
+import { ChoiceList, ChoiceListItem } from "./choice-list.js";
 import { OptionTile, OptionTileGrid } from "./option-tile.js";
 import { SelectableCard } from "./selectable-card.js";
 import { ChoicePreviewCard } from "./choice-preview-card.js";
@@ -83,6 +84,7 @@ import { Switch } from "./switch.js";
 import { Tooltip } from "./tooltip.js";
 import { Toaster, ToastView, toast, useToast, toastClassName } from "./toast.js";
 import { Separator } from "./separator.js";
+import { Heading, HeadingMark } from "./heading.js";
 import { Avatar, AvatarGroup, initials } from "./avatar.js";
 import { IconButton } from "./icon-button.js";
 import { ButtonGroup } from "./button-group.js";
@@ -161,6 +163,8 @@ export {
   ChoiceCard,
   ChoiceCardGroup,
   ChoiceCarousel,
+  ChoiceList,
+  ChoiceListItem,
   ChoicePreviewCard,
   ColorInput,
   Combobox,
@@ -205,6 +209,8 @@ export {
   GoogleButton,
   GoogleConsent,
   GoogleSignIn,
+  Heading,
+  HeadingMark,
   HoverCard,
   IconButton,
   Input,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.11",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -100,6 +100,7 @@
   },
   "files": [
     "LICENSE",
+    "THIRD_PARTY_NOTICES.md",
     "README.md",
     "dist",
     "styles"
@@ -153,7 +154,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public",
-    "provenance": false
+    "provenance": true
   },
   "devDependencies": {
     "@types/node": "^20.19.43",
@@ -190,7 +191,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.0"
+    "@rojaostudio/ds-core": "1.1.0-next.6"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -1992,6 +1992,8 @@ button.rds-breadcrumb__link:focus-visible {
  * in --_series: chart.tsx picks one of the --_series-N locals below, each one a chart/series-color/N token.
  */
 .rds-chart {
+  /* Anchors the hidden alternative table (and any absolute part) to the chart, not to the page. */
+  position: relative;
   --_series-1: var(--chart-series-color-1);
   --_series-2: var(--chart-series-color-2);
   --_series-3: var(--chart-series-color-3);
@@ -2180,14 +2182,31 @@ button.rds-breadcrumb__link:focus-visible {
   white-space: nowrap;
 }
 
-.rds-chart__labels-track--line .rds-chart__label:first-child {
+.rds-chart__labels-track--line .rds-chart__label:first-of-type {
   transform: none;
 }
 
-.rds-chart__labels-track--line .rds-chart__label:last-child {
+.rds-chart__labels-track--line .rds-chart__label:last-of-type {
   transform: translateX(-100%);
 }
 
+/* dateEvery: a 1x4 tick on every point, the labels under them. */
+.rds-chart__labels-track--ticks {
+  height: calc(var(--type-caption-line) + var(--space-4));
+}
+
+.rds-chart__labels-track--ticks .rds-chart__label {
+  top: var(--space-4);
+}
+
+.rds-chart__tick {
+  position: absolute;
+  top: 0;
+  width: 1px;
+  height: var(--space-4);
+  background: var(--chart-tick);
+}
+
 /* Bars: label, track, value. */
 .rds-chart__bars {
   display: flex;
@@ -2218,6 +2237,50 @@ button.rds-breadcrumb__link:focus-visible {
   background: var(--_series);
 }
 
+/* A bar with a destination (hrefs or onSelect): the row is the link or button. */
+.rds-chart__bar-row--link {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-focus);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.rds-chart__bar-row--link:hover .rds-chart__track {
+  background: var(--chart-bar-hover);
+}
+
+.rds-chart__bar-row--link:hover .rds-chart__bar-label {
+  text-decoration: underline;
+}
+
+.rds-chart__bar-row--link:focus-visible,
+.rds-chart__table-link:focus-visible {
+  outline: var(--focus-ring-width) solid var(--chart-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+
+.rds-chart--linked.rds-chart--column .rds-chart__plot {
+  cursor: pointer;
+}
+
+.rds-chart__table-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .rds-chart__bar-value {
   color: var(--chart-axis);
   font-variant-numeric: tabular-nums;
@@ -2251,7 +2314,8 @@ button.rds-breadcrumb__link:focus-visible {
     background: CanvasText;
   }
 
-  .rds-chart__plot:focus-visible {
+  .rds-chart__plot:focus-visible,
+  .rds-chart__bar-row--link:focus-visible {
     outline-color: Highlight;
   }
 }
@@ -2993,6 +3057,132 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
+/* components/choice-list.css */
+/* @tokens choice-list */
+/*
+ * ChoiceList (Content collection, choice-list/*): the dense list to choose one from. Each row pads 12 16 with 12
+ * between media, text and trailing; a line of border-width only at the bottom (padding-bottom gives it back, so the
+ * row is 60 with a description, 44 without). Title small medium, description caption, trailing small.
+ * Hover: choice-list/item/background/hover. Chosen: the tint and a bar of border-width-strong on the left, no hover.
+ * Focus: the list holds it (aria-activedescendant); the active row draws the ring inside its box, as the rows touch.
+ * Disabled: text in the disabled tokens, media at half; it stays chosen if it was.
+ */
+.rds-choice-list {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  font-family: var(--type-font-stack);
+  list-style: none;
+  outline: none;
+}
+
+.rds-choice-list__item {
+  --_background: transparent;
+  --_title: var(--choice-list-item-title-default);
+  --_description: var(--choice-list-item-description-default);
+  --_trailing: var(--choice-list-item-trailing-default);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  min-height: calc(var(--space-12) * 2 + var(--type-button-line));
+  padding: var(--space-12) var(--space-16) calc(var(--space-12) - var(--border-width));
+  border-bottom: var(--border-width) solid var(--choice-list-item-border);
+  background: var(--_background);
+  cursor: pointer;
+  user-select: none;
+}
+
+@media (hover: hover) {
+  .rds-choice-list__item:not([aria-selected='true'], [aria-disabled='true']):hover {
+    --_background: var(--choice-list-item-background-hover);
+  }
+}
+
+.rds-choice-list__item[aria-selected='true'] {
+  --_background: var(--choice-list-item-background-selected);
+  /* On the tint the muted line does not hold contrast in dark: it takes text/on/tint. */
+  --_description: var(--choice-list-item-description-selected);
+
+  box-shadow: inset var(--border-width-strong) 0 0 var(--choice-list-item-indicator);
+}
+
+.rds-choice-list:focus-visible .rds-choice-list__item[data-active] {
+  outline: var(--focus-ring-width) solid var(--choice-list-focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-width));
+}
+
+.rds-choice-list__item[aria-disabled='true'] {
+  --_title: var(--choice-list-item-title-disabled);
+  --_description: var(--choice-list-item-description-disabled);
+  --_trailing: var(--choice-list-item-trailing-disabled);
+
+  cursor: not-allowed;
+}
+
+.rds-choice-list__media {
+  display: inline-flex;
+  flex: none;
+}
+
+.rds-choice-list__item[aria-disabled='true'] .rds-choice-list__media {
+  opacity: 0.5;
+}
+
+.rds-choice-list__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.rds-choice-list__title,
+.rds-choice-list__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rds-choice-list__title {
+  color: var(--_title);
+  font-size: var(--type-small-size);
+  line-height: var(--type-small-line);
+  font-weight: 500;
+}
+
+.rds-choice-list__description {
+  color: var(--_description);
+  font-size: var(--type-caption-size);
+  line-height: var(--type-caption-line);
+}
+
+.rds-choice-list__trailing {
+  flex: none;
+  color: var(--_trailing);
+  font-size: var(--type-small-size);
+  line-height: var(--type-small-line);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+@media (forced-colors: active) {
+  .rds-choice-list__item[aria-selected='true'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .rds-choice-list__item[aria-selected='true'] :is(.rds-choice-list__title, .rds-choice-list__description, .rds-choice-list__trailing) {
+    color: HighlightText;
+  }
+
+  .rds-choice-list:focus-visible .rds-choice-list__item[data-active] {
+    outline-color: CanvasText;
+  }
+}
+
 /* components/color-input.css */
 /* @tokens color-input */
 /*
@@ -4595,6 +4785,48 @@ input:focus-visible + .rds-checkbox__box {
   }
 }
 
+/* components/heading.css */
+/* @tokens heading */
+/*
+ * Heading (Content collection, heading/*): a title in the brand pair. heading/default is text/heading, heading/accent
+ * the logo orange; .heading/mark paints a stretch in the other one. level follows the type scale (band, heading,
+ * value), all bold.
+ */
+.rds-heading {
+  margin: 0;
+  font-family: var(--type-font-stack);
+  font-weight: var(--type-heading-weight);
+  color: var(--heading-default);
+  text-wrap: balance;
+}
+
+.rds-heading--band {
+  font-size: var(--type-band-size);
+  line-height: var(--type-band-line);
+}
+
+.rds-heading--heading {
+  font-size: var(--type-heading-size);
+  line-height: var(--type-heading-line);
+}
+
+.rds-heading--value {
+  font-size: var(--type-value-size);
+  line-height: var(--type-value-line);
+}
+
+.rds-heading--accent {
+  color: var(--heading-accent);
+}
+
+.rds-heading__mark {
+  color: var(--heading-accent);
+}
+
+.rds-heading--accent .rds-heading__mark {
+  color: var(--heading-default);
+}
+
 /* components/hover-card.css */
 /* @tokens hovercard */
 /* HoverCard (Feedback collection, hovercard/*): 320 wide, 16 inside, 12 between avatar and text, elevation/overlay. */
@@ -5298,6 +5530,23 @@ input:focus-visible + .rds-checkbox__box {
   font: inherit;
 }
 
+/*
+ * Browser autofill paints the control's own background (blue in light, yellow in dark) and the control is smaller
+ * than the box that draws the border: it showed as a patch in the middle of the field. Cover it with the box
+ * colour and keep the value colour. The background-color transition is the fallback for browsers that ignore the
+ * inset shadow on autofill.
+ */
+.rds-field__control:-webkit-autofill,
+.rds-field__control:-webkit-autofill:hover,
+.rds-field__control:-webkit-autofill:focus,
+.rds-field__control:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--_background) inset;
+  box-shadow: 0 0 0 1000px var(--_background) inset;
+  -webkit-text-fill-color: var(--_value);
+  caret-color: var(--_value);
+  transition: background-color 600000s 0s;
+}
+
 .rds-field__control::placeholder {
   color: var(--_placeholder);
   opacity: 1;
@@ -8772,9 +9021,12 @@ input:focus-visible + .rds-radio__circle {
   cursor: pointer;
 }
 
+/* Figma .sidebar/section: label in caps with 6% tracking; the count keeps its own case and no tracking. */
 .rds-sidebar__section-label {
   flex: 1;
   min-width: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 .rds-sidebar__section-count {

package/styles/rds/components.css

@@ -292,6 +292,9 @@
   --chart-tooltip-border: var(--border-default);
   --chart-label: var(--text-body);
   --chart-tooltip-title: var(--text-heading);
+  --chart-bar-hover: var(--surface-muted);
+  --chart-focus-ring: var(--focus-ring);
+  --chart-tick: var(--border-strong);
   --carousel-slide-background: var(--surface-muted);
   --carousel-dot: var(--border-strong);
   --carousel-dot-active: var(--colors-primary-default);
@@ -371,6 +374,20 @@
   --choice-card-preview-background: var(--surface-muted);
   --choice-card-preview-border: var(--border-default);
   --choice-card-preview-icon: var(--text-subtle);
+  --choice-list-item-background-hover: var(--surface-muted);
+  --choice-list-item-background-selected: var(--surface-tint-default);
+  --choice-list-item-indicator: var(--colors-primary-default);
+  --choice-list-item-border: var(--border-default);
+  --choice-list-item-title-default: var(--text-body);
+  --choice-list-item-title-disabled: var(--text-disabled);
+  --choice-list-item-description-default: var(--text-muted);
+  --choice-list-item-description-disabled: var(--text-disabled);
+  --choice-list-item-trailing-default: var(--text-body);
+  --choice-list-item-trailing-disabled: var(--text-disabled);
+  --choice-list-focus-ring: var(--focus-ring);
+  --choice-list-item-description-selected: var(--text-on-tint);
+  --heading-default: var(--text-heading);
+  --heading-accent: var(--colors-accent-default);
 
   /* external */
   --google-button-light-background: #ffffff;

package/styles/rds/theme.css

@@ -11,7 +11,7 @@
   --colors-accent-default: #ff6a00;
   --colors-accent-hover: #ff9640;
   --colors-accent-invert: #ffffff;
-  --text-heading: #ff6a00;
+  --text-heading: #1b2a4a;
   --text-body: #27272a;
   --text-link: #006bb5;
   --surface-page: #f4f4f5;