@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/google-sign-in.js

@@ -0,0 +1,36 @@
+import "../chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { GoogleAccountChip, GoogleActions, GoogleAppLine, GoogleField, GoogleScreen } from "./internal/google.js";
+function GoogleSignIn({
+  title,
+  appName = "Roj\xE3o",
+  layout = "m3",
+  step = "email",
+  email = "ana@exemplo.com",
+  className
+}) {
+  const password = step === "password";
+  return /* @__PURE__ */ jsx(
+    GoogleScreen,
+    {
+      layout,
+      label: "Mockup: login com o Google",
+      title: title != null ? title : password ? "Boas-vindas" : "Fa\xE7a login",
+      intro: password ? /* @__PURE__ */ jsx(GoogleAccountChip, { email }) : /* @__PURE__ */ jsx(GoogleAppLine, { lead: "Prosseguir para", appName }),
+      className: ["rds-google-sign-in", className].filter(Boolean).join(" "),
+      children: password ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(GoogleField, { label: "Digite sua senha" }),
+        /* @__PURE__ */ jsx("span", { className: "rds-google__checkbox rds-google-sign-in__show", children: "Mostrar senha" }),
+        /* @__PURE__ */ jsx(GoogleActions, { secondary: "Esqueceu a senha?", primary: "Avan\xE7ar" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(GoogleField, { label: "E-mail ou telefone", state: layout === "oauth" ? "focus" : "default" }),
+        /* @__PURE__ */ jsx("span", { className: "rds-google__link rds-google-sign-in__forgot", children: "Esqueceu o e-mail?" }),
+        /* @__PURE__ */ jsx("p", { className: "rds-google__text rds-google-sign-in__notice", children: layout === "m3" ? "N\xE3o est\xE1 no seu computador? Use uma janela de navega\xE7\xE3o privada para fazer login." : `Consulte a Pol\xEDtica de Privacidade e os Termos de Servi\xE7o do app ${appName} antes de us\xE1-lo.` }),
+        /* @__PURE__ */ jsx(GoogleActions, { secondary: "Criar conta", primary: "Avan\xE7ar" })
+      ] })
+    }
+  );
+}
+export {
+  GoogleSignIn
+};

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

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactElement, ReactNode } from 'react';
+
+interface HoverCardProps {
+    /** The link it opens from: an <a href> to the full page. The card only repeats what is there. */
+    children: ReactElement;
+    /** Who or what it is (Figma: `title`). */
+    title: ReactNode;
+    /** What it does (Figma: `description`). */
+    description?: ReactNode;
+    /** An Avatar (Figma: `showAvatar` + the avatar). */
+    avatar?: ReactNode;
+    /** One short fact, such as the city, after a pin (Figma: `showMeta` + `meta`). */
+    meta?: ReactNode;
+    /** ms still before opening, so it does not flash while the mouse crosses the screen. */
+    openDelay?: number;
+    /** ms after the mouse leaves; it stays open while the mouse is over it. */
+    closeDelay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * HoverCard — Figma [RDS] Feedback/HoverCard. A preview on hovering or focusing a link: who it is, before clicking
+ * (Radix HoverCard). Never the only way to the information: on touch it does not open. No buttons inside: that is
+ * the Popover. Styles: hover-card.css.
+ */
+declare function HoverCard({ children, title, description, avatar, meta, openDelay, closeDelay, open, defaultOpen, onOpenChange, }: HoverCardProps): react.JSX.Element;
+
+export { HoverCard, type HoverCardProps };

package/dist/components/hover-card.js

@@ -0,0 +1,55 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { MapPinIcon } from "./internal/icons.js";
+function HoverCard({
+  children,
+  title,
+  description,
+  avatar,
+  meta,
+  openDelay = 500,
+  closeDelay = 300,
+  open,
+  defaultOpen,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    HoverCardPrimitive.Root,
+    {
+      openDelay,
+      closeDelay,
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(HoverCardPrimitive.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+          HoverCardPrimitive.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 8,
+            collisionPadding: 16,
+            className: "rds-hover-card",
+            children: [
+              avatar && /* @__PURE__ */ jsx("span", { className: "rds-hover-card__avatar", children: avatar }),
+              /* @__PURE__ */ jsxs("div", { className: "rds-hover-card__content", children: [
+                /* @__PURE__ */ jsx("p", { className: "rds-hover-card__title", children: title }),
+                description && /* @__PURE__ */ jsx("p", { className: "rds-hover-card__description", children: description }),
+                meta && /* @__PURE__ */ jsxs("p", { className: "rds-hover-card__meta", children: [
+                  /* @__PURE__ */ jsx("span", { className: "rds-hover-card__meta-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MapPinIcon, {}) }),
+                  meta
+                ] })
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  HoverCard
+};

package/dist/components/icon-button.d.ts

@@ -1,17 +1,47 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ButtonTone, ButtonVariant, ButtonSize } from './internal/button.js';
 
-type IconButtonVariant = 'filled' | 'outline' | 'ghost';
-type IconButtonColor = 'primary' | 'secondary' | 'danger' | 'neutral';
-type IconButtonSize = 'sm' | 'md' | 'lg';
-interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+    /** The only content of the button (Figma: `iconName`). */
     icon: ReactNode;
-    'aria-label': string;
-    variant?: IconButtonVariant;
-    color?: IconButtonColor;
-    size?: IconButtonSize;
+    /** Required: the name a screen reader announces ("Fechar", "Mostrar senha"). Rendered as aria-label. */
+    label: string;
+    /** Same tones as the Button. */
+    tone?: ButtonTone;
+    /** Figma calls this property `style`. */
+    variant?: ButtonVariant;
+    /**
+     * The size of the square (Figma: `size`): sm 36 with a 16 icon, md 44 with a 20 icon (default), lg 52 with a 24
+     * icon. The touch target is 44 × 44 in every size: on sm, an invisible layer extends it under a coarse pointer.
+     */
+    size?: ButtonSize;
+    /** Rendered as aria-disabled="true", as in the Button. */
+    disabled?: boolean;
+    /** Render the single child element (an empty `<a>`, a framework `Link`) with the button's classes. */
+    asChild?: boolean;
+    /** Waiting for what the click started (Figma: `loading`): the icon gives way to a turning loader. */
     loading?: boolean;
+    /** What is being waited for, announced while loading. */
+    loadingLabel?: string;
+    /** Only with `asChild`: the link element; the icon is placed inside it. */
+    children?: ReactNode;
 }
-declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * IconButton — Figma [RDS] Actions/IconButton. A square of 36, 44 (default) or 52, same tones, sizes and tokens as
+ * the Button.
+ *
+ * The icon alone does not say what the button does: always pair it with a Tooltip carrying the same text as `label`,
+ * shown on hover and on keyboard focus. They are two components (no tooltip inside this one), always together:
+ *
+ * ```tsx
+ * <Tooltip text="Novo cliente">
+ *   <IconButton icon={<PlusIcon />} label="Novo cliente" />
+ * </Tooltip>
+ * ```
+ *
+ * Every IconButton the design system renders itself (closes, arrows, "Mais ações") already comes with its Tooltip.
+ */
+declare function IconButton({ icon, label, tone, variant, size, disabled, loading, loadingLabel, asChild, type, className, onClick, children, ...rest }: IconButtonProps): react.JSX.Element;
 
-export { IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonVariant };
+export { IconButton, type IconButtonProps };

package/dist/components/icon-button.js

@@ -1,85 +1,65 @@
+"use client";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const SIZE_CLASSES = {
-  sm: "size-control-sm [&_svg]:size-4",
-  md: "size-control-md [&_svg]:size-5",
-  lg: "size-control-lg [&_svg]:size-6"
-};
-const COLOR_CLASSES = {
-  filled: {
-    primary: "bg-brand-primary text-brand-on-primary hover:bg-brand-hover",
-    secondary: "bg-surface-raised text-fg-primary hover:opacity-90",
-    danger: "bg-danger text-fg-inverse hover:bg-danger-text",
-    neutral: "bg-surface-raised text-fg-primary hover:bg-stroke-default"
-  },
-  outline: {
-    primary: "border border-brand-primary text-brand-primary hover:bg-surface-raised",
-    secondary: "border border-stroke-default text-fg-secondary hover:bg-surface-raised",
-    danger: "border border-danger text-danger-text hover:bg-danger-soft",
-    neutral: "border border-stroke-default text-fg-secondary hover:bg-surface-raised"
-  },
-  ghost: {
-    primary: "text-brand-primary hover:bg-surface-raised",
-    secondary: "text-fg-secondary hover:bg-surface-raised",
-    danger: "text-danger-text hover:bg-danger-soft",
-    neutral: "text-fg-muted hover:bg-surface-raised hover:text-fg-primary"
-  }
-};
-const IconButton = forwardRef(function IconButton2(_a, ref) {
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import {
+  blockWhenDisabled,
+  buttonClassName,
+  Loader,
+  useLoadingAnnouncement
+} from "./internal/button.js";
+function IconButton(_a) {
   var _b = _a, {
     icon,
-    variant = "ghost",
-    color = "neutral",
+    label,
+    tone = "action",
+    variant = "fill",
     size = "md",
-    loading = false,
     disabled,
-    className = ""
+    loading,
+    loadingLabel = "Carregando\u2026",
+    asChild,
+    type = "button",
+    className,
+    onClick,
+    children
   } = _b, rest = __objRest(_b, [
     "icon",
+    "label",
+    "tone",
     "variant",
-    "color",
     "size",
-    "loading",
     "disabled",
-    "className"
+    "loading",
+    "loadingLabel",
+    "asChild",
+    "type",
+    "className",
+    "onClick",
+    "children"
   ]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      ref,
-      type: "button",
-      disabled: disabled || loading,
-      className: [
-        "inline-flex items-center justify-center rounded-(--radius-control) transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        SIZE_CLASSES[size],
-        COLOR_CLASSES[variant][color],
-        className
-      ].join(" ")
-    }, rest), {
-      children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : icon
+  const Root = asChild ? Slot : "button";
+  const iconNode = /* @__PURE__ */ jsx("span", { className: loading ? "rds-button__icon rds-button__loader" : "rds-button__icon", "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx(Loader, {}) : icon });
+  useLoadingAnnouncement(loading, loadingLabel);
+  return /* @__PURE__ */ jsxs(
+    Root,
+    __spreadProps(__spreadValues({}, rest), {
+      type: asChild ? void 0 : type,
+      "aria-label": label,
+      className: buttonClassName(tone, variant, size, ["rds-button--icon-only", className].filter(Boolean).join(" ")),
+      "aria-disabled": disabled || void 0,
+      "aria-busy": loading || void 0,
+      onClick: blockWhenDisabled(disabled || loading, onClick),
+      children: [
+        asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : iconNode,
+        asChild && iconNode
+      ]
     })
   );
-});
-function Spinner() {
-  return /* @__PURE__ */ jsxs("svg", { className: "animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.25" }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M22 12a10 10 0 0 1-10 10",
-        stroke: "currentColor",
-        strokeWidth: "2.5",
-        strokeLinecap: "round"
-      }
-    )
-  ] });
 }
 export {
   IconButton

package/dist/components/image-crop-modal.d.ts

@@ -1,9 +1,9 @@
 import * as react from 'react';
 
 /**
- * ImageCropModal — modal de crop de imagem com presets de aspect ratio.
- *
- * Requer `react-image-crop` instalado no consumer (peerDep).
+ * ImageCropModal — a composition of the Dialog, a ToggleGroup (the aspect presets), the Alert (an aspect out of
+ * bounds) and the Spinner: crops an image before upload. Needs `react-image-crop` (an optional peer, needed only
+ * here). Styles: image-crop-modal.css.
  *
  * Uso:
  *   <ImageCropModal

package/dist/components/image-crop-modal.js

@@ -4,17 +4,19 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import ReactCrop, { centerCrop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
-import { Modal } from "./modal.js";
-import { Spinner } from "./spinner.js";
+import { Alert } from "./alert.js";
 import { Button } from "./button.js";
+import { Dialog } from "./dialog.js";
+import { Spinner } from "./spinner.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
 function RatioIcon({ w, h }) {
   const box = 16;
   const rw = w >= h ? box : w / h * box;
   const rh = h >= w ? box : h / w * box;
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, className: "shrink-0", children: /* @__PURE__ */ jsx("rect", { x: (18 - rw) / 2, y: (18 - rh) / 2, width: rw, height: rh, rx: "1.5", stroke: "currentColor", strokeWidth: "1.6" }) });
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("rect", { x: (18 - rw) / 2, y: (18 - rh) / 2, width: rw, height: rh, rx: "1.5", stroke: "currentColor", strokeWidth: "1.6" }) });
 }
 function FreeIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, className: "shrink-0", children: /* @__PURE__ */ jsx("rect", { x: "2.5", y: "2.5", width: "13", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.6", strokeDasharray: "2.5 2.2" }) });
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("rect", { x: "2.5", y: "2.5", width: "13", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.6", strokeDasharray: "2.5 2.2" }) });
 }
 const DEFAULT_PRESETS = [
   { id: "square", label: "1:1", aspect: 1, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 1, h: 1 }) },
@@ -187,34 +189,34 @@ function ImageCropModal({
     }
   }
   return /* @__PURE__ */ jsx(
-    Modal,
+    Dialog,
     {
       open,
-      onClose: onCancel,
+      onOpenChange: (next) => {
+        if (!next) onCancel();
+      },
       size: "lg",
       title: position ? `${title} \xB7 ${position}` : title,
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onCancel, children: "Cancelar" }),
+        /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", onClick: onCancel, children: "Cancelar" }),
         /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, disabled: busy || !completedCrop || !!aspectError, loading: busy, children: busy ? "Aplicando\u2026" : confirmLabel })
       ] }),
-      children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        presets.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 rounded-(--radius-control) bg-surface-raised p-1", children: presets.map((p) => /* @__PURE__ */ jsxs(
-          "button",
+      children: /* @__PURE__ */ jsxs("div", { className: "rds-image-crop", children: [
+        presets.length > 1 && /* @__PURE__ */ jsx(
+          ToggleGroup,
           {
-            type: "button",
-            onClick: () => applyPreset(p),
-            className: [
-              "flex flex-1 min-w-[80px] items-center justify-center gap-1.5 rounded-(--radius-control) px-3 py-1.5 text-caption font-medium transition-colors",
-              preset.id === p.id ? "bg-surface-default text-fg-primary shadow-sm" : "text-fg-muted hover:text-fg-primary"
-            ].join(" "),
-            children: [
-              p.icon,
-              p.label
-            ]
-          },
-          p.id
-        )) }),
-        /* @__PURE__ */ jsxs("div", { className: "relative rounded-(--radius-control) bg-surface-overlay overflow-hidden flex items-center justify-center min-h-[300px] max-h-[60vh] p-4", children: [
+            type: "single",
+            "aria-label": "Propor\xE7\xE3o",
+            value: preset.id,
+            onValueChange: (id) => {
+              const next = presets.find((p) => p.id === id);
+              if (next) applyPreset(next);
+            },
+            className: "rds-image-crop__presets",
+            children: presets.map((p) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: p.id, icon: p.icon, children: p.label }, p.id))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "rds-image-crop__stage", children: [
           src && /* @__PURE__ */ jsx(
             ReactCrop,
             {
@@ -228,24 +230,15 @@ function ImageCropModal({
               keepSelection: true,
               minWidth: 50,
               minHeight: 50,
-              className: "max-h-[60vh] max-w-full",
-              children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  ref: imgRef,
-                  src,
-                  alt: "",
-                  onLoad: handleImageLoad,
-                  className: "max-h-full max-w-full"
-                }
-              )
+              className: "rds-image-crop__crop",
+              children: /* @__PURE__ */ jsx("img", { ref: imgRef, src, alt: "", onLoad: handleImageLoad, className: "rds-image-crop__image" })
             }
           ),
-          !imgLoaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", color: "inverse" }) }),
-          busy && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", color: "inverse" }) })
+          !imgLoaded && /* @__PURE__ */ jsx("div", { className: "rds-image-crop__layer", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", label: "Carregando imagem\u2026" }) }),
+          busy && /* @__PURE__ */ jsx("div", { className: "rds-image-crop__layer rds-image-crop__layer--busy", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", tone: "inverse", label: "Enviando\u2026" }) })
         ] }),
-        aspectError && /* @__PURE__ */ jsx("p", { className: "rounded-(--radius-control) bg-danger-soft px-3 py-2 text-caption text-danger-text", children: aspectError }),
-        !aspectError && preset.id === "free" && /* @__PURE__ */ jsxs("p", { className: "text-caption text-fg-muted", children: [
+        aspectError && /* @__PURE__ */ jsx(Alert, { tone: "danger", title: aspectError, announce: "alert" }),
+        !aspectError && preset.id === "free" && /* @__PURE__ */ jsxs("p", { className: "rds-image-crop__hint", children: [
           "Livre: propor\xE7\xE3o entre ",
           minAspect.toFixed(1),
           " (vertical) e ",

package/dist/components/image-upload.d.ts

@@ -2,44 +2,32 @@ import * as react from 'react';
 import { CropPreset } from './image-crop-modal.js';
 
 /**
- * ImageUpload — upload com preview e remoção.
- *
- * variant="button"   → botão + preview simples (inline, form denso)
- * variant="dropzone" → zona de drop grande com drag & drop (upload é o herói: banner, galeria)
- * variant="tile"     → tile COMPACTO auto-contido (ativo único e pequeno: logo, avatar). O
- *                      próprio tile é o alvo de clique/drop; quando preenchido, vira o preview
- *                      com botões-ícone de trocar/remover no canto (sem fileira de controles
- *                      separada, sem largura full). Todos os estados no mesmo footprint.
- *
- * Textos são i18n-áveis via `labels` (defaults pt-BR preservam o comportamento atual).
- *
- * Uso:
- *   <ImageUpload name="logo" value={url} onChange={setUrl}
- *     onUpload={async (file) => { ... return url; }} variant="tile" aspect="logo" />
+ * @deprecated Use `<FileInput variant="tile">` (Figma [RDS] Forms/FileInput): the image's square with the preview
+ * and the swap and remove buttons. ImageUpload is now a thin wrapper over it that keeps the 1.x API compiling and
+ * keeps the upload (`onUpload`) and the crop (`crop`). Every variant renders the tile: an image asks for a preview.
  */
 type ImageUploadAspect = 'logo' | 'banner' | 'square';
 type ImageUploadVariant = 'button' | 'dropzone' | 'tile';
 interface ImageUploadLabels {
-    /** Botão/prompt do estado vazio (button/dropzone/tile). */
+    /** The empty tile's text (FileInput's `tileText`). */
     select: string;
-    /** Ação de trocar a imagem (botão + aria-label do tile). */
+    /** The swap button's name. */
     change: string;
-    /** Ação de remover. */
+    /** The remove button's name. */
     remove: string;
-    /** Texto durante o upload. */
+    /** The tile's text while uploading. */
     uploading: string;
-    /** Título da dropzone vazia. */
+    /** @deprecated Not shown: the tile has no title. */
     dropTitle: string;
-    /** Subtítulo da dropzone vazia. */
+    /** @deprecated Not shown: say the formats in `hint`. */
     dropHint: string;
-    /** aria-label da área de upload. */
+    /** The field's name when there is no `label`. */
     aria: string;
-    /** Mensagem de erro genérica de upload. */
+    /** The error message when the upload fails without one. */
     error: string;
 }
-/** Config de crop: quando presente, a imagem selecionada passa pelo ImageCropModal antes do upload. */
+/** When given, the chosen image goes through the ImageCropModal before the upload. */
 interface ImageUploadCrop {
-    /** Presets de proporção. 1 só preset (ex.: 'free') = recorte livre, sem barra de presets. */
     presets?: CropPreset[];
     minAspect?: number;
     maxAspect?: number;
@@ -48,25 +36,29 @@ interface ImageUploadCrop {
     confirmLabel?: string;
 }
 interface ImageUploadProps {
-    /** Sobrescreve o tamanho/estilo do preview (dropzone/tile). */
+    /** @deprecated Ignored: the tile's preview fills the square. */
     previewClassName?: string;
-    /** Classe do wrapper do preview (ex.: simular o fundo claro/escuro da vitrine). */
+    /** @deprecated Ignored. */
     previewWrapperClassName?: string;
+    /** The form field name: a hidden input carries the image's URL. */
     name: string;
+    /** The image's URL, '' for none. */
     value: string;
     onChange: (url: string) => void;
+    /** Sends the file and resolves to its URL. A rejection shows its message as the error. */
     onUpload: (file: File) => Promise<string>;
     label?: string;
     hint?: string;
+    /** @deprecated Ignored: the tile is a 112 square. */
     aspect?: ImageUploadAspect;
     accept?: string;
     className?: string;
+    /** @deprecated Ignored: every variant is the tile. */
     variant?: ImageUploadVariant;
-    /** Quando definido, abre o crop (ImageCropModal) entre selecionar o arquivo e subir. */
     crop?: ImageUploadCrop;
-    /** Textos exibidos — mescla com os defaults pt-BR (passe só o que quiser sobrescrever). */
     labels?: Partial<ImageUploadLabels>;
 }
-declare function ImageUpload({ name, value, onChange, onUpload, label, hint, aspect, accept, className, variant, previewClassName, previewWrapperClassName, crop, labels, }: ImageUploadProps): react.JSX.Element;
+/** @deprecated Use `<FileInput variant="tile">`, with the upload in its `onFiles` and the URL in `preview`. */
+declare function ImageUpload({ name, value, onChange, onUpload, label, hint, accept, className, crop, labels, }: ImageUploadProps): react.JSX.Element;
 
 export { ImageUpload, type ImageUploadAspect, type ImageUploadCrop, type ImageUploadLabels, type ImageUploadProps, type ImageUploadVariant };