@rojaostudio/ds 1.0.0

package/dist/components/icon-button.js

@@ -0,0 +1,80 @@
+import {
+  __objRest,
+  __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) {
+  var _b = _a, {
+    icon,
+    variant = "ghost",
+    color = "neutral",
+    size = "md",
+    loading = false,
+    disabled,
+    className = ""
+  } = _b, rest = __objRest(_b, [
+    "icon",
+    "variant",
+    "color",
+    "size",
+    "loading",
+    "disabled",
+    "className"
+  ]);
+  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
+  );
+});
+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

@@ -0,0 +1,59 @@
+import * as react from 'react';
+
+/**
+ * ImageCropModal — modal de crop de imagem com presets de aspect ratio.
+ *
+ * Requer `react-image-crop` instalado no consumer (peerDep).
+ *
+ * Uso:
+ *   <ImageCropModal
+ *     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 ImageCropModalProps {
+    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 ImageCropModal({ open, file, position, onCancel, onConfirm, presets, minAspect, maxAspect, title, confirmLabel, maxSizeBytes, }: ImageCropModalProps): react.JSX.Element;
+
+export { type CropPreset, ImageCropModal, type ImageCropModalProps };

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

@@ -0,0 +1,240 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+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 { Button } from "./button.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" }));
+}
+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" }));
+}
+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) }
+];
+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 ImageCropModal({
+  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__ */ React.createElement(
+    Modal,
+    {
+      open,
+      onClose: 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)."))
+  );
+}
+export {
+  ImageCropModal
+};

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

@@ -0,0 +1,72 @@
+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" />
+ */
+type ImageUploadAspect = 'logo' | 'banner' | 'square';
+type ImageUploadVariant = 'button' | 'dropzone' | 'tile';
+interface ImageUploadLabels {
+    /** Botão/prompt do estado vazio (button/dropzone/tile). */
+    select: string;
+    /** Ação de trocar a imagem (botão + aria-label do tile). */
+    change: string;
+    /** Ação de remover. */
+    remove: string;
+    /** Texto durante o upload. */
+    uploading: string;
+    /** Título da dropzone vazia. */
+    dropTitle: string;
+    /** Subtítulo da dropzone vazia. */
+    dropHint: string;
+    /** aria-label da área de upload. */
+    aria: string;
+    /** Mensagem de erro genérica de upload. */
+    error: string;
+}
+/** Config de crop: quando presente, a imagem selecionada passa pelo ImageCropModal antes do upload. */
+interface ImageUploadCrop {
+    /** Presets de proporção. 1 só preset (ex.: 'free') = recorte livre, sem barra de presets. */
+    presets?: CropPreset[];
+    minAspect?: number;
+    maxAspect?: number;
+    maxSizeBytes?: number;
+    title?: string;
+    confirmLabel?: string;
+}
+interface ImageUploadProps {
+    /** Sobrescreve o tamanho/estilo do preview (dropzone/tile). */
+    previewClassName?: string;
+    /** Classe do wrapper do preview (ex.: simular o fundo claro/escuro da vitrine). */
+    previewWrapperClassName?: string;
+    name: string;
+    value: string;
+    onChange: (url: string) => void;
+    onUpload: (file: File) => Promise<string>;
+    label?: string;
+    hint?: string;
+    aspect?: ImageUploadAspect;
+    accept?: string;
+    className?: string;
+    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;
+
+export { ImageUpload, type ImageUploadAspect, type ImageUploadCrop, type ImageUploadLabels, type ImageUploadProps, type ImageUploadVariant };