ivt
Version:
Ivt Components Library
590 lines (574 loc) • 29.4 kB
JavaScript
import React__default from 'react';
import { c } from '../chunks/index.module-1-Lm1QYF.mjs';
import { c as cn } from '../chunks/utils-05LlW3Cl.mjs';
import { P as Popover, a as PopoverTrigger, b as PopoverContent } from '../chunks/popover-CsYW0nDm.mjs';
import { B as Button } from '../chunks/button-Co_1yLv6.mjs';
import { C as ChevronsUpDown } from '../chunks/chevrons-up-down-BFiJwHit.mjs';
import { C as Command, b as CommandInput, d as CommandEmpty, c as CommandList, e as CommandGroup, f as CommandItem } from '../chunks/command-IckfUQsK.mjs';
import { C as Check } from '../chunks/check-BBGTedl-.mjs';
import { B as Badge } from '../chunks/badge-rV4HbE_R.mjs';
import { c as TooltipProvider, T as Tooltip, a as TooltipTrigger, b as TooltipContent } from '../chunks/tooltip-BTEGteNb.mjs';
import { t as tryParseDate, p as ptBR } from '../chunks/date-bAe2UaSj.mjs';
import { L as LoaderCircle } from '../chunks/loader-circle-BX1p6hn_.mjs';
import { C as CalendarDays } from '../chunks/calendar-days-D8ft1Hpj.mjs';
import { C as Calendar } from '../chunks/calendar-olAv9AH7.mjs';
import { t as toDate, f as format } from '../chunks/format-Cn5wls3k.mjs';
export { C as CalendarRange } from '../chunks/CalendarRange-BCcF9etO.mjs';
import { A as Alert, a as AlertTitle, b as AlertDescription } from '../chunks/alert-BONxY3hS.mjs';
import { I as Info } from '../chunks/TooltipIndicator-DgBUQgOI.mjs';
export { T as TooltipIndicator } from '../chunks/TooltipIndicator-DgBUQgOI.mjs';
import { X } from '../chunks/x-BOMmTgZd.mjs';
import { D as Dialog, i as DialogTrigger, b as DialogContent, e as DialogHeader, h as DialogTitle, c as DialogDescription, d as DialogFooter } from '../chunks/dialog-BkF50Tmo.mjs';
import { L as ListItem } from '../chunks/ListItem-D8UYYQVp.mjs';
export { D as DeleteConfirmationModal } from '../chunks/DeleteConfirmationModal-CjXlfOWx.mjs';
import { M as Menubar, b as MenubarMenu, c as MenubarTrigger, d as MenubarContent, h as MenubarItem } from '../chunks/menubar-JE1m8rYJ.mjs';
import { T as Table, a as TableHeader, e as TableRow, d as TableHead, b as TableBody, f as TableCell } from '../chunks/table-Bxaxu8Lu.mjs';
import { T as Tabs, a as TabsList, b as TabsTrigger } from '../chunks/tabs-BY4r8p4T.mjs';
import { S as ScrollArea, a as ScrollBar } from '../chunks/scroll-area-Cr1Iu-Ot.mjs';
import { A as Accordion, a as AccordionItem, b as AccordionTrigger, c as AccordionContent } from '../chunks/accordion-130n2E9C.mjs';
import { t as twMerge } from '../chunks/bundle-mjs-BYcyWisL.mjs';
import { H as HoverCard, a as HoverCardTrigger, b as HoverCardContent } from '../chunks/hover-card-CodWi0dK.mjs';
import { C as ChevronLeft } from '../chunks/chevron-left-D7OzIyKL.mjs';
import { C as ChevronRight } from '../chunks/chevron-right-mC6NR8jW.mjs';
import '../chunks/index-Bl-WJHvp.mjs';
import '../chunks/index-1tQVI0Jh.mjs';
import '../chunks/index-DT8WgpCS.mjs';
import 'react/jsx-runtime';
import '../chunks/index-DUpRrJTH.mjs';
import '../chunks/index-DgKlJYZP.mjs';
import 'react-dom';
import '@radix-ui/react-slot';
import '../chunks/index-Cbm3--wc.mjs';
import '../chunks/index-DvCZGX3H.mjs';
import '../chunks/tslib.es6-DXUeYCTx.mjs';
import '../chunks/index-tkRL9Tft.mjs';
import '../chunks/index-DKOlG3mh.mjs';
import '../chunks/index-aLIsJMgt.mjs';
import '../chunks/index-DmY774z-.mjs';
import '../chunks/index-BTe1rv5Z.mjs';
import '../chunks/index-C6s8KI_8.mjs';
import '../chunks/index-D4FMFHi9.mjs';
import 'class-variance-authority';
import '../chunks/createLucideIcon-DLrNgMqk.mjs';
import '../chunks/index-BRYGnp2Q.mjs';
import '../chunks/index-An4yBrAZ.mjs';
import '../chunks/chevron-down-DNXEgdv9.mjs';
import '../chunks/trash-2-D6lkozey.mjs';
import '@radix-ui/react-collection';
import '../chunks/index-CGLjQEjG.mjs';
import '../chunks/index-DWmrjIYv.mjs';
import '../chunks/index-BsG_UW8k.mjs';
import '../chunks/index-GgS4otoq.mjs';
import '../chunks/index-DWJ_2Xiy.mjs';
function AutoComplete({ value, onChange, placeholder, searchPlaceholder, open, onOpenChange, disabled, messageEmpty = "Nenhum item encontrado.", fetchOptions, getOptionLabel, getOptionKey, onSelect, className }) {
const [options, setOptions] = React__default.useState([]);
const [loading, setLoading] = React__default.useState(false);
const [searchTerm, setSearchTerm] = React__default.useState("");
const sortedOptions = React__default.useMemo(()=>{
if (!value) return options;
return [
...options
].sort((a, b)=>{
if (getOptionLabel(a) === getOptionLabel(value)) return -1;
if (getOptionLabel(b) === getOptionLabel(value)) return 1;
return getOptionLabel(a).localeCompare(getOptionLabel(b));
});
}, [
options,
value,
getOptionLabel
]);
const debouncedFetch = c(async (term)=>{
try {
const result = await fetchOptions(term);
setOptions(result);
} catch (err) {
console.error("Erro ao buscar opções:", err);
setOptions([]);
} finally{
setLoading(false);
}
}, 500);
const handleInputChange = (val)=>{
setSearchTerm(val);
if (val.trim() === "") {
setOptions([]);
setLoading(false);
return;
}
setLoading(true);
debouncedFetch(val);
};
const handleSelect = (option)=>{
if (onSelect) {
onSelect(option);
} else {
onChange(option);
onOpenChange(false);
}
};
return /*#__PURE__*/ React__default.createElement(Popover, {
open: open,
onOpenChange: onOpenChange
}, /*#__PURE__*/ React__default.createElement(PopoverTrigger, {
asChild: true
}, /*#__PURE__*/ React__default.createElement(Button, {
variant: "outline",
className: cn("flex h-10 w-full items-center justify-between truncate", className),
"aria-expanded": open,
disabled: disabled
}, /*#__PURE__*/ React__default.createElement("span", {
className: cn("text-muted-foreground", value && "text-foreground")
}, value ? getOptionLabel(value) : placeholder), /*#__PURE__*/ React__default.createElement(ChevronsUpDown, {
className: "ml-2 h-4 w-4 shrink-0 opacity-50"
}))), /*#__PURE__*/ React__default.createElement(PopoverContent, {
className: "max-h-[300px] w-[--radix-popover-trigger-width] overflow-auto p-0",
side: "bottom",
align: "start"
}, /*#__PURE__*/ React__default.createElement(Command, null, /*#__PURE__*/ React__default.createElement(CommandInput, {
placeholder: searchPlaceholder,
className: "h-9",
onValueChange: handleInputChange
}), /*#__PURE__*/ React__default.createElement(CommandEmpty, null, loading ? "Carregando..." : searchTerm.trim() === "" ? "Digite algo para buscar..." : messageEmpty), /*#__PURE__*/ React__default.createElement(CommandList, {
className: "max-h-60 overflow-y-auto"
}, /*#__PURE__*/ React__default.createElement(CommandGroup, null, sortedOptions.map((item)=>{
const label = getOptionLabel(item);
const key = getOptionKey(item);
return /*#__PURE__*/ React__default.createElement(CommandItem, {
key: key,
value: label,
onSelect: ()=>handleSelect(item)
}, value && getOptionLabel(value) === label && /*#__PURE__*/ React__default.createElement(Check, {
className: "h-4 w-4 opacity-100"
}), /*#__PURE__*/ React__default.createElement("span", null, label));
}))))));
}
/**
* Componente que exibe uma lista de Badges com limite de itens visíveis.
* Se houver mais itens do que o limite, exibe um Badge adicional com "+N".
*
* @param items - Array de strings para exibir como Badges
* @param maxVisible - Número máximo de Badges visíveis (padrão: 3)
* @param variant - Variante do Badge (padrão: "default")
* @param subtle - Se o Badge deve ter estilo sutil (padrão: true)
* @param tooltipItems - Array de strings para exibir no tooltip (opcional). Se fornecido, exibe todos os itens no tooltip, cada um em uma linha.
*/ const BadgeListLimited = ({ items, maxVisible = 3, variant = "default", subtle = true, tooltipItems })=>{
const visibleItems = items.slice(0, maxVisible);
const remainingCount = items.length - maxVisible;
const hasMore = remainingCount > 0;
const hiddenItems = items.slice(maxVisible);
const itemsToShowInTooltip = tooltipItems || hiddenItems;
return /*#__PURE__*/ React__default.createElement("div", {
className: "flex flex-wrap items-center gap-2.5"
}, visibleItems.map((item)=>/*#__PURE__*/ React__default.createElement(Badge, {
key: item,
variant: variant,
subtle: subtle
}, item)), hasMore && (itemsToShowInTooltip.length > 0 ? /*#__PURE__*/ React__default.createElement(TooltipProvider, null, /*#__PURE__*/ React__default.createElement(Tooltip, null, /*#__PURE__*/ React__default.createElement(TooltipTrigger, {
asChild: true
}, /*#__PURE__*/ React__default.createElement(Badge, {
variant: variant,
subtle: subtle
}, "+", remainingCount)), /*#__PURE__*/ React__default.createElement(TooltipContent, null, /*#__PURE__*/ React__default.createElement("div", {
className: "flex flex-col gap-1 max-h-[200px] overflow-y-auto text-xs"
}, itemsToShowInTooltip.map((tooltipItem)=>/*#__PURE__*/ React__default.createElement("div", {
key: tooltipItem
}, tooltipItem)))))) : /*#__PURE__*/ React__default.createElement(Badge, {
variant: variant,
subtle: subtle
}, "+", remainingCount)));
};
/**
* The {@link isWeekend} function options.
*/ /**
* @name isWeekend
* @category Weekday Helpers
* @summary Does the given date fall on a weekend?
*
* @description
* Does the given date fall on a weekend? A weekend is either Saturday (`6`) or Sunday (`0`).
*
* @param date - The date to check
* @param options - An object with options
*
* @returns The date falls on a weekend
*
* @example
* // Does 5 October 2014 fall on a weekend?
* const result = isWeekend(new Date(2014, 9, 5))
* //=> true
*/ function isWeekend(date, options) {
const day = toDate(date, options?.in).getDay();
return day === 0 || day === 6;
}
function normalizeDate(date) {
return format(date, "yyyy-MM-dd");
}
const CalendarPopover = ({ date, setDate, placeholder = "Selecione uma data", id = "calendar-popover", buttonProps, popoverProps, popoverContentClassName, className, disabled, isLoading, disabledDates, isLoadingTable, ...props })=>{
const validDate = tryParseDate(date);
return /*#__PURE__*/ React__default.createElement(Popover, popoverProps, /*#__PURE__*/ React__default.createElement(PopoverTrigger, {
asChild: true
}, /*#__PURE__*/ React__default.createElement(Button, {
id: id,
variant: "outline",
className: cn("hover:text-foreground justify-start text-left font-normal", !validDate && "text-muted-foreground hover:text-muted-foreground", className),
disabled: typeof disabled === "boolean" ? disabled : undefined,
...buttonProps
}, isLoading ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(LoaderCircle, {
className: "size-4 animate-spin"
}), /*#__PURE__*/ React__default.createElement("span", null, "carregando...")) : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(CalendarDays, {
className: "size-4"
}), validDate ? format(validDate, "P", {
locale: ptBR
}) : /*#__PURE__*/ React__default.createElement("span", null, placeholder)))), /*#__PURE__*/ React__default.createElement(PopoverContent, {
className: cn("w-auto p-0", popoverContentClassName),
align: "start"
}, /*#__PURE__*/ React__default.createElement(Calendar, {
autoFocus: true,
captionLayout: "dropdown",
selected: validDate,
onSelect: setDate,
locale: ptBR,
numberOfMonths: 1,
fromYear: 2010,
toYear: 2040,
disabled: (currentDate)=>{
if (isLoading || isLoadingTable) return true;
const normalizedCurrentDate = normalizeDate(currentDate);
const isHoliday = disabledDates?.has(normalizedCurrentDate);
const isWeekendDay = isWeekend(currentDate);
const isFutureDate = currentDate > new Date();
return isHoliday || isWeekendDay || isFutureDate;
},
defaultMonth: validDate ?? props.defaultMonth ?? new Date(),
...props,
mode: "single"
})));
};
/**
* A simpler CollapsibleHelp component that uses a Popover for the help content.
* It manages its own open state internally.
* The trigger is provided as 'children', and the content to show is passed as the 'content' prop.
*
* Usage:
* <CollapsibleHelp
* content={<p>Help text goes here...</p>}
* title="Help Section"
* >
* <button>Toggle Help</button> // This is your custom trigger
* </CollapsibleHelp>
*/ function CollapsibleHelp({ children, content, title = "Ajuda", className, label }) {
const [open, setOpen] = React__default.useState(false);
return /*#__PURE__*/ React__default.createElement("div", {
className: cn("flex items-start justify-between gap-2", className)
}, label && /*#__PURE__*/ React__default.createElement("div", {
className: "flex-1"
}, label), /*#__PURE__*/ React__default.createElement(Popover, {
open: open,
onOpenChange: setOpen
}, /*#__PURE__*/ React__default.createElement(PopoverTrigger, {
asChild: true
}, children), /*#__PURE__*/ React__default.createElement(PopoverContent, {
className: "w-100 p-0 border-none bg-transparent shadow-none",
align: "end",
side: "bottom"
}, /*#__PURE__*/ React__default.createElement(Alert, {
className: "relative border-primary/20 shadow-md bg-popover"
}, /*#__PURE__*/ React__default.createElement(Info, {
className: "h-4 w-4 text-primary"
}), /*#__PURE__*/ React__default.createElement(AlertTitle, {
className: "text-primary font-medium"
}, title), /*#__PURE__*/ React__default.createElement(Button, {
variant: "ghost",
size: "sm",
type: "button",
className: "absolute top-4 right-4 h-6 w-6 p-0 text-muted-foreground hover:text-foreground",
onClick: (e)=>{
e.stopPropagation();
setOpen(false);
}
}, /*#__PURE__*/ React__default.createElement(X, {
className: "h-4 w-4"
})), /*#__PURE__*/ React__default.createElement(AlertDescription, {
className: "mt-2 text-sm space-y-3 text-foreground"
}, content)))));
}
function ConfirmSave({ onSave, disabled, dialogTitle = "Confirme os dados da predefinição", dialogDescription = "Verifique se os dados estão corretos antes de salvar. Você pode alterá-los a qualquer momento na lista de predefinições.", actionTitle = "Salvar predefinição", children, rows = [], actionVariant = "default" }) {
const [open, setOpen] = React__default.useState(false);
return /*#__PURE__*/ React__default.createElement(Dialog, {
open: open,
onOpenChange: setOpen
}, /*#__PURE__*/ React__default.createElement(DialogTrigger, {
asChild: true
}, children), /*#__PURE__*/ React__default.createElement(DialogContent, {
className: "flex max-h-[90vh] max-w-116 flex-col"
}, /*#__PURE__*/ React__default.createElement(DialogHeader, {
className: "text-left"
}, /*#__PURE__*/ React__default.createElement(DialogTitle, {
className: "text-xl font-semibold"
}, dialogTitle), /*#__PURE__*/ React__default.createElement(DialogDescription, null, dialogDescription)), /*#__PURE__*/ React__default.createElement("div", {
"data-confirm-save-scrollable": true,
className: "flex min-h-0 max-w-full flex-1 flex-col overflow-y-auto py-2"
}, rows.map((row, index)=>{
if (!row.value || Array.isArray(row.value) && row.value.length === 0) ;
let content;
if (row.type === "badge-limited") {
const items = Array.isArray(row.value) ? row.value : [];
content = /*#__PURE__*/ React__default.createElement(BadgeListLimited, {
items: items,
variant: row.badge?.variant || "default",
subtle: row.badge?.subtle ?? true,
maxVisible: row.badge?.maxVisible
});
} else if (row.type === "custom") {
content = row.value;
} else {
content = row.value || "-";
}
return /*#__PURE__*/ React__default.createElement(ListItem, {
key: `${row.title}-${index}`,
title: row.title,
value: content,
className: "*:text-sm!"
});
})), /*#__PURE__*/ React__default.createElement(DialogFooter, null, /*#__PURE__*/ React__default.createElement(Button, {
disabled: disabled,
onClick: ()=>{
onSave();
setOpen(false);
},
variant: actionVariant,
isAction: true
}, actionTitle))));
}
/**
* Componente genérico de menubar para navegação entre páginas.
* Ajustado para ser agnóstico de framework (Next.js ou React puro).
*
* @example
* ```tsx
* // Exemplo com Next.js
* const router = useRouter();
* const pathname = usePathname();
*
* <GenericHeadingMenubar
* menuItems={menuItems}
* currentPath={pathname}
* onNavigate={(path) => router.push(path)}
* />
* ```
*/ const GenericHeadingMenubar = ({ menuItems, className, children, disabled, defaultIsActive, currentPath = "", onNavigate })=>{
/**
* Determina se um item do menu está ativo
*/ const isMenuItemActive = (menu)=>{
// Se o item tem uma função customizada, usa ela
if (menu.isActive) {
return menu.isActive(currentPath);
}
// Se foi passada uma função padrão, usa ela
if (defaultIsActive) {
return defaultIsActive(menu.value, currentPath);
}
// Fallback: compara o pathname com o path do menu
return currentPath === menu.path;
};
/**
* Handler padrão de clique (navega para o path)
*/ const handleMenuClick = (menu)=>{
if (menu.onClick) {
menu.onClick();
} else if (onNavigate) {
onNavigate(menu.path);
}
};
return /*#__PURE__*/ React__default.createElement("div", {
className: cn("flex flex-wrap items-center justify-between", className)
}, /*#__PURE__*/ React__default.createElement(Menubar, null, menuItems.map((menu)=>/*#__PURE__*/ React__default.createElement(MenubarMenu, {
key: menu.value
}, /*#__PURE__*/ React__default.createElement(MenubarTrigger, {
onClick: ()=>handleMenuClick(menu),
className: cn("flex items-center gap-1 disabled:opacity-50 aria-disabled:opacity-50", isMenuItemActive(menu) && "bg-accent text-accent-foreground"),
disabled: disabled,
"aria-disabled": disabled
}, menu.label), menu.subItems && /*#__PURE__*/ React__default.createElement(MenubarContent, null, menu.subItems.map((item)=>/*#__PURE__*/ React__default.createElement(MenubarItem, {
key: item.label,
onClick: item.onClick
}, item.label)))))), children);
};
function GenericTable({ data, columns, renderSeparator, emptyMessage = "Nenhum dado encontrado.", className, keyExtractor }) {
if (!data || data.length === 0) {
return /*#__PURE__*/ React__default.createElement("div", {
className: "text-muted-foreground"
}, emptyMessage);
}
return /*#__PURE__*/ React__default.createElement("div", {
className: `rounded-md border ${className ?? ""}`
}, /*#__PURE__*/ React__default.createElement(Table, null, /*#__PURE__*/ React__default.createElement(TableHeader, null, /*#__PURE__*/ React__default.createElement(TableRow, null, columns.map((col, index)=>/*#__PURE__*/ React__default.createElement(TableHead, {
key: index.toString()
}, col.header)))), /*#__PURE__*/ React__default.createElement(TableBody, null, data.map((item, index)=>{
const rowKey = keyExtractor ? keyExtractor(item, index) : index;
return /*#__PURE__*/ React__default.createElement(React__default.Fragment, {
key: rowKey
}, /*#__PURE__*/ React__default.createElement(TableRow, null, columns.map((col, colIndex)=>/*#__PURE__*/ React__default.createElement(TableCell, {
key: colIndex.toString(),
className: col.className
}, col.cell(item)))), renderSeparator?.(index));
}))));
}
const GenericTabs = ({ tabs, isLoading = false, className, currentPath = "", onNavigate, value: controlledValue, triggerClassName, widthCurrent })=>{
const activeTab = controlledValue ?? tabs.filter((t)=>{
const matchString = t.match ?? t.path;
return matchString && currentPath.includes(matchString);
}).sort((a, b)=>{
const lenA = (a.match ?? a.path ?? "").length;
const lenB = (b.match ?? b.path ?? "").length;
return lenB - lenA;
})[0]?.value ?? tabs[0]?.value;
const handleNavigate = (tab)=>{
if (tab.disabled || isLoading) return;
if (onNavigate && tab.path) {
onNavigate(tab.path);
}
};
return /*#__PURE__*/ React__default.createElement(Tabs, {
value: activeTab,
className: className
}, /*#__PURE__*/ React__default.createElement(ScrollArea, {
className: "w-full"
}, /*#__PURE__*/ React__default.createElement(TabsList, {
className: "flex h-full w-full justify-start gap-2"
}, tabs.map((tab)=>/*#__PURE__*/ React__default.createElement(TabsTrigger, {
key: tab.value,
value: tab.value,
className: cn("min-w-fit sm:min-w-[180px] w-fit", triggerClassName, widthCurrent && "sm:min-w-fit", tab.className),
disabled: isLoading || tab.disabled,
onClick: ()=>handleNavigate(tab),
type: "button"
}, tab.label))), /*#__PURE__*/ React__default.createElement(ScrollBar, {
orientation: "horizontal"
})));
};
const Header = ({ title, description, className, classNameDescription, children, defaultValue = "item-1", defaultOpen = false, menu })=>{
const [value, setValue] = React__default.useState(defaultOpen ? defaultValue : "");
const isOpen = value === defaultValue;
return /*#__PURE__*/ React__default.createElement("header", {
className: cn("text-content-high max-w-5xl px-4 py-1 text-xl", className)
}, /*#__PURE__*/ React__default.createElement(Accordion, {
type: "single",
collapsible: true,
className: "w-full",
value: value,
onValueChange: setValue
}, /*#__PURE__*/ React__default.createElement(AccordionItem, {
className: "border-b-0",
value: defaultValue
}, /*#__PURE__*/ React__default.createElement(AccordionTrigger, {
iconPosition: "left",
className: "justify-start gap-2 py-2 text-xl font-bold"
}, title), /*#__PURE__*/ React__default.createElement(AccordionContent, {
className: "text-content-medium text-base"
}, /*#__PURE__*/ React__default.createElement("p", {
className: cn("text-content-medium text-base", classNameDescription)
}, description), isOpen && menu && /*#__PURE__*/ React__default.createElement("div", {
className: "my-4 text-foreground"
}, menu), children))), !isOpen && menu && /*#__PURE__*/ React__default.createElement("div", {
className: "my-4"
}, menu));
};
const HoverBadge = ({ title, description, variant, className, showTitleInDescription = true, subtle = false })=>{
return /*#__PURE__*/ React__default.createElement(HoverCard, null, /*#__PURE__*/ React__default.createElement(HoverCardTrigger, null, /*#__PURE__*/ React__default.createElement(Badge, {
variant: variant,
subtle: subtle
}, title)), description && /*#__PURE__*/ React__default.createElement(HoverCardContent, {
className: `${twMerge("w-72 space-y-1", className)}`
}, showTitleInDescription && /*#__PURE__*/ React__default.createElement("span", {
className: "text-sm font-semibold"
}, title), /*#__PURE__*/ React__default.createElement("p", {
className: "w-full text-sm text-wrap break-words whitespace-pre-line"
}, description)));
};
function RuleFilterBuilder({ fields, onRemove, onAdd, maxBlocks = 3, isPending = false, instructionContent, renderConnector, renderItem }) {
// Ensure at least one block exists
React__default.useEffect(()=>{
if (fields.length === 0) {
onAdd();
}
}, [
fields.length,
onAdd
]);
return /*#__PURE__*/ React__default.createElement("div", {
className: "space-y-6"
}, instructionContent && /*#__PURE__*/ React__default.createElement("div", {
className: "bg-muted/50 p-4 rounded-md border text-sm text-muted-foreground mb-4"
}, instructionContent), fields.map((fieldItem, index)=>/*#__PURE__*/ React__default.createElement("div", {
key: fieldItem.id,
className: "relative"
}, index > 0 && /*#__PURE__*/ React__default.createElement("div", {
className: "relative py-4 flex items-center justify-center"
}, /*#__PURE__*/ React__default.createElement("div", {
className: "absolute inset-0 flex items-center"
}, /*#__PURE__*/ React__default.createElement("span", {
className: "w-full border-t border-border"
})), /*#__PURE__*/ React__default.createElement("div", {
className: "relative bg-background px-4"
}, renderConnector ? renderConnector(index) : null)), /*#__PURE__*/ React__default.createElement("div", {
className: "border rounded-lg bg-card text-card-foreground shadow-sm overflow-hidden"
}, /*#__PURE__*/ React__default.createElement("div", {
className: "bg-muted/30 px-4 py-3 border-b flex items-center justify-between"
}, /*#__PURE__*/ React__default.createElement("div", {
className: "font-semibold text-sm flex items-center gap-2"
}, /*#__PURE__*/ React__default.createElement("span", {
className: "bg-primary/10 text-primary w-6 h-6 flex items-center justify-center rounded-full text-xs"
}, index + 1), "Bloco de Seleção ", index + 1), index > 0 && /*#__PURE__*/ React__default.createElement(Button, {
type: "button",
variant: "ghost",
size: "sm",
onClick: ()=>onRemove(index),
className: "hover:bg-destructive hover:text-destructive-foreground h-8 w-8 p-0",
disabled: isPending
}, /*#__PURE__*/ React__default.createElement(X, {
className: "h-4 w-4"
}))), /*#__PURE__*/ React__default.createElement("div", {
className: "p-4 grid grid-cols-1 md:grid-cols-2 gap-4"
}, renderItem(index))))), fields.length < maxBlocks && /*#__PURE__*/ React__default.createElement(Button, {
type: "button",
variant: "outline",
className: "w-full border-dashed",
onClick: onAdd,
disabled: isPending
}, /*#__PURE__*/ React__default.createElement("div", {
className: "flex items-center gap-2"
}, /*#__PURE__*/ React__default.createElement("span", {
className: "font-semibold text-lg"
}, "+"), "Adicionar Bloco de Seleção (Restam ", maxBlocks - fields.length, ")")));
}
const StepNavigator = ({ currentIndex, totalSteps, onPrev, onNext, disabled = false, prevLabel = "Anterior", nextLabel = "Próximo", hideEdgeButtons = true, className })=>{
const isFirst = currentIndex === 0;
const isLast = currentIndex === totalSteps - 1;
return /*#__PURE__*/ React__default.createElement("div", {
className: cn("flex items-center gap-2", className)
}, (!hideEdgeButtons || !isFirst) && /*#__PURE__*/ React__default.createElement(Button, {
type: "button",
variant: "secondary",
onClick: onPrev,
disabled: disabled || isFirst
}, /*#__PURE__*/ React__default.createElement(ChevronLeft, {
className: "size-4"
}), prevLabel), (!hideEdgeButtons || !isLast) && /*#__PURE__*/ React__default.createElement(Button, {
type: "button",
variant: "secondary",
onClick: onNext,
disabled: disabled || isLast
}, nextLabel, /*#__PURE__*/ React__default.createElement(ChevronRight, {
className: "size-4"
})));
};
const TextWrap = ({ children, className, ...props })=>{
return /*#__PURE__*/ React__default.createElement("div", {
className: cn("line-clamp-4 w-full max-w-60 min-w-60 text-wrap break-words 2xl:max-w-[80%]", className),
...props
}, children);
};
export { AutoComplete, BadgeListLimited, CalendarPopover, CollapsibleHelp, ConfirmSave, GenericHeadingMenubar, GenericTable, GenericTabs, Header, HoverBadge, RuleFilterBuilder, StepNavigator, TextWrap, normalizeDate };
//# sourceMappingURL=index.mjs.map