@seedgrid/fe-components 2026.11.1 → 2026.11.2

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

package/dist/inputs/SgInputDateTime.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SgInputText } from "./SgInputText";
+import { resolveFieldError } from "../rhf";
+import { t, useComponentsI18n } from "../i18n";
+import { useDarkFlag } from "../gadgets/clock/themes/useDarkFlag";
+import { formatWallClock, instantToWallClock, snapMinutes, validateDateTime, wallClockToInstant } from "./dateTimeLogic";
+/** Teto do atributo HTML quando nao ha `maxDate` (o <input> aceitaria ano de 6 digitos). */
+const WIDGET_MAX = "9999-12-31T23:59";
+function localOf(value, timeZone, showSeconds) {
+    return instantToWallClock(value ?? undefined, timeZone, showSeconds);
+}
+export function SgInputDateTime(props) {
+    const i18n = useComponentsI18n();
+    const isDark = useDarkFlag();
+    const { value, defaultValue, onChange, minDate, maxDate, timeZone, showSeconds = false, minuteStep, inputProps, alwaysFloat, required, requiredMessage, validateOnBlur, validation, onValidation, error, ...rest } = props;
+    const rhfManaged = Boolean(rest.control && rest.name);
+    const controlled = value !== undefined;
+    const [innerLocal, setInnerLocal] = React.useState(() => localOf(defaultValue, timeZone, showSeconds));
+    const local = controlled ? localOf(value, timeZone, showSeconds) : innerLocal;
+    const labelText = rest.labelText ?? rest.label ?? "";
+    const [internalError, setInternalError] = React.useState(null);
+    const hasError = Boolean(error ?? internalError);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    // Segmentos digitados pela metade: o <input type="datetime-local"> entrega "" (validity.badInput). Em modo controlado o
+    // React devolveria o `value` antigo e o campo voltaria ao valor anterior; enquanto parcial, o DOM segue sem ser reescrito.
+    const [partial, setPartial] = React.useState(false);
+    React.useEffect(() => {
+        setPartial(false);
+    }, [local]);
+    const minLocal = minDate ? instantToWallClock(minDate, timeZone, showSeconds) : undefined;
+    const maxLocal = maxDate ? instantToWallClock(maxDate, timeZone, showSeconds) : undefined;
+    const effectiveStep = showSeconds ? 1 : minuteStep && minuteStep > 1 ? minuteStep * 60 : undefined;
+    const runValidation = React.useCallback((text) => {
+        const report = (message) => {
+            setInternalError(message);
+            onValidation?.(message);
+        };
+        if (!text && required)
+            return report(requiredMessage ?? t(i18n, "components.inputs.required"));
+        if (!text)
+            return report(null);
+        const custom = validation?.(text) ?? null;
+        if (custom)
+            return report(custom);
+        const code = validateDateTime(text, { required, min: minDate, max: maxDate, timeZone });
+        if (code === "invalid")
+            return report(t(i18n, "components.inputs.datetime.invalid"));
+        if (code === "min" || code === "max" || code === "range") {
+            const min = minLocal ? formatWallClock(minLocal, i18n.locale, showSeconds) : "";
+            const max = maxLocal ? formatWallClock(maxLocal, i18n.locale, showSeconds) : "";
+            return report(code === "range"
+                ? t(i18n, "components.inputs.datetime.range", { min, max })
+                : code === "min"
+                    ? t(i18n, "components.inputs.datetime.min", { min })
+                    : t(i18n, "components.inputs.datetime.max", { max }));
+        }
+        return report(null);
+    }, [i18n, maxDate, maxLocal, minDate, minLocal, onValidation, required, requiredMessage, showSeconds, timeZone, validation]);
+    const emit = (text) => {
+        onChange?.(text ? wallClockToInstant(text, timeZone) : null, text);
+    };
+    const mergedInputProps = {
+        ...inputProps,
+        placeholder: " ",
+        min: minLocal,
+        max: maxLocal ?? WIDGET_MAX,
+        step: effectiveStep,
+        ...(rhfManaged ? {} : { value: partial ? "" : local }),
+        readOnly: inputProps?.readOnly,
+        onChange: (event) => {
+            const text = event.currentTarget.value;
+            setPartial(text === "" && Boolean(event.currentTarget.validity?.badInput));
+            setHasInteracted(true);
+            if (!controlled)
+                setInnerLocal(text);
+            if (validateOnBlur === false || internalError)
+                runValidation(text);
+            emit(text);
+            inputProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            let text = event.currentTarget.value;
+            const snapped = snapMinutes(text, showSeconds ? undefined : minuteStep);
+            if (snapped !== text) {
+                text = snapped;
+                if (!controlled)
+                    setInnerLocal(text);
+                emit(text);
+            }
+            if ((validateOnBlur ?? true) || hasInteracted)
+                runValidation(text);
+            inputProps?.onBlur?.(event);
+        }
+    };
+    const inputClassName = (() => {
+        if (mergedInputProps.className)
+            return mergedInputProps.className;
+        const elevationClass = props.elevation === "none" ? "" : props.elevation === "md" ? "shadow-md" : props.elevation === "lg" ? "shadow-lg" : "shadow-sm";
+        const baseClass = "peer h-11 w-full rounded-md bg-[var(--sg-input-bg,hsl(var(--background)))] text-[var(--sg-input-fg,hsl(var(--foreground)))] caret-[var(--sg-input-fg,hsl(var(--foreground)))] pl-3 pr-7 py-2.5 text-sm placeholder-transparent focus:outline-none";
+        const borderClass = hasError
+            ? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
+            : "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]";
+        return [baseClass, borderClass, elevationClass].filter(Boolean).join(" ");
+    })();
+    const wrapperClassName = ["relative", isDark ? "sg-datetime-dark" : "sg-datetime-light"].join(" ");
+    return (_jsxs("div", { className: wrapperClassName, children: [_jsx("style", { children: `
+        input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+          cursor: pointer;
+        }
+        .sg-datetime-dark input[type="datetime-local"] {
+          color-scheme: dark;
+        }
+        .sg-datetime-light input[type="datetime-local"] {
+          color-scheme: light;
+        }
+      ` }), labelText ? (_jsx("label", { htmlFor: rest.id, className: [
+                    "pointer-events-none absolute left-3 top-0 z-10 -translate-y-1/2 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 text-[11px] font-medium leading-none",
+                    hasError ? "text-[hsl(var(--destructive))]" : "text-foreground/70"
+                ].join(" "), children: labelText })) : null, _jsx(SgInputText, { ...rest, type: "datetime-local", error: resolveFieldError(error, internalError ?? undefined), inputProps: mergedInputProps, className: inputClassName, labelClassName: "sr-only", onClear: () => {
+                    setInternalError(null);
+                    onValidation?.(null);
+                    setPartial(false);
+                    if (!controlled)
+                        setInnerLocal("");
+                    emit("");
+                    rest.onClear?.();
+                } })] }));
+}

package/dist/inputs/SgInputDateTime.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=SgInputDateTime.meta.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputDateTime.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDateTime.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/SgInputDateTime.meta.js

@@ -0,0 +1,73 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.datetime",
+    package: "@seedgrid/fe-components",
+    exportName: "SgInputDateTime",
+    slug: "sg-input-date-time",
+    displayName: "SgInputDateTime",
+    category: "input",
+    subcategory: "datetime",
+    description: "Campo de data e hora que entrega e recebe instantes ISO 8601 em UTC, exibindo a hora no fuso escolhido, com limites, passo de minutos e validacao.",
+    tags: ["form", "date", "time", "datetime", "rhf"],
+    capabilities: ["rhf", "controlled", "min-max", "time-zone", "minute-step", "iso-utc"],
+    fieldSemantics: ["dateTime", "timestamp", "schedule", "appointment", "deadline"],
+    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 principal exibido ao usuario.", semanticRole: "label", bindable: true },
+        { name: "value", type: "string | Date | null", description: "Instante controlado (ISO 8601 ou Date).", semanticRole: "data", bindable: true },
+        { name: "defaultValue", type: "string | Date | null", description: "Instante inicial (nao controlado).", semanticRole: "data", bindable: true },
+        { name: "required", type: "boolean", default: false, description: "Marca o campo como obrigatorio.", semanticRole: "validation", bindable: true },
+        { name: "minDate", type: "string | Date", description: "Menor instante permitido.", semanticRole: "validation", bindable: true },
+        { name: "maxDate", type: "string | Date", description: "Maior instante permitido.", semanticRole: "validation", bindable: true },
+        { name: "timeZone", type: "string", default: "local", description: "Fuso do campo: local, UTC, deslocamento (+03:00) ou nome IANA.", semanticRole: "data", bindable: true },
+        { name: "showSeconds", type: "boolean", default: false, description: "Mostra e aceita segundos.", semanticRole: "appearance", bindable: true },
+        { name: "minuteStep", type: "number", description: "Passo dos minutos (5, 10, 15, 30).", semanticRole: "validation", bindable: true },
+        { name: "onChange", type: "(value: string | null, local: string) => void", description: "Instante ISO UTC (ou null) e texto local do campo.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "focused", "disabled", "readOnly", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-input-date-time/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-input-date-time/sg-input-date-time.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-input-date-time",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "field.datetime",
+        acceptsDataBinding: true,
+        defaultProps: { labelPosition: "float", clearButton: true }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Agendamentos, compromissos e prazos que exigem data e hora.",
+        "Campos de timestamp que precisam trafegar como instante UTC.",
+        "Formularios com limites de data e hora e fuso explicito."
+    ],
+    avoidUseCases: [
+        "Somente data; prefira SgInputDate.",
+        "Somente hora do dia sem data; prefira um campo de hora.",
+        "Texto livre; prefira SgInputText."
+    ],
+    synonyms: ["datetime input", "date time picker", "timestamp field", "appointment field"],
+    relatedEntityFields: ["createdAt", "scheduledAt", "startsAt", "endsAt", "dueAt", "timestamp"],
+    compositionHints: [
+        "Combinar dois campos (inicio/fim) com minDate/maxDate para intervalos.",
+        "Usar dentro de SgPanel em formularios de agenda."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0.1, date: 0.95, number: 0, denseLayout: 0.7 }
+};

package/dist/inputs/cameraLogic.d.ts

@@ -0,0 +1,27 @@
+export type CameraFacing = "user" | "environment";
+export type CameraGuide = "none" | "oval" | "rect";
+export type CameraResolution = "low" | "medium" | "high";
+export type CameraErrorCode = "permission" | "noCamera" | "failed";
+export type GuideBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** Resolucao pedida ao dispositivo (largura x altura, paisagem). */
+export declare function resolutionSize(resolution: CameraResolution): {
+    width: number;
+    height: number;
+};
+/**
+ * Caixa do guia de enquadramento, centralizada na area de pre-visualizacao `viewW` x `viewH` (px).
+ * `oval`: elipse em pe (largura/altura = 3/4), ate 70% da largura e 70% da altura.
+ * `rect`: retangulo deitado (largura/altura = 4/3), ate 90% da largura e 70% da altura.
+ * `none` => null. Valores arredondados ao pixel.
+ */
+export declare function guideBox(guide: CameraGuide, viewW: number, viewH: number): GuideBox | null;
+/** Nome do erro da plataforma (`NotAllowedError`, `CameraAccessDenied`...) => codigo do componente. */
+export declare function classifyCameraError(name: string): CameraErrorCode;
+/** Alterna entre frontal (`user`) e traseira (`environment`). */
+export declare function nextFacing(facing: CameraFacing): CameraFacing;
+//# sourceMappingURL=cameraLogic.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cameraLogic.d.ts","sourceRoot":"","sources":["../../src/inputs/cameraLogic.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,aAAa,CAAC;AAClD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AACzD,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEnE,MAAM,MAAM,QAAQ,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/E,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,UAAU,EAAE,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAS9F;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAa1F;AAYD,uGAAuG;AACvG,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,CAKjE;AAED,iEAAiE;AACjE,wBAAgB,UAAU,CAAC,MAAM,EAAE,YAAY,GAAG,YAAY,CAE7D"}

package/dist/inputs/cameraLogic.js

@@ -0,0 +1,57 @@
+// Logica pura do SgCameraCapture (P134): resolucao, guia de enquadramento, classificacao de erro e troca de camera.
+// Sem DOM: os vetores de paridade com o Flutter (`seedgrid_components/test/widgets/camera_vectors`) sao gerados
+// DESTE modulo. O contrato das props e o mesmo nas duas plataformas.
+/** Resolucao pedida ao dispositivo (largura x altura, paisagem). */
+export function resolutionSize(resolution) {
+    switch (resolution) {
+        case "low":
+            return { width: 640, height: 480 };
+        case "high":
+            return { width: 1920, height: 1080 };
+        default:
+            return { width: 1280, height: 720 };
+    }
+}
+/**
+ * Caixa do guia de enquadramento, centralizada na area de pre-visualizacao `viewW` x `viewH` (px).
+ * `oval`: elipse em pe (largura/altura = 3/4), ate 70% da largura e 70% da altura.
+ * `rect`: retangulo deitado (largura/altura = 4/3), ate 90% da largura e 70% da altura.
+ * `none` => null. Valores arredondados ao pixel.
+ */
+export function guideBox(guide, viewW, viewH) {
+    if (guide === "none" || viewW <= 0 || viewH <= 0)
+        return null;
+    const ratio = guide === "oval" ? 3 / 4 : 4 / 3;
+    const maxW = viewW * (guide === "oval" ? 0.7 : 0.9);
+    const maxH = viewH * 0.7;
+    const width = Math.min(maxW, maxH * ratio);
+    const height = width / ratio;
+    return {
+        x: Math.round((viewW - width) / 2),
+        y: Math.round((viewH - height) / 2),
+        width: Math.round(width),
+        height: Math.round(height)
+    };
+}
+const PERMISSION_NAMES = new Set([
+    "notallowederror",
+    "permissiondeniederror",
+    "securityerror",
+    "cameraaccessdenied",
+    "cameraaccessdeniedwithoutprompt",
+    "cameraaccessrestricted"
+]);
+const NO_CAMERA_NAMES = new Set(["notfounderror", "devicesnotfounderror", "nocamera", "notreadableerror_nocamera"]);
+/** Nome do erro da plataforma (`NotAllowedError`, `CameraAccessDenied`...) => codigo do componente. */
+export function classifyCameraError(name) {
+    const key = name.trim().toLowerCase();
+    if (PERMISSION_NAMES.has(key))
+        return "permission";
+    if (NO_CAMERA_NAMES.has(key))
+        return "noCamera";
+    return "failed";
+}
+/** Alterna entre frontal (`user`) e traseira (`environment`). */
+export function nextFacing(facing) {
+    return facing === "user" ? "environment" : "user";
+}

package/dist/inputs/dateTimeLogic.d.ts

@@ -0,0 +1,22 @@
+export type DateTimeErrorCode = "required" | "invalid" | "min" | "max" | "range";
+/** Deslocamento fixo em minutos ("+03:00" => 180) ou null se nao for um deslocamento. */
+export declare function parseFixedOffset(timeZone: string): number | null;
+/** Minutos a somar ao UTC para obter o relogio de parede de `instantMs` no fuso. */
+export declare function zoneOffsetMinutes(instantMs: number, timeZone?: string): number;
+/** Instante (ISO UTC ou Date) => "YYYY-MM-DDTHH:mm[:ss]" no fuso; "" se invalido/vazio. */
+export declare function instantToWallClock(value: string | Date | undefined | null, timeZone?: string, showSeconds?: boolean): string;
+/** "YYYY-MM-DDTHH:mm[:ss]" no fuso => ISO 8601 UTC ("...Z", ms = 000); null se invalido. */
+export declare function wallClockToInstant(local: string, timeZone?: string): string | null;
+/** Arredonda os minutos ao multiplo de `step` mais proximo (passo invalido ou <= 1 mantem o valor). */
+export declare function snapMinutes(local: string, step?: number): string;
+export type DateTimeValidationInput = {
+    required?: boolean;
+    min?: string | Date;
+    max?: string | Date;
+    timeZone?: string;
+};
+/** Codigo do erro (null = valido). `local` e o texto do campo ("" = vazio). min/max sao instantes. */
+export declare function validateDateTime(local: string, input?: DateTimeValidationInput): DateTimeErrorCode | null;
+/** Texto de exibicao de um relogio de parede: dd/mm/aaaa HH:mm (en-US: aaaa-mm-dd HH:mm). */
+export declare function formatWallClock(local: string, locale: string, showSeconds?: boolean): string;
+//# sourceMappingURL=dateTimeLogic.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimeLogic.d.ts","sourceRoot":"","sources":["../../src/inputs/dateTimeLogic.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,CAAC;AASjF,yFAAyF;AACzF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAMhE;AAMD,oFAAoF;AACpF,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAuB9E;AAQD,2FAA2F;AAC3F,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,EACvC,QAAQ,CAAC,EAAE,MAAM,EACjB,WAAW,UAAQ,GAClB,MAAM,CAMR;AAED,4FAA4F;AAC5F,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAiBlF;AAED,uGAAuG;AACvG,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAkBhE;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,sGAAsG;AACtG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAE,uBAA4B,GAAG,iBAAiB,GAAG,IAAI,CAY7G;AAED,6FAA6F;AAC7F,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,UAAQ,GAAG,MAAM,CAM1F"}