@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/date-picker.d.ts

@@ -1,40 +1,39 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { CSSProperties } from 'react';
+import { IsoDate } from './internal/dates.js';
+import { FieldTextProps } from './internal/field.js';
 
-/**
- * DatePicker — input de data com calendar popover.
- *
- * Uso:
- *   <DatePicker value={date} onChange={setDate} />
- *   <DatePicker value={date} onChange={setDate} min={new Date()} />
- *   <DatePicker value={date} onChange={setDate} placeholder="Selecione" />
- *
- * Sem dependências externas — calendar próprio (mês/ano nav, semana ISO).
- * Locale pt-BR por default (segunda como primeiro dia).
- *
- * Limitações conscientes (MVP):
- *   - Single date só (sem range)
- */
-interface DatePickerProps {
-    /** Label renderada acima do controle (mesmo padrão do Input do DS). */
-    label?: ReactNode;
-    value: Date | null;
-    onChange: (date: Date | null) => void;
-    min?: Date;
-    max?: Date;
-    placeholder?: string;
-    size?: 'sm' | 'md';
-    width?: 'full' | 'hug';
-    /** locale pra formato. default = 'pt-BR'. */
-    locale?: string;
-    /** Primeiro dia da semana. default = 1 (segunda). */
-    weekStartsOn?: 0 | 1;
+interface DatePickerProps extends FieldTextProps {
+    /** Controlled: the date, ISO (2026-09-30), or '' for none (Figma: the Input's `text`). */
+    value?: IsoDate;
+    /** Uncontrolled: the date at first. */
+    defaultValue?: IsoDate;
+    /** Called with the ISO date when a valid date is typed or chosen, and with '' when the field is emptied. */
+    onValueChange?: (value: IsoDate) => void;
+    /** Days that can't be chosen in the calendar. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** The message when the typed date does not exist (31/02). */
+    invalidMessage?: string;
+    /** The calendar button's accessible name, also the popover's. */
+    pickLabel?: string;
+    /** The form field name: a hidden input carries the ISO date. */
+    name?: string;
     disabled?: boolean;
-    /** Texto label dos dias da semana (S T Q ...). default = pt-BR. */
-    weekdayLabels?: string[];
+    id?: string;
     className?: string;
+    style?: CSSProperties;
+    /** The name when there is no visible label. */
     'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Today, for tests and screenshots. */
+    today?: IsoDate;
 }
-declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * DatePicker — Figma [RDS] Forms/DatePicker. A date field that takes typing (dd/mm/aaaa, the slashes come by
+ * themselves) and, from the calendar button, opens the Calendar in a popover (Figma: `menu`). Choosing a day
+ * closes it and gives the focus back to the field; Escape closes without choosing. For a date near today, where
+ * seeing the month helps: a birth date is an Input. Styles: date-picker.css, internal/field.css, calendar.css.
+ */
+declare function DatePicker({ label, labelPosition, hint, error, errorMessage, required, value, defaultValue, onValueChange, isDateDisabled, invalidMessage, pickLabel, name, disabled, id, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, today, }: DatePickerProps): react.JSX.Element;
 
 export { DatePicker, type DatePickerProps };

package/dist/components/date-picker.js

@@ -1,271 +1,136 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect, useId, useImperativeHandle } from "react";
-import { Calendar, ChevronLeft, ChevronRight, X } from "lucide-react";
-import { Popover } from "./popover.js";
-const PT_WEEKDAYS_MON_FIRST = ["S", "T", "Q", "Q", "S", "S", "D"];
-const PT_MONTHS = [
-  "Janeiro",
-  "Fevereiro",
-  "Mar\xE7o",
-  "Abril",
-  "Maio",
-  "Junho",
-  "Julho",
-  "Agosto",
-  "Setembro",
-  "Outubro",
-  "Novembro",
-  "Dezembro"
-];
-const SIZE_CLASS = {
-  sm: "h-8 text-caption px-2.5",
-  md: "h-10 text-label px-3"
-};
-function startOfDay(d) {
-  const x = new Date(d);
-  x.setHours(0, 0, 0, 0);
-  return x;
-}
-function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function addDays(d, n) {
-  const r = new Date(d);
-  r.setDate(r.getDate() + n);
-  return r;
-}
-function buildMonthGrid(year, month, weekStartsOn) {
-  const first = new Date(year, month, 1);
-  const firstWeekday = first.getDay();
-  const offset = (firstWeekday - weekStartsOn + 7) % 7;
-  const start = new Date(year, month, 1 - offset);
-  const days = [];
-  for (let i = 0; i < 42; i++) {
-    days.push(new Date(start.getFullYear(), start.getMonth(), start.getDate() + i));
-  }
-  return days;
-}
-const DatePicker = forwardRef(function DatePicker2({
+import { useRef, useState } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Calendar } from "./calendar.js";
+import { formatBr, maskBr, parseBr } from "./internal/dates.js";
+import { FieldAction, FieldShell, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+import { CalendarIcon } from "./internal/icons.js";
+function DatePicker({
   label,
+  labelPosition,
+  hint,
+  error,
+  errorMessage,
+  required,
   value,
-  onChange,
-  min,
-  max,
-  placeholder = "Selecione\u2026",
-  size = "md",
-  width = "full",
-  locale = "pt-BR",
-  weekStartsOn = 1,
-  disabled = false,
-  weekdayLabels,
-  className = "",
-  "aria-label": ariaLabel
-}, ref) {
-  const triggerId = useId();
+  defaultValue = "",
+  onValueChange,
+  isDateDisabled,
+  invalidMessage = "Essa data n\xE3o existe. Use dd/mm/aaaa.",
+  pickLabel = "Escolher data",
+  name,
+  disabled,
+  id,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  today
+}) {
+  warnIfUnlabelled("DatePicker", label, ariaLabel, ariaLabelledBy);
+  const [own, setOwn] = useState(defaultValue);
+  const iso = value != null ? value : own;
+  const [text, setText] = useState(() => formatBr(iso));
+  const [editing, setEditing] = useState(false);
   const [open, setOpen] = useState(false);
-  const [view, setView] = useState(() => {
-    const r = value != null ? value : /* @__PURE__ */ new Date();
-    return { year: r.getFullYear(), month: r.getMonth() };
-  });
-  const [focusedDate, setFocusedDate] = useState(null);
-  const triggerRef = useRef(null);
-  const activeDayRef = useRef(null);
-  useImperativeHandle(ref, () => triggerRef.current);
-  useEffect(() => {
-    if (open && value) {
-      setView({ year: value.getFullYear(), month: value.getMonth() });
-    }
-  }, [open, value]);
-  useEffect(() => {
-    if (!open) setFocusedDate(null);
-  }, [open]);
-  useEffect(() => {
-    var _a;
-    if (focusedDate) (_a = activeDayRef.current) == null ? void 0 : _a.focus();
-  }, [focusedDate]);
-  function isDisabled(date) {
-    if (min && startOfDay(date) < startOfDay(min)) return true;
-    if (max && startOfDay(date) > startOfDay(max)) return true;
-    return false;
-  }
-  function handleSelect(date) {
-    if (isDisabled(date)) return;
-    onChange(date);
-    setOpen(false);
-  }
-  function handleClear(e) {
-    var _a;
-    e.stopPropagation();
-    onChange(null);
-    (_a = triggerRef.current) == null ? void 0 : _a.focus();
-  }
-  function handleGridKeyDown(e) {
-    var _a;
-    const base = (_a = focusedDate != null ? focusedDate : value) != null ? _a : new Date(view.year, view.month, 1);
-    let next = null;
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      next = addDays(base, 1);
-    } else if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      next = addDays(base, -1);
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      next = addDays(base, 7);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      next = addDays(base, -7);
-    } else if (e.key === "Enter" && focusedDate && !isDisabled(focusedDate)) {
-      e.preventDefault();
-      handleSelect(focusedDate);
-      return;
-    }
-    if (next) {
-      setFocusedDate(next);
-      if (next.getMonth() !== view.month || next.getFullYear() !== view.year) {
-        setView({ year: next.getFullYear(), month: next.getMonth() });
-      }
-    }
-  }
-  function nav(delta) {
-    setView(({ year, month }) => {
-      const m = month + delta;
-      if (m < 0) return { year: year - 1, month: 11 };
-      if (m > 11) return { year: year + 1, month: 0 };
-      return { year, month: m };
-    });
-  }
-  const tabFocusDate = focusedDate != null ? focusedDate : value;
-  const days = buildMonthGrid(view.year, view.month, weekStartsOn);
-  const weekdays = weekdayLabels != null ? weekdayLabels : weekStartsOn === 1 ? PT_WEEKDAYS_MON_FIRST : ["D", ...PT_WEEKDAYS_MON_FIRST.slice(0, 6)];
-  const today = startOfDay(/* @__PURE__ */ new Date());
-  const formatted = value ? value.toLocaleDateString(locale, { day: "2-digit", month: "2-digit", year: "numeric" }) : "";
-  const calendar = /* @__PURE__ */ jsxs(
-    "div",
+  const input = useRef(null);
+  const shown = editing ? text : formatBr(iso);
+  const nonexistent = shown.length === 10 && !parseBr(shown);
+  const message = nonexistent ? invalidMessage : errorMessage;
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error || nonexistent, message);
+  const floating = labelPosition === "floating" && Boolean(label);
+  const commit = (next) => {
+    if (value === void 0) setOwn(next);
+    onValueChange == null ? void 0 : onValueChange(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    FieldShell,
     {
-      role: "dialog",
-      "aria-label": "Calend\xE1rio",
-      className: "rounded-(--radius-control) border border-stroke-control bg-surface-default shadow-lg p-3 w-[280px]",
+      kind: "rds-date-picker",
+      controlId,
+      hintId,
+      errorId,
+      label,
+      labelPosition,
+      hint,
+      errorMessage: message,
+      invalid,
+      required,
+      disabled,
+      boxClassName: "rds-field__box--action",
+      className,
+      style,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => nav(-1),
-              "aria-label": "M\xEAs anterior",
-              className: "p-1 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: input,
+            id: controlId,
+            className: "rds-field__control",
+            inputMode: "numeric",
+            autoComplete: "off",
+            placeholder: floating ? " " : "dd/mm/aaaa",
+            maxLength: 10,
+            required,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy,
+            value: shown,
+            onChange: (event) => {
+              const masked = maskBr(event.target.value);
+              setText(masked);
+              setEditing(true);
+              if (masked === "") commit("");
+              const parsed = parseBr(masked);
+              if (parsed) commit(parsed);
+            },
+            onBlur: () => {
+              if (parseBr(text) || text === "") setEditing(false);
             }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "text-label font-semibold text-fg-primary", children: [
-            PT_MONTHS[view.month],
-            " ",
-            view.year
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
+          }
+        ),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: iso }),
+        /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(FieldAction, { label: pickLabel, icon: /* @__PURE__ */ jsx(CalendarIcon, {}) }) }),
+          /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+            PopoverPrimitive.Content,
             {
-              type: "button",
-              onClick: () => nav(1),
-              "aria-label": "Pr\xF3ximo m\xEAs",
-              className: "p-1 rounded hover:bg-surface-raised text-fg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-              children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+              "aria-label": pickLabel,
+              align: "end",
+              sideOffset: 4,
+              className: "rds-date-picker__popover",
+              onOpenAutoFocus: (event) => event.preventDefault(),
+              onCloseAutoFocus: (event) => {
+                var _a;
+                event.preventDefault();
+                (_a = input.current) == null ? void 0 : _a.focus();
+              },
+              children: /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  value: iso || null,
+                  today,
+                  autoFocus: true,
+                  isDateDisabled,
+                  onValueChange: (next) => {
+                    commit(next);
+                    setText(formatBr(next));
+                    setEditing(false);
+                    setOpen(false);
+                  }
+                }
+              )
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 mb-1", children: weekdays.map((w, i) => /* @__PURE__ */ jsx("div", { className: "text-center text-[10px] font-semibold text-fg-muted uppercase", children: w }, i)) }),
-        /* @__PURE__ */ jsx("div", { role: "grid", className: "grid grid-cols-7 gap-1", onKeyDown: handleGridKeyDown, children: days.map((d, i) => {
-          const inMonth = d.getMonth() === view.month;
-          const isToday = isSameDay(d, today);
-          const isSelected = !!value && isSameDay(d, value);
-          const isFocused = !!tabFocusDate && isSameDay(d, tabFocusDate);
-          const dis = isDisabled(d);
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              ref: isFocused ? activeDayRef : void 0,
-              type: "button",
-              role: "gridcell",
-              onClick: () => handleSelect(d),
-              disabled: dis,
-              "aria-selected": isSelected,
-              "aria-label": d.toLocaleDateString(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }),
-              tabIndex: isFocused ? 0 : -1,
-              className: [
-                "h-8 rounded text-caption font-medium transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-                "disabled:cursor-not-allowed disabled:opacity-30",
-                isSelected ? "bg-brand-primary text-brand-on-primary" : isToday ? "border border-stroke-focus text-fg-primary hover:bg-surface-raised" : inMonth ? "text-fg-primary hover:bg-surface-raised" : "text-fg-disabled hover:bg-surface-raised"
-              ].join(" "),
-              children: d.getDate()
-            },
-            i
-          );
-        }) })
+          ) })
+        ] })
       ]
     }
   );
-  const control = /* @__PURE__ */ jsxs("div", { className: ["relative", width === "full" ? "block w-full" : "inline-block", label ? "" : className].join(" "), children: [
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        trigger: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref: triggerRef,
-            id: triggerId,
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              if (!disabled) setOpen((o) => !o);
-            },
-            disabled,
-            "aria-label": ariaLabel != null ? ariaLabel : "Selecionar data",
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            className: [
-              "w-full flex items-center gap-2 rounded-(--radius-control) border border-stroke-control bg-surface-default",
-              "transition-colors focus:outline-none focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              value ? "pr-7" : "",
-              SIZE_CLASS[size]
-            ].join(" "),
-            children: [
-              /* @__PURE__ */ jsx(Calendar, { size: 16, className: "text-fg-muted shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: ["flex-1 text-left truncate", value ? "text-fg-primary" : "text-fg-placeholder"].join(" "), children: formatted || placeholder })
-            ]
-          }
-        ),
-        triggerClassName: width === "full" ? "block w-full" : "inline-block",
-        placement: "bottom-start",
-        offset: 4,
-        open,
-        onOpenChange: (v) => {
-          if (!disabled) setOpen(v);
-        },
-        children: () => calendar
-      }
-    ),
-    value && !disabled && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleClear,
-        "aria-label": "Limpar data",
-        className: "absolute right-2 top-1/2 -translate-y-1/2 text-fg-muted hover:text-fg-primary p-0.5 rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-        children: /* @__PURE__ */ jsx(X, { size: 14 })
-      }
-    )
-  ] });
-  if (!label) return control;
-  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", width === "full" ? "w-full" : "inline-flex", className].join(" "), children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: triggerId, className: "text-label font-medium text-fg-primary", children: label }),
-    control
-  ] });
-});
+}
 export {
   DatePicker
 };

package/dist/components/delta.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type DeltaDirection = 'up' | 'down' | 'flat';
+/** Whether the change is good (success), bad (danger) or just information (neutral). Not the direction. */
+type DeltaTone = 'neutral' | 'success' | 'danger';
+interface DeltaProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** How much it changed, with the unit (Figma: `value`): "24%", "3,5 pp". */
+    children: ReactNode;
+    /** Where the number went (Figma: `direction`). */
+    direction?: DeltaDirection;
+    /** Whether that is good: going up is not always good (Figma: `tone`). */
+    tone?: DeltaTone;
+    /**
+     * What a screen reader hears before the value, since the arrow is hidden from it. Defaults to a word for the
+     * direction ("Subiu", "Caiu", "Sem mudança"); pass the full sentence when there is context, such as the period.
+     */
+    srPrefix?: string;
+}
+/**
+ * Delta — Figma [RDS] Indicators/Delta. The change of a number against the previous period: an arrow and the value.
+ * Styles: delta.css.
+ */
+declare function Delta({ direction, tone, srPrefix, children, className, ...rest }: DeltaProps): react.JSX.Element;
+
+export { Delta, type DeltaDirection, type DeltaProps, type DeltaTone };

package/dist/components/delta.js

@@ -0,0 +1,24 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from "./internal/icons.js";
+const ARROWS = { up: ArrowUpIcon, down: ArrowDownIcon, flat: MinusIcon };
+const SR_PREFIX = { up: "Subiu", down: "Caiu", flat: "Sem mudan\xE7a" };
+function Delta(_a) {
+  var _b = _a, { direction = "up", tone = "neutral", srPrefix, children, className } = _b, rest = __objRest(_b, ["direction", "tone", "srPrefix", "children", "className"]);
+  const Arrow = ARROWS[direction];
+  return /* @__PURE__ */ jsxs("span", __spreadProps(__spreadValues({}, rest), { className: ["rds-delta", `rds-delta--${tone}`, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("span", { className: "rds-delta__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Arrow, {}) }),
+    /* @__PURE__ */ jsxs("span", { className: "rds-visually-hidden", children: [
+      srPrefix != null ? srPrefix : SR_PREFIX[direction],
+      " "
+    ] }),
+    children
+  ] }));
+}
+export {
+  Delta
+};

package/dist/components/dialog.d.ts

@@ -0,0 +1,21 @@
+import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
+import * as react from 'react';
+import { ModalProps } from './internal/modal.js';
+
+type DialogSize = 'sm' | 'default' | 'lg';
+interface DialogProps extends ModalProps {
+    /** sm 400 (a question with one field), default 560 (a short form), lg 720 (a table or a preview). */
+    size?: DialogSize;
+}
+/**
+ * Dialog — Figma [RDS] Overlays/Dialog. A window over the screen for a short task: create, edit (Radix Dialog).
+ * role="dialog", aria-modal, named by the title and described by the description; the focus opens on the first
+ * control of the content, stays inside (Tab cycles) and goes back to what opened it. Escape, the × and a click on
+ * the veil close it, and the page behind doesn't scroll. Something with no way back is the AlertDialog; a long
+ * form is the Sheet. Styles: internal/modal.css and dialog.css.
+ */
+declare function Dialog({ size, ...props }: DialogProps): react.JSX.Element;
+/** Wraps an element inside the Dialog that closes it when pressed, with asChild. */
+declare const DialogClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Dialog, DialogClose, type DialogProps, type DialogSize };

package/dist/components/dialog.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import { ModalClose, ModalShell } from "./internal/modal.js";
+function Dialog(_a) {
+  var _b = _a, { size = "default" } = _b, props = __objRest(_b, ["size"]);
+  return /* @__PURE__ */ jsx(ModalShell, __spreadValues({ prefix: "rds-dialog", modifiers: [`rds-dialog--${size}`] }, props));
+}
+const DialogClose = ModalClose;
+export {
+  Dialog,
+  DialogClose
+};

package/dist/components/drawer.d.ts

@@ -1,26 +1,18 @@
+import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
 import * as react from 'react';
+import { ModalProps } from './internal/modal.js';
 
-type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
-interface DrawerProps {
-    open: boolean;
-    onClose: () => void;
-    title?: React.ReactNode;
-    /** Subtítulo opcional abaixo do title. */
-    subtitle?: React.ReactNode;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-    side?: 'left' | 'right';
-    /** Tamanho preset. Sobrescreve `width` se ambos passados. */
-    size?: DrawerSize;
-    /** Largura custom (Tailwind class, ex: "w-96"). Use só se size não atende. */
-    width?: string;
-    closeOnBackdrop?: boolean;
-    hideClose?: boolean;
-    className?: string;
-    /** Alvo do portal. default = document.body. Passe um elemento de um subtree TEMATIZADO (ex.: a
-     *  raiz do tema da loja) pra o drawer herdar tokens/mode/fonte daquele contexto em vez do global. */
-    container?: Element | null;
-}
-declare function Drawer({ open, onClose, title, subtitle, children, footer, side, size, width, closeOnBackdrop, hideClose, className, container, }: DrawerProps): react.ReactPortal | null;
+type DrawerProps = ModalProps;
+/**
+ * Drawer — Figma [RDS] Overlays/Drawer. The panel that comes up from the bottom, on a phone: filters, quick
+ * choices (Radix Dialog). role="dialog", aria-modal, named by the title; the focus stays inside and goes back to
+ * what opened it, and the page behind doesn't scroll. It has no ×: dragging the handle down, a tap on the veil,
+ * Escape or Cancel close it. The default footer is stacked, the main action first and full width.
+ * In 1.x this was the BottomSheet; the 1.x Drawer (from the side) is now the Sheet.
+ * Styles: internal/modal.css and drawer.css.
+ */
+declare function Drawer({ open, defaultOpen, onOpenChange, ...props }: DrawerProps): react.JSX.Element;
+/** Wraps an element inside the Drawer that closes it when pressed, with asChild. */
+declare const DrawerClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 
-export { Drawer, type DrawerProps, type DrawerSize };
+export { Drawer, DrawerClose, type DrawerProps };