@seedgrid/fe-components 2026.11.1 → 2026.11.3

package/dist/inputs/SgCheckboxGroup.js

@@ -11,7 +11,7 @@ function deriveInitialValue(source) {
 // Internal component — plain function, no forwardRef, safe for self-reference inside Controller
 function SgCheckboxGroupBase(props, imperativeRef) {
     const i18n = useComponentsI18n();
-    const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "checkbox", iconOnly = false, disabled = false, readOnly = false, required = false, onChange, showCheckAll = false, checkAllLabel, checkAllIcon, name, control, register, rules, error, className = "", style, optionClassName = "", groupBoxProps = {} } = props;
+    const { id, title, source, value: controlledValue, orientation = "vertical", selectionStyle = "checkbox", iconOnly = false, enabled = true, readOnly = false, required = false, onChange, showCheckAll = false, checkAllLabel, checkAllIcon, name, control, register, rules, error, className = "", style, optionClassName = "", groupBoxProps = {} } = props;
     const resolvedCheckAllLabel = checkAllLabel ?? t(i18n, "components.checkboxgroup.checkAll") ?? "Selecionar todos";
     const resolvedGroupBoxTitle = (() => {
         const baseTitle = groupBoxProps.title ?? title ?? "";
@@ -24,7 +24,7 @@ function SgCheckboxGroupBase(props, imperativeRef) {
     const currentValue = isControlled ? controlledValue : internalValue;
     const isHighlightSelection = selectionStyle === "highlight";
     const handleChange = (optionValue) => {
-        if (disabled || readOnly)
+        if (!enabled || readOnly)
             return;
         const next = currentValue.includes(optionValue)
             ? currentValue.filter((v) => v !== optionValue)
@@ -34,9 +34,9 @@ function SgCheckboxGroupBase(props, imperativeRef) {
         onChange?.(next);
     };
     const handleCheckAll = () => {
-        if (disabled || readOnly)
+        if (!enabled || readOnly)
             return;
-        const enabledValues = source.filter((opt) => !opt.disabled).map((opt) => opt.value);
+        const enabledValues = source.filter((opt) => opt.enabled !== false).map((opt) => opt.value);
         const next = currentValue.length === enabledValues.length ? [] : enabledValues;
         if (!isControlled)
             setInternalValue(next);
@@ -50,7 +50,7 @@ function SgCheckboxGroupBase(props, imperativeRef) {
             onChange?.(values);
         },
         checkAll: () => {
-            const enabledValues = source.filter((opt) => !opt.disabled).map((opt) => opt.value);
+            const enabledValues = source.filter((opt) => opt.enabled !== false).map((opt) => opt.value);
             if (!isControlled)
                 setInternalValue(enabledValues);
             onChange?.(enabledValues);
@@ -62,7 +62,7 @@ function SgCheckboxGroupBase(props, imperativeRef) {
         }
     }));
     // Check all state
-    const enabledValues = source.filter((opt) => !opt.disabled).map((opt) => opt.value);
+    const enabledValues = source.filter((opt) => opt.enabled !== false).map((opt) => opt.value);
     const checkedEnabledCount = enabledValues.filter((v) => currentValue.includes(v)).length;
     const allChecked = enabledValues.length > 0 && checkedEnabledCount === enabledValues.length;
     const someChecked = checkedEnabledCount > 0 && !allChecked;
@@ -74,7 +74,7 @@ function SgCheckboxGroupBase(props, imperativeRef) {
     }, [someChecked]);
     const renderOption = (option, index) => {
         const isSelected = currentValue.includes(option.value);
-        const isDisabled = disabled || option.disabled;
+        const isDisabled = !enabled || (option.enabled === false);
         const inputClassName = isHighlightSelection
             ? "sr-only"
             : "w-4 h-4 rounded text-[rgb(var(--sg-primary-500))] border-[rgb(var(--sg-border))] focus:ring-[rgb(var(--sg-ring))] focus:ring-2 cursor-pointer disabled:cursor-not-allowed";
@@ -112,13 +112,13 @@ function SgCheckboxGroupBase(props, imperativeRef) {
     };
     const checkAllNode = showCheckAll ? (_jsxs("div", { className: `${isHighlightSelection ? "px-3 pt-1 pb-2" : "pb-2"}`, children: [_jsxs("label", { className: `
           inline-flex items-center gap-2 select-none font-medium
-          ${disabled ? "opacity-50 cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-pointer"}
-        `, children: [_jsx("input", { ref: checkAllRef, type: "checkbox", checked: allChecked, disabled: disabled || readOnly, onChange: handleCheckAll, className: "w-4 h-4 rounded text-[rgb(var(--sg-primary-500))] border-[rgb(var(--sg-border))] focus:ring-[rgb(var(--sg-ring))] focus:ring-2 cursor-pointer disabled:cursor-not-allowed" }), checkAllIcon ? (_jsx("span", { className: "flex items-center justify-center", children: checkAllIcon })) : null, _jsx("span", { className: "text-sm text-[rgb(var(--sg-text))]", children: resolvedCheckAllLabel })] }), _jsx("hr", { className: "mt-2 border-[rgb(var(--sg-border))]" })] })) : null;
+          ${!enabled ? "opacity-50 cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-pointer"}
+        `, children: [_jsx("input", { ref: checkAllRef, type: "checkbox", checked: allChecked, disabled: !enabled || readOnly, onChange: handleCheckAll, className: "w-4 h-4 rounded text-[rgb(var(--sg-primary-500))] border-[rgb(var(--sg-border))] focus:ring-[rgb(var(--sg-ring))] focus:ring-2 cursor-pointer disabled:cursor-not-allowed" }), checkAllIcon ? (_jsx("span", { className: "flex items-center justify-center", children: checkAllIcon })) : null, _jsx("span", { className: "text-sm text-[rgb(var(--sg-text))]", children: resolvedCheckAllLabel })] }), _jsx("hr", { className: "mt-2 border-[rgb(var(--sg-border))]" })] })) : null;
     const resolvedRules = mergeRequiredRule(rules, required, t(i18n, "components.inputs.required"));
     const groupContent = (_jsxs(_Fragment, { children: [checkAllNode, _jsx("div", { className: `
           flex ${isHighlightSelection ? "gap-0" : "gap-4"}
           ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
-        `, role: "group", "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => renderOption(option, index)) })] }));
+        `, role: "group", "aria-disabled": !enabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => renderOption(option, index)) })] }));
     // React Hook Form — Controller
     if (control && name) {
         return (_jsx(Controller, { name: name, control: control, rules: resolvedRules, render: ({ field, fieldState }) => SgCheckboxGroupBase({
@@ -139,9 +139,9 @@ function SgCheckboxGroupBase(props, imperativeRef) {
               flex ${isHighlightSelection ? "gap-0" : "gap-4"}
               ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"}
               ${showCheckAll && !isHighlightSelection ? "mt-1" : ""}
-            `, role: "group", "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => {
+            `, role: "group", "aria-disabled": !enabled || undefined, "aria-readonly": readOnly || undefined, "aria-required": required || undefined, children: source.map((option, index) => {
                                 const isSelected = currentValue.includes(option.value);
-                                const isDisabled = disabled || option.disabled;
+                                const isDisabled = !enabled || (option.enabled === false);
                                 return (_jsxs("label", { className: `
                     inline-flex items-center gap-2 cursor-pointer select-none
                     ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}

package/dist/inputs/SgCombobox.js

@@ -47,7 +47,7 @@ function findTypeAheadMatchIndex(entries, query, startIndex) {
     for (let offset = 1; offset <= entries.length; offset += 1) {
         const index = (startIndex + offset + entries.length) % entries.length;
         const entry = entries[index];
-        if (!entry || entry.item.disabled)
+        if (!entry || (entry.item.enabled === false))
             continue;
         const label = entry.item.label?.toLowerCase() ?? "";
         if (label.startsWith(normalized))
@@ -203,7 +203,7 @@ function SgComboboxBase(props) {
     }, [resolvedBorderRadius]);
     const selectIndex = React.useCallback((index) => {
         const entry = entries[index];
-        if (!entry || entry.item.disabled)
+        if (!entry || (entry.item.enabled === false))
             return;
         setSelectedValue(entry.item.id);
         setLastSelectedLabel(entry.item.label);
@@ -237,7 +237,7 @@ function SgComboboxBase(props) {
         if (nextIndex < 0)
             return;
         const nextEntry = availableEntries[nextIndex];
-        if (!nextEntry || nextEntry.item.disabled)
+        if (!nextEntry || (nextEntry.item.enabled === false))
             return;
         setSelectedValue(nextEntry.item.id);
         setLastSelectedLabel(nextEntry.item.label);
@@ -402,13 +402,13 @@ function SgComboboxBase(props) {
                 } }), renderValue && displayedValue ? (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 right-10 z-10 flex items-center overflow-hidden", children: renderValue(selectedVisualItem) })) : null, open && !isDisabled && typeof document !== "undefined"
                 ? createPortal(_jsxs("div", { ref: dropdownRef, className: "z-[1100] overflow-hidden rounded-md border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg", style: dropdownStyle, children: [_jsx("div", { className: "max-h-64 overflow-auto", children: loading ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: loadingText })) : entries.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText })) : groupedEntries ? (groupedEntries.map(({ group, list }) => (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [(renderGroupHeader ? renderGroupHeader(group) : (group || null)) ? (_jsx("div", { className: "px-3 py-1 text-xs font-semibold text-muted-foreground", children: renderGroupHeader ? renderGroupHeader(group) : group })) : null, list.map(({ entry, index }) => {
                                         const isActive = activeIndex === index;
-                                        return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${entry.item.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
+                                        return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${(entry.item.enabled === false) ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
                                                 event.preventDefault();
                                                 ignoreBlurRef.current = true;
                                             }, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-2 py-1 text-xs text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(entry.item) })) : null] }, entry.item.id));
                                     })] }, group || "default")))) : (entries.map((entry, index) => {
                                 const isActive = activeIndex === index;
-                                return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${entry.item.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
+                                return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${(entry.item.enabled === false) ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
                                         event.preventDefault();
                                         ignoreBlurRef.current = true;
                                     }, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-2 py-1 text-xs text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(entry.item) })) : null] }, entry.item.id));

package/dist/inputs/SgDatatable.js

@@ -739,10 +739,10 @@ function SgDatatableBase(props, imperativeRef) {
         commitSelection(next);
     }, [selectionMode, currentSelection, dataKey, commitSelection]);
     const resolvedColumnManagerLabel = columnManagerLabel ??
-        resolveMessage(t(i18n, "components.datatable.columns"), "components.datatable.columns", "Colunas");
-    const restoreColumnsLabel = resolveMessage(t(i18n, "components.datatable.restoreColumns"), "components.datatable.restoreColumns", "Restaurar padrão");
-    const showAllColumnsLabel = resolveMessage(t(i18n, "components.datatable.showAllColumns"), "components.datatable.showAllColumns", "Mostrar todas");
-    const dragHandleLabel = resolveMessage(t(i18n, "components.datatable.dragToReorder"), "components.datatable.dragToReorder", "Arrastar para reordenar");
+        resolveMessage(t(i18n, "components.datatable.columns"), "components.datatable.columns", "Columns");
+    const restoreColumnsLabel = resolveMessage(t(i18n, "components.datatable.restoreColumns"), "components.datatable.restoreColumns", "Restore default");
+    const showAllColumnsLabel = resolveMessage(t(i18n, "components.datatable.showAllColumns"), "components.datatable.showAllColumns", "Show all");
+    const dragHandleLabel = resolveMessage(t(i18n, "components.datatable.dragToReorder"), "components.datatable.dragToReorder", "Drag to reorder");
     const toggleColumnVisibility = React.useCallback((columnKey, forceVisible) => {
         setHiddenColumnsMap((prev) => {
             const isCurrentlyHidden = Boolean(prev[columnKey]);
@@ -806,10 +806,10 @@ function SgDatatableBase(props, imperativeRef) {
     const cardHeaderLabel = (column) => typeof column.header === "string" || typeof column.header === "number"
         ? String(column.header)
         : column.field ?? "";
-    const sortByLabel = resolveMessage(t(i18n, "components.datatable.sortBy"), "components.datatable.sortBy", "Ordenar por");
-    const sortNoneLabel = resolveMessage(t(i18n, "components.datatable.sortNone"), "components.datatable.sortNone", "Sem ordem");
-    const sortDirectionLabel = resolveMessage(t(i18n, "components.datatable.sortDirection"), "components.datatable.sortDirection", "Inverter ordem");
-    const filtersPanelLabel = resolveMessage(t(i18n, "components.datatable.filters"), "components.datatable.filters", "Filtros");
+    const sortByLabel = resolveMessage(t(i18n, "components.datatable.sortBy"), "components.datatable.sortBy", "Sort by");
+    const sortNoneLabel = resolveMessage(t(i18n, "components.datatable.sortNone"), "components.datatable.sortNone", "No order");
+    const sortDirectionLabel = resolveMessage(t(i18n, "components.datatable.sortDirection"), "components.datatable.sortDirection", "Reverse order");
+    const filtersPanelLabel = resolveMessage(t(i18n, "components.datatable.filters"), "components.datatable.filters", "Filters");
     const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
     return (_jsx("div", { ref: rootRef, className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsxs("div", { className: "relative", ref: columnManagerRef, children: [showColumnManager ? (_jsx("div", { className: "mb-2 flex items-center justify-start", children: _jsx("button", { ref: columnManagerButtonRef, type: "button", "aria-label": resolvedColumnManagerLabel, title: resolvedColumnManagerLabel, onClick: () => setIsColumnManagerOpen((prev) => !prev), className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-[rgb(var(--sg-primary-600))] shadow-sm transition hover:bg-[rgb(var(--sg-primary-50))] hover:text-[rgb(var(--sg-primary-700))]", children: _jsx(SlidersHorizontal, { size: 18 }) }) })) : null, showColumnManager && isColumnManagerOpen && columnManagerPosition && typeof document !== "undefined"
                                 ? createPortal(_jsxs("div", { ref: columnManagerPanelRef, className: "fixed z-[1400] w-[300px] rounded-xl border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] shadow-xl", style: {
@@ -850,7 +850,7 @@ function SgDatatableBase(props, imperativeRef) {
                                                         }, className: "min-w-0 flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))]", children: [_jsx("option", { value: "", children: sortNoneLabel }), cardSortColumns.map((column, columnIndex) => {
                                                                 const key = (column.sortField ?? column.field);
                                                                 return (_jsx("option", { value: key, children: cardHeaderLabel(column) }, `sort-${column.columnId ?? key}-${columnIndex}`));
-                                                            })] }), _jsx(SgButton, { size: "sm", appearance: "outline", iconOnly: true, "aria-label": sortDirectionLabel, title: sortDirectionLabel, disabled: !currentSortField || currentSortOrder === 0, onClick: () => {
+                                                            })] }), _jsx(SgButton, { size: "sm", appearance: "outline", iconOnly: true, "aria-label": sortDirectionLabel, title: sortDirectionLabel, enabled: !(!currentSortField || currentSortOrder === 0), onClick: () => {
                                                             if (!currentSortField)
                                                                 return;
                                                             commitSort(currentSortField, currentSortOrder === 1 ? -1 : 1);
@@ -916,14 +916,14 @@ function SgDatatableBase(props, imperativeRef) {
                                             })) }), hasFooter ? (_jsx("tfoot", { children: _jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
                                                     const footerValue = typeof column.footer === "function" ? column.footer(sortedRows) : column.footer;
                                                     return (_jsx("td", { className: cn("px-3 py-2 font-semibold text-[rgb(var(--sg-text))]", resolveAlignmentClass(column.align), showGridlines ? "border-t border-r border-[rgb(var(--sg-border))] last:border-r-0" : "border-t border-[rgb(var(--sg-border))]", column.className), style: { width: toCssSize(column.width), minWidth: toCssSize(column.minWidth) }, children: footerValue ?? null }, `foot-${column.columnId ?? column.field ?? columnIndex}`));
-                                                }) }) })) : null] }) }))] }), infiniteActive ? (_jsx("div", { ref: sentinelRef, "data-sg-infinite-sentinel": "true", role: "status", "aria-live": "polite", className: "px-4 py-3 text-center text-xs text-[rgb(var(--sg-muted))]", children: infiniteHasMore ? (loading ? loadingMoreLabel : "") : pagedRows.length > 0 ? endOfListLabel : "" })) : null, paginator && !infiniteActive ? (_jsxs("div", { ref: paginatorRef, className: "flex flex-wrap items-center gap-1.5", children: [_jsxs("nav", { "aria-label": t(i18n, "components.datatable.pagination"), className: "flex flex-wrap items-center gap-1.5", children: [_jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": firstLabel, title: firstLabel, disabled: currentPage <= 1, onClick: () => goToPage(1), leftIcon: _jsx(ChevronFirst, { size: 16 }) }), _jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": prevLabel, title: prevLabel, disabled: currentPage <= 1, onClick: () => goToPage(currentPage - 1), leftIcon: _jsx(ChevronLeft, { size: 16 }) }), pageTokens.map((token, tokenIndex) => {
+                                                }) }) })) : null] }) }))] }), infiniteActive ? (_jsx("div", { ref: sentinelRef, "data-sg-infinite-sentinel": "true", role: "status", "aria-live": "polite", className: "px-4 py-3 text-center text-xs text-[rgb(var(--sg-muted))]", children: infiniteHasMore ? (loading ? loadingMoreLabel : "") : pagedRows.length > 0 ? endOfListLabel : "" })) : null, paginator && !infiniteActive ? (_jsxs("div", { ref: paginatorRef, className: "flex flex-wrap items-center gap-1.5", children: [_jsxs("nav", { "aria-label": t(i18n, "components.datatable.pagination"), className: "flex flex-wrap items-center gap-1.5", children: [_jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": firstLabel, title: firstLabel, enabled: !(currentPage <= 1), onClick: () => goToPage(1), leftIcon: _jsx(ChevronFirst, { size: 16 }) }), _jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": prevLabel, title: prevLabel, enabled: !(currentPage <= 1), onClick: () => goToPage(currentPage - 1), leftIcon: _jsx(ChevronLeft, { size: 16 }) }), pageTokens.map((token, tokenIndex) => {
                                         if (token.type === "ellipsis") {
                                             const ellipsisLabel = token.direction === "backward" ? jumpBackwardLabel : jumpForwardLabel;
                                             return (_jsx(SgButton, { size: "sm", appearance: "ghost", shape: "default", iconOnly: true, "aria-label": ellipsisLabel, title: ellipsisLabel, onClick: () => goToPage(token.target), leftIcon: _jsx(MoreHorizontal, { size: 16 }) }, `ellipsis-${token.direction}-${tokenIndex}`));
                                         }
                                         const isCurrent = token.page === currentPage;
                                         return (_jsx(SgButton, { size: "sm", appearance: isCurrent ? "solid" : "outline", "aria-label": t(i18n, "components.datatable.page", { page: token.page }), "aria-current": isCurrent ? "page" : undefined, onClick: () => goToPage(token.page), children: String(token.page) }, `page-${token.page}`));
-                                    }), _jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": nextLabel, title: nextLabel, disabled: currentPage >= pageCount, onClick: () => goToPage(currentPage + 1), leftIcon: _jsx(ChevronRight, { size: 16 }) }), _jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": lastLabel, title: lastLabel, disabled: currentPage >= pageCount, onClick: () => goToPage(pageCount), leftIcon: _jsx(ChevronLast, { size: 16 }) })] }), _jsx("span", { className: "min-w-[180px] text-xs text-[rgb(var(--sg-muted))] md:ml-auto", children: pageReport }), rowsPerPageOptions && rowsPerPageOptions.length > 0 ? (_jsxs("label", { className: "ml-auto inline-flex items-center gap-2 text-xs text-[rgb(var(--sg-muted))] md:ml-0", children: [_jsx("span", { children: rowsPerPageLabel }), _jsx("select", { value: currentRows, onChange: (event) => {
+                                    }), _jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": nextLabel, title: nextLabel, enabled: !(currentPage >= pageCount), onClick: () => goToPage(currentPage + 1), leftIcon: _jsx(ChevronRight, { size: 16 }) }), _jsx(SgButton, { size: "sm", appearance: "outline", shape: "default", iconOnly: true, "aria-label": lastLabel, title: lastLabel, enabled: !(currentPage >= pageCount), onClick: () => goToPage(pageCount), leftIcon: _jsx(ChevronLast, { size: 16 }) })] }), _jsx("span", { className: "min-w-[180px] text-xs text-[rgb(var(--sg-muted))] md:ml-auto", children: pageReport }), rowsPerPageOptions && rowsPerPageOptions.length > 0 ? (_jsxs("label", { className: "ml-auto inline-flex items-center gap-2 text-xs text-[rgb(var(--sg-muted))] md:ml-0", children: [_jsx("span", { children: rowsPerPageLabel }), _jsx("select", { value: currentRows, onChange: (event) => {
                                             const nextRows = Number(event.target.value) || currentRows;
                                             commitPage(0, nextRows);
                                         }, className: "rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-2 py-1 text-xs text-[rgb(var(--sg-input-fg,var(--sg-text)))]", children: rowsPerPageOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })) : null] })) : null] }) }) }));

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

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

package/dist/inputs/SgDatatable.meta.js

@@ -13,7 +13,10 @@ export const sgMeta = {
     fieldSemantics: ["tabularData", "dataGrid", "listing", "collectionView"],
     props: [
         { name: "id", type: "string", description: "Identificador da tabela usado para DOM e persistencia do layout de colunas.", semanticRole: "data", bindable: true },
-        { name: "columns", type: "SgDatatableColumn[]", description: "Definicao das colunas da tabela.", semanticRole: "data", bindable: true },
+        { name: "columns", type: "SgDatatableColumn[]", description: "Definicao das colunas da tabela. column.filterPlaceholder vence o dicionario (components.datatable.columnFilterPlaceholder).", semanticRole: "data", bindable: true },
+        { name: "emptyMessage", type: "string", default: "(dicionario)", description: "Mensagem exibida quando nao ha registros. Vence o dicionario (components.datatable.empty).", semanticRole: "appearance", bindable: true },
+        { name: "globalFilterPlaceholder", type: "string", default: "(dicionario)", description: "Placeholder da busca global. Vence o dicionario (components.datatable.globalFilterPlaceholder).", semanticRole: "appearance", bindable: true },
+        { name: "columnManagerLabel", type: "string", default: "(dicionario)", description: "Titulo do painel de colunas. Vence o dicionario (components.datatable.columns).", semanticRole: "appearance", bindable: true },
         { name: "rows", type: "number", description: "Linhas por pagina quando a paginacao esta ativa (os dados vao em value).", semanticRole: "behavior", bindable: true },
         { name: "selectionMode", type: "\"single\" | \"multiple\"", description: "Modo de selecao de linhas.", semanticRole: "behavior", bindable: true },
         { name: "loading", type: "boolean", default: false, description: "Indica estado de carregamento.", semanticRole: "appearance", bindable: true },

package/dist/inputs/SgFileUpload.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import { type RhfFieldProps } from "../rhf";
+import { type FileErrorCode, type MediaType, type SizeLimit } from "./fileUploadLogic";
+/** Arquivo ja salvo no servidor (sem bytes): entra na lista como valor inicial ou controlado. */
+export type SgSavedFile = {
+    name: string;
+    url: string;
+    size?: number;
+    type?: string;
+};
+/** Item da lista de arquivos: um `File` escolhido agora ou um arquivo ja salvo (`url`). */
+export type SgFileValue = File | SgSavedFile;
+/** Recusa de um arquivo por uma regra de quem usa o componente (ex.: dimensao de imagem). */
+export type SgFileRejection = {
+    code: FileErrorCode;
+    message: string;
+};
+export type SgFileUploadProps = RhfFieldProps & {
+    id: string;
+    label?: string;
+    labelText?: string;
+    /** Arquivos controlados (sempre lista; um arquivo = lista de um). */
+    value?: SgFileValue[] | null;
+    /** Arquivos iniciais (campo nao controlado). */
+    defaultValue?: SgFileValue[];
+    /** Lista de arquivos validos apos escolher ou remover. O envio ao servidor e do host. */
+    onChange?: (files: SgFileValue[]) => void;
+    /** Arquivo recusado: codigo, mensagem ja traduzida e nome do arquivo. Os demais seguem validos. */
+    onError?: (code: FileErrorCode, message: string, fileName: string) => void;
+    /** Tipos aceitos (`image`, `pdf`, `xlsx`...). O tipo e conferido pelo conteudo do arquivo. */
+    mediaType?: MediaType[];
+    /** Tipos extras em texto livre (`.pdf`, `image/png`, `image/*`), separados por virgula; soma-se ao mediaType. */
+    accept?: string;
+    /** Quantos arquivos o campo guarda (padrao 1). Com 1, escolher outro substitui; maior que 1 liga a selecao multipla. */
+    maxFiles?: number;
+    /** Tamanho maximo de cada arquivo: bytes (numero) ou texto com unidade ("500KB", "1.5MB", "1GB"). */
+    maxSizePerFile?: SizeLimit;
+    /** Tamanho maximo da soma dos arquivos (mesmo formato). */
+    maxSizeTotal?: SizeLimit;
+    hintText?: string;
+    required?: boolean;
+    requiredMessage?: string;
+    enabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    onEnter?: () => void;
+    onExit?: () => void;
+    /** Regra extra, assincrona, por arquivo (depois da conferencia de tipo). E como o SgImageUpload confere dimensao. */
+    extraCheck?: (file: File, info: {
+        mime: string;
+    }) => Promise<SgFileRejection | null>;
+    /** Miniatura de cada arquivo (sem ela, a lista usa o icone do tipo). */
+    thumbnailBuilder?: (file: SgFileValue, size: number) => React.ReactNode;
+    /** Lado da miniatura em px (padrao 96). */
+    thumbnailSize?: number;
+    /** Chaves de i18n do texto da area vazia (um arquivo / varios). */
+    dropTextKey?: string;
+    dropManyTextKey?: string;
+    /** Texto dos tipos aceitos na mensagem de tipo recusado (padrao: mediaType/accept). */
+    typeNames?: string;
+    /** Valor do atributo `accept` do seletor do navegador (padrao: derivado de mediaType/accept). */
+    pickerAccept?: string;
+    /** Prefixo do `data-sg` dos elementos internos (`sg-file`, `sg-image`). */
+    keyPrefix?: string;
+};
+/** Atributo `accept` do seletor: grupos viram `image/*`, formatos viram MIME + extensoes; `all` libera tudo. */
+export declare function pickerAcceptFor(mediaType?: MediaType[], accept?: string): string | undefined;
+export declare function SgFileUpload(props: SgFileUploadProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgFileUpload.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgFileUpload.d.ts","sourceRoot":"","sources":["../../src/inputs/SgFileUpload.tsx"],"names":[],"mappings":"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"}

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, enabled = true, 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(!enabled || 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"}