@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/slider.js

@@ -1,79 +1,88 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { forwardRef, useId } from "react";
-const TRACK_HEIGHT = { sm: 4, md: 6 };
-const THUMB_SIZE = { sm: 14, md: 18 };
-const Slider = forwardRef(function Slider2(_a, ref) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { hasContent, warnIfUnlabelled } from "./internal/field.js";
+function Slider(_a) {
   var _b = _a, {
+    label,
+    showValue = true,
     value,
-    onChange,
+    defaultValue,
+    onValueChange,
     min = 0,
     max = 100,
-    step = 1,
-    showValue = false,
-    formatValue,
-    showRange = false,
-    size = "md",
+    step = 5,
+    formatValue = String,
+    id,
     disabled,
-    className = ""
-  } = _b, rest = __objRest(_b, [
+    className,
+    style,
+    onChange
+  } = _b, input = __objRest(_b, [
+    "label",
+    "showValue",
     "value",
-    "onChange",
+    "defaultValue",
+    "onValueChange",
     "min",
     "max",
     "step",
-    "showValue",
     "formatValue",
-    "showRange",
-    "size",
+    "id",
     "disabled",
-    "className"
+    "className",
+    "style",
+    "onChange"
   ]);
-  const id = useId();
-  const pct = (value - min) / (max - min) * 100;
-  const fmt = formatValue != null ? formatValue : ((v) => String(v));
-  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-2", className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 flex items-center", style: { height: THUMB_SIZE[size] } }, /* @__PURE__ */ React.createElement(
-    "input",
-    __spreadValues({
-      ref,
-      id,
-      type: "range",
-      min,
-      max,
-      step,
-      value,
-      disabled,
-      onChange: (e) => onChange(Number(e.target.value)),
-      className: [
-        "rojao-slider absolute inset-0 w-full bg-transparent appearance-none cursor-pointer",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-2 focus-visible:rounded-full",
-        "disabled:cursor-not-allowed disabled:opacity-50"
-      ].join(" "),
-      style: {
-        ["--rojao-slider-pct"]: `${pct}%`,
-        ["--rojao-slider-track-h"]: `${TRACK_HEIGHT[size]}px`,
-        ["--rojao-slider-thumb-size"]: `${THUMB_SIZE[size]}px`
-      }
-    }, rest)
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "aria-hidden": true,
-      className: "absolute inset-x-0 rounded-full bg-stroke-default pointer-events-none",
-      style: { height: TRACK_HEIGHT[size] }
-    }
-  ), /* @__PURE__ */ React.createElement(
+  warnIfUnlabelled("Slider", label, input["aria-label"], input["aria-labelledby"]);
+  const generated = useId();
+  const controlId = id != null ? id : generated;
+  const [own, setOwn] = useState(defaultValue != null ? defaultValue : min);
+  const current = value != null ? value : own;
+  const percent = (current - min) / (max - min || 1) * 100;
+  const labelled = hasContent(label);
+  function change(event) {
+    const next = Number(event.target.value);
+    setOwn(next);
+    onChange == null ? void 0 : onChange(event);
+    onValueChange == null ? void 0 : onValueChange(next);
+  }
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      "aria-hidden": true,
-      className: "absolute left-0 rounded-full bg-brand-primary pointer-events-none",
-      style: { height: TRACK_HEIGHT[size], width: `${pct}%` }
+      role: disabled ? "group" : void 0,
+      "aria-disabled": disabled || void 0,
+      className: ["rds-slider", disabled && "rds-slider--disabled", className].filter(Boolean).join(" "),
+      style: __spreadProps(__spreadValues({}, style), { "--_percent": `${percent}%` }),
+      children: [
+        (labelled || showValue) && /* @__PURE__ */ jsxs("div", { className: "rds-slider__label-row", children: [
+          labelled && /* @__PURE__ */ jsx("label", { htmlFor: controlId, className: "rds-slider__label", children: label }),
+          showValue && /* @__PURE__ */ jsx("span", { className: "rds-slider__value", "aria-hidden": "true", children: formatValue(current) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, input), {
+            id: controlId,
+            type: "range",
+            className: "rds-slider__input",
+            min,
+            max,
+            step,
+            disabled,
+            "aria-valuetext": formatValue(current),
+            value: current,
+            onChange: change
+          })
+        )
+      ]
     }
-  )), showValue && /* @__PURE__ */ React.createElement("span", { className: "text-label font-medium text-fg-primary tabular-nums shrink-0 min-w-[3ch] text-right" }, fmt(value))), showRange && /* @__PURE__ */ React.createElement("div", { className: "flex justify-between text-[11px] font-mono text-fg-muted" }, /* @__PURE__ */ React.createElement("span", null, fmt(min)), /* @__PURE__ */ React.createElement("span", null, fmt(max))));
-});
+  );
+}
 export {
   Slider
 };

package/dist/components/sparkline.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The series, oldest first. The dot marks the last value. */
+    data: number[];
+    /** The previous period, drawn dashed behind (Figma: `comparison=true`). Same length as `data` reads best. */
+    previous?: number[];
+    /** Height in px. The width follows the container. */
+    height?: number;
+}
+/**
+ * Sparkline — Figma [RDS] Content/Sparkline. The shape of a series in the space of a line, no axes: the trend beside
+ * a number. Always aria-hidden: the trend goes into the number's text or a Delta ("subiu 24% na semana").
+ * Styles: sparkline.css.
+ */
+declare function Sparkline({ data, previous, height, className, style, ...rest }: SparklineProps): react.JSX.Element;
+
+export { Sparkline, type SparklineProps };

package/dist/components/sparkline.js

@@ -0,0 +1,32 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function toPoints(values, min, max, length) {
+  const span = max - min || 1;
+  const step = length > 1 ? 100 / (length - 1) : 0;
+  return values.map((value, index) => ({ x: index * step, y: 100 - (value - min) / span * 100 }));
+}
+const path = (points) => points.map((p, i) => `${i ? "L" : "M"}${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(" ");
+function Sparkline(_a) {
+  var _b = _a, { data, previous, height = 32, className, style } = _b, rest = __objRest(_b, ["data", "previous", "height", "className", "style"]);
+  var _a2;
+  const all = previous ? [...data, ...previous] : data;
+  const min = Math.min(...all);
+  const max = Math.max(...all);
+  const length = Math.max(data.length, (_a2 = previous == null ? void 0 : previous.length) != null ? _a2 : 0);
+  const current = toPoints(data, min, max, length);
+  const last = current[current.length - 1];
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ "aria-hidden": "true" }, rest), { className: ["rds-sparkline", className].filter(Boolean).join(" "), style: __spreadValues({ height }, style), children: /* @__PURE__ */ jsxs("div", { className: "rds-sparkline__area", children: [
+    /* @__PURE__ */ jsxs("svg", { className: "rds-sparkline__svg", viewBox: "0 0 100 100", preserveAspectRatio: "none", focusable: "false", children: [
+      previous && /* @__PURE__ */ jsx("path", { className: "rds-sparkline__previous", d: path(toPoints(previous, min, max, length)) }),
+      /* @__PURE__ */ jsx("path", { className: "rds-sparkline__line", d: path(current) })
+    ] }),
+    last && /* @__PURE__ */ jsx("span", { className: "rds-sparkline__dot", style: { left: `${last.x}%`, top: `${last.y}%` } })
+  ] }) }));
+}
+export {
+  Sparkline
+};

package/dist/components/spinner.d.ts

@@ -1,14 +1,22 @@
 import * as react from 'react';
+import { HTMLAttributes } from 'react';
 
-type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type SpinnerColor = 'current' | 'brand' | 'muted' | 'inverse';
-interface SpinnerProps {
+type SpinnerSize = 'sm' | 'default' | 'lg';
+type SpinnerTone = 'default' | 'inverse';
+interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** sm 16 (inside a button or field), default 24 (next to text), lg 32 (alone in an empty area). */
     size?: SpinnerSize;
-    color?: SpinnerColor;
-    /** Texto pra leitor de tela. default = "Carregando…". */
+    /** default on light surfaces; inverse on the dark brand band or a dark veil. */
+    tone?: SpinnerTone;
+    /** What is happening (Figma: `label`). Always the accessible name; shown next to the ring with `showLabel`. */
     label?: string;
-    className?: string;
+    /** Show the label next to the ring (Figma: `showLabel`). */
+    showLabel?: boolean;
 }
-declare function Spinner({ size, color, label, className, }: SpinnerProps): react.JSX.Element;
+/**
+ * Spinner — Figma [RDS] Indicators/Spinner. A wait without a known end (role="status"): a ring and a turning quarter
+ * arc. When the wait can be measured, use the Progress. Styles: spinner.css.
+ */
+declare function Spinner({ size, tone, label, showLabel, className, ...rest }: SpinnerProps): react.JSX.Element;
 
-export { Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize };
+export { Spinner, type SpinnerProps, type SpinnerSize, type SpinnerTone };

package/dist/components/spinner.js

@@ -1,35 +1,38 @@
-import "../chunk-ORMEWXMH.js";
-const SIZE = {
-  xs: "size-3",
-  sm: "size-4",
-  md: "size-5",
-  lg: "size-6",
-  xl: "size-8"
-};
-const COLOR = {
-  current: "text-current",
-  brand: "text-brand-primary",
-  muted: "text-fg-muted",
-  inverse: "text-fg-inverse"
-};
-function Spinner({
-  size = "md",
-  color = "current",
-  label = "Carregando\u2026",
-  className = ""
-}) {
-  return /* @__PURE__ */ React.createElement("span", { role: "status", "aria-label": label, className: "inline-flex" }, /* @__PURE__ */ React.createElement(
-    "svg",
-    {
-      className: ["animate-spin", SIZE[size], COLOR[color], className].join(" "),
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      "aria-hidden": "true"
-    },
-    /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3" }),
-    /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-  ), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, label));
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Spinner(_a) {
+  var _b = _a, {
+    size = "default",
+    tone = "default",
+    label = "Carregando\u2026",
+    showLabel = false,
+    className
+  } = _b, rest = __objRest(_b, [
+    "size",
+    "tone",
+    "label",
+    "showLabel",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    __spreadProps(__spreadValues({}, rest), {
+      role: "status",
+      "aria-label": showLabel ? void 0 : label,
+      className: ["rds-spinner", `rds-spinner--${size}`, `rds-spinner--${tone}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("svg", { className: "rds-spinner__ring", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("circle", { className: "rds-spinner__track", cx: "12", cy: "12", r: "10.5", fill: "none", strokeWidth: "3" }),
+          /* @__PURE__ */ jsx("path", { className: "rds-spinner__indicator", d: "M12 1.5 A10.5 10.5 0 0 1 22.5 12", fill: "none", strokeWidth: "3", strokeLinecap: "round" })
+        ] }),
+        showLabel && /* @__PURE__ */ jsx("span", { className: "rds-spinner__label", children: label })
+      ]
+    })
+  );
 }
 export {
   Spinner

package/dist/components/star-rating.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type StarRatingSize = 'sm' | 'default' | 'lg';
+interface StarRatingProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** 0 to 5, rounded to the nearest half (Figma: `value`). */
+    value: number;
+    /** sm: 16 stars and 12 text; default: 20 and 14; lg: 24 and 14 (Figma: `size`). */
+    size?: StarRatingSize;
+    /**
+     * The written grade, such as the value and how many reviews (Figma: `showLabel` + `label`): "4,5 (128
+     * avaliações)". Show it: the yellow star alone has too little contrast to be the only cue.
+     */
+    label?: ReactNode;
+}
+/**
+ * StarRating — Figma [RDS] Indicators/StarRating. The average rating in stars, read only: the stars are one image
+ * named "Nota 4,5 de 5". For the person to give a grade, it is another component. Styles: star-rating.css.
+ */
+declare function StarRating({ value, size, label, className, ...rest }: StarRatingProps): react.JSX.Element;
+
+export { StarRating, type StarRatingProps, type StarRatingSize };

package/dist/components/star-rating.js

@@ -0,0 +1,25 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StarFilledIcon, StarIcon } from "./internal/icons.js";
+const format = (n) => n.toLocaleString("pt-BR", { maximumFractionDigits: 1 });
+function StarRating(_a) {
+  var _b = _a, { value, size = "default", label, className } = _b, rest = __objRest(_b, ["value", "size", "label", "className"]);
+  const rounded = Math.round(Math.min(Math.max(value, 0), 5) * 2) / 2;
+  return /* @__PURE__ */ jsxs("span", __spreadProps(__spreadValues({}, rest), { className: ["rds-rating", `rds-rating--${size}`, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-rating__stars", role: "img", "aria-label": `Nota ${format(rounded)} de 5`, children: [1, 2, 3, 4, 5].map((i) => {
+      const fill = rounded >= i ? "full" : rounded >= i - 0.5 ? "half" : "empty";
+      return /* @__PURE__ */ jsxs("span", { className: `rds-rating__star rds-rating__star--${fill}`, "aria-hidden": "true", children: [
+        fill !== "full" && /* @__PURE__ */ jsx("span", { className: "rds-rating__empty", children: /* @__PURE__ */ jsx(StarIcon, {}) }),
+        fill !== "empty" && /* @__PURE__ */ jsx("span", { className: "rds-rating__fill", children: /* @__PURE__ */ jsx(StarFilledIcon, {}) })
+      ] }, i);
+    }) }),
+    label && /* @__PURE__ */ jsx("span", { className: "rds-rating__label", children: label })
+  ] }));
+}
+export {
+  StarRating
+};

package/dist/components/stat.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** What the number means: money in (positive), a loss or a lack (negative), a counter that asks for attention, zero. */
+type StatTone = 'default' | 'positive' | 'negative' | 'warning' | 'muted';
+interface StatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What is counted (Figma: `label`): "Pedidos no mês". */
+    label: ReactNode;
+    /** The number, already formatted by the caller (Figma: `value`): "1.284", "R$ 48.320". */
+    value: ReactNode;
+    /** Paints the number (Figma: `tone`). */
+    tone?: StatTone;
+    /** A line under the number (Figma: `showCaption` + `caption`): "vs. 1.142 em agosto". */
+    caption?: ReactNode;
+    /** The change, a Delta beside the number (Figma: `showDelta` + the exposed Delta). */
+    delta?: ReactNode;
+    /** The trend, a Sparkline under the text (Figma: `showSparkline` + the exposed Sparkline). */
+    sparkline?: ReactNode;
+    /**
+     * On its own card surface with a border (Figma: `framed=true`, the default). Inside a SummaryBar it is false by
+     * default: the cell of the strip, no border.
+     */
+    framed?: boolean;
+}
+/** Set by the SummaryBar: a Stat inside it is a cell (framed=false) unless it says otherwise. */
+declare const StatFramedDefault: react.Context<boolean>;
+/**
+ * Stat — Figma [RDS] Content/Stat. A number that matters, with its label, the change (Delta) and, when it helps,
+ * the trend (Sparkline). Alone it is a card; in a SummaryBar it is a cell. Styles: stat.css.
+ */
+declare function Stat({ label, value, tone, caption, delta, sparkline, framed, className, ...rest }: StatProps): react.JSX.Element;
+
+export { Stat, StatFramedDefault, type StatProps, type StatTone };

package/dist/components/stat.js

@@ -0,0 +1,29 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const StatFramedDefault = createContext(true);
+function Stat(_a) {
+  var _b = _a, { label, value, tone = "default", caption, delta, sparkline, framed, className } = _b, rest = __objRest(_b, ["label", "value", "tone", "caption", "delta", "sparkline", "framed", "className"]);
+  const framedDefault = useContext(StatFramedDefault);
+  const isFramed = framed != null ? framed : framedDefault;
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-stat", `rds-stat--${tone}`, isFramed && "rds-stat--framed", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-stat__pair", children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-stat__label", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "rds-stat__row", children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-stat__value", children: value }),
+        delta
+      ] }),
+      caption && /* @__PURE__ */ jsx("span", { className: "rds-stat__caption", children: caption })
+    ] }),
+    sparkline
+  ] }));
+}
+export {
+  Stat,
+  StatFramedDefault
+};

package/dist/components/status.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Figma calls this property `style`: outline (white pill with a hairline, for coloured bands), soft (light plate
+ * with the tone's dark text, for dark backgrounds), fill (the tone's plate, for neutral backgrounds).
+ */
+type StatusVariant = 'outline' | 'soft' | 'fill';
+type StatusSize = 'default' | 'sm';
+interface StatusProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The state, in one or two words (Figma: `label`). The text says the state; the dot only adds colour. */
+    children: ReactNode;
+    /** neutral (a record: draft, closed), info (in progress), success (done), warning (pending), danger (failed). */
+    tone?: StatusTone;
+    variant?: StatusVariant;
+    /** default 32 tall; sm 24 (dot 6), for narrow cards and table rows. */
+    size?: StatusSize;
+}
+/**
+ * Status — Figma [RDS] Indicators/Status. A state that changes over time ("Em análise", "Concluído"): a pill with a
+ * dot and the word. A fixed attribute is a Badge. When it changes without a reload, put aria-live="polite" on the
+ * surrounding region, not here. Styles: status.css.
+ */
+declare function Status({ tone, variant, size, children, className, ...rest }: StatusProps): react.JSX.Element;
+
+export { Status, type StatusProps, type StatusSize, type StatusTone, type StatusVariant };

package/dist/components/status.js

@@ -0,0 +1,34 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Status(_a) {
+  var _b = _a, {
+    tone = "neutral",
+    variant = "outline",
+    size = "default",
+    children,
+    className
+  } = _b, rest = __objRest(_b, [
+    "tone",
+    "variant",
+    "size",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-status", `rds-status--${tone}-${variant}`, `rds-status--${size}`, className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-status__dot", "aria-hidden": "true" }),
+        children
+      ]
+    })
+  );
+}
+export {
+  Status
+};

package/dist/components/step-progress.d.ts

@@ -1,12 +1,19 @@
 import * as react from 'react';
+import { HTMLAttributes } from 'react';
 
-interface StepProgressProps {
-    /** Zero-based current step index */
-    current: number;
-    /** Total number of steps */
+interface StepProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The step the person is on, from 1 (Figma: `step`, "2 of 4"). */
+    step: number;
+    /** How many steps the flow has (Figma: the "of 4"). */
     total: number;
-    className?: string;
+    /** The bar's name for screen readers: what the flow is. */
+    'aria-label'?: string;
 }
-declare function StepProgress({ current, total, className }: StepProgressProps): react.JSX.Element;
+/**
+ * StepProgress — Figma [RDS] Indicators/StepProgress. The thin bar of a flow in steps (sign-up, onboarding): how much
+ * is done. It has no text; "Passo 2 de 4" goes outside, in the title. Read as a progressbar, "Passo 2 de 4".
+ * Named steps are the Stepper. Styles: step-progress.css.
+ */
+declare function StepProgress({ step, total, className, 'aria-label': ariaLabel, ...rest }: StepProgressProps): react.JSX.Element;
 
 export { StepProgress, type StepProgressProps };

package/dist/components/step-progress.js

@@ -1,22 +1,25 @@
-import "../chunk-ORMEWXMH.js";
-function StepProgress({ current, total, className = "" }) {
-  const pct = Math.round((current + 1) / total * 100);
-  return /* @__PURE__ */ React.createElement(
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+function StepProgress(_a) {
+  var _b = _a, { step, total, className, "aria-label": ariaLabel = "Progresso" } = _b, rest = __objRest(_b, ["step", "total", "className", "aria-label"]);
+  const safeTotal = Math.max(1, total);
+  const current = Math.min(Math.max(step, 0), safeTotal);
+  return /* @__PURE__ */ jsx(
     "div",
-    {
-      className: ["w-full h-1.5 rounded-full overflow-hidden [background:var(--border-subtle)]", className].join(" "),
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-step-progress", className].filter(Boolean).join(" "),
       role: "progressbar",
-      "aria-valuenow": current + 1,
-      "aria-valuemin": 1,
-      "aria-valuemax": total
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "h-full rounded-full transition-all duration-300 ease-out [background:var(--brand-primary)]",
-        style: { width: `${pct}%` }
-      }
-    )
+      "aria-label": ariaLabel,
+      "aria-valuenow": current,
+      "aria-valuemin": 0,
+      "aria-valuemax": safeTotal,
+      "aria-valuetext": `Passo ${current} de ${safeTotal}`,
+      children: /* @__PURE__ */ jsx("div", { className: "rds-step-progress__fill", style: { width: `${current / safeTotal * 100}%` } })
+    })
   );
 }
 export {

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 };