@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/slider.d.ts

@@ -1,32 +1,30 @@
 import * as react from 'react';
-import { InputHTMLAttributes } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
 
-/**
- * Slider — input range single (sem range duplo). Inspirado em M3 Slider.
- *
- * Uso:
- *   <Slider value={vol} onChange={setVol} min={0} max={100} />
- *   <Slider value={qty} onChange={setQty} min={1} max={50} step={1} showValue />
- *   <Slider value={pct} onChange={setPct} formatValue={v => `${v}%`} showValue />
- *
- * Sem range duplo por enquanto (M3 e shadcn separam em RangeSlider). Adicionar
- * componente próprio quando precisar.
- */
-interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'size'> {
-    value: number;
-    onChange: (value: number) => void;
+interface SliderProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'children' | 'size'> {
+    /** What is chosen ("Volume por dia") (Figma: `showLabel` + `label`). Without it, pass aria-label. */
+    label?: ReactNode;
+    /** The number beside the label (Figma: `showValue`). On by default: dragging without seeing the number is a guess. */
+    showValue?: boolean;
+    /** Controlled value (Figma: `value`). */
+    value?: number;
+    /** Uncontrolled: the value at first. */
+    defaultValue?: number;
+    /** Called with the new number on every change. */
+    onValueChange?: (value: number) => void;
     min?: number;
     max?: number;
+    /** The step of the arrows (Figma: 5 in 5). */
     step?: number;
-    /** Mostra valor atual à direita. */
-    showValue?: boolean;
-    /** Formata valor (ex: `v => `R$ ${v}``). */
+    /** How the number reads, on screen and for screen readers ("75%", "1.500 por dia"). */
     formatValue?: (value: number) => string;
-    /** Mostra ticks min/max abaixo. */
-    showRange?: boolean;
-    size?: 'sm' | 'md';
-    className?: string;
 }
-declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * Slider — Figma [RDS] Forms/Slider. A value in a known range where close is good enough: a native
+ * <input type="range">. The arrows move a step, PageUp/PageDown a bigger one, Home and End go to the ends. The
+ * thumb is 20, the touch area 44. Disabled is the native one (Figma: `state`). A range of two thumbs is not in
+ * the Figma yet. Styles: slider.css.
+ */
+declare function Slider({ label, showValue, value, defaultValue, onValueChange, min, max, step, formatValue, id, disabled, className, style, onChange, ...input }: SliderProps): react.JSX.Element;
 
 export { Slider, type SliderProps };

package/dist/components/slider.js

@@ -1,93 +1,88 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-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 { 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__ */ jsxs("div", { className: ["flex flex-col gap-2", className].join(" "), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center", style: { height: THUMB_SIZE[size] }, children: [
+  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",
+    {
+      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",
-          __spreadValues({
-            ref,
-            id,
+          __spreadProps(__spreadValues({}, input), {
+            id: controlId,
             type: "range",
+            className: "rds-slider__input",
             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__ */ jsx(
-          "div",
-          {
-            "aria-hidden": true,
-            className: "absolute inset-x-0 rounded-full bg-stroke-default pointer-events-none",
-            style: { height: TRACK_HEIGHT[size] }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": true,
-            className: "absolute left-0 rounded-full bg-brand-primary pointer-events-none",
-            style: { height: TRACK_HEIGHT[size], width: `${pct}%` }
-          }
+            "aria-valuetext": formatValue(current),
+            value: current,
+            onChange: change
+          })
         )
-      ] }),
-      showValue && /* @__PURE__ */ jsx("span", { className: "text-label font-medium text-fg-primary tabular-nums shrink-0 min-w-[3ch] text-right", children: fmt(value) })
-    ] }),
-    showRange && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[11px] font-mono text-fg-muted", children: [
-      /* @__PURE__ */ jsx("span", { children: fmt(min) }),
-      /* @__PURE__ */ jsx("span", { children: 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,41 +1,38 @@
-import "../chunk-ORMEWXMH.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsxs("span", { role: "status", "aria-label": label, className: "inline-flex", children: [
-    /* @__PURE__ */ jsxs(
-      "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",
-        children: [
-          /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3" }),
-          /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
-  ] });
+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,23 +1,25 @@
-import "../chunk-ORMEWXMH.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
 import { jsx } from "react/jsx-runtime";
-function StepProgress({ current, total, className = "" }) {
-  const pct = Math.round((current + 1) / total * 100);
+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,
-      children: /* @__PURE__ */ jsx(
-        "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 {