@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/saving-bar.js

@@ -1,70 +1,58 @@
 "use client";
-import "../chunk-ORMEWXMH.js";
-import { Loader2 } from "lucide-react";
-function SavingBar({
-  visible,
-  onSave,
-  onDiscard,
-  pending = false,
-  saveLabel = "Salvar",
-  discardLabel = "Descartar",
-  message,
-  children,
-  variant = "floating"
-}) {
-  const pill = /* @__PURE__ */ React.createElement(
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "./button.js";
+import { Loader } from "./internal/button.js";
+import { AlertIcon } from "./internal/icons.js";
+function SavingBar(_a) {
+  var _b = _a, {
+    status = "unsaved",
+    message = "Altera\xE7\xF5es n\xE3o salvas",
+    savingMessage = "Salvando\u2026",
+    errorMessage = "N\xE3o salvou. Tente de novo.",
+    onSave,
+    onDiscard,
+    saveLabel = "Salvar",
+    retryLabel = "Tentar de novo",
+    discardLabel = "Descartar",
+    className
+  } = _b, rest = __objRest(_b, [
+    "status",
+    "message",
+    "savingMessage",
+    "errorMessage",
+    "onSave",
+    "onDiscard",
+    "saveLabel",
+    "retryLabel",
+    "discardLabel",
+    "className"
+  ]);
+  const saving = status === "saving";
+  const error = status === "error";
+  return /* @__PURE__ */ jsxs(
     "div",
-    {
-      className: [
-        "flex items-center gap-3 rounded-(--radius-card) px-4 py-3",
-        "[background:var(--saving-bar-bg)]",
-        variant === "floating" ? "[box-shadow:var(--saving-bar-shadow)]" : ""
-      ].filter(Boolean).join(" ")
-    },
-    message && /* @__PURE__ */ React.createElement("span", { className: "text-label pr-1 [color:var(--saving-bar-message)]" }, message),
-    children,
-    onDiscard && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: onDiscard,
-        disabled: pending,
-        className: "rounded-(--radius-card) border px-3 py-1.5 text-label font-medium transition-colors disabled:opacity-40 [border-color:var(--saving-bar-discard-border)] [color:var(--saving-bar-discard-text)] hover:[border-color:var(--saving-bar-discard-border-hover)] hover:[color:var(--saving-bar-discard-text-hover)]"
-      },
-      discardLabel
-    ),
-    onSave && /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: onSave,
-        disabled: pending,
-        className: "rounded-(--radius-card) px-4 py-1.5 text-label font-medium transition-colors disabled:opacity-50 flex items-center gap-2 min-w-[80px] justify-center [background:var(--saving-bar-save-bg)] [color:var(--saving-bar-save-text)] hover:[background:var(--saving-bar-save-bg-hover)]"
-      },
-      pending ? /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin" }) : saveLabel
-    )
-  );
-  if (variant === "inline") {
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: [
-          "flex justify-end mt-8 transition-all duration-300 ease-out",
-          visible ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
-        ].join(" ")
-      },
-      pill
-    );
-  }
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: [
-        "fixed bottom-3 right-6 z-50 transition-all duration-300 ease-out",
-        visible ? "translate-y-0 opacity-100 pointer-events-auto" : "translate-y-4 opacity-0 pointer-events-none"
-      ].join(" ")
-    },
-    pill
+    __spreadProps(__spreadValues({
+      role: "region",
+      "aria-label": "Salvar altera\xE7\xF5es"
+    }, rest), {
+      className: ["rds-savingbar", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "rds-savingbar__message", role: "status", children: [
+          saving && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon rds-savingbar__loader", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader, {}) }),
+          error && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { children: saving ? savingMessage : error ? errorMessage : message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__actions", children: [
+          onDiscard && /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "ghost", disabled: saving, onClick: onDiscard, children: discardLabel }),
+          /* @__PURE__ */ jsx(Button, { tone: "inverse", variant: "fill", disabled: saving, onClick: onSave, children: error ? retryLabel : saveLabel })
+        ] })
+      ]
+    })
   );
 }
 export {

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

@@ -2,13 +2,27 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface SectionCardProps {
+    /** The section's name (Figma: `label`), shown in capitals. */
     label: string;
-    /** Secondary text shown beside the label (e.g. a subtitle or count) */
+    /** A short summary beside the label (Figma: `hasBadge` + `badge`): "3 campos", "preenchido". */
     badge?: string;
-    open: boolean;
-    onToggle: () => void;
+    /** Open (Figma: `open`). Controlled with `onToggle`; leave it out and use `defaultOpen` to let the card decide. */
+    open?: boolean;
+    /** Open at first, when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called with the new state when the person opens or closes it. */
+    onToggle?: (open: boolean) => void;
+    /** The heading level that fits the page's heading order. */
+    titleAs?: 'h2' | 'h3' | 'h4';
+    /** The section's fields. */
     children: ReactNode;
+    className?: string;
 }
-declare function SectionCard({ label, badge, open, onToggle, children }: SectionCardProps): react.JSX.Element;
+/**
+ * SectionCard — Figma [RDS] Content/SectionCard. A form section that opens and closes: a header with the label and a
+ * summary, the content under it when open. For long forms, one section open at a time. The header is a heading with
+ * a button (aria-expanded, aria-controls). Styles: section-card.css.
+ */
+declare function SectionCard({ label, badge, open, defaultOpen, onToggle, titleAs: Title, children, className }: SectionCardProps): react.JSX.Element;
 
 export { SectionCard, type SectionCardProps };

package/dist/components/section-card.js

@@ -1,48 +1,35 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { ChevronDown, ChevronRight } from "lucide-react";
-function SectionCard({ label, badge, open, onToggle, children }) {
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: [
-        "rounded-(--radius-card) overflow-hidden transition-colors border",
-        open ? "[border-color:var(--section-card-border-active)]" : "[border-color:var(--section-card-border)]"
-      ].join(" ")
-    },
-    /* @__PURE__ */ React.createElement(
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { ChevronDownIcon, ChevronRightIcon } from "./internal/icons.js";
+function SectionCard({ label, badge, open, defaultOpen = false, onToggle, titleAs: Title = "h3", children, className }) {
+  const [own, setOwn] = useState(defaultOpen);
+  const isOpen = open != null ? open : own;
+  const contentId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-section-card", isOpen && "rds-section-card--open", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx(Title, { className: "rds-section-card__heading", children: /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        onClick: onToggle,
-        className: [
-          "w-full flex items-center justify-between px-4 py-3 text-left transition-colors",
-          open ? "[background:var(--section-card-header-bg-active)]" : "hover:[background:var(--section-card-header-bg-hover)]"
-        ].join(" ")
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: [
-            "text-caption font-semibold uppercase tracking-wide shrink-0",
-            open ? "[color:var(--section-card-label-active)]" : "[color:var(--section-card-label)]"
-          ].join(" ")
+        className: "rds-section-card__header",
+        "aria-expanded": isOpen,
+        "aria-controls": contentId,
+        onClick: () => {
+          setOwn(!isOpen);
+          onToggle == null ? void 0 : onToggle(!isOpen);
         },
-        label
-      ), badge && /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: [
-            "text-caption truncate min-w-0",
-            open ? "[color:var(--section-card-badge-active)]" : "[color:var(--section-card-badge)]"
-          ].join(" ")
-        },
-        badge
-      )),
-      open ? /* @__PURE__ */ React.createElement(ChevronDown, { className: "w-4 h-4 shrink-0 [color:var(--section-card-chevron)]" }) : /* @__PURE__ */ React.createElement(ChevronRight, { className: "w-4 h-4 shrink-0 [color:var(--section-card-chevron)]" })
-    ),
-    open && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-4 pt-4 space-y-4 [border-top:1px_solid_var(--section-card-divider)] [background:var(--surface-default)]" }, children)
-  );
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "rds-section-card__title", children: [
+            /* @__PURE__ */ jsx("span", { className: "rds-section-card__label", children: label }),
+            badge && /* @__PURE__ */ jsx("span", { className: "rds-section-card__badge", children: badge })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "rds-section-card__chevron", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx(ChevronDownIcon, {}) : /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { id: contentId, className: "rds-section-card__content", hidden: !isOpen, children })
+  ] });
 }
 export {
   SectionCard

package/dist/components/section-header.d.ts

@@ -2,28 +2,24 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * SectionHeader — cabeçalho de seção fora de card: eyebrow (overline) opcional
- * + título + texto de apoio. Areja a página agrupando conteúdo sem moldura.
+ * SectionHeader — deprecated: a thin wrapper over the PageHeader (Figma [RDS] Navigation/PageHeader) with an h2
+ * title, kept because SettingsList composes it and the products still use it. New code uses
+ * `<PageHeader titleAs="h2" title description actions />`.
  *
- * Uso:
- *   <SectionHeader title="Seções da vitrine" />
- *   <SectionHeader eyebrow="Conteúdo da vitrine" number="02" title="Seções da vitrine" description="Ative, desative e edite o que aparece" />
- *   <SectionHeader title="Zonas" action={<Button size="sm">Adicionar</Button>} />
- *
- * O eyebrow consome os tokens --font-size/weight/letter-spacing-eyebrow — a
- * decisão de "quão pequeno/espaçado" vive em base.css, não em cada tela.
+ * action → actions. eyebrow and number (not in the Figma) still render as a line above the title. Styles: section-header.css.
  */
 interface SectionHeaderProps {
-    /** Micro-rótulo uppercase acima do título (overline/kicker). */
+    /** Small uppercase line above the title (overline). */
     eyebrow?: string;
-    /** Número de seção/etapa — prefixa o eyebrow: "02 · CONTEÚDO". */
+    /** Section or step number, before the eyebrow: "02 · CONTEÚDO". */
     number?: string;
     title: string;
     description?: string;
-    /** Slot à direita do título (ação, badge). */
+    /** Slot on the right of the title (an action, a badge). */
     action?: ReactNode;
     className?: string;
 }
+/** @deprecated Use PageHeader with titleAs="h2". */
 declare function SectionHeader({ eyebrow, number, title, description, action, className }: SectionHeaderProps): react.JSX.Element;
 
 export { SectionHeader, type SectionHeaderProps };

package/dist/components/section-header.js

@@ -1,6 +1,11 @@
 import "../chunk-ORMEWXMH.js";
-function SectionHeader({ eyebrow, number, title, description, action, className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { className: ["mb-6", className].filter(Boolean).join(" ") }, eyebrow && /* @__PURE__ */ React.createElement("p", { className: "uppercase text-fg-muted mb-1.5 [font-size:var(--font-size-eyebrow)] [font-weight:var(--font-weight-eyebrow)] [letter-spacing:var(--letter-spacing-eyebrow)]" }, number ? `${number} \xB7 ${eyebrow}` : eyebrow), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("h2", { className: "text-body font-semibold text-fg-primary" }, title), description && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted mt-1" }, description)), action && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, action)));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PageHeader } from "./page-header.js";
+function SectionHeader({ eyebrow, number, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["rds-section-header", className].filter(Boolean).join(" "), children: [
+    eyebrow && /* @__PURE__ */ jsx("p", { className: "rds-section-header__eyebrow", children: number ? `${number} \xB7 ${eyebrow}` : eyebrow }),
+    /* @__PURE__ */ jsx(PageHeader, { titleAs: "h2", title, description, actions: action })
+  ] });
 }
 export {
   SectionHeader

package/dist/components/select.d.ts

@@ -1,21 +1,49 @@
 import * as react from 'react';
-import { SelectHTMLAttributes } from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { FieldTextProps } from './internal/field.js';
 
-type SelectSize = 'sm' | 'md' | 'lg';
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-    label?: string;
-    helper?: string;
-    error?: string;
+interface SelectProps extends FieldTextProps {
+    /** The SelectItems (Figma: the Listbox slot `options`), in a clear order: alphabetical, or the most used first. */
+    children: ReactNode;
+    /** Controlled: the chosen item's value (Figma: `value`). */
+    value?: string;
+    /** Uncontrolled: the item chosen at first. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** What shows before a choice. It never counts as an answer. */
     placeholder?: string;
-    options?: {
-        value: string;
-        label: string;
-        disabled?: boolean;
-    }[];
-    size?: SelectSize;
-    required?: boolean;
-    optional?: boolean;
+    /** An icon on the left (Figma: `showLeadingIcon` + `leadingIcon`). Decorative. */
+    leadingIcon?: ReactNode;
+    /** The form field name: a hidden native select carries the value inside a form. */
+    name?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** The name when there is no visible label. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+/**
+ * Select — Figma [RDS] Forms/Select. One choice in a closed list of 5 to 15 items: a button (role combobox)
+ * that opens the Listbox in a popover (Radix Select). Enter, Space or the arrows open it; the arrows move,
+ * typing jumps to an item, Enter chooses, Escape closes. Up to 4 options, show them all (RadioGroup).
+ * Styles: select.css, internal/field.css and internal/listbox.css.
+ */
+declare function Select({ label, labelPosition, hint, error, errorMessage, required, children, value, defaultValue, onValueChange, placeholder, leadingIcon, name, disabled, id, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }: SelectProps): react.JSX.Element;
+interface SelectItemProps {
+    /** The value sent with the form. */
+    value: string;
+    /** The option text. */
+    children: ReactNode;
+    /** An icon before the text. Decorative. */
+    icon?: ReactNode;
+    /** Cannot be chosen now. An option that never applies should leave the list instead. */
+    disabled?: boolean;
+    /** The text typing jumps by, when the children are not plain text. */
+    textValue?: string;
+}
+/** One option of the Select (Figma: .listbox/option). The chosen one gets the tint and the check. */
+declare function SelectItem({ value, children, icon, disabled, textValue }: SelectItemProps): react.JSX.Element;
 
-export { Select, type SelectProps, type SelectSize };
+export { Select, SelectItem, type SelectItemProps, type SelectProps };

package/dist/components/select.js

@@ -1,140 +1,90 @@
 "use client";
-import {
-  __objRest,
-  __spreadValues
-} from "../chunk-ORMEWXMH.js";
-import {
-  Children,
-  forwardRef,
-  isValidElement,
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from "react";
-import { ChevronDown, Check } from "lucide-react";
-import { BottomSheet } from "./bottom-sheet.js";
-const SIZE = {
-  sm: { h: "h-control-sm", text: "text-caption", padL: "pl-2.5", padR: "pr-7" },
-  md: { h: "h-control-md", text: "text-label", padL: "pl-3", padR: "pr-9" },
-  lg: { h: "h-control-lg", text: "text-body", padL: "pl-4", padR: "pr-10" }
-};
-function optionsFromChildren(children) {
-  const out = [];
-  Children.forEach(children, (child) => {
-    var _a;
-    if (!isValidElement(child)) return;
-    const props = child.props;
-    if (child.type === "option" && props.value !== void 0) {
-      out.push({
-        value: String(props.value),
-        label: typeof props.children === "string" ? props.children : String((_a = props.children) != null ? _a : props.value),
-        disabled: props.disabled
-      });
-    }
-  });
-  return out;
-}
-const Select = forwardRef(function Select2(_a, ref) {
-  var _b = _a, { label, helper, error, options = [], placeholder, size = "md", required, optional, className = "", id, children } = _b, props = __objRest(_b, ["label", "helper", "error", "options", "placeholder", "size", "required", "optional", "className", "id", "children"]);
-  var _a2;
-  const generatedId = useId();
-  const selectId = id != null ? id : generatedId;
-  const sz = SIZE[size];
-  const innerRef = useRef(null);
-  const setRefs = (el) => {
-    innerRef.current = el;
-    if (typeof ref === "function") ref(el);
-    else if (ref) ref.current = el;
-  };
-  const [isXs, setIsXs] = useState(false);
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const [sheetValue, setSheetValue] = useState("");
-  useEffect(() => {
-    const mq = window.matchMedia("(max-width: 639px)");
-    const update = () => setIsXs(mq.matches);
-    update();
-    mq.addEventListener("change", update);
-    return () => mq.removeEventListener("change", update);
-  }, []);
-  const allOptions = options.length > 0 ? options : optionsFromChildren(children);
-  function openSheet() {
-    var _a3, _b2;
-    setSheetValue((_b2 = (_a3 = innerRef.current) == null ? void 0 : _a3.value) != null ? _b2 : "");
-    setSheetOpen(true);
-  }
-  function commitSheetValue(value) {
-    var _a3;
-    const el = innerRef.current;
-    setSheetOpen(false);
-    if (!el || el.value === value) return;
-    const setter = (_a3 = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")) == null ? void 0 : _a3.set;
-    setter == null ? void 0 : setter.call(el, value);
-    el.dispatchEvent(new Event("change", { bubbles: true }));
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: selectId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary" }, /* @__PURE__ */ React.createElement("span", null, label), required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"), optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)")), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    "select",
-    __spreadValues({
-      ref: setRefs,
-      id: selectId,
-      required,
-      className: [
-        "w-full rounded-(--radius-control) appearance-none",
-        "bg-surface-default text-fg-primary",
-        "border transition-colors outline-none",
-        sz.h,
-        sz.text,
-        sz.padL,
-        sz.padR,
-        error ? "border-danger focus:border-danger focus:ring-2 focus:ring-danger/20" : "border-stroke-control focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" "),
-      "aria-invalid": error ? true : void 0,
-      "aria-describedby": error ? `${selectId}-error` : helper ? `${selectId}-helper` : void 0
-    }, props),
-    placeholder && /* @__PURE__ */ React.createElement("option", { value: "", disabled: true, hidden: true }, placeholder),
-    options.map((o) => /* @__PURE__ */ React.createElement("option", { key: o.value, value: o.value, disabled: o.disabled }, o.label)),
-    children
-  ), /* @__PURE__ */ React.createElement(
-    ChevronDown,
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { FieldShell, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+import { CheckIcon, ChevronDownIcon } from "./internal/icons.js";
+function Select({
+  label,
+  labelPosition,
+  hint,
+  error,
+  errorMessage,
+  required,
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Selecione",
+  leadingIcon,
+  name,
+  disabled,
+  id,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  warnIfUnlabelled("Select", label, ariaLabel, ariaLabelledBy);
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error, errorMessage);
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Root,
     {
-      size: size === "sm" ? 14 : size === "lg" ? 18 : 16,
-      className: [
-        "absolute top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none",
-        size === "sm" ? "right-2.5" : size === "lg" ? "right-3.5" : "right-3"
-      ].join(" ")
-    }
-  ), isXs && !props.disabled && allOptions.length > 0 && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      "aria-label": (_a2 = label != null ? label : placeholder) != null ? _a2 : "Selecionar",
-      "aria-haspopup": "dialog",
-      onClick: openSheet,
-      className: "absolute inset-0 w-full h-full rounded-(--radius-control) opacity-0"
+      value,
+      defaultValue,
+      onValueChange,
+      name,
+      required,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          FieldShell,
+          {
+            kind: "rds-select",
+            controlId,
+            hintId,
+            errorId,
+            label,
+            labelPosition,
+            hint,
+            errorMessage,
+            invalid,
+            required,
+            disabled,
+            className,
+            style,
+            children: /* @__PURE__ */ jsxs(
+              SelectPrimitive.Trigger,
+              {
+                id: controlId,
+                className: "rds-field__control rds-select__trigger",
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                "aria-invalid": invalid || void 0,
+                "aria-describedby": describedBy,
+                "aria-required": required || void 0,
+                children: [
+                  leadingIcon && /* @__PURE__ */ jsx("span", { className: "rds-field__icon", "aria-hidden": "true", children: leadingIcon }),
+                  /* @__PURE__ */ jsx("span", { className: "rds-select__value", children: /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }) }),
+                  /* @__PURE__ */ jsx(SelectPrimitive.Icon, { className: "rds-field__icon rds-select__chevron", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 4, className: "rds-listbox rds-select__content", children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children }) }) })
+      ]
     }
-  )), error && /* @__PURE__ */ React.createElement("p", { id: `${selectId}-error`, className: "text-caption text-danger-text" }, error), !error && helper && /* @__PURE__ */ React.createElement("p", { id: `${selectId}-helper`, className: "text-caption text-fg-muted" }, helper), isXs && /* @__PURE__ */ React.createElement(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: label != null ? label : placeholder }, /* @__PURE__ */ React.createElement("div", { className: "pb-2" }, allOptions.map((o) => {
-    const selected = o.value === sheetValue;
-    return /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: o.value,
-        type: "button",
-        disabled: o.disabled,
-        onClick: () => commitSheetValue(o.value),
-        className: [
-          "w-full flex items-center justify-between gap-3 px-1 py-3.5 text-left text-label",
-          "border-b border-stroke-subtle last:border-0 transition-colors",
-          selected ? "font-medium text-fg-primary" : "text-fg-secondary",
-          "disabled:opacity-50 disabled:cursor-not-allowed"
-        ].join(" ")
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1" }, o.label),
-      selected && /* @__PURE__ */ React.createElement(Check, { size: 16, className: "shrink-0" })
-    );
-  }))));
-});
+  );
+}
+function SelectItem({ value, children, icon, disabled, textValue }) {
+  return /* @__PURE__ */ jsxs(SelectPrimitive.Item, { value, disabled, textValue, className: "rds-listbox__option", children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "rds-listbox__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx("span", { className: "rds-listbox__text", children }) }),
+    /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "rds-listbox__check", children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+  ] });
+}
 export {
-  Select
+  Select,
+  SelectItem
 };

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

@@ -1,35 +1,27 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-/**
- * SelectableCard — cartão CLICÁVEL genérico (tile de ação OU escolha).
- *
- * Resolve os "card-as-div" reimplementados como `<button className="rounded-xl border">`:
- * tiles de ação (abrir modal, navegar), cards de escolha, pricing card (com ribbon).
- * Renderiza `<button>` (ação) ou `<a>` (navegação) — semântica correta, foco acessível.
- *
- * Estado `selected` usa destaque NEUTRO (border-focus + surface-raised) — NÃO usa brand,
- * então é seguro no admin (onde cor de marca é proibida) e na vitrine.
- *
- * indicator:
- *   'radio'   — bolinha de seleção (escolha exclusiva)
- *   'check'   — check quando selecionado (multi-seleção/confirmação)
- *   'chevron' — seta de navegação (tile que leva a outra tela)
- *   'none'    — sem indicador (tile de ação puro)
- */
+/** @deprecated Use ChoiceCardProps. */
 interface SelectableCardProps {
     selected?: boolean;
     onClick?: () => void;
-    /** Elemento renderizado: 'button' (ação, default) ou 'a' (navegação). */
+    /** Ignored: the card is a radio now, never a link. */
     as?: 'button' | 'a';
+    /** Ignored: the card is a radio now, never a link. */
     href?: string;
+    /** Ignored: the ChoiceCard row always shows its radio. */
     indicator?: 'radio' | 'check' | 'chevron' | 'none';
-    /** Selo flutuante no topo (ex: "Mais popular" no pricing card). */
+    /** Ignored: the ChoiceCard has no ribbon. */
     ribbon?: ReactNode;
     disabled?: boolean;
     className?: string;
     children: ReactNode;
 }
-declare function SelectableCard({ selected, onClick, as, href, indicator, ribbon, disabled, className, children, }: SelectableCardProps): react.JSX.Element;
+/**
+ * @deprecated Use ChoiceCard (Figma [RDS] Content/ChoiceCard, layout="row"). A thin wrapper over it: `children`
+ * is the label, `onClick` is `onSelect`. It is a native radio now, not a button: `as`, `href`, `indicator` and
+ * `ribbon` are ignored, and a chosen card cannot be un-chosen by clicking it again.
+ */
+declare function SelectableCard({ selected, onClick, disabled, className, children }: SelectableCardProps): react.JSX.Element;
 
 export { SelectableCard, type SelectableCardProps };