@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/popover.js

@@ -1,144 +1,43 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useId } from "react";
-import { createPortal } from "react-dom";
-function calcPosition(triggerRect, popRect, placement, offset) {
-  const { innerWidth: vw, innerHeight: vh } = window;
-  let [side, cross = "center"] = placement.split("-");
-  let top = 0, left = 0;
-  const place = (s, c) => {
-    if (s === "bottom") top = triggerRect.bottom + offset;
-    else if (s === "top") top = triggerRect.top - popRect.height - offset;
-    else if (s === "left") {
-      left = triggerRect.left - popRect.width - offset;
-    } else if (s === "right") {
-      left = triggerRect.right + offset;
-    }
-    if (s === "top" || s === "bottom") {
-      if (c === "start") left = triggerRect.left;
-      else if (c === "end") left = triggerRect.right - popRect.width;
-      else left = triggerRect.left + (triggerRect.width - popRect.width) / 2;
-    } else {
-      if (c === "start") top = triggerRect.top;
-      else if (c === "end") top = triggerRect.bottom - popRect.height;
-      else top = triggerRect.top + (triggerRect.height - popRect.height) / 2;
-    }
-  };
-  place(side, cross);
-  if (side === "bottom" && top + popRect.height > vh) {
-    side = "top";
-    place(side, cross);
-  } else if (side === "top" && top < 0) {
-    side = "bottom";
-    place(side, cross);
-  }
-  if (side === "right" && left + popRect.width > vw) {
-    side = "left";
-    place(side, cross);
-  } else if (side === "left" && left < 0) {
-    side = "right";
-    place(side, cross);
-  }
-  left = Math.max(8, Math.min(left, vw - popRect.width - 8));
-  top = Math.max(8, Math.min(top, vh - popRect.height - 8));
-  return { top, left, placement: `${side}${cross !== "center" ? `-${cross}` : ""}` };
-}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 function Popover({
   trigger,
+  title,
   children,
-  placement = "bottom-start",
-  offset = 4,
-  open: openProp,
+  side = "bottom",
+  align = "start",
+  open,
+  defaultOpen,
   onOpenChange,
-  closeOnOutsideClick = true,
-  closeOnEsc = true,
-  className = "",
-  triggerClassName
+  className,
+  "aria-label": ariaLabel
 }) {
-  var _a, _b;
-  const [internalOpen, setInternalOpen] = useState(false);
-  const [position, setPosition] = useState(null);
-  const [mounted, setMounted] = useState(false);
-  const triggerRef = useRef(null);
-  const popRef = useRef(null);
-  const id = useId();
-  const isControlled = openProp !== void 0;
-  const open = isControlled ? openProp : internalOpen;
-  const setOpen = (next) => {
-    if (!isControlled) setInternalOpen(next);
-    onOpenChange == null ? void 0 : onOpenChange(next);
-  };
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    if (!open || !triggerRef.current || !popRef.current) return;
-    const update = () => {
-      if (!triggerRef.current || !popRef.current) return;
-      const trig = triggerRef.current.getBoundingClientRect();
-      const pop = popRef.current.getBoundingClientRect();
-      setPosition(calcPosition(trig, pop, placement, offset));
-    };
-    update();
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [open, placement, offset]);
-  useEffect(() => {
-    if (!open) return;
-    const handleClick = (e) => {
-      var _a2, _b2;
-      if (!closeOnOutsideClick) return;
-      const t = e.target;
-      if (((_a2 = popRef.current) == null ? void 0 : _a2.contains(t)) || ((_b2 = triggerRef.current) == null ? void 0 : _b2.contains(t))) return;
-      setOpen(false);
-    };
-    const handleKey = (e) => {
-      if (closeOnEsc && e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    document.addEventListener("keydown", handleKey);
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-      document.removeEventListener("keydown", handleKey);
-    };
-  }, [open, closeOnOutsideClick, closeOnEsc]);
-  const close = () => setOpen(false);
-  const toggle = () => setOpen(!open);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      PopoverPrimitive.Content,
       {
-        ref: triggerRef,
-        onClick: toggle,
-        role: "none",
-        className: triggerClassName != null ? triggerClassName : "inline-block",
-        children: trigger
+        side,
+        align,
+        sideOffset: 8,
+        collisionPadding: 16,
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : ariaLabel,
+        className: ["rds-popover", className].filter(Boolean).join(" "),
+        children: [
+          title && /* @__PURE__ */ jsx("p", { id: titleId, className: "rds-popover__title", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "rds-popover__body", children })
+        ]
       }
-    ),
-    mounted && open && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: popRef,
-          id,
-          className: ["fixed z-[1000]", className].join(" "),
-          style: {
-            top: (_a = position == null ? void 0 : position.top) != null ? _a : -9999,
-            left: (_b = position == null ? void 0 : position.left) != null ? _b : -9999,
-            visibility: position ? "visible" : "hidden"
-          },
-          children: typeof children === "function" ? children({ close }) : children
-        }
-      ),
-      document.body
-    )
+    ) })
   ] });
 }
+const PopoverClose = PopoverPrimitive.Close;
 export {
-  Popover
+  Popover,
+  PopoverClose
 };

package/dist/components/pricing-card.d.ts

@@ -1,42 +1,26 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-/**
- * PricingCard — cartão de plano para páginas de preço (marketing + billing).
- *
- * Props-based para casar com o shape de um catálogo (`/api/public/plans`):
- * nome, preço já formatado, lista de features e um slot de CTA (o consumidor
- * injeta o próprio link/botão — o DS não conhece roteamento nem analytics).
- *
- * `recommended` inverte a superfície (destaque) e mostra o selo de recomendação.
- * `badge` é um acento independente (ex.: "14 dias grátis") em outline.
- *
- *   <PricingCard
- *     name="Essencial" price="R$49,90" period="/mês"
- *     description="Para quem vende todo dia."
- *     features={['Produtos ilimitados', 'Controle de estoque']}
- *     recommended
- *     cta={<a href="/register">Começar</a>}
- *   />
- */
+/** @deprecated Use PricingPlanProps. */
 interface PricingCardProps {
     name: string;
-    /** Preço já formatado pelo consumidor (ex.: "R$49,90", "R$0", "Grátis"). */
+    /** Price already formatted by the caller ("R$49,90", "Grátis"). */
     price: string;
-    /** Sufixo do preço (ex.: "/mês"). Omitido em planos sem recorrência. */
     period?: string;
     description?: string;
     features: string[];
-    /** Plano em destaque: superfície invertida + selo de recomendação. */
     recommended?: boolean;
-    /** Texto do selo de recomendação. default = "Recomendado". */
+    /** Default "Recomendado". */
     recommendedLabel?: string;
-    /** Selo de acento independente do destaque (ex.: trial). Renderiza em outline. */
+    /** Ignored: the Figma [RDS] plan has one badge only, the recommended one. */
     badge?: string;
-    /** Slot do CTA — o consumidor injeta <a>/<Link>/<button> já estilizado ou nu. */
     cta: ReactNode;
     className?: string;
 }
-declare function PricingCard({ name, price, period, description, features, recommended, recommendedLabel, badge, cta, className, }: PricingCardProps): react.JSX.Element;
+/**
+ * @deprecated Use PricingPlan (Figma [RDS] Blocks/.pricing/plan), inside a Pricing. A thin wrapper over it: every
+ * prop passes through except `badge`, which the Figma does not have.
+ */
+declare function PricingCard({ badge: _badge, ...props }: PricingCardProps): react.JSX.Element;
 
 export { PricingCard, type PricingCardProps };

package/dist/components/pricing-card.js

@@ -1,43 +1,12 @@
-import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-const CHECK_TONE = {
-  recommended: "text-brand-on-accent",
-  default: "text-brand-accent"
-};
-function PricingCard({
-  name,
-  price,
-  period,
-  description,
-  features,
-  recommended = false,
-  recommendedLabel = "Recomendado",
-  badge,
-  cta,
-  className = ""
-}) {
-  const surface = recommended ? "bg-surface-invert text-fg-inverse border border-transparent" : "bg-surface-default text-fg-primary border border-stroke-default";
-  const nameTone = recommended ? "text-fg-inverse/70" : "text-fg-muted";
-  const descTone = recommended ? "text-fg-inverse/70" : "text-fg-muted";
-  const periodTone = recommended ? "text-fg-inverse/60" : "text-fg-muted";
-  const featTone = recommended ? "text-fg-inverse/85" : "text-fg-secondary";
-  const check = recommended ? CHECK_TONE.recommended : CHECK_TONE.default;
-  return /* @__PURE__ */ jsxs("div", { className: `relative flex flex-col rounded-(--radius-card) p-6 ${surface} ${className}`, children: [
-    recommended && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-(--radius-badge) bg-brand-accent px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand-on-accent", children: recommendedLabel }),
-    badge && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 right-4 whitespace-nowrap rounded-(--radius-badge) border border-brand-accent bg-surface-default px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand-accent", children: badge }),
-    /* @__PURE__ */ jsx("p", { className: `text-caption font-semibold uppercase tracking-widest ${nameTone}`, children: name }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 mb-1 flex items-baseline gap-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold leading-none tracking-tight tabular-nums", children: price }),
-      period && /* @__PURE__ */ jsx("span", { className: `text-caption ${periodTone}`, children: period })
-    ] }),
-    description && /* @__PURE__ */ jsx("p", { className: `mb-5 min-h-10 text-caption ${descTone}`, children: description }),
-    /* @__PURE__ */ jsx("div", { className: "mt-1", children: cta }),
-    /* @__PURE__ */ jsx("ul", { className: "mt-5 space-y-2", children: features.map((f) => /* @__PURE__ */ jsxs("li", { className: `flex items-start gap-2 text-caption ${featTone}`, children: [
-      /* @__PURE__ */ jsx(Check, { size: 14, className: `mt-0.5 shrink-0 ${check}`, "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx("span", { children: f })
-    ] }, f)) })
-  ] });
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { PricingPlan } from "./pricing.js";
+function PricingCard(_a) {
+  var _b = _a, { badge: _badge } = _b, props = __objRest(_b, ["badge"]);
+  return /* @__PURE__ */ jsx(PricingPlan, __spreadValues({}, props));
 }
 export {
   PricingCard

package/dist/components/pricing.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface PricingProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** A short label above the title (Figma: `eyebrow`). */
+    eyebrow?: ReactNode;
+    /** The block's title, an h2 that names the section (Figma: `title`). */
+    title: ReactNode;
+    description?: ReactNode;
+    /** The PricingPlans (Figma: slot `plans`): side by side, stacked below 640 of container width. */
+    children: ReactNode;
+}
+/**
+ * Pricing — Figma [RDS] Blocks/Pricing. The pricing block of a public page: label, title, a sentence and the plans,
+ * one of them recommended. Adapts to the width of its container (Figma: `screen`). Styles: pricing.css.
+ */
+declare function Pricing({ eyebrow, title, description, children, className, ...rest }: PricingProps): react.JSX.Element;
+interface PricingPlanProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The plan's name, an h3 shown in capitals (Figma: `name`). */
+    name: ReactNode;
+    /** The price, already formatted by the caller (Figma: `price`): "R$ 49,90", "Grátis". */
+    price: ReactNode;
+    /** After the price (Figma: `showPeriod` + `period`): "/mês". */
+    period?: ReactNode;
+    /** Who it is for (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    /** What it includes, with a check each (Figma: `feature1`…`feature5`). Up to five reads best. */
+    features?: ReactNode[];
+    /**
+     * The highlighted plan (Figma: `recommended`): the surface inverts and the badge shows, half out of the top. One per
+     * Pricing.
+     */
+    recommended?: boolean;
+    /** The badge's text when recommended. */
+    recommendedLabel?: ReactNode;
+    /**
+     * The call to action (Figma: the exposed Button): a Button, a link through asChild. The Figma uses tone="action"
+     * variant="outline" on a plain plan and tone="inverse" on the recommended one.
+     */
+    cta?: ReactNode;
+}
+/**
+ * PricingPlan — Figma [RDS] Blocks/.pricing/plan. The card of one plan: name, price and period, the sentence, the
+ * call to action and the list of features. Inside a Pricing, or alone. Styles: pricing.css.
+ */
+declare function PricingPlan({ name, price, period, description, features, recommended, recommendedLabel, cta, className, ...rest }: PricingPlanProps): react.JSX.Element;
+
+export { Pricing, PricingPlan, type PricingPlanProps, type PricingProps };

package/dist/components/pricing.js

@@ -0,0 +1,64 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useId } from "react";
+import { Badge } from "./badge.js";
+import { BlockHeading } from "./internal/block.js";
+import { CheckIcon } from "./internal/icons.js";
+function Pricing(_a) {
+  var _b = _a, { eyebrow, title, description, children, className } = _b, rest = __objRest(_b, ["eyebrow", "title", "description", "children", "className"]);
+  const titleId = useId();
+  return /* @__PURE__ */ jsx("section", __spreadProps(__spreadValues({ "aria-labelledby": titleId }, rest), { className: ["rds-block", "rds-pricing", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs("div", { className: "rds-block__inner", children: [
+    /* @__PURE__ */ jsx(BlockHeading, { eyebrow, title, description, titleId }),
+    /* @__PURE__ */ jsx("ul", { className: "rds-pricing__plans", children: Children.toArray(children).map((plan, i) => /* @__PURE__ */ jsx("li", { className: "rds-pricing__slot", children: plan }, i)) })
+  ] }) }));
+}
+function PricingPlan(_c) {
+  var _d = _c, {
+    name,
+    price,
+    period,
+    description,
+    features = [],
+    recommended = false,
+    recommendedLabel = "Recomendado",
+    cta,
+    className
+  } = _d, rest = __objRest(_d, [
+    "name",
+    "price",
+    "period",
+    "description",
+    "features",
+    "recommended",
+    "recommendedLabel",
+    "cta",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-pricing-plan", recommended && "rds-pricing-plan--recommended", className].filter(Boolean).join(" "), children: [
+    recommended && /* @__PURE__ */ jsx(Badge, { tone: "accent", className: "rds-pricing-plan__badge", children: recommendedLabel }),
+    /* @__PURE__ */ jsxs("div", { className: "rds-pricing-plan__header", children: [
+      /* @__PURE__ */ jsx("h3", { className: "rds-pricing-plan__name", children: name }),
+      /* @__PURE__ */ jsxs("div", { className: "rds-pricing-plan__price-block", children: [
+        /* @__PURE__ */ jsxs("p", { className: "rds-pricing-plan__price-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-pricing-plan__price", children: price }),
+          period && /* @__PURE__ */ jsx("span", { className: "rds-pricing-plan__period", children: period })
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "rds-pricing-plan__description", children: description })
+      ] })
+    ] }),
+    cta && /* @__PURE__ */ jsx("div", { className: "rds-pricing-plan__cta", children: cta }),
+    features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "rds-pricing-plan__features", children: features.map((feature, i) => /* @__PURE__ */ jsxs("li", { className: "rds-pricing-plan__feature", children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-pricing-plan__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+      /* @__PURE__ */ jsx("span", { children: feature })
+    ] }, i)) })
+  ] }));
+}
+export {
+  Pricing,
+  PricingPlan
+};

package/dist/components/progress.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** task: something moving to the end (upload, import). measure: a value inside a known range (quota used). */
+type ProgressKind = 'task' | 'measure';
+type ProgressSize = 'default' | 'sm';
+interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 0 to `max` (Figma: `value`, 0 to 100 in steps of 5; the code takes any value). */
+    value: number;
+    max?: number;
+    /** What the bar measures (Figma: `label`). Always required: hidden with `showLabel={false}`, it still names the bar. */
+    label: string;
+    /** Show the label above the bar (Figma: `showLabel`). */
+    showLabel?: boolean;
+    /** Show the value on the right (Figma: `showValue`). */
+    showValue?: boolean;
+    /** The value as text, shown and read ("75%", "750 de 1.000"). Defaults to the percentage. */
+    valueText?: ReactNode;
+    /** task → role="progressbar"; measure → role="meter". */
+    kind?: ProgressKind;
+    /** default: 8px bar; sm: 4px, for dense lists (Figma: `size`). */
+    size?: ProgressSize;
+}
+/**
+ * Progress — Figma [RDS] Indicators/Progress. A bar with a value: the track is the brand tint, the fill the first
+ * data colour. A wait without a known end is the Spinner. Styles: progress.css.
+ */
+declare function Progress({ value, max, label, showLabel, showValue, valueText, kind, size, className, ...rest }: ProgressProps): react.JSX.Element;
+
+export { Progress, type ProgressKind, type ProgressProps, type ProgressSize };

package/dist/components/progress.js

@@ -0,0 +1,57 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+function Progress(_a) {
+  var _b = _a, {
+    value,
+    max = 100,
+    label,
+    showLabel = true,
+    showValue = true,
+    valueText,
+    kind = "task",
+    size = "default",
+    className
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "max",
+    "label",
+    "showLabel",
+    "showValue",
+    "valueText",
+    "kind",
+    "size",
+    "className"
+  ]);
+  const labelId = useId();
+  const clamped = Math.min(Math.max(value, 0), max);
+  const percent = max > 0 ? clamped / max * 100 : 0;
+  const text = valueText != null ? valueText : `${Math.round(percent)}%`;
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-progress", `rds-progress--${size}`, className].filter(Boolean).join(" "), children: [
+    (showLabel || showValue) && /* @__PURE__ */ jsxs("div", { className: "rds-progress__row", children: [
+      showLabel && /* @__PURE__ */ jsx("span", { id: labelId, className: "rds-progress__label", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "rds-progress__value", "aria-hidden": "true", children: text })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        className: "rds-progress__track",
+        role: kind === "task" ? "progressbar" : "meter",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuetext": typeof text === "string" ? text : void 0
+      }, showLabel ? { "aria-labelledby": labelId } : { "aria-label": label }), {
+        children: /* @__PURE__ */ jsx("div", { className: "rds-progress__fill", style: { width: `${percent}%` } })
+      })
+    )
+  ] }));
+}
+export {
+  Progress
+};

package/dist/components/qr-display.d.ts

@@ -2,18 +2,23 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface QRDisplayProps {
-    /** Imagem do QR — dataURL (PNG) ou URL. Gerada por quem chama (o DS não gera QR). */
+    /** The QR image, a data URL (PNG) or a URL. The caller generates it: the design system does not draw QR codes. */
     src: string;
-    /** Texto alternativo — inclua o contexto/valor pra leitor de tela (a11y). */
+    /** What the code is, for screen readers ("QR Code do Pix de R$ 50,00"). */
     alt?: string;
-    /** Lado do QR em px. Renderize 1:1 com o tamanho gerado pra não borrar. */
+    /** The side in px. Render it 1:1 with the generated size, so it does not blur. */
     size?: number;
-    /** Conteúdo abaixo do QR (ex.: instrução curta). */
+    /** A short line under the code (an instruction). */
     caption?: ReactNode;
-    /** Slot entre o QR e a caption (ex.: <CopyField/>). */
+    /** Between the code and the caption, such as a CopyField. */
     children?: ReactNode;
     className?: string;
 }
-declare function QRDisplay({ src, alt, size, caption, children, className, }: QRDisplayProps): react.JSX.Element;
+/**
+ * QRDisplay — a composition of the Card (Figma [RDS] Content/Card): the QR code centred, what goes with it and a
+ * caption. It knows nothing of what the code means. The quiet zone comes with the image: generate it with its
+ * white margin (4 modules), because in dark mode the card around it is dark. Styles: qr-display.css.
+ */
+declare function QRDisplay({ src, alt, size, caption, children, className }: QRDisplayProps): react.JSX.Element;
 
 export { QRDisplay, type QRDisplayProps };

package/dist/components/qr-display.js

@@ -1,28 +1,12 @@
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function QRDisplay({
-  src,
-  alt = "QR Code",
-  size = 240,
-  caption,
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col items-center gap-4", className].join(" "), children: [
-    /* @__PURE__ */ jsx("div", { className: "rounded-(--radius-card) bg-white p-4 shadow-sm", children: /* @__PURE__ */ jsx(
-      "img",
-      {
-        src,
-        alt,
-        width: size,
-        height: size,
-        style: { width: size, height: size },
-        className: "block"
-      }
-    ) }),
+import { Card, CardContent } from "./card.js";
+function QRDisplay({ src, alt = "QR Code", size = 240, caption, children, className }) {
+  return /* @__PURE__ */ jsx(Card, { as: "div", className: ["rds-qr-display", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsxs(CardContent, { className: "rds-qr-display__content", children: [
+    /* @__PURE__ */ jsx("img", { className: "rds-qr-display__code", src, alt, width: size, height: size }),
     children,
-    caption && /* @__PURE__ */ jsx("div", { className: "max-w-xs text-center text-sm text-fg-secondary leading-snug", children: caption })
-  ] });
+    caption && /* @__PURE__ */ jsx("p", { className: "rds-qr-display__caption", children: caption })
+  ] }) });
 }
 export {
   QRDisplay

package/dist/components/questionnaire.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { FormHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * How the person answers. single: Radio children (the RadioGroup is made here, named by the question); card:
+ * ChoiceCard children (the ChoiceCardGroup); multiple: Checkbox children (the CheckboxGroup); text: an Input or a
+ * Textarea child, with its own label.
+ */
+type QuestionnaireAnswer = 'single' | 'card' | 'multiple' | 'text';
+interface QuestionnaireProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'title' | 'onSubmit'> {
+    /** This question's number, from 1. */
+    step: number;
+    /** How many questions. On the last one the next button becomes "Enviar". */
+    steps: number;
+    /** The question (Figma: `title`). It names the form and the group of options. */
+    title: string;
+    /** How to answer (Figma: `showDescription` + `description`). */
+    description?: ReactNode;
+    answer?: QuestionnaireAnswer;
+    /** The options, or the field (Figma: slot `choices`). */
+    children: ReactNode;
+    /** With `single` and `card`: the chosen value, controlled or at first, and the change. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** What is missing (Figma: `showError` + `error`). Tied to the options and announced. */
+    error?: ReactNode;
+    /** The back button, "Voltar" (Figma: `showBack`). */
+    onBack?: () => void;
+    /** The skip button, "Pular", only on an optional question (Figma: `showSkip`). */
+    onSkip?: () => void;
+    /** The next button ("Próxima", or "Enviar" on the last question). Enter in a field also runs it. */
+    onNext: () => void;
+}
+/**
+ * Questionnaire — Figma [RDS] Chat/Questionnaire. One question at a time, inside the conversation: the assistant
+ * asks and the person chooses. Progress on top ("Pergunta 2 de 4"), the question, the options, the error and the
+ * actions. Styles: questionnaire.css.
+ */
+declare function Questionnaire({ step, steps, title, description, answer, children, value, defaultValue, onValueChange, error, onBack, onSkip, onNext, className, ...rest }: QuestionnaireProps): react.JSX.Element;
+
+export { Questionnaire, type QuestionnaireAnswer, type QuestionnaireProps };