@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/input.js

@@ -1,136 +1,131 @@
 "use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { forwardRef, useId, useState } from "react";
-import { Eye, EyeOff, X } from "lucide-react";
-const SIZE = {
-  sm: { h: "h-control-sm", text: "text-caption", pad: "px-2.5", icon: 14, padIconL: "pl-8", padIconR: "pr-8", affix: "px-2.5" },
-  md: { h: "h-control-md", text: "text-label", pad: "px-3", icon: 16, padIconL: "pl-9", padIconR: "pr-9", affix: "px-3" },
-  lg: { h: "h-control-lg", text: "text-body", pad: "px-4", icon: 18, padIconL: "pl-11", padIconR: "pr-11", affix: "px-4" }
-};
-const Input = forwardRef(function Input2(_a, ref) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import {
+  clearNativeValue,
+  FieldAction,
+  FieldShell,
+  hasContent,
+  useFieldIds,
+  warnIfUnlabelled
+} from "./internal/field.js";
+import { CloseIcon } from "./internal/icons.js";
+function Input(_a) {
   var _b = _a, {
     label,
-    helper,
+    labelPosition,
+    hint,
     error,
-    size = "md",
+    errorMessage,
     required,
-    optional,
-    iconLeft,
-    iconRight,
+    leadingIcon,
     prefix,
     suffix,
+    trailingIcon,
     clearable,
     onClear,
-    passwordReveal = true,
-    showCount,
-    className = "",
+    clearLabel = "Limpar",
     id,
-    type = "text",
-    value,
-    defaultValue,
-    maxLength
-  } = _b, props = __objRest(_b, [
+    disabled,
+    className,
+    style,
+    onChange,
+    ref
+  } = _b, input = __objRest(_b, [
     "label",
-    "helper",
+    "labelPosition",
+    "hint",
     "error",
-    "size",
+    "errorMessage",
     "required",
-    "optional",
-    "iconLeft",
-    "iconRight",
+    "leadingIcon",
     "prefix",
     "suffix",
+    "trailingIcon",
     "clearable",
     "onClear",
-    "passwordReveal",
-    "showCount",
-    "className",
+    "clearLabel",
     "id",
-    "type",
-    "value",
-    "defaultValue",
-    "maxLength"
+    "disabled",
+    "className",
+    "style",
+    "onChange",
+    "ref"
   ]);
-  const generatedId = useId();
-  const inputId = id != null ? id : generatedId;
-  const [revealed, setRevealed] = useState(false);
-  const isPassword = type === "password";
-  const effectiveType = isPassword && passwordReveal && revealed ? "text" : type;
-  const hasValue = !!(value != null ? value : defaultValue);
-  const showClear = clearable && hasValue;
-  const showReveal = isPassword && passwordReveal;
-  const hasRightAdornment = showClear || showReveal || iconRight;
-  const sz = SIZE[size];
-  const hasAffix = !!(prefix || suffix);
-  const inputRadius = hasAffix ? prefix && suffix ? "rounded-none" : prefix ? "rounded-l-none rounded-r-(--radius-control)" : "rounded-l-(--radius-control) rounded-r-none" : "rounded-(--radius-control)";
-  const errorClass = 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";
-  const inputElement = /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 inline-flex items-center" }, iconLeft && /* @__PURE__ */ React.createElement(
-    "span",
+  warnIfUnlabelled("Input", label, input["aria-label"], input["aria-labelledby"]);
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error, errorMessage);
+  const own = useRef(null);
+  const [typed, setTyped] = useState(() => hasContent(input.defaultValue));
+  const hasValue = input.value !== void 0 ? String(input.value) !== "" : typed;
+  const showClear = clearable && hasValue && !disabled;
+  const floating = labelPosition === "floating" && hasContent(label);
+  function change(event) {
+    setTyped(event.target.value !== "");
+    onChange == null ? void 0 : onChange(event);
+  }
+  function setRef(node) {
+    own.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
     {
-      "aria-hidden": true,
-      className: "absolute left-0 inset-y-0 flex items-center pl-3 text-fg-muted pointer-events-none"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "[&_svg]:shrink-0", style: { width: sz.icon, height: sz.icon } }, iconLeft)
-  ), /* @__PURE__ */ React.createElement(
-    "input",
-    __spreadValues({
-      ref,
-      id: inputId,
-      type: effectiveType,
-      value,
-      defaultValue,
-      maxLength,
+      kind: "rds-input",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      labelPosition,
+      hint,
+      errorMessage,
+      invalid,
       required,
-      className: [
-        "w-full bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
-        "border transition-colors outline-none",
-        inputRadius,
-        sz.h,
-        sz.text,
-        sz.pad,
-        iconLeft ? sz.padIconL : "",
-        hasRightAdornment ? sz.padIconR : "",
-        errorClass,
-        "disabled:opacity-50 disabled:cursor-not-allowed",
-        className
-      ].filter(Boolean).join(" "),
-      "aria-invalid": error ? true : void 0,
-      "aria-describedby": error ? `${inputId}-error` : helper ? `${inputId}-helper` : void 0
-    }, props)
-  ), hasRightAdornment && /* @__PURE__ */ React.createElement("span", { className: "absolute right-0 inset-y-0 flex items-center pr-2 gap-1 pointer-events-none" }, iconRight && !showClear && !showReveal && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted" }, iconRight), showClear && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: onClear,
-      "aria-label": "Limpar",
-      className: "text-fg-muted hover:text-fg-primary p-0.5 rounded transition-colors pointer-events-auto"
-    },
-    /* @__PURE__ */ React.createElement(X, { size: sz.icon - 2 })
-  ), showReveal && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => setRevealed((r) => !r),
-      "aria-label": revealed ? "Ocultar senha" : "Mostrar senha",
-      className: "text-fg-muted hover:text-fg-primary p-1 rounded bg-surface-default transition-colors pointer-events-auto"
-    },
-    revealed ? /* @__PURE__ */ React.createElement(EyeOff, { size: sz.icon }) : /* @__PURE__ */ React.createElement(Eye, { size: sz.icon })
-  )));
-  const wrappedInput = hasAffix ? /* @__PURE__ */ React.createElement("div", { className: "inline-flex w-full items-stretch" }, prefix && /* @__PURE__ */ React.createElement("span", { className: [
-    "inline-flex items-center border border-r-0 border-stroke-control rounded-l-(--radius-control) bg-surface-raised text-fg-muted",
-    sz.text,
-    sz.affix
-  ].join(" ") }, prefix), inputElement, suffix && /* @__PURE__ */ React.createElement("span", { className: [
-    "inline-flex items-center border border-l-0 border-stroke-control rounded-r-(--radius-control) bg-surface-raised text-fg-muted",
-    sz.text,
-    sz.affix
-  ].join(" ") }, suffix)) : inputElement;
-  const currentLength = typeof value === "string" ? value.length : typeof defaultValue === "string" ? defaultValue.length : 0;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: inputId, 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)")), wrappedInput, (error || helper || showCount && maxLength) && /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, error ? /* @__PURE__ */ React.createElement("p", { id: `${inputId}-error`, className: "text-caption text-danger-text flex-1" }, error) : helper ? /* @__PURE__ */ React.createElement("p", { id: `${inputId}-helper`, className: "text-caption text-fg-muted flex-1" }, helper) : /* @__PURE__ */ React.createElement("span", { className: "flex-1" }), showCount && maxLength && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted tabular-nums shrink-0" }, currentLength, "/", maxLength)));
-});
+      disabled,
+      boxClassName: showClear ? "rds-field__box--action" : void 0,
+      className,
+      style,
+      children: [
+        leadingIcon && /* @__PURE__ */ jsx("span", { className: "rds-field__icon", "aria-hidden": "true", children: leadingIcon }),
+        prefix && /* @__PURE__ */ jsx("span", { className: "rds-field__affix", "aria-hidden": "true", children: prefix }),
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, input), {
+            ref: setRef,
+            id: controlId,
+            className: "rds-field__control",
+            required,
+            disabled,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": [describedBy, input["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+            onChange: change,
+            placeholder: floating ? " " : input.placeholder
+          })
+        ),
+        suffix && /* @__PURE__ */ jsx("span", { className: "rds-field__affix", "aria-hidden": "true", children: suffix }),
+        trailingIcon && !showClear && /* @__PURE__ */ jsx("span", { className: "rds-field__icon", "aria-hidden": "true", children: trailingIcon }),
+        showClear && /* @__PURE__ */ jsx(
+          FieldAction,
+          {
+            label: clearLabel,
+            icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+            onClick: () => {
+              var _a2;
+              clearNativeValue(own.current);
+              (_a2 = own.current) == null ? void 0 : _a2.focus();
+              onClear == null ? void 0 : onClear();
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   Input
 };

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

@@ -1,19 +1,35 @@
 import * as react from 'react';
+import { HTMLAttributes, ReactNode, ComponentType } from 'react';
 
 type InsightCardType = 'alert' | 'opportunity' | 'tip';
-interface InsightCardProps {
+interface InsightCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The kind of message: it gives the colour and the tag (Atenção, Oportunidade, Dica). */
     type: InsightCardType;
-    title: string;
-    description: string;
-    /** Optional numeric/text highlight, e.g. "+ R$ 450/mês" */
-    potential?: string;
-    /** CTA label */
+    /** What the system noticed, in one line (Figma: `title`). */
+    title: ReactNode;
+    /** Why it matters or what to do (Figma: `description`). */
+    description: ReactNode;
+    /** A number or short highlight beside the title (Figma: `hasPotential` + `potential`): "+ R$ 450/mês". */
+    potential?: ReactNode;
+    /** The action's text (Figma: `hasAction` + `action`). Rendered with `actionHref` (a link) or `actionOnClick`. */
     action?: string;
-    /** CTA href — renders an <a> tag */
+    /** Where the action leads: renders a link (`linkAs`, or a plain <a>). */
     actionHref?: string;
-    /** CTA onClick — renders a <button> (takes precedence over actionHref when both provided) */
+    /** What the action does: renders a button. Takes precedence over `actionHref`. */
     actionOnClick?: () => void;
+    /** The link component for `actionHref` (a framework Link). Default: a plain <a>. */
+    linkAs?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** The heading level that fits the page's heading order. */
+    titleAs?: 'h2' | 'h3' | 'h4';
 }
-declare function InsightCard({ type, title, description, potential, action, actionHref, actionOnClick, }: InsightCardProps): react.JSX.Element;
+/**
+ * InsightCard — Figma [RDS] Content/InsightCard. A note from the system about the business: an alert, an
+ * opportunity or a tip, with what to do. Styles: insight-card.css.
+ */
+declare function InsightCard({ type, title, description, potential, action, actionHref, actionOnClick, linkAs: LinkAs, titleAs: Title, className, ...rest }: InsightCardProps): react.JSX.Element;
 
 export { InsightCard, type InsightCardProps, type InsightCardType };

package/dist/components/insight-card.js

@@ -1,26 +1,52 @@
-import "../chunk-ORMEWXMH.js";
-const TYPE_VARS = {
-  alert: { card: "[border-color:var(--insight-alert-border)] [background:var(--insight-alert-bg)]", badge: "[background:var(--insight-alert-badge-bg)] [color:var(--insight-alert-badge-text)]" },
-  opportunity: { card: "[border-color:var(--insight-opportunity-border)] [background:var(--insight-opportunity-bg)]", badge: "[background:var(--insight-opportunity-badge-bg)] [color:var(--insight-opportunity-badge-text)]" },
-  tip: { card: "[border-color:var(--insight-tip-border)] [background:var(--insight-tip-bg)]", badge: "[background:var(--insight-tip-badge-bg)] [color:var(--insight-tip-badge-text)]" }
-};
-const TYPE_LABELS = {
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const LABELS = {
   alert: "Aten\xE7\xE3o",
   opportunity: "Oportunidade",
   tip: "Dica"
 };
-function InsightCard({
-  type,
-  title,
-  description,
-  potential,
-  action,
-  actionHref,
-  actionOnClick
-}) {
-  const v = TYPE_VARS[type];
-  const ctaClass = "shrink-0 rounded-(--radius-card) px-3 py-1.5 text-caption font-medium whitespace-nowrap shadow-sm transition-colors [background:var(--insight-action-bg)] [border:1px_solid_var(--insight-action-border)] [color:var(--insight-action-text)] hover:[background:var(--insight-action-bg-hover)]";
-  return /* @__PURE__ */ React.createElement("div", { className: ["rounded-(--radius-card) border p-4", v.card].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("span", { className: ["inline-block text-[10px] font-semibold uppercase tracking-wide rounded px-1.5 py-0.5", v.badge].join(" ") }, TYPE_LABELS[type]), /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 flex items-baseline gap-2 flex-wrap" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold text-label leading-tight [color:var(--insight-title-color)]" }, title), potential && /* @__PURE__ */ React.createElement("span", { className: "text-caption font-medium tabular-nums [color:var(--insight-potential-color)]" }, potential)), /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 text-caption [color:var(--insight-description-color)]" }, description)), action && (actionOnClick ? /* @__PURE__ */ React.createElement("button", { type: "button", onClick: actionOnClick, className: ctaClass }, action) : actionHref ? /* @__PURE__ */ React.createElement("a", { href: actionHref, className: ctaClass }, action) : null)));
+function DefaultLink({ href, className, children }) {
+  return /* @__PURE__ */ jsx("a", { href, className, children });
+}
+function InsightCard(_a) {
+  var _b = _a, {
+    type,
+    title,
+    description,
+    potential,
+    action,
+    actionHref,
+    actionOnClick,
+    linkAs: LinkAs = DefaultLink,
+    titleAs: Title = "h3",
+    className
+  } = _b, rest = __objRest(_b, [
+    "type",
+    "title",
+    "description",
+    "potential",
+    "action",
+    "actionHref",
+    "actionOnClick",
+    "linkAs",
+    "titleAs",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs("article", __spreadProps(__spreadValues({}, rest), { className: ["rds-insight-card", `rds-insight-card--${type}`, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-insight-card__body", children: [
+      /* @__PURE__ */ jsx("span", { className: "rds-insight-card__badge", children: LABELS[type] }),
+      /* @__PURE__ */ jsxs("div", { className: "rds-insight-card__head", children: [
+        /* @__PURE__ */ jsx(Title, { className: "rds-insight-card__title", children: title }),
+        potential && /* @__PURE__ */ jsx("span", { className: "rds-insight-card__potential", children: potential })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "rds-insight-card__description", children: description })
+    ] }),
+    action && (actionOnClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "rds-insight-card__action", onClick: actionOnClick, children: action }) : actionHref ? /* @__PURE__ */ jsx(LinkAs, { href: actionHref, className: "rds-insight-card__action", children: action }) : null)
+  ] }));
 }
 export {
   InsightCard

package/dist/components/internal/announce.d.ts

@@ -0,0 +1,3 @@
+declare function announce(message: string): void;
+
+export { announce };

package/dist/components/internal/announce.js

@@ -0,0 +1,20 @@
+import "../../chunk-ORMEWXMH.js";
+let region = null;
+function announce(message) {
+  if (typeof document === "undefined") return;
+  if (!region || !region.isConnected) {
+    region = document.createElement("div");
+    region.setAttribute("role", "status");
+    region.className = "rds-visually-hidden";
+    region.dataset.rdsAnnouncer = "";
+    document.body.append(region);
+  }
+  region.textContent = "";
+  const target = region;
+  setTimeout(() => {
+    target.textContent = message;
+  }, 50);
+}
+export {
+  announce
+};

package/dist/components/internal/block.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface BlockHeadingProps {
+    /** A short label above the title (Figma: `eyebrow`). */
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** The title's id: it names the block's <section>. */
+    titleId: string;
+}
+declare function BlockHeading({ eyebrow, title, description, titleId }: BlockHeadingProps): react.JSX.Element;
+declare const cx: (...names: (string | false | undefined)[]) => string;
+
+export { BlockHeading, type BlockHeadingProps, cx };

package/dist/components/internal/block.js

@@ -0,0 +1,14 @@
+import "../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BlockHeading({ eyebrow, title, description, titleId }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rds-block__heading", children: [
+    eyebrow && /* @__PURE__ */ jsx("p", { className: "rds-block__eyebrow", children: eyebrow }),
+    /* @__PURE__ */ jsx("h2", { id: titleId, className: "rds-block__title", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "rds-block__description", children: description })
+  ] });
+}
+const cx = (...names) => names.filter(Boolean).join(" ");
+export {
+  BlockHeading,
+  cx
+};

package/dist/components/internal/button.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { MouseEventHandler, MouseEvent } from 'react';
+
+type ButtonTone = 'action' | 'neutral' | 'danger' | 'inverse';
+/** Figma calls this property `style`; here it is `variant` because `style` belongs to React. */
+type ButtonVariant = 'fill' | 'outline' | 'ghost';
+/**
+ * The height: sm 36, md 44 (the default), lg 52. The touch target is 44 in every size: on sm, an invisible layer
+ * extends it to 44 under a coarse pointer (button.css).
+ */
+type ButtonSize = 'sm' | 'md' | 'lg';
+declare function buttonClassName(tone: ButtonTone, variant: ButtonVariant, size: ButtonSize, extra?: string): string;
+/**
+ * With aria-disabled the element still fires click (implicit form submit on a button, navigation
+ * on a link rendered with asChild); cancel it here.
+ */
+declare function blockWhenDisabled<T extends HTMLElement>(disabled: boolean | undefined, onClick?: MouseEventHandler<T>): (event: MouseEvent<T>) => void;
+/** Says `label` through the page's live region when loading starts. */
+declare function useLoadingAnnouncement(loading: boolean | undefined, label: string): void;
+/** The loader: a turning arc, drawn inline so the button needs no icon library. */
+declare function Loader(): react.JSX.Element;
+
+export { type ButtonSize, type ButtonTone, type ButtonVariant, Loader, blockWhenDisabled, buttonClassName, useLoadingAnnouncement };

package/dist/components/internal/button.js

@@ -0,0 +1,30 @@
+import "../../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { announce } from "./announce.js";
+function buttonClassName(tone, variant, size, extra) {
+  return ["rds-button", `rds-button--${tone}`, `rds-button--${variant}`, `rds-button--${size}`, extra].filter(Boolean).join(" ");
+}
+function blockWhenDisabled(disabled, onClick) {
+  return (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+}
+function useLoadingAnnouncement(loading, label) {
+  useEffect(() => {
+    if (loading) announce(label);
+  }, [loading, label]);
+}
+function Loader() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+export {
+  Loader,
+  blockWhenDisabled,
+  buttonClassName,
+  useLoadingAnnouncement
+};

package/dist/components/internal/choice-card.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/** row: the line with the radio; tile: a grid cell, icon on top; preview: an image on top. */
+type ChoiceCardLayout = 'row' | 'tile' | 'preview';
+interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'checked' | 'onSelect'> {
+    /** The option (Figma: `label`). It is the radio's accessible name. */
+    children: ReactNode;
+    /** What choosing it means (Figma: `hasDescription` + `description`). */
+    description?: ReactNode;
+    /** An inline SVG in a 36 square (Figma: `hasIcon` + `icon`). Decorative. Not drawn in `preview`. */
+    icon?: ReactNode;
+    /** Chosen (Figma: `selected`). Inside a ChoiceCardGroup the group decides; alone, pass it with `onSelect`. */
+    selected?: boolean;
+    /** Called when the person chooses this card (click, Space, or an arrow key from a sibling with the same name). */
+    onSelect?: () => void;
+    /** The value inside a ChoiceCardGroup. */
+    value?: string;
+    /**
+     * Figma: `layout`. row (the default): the line with the radio. tile: a grid cell, the icon on top and a check in
+     * the corner when chosen. preview: an image on top with the check in its corner. Inside a ChoiceCardGroup the
+     * group's layout is the default.
+     */
+    layout?: ChoiceCardLayout;
+    /** The picture on top in `preview` (a mockup, a swatch, an <img>). Decorative; without it, a placeholder icon. */
+    preview?: ReactNode;
+}
+declare function ChoiceCardControl({ control, children, description, icon, selected, onSelect, value, disabled, className, onChange, name, layout, preview, ...rest }: ChoiceCardProps & {
+    control: 'radio' | 'checkbox';
+}): react.JSX.Element;
+interface ChoiceCardGroupProps {
+    /** What is being chosen. Required: it names the group (a visible <legend>). */
+    legend: ReactNode;
+    /** The ChoiceCards, each with a `value`. */
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** The form field name. By default a generated one. */
+    name?: string;
+    disabled?: boolean;
+    /**
+     * The cards' layout. row stacks them; tile and preview lay them in a grid (cells of at least 160 and 240) and are
+     * every card's default.
+     */
+    layout?: ChoiceCardLayout;
+    className?: string;
+}
+/** A set of ChoiceCards where one is chosen at a time: a <fieldset> of native radios with a legend. */
+declare function ChoiceCardGroup({ legend, children, value, defaultValue, onValueChange, name, disabled, layout, className }: ChoiceCardGroupProps): react.JSX.Element;
+
+export { ChoiceCardControl, ChoiceCardGroup, type ChoiceCardGroupProps, type ChoiceCardLayout, type ChoiceCardProps };

package/dist/components/internal/choice-card.js

@@ -0,0 +1,117 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useState } from "react";
+import { CheckIcon, ImageIcon } from "./icons.js";
+const Group = createContext(null);
+function ChoiceCardControl(_a) {
+  var _b = _a, {
+    control,
+    children,
+    description,
+    icon,
+    selected,
+    onSelect,
+    value,
+    disabled,
+    className,
+    onChange,
+    name,
+    layout,
+    preview
+  } = _b, rest = __objRest(_b, [
+    "control",
+    "children",
+    "description",
+    "icon",
+    "selected",
+    "onSelect",
+    "value",
+    "disabled",
+    "className",
+    "onChange",
+    "name",
+    "layout",
+    "preview"
+  ]);
+  var _a2, _b2;
+  const group = useContext(Group);
+  const descriptionId = useId();
+  const checked = group && value !== void 0 && control === "radio" ? group.value === value : !!selected;
+  const isDisabled = disabled || (group == null ? void 0 : group.disabled);
+  const kind = (_a2 = layout != null ? layout : group == null ? void 0 : group.layout) != null ? _a2 : "row";
+  const check = checked && /* @__PURE__ */ jsx("span", { className: "rds-choice-card__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckIcon, {}) });
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: [
+        "rds-choice-card",
+        `rds-choice-card--${kind}`,
+        checked && "rds-choice-card--selected",
+        isDisabled && "rds-choice-card--disabled",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadProps(__spreadValues({}, rest), {
+            type: control,
+            className: "rds-choice-card__input",
+            name: (_b2 = group == null ? void 0 : group.name) != null ? _b2 : name,
+            value,
+            checked,
+            disabled: isDisabled,
+            "aria-describedby": description ? descriptionId : void 0,
+            onChange: (event) => {
+              onChange == null ? void 0 : onChange(event);
+              if (group && value !== void 0) group.select(value);
+              onSelect == null ? void 0 : onSelect();
+            }
+          })
+        ),
+        kind === "preview" ? /* @__PURE__ */ jsxs("span", { className: "rds-choice-card__preview", "aria-hidden": "true", children: [
+          preview != null ? preview : /* @__PURE__ */ jsx("span", { className: "rds-choice-card__placeholder", children: /* @__PURE__ */ jsx(ImageIcon, {}) }),
+          check
+        ] }) : icon && /* @__PURE__ */ jsx("span", { className: "rds-choice-card__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("span", { className: "rds-choice-card__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "rds-choice-card__label", children }),
+          description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "rds-choice-card__description", children: description })
+        ] }),
+        kind === "row" && /* @__PURE__ */ jsx("span", { className: "rds-choice-card__radio", "aria-hidden": "true" }),
+        kind === "tile" && check
+      ]
+    }
+  );
+}
+function ChoiceCardGroup({ legend, children, value, defaultValue, onValueChange, name, disabled, layout = "row", className }) {
+  const generated = useId();
+  const [own, setOwn] = useState(defaultValue);
+  const current = value != null ? value : own;
+  return /* @__PURE__ */ jsx(
+    Group.Provider,
+    {
+      value: {
+        name: name != null ? name : generated,
+        value: current,
+        disabled,
+        layout,
+        select: (next) => {
+          setOwn(next);
+          onValueChange == null ? void 0 : onValueChange(next);
+        }
+      },
+      children: /* @__PURE__ */ jsxs("fieldset", { className: ["rds-choice-card-group", `rds-choice-card-group--${layout}`, className].filter(Boolean).join(" "), children: [
+        /* @__PURE__ */ jsx("legend", { className: "rds-choice-card-group__legend", children: legend }),
+        children
+      ] })
+    }
+  );
+}
+export {
+  ChoiceCardControl,
+  ChoiceCardGroup
+};