@beweco/aurora-ui 0.1.64 → 0.1.66

package/dist/index.esm.js

@@ -1,10 +1,10 @@
-import { Skeleton, Button as Button$1, Chip as Chip$1, Accordion, AccordionItem, Pagination as Pagination$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, Badge, Spinner, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, ListboxSection, Avatar, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Image as Image$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, CardBody, SelectItem, Drawer, DrawerContent, DrawerBody, AutocompleteItem, Divider } from '@heroui/react';
+import { Skeleton, Button as Button$1, Chip as Chip$1, Accordion, AccordionItem, Pagination as Pagination$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, Badge, Spinner, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, ListboxSection, Avatar, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Image as Image$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, CardBody, SelectItem, Drawer, DrawerContent, DrawerBody, SelectSection, Checkbox, AutocompleteItem, Divider } from '@heroui/react';
 export * from '@heroui/react';
 export { Slider } from '@heroui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@iconify/react';
 export { loadIcons } from '@iconify/react';
-import React, { useId, useState, useCallback, useMemo, useEffect, createContext, useContext, memo, useRef, createElement, useLayoutEffect } from 'react';
+import React, { useId, useState, useCallback, useMemo, useEffect, createContext, useContext, memo, useRef, createElement, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
 import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip, Area, LineChart, YAxis, Line } from 'recharts';
 import { LazyMotion, domAnimation, m, motion, AnimatePresence } from 'framer-motion';
 import { createPortal } from 'react-dom';
@@ -338,6 +338,7 @@ var Input = function (_a) {
             label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
             inputWrapper: "focus-within:!border-primary-500",
             errorMessage: "text-left",
+            description: "text-left"
         } })));
 };
 
@@ -1734,12 +1735,12 @@ var NotificationButton = function (_a) {
 };
 NotificationButton.displayName = "NotificationButton";
 
-var DEFAULT_TRANSLATIONS$5 = {
+var DEFAULT_TRANSLATIONS$6 = {
     logout: "Cerrar sesión",
 };
 var HeaderComponent = function (_a) {
     var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, _b = _a.translations, translations = _b === void 0 ? {} : _b, breadcrumbs = _a.breadcrumbs, onNotificationClick = _a.onNotificationClick, onOptionSelect = _a.onOptionSelect, onBreadcrumbClick = _a.onBreadcrumbClick;
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$5), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$6), translations);
     return (jsx("header", { className: "header__container", children: jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxs("div", { className: "flex items-center gap-4", children: [jsx(Button$1, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsx(BreadcrumbsComponent, { items: breadcrumbs, onItemClick: onBreadcrumbClick }))] }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(NotificationButton, { notificationCount: notificationCount, onPress: onNotificationClick }), jsx(ConfigMenu, { options: options, onLogout: onLogout, onOptionSelect: onOptionSelect, translations: t })] })] }) }));
 };
 HeaderComponent.displayName = "Header";
@@ -1863,7 +1864,7 @@ KanbanColumn.displayName = "KanbanColumn";
  * Traducciones por defecto en español.
  * Se mezclan con las traducciones proporcionadas por el usuario.
  */
-var DEFAULT_TRANSLATIONS$4 = {
+var DEFAULT_TRANSLATIONS$5 = {
     dropHere: "Soltar aquí",
     emptyMessage: "No hay elementos",
 };
@@ -1897,7 +1898,7 @@ var columnGapClasses = {
 var KanbanComponent = function (_a) {
     var columns = _a.columns, renderItem = _a.renderItem, onCardClick = _a.onCardClick, onItemMove = _a.onItemMove, isDraggable = _a.isDraggable, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _b = _a.columnWidth, columnWidth = _b === void 0 ? "280px" : _b, _c = _a.columnGap, columnGap = _c === void 0 ? "md" : _c, _d = _a.horizontalScroll, horizontalScroll = _d === void 0 ? true : _d, columnMaxHeight = _a.columnMaxHeight, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.translations, translations = _e === void 0 ? {} : _e, onLoadMore = _a.onLoadMore;
     // Mezclar traducciones del usuario con las por defecto
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$4), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$5), translations);
     // Determinar si drag está habilitado
     var dragEnabled = isDraggable !== null && isDraggable !== void 0 ? isDraggable : !!onItemMove;
     // Estado del drag actual
@@ -2215,7 +2216,7 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
 });
 MenuNavList.displayName = "MenuNavList";
 
-var DEFAULT_TRANSLATIONS$3 = {
+var DEFAULT_TRANSLATIONS$4 = {
     menuLabel: "Menú",
     closeSidebarAriaLabel: "Cerrar menú lateral",
     mobileNavAriaLabel: "Navegación móvil",
@@ -2233,7 +2234,7 @@ var MenuComponent = React.memo(function Menu(_a) {
     var commerceInfo = _a.commerceInfo, userInfo = _a.userInfo, helpButton = _a.helpButton, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, menuItems = _a.menuItems, mobileBottomBarGroupKey = _a.mobileBottomBarGroupKey, _d = _a.showNativeMenu, showNativeMenu = _d === void 0 ? true : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
     var _f = React.useState(false), isCollapsed = _f[0], setIsCollapsed = _f[1];
     var _g = React.useState(false), logoError = _g[0], setLogoError = _g[1];
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$3), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$4), translations);
     var selectedKey = React.useMemo(function () {
         var _a, _b, _c;
         if (menuItems.selectedPath) {
@@ -2609,7 +2610,7 @@ var MultiStepSidebar = React.forwardRef(function (_a, ref) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    return (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxs("div", __assign({ ref: ref, className: cn("flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-[85vh] lg:max-h-[85vh]", className) }, props, { children: [jsx("div", { className: cn("hidden h-full w-1/3 flex-col gap-y-8 overflow-y-auto p-8 md:flex [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", steps.length < 5 ? "justify-center" : "items-start"), children: jsx(VerticalSteps, { className: stepperClasses, color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage, hideInactiveDescriptions: hideInactiveDescriptions }) }), jsxs("div", { className: "relative flex h-full w-full flex-col items-center justify-between gap-4 md:p-4 lg:w-2/3", children: [jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsx("div", { className: "flex  w-full justify-center", children: jsx(StepIndicator, { className: cn(stepperClasses), currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsx("div", { className: "flex flex-col h-full w-full justify-between p-4 sm:max-w-md md:max-w-lg overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: children })] })] })) }));
+    return (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxs("div", __assign({ ref: ref, className: cn("flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-auto lg:max-h-[85vh]", className) }, props, { children: [jsx("div", { className: cn("hidden h-full w-1/3 flex-col gap-y-8 overflow-y-auto p-8 md:flex [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", steps.length < 5 ? "justify-center" : "items-start"), children: jsx(VerticalSteps, { className: stepperClasses, color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage, hideInactiveDescriptions: hideInactiveDescriptions }) }), jsxs("div", { className: "relative flex h-full w-full flex-col items-center justify-between gap-4 md:p-4 lg:w-2/3", children: [jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsx("div", { className: "flex  w-full justify-center", children: jsx(StepIndicator, { className: cn(stepperClasses), currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsx("div", { className: "flex flex-col h-full w-full justify-between p-4 sm:max-w-md md:max-w-lg overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: children })] })] })) }));
 });
 MultiStepSidebar.displayName = "MultiStepSidebar";
 
@@ -3157,6 +3158,7 @@ var Phone = function (_a) {
     var _l = useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
     var t = __assign(__assign({}, defaultTranslations$6), translations);
+    var getCountryName = function (country) { var _a, _b; return (_b = (_a = t.countries) === null || _a === void 0 ? void 0 : _a[country.country]) !== null && _b !== void 0 ? _b : country.name; };
     var finalLabel = label || t.label;
     useEffect(function () {
         if (value) {
@@ -3226,13 +3228,14 @@ var Phone = function (_a) {
                 createPortal(jsxs("div", { ref: portalDropdownRef, style: dropdownPosition, className: "bg-content1 border border-default-200 rounded-lg shadow-lg z-50", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-default-100 border-medium border-default-200 text-default-500 rounded-lg focus:outline-none focus:border-primary-500", placeholder: t.searchPlaceholder, onChange: function (e) {
                                     var searchTerm = e.target.value.toLowerCase();
                                     var filtered = uniqueCountries.filter(function (country) {
-                                        return country.name.toLowerCase().includes(searchTerm) ||
+                                        return getCountryName(country).toLowerCase().includes(searchTerm) ||
+                                            country.name.toLowerCase().includes(searchTerm) ||
                                             country.code.toLowerCase().includes(searchTerm);
                                     });
                                     setFilteredCountries(filtered);
                                 } }) }), jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-default-200 ".concat(country.code === selectedCountry.code
                                     ? "bg-primary-50"
-                                    : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3", children: jsx(FlagIcon, { countryCode: country.country, size: "md" }) }), jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsx("span", { className: "text-xs text-default-500", children: country.code })] }, "".concat(country.code, "-").concat(country.country))); })) : (jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
+                                    : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3", children: jsx(FlagIcon, { countryCode: country.country, size: "md" }) }), jsx("span", { className: "flex-1 text-left text-default-500", children: getCountryName(country) }), jsx("span", { className: "text-xs text-default-500", children: country.code })] }, "".concat(country.code, "-").concat(country.country))); })) : (jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
 var defaultTranslations$5 = {
@@ -4282,7 +4285,7 @@ var AURORAS = [
         duration: 55,
     },
 ];
-var DEFAULT_TRANSLATIONS$2 = {
+var DEFAULT_TRANSLATIONS$3 = {
     backButtonLabel: "Atras",
 };
 var BackButton = function (_a) {
@@ -4318,7 +4321,7 @@ var TwoColumnLayoutAgent = function (_a) {
     var _b = _a.assistantState, assistantState = _b === void 0 ? "happy" : _b, assistantSpeech = _a.assistantSpeech, _c = _a.assistantSize, assistantSize = _c === void 0 ? "xl" : _c, assistantHint = _a.assistantHint, _d = _a.enableSequence, enableSequence = _d === void 0 ? true : _d, children = _a.children, _e = _a.showBackButton, showBackButton = _e === void 0 ? false : _e, onBack = _a.onBack, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g;
     var _h = useState(!enableSequence), showRightContent = _h[0], setShowRightContent = _h[1];
     var isDesktop = useMediaQuery("(min-width: ".concat(DESKTOP_BREAKPOINT_PX, "px)"));
-    var t = useMemo(function () { return (__assign(__assign({}, DEFAULT_TRANSLATIONS$2), translations)); }, [translations]);
+    var t = useMemo(function () { return (__assign(__assign({}, DEFAULT_TRANSLATIONS$3), translations)); }, [translations]);
     var handleBackPress = onBack !== null && onBack !== void 0 ? onBack : (function () { return undefined; });
     useEffect(function () {
         if (enableSequence && !showRightContent) {
@@ -4873,7 +4876,7 @@ var UploadFile = function (_a) {
 };
 UploadFile.displayName = "UploadFile";
 
-var DEFAULT_TRANSLATIONS$1 = {
+var DEFAULT_TRANSLATIONS$2 = {
     businessName: "Tu Negocio",
     businessInitials: "TN",
     onlineStatus: "en linea",
@@ -4898,7 +4901,7 @@ var DEFAULT_TRANSLATIONS$1 = {
  */
 var WhatsAppPreview = function (_a) {
     var imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "compact" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? false : _c, maxCaptionLength = _a.maxCaptionLength, onToggleCaption = _a.onToggleCaption, _d = _a.showFullCaption, showFullCaption = _d === void 0 ? false : _d, ctaType = _a.ctaType, ctaLabel = _a.ctaLabel, ctaValue = _a.ctaValue, _e = _a.campaignView, campaignView = _e === void 0 ? false : _e, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.timeLocale, timeLocale = _h === void 0 ? "es-ES" : _h;
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$1), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$2), translations);
     var shouldTruncate = maxCaptionLength && caption.length > maxCaptionLength;
     var displayCaption = campaignView
         ? caption
@@ -5767,6 +5770,519 @@ var SimpleLineChart = function (_a) {
                         })] }) })] }));
 };
 
+var DEFAULT_OPERATOR_LABELS = {
+    equals: "es",
+    notEquals: "no es",
+    contains: "contiene",
+    notContains: "no contiene",
+    startsWith: "empieza con",
+    endsWith: "termina con",
+    greaterThan: "mayor que",
+    lessThan: "menor que",
+    between: "esta entre",
+    before: "antes de",
+    after: "despues de",
+    in: "es uno de",
+    notIn: "no es ninguno de",
+    isNull: "esta vacio",
+    isNotNull: "tiene valor",
+    withinLastDays: "en los ultimos (dias)",
+    beforeDays: "hace mas de (dias)",
+};
+var DEFAULT_TRANSLATIONS$1 = {
+    includeItemsText: "Incluir los que cumplan",
+    allConditionsLabel: "Y todas",
+    anyConditionLabel: "O alguna",
+    theseConditionsText: "estas condiciones:",
+    thisConditionText: "esta condición:",
+    nestedConditionsPrefix: "Cumplan",
+    nestedConditionsSuffix: "de estas condiciones:",
+    addConditionLabel: "+ Condicion",
+    addGroupLabel: "+ Grupo de condiciones",
+    selectPlaceholder: "Seleccionar...",
+    selectTagPlaceholder: "Seleccionar etiqueta...",
+    selectTagsPlaceholder: "Seleccionar etiquetas...",
+    selectValuesPlaceholder: "Seleccionar valores...",
+    searchPlaceholder: "Buscar...",
+    selectedCountSingular: "seleccionado",
+    selectedCountPlural: "seleccionados",
+    deleteConditionTitle: "Eliminar condicion",
+    deleteGroupTitle: "Eliminar grupo",
+    automaticLabel: "(automatico)",
+    fromPlaceholder: "Desde",
+    toPlaceholder: "Hasta",
+    betweenSeparator: "y",
+    daysPlaceholder: "Cantidad de dias",
+    valuePlaceholder: "Valor",
+    textValuePlaceholder: "Escribe un valor...",
+    maxDepthWarning: "Maximo {max} niveles de anidacion permitidos",
+    filterSummaryTitle: "Resumen del filtro",
+    filterSummaryPrefix: "Donde:",
+    noConditionsText: "Sin condiciones definidas",
+    andConnectorLabel: "Y",
+    orConnectorLabel: "O",
+    showJsonLabel: "Ver JSON",
+    hideJsonLabel: "Ocultar JSON",
+    operatorLabels: DEFAULT_OPERATOR_LABELS,
+};
+var NO_VALUE_OPERATORS = ["isNull", "isNotNull"];
+var MULTI_VALUE_OPERATORS = ["in", "notIn"];
+var BETWEEN_OPERATOR = "between";
+var DAYS_OPERATORS = [
+    "withinLastDays",
+    "beforeDays",
+];
+
+// ─── Field Configuration ───────────────────────────────────────────
+// ─── Helper to check if item is a group ────────────────────────────
+function isGroupState(item) {
+    return item.type === "group";
+}
+function isSegmentationGroup(item) {
+    return "rules" in item && Array.isArray(item.rules);
+}
+
+// ─── Helpers ───────────────────────────────────────────────────────
+var _idCounter = 0;
+function uid() {
+    _idCounter += 1;
+    return "seg_".concat(_idCounter, "_").concat(Date.now());
+}
+function buildFieldMap(fields) {
+    var map = new Map();
+    for (var _i = 0, fields_1 = fields; _i < fields_1.length; _i++) {
+        var f = fields_1[_i];
+        map.set(f.value, f);
+    }
+    return map;
+}
+function buildTagMap(tags) {
+    var map = new Map();
+    for (var _i = 0, tags_1 = tags; _i < tags_1.length; _i++) {
+        var t = tags_1[_i];
+        map.set(t.id, t.title);
+    }
+    return map;
+}
+// ─── Convert between internal state and JSON ───────────────────────
+function stateToGroup(state) {
+    return {
+        operator: state.operator,
+        rules: state.rules.map(function (item) {
+            if (isGroupState(item))
+                return stateToGroup(item);
+            var rule = {
+                field: item.field,
+                operator: item.operator,
+            };
+            if (item.value !== undefined)
+                rule.value = item.value;
+            return rule;
+        }),
+    };
+}
+function groupToState(group) {
+    return {
+        id: uid(),
+        type: "group",
+        operator: group.operator,
+        rules: group.rules.map(function (item) {
+            if (isSegmentationGroup(item))
+                return groupToState(item);
+            var rule = {
+                id: uid(),
+                type: "rule",
+                field: item.field,
+                operator: item.operator,
+            };
+            if (item.value !== undefined)
+                rule.value = item.value;
+            return rule;
+        }),
+    };
+}
+function createEmptyRule(fields) {
+    var _a, _b;
+    var first = fields[0];
+    return {
+        id: uid(),
+        type: "rule",
+        field: (_a = first === null || first === void 0 ? void 0 : first.value) !== null && _a !== void 0 ? _a : "",
+        operator: (_b = first === null || first === void 0 ? void 0 : first.operators[0]) !== null && _b !== void 0 ? _b : "equals",
+        value: undefined,
+    };
+}
+function createEmptyGroup(fields) {
+    return {
+        id: uid(),
+        type: "group",
+        operator: "OR",
+        rules: [createEmptyRule(fields)],
+    };
+}
+var ChipMultiSelect = function (_a) {
+    var options = _a.options, value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Seleccionar..." : _b, _c = _a.searchPlaceholder, searchPlaceholder = _c === void 0 ? "Buscar..." : _c, _d = _a.selectedCountSingular, selectedCountSingular = _d === void 0 ? "seleccionado" : _d, _e = _a.selectedCountPlural, selectedCountPlural = _e === void 0 ? "seleccionados" : _e, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f;
+    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = useState(""), search = _h[0], setSearch = _h[1];
+    var wrapperRef = useRef(null);
+    useEffect(function () {
+        var handler = function (e) {
+            if (wrapperRef.current &&
+                !wrapperRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("click", handler);
+        return function () { return document.removeEventListener("click", handler); };
+    }, []);
+    var filteredOptions = useMemo(function () {
+        return search
+            ? options.filter(function (o) {
+                return o.l.toLowerCase().includes(search.toLowerCase());
+            })
+            : options;
+    }, [options, search]);
+    var toggleValue = function (v) {
+        if (value.includes(v))
+            onChange(value.filter(function (x) { return x !== v; }));
+        else
+            onChange(__spreadArray(__spreadArray([], value, true), [v], false));
+    };
+    var removeChip = function (v) {
+        onChange(value.filter(function (x) { return x !== v; }));
+    };
+    return (jsxs("div", { ref: wrapperRef, className: "seg-chip-select relative flex-1", children: [jsx("div", { className: "flex flex-wrap items-center gap-1 h-9 min-h-9 px-3 py-1.5 border rounded-lg cursor-pointer transition-colors ".concat(isOpen
+                    ? "border-primary-500 bg-default-50"
+                    : "border-default-100 hover:border-default-200", " ").concat(isDisabled ? "opacity-50 pointer-events-none" : ""), onClick: function () { return !isDisabled && setIsOpen(!isOpen); }, onKeyDown: function (e) {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        if (!isDisabled)
+                            setIsOpen(!isOpen);
+                    }
+                }, role: "combobox", "aria-expanded": isOpen, tabIndex: isDisabled ? -1 : 0, children: value.length === 0 ? (jsx("span", { className: "text-default-400 text-sm", children: placeholder })) : (value.map(function (v) {
+                    var _a;
+                    var opt = options.find(function (o) { return o.v === v; });
+                    return (jsx(Chip$1, { size: "sm", variant: "flat", color: "primary", onClose: function () { return removeChip(v); }, children: (_a = opt === null || opt === void 0 ? void 0 : opt.l) !== null && _a !== void 0 ? _a : v }, v));
+                })) }), isOpen && (jsxs("div", { className: "flex items-center w-full min-h-[56px]  transition-colors shadow-sm border-medium border-default-200 rounded-xl focus-within:border-primary-500  border-default-200", children: [options.length > 5 && (jsx("div", { className: "p-2 border-b border-default-100", children: jsx(Input$1, { size: "sm", variant: "faded", placeholder: searchPlaceholder, value: search, onValueChange: setSearch, onClick: function (e) { return e.stopPropagation(); }, classNames: {
+                                inputWrapper: "h-8 min-h-8",
+                            } }) })), jsx("div", { className: "overflow-y-auto flex-1 py-1", children: filteredOptions.map(function (opt) { return (jsx("div", { className: "flex items-center px-3 py-1.5 cursor-pointer hover:bg-default-50 transition-colors ".concat(value.includes(opt.v) ? "bg-primary-50" : ""), onClick: function (e) {
+                                e.stopPropagation();
+                                toggleValue(opt.v);
+                            }, onKeyDown: function (e) {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    toggleValue(opt.v);
+                                }
+                            }, role: "option", "aria-selected": value.includes(opt.v), tabIndex: 0, children: jsx(Checkbox, { size: "sm", isSelected: value.includes(opt.v), onValueChange: function () { return toggleValue(opt.v); }, classNames: { label: "text-sm" }, children: opt.l }) }, opt.v)); }) }), jsxs("div", { className: "px-3 py-1.5 text-xs text-default-400 border-t border-default-100", children: [value.length, " ", value.length === 1
+                                ? selectedCountSingular
+                                : selectedCountPlural] })] }))] }));
+};
+var ValueInput = function (_a) {
+    var _b, _c, _d, _e;
+    var field = _a.field, operator = _a.operator, value = _a.value, tags = _a.tags, onChange = _a.onChange, t = _a.translations, _f = _a.isDisabled, isDisabled = _f === void 0 ? false : _f;
+    if (!field)
+        return null;
+    // No value operators
+    if (NO_VALUE_OPERATORS.includes(operator)) {
+        return (jsx(Chip$1, { size: "sm", variant: "flat", color: "default", children: t.automaticLabel }));
+    }
+    // Enum field — multi-select (in / notIn)
+    if (field.type === "enum" && MULTI_VALUE_OPERATORS.includes(operator)) {
+        return (jsx(ChipMultiSelect, { options: (_b = field.enumValues) !== null && _b !== void 0 ? _b : [], value: Array.isArray(value) ? value : [], onChange: onChange, placeholder: t.selectValuesPlaceholder, searchPlaceholder: t.searchPlaceholder, selectedCountSingular: t.selectedCountSingular, selectedCountPlural: t.selectedCountPlural, isDisabled: isDisabled }));
+    }
+    // Enum field — single select
+    if (field.type === "enum") {
+        return (jsx(Select$1, { size: "sm", variant: "faded", placeholder: t.selectPlaceholder, selectedKeys: value ? [String(value)] : [], onSelectionChange: function (keys) {
+                var selected = Array.from(keys)[0];
+                onChange(selected || undefined);
+            }, isDisabled: isDisabled, className: "flex-1 min-w-[160px] h-9", classNames: {
+                trigger: "h-9 min-h-9 border border-default-100 rounded-lg data-[hover=true]:border-default-200 data-[focus=true]:border-primary-500",
+            }, "aria-label": field.label, children: ((_c = field.enumValues) !== null && _c !== void 0 ? _c : []).map(function (ev) { return (jsx(SelectItem, { children: ev.l }, ev.v)); }) }));
+    }
+    // Tag single
+    if (field.type === "tag-single") {
+        return (jsx(Select$1, { size: "sm", variant: "faded", placeholder: t.selectTagPlaceholder, selectedKeys: value ? [String(value)] : [], onSelectionChange: function (keys) {
+                var selected = Array.from(keys)[0];
+                onChange(selected || undefined);
+            }, isDisabled: isDisabled, className: "flex-1 min-w-[160px] h-9", classNames: {
+                trigger: "h-9 min-h-9 border border-default-100 rounded-lg data-[hover=true]:border-default-200 data-[focus=true]:border-primary-500",
+            }, "aria-label": field.label, children: tags.map(function (tag) { return (jsx(SelectItem, { children: tag.title }, tag.id)); }) }));
+    }
+    // Tag multi
+    if (field.type === "tag-multi") {
+        var tagOpts = tags.map(function (tag) { return ({ v: tag.id, l: tag.title }); });
+        return (jsx(ChipMultiSelect, { options: tagOpts, value: Array.isArray(value) ? value : [], onChange: onChange, placeholder: t.selectTagsPlaceholder, searchPlaceholder: t.searchPlaceholder, selectedCountSingular: t.selectedCountSingular, selectedCountPlural: t.selectedCountPlural, isDisabled: isDisabled }));
+    }
+    // Between operator
+    if (operator === BETWEEN_OPERATOR) {
+        var isDate_1 = field.type === "date";
+        var arr_1 = Array.isArray(value) ? value : [undefined, undefined];
+        return (jsxs("div", { className: "flex items-center gap-2 flex-1", children: [jsx(Input$1, { size: "sm", variant: "faded", type: isDate_1 ? "date" : "number", placeholder: isDate_1 ? "" : t.fromPlaceholder, value: arr_1[0] !== undefined ? String(arr_1[0]) : "", onValueChange: function (v) {
+                        var _a;
+                        var parsed = isDate_1
+                            ? v
+                            : v !== ""
+                                ? Number(v)
+                                : undefined;
+                        onChange([
+                            parsed,
+                            (_a = arr_1[1]) !== null && _a !== void 0 ? _a : "",
+                        ]);
+                    }, isDisabled: isDisabled, className: "flex-1", "aria-label": t.fromPlaceholder, classNames: {
+                        inputWrapper: "h-9 min-h-9",
+                        input: "text-center",
+                    } }), jsx("span", { className: "text-default-400 text-sm shrink-0", children: t.betweenSeparator }), jsx(Input$1, { size: "sm", variant: "faded", type: isDate_1 ? "date" : "number", placeholder: isDate_1 ? "" : t.toPlaceholder, value: arr_1[1] !== undefined ? String(arr_1[1]) : "", onValueChange: function (v) {
+                        var _a;
+                        var parsed = isDate_1
+                            ? v
+                            : v !== ""
+                                ? Number(v)
+                                : undefined;
+                        onChange([
+                            (_a = arr_1[0]) !== null && _a !== void 0 ? _a : "",
+                            parsed,
+                        ]);
+                    }, isDisabled: isDisabled, className: "flex-1", "aria-label": t.toPlaceholder, classNames: {
+                        inputWrapper: "h-9 min-h-9",
+                        input: "text-center",
+                    } })] }));
+    }
+    // Days operators
+    if (DAYS_OPERATORS.includes(operator)) {
+        return (jsx(Input$1, { size: "sm", variant: "faded", type: "number", min: 0, placeholder: t.daysPlaceholder, value: value !== undefined ? String(value) : "", onValueChange: function (v) {
+                return onChange(v !== "" ? Number(v) : undefined);
+            }, isDisabled: isDisabled, className: "flex-1 min-w-[140px]", classNames: { inputWrapper: "h-9 min-h-9" }, "aria-label": t.daysPlaceholder }));
+    }
+    // Number field
+    if (field.type === "number") {
+        return (jsx(Input$1, { size: "sm", variant: "faded", type: "number", min: 0, placeholder: t.valuePlaceholder, value: value !== undefined ? String(value) : "", onValueChange: function (v) {
+                return onChange(v !== "" ? Number(v) : undefined);
+            }, isDisabled: isDisabled, className: "flex-1 min-w-[120px]", classNames: { inputWrapper: "h-9 min-h-9" }, "aria-label": t.valuePlaceholder }));
+    }
+    // Date field
+    if (field.type === "date") {
+        return (jsx(Input$1, { size: "sm", variant: "faded", type: "date", value: (_d = value) !== null && _d !== void 0 ? _d : "", onValueChange: function (v) { return onChange(v || undefined); }, isDisabled: isDisabled, className: "flex-1 min-w-[160px]", classNames: { inputWrapper: "h-9 min-h-9" }, "aria-label": field.label }));
+    }
+    // Text field (default)
+    return (jsx(Input$1, { size: "sm", variant: "faded", type: "text", placeholder: t.textValuePlaceholder, value: (_e = value) !== null && _e !== void 0 ? _e : "", onValueChange: function (v) { return onChange(v || undefined); }, isDisabled: isDisabled, className: "flex-1 min-w-[160px]", classNames: { inputWrapper: "h-9 min-h-9" }, "aria-label": field.label }));
+};
+// ─── ConnectorPill Sub-component (compact: text only) ─────────────────
+var ConnectorPill = function (_a) {
+    var isAnd = _a.isAnd, label = _a.label;
+    return (jsxs("div", { className: "flex items-center gap-2 py-1", children: [jsx("div", { className: "flex-1 h-px bg-default-200" }), jsx(Chip$1, { size: "sm", variant: "flat", color: isAnd ? "secondary" : "success", children: label }), jsx("div", { className: "flex-1 h-px bg-default-200" })] }));
+};
+var RuleRow = function (_a) {
+    var _b;
+    var rule = _a.rule, fields = _a.fields, fieldMap = _a.fieldMap, tags = _a.tags, onUpdate = _a.onUpdate, onDelete = _a.onDelete, t = _a.translations, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c;
+    var meta = fieldMap.get(rule.field);
+    var operators = (_b = meta === null || meta === void 0 ? void 0 : meta.operators) !== null && _b !== void 0 ? _b : [];
+    var opLabels = __assign(__assign({}, DEFAULT_OPERATOR_LABELS), t.operatorLabels);
+    // Group fields by category
+    var categories = useMemo(function () {
+        var cats = [];
+        var last = "";
+        for (var _i = 0, fields_2 = fields; _i < fields_2.length; _i++) {
+            var f = fields_2[_i];
+            if (f.category !== last) {
+                cats.push({ category: f.category, fields: [f] });
+                last = f.category;
+            }
+            else {
+                cats[cats.length - 1].fields.push(f);
+            }
+        }
+        return cats;
+    }, [fields]);
+    var handleFieldChange = function (newField) {
+        var _a;
+        var newMeta = fieldMap.get(newField);
+        var newOp = (_a = newMeta === null || newMeta === void 0 ? void 0 : newMeta.operators[0]) !== null && _a !== void 0 ? _a : "equals";
+        onUpdate(__assign(__assign({}, rule), { field: newField, operator: newOp, value: undefined }));
+    };
+    var handleOperatorChange = function (newOp) {
+        onUpdate(__assign(__assign({}, rule), { operator: newOp, value: undefined }));
+    };
+    var handleValueChange = function (newValue) {
+        onUpdate(__assign(__assign({}, rule), { value: newValue }));
+    };
+    return (jsxs("div", { className: "seg-rule-row flex flex-col gap-2 p-3 border border-default-100 rounded-xl min-h-[52px] w-full sm:flex-row sm:items-center sm:gap-2 sm:w-auto", children: [jsx(Select$1, { size: "sm", variant: "faded", selectedKeys: [rule.field], onSelectionChange: function (keys) {
+                    var selected = Array.from(keys)[0];
+                    if (selected)
+                        handleFieldChange(selected);
+                }, isDisabled: isDisabled, className: "w-full sm:min-w-[170px] sm:max-w-[200px] sm:shrink-0", classNames: {
+                    trigger: "h-9 min-h-9 border border-default-100 rounded-lg data-[hover=true]:border-default-200 data-[focus=true]:border-primary-500",
+                }, "aria-label": "Campo", children: categories.map(function (cat) { return (jsx(SelectSection, { title: cat.category, children: cat.fields.map(function (f) { return (jsx(SelectItem, { children: f.label }, f.value)); }) }, cat.category)); }) }), jsx(Select$1, { size: "sm", variant: "faded", selectedKeys: [rule.operator], onSelectionChange: function (keys) {
+                    var selected = Array.from(keys)[0];
+                    if (selected)
+                        handleOperatorChange(selected);
+                }, isDisabled: isDisabled, className: "w-full sm:min-w-[140px] sm:max-w-[180px] sm:shrink-0", classNames: {
+                    trigger: "h-9 min-h-9 border border-default-100 rounded-lg data-[hover=true]:border-default-200 data-[focus=true]:border-primary-500",
+                }, "aria-label": "Operador", children: operators.map(function (op) {
+                    var _a;
+                    return (jsx(SelectItem, { children: (_a = opLabels[op]) !== null && _a !== void 0 ? _a : op }, op));
+                }) }), jsx("div", { className: "w-full sm:flex-1 sm:min-w-0 flex items-center", children: jsx(ValueInput, { field: meta, operator: rule.operator, value: rule.value, tags: tags, onChange: handleValueChange, translations: t, isDisabled: isDisabled }) }), jsx(Button$1, { isIconOnly: true, size: "sm", variant: "light", color: "danger", onPress: onDelete, isDisabled: isDisabled, "aria-label": t.deleteConditionTitle, className: "shrink-0 self-end sm:self-center", children: "\u2715" })] }));
+};
+var FilterGroup = function (_a) {
+    var group = _a.group, fields = _a.fields, fieldMap = _a.fieldMap, tags = _a.tags, depth = _a.depth, maxDepth = _a.maxDepth, onUpdate = _a.onUpdate, t = _a.translations, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b;
+    var isAnd = group.operator === "AND";
+    var connectorLabel = isAnd ? t.andConnectorLabel : t.orConnectorLabel;
+    var toggleOperator = function (op) {
+        onUpdate(__assign(__assign({}, group), { operator: op }));
+    };
+    var updateRule = function (index, updated) {
+        var newRules = __spreadArray([], group.rules, true);
+        newRules[index] = updated;
+        onUpdate(__assign(__assign({}, group), { rules: newRules }));
+    };
+    var deleteRule = function (index) {
+        var newRules = group.rules.filter(function (_, i) { return i !== index; });
+        onUpdate(__assign(__assign({}, group), { rules: newRules }));
+    };
+    var addRule = function () {
+        onUpdate(__assign(__assign({}, group), { rules: __spreadArray(__spreadArray([], group.rules, true), [createEmptyRule(fields)], false) }));
+    };
+    var addGroup = function () {
+        if (depth >= maxDepth)
+            return;
+        onUpdate(__assign(__assign({}, group), { rules: __spreadArray(__spreadArray([], group.rules, true), [createEmptyGroup(fields)], false) }));
+    };
+    return (jsxs("div", { className: "seg-filter-group w-full min-w-0", children: [jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-3 text-sm text-default-700", children: [jsx("span", { children: depth === 1
+                            ? t.includeItemsText
+                            : t.nestedConditionsPrefix }), jsxs("span", { className: "inline-flex rounded-md overflow-hidden border border-default-200", children: [jsx(Button$1, { size: "sm", radius: "none", variant: isAnd ? "solid" : "light", color: isAnd ? "secondary" : "default", className: "min-w-0 px-2.5 text-xs ".concat(isAnd
+                                    ? "font-semibold"
+                                    : "text-default-500 font-semibold"), onPress: function () { return toggleOperator("AND"); }, isDisabled: isDisabled, "aria-label": t.allConditionsLabel, children: t.andConnectorLabel }), jsx(Button$1, { size: "sm", radius: "none", variant: !isAnd ? "solid" : "light", color: !isAnd ? "success" : "default", className: "min-w-0 px-2.5 text-xs ".concat(!isAnd
+                                    ? "font-semibold"
+                                    : "text-default-500 font-semibold"), onPress: function () { return toggleOperator("OR"); }, isDisabled: isDisabled, "aria-label": t.anyConditionLabel, children: t.orConnectorLabel })] }), jsx("span", { children: depth === 1
+                            ? group.rules.length >= 2
+                                ? t.theseConditionsText
+                                : t.thisConditionText
+                            : t.nestedConditionsSuffix })] }), jsx("div", { className: "seg-rules-list flex flex-col gap-0", children: group.rules.map(function (item, index) { return (jsxs("div", { children: [index > 0 && (jsx(ConnectorPill, { isAnd: isAnd, label: connectorLabel })), isGroupState(item) ? (jsxs("div", { className: "seg-nested-wrap relative border-2 rounded-xl p-4 ".concat(item.operator === "AND"
+                                ? "border-secondary/30 bg-secondary-50"
+                                : "border-success/30 bg-success-50"), children: [jsx(Button$1, { isIconOnly: true, size: "sm", variant: "light", color: "danger", className: "absolute top-2 right-2", onPress: function () { return deleteRule(index); }, isDisabled: isDisabled, "aria-label": t.deleteGroupTitle, children: "\u2715" }), jsx(FilterGroup, { group: item, fields: fields, fieldMap: fieldMap, tags: tags, depth: depth + 1, maxDepth: maxDepth, onUpdate: function (updated) {
+                                        return updateRule(index, updated);
+                                    }, translations: t, isDisabled: isDisabled })] })) : (jsx(RuleRow, { rule: item, fields: fields, fieldMap: fieldMap, tags: tags, onUpdate: function (updated) {
+                                return updateRule(index, updated);
+                            }, onDelete: function () { return deleteRule(index); }, translations: t, isDisabled: isDisabled }))] }, item.id)); }) }), jsxs("div", { className: "seg-add-actions flex flex-wrap gap-2 mt-3", children: [jsx(Button$1, { variant: "bordered", size: "sm", className: "border-dashed text-default-500", onPress: addRule, isDisabled: isDisabled, children: t.addConditionLabel }), depth < maxDepth && (jsx(Button$1, { variant: "bordered", size: "sm", className: "border-dashed text-default-500", onPress: addGroup, isDisabled: isDisabled, children: t.addGroupLabel }))] })] }));
+};
+var FilterSummary = function (_a) {
+    var group = _a.group, fieldMap = _a.fieldMap, tagMap = _a.tagMap, t = _a.translations;
+    var opLabels = __assign(__assign({}, DEFAULT_OPERATOR_LABELS), t.operatorLabels);
+    var humanValue = function (field, operator, value) {
+        var _a, _b;
+        if (operator === "isNull" || operator === "isNotNull")
+            return "";
+        if (value === undefined || value === null)
+            return "(sin valor)";
+        var meta = fieldMap.get(field);
+        if (!meta)
+            return String(value);
+        if (meta.type === "tag-single")
+            return (_a = tagMap.get(value)) !== null && _a !== void 0 ? _a : String(value);
+        if (meta.type === "tag-multi" && Array.isArray(value)) {
+            return value
+                .map(function (v) { var _a; return (_a = tagMap.get(v)) !== null && _a !== void 0 ? _a : String(v); })
+                .join(", ");
+        }
+        if (meta.type === "enum" && meta.enumValues) {
+            var enumMap_1 = new Map(meta.enumValues.map(function (ev) { return [ev.v, ev.l]; }));
+            if (Array.isArray(value))
+                return value
+                    .map(function (v) { var _a; return (_a = enumMap_1.get(v)) !== null && _a !== void 0 ? _a : v; })
+                    .join(", ");
+            return (_b = enumMap_1.get(value)) !== null && _b !== void 0 ? _b : String(value);
+        }
+        if (operator === "between" && Array.isArray(value))
+            return "".concat(value[0], " ").concat(t.betweenSeparator, " ").concat(value[1]);
+        if (operator === "withinLastDays" || operator === "beforeDays")
+            return "".concat(value, " dias");
+        if (Array.isArray(value))
+            return value.join(", ");
+        return String(value);
+    };
+    var translateRule = function (rule) {
+        var _a, _b;
+        var meta = fieldMap.get(rule.field);
+        var fieldLabel = (_a = meta === null || meta === void 0 ? void 0 : meta.label) !== null && _a !== void 0 ? _a : rule.field;
+        var opLabel = (_b = opLabels[rule.operator]) !== null && _b !== void 0 ? _b : rule.operator;
+        var val = humanValue(rule.field, rule.operator, rule.value);
+        return "".concat(fieldLabel, " ").concat(opLabel).concat(val ? " ".concat(val) : "");
+    };
+    var translateGroup = function (grp, d) {
+        var conn = grp.operator === "AND"
+            ? " ".concat(t.andConnectorLabel, " ")
+            : " ".concat(t.orConnectorLabel, " ");
+        var parts = grp.rules.map(function (item) {
+            if (isSegmentationGroup(item))
+                return "(".concat(translateGroup(item), ")");
+            return translateRule(item);
+        });
+        if (!parts.length)
+            return t.noConditionsText;
+        return parts.join(conn);
+    };
+    if (!group.rules.length)
+        return null;
+    return (jsxs("div", { className: "seg-summary mt-4 p-4 bg-success-50 border border-success/20 rounded-xl", children: [jsx("div", { className: "text-sm font-semibold text-success-600 mb-1", children: t.filterSummaryTitle }), jsxs("div", { className: "text-sm text-default-700", children: [t.filterSummaryPrefix, " ", translateGroup(group)] })] }));
+};
+// ─── Main Component ────────────────────────────────────────────────
+var SegmentationBuilder = forwardRef(function (_a, ref) {
+    var fields = _a.fields, _b = _a.tags, tags = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.maxDepth, maxDepth = _c === void 0 ? 5 : _c, _d = _a.showSummary, showSummary = _d === void 0 ? true : _d, _e = _a.showJsonPreview, showJsonPreview = _e === void 0 ? false : _e, translations = _a.translations, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.isDisabled, isDisabled = _g === void 0 ? false : _g;
+    var t = useMemo(function () { return (__assign(__assign(__assign({}, DEFAULT_TRANSLATIONS$1), translations), { operatorLabels: __assign(__assign({}, DEFAULT_OPERATOR_LABELS), translations === null || translations === void 0 ? void 0 : translations.operatorLabels) })); }, [translations]);
+    var fMap = useMemo(function () { return buildFieldMap(fields); }, [fields]);
+    var tMap = useMemo(function () { return buildTagMap(tags); }, [tags]);
+    // Internal state
+    var _h = useState(function () {
+        if (value)
+            return groupToState(value);
+        return {
+            id: uid(),
+            type: "group",
+            operator: "AND",
+            rules: [createEmptyRule(fields)],
+        };
+    }), internalState = _h[0], setInternalState = _h[1];
+    var _j = useState(false), isJsonVisible = _j[0], setIsJsonVisible = _j[1];
+    // Sync from controlled value
+    var isControlled = value !== undefined;
+    var prevValueRef = useRef(value);
+    useEffect(function () {
+        if (isControlled && value && value !== prevValueRef.current) {
+            setInternalState(groupToState(value));
+            prevValueRef.current = value;
+        }
+    }, [value, isControlled]);
+    // Build the output filter
+    var currentFilter = useMemo(function () { return stateToGroup(internalState); }, [internalState]);
+    // Notify onChange on state change
+    var isFirstRender = useRef(true);
+    useEffect(function () {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(currentFilter);
+    }, [currentFilter, onChange]);
+    // Expose imperative handle
+    useImperativeHandle(ref, function () { return ({
+        getFilter: function () { return stateToGroup(internalState); },
+        getPayload: function () { return ({ filter: stateToGroup(internalState) }); },
+        reset: function () {
+            var newState = {
+                id: uid(),
+                type: "group",
+                operator: "AND",
+                rules: [createEmptyRule(fields)],
+            };
+            setInternalState(newState);
+        },
+    }); }, [internalState, fields]);
+    var handleGroupUpdate = useCallback(function (updated) {
+        setInternalState(updated);
+    }, []);
+    return (jsxs("div", { className: "seg-builder relative w-full min-w-0 ".concat(showJsonPreview ? "pr-10" : "", " ").concat(className), children: [showJsonPreview && (jsx(Button$1, { isIconOnly: true, size: "sm", variant: "light", className: "absolute top-0 right-0 z-10 text-default-500 hover:text-default-700", onPress: function () { return setIsJsonVisible(function (v) { return !v; }); }, "aria-expanded": isJsonVisible, "aria-label": isJsonVisible ? t.hideJsonLabel : t.showJsonLabel, title: isJsonVisible ? t.hideJsonLabel : t.showJsonLabel, children: isJsonVisible ? (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] })) : (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), jsx("circle", { cx: "12", cy: "12", r: "3" })] })) })), jsx(FilterGroup, { group: internalState, fields: fields, fieldMap: fMap, tags: tags, depth: 1, maxDepth: maxDepth, onUpdate: handleGroupUpdate, translations: t, isDisabled: isDisabled }), showSummary && (jsx(FilterSummary, { group: currentFilter, fieldMap: fMap, tagMap: tMap, translations: t })), showJsonPreview && isJsonVisible && (jsx("div", { className: "seg-json-preview mt-4", children: jsx("pre", { className: "p-4 bg-default-900 text-default-100 rounded-xl text-xs overflow-x-auto max-h-[300px] border border-default-700 [color-scheme:dark]", children: JSON.stringify({ filter: currentFilter }, null, 2) }) }))] }));
+});
+SegmentationBuilder.displayName = "SegmentationBuilder";
+
 var DEFAULT_TRANSLATIONS = {
     placeholder: "Nombre de la etiqueta",
     labelSelect: "Selecciona etiqueta",
@@ -6227,4 +6743,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, DEFAULT_PREDEFINED_COLORS, DatePicker, DateRangePicker, DateSelector, DrawerFilters, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, ScheduleRow, SearchInput, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, TwoColumnLayoutAgent, UploadFile, VerticalSteps, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, defaultTranslations$4 as defaultTranslations, generateThemeColorScale, getContrastForeground, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isExactThemeColor, isHexColor, removeCustomPrimaryColor, sizeMap, themeColors, useAuraToast, useMediaQuery, useNavigationLoading, useThemeContext };
+export { AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, DEFAULT_PREDEFINED_COLORS, DatePicker, DateRangePicker, DateSelector, DrawerFilters, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, TwoColumnLayoutAgent, UploadFile, VerticalSteps, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, uniqueCountries as defaultCountries, defaultTranslations$4 as defaultTranslations, generateThemeColorScale, getContrastForeground, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isExactThemeColor, isGroupState, isHexColor, isSegmentationGroup, removeCustomPrimaryColor, sizeMap, themeColors, useAuraToast, useMediaQuery, useNavigationLoading, useThemeContext };