@l3mpire/ui 2.8.0 → 2.9.1

package/dist/index.mjs

@@ -6318,68 +6318,82 @@ InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
 import * as React48 from "react";
+import { Icon as Icon33, faXmarkOutline as faXmarkOutline4 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-chip.tsx
 import * as React43 from "react";
 import { Icon as Icon29, faXmarkOutline as faXmarkOutline2 } from "@l3mpire/icons";
-import { Fragment as Fragment4, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+var btnBase = [
+  "flex items-center justify-center",
+  "min-h-[32px] max-h-[32px]",
+  "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+  "border border-[var(--color-btn-outlined-neutral-border-default)] shadow-sm",
+  "cursor-pointer transition-colors",
+  "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+];
 var AdvancedChip = React43.forwardRef(
-  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs41(
-    "div",
-    {
-      className: cn(
-        "inline-flex items-center overflow-clip",
-        "bg-[var(--color-primary)]/5 border border-[var(--color-primary)]/30 rounded-md",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs41(
-          "button",
-          {
-            ref,
-            type: "button",
-            onClick,
-            className: "flex items-center gap-sm px-base py-sm cursor-pointer transition-colors hover:bg-[var(--color-primary)]/10",
-            ...props,
-            children: [
-              /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-primary)]", children: "Advanced filter" }),
-              /* @__PURE__ */ jsx46("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx46("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
-            ]
-          }
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ jsxs41("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsxs41(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick,
+        className: cn(
+          btnBase,
+          "gap-sm px-base py-sm min-w-[80px]",
+          "rounded-l-md -mr-px"
         ),
-        onClear && /* @__PURE__ */ jsxs41(Fragment4, { children: [
-          /* @__PURE__ */ jsx46("span", { className: "w-px h-4 bg-[var(--color-primary)]/20" }),
-          /* @__PURE__ */ jsx46(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.stopPropagation();
-                onClear();
-              },
-              className: "flex items-center justify-center p-sm cursor-pointer transition-colors hover:bg-[var(--color-primary)]/10",
-              "aria-label": "Clear all advanced filters",
-              children: /* @__PURE__ */ jsx46(Icon29, { icon: faXmarkOutline2, size: "xs", className: "text-[var(--color-primary)]" })
-            }
-          )
-        ] })
-      ]
-    }
-  )
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
+          /* @__PURE__ */ jsx46("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx46("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+        ]
+      }
+    ),
+    onClear && /* @__PURE__ */ jsx46(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onClear();
+        },
+        className: cn(
+          btnBase,
+          "p-sm",
+          "rounded-r-md -ml-px"
+        ),
+        "aria-label": "Clear all advanced filters",
+        children: /* @__PURE__ */ jsx46(Icon29, { icon: faXmarkOutline2, size: "sm", className: "text-[var(--color-foreground)]" })
+      }
+    )
+  ] })
 );
 AdvancedChip.displayName = "AdvancedChip";
 
 // src/components/ui/filter/advanced-popover.tsx
 import * as React45 from "react";
 import * as PopoverPrimitive10 from "@radix-ui/react-popover";
+import { Icon as Icon31, faPlusOutline as faPlusOutline2 } from "@l3mpire/icons";
 
 // src/components/ui/filter/advanced-row.tsx
 import * as React44 from "react";
 import * as PopoverPrimitive9 from "@radix-ui/react-popover";
-import { Icon as Icon30, faEllipsisVerticalOutline, faRefreshOutline } from "@l3mpire/icons";
+import { Icon as Icon30, faXmarkOutline as faXmarkOutline3, faRefreshOutline, faChevronDownOutline as faChevronDownOutline2 } from "@l3mpire/icons";
 import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+var selectBtnStyle = [
+  "flex items-center gap-base",
+  "px-base py-sm",
+  "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+  "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+  "cursor-pointer transition-colors",
+  "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+];
 var AdvancedRow = ({
   connector,
+  onConnectorToggle,
   propertyDef,
   condition,
   properties,
@@ -6388,7 +6402,6 @@ var AdvancedRow = ({
   onDelete
 }) => {
   const [operatorOpen, setOperatorOpen] = React44.useState(false);
-  const [valueOpen, setValueOpen] = React44.useState(false);
   const [propertyOpen, setPropertyOpen] = React44.useState(false);
   const handleOperatorSelect = (op) => {
     if (isNoValueOperator(op)) {
@@ -6403,46 +6416,36 @@ var AdvancedRow = ({
     onUpdate({ ...condition, value: val });
   };
   const displayValue = condition.value == null ? "" : typeof condition.value === "string" ? condition.value : String(condition.value);
-  const groupedProps = React44.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const p of properties) {
-      const arr = map.get(p.group) ?? [];
-      arr.push(p);
-      map.set(p.group, arr);
-    }
-    return map;
-  }, [properties]);
-  return /* @__PURE__ */ jsxs42("div", { className: "group flex items-center gap-base py-xs", children: [
-    /* @__PURE__ */ jsx47(
-      "span",
+  return /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-base w-full", children: [
+    connector === "Where" ? /* @__PURE__ */ jsx47("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ jsx47("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ jsxs42(
+      "button",
       {
+        type: "button",
+        onClick: onConnectorToggle,
         className: cn(
-          "shrink-0 w-[52px] text-xs font-medium leading-xs text-right",
-          connector === "Where" ? "text-[var(--color-muted-foreground)]" : "text-[var(--color-muted-foreground)]"
+          "shrink-0 flex items-center justify-center gap-xs",
+          "min-w-[64px] min-h-[24px] max-h-[24px] p-xs",
+          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-base shadow-sm",
+          "cursor-pointer transition-colors text-xs font-medium leading-xs text-[var(--color-foreground)]",
+          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
         ),
-        children: /* @__PURE__ */ jsxs42("span", { className: "flex items-center justify-end gap-2xs", children: [
+        children: [
           connector,
-          connector === "And" && /* @__PURE__ */ jsx47(Icon30, { icon: faRefreshOutline, size: "xs", className: "text-[var(--color-muted-foreground)]" })
-        ] })
+          /* @__PURE__ */ jsx47(Icon30, { icon: faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+        ]
       }
     ),
     /* @__PURE__ */ jsxs42(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ jsx47(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs42(
-        "button",
-        {
-          type: "button",
-          className: "flex items-center gap-xs px-base py-sm rounded-base border border-[var(--color-input)] bg-[var(--color-background)] cursor-pointer hover:bg-[var(--color-accent)] transition-colors",
-          children: [
-            /* @__PURE__ */ jsx47(Icon30, { icon: propertyDef.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
-            /* @__PURE__ */ jsxs42("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap", children: [
-              propertyDef.groupLabel,
-              " \u203A ",
-              propertyDef.label
-            ] }),
-            /* @__PURE__ */ jsx47("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "currentColor", className: "text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsx47("path", { d: "M2.5 4L5 6.5L7.5 4", stroke: "currentColor", strokeWidth: "1.2", fill: "none", strokeLinecap: "round" }) })
-          ]
-        }
-      ) }),
+      /* @__PURE__ */ jsx47(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs42("button", { type: "button", className: cn(selectBtnStyle, "shrink-0 min-w-[80px]"), children: [
+        /* @__PURE__ */ jsx47(Icon30, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
+        /* @__PURE__ */ jsxs42("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap", children: [
+          propertyDef.groupLabel,
+          " > ",
+          propertyDef.label
+        ] }),
+        /* @__PURE__ */ jsx47(Icon30, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+      ] }) }),
       /* @__PURE__ */ jsx47(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx47(
         PopoverPrimitive9.Content,
         {
@@ -6455,7 +6458,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
           ),
-          children: Array.from(groupedProps.entries()).map(([group, props]) => /* @__PURE__ */ jsx47("div", { className: "flex flex-col", children: props.map((p) => /* @__PURE__ */ jsxs42(
+          children: properties.map((p) => /* @__PURE__ */ jsxs42(
             "button",
             {
               type: "button",
@@ -6474,22 +6477,15 @@ var AdvancedRow = ({
               ]
             },
             p.id
-          )) }, group))
+          ))
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxs42(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ jsx47(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs42(
-        "button",
-        {
-          type: "button",
-          className: "flex items-center gap-xs px-base py-sm rounded-base border border-[var(--color-input)] bg-[var(--color-background)] cursor-pointer hover:bg-[var(--color-accent)] transition-colors",
-          children: [
-            /* @__PURE__ */ jsx47("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap", children: condition.operator ?? "select" }),
-            /* @__PURE__ */ jsx47("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "currentColor", className: "text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsx47("path", { d: "M2.5 4L5 6.5L7.5 4", stroke: "currentColor", strokeWidth: "1.2", fill: "none", strokeLinecap: "round" }) })
-          ]
-        }
-      ) }),
+      /* @__PURE__ */ jsx47(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs42("button", { type: "button", className: cn(selectBtnStyle, "shrink-0 w-[103px]"), children: [
+        /* @__PURE__ */ jsx47("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ jsx47(Icon30, { icon: faChevronDownOutline2, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+      ] }) }),
       /* @__PURE__ */ jsx47(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ jsx47(
         PopoverPrimitive9.Content,
         {
@@ -6519,9 +6515,10 @@ var AdvancedRow = ({
         type: "text",
         value: displayValue,
         onChange: (e) => handleValueChange(e.target.value),
-        placeholder: "Enter value...",
+        placeholder: "Placeholder",
         className: cn(
-          "flex-1 min-w-[100px] px-base py-sm rounded-base border border-[var(--color-input)]",
+          "w-[160px] shrink-0 px-base py-sm rounded-md",
+          "border border-[var(--color-input)]",
           "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
           "placeholder:text-[var(--color-muted-foreground)]",
           "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
@@ -6533,9 +6530,9 @@ var AdvancedRow = ({
       {
         type: "button",
         onClick: onDelete,
-        className: "shrink-0 flex items-center justify-center p-sm rounded-base opacity-0 group-hover:opacity-100 cursor-pointer transition-opacity hover:bg-[var(--color-accent)]",
+        className: "ml-auto shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
         "aria-label": "Remove filter",
-        children: /* @__PURE__ */ jsx47(Icon30, { icon: faEllipsisVerticalOutline, size: "sm", className: "text-[var(--color-muted-foreground)]" })
+        children: /* @__PURE__ */ jsx47(Icon30, { icon: faXmarkOutline3, size: "sm", className: "text-[var(--color-foreground)]" })
       }
     )
   ] });
@@ -6544,6 +6541,14 @@ AdvancedRow.displayName = "AdvancedRow";
 
 // src/components/ui/filter/advanced-popover.tsx
 import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+var outlinedBtn = [
+  "flex items-center gap-sm px-base py-sm",
+  "min-h-[32px] max-h-[32px] min-w-[80px]",
+  "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+  "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+  "cursor-pointer transition-colors text-sm font-medium leading-sm text-[var(--color-foreground)]",
+  "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+];
 var AdvancedPopover = ({
   filters,
   properties,
@@ -6553,6 +6558,7 @@ var AdvancedPopover = ({
   children
 }) => {
   const [addSelectorOpen, setAddSelectorOpen] = React45.useState(false);
+  const [logicOps, setLogicOps] = React45.useState({});
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const handleUpdateFilter = (updated) => {
     onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
@@ -6575,6 +6581,12 @@ var AdvancedPopover = ({
     onFiltersChange([]);
     onOpenChange?.(false);
   };
+  const toggleLogicOp = (filterId) => {
+    setLogicOps((prev) => ({
+      ...prev,
+      [filterId]: (prev[filterId] ?? "and") === "and" ? "or" : "and"
+    }));
+  };
   return /* @__PURE__ */ jsxs43(PopoverPrimitive10.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx48(PopoverPrimitive10.Trigger, { asChild: true, children }),
     /* @__PURE__ */ jsx48(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ jsxs43(
@@ -6583,22 +6595,22 @@ var AdvancedPopover = ({
         sideOffset: 4,
         align: "start",
         className: cn(
-          "z-50 flex flex-col overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "z-50 flex flex-col",
+          "bg-[var(--color-background)] rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          "data-[side=bottom]:slide-in-from-top-2",
-          "min-w-[520px] max-w-[90vw]"
+          "data-[side=bottom]:slide-in-from-top-2"
         ),
         children: [
-          /* @__PURE__ */ jsxs43("div", { className: "flex flex-col px-base pt-base", children: [
+          /* @__PURE__ */ jsxs43("div", { className: "flex flex-col gap-base p-base", children: [
             filters.map((filter, i) => {
               const propDef = getPropertyDef(filter.propertyId);
               if (!propDef) return null;
               return /* @__PURE__ */ jsx48(
                 AdvancedRow,
                 {
-                  connector: i === 0 ? "Where" : "And",
+                  connector: i === 0 ? "Where" : (logicOps[filter.id] ?? "and") === "and" ? "And" : "Or",
+                  onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
                   propertyDef: propDef,
                   condition: filter,
                   properties,
@@ -6611,7 +6623,7 @@ var AdvancedPopover = ({
             }),
             filters.length === 0 && /* @__PURE__ */ jsx48("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No advanced filters yet." })
           ] }),
-          /* @__PURE__ */ jsxs43("div", { className: "flex items-center justify-between px-base py-base border-t border-[var(--color-border)]", children: [
+          /* @__PURE__ */ jsxs43("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
             /* @__PURE__ */ jsx48(
               PropertySelector,
               {
@@ -6619,14 +6631,10 @@ var AdvancedPopover = ({
                 onSelect: handleAddFilter,
                 open: addSelectorOpen,
                 onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ jsx48(
-                  "button",
-                  {
-                    type: "button",
-                    className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
-                    children: "+ Add filter"
-                  }
-                )
+                children: /* @__PURE__ */ jsxs43("button", { type: "button", className: cn(outlinedBtn), children: [
+                  /* @__PURE__ */ jsx48(Icon31, { icon: faPlusOutline2, size: "sm", className: "text-[var(--color-foreground)]" }),
+                  "Add filter"
+                ] })
               }
             ),
             /* @__PURE__ */ jsx48(
@@ -6634,7 +6642,7 @@ var AdvancedPopover = ({
               {
                 type: "button",
                 onClick: handleClearAll,
-                className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                className: "text-sm font-medium leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
                 children: "Clear all filters"
               }
             )
@@ -6649,7 +6657,7 @@ AdvancedPopover.displayName = "AdvancedPopover";
 // src/components/ui/filter/summary-chip.tsx
 import * as React46 from "react";
 import * as PopoverPrimitive11 from "@radix-ui/react-popover";
-import { Icon as Icon31, faFilterOutline as faFilterOutline2, faPlusOutline as faPlusOutline2 } from "@l3mpire/icons";
+import { Icon as Icon32, faSlidersOutline as faSlidersOutline2, faPlusOutline as faPlusOutline3 } from "@l3mpire/icons";
 import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
 var SummaryChip = ({
   count,
@@ -6661,6 +6669,7 @@ var SummaryChip = ({
 }) => {
   const [open, setOpen] = React46.useState(false);
   const [addSelectorOpen, setAddSelectorOpen] = React46.useState(false);
+  const [logicOps, setLogicOps] = React46.useState({});
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const handleUpdateFilter = (updated) => {
     onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
@@ -6689,24 +6698,23 @@ var SummaryChip = ({
         className: cn(
           "inline-flex items-center gap-sm px-base py-sm",
           "min-h-[32px] max-h-[32px]",
-          count > 0 ? "bg-[var(--color-primary)]/5 border border-[var(--color-primary)]/30 text-[var(--color-primary)]" : "bg-filter-chip-bg border border-filter-chip-border text-[var(--color-foreground)]",
-          "rounded-md text-sm font-medium leading-sm",
-          "cursor-pointer transition-colors hover:opacity-80",
+          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+          "cursor-pointer transition-colors",
+          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
           className
         ),
         children: [
           /* @__PURE__ */ jsx49(
-            Icon31,
+            Icon32,
             {
-              icon: faFilterOutline2,
+              icon: faSlidersOutline2,
               size: "sm",
-              className: count > 0 ? "text-[var(--color-primary)]" : "text-[var(--color-muted-foreground)]"
+              className: "shrink-0 text-[var(--color-foreground)]"
             }
           ),
-          /* @__PURE__ */ jsxs44("span", { className: "whitespace-nowrap", children: [
-            "Filters",
-            count > 0 && ` (${count})`
-          ] })
+          /* @__PURE__ */ jsx49("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+          count > 0 && /* @__PURE__ */ jsx49("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx49("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ) }),
@@ -6724,14 +6732,15 @@ var SummaryChip = ({
           "min-w-[420px] max-w-[90vw]"
         ),
         children: [
-          /* @__PURE__ */ jsxs44("div", { className: "flex flex-col px-base pt-base", children: [
+          /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-base p-base", children: [
             filters.map((filter, i) => {
               const propDef = getPropertyDef(filter.propertyId);
               if (!propDef) return null;
               return /* @__PURE__ */ jsx49(
                 AdvancedRow,
                 {
-                  connector: i === 0 ? "Where" : "And",
+                  connector: i === 0 ? "Where" : (logicOps[filter.id] ?? "and") === "and" ? "And" : "Or",
+                  onConnectorToggle: i > 0 ? () => setLogicOps((prev) => ({ ...prev, [filter.id]: (prev[filter.id] ?? "and") === "and" ? "or" : "and" })) : void 0,
                   propertyDef: propDef,
                   condition: filter,
                   properties,
@@ -6744,7 +6753,7 @@ var SummaryChip = ({
             }),
             filters.length === 0 && /* @__PURE__ */ jsx49("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No active filters." })
           ] }),
-          /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between px-base py-base border-t border-[var(--color-border)]", children: [
+          /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
             /* @__PURE__ */ jsx49(
               PropertySelector,
               {
@@ -6756,9 +6765,16 @@ var SummaryChip = ({
                   "button",
                   {
                     type: "button",
-                    className: "flex items-center gap-xs text-sm font-regular leading-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                    className: cn(
+                      "flex items-center gap-sm px-base py-sm",
+                      "min-h-[32px] max-h-[32px] min-w-[80px]",
+                      "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
+                      "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+                      "cursor-pointer transition-colors text-sm font-medium leading-sm text-[var(--color-foreground)]",
+                      "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+                    ),
                     children: [
-                      /* @__PURE__ */ jsx49(Icon31, { icon: faPlusOutline2, size: "xs" }),
+                      /* @__PURE__ */ jsx49(Icon32, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
                       "Add filter"
                     ]
                   }
@@ -6773,7 +6789,7 @@ var SummaryChip = ({
                   onClearAll();
                   setOpen(false);
                 },
-                className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                className: "text-sm font-medium leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
                 children: "Clear all filters"
               }
             )
@@ -6804,7 +6820,7 @@ function useFilterBarMode(ref, override) {
 }
 
 // src/components/ui/filter/filter-system.tsx
-import { Fragment as Fragment5, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
 var FilterSystem = ({
   properties,
   filterState,
@@ -6939,7 +6955,7 @@ var FilterSystem = ({
         )
       ) : (
         /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ jsxs45(Fragment5, { children: [
+        /* @__PURE__ */ jsxs45(Fragment4, { children: [
           hasAdvanced && /* @__PURE__ */ jsx50(
             AdvancedPopover,
             {
@@ -6993,6 +7009,15 @@ var FilterSystem = ({
             }
           )
         ] })
+      ),
+      totalCount > 0 && /* @__PURE__ */ jsx50(
+        "button",
+        {
+          type: "button",
+          onClick: handleClearAll,
+          className: "flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
+          children: isMinimal ? /* @__PURE__ */ jsx50(Icon33, { icon: faXmarkOutline4, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ jsx50("span", { className: "text-sm font-medium leading-sm text-[var(--color-foreground)]", children: "Clear" })
+        }
       )
     ] }),
     actions && /* @__PURE__ */ jsx50(FilterBarRight, { children: actions })
@@ -7004,7 +7029,7 @@ FilterSystem.displayName = "FilterSystem";
 import * as React49 from "react";
 import * as PopoverPrimitive12 from "@radix-ui/react-popover";
 import {
-  Icon as Icon32,
+  Icon as Icon34,
   faChevronLeftOutline as faChevronLeftOutline3,
   faChevronRightOutline as faChevronRightOutline3,
   faArrowRightOutline as faArrowRightOutline2,
@@ -7177,10 +7202,10 @@ var DatePickerSelects = React49.forwardRef(({ className, formatDate = defaultFor
       children: /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-base w-full", children: [
         /* @__PURE__ */ jsxs46("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
           /* @__PURE__ */ jsx51("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ jsx51(Icon32, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+          /* @__PURE__ */ jsx51(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] }),
         /* @__PURE__ */ jsx51(
-          Icon32,
+          Icon34,
           {
             icon: faArrowRightOutline2,
             size: "sm",
@@ -7189,7 +7214,7 @@ var DatePickerSelects = React49.forwardRef(({ className, formatDate = defaultFor
         ),
         /* @__PURE__ */ jsxs46("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
           /* @__PURE__ */ jsx51("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ jsx51(Icon32, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+          /* @__PURE__ */ jsx51(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] })
       ] })
     }
@@ -7299,7 +7324,7 @@ var DatePickerCalendar = React49.forwardRef(({ className, header, ...props }, re
                   onClick: goToPrevMonth,
                   className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
                   "aria-label": "Previous month",
-                  children: /* @__PURE__ */ jsx51(Icon32, { icon: faChevronLeftOutline3, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ jsx51(Icon34, { icon: faChevronLeftOutline3, size: "xs", className: "text-datepicker-header-nav" })
                 }
               ),
               /* @__PURE__ */ jsx51(
@@ -7309,7 +7334,7 @@ var DatePickerCalendar = React49.forwardRef(({ className, header, ...props }, re
                   onClick: goToNextMonth,
                   className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
                   "aria-label": "Next month",
-                  children: /* @__PURE__ */ jsx51(Icon32, { icon: faChevronRightOutline3, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ jsx51(Icon34, { icon: faChevronRightOutline3, size: "xs", className: "text-datepicker-header-nav" })
                 }
               )
             ] })