@seedgrid/fe-components 2026.6.7 → 2026.7.0

package/dist/inputs/SgMultiSelect.meta.js

@@ -0,0 +1,56 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.multiselect",
+    package: "@seedgrid/fe-components",
+    exportName: "SgMultiSelect",
+    slug: "sg-multi-select",
+    displayName: "SgMultiSelect",
+    category: "input",
+    subcategory: "multiselect",
+    description: "Campo de selecao multipla no estilo select: trigger com chevron que vira check ao abrir e dropdown com checkboxes que mantem a lista aberta.",
+    tags: ["form", "multiselect", "choice", "checkbox", "rhf"],
+    capabilities: ["multi-selection", "search", "clearable", "max-selected", "keyboard"],
+    fieldSemantics: ["structuredChoice", "multiChoice", "tags", "categories"],
+    props: [
+        { name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
+        { name: "label", type: "string", description: "Rotulo exibido ao usuario.", semanticRole: "label", bindable: true },
+        { name: "options", type: "{ label: string; value: string | number; disabled?: boolean }[]", description: "Lista de opcoes disponiveis.", semanticRole: "data", bindable: false },
+        { name: "value", type: "(string | number)[]", description: "Array de valores selecionados.", semanticRole: "value", bindable: true },
+        { name: "onChange", type: "(value: (string | number)[]) => void", description: "Callback com o array atualizado de valores.", semanticRole: "event", bindable: false },
+        { name: "searchable", type: "boolean", default: false, description: "Exibe campo de busca no topo do dropdown.", semanticRole: "behavior", bindable: true },
+        { name: "clearable", type: "boolean", default: false, description: "Exibe botao para limpar toda a selecao.", semanticRole: "behavior", bindable: true },
+        { name: "maxSelected", type: "number", description: "Limite maximo de itens selecionaveis.", semanticRole: "validation", bindable: true },
+        { name: "placeholder", type: "string", description: "Texto exibido quando nada esta selecionado.", semanticRole: "label", bindable: true },
+        { name: "summaryThreshold", type: "number", default: 2, description: "Quantidade de rotulos antes de mostrar 'N selecionadas'.", semanticRole: "appearance", bindable: true },
+        { name: "required", type: "boolean", default: false, description: "Marca o campo como obrigatorio.", semanticRole: "validation", bindable: true },
+        { name: "onEnter", type: "() => void", description: "Disparado ao focar o campo.", semanticRole: "event", bindable: false },
+        { name: "onExit", type: "() => void", description: "Disparado ao sair do campo.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "focused", "open", "disabled", "error"],
+    showcase: { route: "/components/sg-multi-select", hasPlayground: false, hasPropsTable: true },
+    sdui: {
+        rendererType: "field.multiselect",
+        acceptsDataBinding: true,
+        defaultProps: { searchable: false, clearable: false, summaryThreshold: 2 }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Selecao de varias opcoes a partir de uma lista fechada (ex.: empresas, categorias, tags).",
+        "Filtros multi-valor em formularios e relatorios.",
+        "Campos relacionais N:N em formularios CRUD."
+    ],
+    avoidUseCases: [
+        "Escolha unica; nesses casos prefira SgCombobox ou SgRadioGroup.",
+        "Listas muito grandes com busca remota assincrona; nesses casos prefira SgAutocomplete.",
+        "Poucas opcoes sempre visiveis; nesses casos prefira SgCheckboxGroup."
+    ],
+    synonyms: ["multi select", "multiselect", "selecao multipla", "multiple choice select", "checkbox dropdown"],
+    relatedEntityFields: ["empresas", "categorias", "tags", "permissoes", "roles"],
+    compositionHints: [
+        "Usar dentro de SgPanel ou SgGroupBox em formularios.",
+        "Combinar com SgCheckboxGroup quando todas as opcoes precisam ficar sempre visiveis."
+    ],
+    rankingSignals: { freeText: 0.1, structuredChoice: 0.95, date: 0, number: 0, denseLayout: 0.7 }
+};

package/dist/inputs/SgMultiSelectChips.d.ts

@@ -0,0 +1,27 @@
+import { type RhfFieldProps } from "../rhf";
+import type { SgMultiSelectOption, SgMultiSelectOptionValue } from "./useSgMultiSelect";
+export type { SgMultiSelectOption, SgMultiSelectOptionValue } from "./useSgMultiSelect";
+export type SgMultiSelectChipsProps = RhfFieldProps & {
+    id: string;
+    label?: string;
+    labelText?: string;
+    className?: string;
+    labelClassName?: string;
+    width?: number | string;
+    borderRadius?: number | string;
+    enabled?: boolean;
+    required?: boolean;
+    options: SgMultiSelectOption[];
+    value?: SgMultiSelectOptionValue[];
+    onChange?: (value: SgMultiSelectOptionValue[]) => void;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    clearable?: boolean;
+    maxSelected?: number;
+    emptyText?: string;
+    placeholder?: string;
+    onEnter?: () => void;
+    onExit?: () => void;
+};
+export declare function SgMultiSelectChips(props: Readonly<SgMultiSelectChipsProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgMultiSelectChips.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgMultiSelectChips.d.ts","sourceRoot":"","sources":["../../src/inputs/SgMultiSelectChips.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAExF,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAExF,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAwPF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,uBAAuB,CAAC,2CAsB1E"}

package/dist/inputs/SgMultiSelectChips.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Check, ChevronDown, X } from "lucide-react";
+import { Controller } from "react-hook-form";
+import { resolveFieldError } from "../rhf";
+import { t, useComponentsI18n } from "../i18n";
+import { SgMultiSelectDropdown } from "./SgMultiSelectDropdown";
+import { useSgMultiSelect } from "./useSgMultiSelect";
+function SgMultiSelectChipsBase(props) {
+    const { id, label, labelText, className, labelClassName, width, borderRadius, enabled, required, options, value, onChange, searchable = false, searchPlaceholder, clearable = false, maxSelected, emptyText: emptyTextProp, placeholder, error, onEnter, onExit } = props;
+    const i18n = useComponentsI18n();
+    const emptyText = emptyTextProp ?? t(i18n, "components.autocomplete.empty");
+    const resolvedPlaceholder = placeholder ?? t(i18n, "components.inputs.select.placeholder");
+    const isDisabled = enabled === false;
+    const resolvedLabel = labelText ?? label ?? "";
+    const ms = useSgMultiSelect({
+        options,
+        value,
+        onChange,
+        searchable,
+        maxSelected,
+        isDisabled,
+        borderRadius
+    });
+    const triggerRef = React.useRef(null);
+    const hasError = Boolean(error);
+    const resolvedBorderRadius = borderRadius === undefined
+        ? undefined
+        : typeof borderRadius === "number"
+            ? `${borderRadius}px`
+            : borderRadius;
+    const borderClass = hasError
+        ? "border border-[hsl(var(--destructive))]"
+        : ms.open
+            ? "border border-[hsl(var(--primary))] ring-2 ring-[hsl(var(--primary)/0.25)]"
+            : "border border-border";
+    const triggerClass = [
+        "flex min-h-11 w-full flex-wrap items-center gap-1.5 rounded-md px-2 py-1.5 text-sm",
+        "bg-[var(--sg-input-bg,hsl(var(--background)))] text-[var(--sg-input-fg,hsl(var(--foreground)))]",
+        borderClass,
+        isDisabled
+            ? "cursor-not-allowed bg-[var(--sg-input-disabled-bg,hsl(var(--muted)))] text-[var(--sg-input-disabled-fg,hsl(var(--muted-foreground)))]"
+            : "cursor-text",
+        className ?? ""
+    ].join(" ");
+    const openOrClose = () => {
+        if (isDisabled)
+            return;
+        if (ms.open) {
+            ms.closeDropdown();
+        }
+        else {
+            ms.openDropdown();
+        }
+    };
+    return (_jsxs("div", { style: { width: width ?? "100%" }, children: [resolvedLabel ? (_jsxs("label", { htmlFor: id, className: [
+                    "mb-1 block text-sm font-medium",
+                    hasError ? "text-[hsl(var(--destructive))]" : "text-foreground/70",
+                    labelClassName ?? ""
+                ].join(" "), children: [_jsx("span", { children: resolvedLabel }), required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsxs("div", { className: ms.open ? "relative z-[1100]" : "relative", ref: ms.wrapperRef, children: [_jsxs("div", { ref: triggerRef, id: id, role: "combobox", "aria-expanded": ms.open, "aria-haspopup": "listbox", tabIndex: isDisabled ? -1 : 0, className: triggerClass, style: { borderRadius: resolvedBorderRadius }, onMouseDown: (event) => {
+                            // Clicks on chip remove buttons handle their own logic.
+                            if (event.target.closest("[data-sg-chip-remove]"))
+                                return;
+                            event.preventDefault();
+                            ms.ignoreBlurRef.current = true;
+                            openOrClose();
+                            triggerRef.current?.focus();
+                        }, onFocus: () => {
+                            onEnter?.();
+                        }, onBlur: (event) => {
+                            if (event.relatedTarget && ms.wrapperRef.current?.contains(event.relatedTarget)) {
+                                return;
+                            }
+                            if (event.relatedTarget && ms.dropdownRef.current?.contains(event.relatedTarget)) {
+                                return;
+                            }
+                            if (ms.ignoreBlurRef.current) {
+                                setTimeout(() => {
+                                    ms.ignoreBlurRef.current = false;
+                                }, 0);
+                                return;
+                            }
+                            onExit?.();
+                        }, onKeyDown: (event) => {
+                            if (isDisabled)
+                                return;
+                            if (event.key === "Escape") {
+                                event.preventDefault();
+                                ms.closeDropdown();
+                                return;
+                            }
+                            if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
+                                if (!ms.open) {
+                                    ms.openDropdown();
+                                    return;
+                                }
+                                if (!searchable) {
+                                    ms.handleListKeyDown(event);
+                                }
+                            }
+                        }, children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: ms.selectedOptions.length === 0 ? (_jsx("span", { className: "px-1 text-[var(--sg-input-placeholder,hsl(var(--muted-foreground)))]", children: resolvedPlaceholder })) : (ms.selectedOptions.map((option) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-muted/60 py-0.5 pl-2 pr-1 text-xs text-foreground", children: [_jsx("span", { className: "truncate", children: option.label }), !isDisabled ? (_jsx("button", { type: "button", "data-sg-chip-remove": "true", tabIndex: -1, className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-foreground/60 hover:bg-foreground/10 hover:text-foreground", onMouseDown: (event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                ms.ignoreBlurRef.current = true;
+                                            }, onClick: (event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                ms.removeValue(option.value);
+                                            }, "aria-label": t(i18n, "components.inputs.multiSelect.removeChip", { label: option.label }), children: _jsx(X, { size: 12 }) })) : null] }, String(option.value))))) }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1 self-start pt-0.5", children: [clearable && ms.selectedOptions.length > 0 && !isDisabled ? (_jsx("button", { type: "button", "data-sg-chip-remove": "true", tabIndex: -1, className: "text-foreground/60 hover:text-foreground", onMouseDown: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            ms.ignoreBlurRef.current = true;
+                                        }, onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            ms.clearSelection();
+                                        }, "aria-label": t(i18n, "components.actions.clearSelection"), children: _jsx(X, { size: 16 }) })) : null, _jsx("span", { className: "text-foreground/60", "aria-hidden": "true", children: ms.open ? _jsx(Check, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) })] })] }), error ? _jsx("p", { "data-sg-error": true, className: "mt-1 text-xs text-red-600", children: error }) : null, ms.open && !isDisabled ? (_jsx(SgMultiSelectDropdown, { dropdownRef: ms.dropdownRef, searchRef: ms.searchRef, ignoreBlurRef: ms.ignoreBlurRef, dropdownStyle: ms.dropdownStyle, searchable: searchable, searchPlaceholder: searchPlaceholder, query: ms.query, setQuery: ms.setQuery, setActiveIndex: ms.setActiveIndex, activeIndex: ms.activeIndex, visibleOptions: ms.visibleOptions, emptyText: emptyText, isSelected: ms.isSelected, resolvedValueLength: ms.resolvedValue.length, maxSelected: maxSelected, toggleOption: ms.toggleOption, onKeyDown: ms.handleListKeyDown })) : null] })] }));
+}
+export function SgMultiSelectChips(props) {
+    const { control, name, rules, ...rest } = props;
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, rules: rules, render: ({ field, fieldState }) => (_jsx(SgMultiSelectChipsBase, { ...rest, error: resolveFieldError(rest.error, fieldState.error?.message), value: field.value ?? [], onChange: (next) => field.onChange(next) })) }));
+    }
+    return _jsx(SgMultiSelectChipsBase, { ...rest });
+}

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

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

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

package/dist/inputs/SgMultiSelectChips.meta.js

@@ -0,0 +1,55 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.multiselectchips",
+    package: "@seedgrid/fe-components",
+    exportName: "SgMultiSelectChips",
+    slug: "sg-multi-select-chips",
+    displayName: "SgMultiSelectChips",
+    category: "input",
+    subcategory: "multiselect",
+    description: "Variante do multi-select onde os itens selecionados viram chips removiveis no trigger; o dropdown com checkboxes e a busca sao iguais ao SgMultiSelect.",
+    tags: ["form", "multiselect", "chips", "tags", "checkbox", "rhf"],
+    capabilities: ["multi-selection", "chips", "search", "clearable", "max-selected", "keyboard"],
+    fieldSemantics: ["structuredChoice", "multiChoice", "tags", "categories"],
+    props: [
+        { name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
+        { name: "label", type: "string", description: "Rotulo exibido ao usuario.", semanticRole: "label", bindable: true },
+        { name: "options", type: "{ label: string; value: string | number; disabled?: boolean }[]", description: "Lista de opcoes disponiveis.", semanticRole: "data", bindable: false },
+        { name: "value", type: "(string | number)[]", description: "Array de valores selecionados.", semanticRole: "value", bindable: true },
+        { name: "onChange", type: "(value: (string | number)[]) => void", description: "Callback com o array atualizado de valores.", semanticRole: "event", bindable: false },
+        { name: "searchable", type: "boolean", default: false, description: "Exibe campo de busca no topo do dropdown.", semanticRole: "behavior", bindable: true },
+        { name: "clearable", type: "boolean", default: false, description: "Exibe botao para limpar toda a selecao.", semanticRole: "behavior", bindable: true },
+        { name: "maxSelected", type: "number", description: "Limite maximo de itens selecionaveis.", semanticRole: "validation", bindable: true },
+        { name: "placeholder", type: "string", description: "Texto exibido quando nada esta selecionado.", semanticRole: "label", bindable: true },
+        { name: "required", type: "boolean", default: false, description: "Marca o campo como obrigatorio.", semanticRole: "validation", bindable: true },
+        { name: "onEnter", type: "() => void", description: "Disparado ao focar o campo.", semanticRole: "event", bindable: false },
+        { name: "onExit", type: "() => void", description: "Disparado ao sair do campo.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "focused", "open", "disabled", "error"],
+    showcase: { route: "/components/sg-multi-select-chips", hasPlayground: false, hasPropsTable: true },
+    sdui: {
+        rendererType: "field.multiselectchips",
+        acceptsDataBinding: true,
+        defaultProps: { searchable: false, clearable: false }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Selecao de varias opcoes onde e util ver e remover cada item escolhido individualmente (ex.: tags, destinatarios, empresas).",
+        "Filtros multi-valor em que o usuario precisa enxergar tudo o que ja selecionou.",
+        "Campos relacionais N:N em formularios CRUD com poucos itens visiveis por vez."
+    ],
+    avoidUseCases: [
+        "Escolha unica; nesses casos prefira SgCombobox ou SgRadioGroup.",
+        "Selecoes muito numerosas onde os chips ocupariam espaco demais; nesses casos prefira SgMultiSelect (resumo 'N selecionadas').",
+        "Listas com busca remota assincrona; nesses casos prefira SgAutocomplete."
+    ],
+    synonyms: ["multi select chips", "multiselect tags", "selecao multipla com chips", "tag input select", "chips dropdown"],
+    relatedEntityFields: ["empresas", "categorias", "tags", "permissoes", "roles", "destinatarios"],
+    compositionHints: [
+        "Usar dentro de SgPanel ou SgGroupBox em formularios.",
+        "Preferir a SgMultiSelect quando o numero de selecoes for grande e os chips poluirem o layout."
+    ],
+    rankingSignals: { freeText: 0.1, structuredChoice: 0.95, date: 0, number: 0, denseLayout: 0.6 }
+};

package/dist/inputs/SgMultiSelectDropdown.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type { SgMultiSelectOption, SgMultiSelectOptionValue } from "./useSgMultiSelect";
+export type SgMultiSelectDropdownProps = {
+    dropdownRef: React.RefObject<HTMLDivElement | null>;
+    searchRef: React.RefObject<HTMLInputElement | null>;
+    ignoreBlurRef: React.MutableRefObject<boolean>;
+    dropdownStyle: React.CSSProperties;
+    searchable: boolean;
+    searchPlaceholder?: string;
+    query: string;
+    setQuery: (value: string) => void;
+    setActiveIndex: (index: number) => void;
+    activeIndex: number;
+    visibleOptions: SgMultiSelectOption[];
+    emptyText: string;
+    isSelected: (value: SgMultiSelectOptionValue) => boolean;
+    resolvedValueLength: number;
+    maxSelected?: number;
+    toggleOption: (option: SgMultiSelectOption) => void;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};
+/**
+ * Dropdown compartilhado por SgMultiSelect e SgMultiSelectChips: lista de
+ * opcoes com checkbox, busca opcional, scroll e marcacao. Mantem a lista
+ * aberta enquanto o usuario marca/desmarca.
+ */
+export declare function SgMultiSelectDropdown(props: Readonly<SgMultiSelectDropdownProps>): React.ReactPortal | null;
+//# sourceMappingURL=SgMultiSelectDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgMultiSelectDropdown.d.ts","sourceRoot":"","sources":["../../src/inputs/SgMultiSelectDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAExF,MAAM,MAAM,0BAA0B,GAAG;IACvC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,mBAAmB,EAAE,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,OAAO,CAAC;IACzD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACpD,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,QAAQ,CAAC,0BAA0B,CAAC,4BAiFhF"}

package/dist/inputs/SgMultiSelectDropdown.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Check } from "lucide-react";
+import { t, useComponentsI18n } from "../i18n";
+/**
+ * Dropdown compartilhado por SgMultiSelect e SgMultiSelectChips: lista de
+ * opcoes com checkbox, busca opcional, scroll e marcacao. Mantem a lista
+ * aberta enquanto o usuario marca/desmarca.
+ */
+export function SgMultiSelectDropdown(props) {
+    const i18n = useComponentsI18n();
+    if (typeof document === "undefined")
+        return null;
+    return createPortal(_jsxs("div", { ref: props.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: props.dropdownStyle, role: "listbox", "aria-multiselectable": "true", onKeyDown: props.onKeyDown, children: [props.searchable ? (_jsx("div", { className: "border-b border-border p-2", children: _jsx("input", { ref: props.searchRef, type: "text", value: props.query, placeholder: props.searchPlaceholder ?? t(i18n, "components.actions.search"), className: "h-8 w-full rounded border border-border bg-[var(--sg-input-bg,hsl(var(--background)))] px-2 text-sm text-[var(--sg-input-fg,hsl(var(--foreground)))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]", onChange: (event) => {
+                        props.setQuery(event.currentTarget.value);
+                        props.setActiveIndex(0);
+                    }, onMouseDown: () => {
+                        props.ignoreBlurRef.current = true;
+                    } }) })) : null, _jsx("div", { className: "max-h-64 overflow-auto py-1", children: props.visibleOptions.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: props.emptyText })) : (props.visibleOptions.map((option, index) => {
+                    const checked = props.isSelected(option.value);
+                    const isActive = props.activeIndex === index;
+                    const reachedMax = !checked &&
+                        props.maxSelected !== undefined &&
+                        props.resolvedValueLength >= props.maxSelected;
+                    const optionDisabled = option.disabled || reachedMax;
+                    return (_jsxs("div", { role: "option", "aria-selected": checked, className: [
+                            "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm",
+                            isActive ? "bg-muted/60" : "",
+                            optionDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"
+                        ].join(" "), onMouseEnter: () => props.setActiveIndex(index), onMouseDown: (event) => {
+                            event.preventDefault();
+                            props.ignoreBlurRef.current = true;
+                        }, onClick: () => props.toggleOption(option), children: [_jsx("span", { "aria-hidden": "true", className: [
+                                    "flex h-4 w-4 shrink-0 items-center justify-center rounded border",
+                                    checked
+                                        ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+                                        : "border-border bg-[var(--sg-input-bg,hsl(var(--background)))]"
+                                ].join(" "), children: checked ? _jsx(Check, { size: 12, strokeWidth: 3 }) : null }), _jsx("span", { className: "truncate", children: option.label })] }, String(option.value)));
+                })) })] }), document.body);
+}

package/dist/inputs/SgPeriodSelector.d.ts

@@ -0,0 +1,103 @@
+import type { Control, FieldValues, RegisterOptions } from "react-hook-form";
+import type { SgAutocompleteItem } from "./SgAutocomplete";
+/**
+ * Presets temporais pre-definidos para filtros de relatorios/dashboards.
+ * O valor de cada membro e igual ao seu nome (string) para trafegar bem em
+ * fontes de dados, JSON e no id de item do SgCombobox.
+ */
+export declare enum PeriodPreset {
+    ALL = "ALL",
+    CUSTOM = "CUSTOM",
+    TODAY = "TODAY",
+    YESTERDAY = "YESTERDAY",
+    TOMORROW = "TOMORROW",
+    THIS_WEEK = "THIS_WEEK",
+    THIS_QUINZENA = "THIS_QUINZENA",
+    THIS_MONTH = "THIS_MONTH",
+    THIS_QUARTER = "THIS_QUARTER",
+    THIS_SEMESTER = "THIS_SEMESTER",
+    THIS_YEAR = "THIS_YEAR",
+    LAST_WEEK = "LAST_WEEK",
+    LAST_QUINZENA = "LAST_QUINZENA",
+    LAST_MONTH = "LAST_MONTH",
+    LAST_QUARTER = "LAST_QUARTER",
+    LAST_SEMESTER = "LAST_SEMESTER",
+    LAST_YEAR = "LAST_YEAR",
+    NEXT_WEEK = "NEXT_WEEK",
+    NEXT_QUINZENA = "NEXT_QUINZENA",
+    NEXT_MONTH = "NEXT_MONTH",
+    NEXT_QUARTER = "NEXT_QUARTER",
+    NEXT_SEMESTER = "NEXT_SEMESTER",
+    NEXT_YEAR = "NEXT_YEAR"
+}
+/**
+ * Intervalo resolvido de um preset.
+ * - startDate: meia-noite local do primeiro dia (00:00:00.000).
+ * - endDate: ultimo instante local do ultimo dia (23:59:59.999).
+ * - ALL e CUSTOM (sem preenchimento da UI) retornam datas nulas.
+ */
+export type ResolvedPeriod = {
+    preset: PeriodPreset;
+    label: string;
+    startDate: Date | null;
+    endDate: Date | null;
+};
+export type ResolvePeriodOptions = {
+    /** Nao permite que startDate seja anterior a esta data (clamp). */
+    minDate?: Date;
+    /** Nao permite que endDate seja posterior a esta data (clamp). */
+    maxDate?: Date;
+    /** Locale usado para o label textual. Default "pt-BR". */
+    locale?: string;
+};
+export type SgPeriodSelectorProps = {
+    id?: string;
+    label?: string;
+    value?: PeriodPreset;
+    onChange?: (period: ResolvedPeriod) => void;
+    /** Habilita o grupo de periodos passados (LAST_*). Default true. */
+    permitPast?: boolean;
+    /** Habilita o grupo de periodos atuais (THIS_*, TODAY, YESTERDAY). Default true. */
+    permitCurrent?: boolean;
+    /** Habilita o grupo de periodos futuros (TOMORROW, NEXT_*). Default true. */
+    permitFuture?: boolean;
+    /** Habilita a opcao "Todos" (sem limites de data). Default true. */
+    permitAll?: boolean;
+    /** Habilita a opcao "Periodo" (intervalo customizado). Default true. */
+    allowCustomPeriod?: boolean;
+    /** Locale para labels e formatacao. Default "pt-BR". */
+    locale?: string;
+    disabled?: boolean;
+    required?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    /** Data de referencia para resolver os presets (default: agora). Util em testes. */
+    referenceDate?: Date;
+    className?: string;
+    error?: string;
+    /** Integracao react-hook-form (opcional). */
+    control?: Control<FieldValues>;
+    name?: string;
+    rules?: RegisterOptions;
+};
+export declare function periodPresetLabel(preset: PeriodPreset, locale?: string): string;
+/**
+ * Resolve um preset temporal para um intervalo real de datas.
+ *
+ * Convencoes:
+ * - Semana inicia na SEGUNDA-FEIRA.
+ * - Quinzena e de calendario (dia 1..15 e 16..fim do mes), nao 15 dias corridos.
+ * - startDate = 00:00:00.000 local; endDate = 23:59:59.999 local (inclusivo).
+ * - ALL/CUSTOM retornam datas nulas.
+ * - minDate/maxDate (options) fazem clamp do intervalo resolvido.
+ */
+export declare function resolvePeriod(preset: PeriodPreset, ref?: Date, options?: ResolvePeriodOptions): ResolvedPeriod;
+export declare function buildPeriodOptions(config: {
+    permitAll?: boolean;
+    allowCustomPeriod?: boolean;
+    permitCurrent?: boolean;
+    permitFuture?: boolean;
+    permitPast?: boolean;
+}, locale?: string): SgAutocompleteItem[];
+export declare function SgPeriodSelector(props: Readonly<SgPeriodSelectorProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgPeriodSelector.d.ts.map

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

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