@seedgrid/fe-components 2026.11.0 → 2026.11.2

package/dist/inputs/SgFileUpload.js

@@ -0,0 +1,234 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Controller } from "react-hook-form";
+import { File as FileIcon, FileArchive, FileAudio, FileImage, FileSpreadsheet, FileText, FileVideo, Presentation, Upload, X } from "lucide-react";
+import { resolveFieldError } from "../rhf";
+import { t, useComponentsI18n } from "../i18n";
+import { MEDIA_TYPES, formatFileSize, matchesMedia, parseSize, planAdd, resolveMime } from "./fileUploadLogic";
+const HEAD_BYTES = 256;
+function isNative(file) {
+    return typeof File !== "undefined" && file instanceof File;
+}
+function sizeOf(file) {
+    return isNative(file) ? file.size : file.size ?? 0;
+}
+function typeOf(file) {
+    return file.type ?? "";
+}
+async function readHead(file) {
+    try {
+        const slice = file.slice(0, HEAD_BYTES);
+        if (typeof slice.arrayBuffer === "function")
+            return new Uint8Array(await slice.arrayBuffer());
+        // Ambientes sem Blob.arrayBuffer (testes em jsdom, navegadores antigos).
+        return await new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(new Uint8Array(reader.result));
+            reader.onerror = () => resolve(new Uint8Array(0));
+            reader.readAsArrayBuffer(slice);
+        });
+    }
+    catch {
+        return new Uint8Array(0);
+    }
+}
+/** Atributo `accept` do seletor: grupos viram `image/*`, formatos viram MIME + extensoes; `all` libera tudo. */
+export function pickerAcceptFor(mediaType, accept) {
+    const tokens = new Set();
+    for (const m of mediaType ?? []) {
+        if (m === "all")
+            return undefined;
+        const info = MEDIA_TYPES[m];
+        if (!info)
+            continue;
+        if (info.group)
+            tokens.add(`${info.group}*`);
+        if (info.mime)
+            tokens.add(info.mime);
+        for (const ext of info.extensions)
+            tokens.add(`.${ext}`);
+    }
+    for (const token of (accept ?? "").split(",")) {
+        const trimmed = token.trim();
+        if (trimmed)
+            tokens.add(trimmed);
+    }
+    return tokens.size === 0 ? undefined : Array.from(tokens).join(",");
+}
+function iconFor(mime) {
+    const cls = "size-5 shrink-0";
+    if (mime.startsWith("image/"))
+        return _jsx(FileImage, { className: cls, "aria-hidden": "true" });
+    if (mime.startsWith("video/"))
+        return _jsx(FileVideo, { className: cls, "aria-hidden": "true" });
+    if (mime.startsWith("audio/"))
+        return _jsx(FileAudio, { className: cls, "aria-hidden": "true" });
+    if (mime === "application/pdf")
+        return _jsx(FileText, { className: cls, "aria-hidden": "true" });
+    if (mime.includes("spreadsheet") || mime === "application/vnd.ms-excel" || mime === "text/csv") {
+        return _jsx(FileSpreadsheet, { className: cls, "aria-hidden": "true" });
+    }
+    if (mime.includes("presentation") || mime === "application/vnd.ms-powerpoint") {
+        return _jsx(Presentation, { className: cls, "aria-hidden": "true" });
+    }
+    if (mime.includes("zip"))
+        return _jsx(FileArchive, { className: cls, "aria-hidden": "true" });
+    if (mime.startsWith("text/") || mime.includes("word") || mime === "application/msword") {
+        return _jsx(FileText, { className: cls, "aria-hidden": "true" });
+    }
+    return _jsx(FileIcon, { className: cls, "aria-hidden": "true" });
+}
+function SgFileUploadBase(props) {
+    const i18n = useComponentsI18n();
+    const { id, label, labelText, value, defaultValue, onChange, onError, mediaType, accept, maxFiles, maxSizePerFile, maxSizeTotal, hintText, required, disabled, readOnly, className, onEnter, onExit, extraCheck, thumbnailBuilder, thumbnailSize = 96, dropTextKey, dropManyTextKey, typeNames, pickerAccept, keyPrefix = "sg-file", error } = props;
+    const max = Math.max(1, Math.floor(maxFiles ?? 1));
+    const multi = max > 1;
+    const controlled = value !== undefined;
+    const [inner, setInner] = React.useState(defaultValue ?? []);
+    const current = controlled ? value ?? [] : inner;
+    const currentRef = React.useRef(current);
+    currentRef.current = current;
+    const [internalError, setInternalError] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const [dragging, setDragging] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const locked = Boolean(disabled || readOnly);
+    const text = label ?? labelText ?? "";
+    const typesText = () => {
+        if (typeNames)
+            return typeNames;
+        const names = [...(mediaType ?? []), ...((accept ?? "").trim() ? [(accept ?? "").trim()] : [])];
+        return names.length === 0 ? "all" : names.join(", ");
+    };
+    const messageFor = (code) => {
+        switch (code) {
+            case "type":
+                return t(i18n, "components.inputs.fileupload.type", { types: typesText() });
+            case "size":
+                return t(i18n, "components.inputs.fileupload.size", { max: formatFileSize(parseSize(maxSizePerFile) ?? 0, i18n.locale) });
+            case "total":
+                return t(i18n, "components.inputs.fileupload.total", { max: formatFileSize(parseSize(maxSizeTotal) ?? 0, i18n.locale) });
+            case "count":
+                return t(i18n, "components.inputs.fileupload.count", { max: String(max) });
+            default:
+                return ""; // dimension e aspect so chegam por extraCheck, que traz a propria mensagem.
+        }
+    };
+    const commit = (files, errorText = null) => {
+        setInternalError(errorText);
+        if (!controlled)
+            setInner(files);
+        onChange?.(files);
+    };
+    const addFiles = async (picked) => {
+        const rejected = [];
+        const survivors = [];
+        if (extraCheck)
+            setLoading(true);
+        for (const file of picked) {
+            const head = await readHead(file);
+            const mime = resolveMime(file.name, file.type, head);
+            if (matchesMedia(file.name, mime, mediaType, accept) && extraCheck) {
+                const rejection = await extraCheck(file, { mime });
+                if (rejection) {
+                    rejected.push({ file, code: rejection.code, message: rejection.message });
+                    continue;
+                }
+            }
+            survivors.push({ file, head });
+        }
+        if (extraCheck)
+            setLoading(false);
+        const existing = currentRef.current;
+        const plan = planAdd(existing.map(sizeOf), survivors.map(({ file, head }) => ({ name: file.name, type: file.type, size: file.size, head })), { mediaType, accept, maxFiles: max, maxSizePerFile, maxSizeTotal });
+        for (const r of plan.rejected) {
+            const survivor = survivors[r.index];
+            if (survivor)
+                rejected.push({ file: survivor.file, code: r.code, message: messageFor(r.code) });
+        }
+        const lines = rejected.map((r) => t(i18n, "components.inputs.fileupload.file", { name: r.file.name, message: r.message }));
+        const errorText = lines.length === 0 ? null : lines.join("\n");
+        for (const r of rejected)
+            onError?.(r.code, r.message, r.file.name);
+        if (plan.accepted.length === 0) {
+            setInternalError(errorText);
+            return;
+        }
+        const added = plan.accepted.map((index) => survivors[index]?.file).filter((f) => Boolean(f));
+        commit(plan.replace ? added : [...existing, ...added], errorText);
+    };
+    const onPick = (event) => {
+        const files = Array.from(event.currentTarget.files ?? []);
+        event.currentTarget.value = ""; // permite escolher o mesmo arquivo de novo
+        if (files.length > 0)
+            void addFiles(files);
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        setDragging(false);
+        if (locked)
+            return;
+        const files = Array.from(event.dataTransfer.files ?? []);
+        if (files.length > 0)
+            void addFiles(multi ? files : files.slice(0, 1));
+    };
+    const open = () => {
+        if (locked || loading)
+            return;
+        onEnter?.();
+        inputRef.current?.click();
+    };
+    const remove = (index) => {
+        commit(current.filter((_, i) => i !== index));
+    };
+    const shownError = resolveFieldError(error, internalError ?? undefined);
+    const hasError = Boolean(shownError);
+    const full = current.length >= max;
+    // Um arquivo so: a area some quando ha arquivo (tocar em "Trocar" escolhe outro). Varios: itens + area enquanto couber.
+    const showZone = multi ? !full : current.length === 0;
+    const dropText = multi
+        ? t(i18n, dropManyTextKey ?? "components.inputs.fileupload.dropMany", { max: String(max) })
+        : t(i18n, dropTextKey ?? "components.inputs.fileupload.drop");
+    const removeLabel = t(i18n, "components.inputs.fileupload.remove");
+    const acceptAttr = pickerAccept ?? pickerAcceptFor(mediaType, accept);
+    const renderItem = (file, index) => {
+        const sizeText = formatFileSize(sizeOf(file), i18n.locale);
+        const removeButton = locked ? null : (_jsx("button", { type: "button", onClick: () => remove(index), "aria-label": removeLabel, "data-sg": `${keyPrefix}-remove-${id}-${index}`, className: "inline-flex size-6 shrink-0 items-center justify-center rounded-full hover:bg-muted/60", children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) }));
+        if (thumbnailBuilder) {
+            return (_jsxs("div", { "data-sg": `${keyPrefix}-item-${id}-${index}`, style: { width: thumbnailSize }, children: [_jsxs("div", { className: "relative overflow-hidden rounded-md", style: { width: thumbnailSize, height: thumbnailSize }, children: [thumbnailBuilder(file, thumbnailSize), removeButton ? _jsx("span", { className: "absolute right-0 top-0 rounded-full bg-background/85", children: removeButton }) : null] }), _jsx("div", { className: "mt-1 truncate text-xs", children: file.name }), _jsx("div", { className: "text-[10px] text-muted-foreground", children: sizeText })] }, `${file.name}-${index}`));
+        }
+        const mime = resolveMime(file.name, typeOf(file), new Uint8Array(0));
+        return (_jsxs("div", { "data-sg": `${keyPrefix}-item-${id}-${index}`, className: "flex items-center gap-2 rounded-md border border-border px-2 py-1", children: [iconFor(mime), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm", children: file.name }), _jsx("div", { className: "text-[10px] text-muted-foreground", children: sizeText })] }), removeButton] }, `${file.name}-${index}`));
+    };
+    return (_jsxs("div", { className: ["w-full", className].filter(Boolean).join(" "), children: [text ? (_jsxs("label", { htmlFor: id, className: "mb-1 block text-xs font-medium text-foreground/70", children: [text, required ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] })) : null, _jsx("input", { ref: inputRef, id: id, type: "file", multiple: multi, accept: acceptAttr, className: "sr-only", disabled: locked, required: required && current.length === 0, "aria-invalid": hasError || undefined, "aria-describedby": hasError ? `${id}-error` : hintText ? `${id}-hint` : undefined, onChange: onPick, onFocus: () => onEnter?.(), onBlur: () => onExit?.() }), current.length > 0 ? (_jsx("div", { className: ["mb-2", thumbnailBuilder ? "flex flex-wrap gap-2" : "flex flex-col gap-1.5"].join(" "), "data-sg": `${keyPrefix}-list-${id}`, children: current.map(renderItem) })) : null, showZone || loading ? (_jsx("div", { role: "button", tabIndex: locked ? -1 : 0, "aria-disabled": locked || undefined, "aria-label": text || dropText, "data-sg": `${keyPrefix}-open-${id}`, "data-dragging": dragging || undefined, onClick: open, onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        open();
+                    }
+                }, onDragOver: (event) => {
+                    event.preventDefault();
+                    if (!locked)
+                        setDragging(true);
+                }, onDragLeave: () => setDragging(false), onDrop: onDrop, className: [
+                    "relative flex min-h-24 w-full items-center justify-center overflow-hidden rounded-md border border-dashed bg-[var(--sg-input-bg,hsl(var(--background)))] text-sm shadow-sm outline-none transition-colors",
+                    hasError ? "border-[hsl(var(--destructive))]" : dragging ? "border-[hsl(var(--primary))] bg-muted/40" : "border-border",
+                    locked ? "cursor-not-allowed opacity-60" : "cursor-pointer focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.4)]"
+                ].join(" "), children: loading ? (_jsx("span", { className: "text-muted-foreground", children: t(i18n, "components.inputs.fileupload.loading") })) : (_jsxs("span", { className: "flex flex-col items-center gap-2 px-4 py-4 text-center text-muted-foreground", children: [_jsx(Upload, { className: "size-6", "aria-hidden": "true" }), dropText] })) })) : null, !multi && current.length > 0 && !locked && !loading ? (_jsx("button", { type: "button", onClick: open, "data-sg": `${keyPrefix}-change-${id}`, className: "mt-1 inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-primary hover:bg-muted/40", children: t(i18n, "components.inputs.imageupload.change") })) : null, hasError ? (_jsx("p", { id: `${id}-error`, role: "alert", className: "mt-1 whitespace-pre-line text-xs text-[hsl(var(--destructive))]", children: shownError })) : hintText ? (_jsx("p", { id: `${id}-hint`, className: "mt-1 text-xs text-muted-foreground", children: hintText })) : null] }));
+}
+export function SgFileUpload(props) {
+    const { control, name, rules, required, requiredMessage, onChange, error } = props;
+    const i18n = useComponentsI18n();
+    if (control && name) {
+        const resolvedRules = {
+            ...(required ? { required: requiredMessage ?? t(i18n, "components.inputs.required") } : {}),
+            ...rules
+        };
+        return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => (_jsx(SgFileUploadBase, { ...props, control: undefined, value: Array.isArray(field.value) ? field.value : [], onChange: (files) => {
+                    // Lista vazia vira null no formulario, para o "obrigatorio" acusar o campo sem arquivo.
+                    field.onChange(files.length === 0 ? null : files);
+                    onChange?.(files);
+                }, error: resolveFieldError(error, fieldState.error?.message) })) }));
+    }
+    return _jsx(SgFileUploadBase, { ...props });
+}

package/dist/inputs/SgFileUpload.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgFileUpload.meta.d.ts.map

package/dist/inputs/SgFileUpload.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgFileUpload.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgFileUpload.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAmDpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}

package/dist/inputs/SgFileUpload.meta.js

@@ -0,0 +1,71 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.file-upload",
+    package: "@seedgrid/fe-components",
+    exportName: "SgFileUpload",
+    slug: "sg-file-upload",
+    displayName: "SgFileUpload",
+    category: "input",
+    subcategory: "file",
+    description: "Seleciona um ou varios arquivos (clique ou arrastar e soltar), confere o tipo pelo conteudo e valida quantidade e tamanho (por arquivo e total). Mostra a lista com o icone do tipo e permite remover. Nao envia nada ao servidor: entrega os arquivos ao pai.",
+    tags: ["form", "file", "upload", "attachment", "document", "pdf", "spreadsheet", "rhf"],
+    capabilities: ["rhf", "controlled", "drag-and-drop", "multiple", "validation"],
+    fieldSemantics: ["file", "attachment", "document", "upload", "pdf", "spreadsheet"],
+    props: [
+        { name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
+        { name: "name", type: "string", description: "Nome do campo para formularios.", semanticRole: "data", bindable: true },
+        { name: "label", type: "string", description: "Rotulo exibido acima da area.", semanticRole: "label", bindable: true },
+        { name: "value", type: "SgFileValue[] | null", description: "Arquivos controlados (sempre lista; um arquivo = lista de um). Um arquivo ja salvo entra como { name, url }.", semanticRole: "data", bindable: true },
+        { name: "mediaType", type: "MediaType[]", description: "Tipos aceitos: image, video, audio, pdf, doc, docx, xls, xlsx, ppt, pptx, csv, txt, zip ou all. O tipo e conferido pelo conteudo do arquivo.", semanticRole: "validation", bindable: true },
+        { name: "accept", type: "string", description: "Tipos extras em texto livre (.pdf, image/png, image/*), separados por virgula; soma-se ao mediaType.", semanticRole: "validation", bindable: true },
+        { name: "maxFiles", type: "number", default: 1, description: "Quantos arquivos o campo guarda. Com 1, escolher outro substitui; maior que 1 liga a selecao multipla.", semanticRole: "validation", bindable: true },
+        { name: "maxSizePerFile", type: "SizeLimit", description: "Tamanho maximo de cada arquivo: bytes (numero) ou texto com unidade (\"500KB\", \"1.5MB\", \"1GB\").", semanticRole: "validation", bindable: true },
+        { name: "maxSizeTotal", type: "SizeLimit", description: "Tamanho maximo da soma dos arquivos: bytes (numero) ou texto com unidade.", semanticRole: "validation", bindable: true },
+        { name: "disabled", type: "boolean", default: false, description: "Desabilita a escolha e a remocao.", semanticRole: "appearance", bindable: true },
+        { name: "onChange", type: "(files: SgFileValue[]) => void", description: "Lista de arquivos validos apos escolher ou remover.", semanticRole: "event", bindable: false },
+        { name: "onError", type: "(code: FileErrorCode, message: string, fileName: string) => void", description: "Arquivo recusado (type, size, total, count). Os demais seguem validos.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "focused", "loading", "disabled", "readOnly", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-file-upload/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "many",
+            title: "Varios arquivos",
+            file: "apps/showcase/src/app/components/sg-file-upload/samples/varios.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-file-upload/sg-file-upload.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: { route: "/components/sg-file-upload", hasPlayground: true, hasPropsTable: true },
+    sdui: { rendererType: "field.file", acceptsDataBinding: true, defaultProps: {} }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Anexar um ou varios documentos (PDF, planilhas, apresentacoes, zip) a um cadastro ou solicitacao.",
+        "Escolher arquivos validando tipo (pelo conteudo), quantidade e tamanho antes de enviar.",
+        "Formularios que precisam de arquivos como campo."
+    ],
+    avoidUseCases: [
+        "Fotos e imagens com miniatura, dimensao minima ou proporcao; para isso use SgImageUpload.",
+        "Capturar pela camera do dispositivo; para isso use SgCameraCapture.",
+        "Envio ao servidor ou progresso de upload; nao fazem parte do componente."
+    ],
+    synonyms: ["file upload", "attachment", "anexar arquivo", "upload de arquivo", "documento", "file picker"],
+    relatedEntityFields: ["attachment", "document", "file", "contract", "invoice", "receipt"],
+    compositionHints: [
+        "Envie os arquivos recebidos em onChange pelo servico de arquivos do host; o componente nunca envia sozinho.",
+        "Para imagens com miniatura e regras de dimensao, use SgImageUpload (composicao deste componente)."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0.1, date: 0, number: 0, denseLayout: 0.4 }
+};

package/dist/inputs/SgImageUpload.d.ts

@@ -0,0 +1,20 @@
+import { type SgFileUploadProps } from "./SgFileUpload";
+/**
+ * SgImageUpload (P133, refeito no P141 como COMPOSICAO do SgFileUpload): so imagens (`mediaType: ["image"]`, tipo
+ * conferido pelo conteudo), miniaturas no lugar do icone e as regras que so existem para imagem: largura/altura
+ * minimas e proporcao. Valor = lista (uma imagem = lista de uma); `maxFiles` maior que 1 mostra a grade.
+ */
+export type SgImageUploadProps = Omit<SgFileUploadProps, "mediaType" | "extraCheck" | "thumbnailBuilder" | "thumbnailSize" | "dropTextKey" | "dropManyTextKey" | "typeNames" | "pickerAccept" | "keyPrefix"> & {
+    /** Restringe os formatos de imagem em texto livre (`.png`, `image/jpeg`), separados por virgula. */
+    accept?: string;
+    /** Largura minima em px. */
+    minWidth?: number;
+    /** Altura minima em px. */
+    minHeight?: number;
+    /** Proporcao largura/altura exigida (1 = quadrada, 16 / 9). */
+    aspect?: number;
+    /** Altura da miniatura em px (padrao 160; na grade, no maximo 120). */
+    previewHeight?: number;
+};
+export declare function SgImageUpload(props: SgImageUploadProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgImageUpload.d.ts.map

package/dist/inputs/SgImageUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgImageUpload.d.ts","sourceRoot":"","sources":["../../src/inputs/SgImageUpload.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAsC,KAAK,iBAAiB,EAAoB,MAAM,gBAAgB,CAAC;AAE9G;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,iBAAiB,EACjB,WAAW,GAAG,YAAY,GAAG,kBAAkB,GAAG,eAAe,GAAG,aAAa,GAAG,iBAAiB,GAAG,WAAW,GAAG,cAAc,GAAG,WAAW,CACnJ,GAAG;IACF,oGAAoG;IACpG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAqDF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAgDtD"}

package/dist/inputs/SgImageUpload.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { ImageOff } from "lucide-react";
+import { t, useComponentsI18n } from "../i18n";
+import { formatAspect, validateImage } from "./imageUploadLogic";
+import { matchesMedia } from "./fileUploadLogic";
+import { SgFileUpload } from "./SgFileUpload";
+function readDimensions(file) {
+    return new Promise((resolve) => {
+        const url = URL.createObjectURL(file);
+        const img = new Image();
+        img.onload = () => {
+            URL.revokeObjectURL(url);
+            resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            resolve(null);
+        };
+        img.src = url;
+    });
+}
+function Thumbnail(props) {
+    const { file, id, side } = props;
+    const [url, setUrl] = React.useState(null);
+    const [broken, setBroken] = React.useState(false);
+    React.useEffect(() => {
+        setBroken(false);
+        if (typeof File !== "undefined" && file instanceof File) {
+            const objectUrl = URL.createObjectURL(file);
+            setUrl(objectUrl);
+            return () => URL.revokeObjectURL(objectUrl);
+        }
+        setUrl("url" in file && file.url ? file.url : null);
+        return undefined;
+    }, [file]);
+    if (!url || broken) {
+        return (_jsx("span", { className: "flex size-full items-center justify-center bg-muted/40 text-muted-foreground", children: _jsx(ImageOff, { className: "size-5", "aria-hidden": "true" }) }));
+    }
+    return (
+    // eslint-disable-next-line @next/next/no-img-element
+    _jsx("img", { src: url, alt: file.name, "data-sg": `sg-image-preview-${id}-${file.name}`, width: side, height: side, onError: () => setBroken(true), className: "size-full object-cover" }));
+}
+export function SgImageUpload(props) {
+    const i18n = useComponentsI18n();
+    const { accept, minWidth, minHeight, aspect, previewHeight = 160, maxFiles, id, ...rest } = props;
+    const multi = (maxFiles ?? 1) > 1;
+    const side = multi && previewHeight > 120 ? 120 : previewHeight;
+    const check = async (file, info) => {
+        if ((accept ?? "").trim() && !matchesMedia(file.name, info.mime, undefined, accept)) {
+            return { code: "type", message: t(i18n, "components.inputs.fileupload.type", { types: (accept ?? "").trim() }) };
+        }
+        const needsDimensions = minWidth !== undefined || minHeight !== undefined || aspect !== undefined;
+        if (!needsDimensions)
+            return null;
+        const dims = await readDimensions(file);
+        const code = validateImage({ name: "", type: "", size: file.size, width: dims?.width, height: dims?.height }, { accept: "", minWidth, minHeight, aspect });
+        if (code === "dimension") {
+            return {
+                code,
+                message: t(i18n, "components.inputs.imageupload.dimension", {
+                    minWidth: String(minWidth ?? 0),
+                    minHeight: String(minHeight ?? 0)
+                })
+            };
+        }
+        if (code === "aspect") {
+            return { code, message: t(i18n, "components.inputs.imageupload.aspect", { aspect: formatAspect(aspect ?? 1) }) };
+        }
+        return null;
+    };
+    return (_jsx(SgFileUpload, { ...rest, id: id, maxFiles: maxFiles, keyPrefix: "sg-image", mediaType: ["image"], typeNames: (accept ?? "").trim() ? (accept ?? "").trim() : "image", dropTextKey: "components.inputs.imageupload.drop", dropManyTextKey: "components.inputs.imageupload.dropMany", pickerAccept: (accept ?? "").trim() ? (accept ?? "").trim() : "image/*", extraCheck: check, thumbnailBuilder: (file, size) => _jsx(Thumbnail, { file: file, id: id, side: size }), thumbnailSize: side }));
+}

package/dist/inputs/SgImageUpload.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgImageUpload.meta.d.ts.map

package/dist/inputs/SgImageUpload.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgImageUpload.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgImageUpload.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAqDpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}

package/dist/inputs/SgImageUpload.meta.js

@@ -0,0 +1,73 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.image-upload",
+    package: "@seedgrid/fe-components",
+    exportName: "SgImageUpload",
+    slug: "sg-image-upload",
+    displayName: "SgImageUpload",
+    category: "input",
+    subcategory: "file",
+    description: "Seleciona uma ou varias imagens (clique ou arrastar e soltar), valida tipo (pelo conteudo), tamanho, dimensao minima e proporcao, mostra as miniaturas e permite remover. Composicao do SgFileUpload. Nao envia nada ao servidor: entrega os arquivos ao pai.",
+    tags: ["form", "image", "upload", "photo", "avatar", "file", "rhf"],
+    capabilities: ["rhf", "controlled", "drag-and-drop", "preview", "validation"],
+    fieldSemantics: ["image", "photo", "avatar", "logo", "picture", "attachment"],
+    props: [
+        { name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
+        { name: "name", type: "string", description: "Nome do campo para formularios.", semanticRole: "data", bindable: true },
+        { name: "label", type: "string", description: "Rotulo exibido acima da area.", semanticRole: "label", bindable: true },
+        { name: "value", type: "SgFileValue[] | null", description: "Imagens controladas (sempre lista; uma imagem = lista de uma). Uma imagem ja salva entra como { name, url }.", semanticRole: "data", bindable: true },
+        { name: "accept", type: "string", description: "Restringe os formatos de imagem em texto livre (.png, image/jpeg), separados por virgula.", semanticRole: "validation", bindable: true },
+        { name: "maxFiles", type: "number", default: 1, description: "Quantas imagens o campo guarda. Com 1, escolher outra substitui; maior que 1 liga a selecao multipla e a grade de miniaturas.", semanticRole: "validation", bindable: true },
+        { name: "maxSizePerFile", type: "SizeLimit", description: "Tamanho maximo de cada imagem: bytes (numero) ou texto com unidade (\"500KB\", \"2MB\").", semanticRole: "validation", bindable: true },
+        { name: "maxSizeTotal", type: "SizeLimit", description: "Tamanho maximo da soma das imagens: bytes (numero) ou texto com unidade.", semanticRole: "validation", bindable: true },
+        { name: "minWidth", type: "number", description: "Largura minima em px.", semanticRole: "validation", bindable: true },
+        { name: "minHeight", type: "number", description: "Altura minima em px.", semanticRole: "validation", bindable: true },
+        { name: "aspect", type: "number", description: "Proporcao largura/altura exigida (1 = quadrada).", semanticRole: "validation", bindable: true },
+        { name: "disabled", type: "boolean", default: false, description: "Desabilita a escolha e a remocao.", semanticRole: "appearance", bindable: true },
+        { name: "onChange", type: "(files: SgFileValue[]) => void", description: "Lista de imagens validas apos escolher ou remover.", semanticRole: "event", bindable: false },
+        { name: "onError", type: "(code: FileErrorCode, message: string, fileName: string) => void", description: "Imagem recusada (type, size, total, count, dimension, aspect). As demais seguem validas.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "focused", "loading", "disabled", "readOnly", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-image-upload/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "many",
+            title: "Varias imagens",
+            file: "apps/showcase/src/app/components/sg-image-upload/samples/varias.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-image-upload/sg-image-upload.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: { route: "/components/sg-image-upload", hasPlayground: true, hasPropsTable: true },
+    sdui: { rendererType: "field.image", acceptsDataBinding: true, defaultProps: {} }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Foto de perfil, avatar, logotipo ou foto de documento com pre-visualizacao.",
+        "Escolher uma ou varias imagens validando tipo, tamanho e dimensao antes de enviar.",
+        "Formularios que precisam de imagens como campo."
+    ],
+    avoidUseCases: [
+        "Arquivos que nao sao imagem (PDF, planilhas); nesses casos use SgFileUpload.",
+        "Capturar pela camera do dispositivo; para isso use SgCameraCapture.",
+        "Recorte ou compressao de imagem; nao fazem parte do componente."
+    ],
+    synonyms: ["image upload", "photo upload", "avatar picker", "enviar foto", "upload de imagem", "logo upload"],
+    relatedEntityFields: ["photo", "avatar", "logo", "image", "picture", "documentPhoto"],
+    compositionHints: [
+        "Envie os arquivos recebidos em onChange pelo servico de arquivos do host; o componente nunca envia sozinho.",
+        "Combine com SgPanel e SgInputText em cadastros de pessoa ou produto."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0.1, date: 0, number: 0, denseLayout: 0.4 }
+};

package/dist/inputs/SgInputDateTime.d.ts

@@ -0,0 +1,29 @@
+import { type SgInputTextProps } from "./SgInputText";
+export type SgInputDateTimeProps = Omit<SgInputTextProps, "type" | "onChange"> & {
+    /** Instante controlado: ISO 8601 (com offset ou "Z") ou `Date`. `null`/"" limpa o campo. */
+    value?: string | Date | null;
+    /** Instante inicial (campo nao controlado). */
+    defaultValue?: string | Date | null;
+    /**
+     * Disparado a cada alteracao com o instante em ISO 8601 UTC (`2026-11-03T17:30:00.000Z`) ou `null` se o
+     * campo ficou vazio/incompleto/invalido; `local` e o texto do campo (`2026-11-03T14:30`) no fuso do campo.
+     */
+    onChange?: (value: string | null, local: string) => void;
+    /** Disparado ao receber foco — padrao seedgrid. */
+    onEnter?: () => void;
+    /** Disparado ao perder o foco (apos validacao) — padrao seedgrid. */
+    onExit?: () => void;
+    /** Menor instante permitido (ISO 8601 ou `Date`). */
+    minDate?: string | Date;
+    /** Maior instante permitido (ISO 8601 ou `Date`). */
+    maxDate?: string | Date;
+    /** Fuso em que o campo mostra e interpreta a hora: "local" (padrao), "UTC", "+03:00" ou nome IANA. */
+    timeZone?: string;
+    /** Mostra e aceita segundos. */
+    showSeconds?: boolean;
+    /** Passo dos minutos (1, 5, 10, 15, 30...). Ignorado com `showSeconds`. */
+    minuteStep?: number;
+    alwaysFloat?: boolean;
+};
+export declare function SgInputDateTime(props: SgInputDateTimeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgInputDateTime.d.ts.map

package/dist/inputs/SgInputDateTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputDateTime.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDateTime.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAYnE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG;IAC/E,4FAA4F;IAC5F,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,sGAAsG;IACtG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AASF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA8J1D"}