@rojaostudio/ds 2.0.0-next.3 → 2.0.0-next.30

package/dist/components/filter-chip.js

@@ -13,8 +13,11 @@ function FilterChip(_a) {
     children,
     count,
     icon,
+    pressed: pressedProp,
+    defaultPressed,
+    onPressedChange,
     active,
-    defaultActive = false,
+    defaultActive,
     onActiveChange,
     disabled,
     asChild,
@@ -25,6 +28,9 @@ function FilterChip(_a) {
     "children",
     "count",
     "icon",
+    "pressed",
+    "defaultPressed",
+    "onPressedChange",
     "active",
     "defaultActive",
     "onActiveChange",
@@ -34,20 +40,23 @@ function FilterChip(_a) {
     "className",
     "onClick"
   ]);
-  const [own, setOwn] = useState(defaultActive);
-  const on = active != null ? active : own;
+  var _a2;
+  const pressed = pressedProp != null ? pressedProp : active;
+  const [own, setOwn] = useState((_a2 = defaultPressed != null ? defaultPressed : defaultActive) != null ? _a2 : false);
+  const on = pressed != null ? pressed : own;
   const Root = asChild ? Slot : "button";
   function click(event) {
+    var _a3;
     onClick == null ? void 0 : onClick(event);
     if (event.defaultPrevented || asChild) return;
-    if (active === void 0) setOwn(!on);
-    onActiveChange == null ? void 0 : onActiveChange(!on);
+    if (pressed === void 0) setOwn(!on);
+    (_a3 = onPressedChange != null ? onPressedChange : onActiveChange) == null ? void 0 : _a3(!on);
   }
   return /* @__PURE__ */ jsxs(
     Root,
     __spreadProps(__spreadValues({}, rest), {
       type: asChild ? void 0 : type,
-      className: ["rds-filter-chip", on && "rds-filter-chip--active", className].filter(Boolean).join(" "),
+      className: ["rds-filter-chip", on && "rds-filter-chip--pressed", className].filter(Boolean).join(" "),
       "aria-pressed": asChild ? void 0 : on,
       "aria-current": asChild && on ? "true" : void 0,
       "aria-disabled": disabled || void 0,

package/dist/components/floating-stepper.d.ts

@@ -1,33 +1,16 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
+import { Stepper, StepperProps, StepperStep } from './stepper.js';
+import 'react';
 
 /**
- * FloatingStepper — a composition of the Card (as a pill) and Buttons (Figma [RDS] Actions/Button, neutral): the
- * floating steps of a flow (point of sale, checkout). The current step is the filled Button (aria-current="step");
- * earlier steps go back, later ones are disabled; `canNavigate` changes the rule. `action` is a last Button after
- * a line (Reset). Where it floats is the caller's (className or a wrapper). Styles: floating-stepper.css.
+ * floating-stepper — the 1.x and 2.0-next name of the Stepper, kept so `@rojaostudio/ds/components/floating-stepper`
+ * and `FloatingStepper` still work in 2.0. The codemod (`npx @rojaostudio/ds-codemod`) renames both.
  */
-type FloatingStepperStep = {
-    key: string;
-    label: string;
-};
-interface FloatingStepperProps {
-    steps: FloatingStepperStep[];
-    /** key da etapa atual */
-    current: string;
-    onNavigate?: (key: string) => void;
-    /** Regra de navegação por etapa. Default: só etapas anteriores à atual. */
-    canNavigate?: (key: string, index: number, currentIndex: number) => boolean;
-    /** Ação à direita, separada por divisor (ex.: Reset). */
-    action?: {
-        label: string;
-        icon?: ReactNode;
-        onClick: () => void;
-    };
-    className?: string;
-    /** The navigation's name. Default "Etapas". */
-    'aria-label'?: string;
-}
-declare function FloatingStepper({ steps, current, onNavigate, canNavigate, action, className, 'aria-label': ariaLabel }: FloatingStepperProps): react.JSX.Element;
+
+/** @deprecated Renamed to `Stepper` (`@rojaostudio/ds/components/stepper`) in 2.0. Same props. */
+declare const FloatingStepper: typeof Stepper;
+/** @deprecated Renamed to `StepperProps` in 2.0. */
+type FloatingStepperProps = StepperProps;
+/** @deprecated Renamed to `StepperStep` in 2.0. */
+type FloatingStepperStep = StepperStep;
 
 export { FloatingStepper, type FloatingStepperProps, type FloatingStepperStep };

package/dist/components/floating-stepper.js

@@ -1,35 +1,7 @@
 "use client";
 import "../chunk-ORMEWXMH.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "./button.js";
-import { Card } from "./card.js";
-function FloatingStepper({ steps, current, onNavigate, canNavigate, action, className, "aria-label": ariaLabel = "Etapas" }) {
-  const currentIdx = steps.findIndex((s) => s.key === current);
-  return /* @__PURE__ */ jsxs(Card, { as: "div", size: "sm", role: "navigation", "aria-label": ariaLabel, className: ["rds-floating-stepper", className].filter(Boolean).join(" "), children: [
-    steps.map((s, idx) => {
-      const isCurrent = idx === currentIdx;
-      const canGo = canNavigate ? canNavigate(s.key, idx, currentIdx) : idx < currentIdx;
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          tone: "neutral",
-          variant: isCurrent ? "fill" : "ghost",
-          disabled: !canGo && !isCurrent,
-          "aria-current": isCurrent ? "step" : void 0,
-          onClick: () => {
-            if (canGo && !isCurrent) onNavigate == null ? void 0 : onNavigate(s.key);
-          },
-          children: s.label
-        },
-        s.key
-      );
-    }),
-    action && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: "rds-floating-stepper__divider", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx(Button, { tone: "neutral", variant: "ghost", icon: action.icon, onClick: action.onClick, children: action.label })
-    ] })
-  ] });
-}
+import { Stepper } from "./stepper.js";
+const FloatingStepper = Stepper;
 export {
   FloatingStepper
 };

package/dist/components/form-actions.d.ts

@@ -1,28 +1,50 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { BottomBarPlacement } from './internal/bottom-bar.js';
 
-type FormActionsLayout = 'inline' | 'stacked';
+type FormActionsPlacement = BottomBarPlacement;
 interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * The buttons (Figma: slot `actions`, up to 3), always in reading order: Cancelar first, the primary
-     * last. In `stacked` the primary goes on top, and it is moved first in the page too, so the focus
-     * order follows what is seen.
+     * The actions (Figma: the exposed `cancel` and `primary` Buttons), in reading order: Cancelar (tone neutral, ghost)
+     * first, the primary (tone action, fill) last. Expanded (from 1024) they all show, on the right; compact (below
+     * 1024) only the last one, the primary: the others are `display: none`, and the way out is the topbar's X.
      */
     children: ReactNode;
-    /** A short supporting sentence beside the actions (Figma: `showHelper` + `helper`). */
-    helper?: ReactNode;
     /**
-     * inline (desktop: floats and hugs its content, sentence left, actions right) or stacked (phone: edge
-     * to edge at the foot, primary full width on top) (Figma: `layout`).
+     * docked (default: the container's width, against the foot) or floating (from 1024 up: off the foot, rounded, the
+     * overlay shadow, 24 of margin, at most 768, centred). Below 1024 floating is docked (Figma: `placement`).
      */
-    layout?: FormActionsLayout;
+    placement?: FormActionsPlacement;
+    /**
+     * One ~44 control on the left, never running text (Figma: slot `leading`, `showLeading`). Present, even `null`
+     * while its control is hidden, it reserves 44 so the actions do not jump. Whoever fills it says its own changes
+     * (its own aria-live); the bar says nothing.
+     */
+    leading?: ReactNode;
 }
 /**
- * FormActions — Figma [RDS] Actions/FormActions. The actions at the end of a create form or a task,
- * there from the first second. Where it sticks is the page's job: `position: sticky` at the bottom of
- * the scrolling container, with `scroll-padding-bottom` equal to its height, so a focused field is never
- * hidden behind it (WCAG 2.4.11). Styles: form-actions.css.
+ * FormActions — Figma [RDS] Actions/FormActions. The actions at the end of a create form or of a long task (Cancelar
+ * and the primary), at the foot of the screen from the first second. Only actions: what is missing is the project's
+ * (if it needs a control, it goes in `leading`). Built on the private BottomBar (.rds-bottom-bar), the SavingBar's
+ * shell: a band in the brand's primary colour (bottom-bar/background), 64 plus the safe area compact, 68 expanded,
+ * 24 at the sides, sticky at the bottom of the scrolling container. Styles: form-actions.css, internal/bottom-bar.css.
+ *
+ * `<FormActions placement="docked" leading={…}><Button tone="neutral" variant="ghost">Cancelar</Button><Button
+ * tone="action">Criar produto</Button></FormActions>`: the last child is the primary; compact, the others leave.
+ *
+ * The app's rules around it:
+ * - The primary is never disabled: validate on click, show the error on the field and move the focus to the first
+ *   pending one.
+ * - The scrolling container takes `scroll-padding-bottom` (and the content `padding-bottom`) equal to the bar's height
+ *   (plus the margin when floating) plus `env(safe-area-inset-bottom)`, so a focused field is never hidden behind it
+ *   (WCAG 2.4.11).
+ * - On the phone (below 1024) the bar leaves while the on-screen keyboard is open (a field is focused and the visible
+ *   area shrinks): it slides down (no motion with prefers-reduced-motion) and comes back on blur; it never takes the
+ *   focus.
+ * - Compact has no Cancelar: the way out is the X in the topbar, with an AlertDialog "Sair sem criar?" ([Continuar
+ *   editando] [Sair sem criar]) when something was typed.
+ * - Buttons at the end of a card or a dialog are loose Buttons or a ButtonGroup, not this.
  */
-declare function FormActions({ children, helper, layout, className, ...rest }: FormActionsProps): react.JSX.Element;
+declare function FormActions({ children, placement, leading, className, ...rest }: FormActionsProps): react.JSX.Element;
 
-export { FormActions, type FormActionsLayout, type FormActionsProps };
+export { FormActions, type FormActionsPlacement, type FormActionsProps };

package/dist/components/form-actions.js

@@ -1,23 +1,14 @@
+"use client";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+import { BottomBar } from "./internal/bottom-bar.js";
 function FormActions(_a) {
-  var _b = _a, { children, helper, layout = "inline", className } = _b, rest = __objRest(_b, ["children", "helper", "layout", "className"]);
-  const actions = Children.toArray(children);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: ["rds-form-actions", `rds-form-actions--${layout}`, className].filter(Boolean).join(" "),
-      children: [
-        helper && /* @__PURE__ */ jsx("p", { className: "rds-form-actions__helper", children: helper }),
-        /* @__PURE__ */ jsx("div", { className: "rds-form-actions__actions", children: layout === "stacked" ? actions.reverse() : actions })
-      ]
-    })
-  );
+  var _b = _a, { children, placement = "docked", leading, className } = _b, rest = __objRest(_b, ["children", "placement", "leading", "className"]);
+  return /* @__PURE__ */ jsx(BottomBar, __spreadProps(__spreadValues({}, rest), { placement, leading, className: ["rds-form-actions", className].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx("div", { className: "rds-form-actions__actions", children }) }));
 }
 export {
   FormActions

package/dist/components/heading.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** The [RDS] type scale for titles: band 36/48, heading 24/30, value 20/30. */
+type HeadingLevel = 'band' | 'heading' | 'value';
+/** neutral: text/heading (navy on light in Rojão, white on dark and on the brand plate). accent: the logo orange. */
+type HeadingTone = 'neutral' | 'accent';
+/** The element in the page outline. The visual level never decides it: the order of the page does. */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** The size, from the type scale (Figma `level`). */
+    level?: HeadingLevel;
+    /**
+     * The colour of the brand pair (Figma `tone`): neutral (default) or accent. The Mark takes the other one.
+     * `'default'` is deprecated (2.0.0-next): it is `'neutral'`.
+     */
+    tone?: HeadingTone | 'default';
+    /** The heading element. Default h2. */
+    as?: HeadingElement;
+    /** The text (Figma `text`), with an optional <Heading.Mark> stretch (Figma `showMark` + `mark`). */
+    children: ReactNode;
+}
+interface HeadingMarkProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+/**
+ * Heading.Mark — Figma [RDS] .heading/mark. A stretch of the title in the other colour of the pair: accent inside a
+ * neutral Heading, neutral inside an accent one. A plain span: screen readers read the whole title, unannounced.
+ */
+declare function HeadingMark({ className, children, ...rest }: HeadingMarkProps): react.JSX.Element;
+/**
+ * Heading — Figma [RDS] Content/Heading. A title in the brand pair: one colour, or both in the same title with a
+ * Heading.Mark. The colour is chosen per screen; tone=neutral is the rule. Orange on white fails contrast even for
+ * a large title (2.9:1 in Rojão): tone=accent belongs on dark or on the brand plate. Styles: heading.css.
+ */
+declare function HeadingRoot({ level, tone, as: Tag, className, children, ...rest }: HeadingProps): react.JSX.Element;
+/** `<Heading>` with `<Heading.Mark>` for the stretch in the other colour. */
+declare const Heading: typeof HeadingRoot & {
+    Mark: typeof HeadingMark;
+};
+
+export { Heading, type HeadingElement, type HeadingLevel, HeadingMark, type HeadingMarkProps, type HeadingProps, type HeadingTone };

package/dist/components/heading.js

@@ -0,0 +1,25 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+function HeadingMark(_a) {
+  var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, rest), { className: ["rds-heading__mark", className].filter(Boolean).join(" "), children }));
+}
+function HeadingRoot(_c) {
+  var _d = _c, { level = "heading", tone = "neutral", as: Tag = "h2", className, children } = _d, rest = __objRest(_d, ["level", "tone", "as", "className", "children"]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-heading", `rds-heading--${level}`, tone === "accent" && "rds-heading--accent", className].filter(Boolean).join(" "),
+      children
+    })
+  );
+}
+const Heading = Object.assign(HeadingRoot, { Mark: HeadingMark });
+export {
+  Heading,
+  HeadingMark
+};

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

@@ -9,7 +9,7 @@ interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
     label: string;
     /** Same tones as the Button. */
     tone?: ButtonTone;
-    /** Figma calls this property `style`. */
+    /** The emphasis (Figma: `variant`). */
     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

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

@@ -0,0 +1,60 @@
+import * as react from 'react';
+
+/**
+ * ImageCropDialog — Figma [RDS] Overlays/ImageCropDialog: 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). The crop's shade, line and handles and the stage's
+ * background are its own tokens (Overlays, image-crop-dialog/*). Styles: image-crop-dialog.css.
+ *
+ * Uso:
+ *   <ImageCropDialog
+ *     open={open}
+ *     file={selectedFile}
+ *     onCancel={() => setOpen(false)}
+ *     onConfirm={(blob) => uploadCroppedImage(blob)}
+ *   />
+ *
+ * Presets default: Livre (1:2 a 2:1), 1:1, 4:5, 16:9.
+ * Customize via prop `presets`.
+ */
+interface CropPreset {
+    id: string;
+    label: string;
+    /** Aspect ratio fixo. undefined = livre (com bounds MIN/MAX_ASPECT). */
+    aspect?: number;
+    /** Ícone opcional exibido antes do rótulo (ajuda quem não decodifica "16:9"). */
+    icon?: React.ReactNode;
+}
+interface ImageCropDialogProps {
+    open: boolean;
+    file: File | null;
+    /** Label de contexto pro título (ex: "Foto 2 de 4"). */
+    position?: string;
+    onCancel: () => void;
+    /**
+     * Recebe o blob do recorte. Pode ser assíncrono (ex.: upload) — o modal AGUARDA a promise
+     * e mantém o botão travado/carregando até resolver, evitando duplo-clique que duplicaria a
+     * imagem (o upload roda fora do `busy` se o modal não esperar).
+     */
+    onConfirm: (blob: Blob) => void | Promise<void>;
+    /** Presets disponíveis. default = Livre + 1:1 + 4:5 + 16:9. */
+    presets?: CropPreset[];
+    /** Limite mínimo de aspect ratio (alto-baixo). default = 0.5 (1:2). */
+    minAspect?: number;
+    /** Limite máximo de aspect ratio (largo-baixo). default = 2.0 (2:1). */
+    maxAspect?: number;
+    /** Título do modal. default = "Ajustar foto". */
+    title?: string;
+    /** Label do botão confirmar. default = "Aplicar e enviar". */
+    confirmLabel?: string;
+    /**
+     * Teto de tamanho do blob de saída (bytes). Quando definido, a saída do crop
+     * é forçada a JPEG e comprimida (qualidade + downscale) até caber no limite —
+     * evita que foto de celular grande estoure o limite de upload. Sem ele, a
+     * saída mantém o tipo original e qualidade fixa (comportamento inalterado).
+     */
+    maxSizeBytes?: number;
+}
+declare function ImageCropDialog({ open, file, position, onCancel, onConfirm, presets, minAspect, maxAspect, title, confirmLabel, maxSizeBytes, }: ImageCropDialogProps): react.JSX.Element;
+
+export { type CropPreset, ImageCropDialog, type ImageCropDialogProps };

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

@@ -0,0 +1,240 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+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 { Alert } from "./alert.js";
+import { Button } from "./button.js";
+import { Dialog } from "./dialog.js";
+import { RectangleHorizontalIcon, RectangleVerticalIcon, SquareDashedIcon, SquareIcon } from "./internal/icons.js";
+import { Spinner } from "./spinner.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+const DEFAULT_PRESETS = [
+  { id: "square", label: "1:1", aspect: 1, icon: /* @__PURE__ */ jsx(SquareIcon, {}) },
+  { id: "portrait", label: "4:5", aspect: 4 / 5, icon: /* @__PURE__ */ jsx(RectangleVerticalIcon, {}) },
+  { id: "landscape", label: "16:9", aspect: 16 / 9, icon: /* @__PURE__ */ jsx(RectangleHorizontalIcon, {}) },
+  { id: "free", label: "Livre", icon: /* @__PURE__ */ jsx(SquareDashedIcon, {}) }
+];
+const DEFAULT_MIN_ASPECT = 0.5;
+const DEFAULT_MAX_ASPECT = 2;
+function buildInitialCrop(width, height, aspect) {
+  if (!aspect) {
+    return { unit: "%", x: 0, y: 0, width: 100, height: 100 };
+  }
+  const imageAspect = width / height;
+  let cropW;
+  let cropH;
+  if (aspect >= imageAspect) {
+    cropW = 100;
+    cropH = imageAspect / aspect * 100;
+  } else {
+    cropH = 100;
+    cropW = aspect / imageAspect * 100;
+  }
+  return centerCrop({ unit: "%", x: 0, y: 0, width: cropW, height: cropH }, width, height);
+}
+const QUALITY_STEPS = [0.85, 0.75, 0.65, 0.55];
+const MAX_SIDE_STEPS = [1600, 1200];
+function canvasToBlob(canvas, mimeType, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => blob ? resolve(blob) : reject(new Error("toBlob failed")), mimeType, quality);
+  });
+}
+function drawCrop(image, crop, maxSide) {
+  const canvas = document.createElement("canvas");
+  const scaleX = image.naturalWidth / image.width;
+  const scaleY = image.naturalHeight / image.height;
+  let outW = Math.round(crop.width * scaleX);
+  let outH = Math.round(crop.height * scaleY);
+  if (maxSide && Math.max(outW, outH) > maxSide) {
+    const ratio = maxSide / Math.max(outW, outH);
+    outW = Math.round(outW * ratio);
+    outH = Math.round(outH * ratio);
+  }
+  canvas.width = outW;
+  canvas.height = outH;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas not supported");
+  ctx.drawImage(
+    image,
+    crop.x * scaleX,
+    crop.y * scaleY,
+    crop.width * scaleX,
+    crop.height * scaleY,
+    0,
+    0,
+    outW,
+    outH
+  );
+  return canvas;
+}
+async function cropToBlob(image, crop, mimeType, maxSizeBytes) {
+  const baseCanvas = drawCrop(image, crop);
+  if (!maxSizeBytes) {
+    return canvasToBlob(baseCanvas, mimeType, 0.92);
+  }
+  const out = await canvasToBlob(baseCanvas, "image/jpeg", 0.92);
+  if (out.size <= maxSizeBytes) return out;
+  let best = out;
+  for (const q of QUALITY_STEPS) {
+    const candidate = await canvasToBlob(baseCanvas, "image/jpeg", q);
+    best = candidate;
+    if (candidate.size <= maxSizeBytes) return candidate;
+  }
+  for (const side of MAX_SIDE_STEPS) {
+    const scaledCanvas = drawCrop(image, crop, side);
+    for (const q of QUALITY_STEPS) {
+      const candidate = await canvasToBlob(scaledCanvas, "image/jpeg", q);
+      best = candidate;
+      if (candidate.size <= maxSizeBytes) return candidate;
+    }
+  }
+  return best;
+}
+function ImageCropDialog({
+  open,
+  file,
+  position,
+  onCancel,
+  onConfirm,
+  presets = DEFAULT_PRESETS,
+  minAspect = DEFAULT_MIN_ASPECT,
+  maxAspect = DEFAULT_MAX_ASPECT,
+  title = "Ajustar foto",
+  confirmLabel = "Aplicar e enviar",
+  maxSizeBytes
+}) {
+  const [src, setSrc] = useState(null);
+  const [preset, setPreset] = useState(presets[0]);
+  const [crop, setCrop] = useState();
+  const [completedCrop, setCompletedCrop] = useState(null);
+  const [aspectError, setAspectError] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [imgLoaded, setImgLoaded] = useState(false);
+  const imgRef = useRef(null);
+  useEffect(() => {
+    if (!file) {
+      setSrc(null);
+      setImgLoaded(false);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setSrc(url);
+    setPreset(presets[0]);
+    setCrop(void 0);
+    setCompletedCrop(null);
+    setAspectError(null);
+    setImgLoaded(false);
+    return () => URL.revokeObjectURL(url);
+  }, [file, presets]);
+  function handleImageLoad(e) {
+    var _a, _b, _c, _d;
+    const { width, height } = e.currentTarget;
+    const initial = buildInitialCrop(width, height, preset.aspect);
+    setCrop(initial);
+    const pixelInitial = {
+      unit: "px",
+      x: ((_a = initial.x) != null ? _a : 0) / 100 * width,
+      y: ((_b = initial.y) != null ? _b : 0) / 100 * height,
+      width: ((_c = initial.width) != null ? _c : 0) / 100 * width,
+      height: ((_d = initial.height) != null ? _d : 0) / 100 * height
+    };
+    setCompletedCrop(pixelInitial);
+    setImgLoaded(true);
+  }
+  function applyPreset(p) {
+    setPreset(p);
+    setAspectError(null);
+    if (imgRef.current) {
+      const { width, height } = imgRef.current;
+      setCrop(buildInitialCrop(width, height, p.aspect));
+    }
+  }
+  function validateFreeAspect(c) {
+    if (preset.aspect) return true;
+    if (!c.width || !c.height) return false;
+    const ratio = c.width / c.height;
+    if (ratio < minAspect) {
+      setAspectError(`Recorte muito alto. M\xEDnimo permitido: ${minAspect.toFixed(1)}.`);
+      return false;
+    }
+    if (ratio > maxAspect) {
+      setAspectError(`Recorte muito largo. M\xE1ximo permitido: ${maxAspect.toFixed(1)}.`);
+      return false;
+    }
+    setAspectError(null);
+    return true;
+  }
+  async function handleConfirm() {
+    if (busy) return;
+    if (!completedCrop || !imgRef.current || !file) return;
+    if (!validateFreeAspect(completedCrop)) return;
+    setBusy(true);
+    try {
+      const blob = await cropToBlob(imgRef.current, completedCrop, file.type || "image/jpeg", maxSizeBytes);
+      await onConfirm(blob);
+    } catch (err) {
+      console.error("cropToBlob error", err);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!next) onCancel();
+      },
+      size: "lg",
+      title: position ? `${title} \xB7 ${position}` : title,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__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: "rds-image-crop", children: [
+        presets.length > 1 && /* @__PURE__ */ jsx(
+          ToggleGroup,
+          {
+            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,
+            {
+              crop,
+              onChange: (_, percentCrop) => setCrop(percentCrop),
+              onComplete: (c) => {
+                setCompletedCrop(c);
+                validateFreeAspect(c);
+              },
+              aspect: preset.aspect,
+              keepSelection: true,
+              minWidth: 50,
+              minHeight: 50,
+              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: "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(Alert, { tone: "danger", title: aspectError, announce: "alert" }),
+        !aspectError && imgLoaded && !busy && /* @__PURE__ */ jsx("p", { className: "rds-image-crop__hint", children: preset.aspect ? "Arraste as al\xE7as para ajustar o recorte." : `Livre: propor\xE7\xE3o entre ${minAspect.toFixed(1)} (vertical) e ${maxAspect.toFixed(1)} (horizontal).` })
+      ] })
+    }
+  );
+}
+export {
+  ImageCropDialog
+};