@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/button.d.ts

@@ -1,27 +1,54 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ButtonTone, ButtonVariant, ButtonSize } from './internal/button.js';
 
-type ButtonVariant = 'filled' | 'tonal' | 'outline' | 'ghost' | 'link';
-type ButtonColor = 'primary' | 'secondary' | 'danger';
-type ButtonSize = 'sm' | 'md' | 'lg';
-declare function buttonVariants({ variant, color, size, fullWidth, className, }?: {
+/** Which side of the text the icon goes (Figma: `iconPosition`). */
+type ButtonIconPosition = 'start' | 'end';
+interface ButtonProps extends ComponentPropsWithRef<'button'> {
+    /** The button text (Figma: `label`): a verb or a destination. Required, it is the accessible name. */
+    children: ReactNode;
+    /** The role: brand click (action), quiet (neutral), destructive (danger), or over the brand plate (inverse). */
+    tone?: ButtonTone;
+    /** The emphasis (Figma: `style`): fill draws the most attention, ghost the least. */
     variant?: ButtonVariant;
-    color?: ButtonColor;
-    size?: ButtonSize;
-    fullWidth?: boolean;
-    className?: string;
-}): string;
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
-    color?: ButtonColor;
+    /**
+     * The height, by the space available (Figma: `size`): sm 36, md 44 (default), lg 52. Text 14/20 on sm and md,
+     * 16/24 on lg. The touch target is 44 × 44 in every size: on sm, an invisible layer extends it under a coarse
+     * pointer (`@media (pointer: coarse)`), so keep two sm buttons at least 8px apart.
+     */
     size?: ButtonSize;
+    /** Icon next to the text (Figma: `showIcon` + `iconName`). Decorative, rendered with aria-hidden. */
+    icon?: ReactNode;
+    /**
+     * The side of the icon (Figma: `iconPosition`): `end` (default) after the text, `start` before it. The loader
+     * takes the icon's side. It does not change the accessible name.
+     */
+    iconPosition?: ButtonIconPosition;
+    /** Rendered as aria-disabled="true": the button stays in the tab order and takes focus, but clicks do nothing. */
+    disabled?: boolean;
+    /**
+     * Waiting for what the click started (Figma: `loading`): the icon gives way to a turning loader (without an
+     * icon, the loader covers the label), the width stays, clicks are ignored, aria-busy is on and
+     * `loadingLabel` is announced to screen readers.
+     */
     loading?: boolean;
-    fullWidth?: boolean;
-    /** Ícone leading (à esquerda do texto). */
-    iconLeft?: ReactNode;
-    /** Ícone trailing (à direita do texto). */
-    iconRight?: ReactNode;
+    /** What is being waited for, announced while loading ("Salvando…"). */
+    loadingLabel?: string;
+    /**
+     * Render the single child element (an `<a>`, a framework `Link`) with the button's classes and behavior
+     * instead of a `<button>`. Use it for navigation: a link that looks like a button.
+     */
+    asChild?: boolean;
 }
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * Button — Figma [RDS] Actions/Button. Three tones on light surfaces plus inverse for the brand plate,
+ * three variants, three sizes (sm 36, md 44, lg 52; the touch target is 44 in all of them), and the icon on
+ * either side of the text. Styles: button.css.
+ *
+ * ```tsx
+ * <Button size="sm" icon={<PlusIcon />} iconPosition="start">Novo cliente</Button>
+ * ```
+ */
+declare function Button({ tone, variant, size, icon, iconPosition, disabled, loading, loadingLabel, asChild, type, className, onClick, children, ...rest }: ButtonProps): react.JSX.Element;
 
-export { Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants };
+export { Button, type ButtonIconPosition, type ButtonProps, ButtonSize, ButtonTone, ButtonVariant };

package/dist/components/button.js

@@ -5,127 +5,64 @@ import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const variantColorClasses = {
-  // secondary = ação de BAIXA ÊNFASE, neutra por construção (não a 2ª cor de marca).
-  // Usa fg-secondary (4.5:1) + border-default (3:1) + surface-raised, que o motor
-  // garante contra a surface em light e dark. Uma cor de marca como traço/texto
-  // sobre a surface não tem garantia de contraste → sumia (navy no escuro, branco
-  // no claro). A 2ª cor de marca (--brand-secondary) segue viva pra FILL explícito.
-  filled: {
-    // Borda de AFFORDANCE: transparente por padrão (filled não tem borda visível). O motor só
-    // colore --brand-primary-border quando o fill da marca quase encosta na superfície — aí o
-    // hairline evita o botão "sumir" no fundo sem tocar na cor escolhida pelo lojista.
-    primary: "bg-brand-primary text-brand-on-primary hover:bg-brand-hover border border-[var(--brand-primary-border,transparent)]",
-    secondary: "bg-surface-raised text-fg-primary hover:opacity-90",
-    danger: "bg-danger text-fg-inverse hover:bg-danger-text"
-  },
-  tonal: {
-    primary: "bg-brand-primary/10 text-brand-primary hover:bg-brand-primary/20",
-    secondary: "bg-surface-raised/60 text-fg-secondary hover:bg-surface-raised",
-    danger: "bg-danger-soft text-danger-text hover:bg-danger-soft/70"
-  },
-  outline: {
-    primary: "ring-1 ring-inset ring-brand-primary bg-transparent text-brand-primary hover:bg-surface-raised",
-    secondary: "ring-1 ring-inset ring-border-default bg-transparent text-fg-secondary hover:bg-surface-raised",
-    danger: "ring-1 ring-inset ring-danger bg-transparent text-danger-text hover:bg-danger-soft"
-  },
-  ghost: {
-    primary: "bg-transparent text-brand-primary hover:bg-surface-raised",
-    secondary: "bg-transparent text-fg-secondary hover:bg-surface-raised",
-    danger: "bg-transparent text-danger-text hover:bg-danger-soft"
-  },
-  link: {
-    primary: "bg-transparent text-brand-primary underline-offset-4 hover:underline",
-    secondary: "bg-transparent text-fg-secondary underline-offset-4 hover:underline",
-    danger: "bg-transparent text-danger-text underline-offset-4 hover:underline"
-  }
-};
-const sizeClasses = {
-  sm: "box-border h-control-sm px-3 text-caption gap-1.5",
-  md: "box-border h-control-md px-4 text-label gap-2",
-  lg: "box-border h-control-lg px-5 text-body gap-2"
-};
-const linkSizeClasses = {
-  sm: "text-caption gap-1",
-  md: "text-label gap-1.5",
-  lg: "text-body gap-2"
-};
-function buttonVariants({
-  variant = "filled",
-  color = "primary",
-  size = "md",
-  fullWidth = false,
-  className = ""
-} = {}) {
-  return [
-    "inline-flex items-center justify-center font-medium transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-offset-2",
-    "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
-    // Radius vem do token semântico — nunca hardcode (governança em base.css)
-    variant === "link" ? linkSizeClasses[size] : `rounded-(--radius-control) ${sizeClasses[size]}`,
-    variantColorClasses[variant][color],
-    fullWidth && "w-full",
-    className
-  ].filter(Boolean).join(" ");
-}
-const Spinner = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    className: "animate-spin size-4 shrink-0",
-    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: "4" }),
-      /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-    ]
-  }
-);
-const Button = forwardRef(function Button2(_a, ref) {
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import {
+  blockWhenDisabled,
+  buttonClassName,
+  Loader,
+  useLoadingAnnouncement
+} from "./internal/button.js";
+function Button(_a) {
   var _b = _a, {
-    variant = "filled",
-    color = "primary",
+    tone = "action",
+    variant = "fill",
     size = "md",
-    loading = false,
-    fullWidth = false,
-    iconLeft,
-    iconRight,
+    icon,
+    iconPosition = "end",
     disabled,
-    className = "",
-    children,
-    type = "button"
+    loading,
+    loadingLabel = "Carregando\u2026",
+    asChild,
+    type = "button",
+    className,
+    onClick,
+    children
   } = _b, rest = __objRest(_b, [
+    "tone",
     "variant",
-    "color",
     "size",
-    "loading",
-    "fullWidth",
-    "iconLeft",
-    "iconRight",
+    "icon",
+    "iconPosition",
     "disabled",
+    "loading",
+    "loadingLabel",
+    "asChild",
+    "type",
     "className",
-    "children",
-    "type"
+    "onClick",
+    "children"
   ]);
+  const Root = asChild ? Slot : "button";
+  useLoadingAnnouncement(loading, loadingLabel);
+  const overlay = loading && !icon;
+  const iconNode = (icon || loading) && /* @__PURE__ */ jsx("span", { className: loading ? "rds-button__icon rds-button__loader" : "rds-button__icon", "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx(Loader, {}) : icon });
+  const start = iconPosition === "start";
   return /* @__PURE__ */ jsxs(
-    "button",
-    __spreadProps(__spreadValues({
-      ref,
-      type,
-      disabled: disabled || loading,
-      className: buttonVariants({ variant, color, size, fullWidth, className })
-    }, rest), {
+    Root,
+    __spreadProps(__spreadValues({}, rest), {
+      type: asChild ? void 0 : type,
+      className: buttonClassName(tone, variant, size, [overlay && "rds-button--loading", className].filter(Boolean).join(" ")),
+      "aria-disabled": disabled || void 0,
+      "aria-busy": loading || void 0,
+      onClick: blockWhenDisabled(disabled || loading, onClick),
       children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, {}) : iconLeft && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-4", children: iconLeft }),
-        children,
-        iconRight && !loading && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-4", children: iconRight })
+        start && iconNode,
+        /* @__PURE__ */ jsx(Slottable, { children }),
+        !start && iconNode
       ]
     })
   );
-});
+}
 export {
-  Button,
-  buttonVariants
+  Button
 };

package/dist/components/calendar.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { IsoDate } from './internal/dates.js';
+
+interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled: the chosen day, ISO (2026-09-30), or null for none. */
+    value?: IsoDate | null;
+    /** Uncontrolled: the day chosen at first. */
+    defaultValue?: IsoDate;
+    /** Called with the ISO day the person chose. */
+    onValueChange?: (value: IsoDate) => void;
+    /** The month shown at first when there is no choice (any ISO day in it). By default, today's month. */
+    defaultMonth?: IsoDate;
+    /** Days that can't be chosen (past days, weekends). They stay in the grid, faded and struck through. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Takes the focus to the chosen day (or today) when it mounts: for the DatePicker's popover. */
+    autoFocus?: boolean;
+    /** Today, for tests and screenshots. By default the real today. */
+    today?: IsoDate;
+}
+/**
+ * Calendar — Figma [RDS] Forms/Calendar. A month to choose a day: the header with the month and the arrows,
+ * the weekdays (Sunday first) and always six weeks, so the height does not jump. role="grid", one day in the
+ * tab order: the arrows move a day or a week, PageUp/PageDown change the month, Home/End go to the start and
+ * end of the week, Enter or Space choose. A range of two days is not in the Figma yet. Styles: calendar.css.
+ */
+declare function Calendar({ value, defaultValue, onValueChange, defaultMonth, isDateDisabled, autoFocus, today: todayIso, className, ...rest }: CalendarProps): react.JSX.Element;
+
+export { Calendar, type CalendarProps, IsoDate };

package/dist/components/calendar.js

@@ -0,0 +1,149 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { IconButton } from "./icon-button.js";
+import { Tooltip } from "./tooltip.js";
+import { addDays, addMonths, dayName, fromIso, monthName, toIso } from "./internal/dates.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "./internal/icons.js";
+const WEEKDAYS = [
+  ["D", "domingo"],
+  ["S", "segunda-feira"],
+  ["T", "ter\xE7a-feira"],
+  ["Q", "quarta-feira"],
+  ["Q", "quinta-feira"],
+  ["S", "sexta-feira"],
+  ["S", "s\xE1bado"]
+];
+const startOfGrid = (month) => addDays(month, -month.getDay());
+const sameDay = (a, b) => a !== null && toIso(a) === toIso(b);
+function Calendar(_a) {
+  var _b = _a, {
+    value,
+    defaultValue,
+    onValueChange,
+    defaultMonth,
+    isDateDisabled,
+    autoFocus,
+    today: todayIso,
+    className
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "defaultValue",
+    "onValueChange",
+    "defaultMonth",
+    "isDateDisabled",
+    "autoFocus",
+    "today",
+    "className"
+  ]);
+  var _a2;
+  const titleId = useId();
+  const [own, setOwn] = useState(defaultValue);
+  const chosen = fromIso(value !== void 0 ? value : own);
+  const today = (_a2 = fromIso(todayIso)) != null ? _a2 : /* @__PURE__ */ new Date();
+  const [focusDay, setFocusDay] = useState(() => {
+    var _a3;
+    return (_a3 = chosen != null ? chosen : fromIso(defaultMonth)) != null ? _a3 : today;
+  });
+  const month = new Date(focusDay.getFullYear(), focusDay.getMonth(), 1);
+  const grid = useRef(null);
+  const moved = useRef(Boolean(autoFocus));
+  useEffect(() => {
+    var _a3, _b2;
+    if (!moved.current) return;
+    (_b2 = (_a3 = grid.current) == null ? void 0 : _a3.querySelector('button[tabindex="0"]')) == null ? void 0 : _b2.focus();
+  }, [focusDay]);
+  const go = (date) => {
+    moved.current = true;
+    setFocusDay(date);
+  };
+  const choose = (date) => {
+    const iso = toIso(date);
+    if (value === void 0) setOwn(iso);
+    onValueChange == null ? void 0 : onValueChange(iso);
+    go(date);
+  };
+  const onKeyDown = (event) => {
+    const moves = {
+      ArrowLeft: () => addDays(focusDay, -1),
+      ArrowRight: () => addDays(focusDay, 1),
+      ArrowUp: () => addDays(focusDay, -7),
+      ArrowDown: () => addDays(focusDay, 7),
+      PageUp: () => addMonths(focusDay, -1),
+      PageDown: () => addMonths(focusDay, 1),
+      Home: () => addDays(focusDay, -focusDay.getDay()),
+      End: () => addDays(focusDay, 6 - focusDay.getDay())
+    };
+    const next = moves[event.key];
+    if (!next) return;
+    event.preventDefault();
+    go(next());
+  };
+  const first = startOfGrid(month);
+  const weeks = Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_2, d) => addDays(first, w * 7 + d)));
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-calendar", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "rds-calendar__header", children: [
+      /* @__PURE__ */ jsx(Tooltip, { text: "M\xEAs anterior", children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+          label: "M\xEAs anterior",
+          tone: "neutral",
+          variant: "ghost",
+          onClick: () => setFocusDay(addMonths(focusDay, -1))
+        }
+      ) }),
+      /* @__PURE__ */ jsx("h2", { id: titleId, className: "rds-calendar__title", "aria-live": "polite", children: monthName(month) }),
+      /* @__PURE__ */ jsx(Tooltip, { text: "Pr\xF3ximo m\xEAs", children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+          label: "Pr\xF3ximo m\xEAs",
+          tone: "neutral",
+          variant: "ghost",
+          onClick: () => setFocusDay(addMonths(focusDay, 1))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("table", { ref: grid, role: "grid", "aria-labelledby": titleId, className: "rds-calendar__grid", onKeyDown, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: WEEKDAYS.map(([letter, name], i) => /* @__PURE__ */ jsxs("th", { scope: "col", abbr: name, className: "rds-calendar__weekday", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: letter }),
+        /* @__PURE__ */ jsx("span", { className: "rds-visually-hidden", children: name })
+      ] }, i)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, w) => /* @__PURE__ */ jsx("tr", { children: week.map((date) => {
+        var _a3;
+        const outside = date.getMonth() !== month.getMonth();
+        const disabled = (_a3 = isDateDisabled == null ? void 0 : isDateDisabled(date)) != null ? _a3 : false;
+        const selected = sameDay(chosen, date);
+        const isToday = sameDay(today, date);
+        return /* @__PURE__ */ jsx("td", { role: "gridcell", "aria-selected": selected, className: "rds-calendar__cell", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: sameDay(focusDay, date) ? 0 : -1,
+            "aria-label": dayName(date),
+            "aria-current": isToday ? "date" : void 0,
+            "aria-disabled": disabled || void 0,
+            className: [
+              "rds-calendar__day",
+              outside && "rds-calendar__day--outside",
+              isToday && "rds-calendar__day--today",
+              selected && "rds-calendar__day--selected",
+              disabled && "rds-calendar__day--disabled"
+            ].filter(Boolean).join(" "),
+            onClick: () => disabled ? go(date) : choose(date),
+            children: date.getDate()
+          }
+        ) }, toIso(date));
+      }) }, w)) })
+    ] })
+  ] }));
+}
+export {
+  Calendar
+};

package/dist/components/card.d.ts

@@ -1,27 +1,55 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
-type CardVariant = 'outlined' | 'elevated' | 'filled' | 'flat' | 'invert';
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: CardVariant;
-    /** Renderiza como botão clicável (link card). default = false. */
-    interactive?: boolean;
+type CardSurface = 'default' | 'tint';
+type CardSize = 'default' | 'sm';
+type Heading = 'h2' | 'h3' | 'h4';
+interface CardProps extends HTMLAttributes<HTMLElement> {
+    /** tint is the brand's light background, with no border, for a card that stands out. */
+    surface?: CardSurface;
+    /** sm aligns everything on 12 and makes the header text smaller, for dense lists and indicators. */
+    size?: CardSize;
+    /** article (default) for a topic that reads on its own; section or div when it is part of something larger. */
+    as?: 'article' | 'section' | 'div';
+    /**
+     * CardHeader, CardContent and CardFooter, in this order (Figma: `showHeader`, the `cardContent` slot,
+     * `showFooter`). Header and footer are optional.
+     */
+    children: ReactNode;
 }
-declare function Card({ variant, interactive, className, children, ...props }: CardProps): react.JSX.Element;
-interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    title?: ReactNode;
+/**
+ * Card — Figma [RDS] Content/Card. A topic that reads on its own: a plan, a summary with an action. Never a card
+ * inside a card. When it has a CardHeader, the title names the card. Styles: card.css.
+ */
+declare function Card({ surface, size, as: Root, className, children, ...rest }: CardProps): react.JSX.Element;
+interface CardHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** What the card is about (Figma: `title`). It names the card for screen readers. */
+    title: ReactNode;
+    /** The heading level that fits the page's heading order. */
+    titleAs?: Heading;
+    /** One supporting line (Figma: `showDescription` + `description`). */
     description?: ReactNode;
-    action?: ReactNode;
-    badge?: ReactNode;
-    /** Ícone exibido à esquerda do título num container 40×40 bg-surface-raised. */
+    /** A Tile before the text (Figma: `showIcon`): variant soft, size default (sm on a small card). */
     icon?: ReactNode;
+    /** One action on the right (Figma: `showAction` + `action`): a ghost Button or an IconButton. */
+    action?: ReactNode;
+    /** start: side by side; center: stacked and centred. */
+    align?: 'start' | 'center';
 }
-declare function CardHeader({ title, description, action, badge, icon, className, children, ...props }: CardHeaderProps): react.JSX.Element;
-declare function CardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): react.JSX.Element;
-interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    noPadding?: boolean;
+/** The card's header (Figma: .card/header). */
+declare function CardHeader({ title, titleAs: Title, description, icon, action, align, className, ...rest }: CardHeaderProps): react.JSX.Element;
+type CardContentProps = HTMLAttributes<HTMLDivElement>;
+/** The card's content (Figma: the `cardContent` slot). */
+declare function CardContent({ className, ...rest }: CardContentProps): react.JSX.Element;
+interface CardFooterProps extends HTMLAttributes<HTMLElement> {
+    /** One or two Buttons (Figma: `actions` one · two). A third action goes into the content, as a link. */
+    children: ReactNode;
+    /** start, end, or full (buttons stacked across the whole width). */
+    align?: 'start' | 'end' | 'full';
+    /** A line under the buttons (Figma: `showTertiaryContent` + `tertiaryContent`), such as a sign-up link. */
+    note?: ReactNode;
 }
-declare function CardBody({ noPadding, className, children, ...props }: CardBodyProps): react.JSX.Element;
-declare function CardFooter({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** The card's footer, with its actions (Figma: .card/footer). */
+declare function CardFooter({ align, note, className, children, ...rest }: CardFooterProps): react.JSX.Element;
 
-export { Card, CardBody, type CardBodyProps, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardVariant };
+export { Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardSize, type CardSurface };

package/dist/components/card.js

@@ -1,67 +1,52 @@
+"use client";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const VARIANT_CLASS = {
-  outlined: "border border-stroke-default bg-surface-default",
-  elevated: "border border-transparent bg-surface-default shadow-sm",
-  filled: "border border-transparent bg-surface-raised",
-  flat: "border-0 bg-transparent shadow-none",
-  invert: "border border-transparent bg-surface-invert text-fg-inverse"
-};
+import { createContext, useContext, useId } from "react";
+const TitleId = createContext(void 0);
 function Card(_a) {
-  var _b = _a, { variant = "elevated", interactive = false, className = "", children } = _b, props = __objRest(_b, ["variant", "interactive", "className", "children"]);
-  return /* @__PURE__ */ jsx(
-    "div",
+  var _b = _a, { surface = "default", size = "default", as: Root = "article", className, children } = _b, rest = __objRest(_b, ["surface", "size", "as", "className", "children"]);
+  const titleId = useId();
+  const labelled = Root !== "div" && !rest["aria-label"] && !rest["aria-labelledby"];
+  return /* @__PURE__ */ jsx(TitleId.Provider, { value: labelled ? titleId : void 0, children: /* @__PURE__ */ jsx(
+    Root,
     __spreadProps(__spreadValues({
-      className: [
-        "rounded-(--radius-card) overflow-hidden",
-        VARIANT_CLASS[variant],
-        interactive && "transition-shadow hover:shadow-md cursor-pointer",
-        className
-      ].filter(Boolean).join(" ")
-    }, props), {
+      "aria-labelledby": labelled ? titleId : void 0
+    }, rest), {
+      className: ["rds-card", `rds-card--${surface}`, size === "sm" && "rds-card--sm", className].filter(Boolean).join(" "),
       children
     })
-  );
+  ) });
 }
 function CardHeader(_c) {
-  var _d = _c, { title, description, action, badge, icon, className = "", children } = _d, props = __objRest(_d, ["title", "description", "action", "badge", "icon", "className", "children"]);
-  if (children) {
-    return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: ["ds-card-header flex items-center justify-between gap-4 px-4 py-4", className].join(" ") }, props), { children }));
-  }
-  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ className: ["ds-card-header flex items-start justify-between gap-4 px-4 py-4", className].join(" ") }, props), { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
-      icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 size-10 rounded-(--radius-card) bg-surface-raised flex items-center justify-center text-fg-secondary", children: icon }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-label font-semibold text-fg-primary leading-snug", children: title }),
-          badge
-        ] }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption text-fg-muted", children: description })
-      ] })
+  var _d = _c, { title, titleAs: Title = "h3", description, icon, action, align = "start", className } = _d, rest = __objRest(_d, ["title", "titleAs", "description", "icon", "action", "align", "className"]);
+  const titleId = useContext(TitleId);
+  return /* @__PURE__ */ jsxs("header", __spreadProps(__spreadValues({}, rest), { className: ["rds-card__header", `rds-card__header--${align}`, className].filter(Boolean).join(" "), children: [
+    icon,
+    /* @__PURE__ */ jsxs("div", { className: "rds-card__heading", children: [
+      /* @__PURE__ */ jsx(Title, { id: titleId, className: "rds-card__title", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "rds-card__description", children: description })
     ] }),
-    action && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action })
+    action && /* @__PURE__ */ jsx("div", { className: "rds-card__action", children: action })
   ] }));
 }
-function CardTitle(_e) {
-  var _f = _e, { className = "", children } = _f, props = __objRest(_f, ["className", "children"]);
-  return /* @__PURE__ */ jsx("h3", __spreadProps(__spreadValues({ className: ["text-body font-semibold text-fg-primary", className].join(" ") }, props), { children }));
-}
-function CardBody(_g) {
-  var _h = _g, { noPadding, className = "", children } = _h, props = __objRest(_h, ["noPadding", "className", "children"]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: [noPadding ? "" : "px-4 pb-4 pt-4 [.ds-card-header+&]:pt-0", className].join(" ").trim() }, props), { children }));
+function CardContent(_e) {
+  var _f = _e, { className } = _f, rest = __objRest(_f, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-card__content", className].filter(Boolean).join(" ") }));
 }
-function CardFooter(_i) {
-  var _j = _i, { className = "", children } = _j, props = __objRest(_j, ["className", "children"]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: ["flex items-center justify-end gap-3 px-4 pt-2 pb-4", className].join(" ") }, props), { children }));
+function CardFooter(_g) {
+  var _h = _g, { align = "end", note, className, children } = _h, rest = __objRest(_h, ["align", "note", "className", "children"]);
+  return /* @__PURE__ */ jsxs("footer", __spreadProps(__spreadValues({}, rest), { className: ["rds-card__footer", `rds-card__footer--${align}`, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("div", { className: "rds-card__actions", children }),
+    note && /* @__PURE__ */ jsx("p", { className: "rds-card__note", children: note })
+  ] }));
 }
 export {
   Card,
-  CardBody,
+  CardContent,
   CardFooter,
-  CardHeader,
-  CardTitle
+  CardHeader
 };

package/dist/components/carousel.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface CarouselProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** What the sequence is ("Depoimentos"). Required: it names the carousel. */
+    'aria-label': string;
+    /** The slides, one child each (Figma: the `slide` slot). Up to 5: beyond that, a list or a grid shows better. */
+    children: ReactNode;
+    /** The previous and next arrows (Figma: `showControls`). On a phone, where the person swipes, you can turn them off. */
+    showControls?: boolean;
+    /** The position dots (Figma: `showDots`). */
+    showDots?: boolean;
+    /** The slide shown at first (0-based). */
+    defaultIndex?: number;
+    /** Controlled slide index. */
+    index?: number;
+    onIndexChange?: (index: number) => void;
+}
+/**
+ * Carousel — Figma [RDS] Content/Carousel. A short sequence of the same kind of thing, one slide at a time. It never
+ * moves on its own. The viewport is a polite live region, so the new slide ("2 de 5") is announced. Keyboard: the
+ * left and right arrows change slides while the focus is inside. On touch, swipe. Styles: carousel.css.
+ */
+declare function Carousel({ showControls, showDots, defaultIndex, index, onIndexChange, className, children, onKeyDown, ...rest }: CarouselProps): react.JSX.Element;
+/** Text for an empty slide, as in Figma ("Slide 1 de 5"): a placeholder while the content is not there. */
+declare function CarouselPlaceholder({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+export { Carousel, CarouselPlaceholder, type CarouselProps };