@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/dist/components/icon-button.js

@@ -1,79 +1,65 @@
+"use client";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
-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 { jsx, jsxs } from "react/jsx-runtime";
+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__ */ React.createElement(
-    "button",
-    __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),
-    loading ? /* @__PURE__ */ React.createElement(Spinner, null) : 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__ */ React.createElement("svg", { className: "animate-spin", viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.25" }), /* @__PURE__ */ React.createElement(
-    "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

@@ -1,25 +1,28 @@
 "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 { 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__ */ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, className: "shrink-0" }, /* @__PURE__ */ React.createElement("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__ */ React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, className: "shrink-0" }, /* @__PURE__ */ React.createElement("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__ */ React.createElement(RatioIcon, { w: 1, h: 1 }) },
-  { id: "portrait", label: "4:5", aspect: 4 / 5, icon: /* @__PURE__ */ React.createElement(RatioIcon, { w: 4, h: 5 }) },
-  { id: "landscape", label: "16:9", aspect: 16 / 9, icon: /* @__PURE__ */ React.createElement(RatioIcon, { w: 16, h: 9 }) },
-  { id: "free", label: "Livre", icon: /* @__PURE__ */ React.createElement(FreeIcon, null) }
+  { id: "square", label: "1:1", aspect: 1, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 1, h: 1 }) },
+  { id: "portrait", label: "4:5", aspect: 4 / 5, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 4, h: 5 }) },
+  { id: "landscape", label: "16:9", aspect: 16 / 9, icon: /* @__PURE__ */ jsx(RatioIcon, { w: 16, h: 9 }) },
+  { id: "free", label: "Livre", icon: /* @__PURE__ */ jsx(FreeIcon, {}) }
 ];
 const DEFAULT_MIN_ASPECT = 0.5;
 const DEFAULT_MAX_ASPECT = 2;
@@ -185,54 +188,65 @@ function ImageCropModal({
       setBusy(false);
     }
   }
-  return /* @__PURE__ */ React.createElement(
-    Modal,
+  return /* @__PURE__ */ jsx(
+    Dialog,
     {
       open,
-      onClose: onCancel,
+      onOpenChange: (next) => {
+        if (!next) onCancel();
+      },
       size: "lg",
       title: position ? `${title} \xB7 ${position}` : title,
-      footer: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, { variant: "ghost", onClick: onCancel }, "Cancelar"), /* @__PURE__ */ React.createElement(Button, { onClick: handleConfirm, disabled: busy || !completedCrop || !!aspectError, loading: busy }, busy ? "Aplicando\u2026" : confirmLabel))
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, presets.length > 1 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1 rounded-(--radius-control) bg-surface-raised p-1" }, presets.map((p) => /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: p.id,
-        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(" ")
-      },
-      p.icon,
-      p.label
-    ))), /* @__PURE__ */ React.createElement("div", { className: "relative rounded-(--radius-control) bg-surface-overlay overflow-hidden flex items-center justify-center min-h-[300px] max-h-[60vh] p-4" }, src && /* @__PURE__ */ React.createElement(
-      ReactCrop,
-      {
-        crop,
-        onChange: (_, percentCrop) => setCrop(percentCrop),
-        onComplete: (c) => {
-          setCompletedCrop(c);
-          validateFreeAspect(c);
-        },
-        aspect: preset.aspect,
-        keepSelection: true,
-        minWidth: 50,
-        minHeight: 50,
-        className: "max-h-[60vh] max-w-full"
-      },
-      /* @__PURE__ */ React.createElement(
-        "img",
-        {
-          ref: imgRef,
-          src,
-          alt: "",
-          onLoad: handleImageLoad,
-          className: "max-h-full max-w-full"
-        }
-      )
-    ), !imgLoaded && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React.createElement(Spinner, { size: "lg", color: "inverse" })), busy && /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/40" }, /* @__PURE__ */ React.createElement(Spinner, { size: "lg", color: "inverse" }))), aspectError && /* @__PURE__ */ React.createElement("p", { className: "rounded-(--radius-control) bg-danger-soft px-3 py-2 text-caption text-danger-text" }, aspectError), !aspectError && preset.id === "free" && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-fg-muted" }, "Livre: propor\xE7\xE3o entre ", minAspect.toFixed(1), " (vertical) e ", maxAspect.toFixed(1), " (horizontal)."))
+      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 && preset.id === "free" && /* @__PURE__ */ jsxs("p", { className: "rds-image-crop__hint", children: [
+          "Livre: propor\xE7\xE3o entre ",
+          minAspect.toFixed(1),
+          " (vertical) e ",
+          maxAspect.toFixed(1),
+          " (horizontal)."
+        ] })
+      ] })
+    }
   );
 }
 export {

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 };