@l3mpire/ui 2.7.2 → 2.9.0

package/dist/index.js

@@ -115,6 +115,7 @@ __export(index_exports, {
   SidebarSection: () => SidebarSection,
   SortButton: () => SortButton,
   StatusCell: () => StatusCell,
+  SummaryChip: () => SummaryChip,
   Switch: () => Switch,
   TabContent: () => TabContent,
   TabList: () => TabList,
@@ -169,6 +170,7 @@ __export(index_exports, {
   toastVariants: () => toastVariants,
   tooltipContentVariants: () => tooltipContentVariants,
   typographyVariants: () => typographyVariants,
+  useFilterBarMode: () => useFilterBarMode,
   useSidebarContext: () => useSidebarContext
 });
 module.exports = __toCommonJS(index_exports);
@@ -4968,7 +4970,7 @@ var FilterChip = React35.forwardRef(
         ref,
         className: cn(
           "flex items-center overflow-clip",
-          "bg-filter-chip-bg border border-filter-chip-border rounded-md",
+          "bg-filter-chip-bg border border-filter-chip-border rounded-md shadow-sm",
           className
         ),
         ...props,
@@ -5154,6 +5156,7 @@ var SortButton = ({
   activeField,
   direction,
   onChange,
+  iconOnly = false,
   ...props
 }) => {
   const [open, setOpen] = React37.useState(false);
@@ -5165,12 +5168,13 @@ var SortButton = ({
       {
         type: "button",
         className: cn(
-          "flex items-center gap-xs px-md py-sm",
-          "min-h-[32px] max-h-[32px] min-w-[80px]",
+          "flex items-center gap-xs",
+          "min-h-[32px] max-h-[32px]",
           "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)]",
+          iconOnly ? "size-8 justify-center p-0" : "px-md py-sm min-w-[80px]",
           className
         ),
         children: [
@@ -5182,7 +5186,7 @@ var SortButton = ({
               className: "shrink-0 text-[var(--color-foreground)]"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
+          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
             /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-[var(--color-muted-foreground)]", children: [
               "Sort by",
               " "
@@ -5335,18 +5339,19 @@ SortButton.displayName = "SortButton";
 var React38 = __toESM(require("react"));
 var import_icons25 = require("@l3mpire/icons");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var FilterBarButton = React38.forwardRef(({ className, count, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+var FilterBarButton = React38.forwardRef(({ className, count, iconOnly = false, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   "button",
   {
     ref,
     type: "button",
     className: cn(
-      "flex items-center gap-sm px-base py-sm",
-      "min-h-[32px] max-h-[32px] min-w-[80px]",
+      "flex items-center gap-sm",
+      "min-h-[32px] max-h-[32px]",
       "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)]",
+      iconOnly ? count ? "px-sm justify-center" : "size-8 justify-center p-0" : "px-base py-sm min-w-[80px]",
       className
     ),
     ...props,
@@ -5359,7 +5364,7 @@ var FilterBarButton = React38.forwardRef(({ className, count, children, ...props
           className: "shrink-0 text-[var(--color-foreground)]"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
+      !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
       count != null && count > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
     ]
   }
@@ -6300,7 +6305,7 @@ var InteractiveFilterChip = ({
     {
       className: cn(
         "inline-flex items-center overflow-clip",
-        "bg-filter-chip-bg border border-filter-chip-border rounded-md",
+        "bg-filter-chip-bg border border-filter-chip-border rounded-md shadow-sm",
         className
       ),
       children: [
@@ -6422,69 +6427,83 @@ var InteractiveFilterChip = ({
 InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
-var React46 = __toESM(require("react"));
+var React48 = __toESM(require("react"));
+var import_icons34 = require("@l3mpire/icons");
 
 // src/components/ui/filter/advanced-chip.tsx
 var React43 = __toESM(require("react"));
 var import_icons30 = require("@l3mpire/icons");
 var import_jsx_runtime46 = require("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__ */ (0, import_jsx_runtime46.jsxs)(
-    "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__ */ (0, import_jsx_runtime46.jsxs)(
-          "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__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-primary)]", children: "Advanced filter" }),
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
-            ]
-          }
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick,
+        className: cn(
+          btnBase,
+          "gap-sm px-base py-sm min-w-[80px]",
+          "rounded-l-md -mr-px"
         ),
-        onClear && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "w-px h-4 bg-[var(--color-primary)]/20" }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            "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__ */ (0, import_jsx_runtime46.jsx)(import_icons30.Icon, { icon: import_icons30.faXmarkOutline, size: "xs", className: "text-[var(--color-primary)]" })
-            }
-          )
-        ] })
-      ]
-    }
-  )
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+        ]
+      }
+    ),
+    onClear && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "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__ */ (0, import_jsx_runtime46.jsx)(import_icons30.Icon, { icon: import_icons30.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
+      }
+    )
+  ] })
 );
 AdvancedChip.displayName = "AdvancedChip";
 
 // src/components/ui/filter/advanced-popover.tsx
 var React45 = __toESM(require("react"));
 var PopoverPrimitive10 = __toESM(require("@radix-ui/react-popover"));
+var import_icons32 = require("@l3mpire/icons");
 
 // src/components/ui/filter/advanced-row.tsx
 var React44 = __toESM(require("react"));
 var PopoverPrimitive9 = __toESM(require("@radix-ui/react-popover"));
 var import_icons31 = require("@l3mpire/icons");
 var import_jsx_runtime47 = require("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,
@@ -6493,7 +6512,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)) {
@@ -6508,46 +6526,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__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "group flex items-center gap-base py-xs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      "span",
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      "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__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "flex items-center justify-end gap-2xs", children: [
+        children: [
           connector,
-          connector === "And" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: import_icons31.faRefreshOutline, size: "xs", className: "text-[var(--color-muted-foreground)]" })
-        ] })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: import_icons31.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+        ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-        "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__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: propertyDef.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap", children: [
-              propertyDef.groupLabel,
-              " \u203A ",
-              propertyDef.label
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "currentColor", className: "text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M2.5 4L5 6.5L7.5 4", stroke: "currentColor", strokeWidth: "1.2", fill: "none", strokeLinecap: "round" }) })
-          ]
-        }
-      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "shrink-0 min-w-[80px]"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap", children: [
+          propertyDef.groupLabel,
+          " > ",
+          propertyDef.label
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: import_icons31.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+      ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         PopoverPrimitive9.Content,
         {
@@ -6560,7 +6568,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__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-col", children: props.map((p) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+          children: properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
             "button",
             {
               type: "button",
@@ -6579,22 +6587,15 @@ var AdvancedRow = ({
               ]
             },
             p.id
-          )) }, group))
+          ))
         }
       ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-        "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__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap", children: condition.operator ?? "select" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "currentColor", className: "text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M2.5 4L5 6.5L7.5 4", stroke: "currentColor", strokeWidth: "1.2", fill: "none", strokeLinecap: "round" }) })
-          ]
-        }
-      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "shrink-0 w-[103px]"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: import_icons31.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+      ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         PopoverPrimitive9.Content,
         {
@@ -6624,9 +6625,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"
@@ -6638,9 +6640,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__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: import_icons31.faEllipsisVerticalOutline, size: "sm", className: "text-[var(--color-muted-foreground)]" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: import_icons31.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
       }
     )
   ] });
@@ -6649,6 +6651,14 @@ AdvancedRow.displayName = "AdvancedRow";
 
 // src/components/ui/filter/advanced-popover.tsx
 var import_jsx_runtime48 = require("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,
@@ -6658,6 +6668,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));
@@ -6680,6 +6691,12 @@ var AdvancedPopover = ({
     onFiltersChange([]);
     onOpenChange?.(false);
   };
+  const toggleLogicOp = (filterId) => {
+    setLogicOps((prev) => ({
+      ...prev,
+      [filterId]: (prev[filterId] ?? "and") === "and" ? "or" : "and"
+    }));
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PopoverPrimitive10.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children }),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
@@ -6688,22 +6705,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__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col px-base pt-base", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsx)(
                 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,
@@ -6716,7 +6733,7 @@ var AdvancedPopover = ({
             }),
             filters.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No advanced filters yet." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between px-base py-base border-t border-[var(--color-border)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               PropertySelector,
               {
@@ -6724,22 +6741,165 @@ var AdvancedPopover = ({
                 onSelect: handleAddFilter,
                 open: addSelectorOpen,
                 onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("button", { type: "button", className: cn(outlinedBtn), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons32.Icon, { icon: import_icons32.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                  "Add filter"
+                ] })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleClearAll,
+                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"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+AdvancedPopover.displayName = "AdvancedPopover";
+
+// src/components/ui/filter/summary-chip.tsx
+var React46 = __toESM(require("react"));
+var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
+var import_icons33 = require("@l3mpire/icons");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var SummaryChip = ({
+  count,
+  filters,
+  properties,
+  onFiltersChange,
+  onClearAll,
+  className
+}) => {
+  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));
+  };
+  const handleDeleteFilter = (id) => {
+    const next = filters.filter((f) => f.id !== id);
+    onFiltersChange(next);
+    if (next.length === 0) setOpen(false);
+  };
+  const handlePropertyChange = (filterId, newProp) => {
+    const newCondition = createFilterWithDefaults(newProp.id, newProp.type);
+    onFiltersChange(
+      filters.map((f) => f.id === filterId ? { ...newCondition, id: filterId } : f)
+    );
+  };
+  const handleAddFilter = (property) => {
+    const newFilter = createFilterWithDefaults(property.id, property.type);
+    onFiltersChange([...filters, newFilter]);
+    setAddSelectorOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PopoverPrimitive11.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "inline-flex items-center gap-sm px-base py-sm",
+          "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)] 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__ */ (0, import_jsx_runtime49.jsx)(
+            import_icons33.Icon,
+            {
+              icon: import_icons33.faSlidersOutline,
+              size: "sm",
+              className: "shrink-0 text-[var(--color-foreground)]"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      PopoverPrimitive11.Content,
+      {
+        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",
+          "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-[420px] max-w-[90vw]"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("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__ */ (0, import_jsx_runtime49.jsx)(
+                AdvancedRow,
+                {
+                  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,
+                  onUpdate: handleUpdateFilter,
+                  onPropertyChange: (p) => handlePropertyChange(filter.id, p),
+                  onDelete: () => handleDeleteFilter(filter.id)
+                },
+                filter.id
+              );
+            }),
+            filters.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No active filters." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              PropertySelector,
+              {
+                properties,
+                onSelect: handleAddFilter,
+                open: addSelectorOpen,
+                onOpenChange: setAddSelectorOpen,
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
                   "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"
+                    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__ */ (0, import_jsx_runtime49.jsx)(import_icons33.Icon, { icon: import_icons33.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                      "Add filter"
+                    ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               "button",
               {
                 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",
+                onClick: () => {
+                  onClearAll();
+                  setOpen(false);
+                },
+                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"
               }
             )
@@ -6749,22 +6909,45 @@ var AdvancedPopover = ({
     ) })
   ] });
 };
-AdvancedPopover.displayName = "AdvancedPopover";
+SummaryChip.displayName = "SummaryChip";
+
+// src/components/ui/filter/use-filter-bar-mode.ts
+var React47 = __toESM(require("react"));
+function useFilterBarMode(ref, override) {
+  const [mode, setMode] = React47.useState("default");
+  React47.useEffect(() => {
+    if (override) return;
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? 0;
+      setMode(width > 600 ? "default" : "minimal");
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, override]);
+  return override ?? mode;
+}
 
 // src/components/ui/filter/filter-system.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var FilterSystem = ({
   properties,
   filterState,
   onFilterStateChange,
   sortFields,
+  mode: modeOverride,
   children,
   actions,
   className
 }) => {
-  const [propertySelectorOpen, setPropertySelectorOpen] = React46.useState(false);
-  const [advancedOpen, setAdvancedOpen] = React46.useState(false);
-  const [pendingFilterId, setPendingFilterId] = React46.useState(null);
+  const containerRef = React48.useRef(null);
+  const mode = useFilterBarMode(containerRef, modeOverride);
+  const [propertySelectorOpen, setPropertySelectorOpen] = React48.useState(false);
+  const [advancedOpen, setAdvancedOpen] = React48.useState(false);
+  const [pendingFilterId, setPendingFilterId] = React48.useState(null);
+  const allFilters = [...filterState.basicFilters, ...filterState.advancedFilters];
+  const totalCount = allFilters.length;
   const handleAddFilter = (property) => {
     const newFilter = createFilterWithDefaults(property.id, property.type);
     if (newFilter.operator && isNoValueOperator(newFilter.operator)) {
@@ -6819,100 +7002,146 @@ var FilterSystem = ({
     });
   };
   const handleAdvancedFiltersChange = (filters) => {
-    onFilterStateChange({
-      ...filterState,
-      advancedFilters: filters
-    });
+    onFilterStateChange({ ...filterState, advancedFilters: filters });
   };
   const handleClearAdvanced = () => {
+    onFilterStateChange({ ...filterState, advancedFilters: [] });
+  };
+  const handleClearAll = () => {
     onFilterStateChange({
       ...filterState,
+      basicFilters: [],
       advancedFilters: []
     });
   };
   const handleSortChange = (field, direction) => {
-    onFilterStateChange({
-      ...filterState,
-      sort: { field, direction }
-    });
+    onFilterStateChange({ ...filterState, sort: { field, direction } });
   };
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const hasAdvanced = filterState.advancedFilters.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(FilterBar, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(FilterBarLeft, { children: [
+  const isMinimal = mode === "minimal";
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(FilterBar, { ref: containerRef, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(FilterBarLeft, { children: [
       children,
-      sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         SortButton,
         {
           fields: sortFields,
           activeField: filterState.sort.field,
           direction: filterState.sort.direction,
-          onChange: handleSortChange
+          onChange: handleSortChange,
+          iconOnly: isMinimal
         }
       ),
-      hasAdvanced && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        AdvancedPopover,
-        {
-          filters: filterState.advancedFilters,
-          properties,
-          onFiltersChange: handleAdvancedFiltersChange,
-          open: advancedOpen,
-          onOpenChange: setAdvancedOpen,
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            AdvancedChip,
-            {
-              count: filterState.advancedFilters.length,
-              onClick: () => setAdvancedOpen(true),
-              onClear: handleClearAdvanced
-            }
-          )
-        }
-      ),
-      filterState.basicFilters.map((filter) => {
-        const propDef = getPropertyDef(filter.propertyId);
-        if (!propDef) return null;
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          InteractiveFilterChip,
+      isMinimal ? totalCount > 0 ? (
+        /* Has filters → SummaryChip (interactive popover) */
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          SummaryChip,
           {
-            propertyDef: propDef,
-            condition: filter,
+            count: totalCount,
+            filters: allFilters,
             properties,
-            mode: pendingFilterId === filter.id ? "add" : "edit",
-            autoOpen: pendingFilterId === filter.id,
-            onUpdate: handleUpdateFilter,
-            onPropertyChange: (newProp) => handlePropertyChange(filter.id, newProp),
-            onDelete: () => handleDeleteFilter(filter.id),
-            onConvertToAdvanced: () => handleConvertToAdvanced(filter.id)
-          },
-          filter.id
-        );
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-        PropertySelector,
-        {
-          properties,
-          onSelect: handleAddFilter,
-          open: propertySelectorOpen,
-          onOpenChange: setPropertySelectorOpen,
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            FilterBarButton,
+            onFiltersChange: (filters) => {
+              onFilterStateChange({
+                ...filterState,
+                basicFilters: filters,
+                advancedFilters: []
+              });
+            },
+            onClearAll: handleClearAll
+          }
+        )
+      ) : (
+        /* No filters → same FilterBarButton as default, icon-only */
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          PropertySelector,
+          {
+            properties,
+            onSelect: handleAddFilter,
+            open: propertySelectorOpen,
+            onOpenChange: setPropertySelectorOpen,
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FilterBarButton, { iconOnly: true })
+          }
+        )
+      ) : (
+        /* ── DEFAULT MODE ────────────────────────────────────── */
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+          hasAdvanced && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            AdvancedPopover,
             {
-              count: filterState.basicFilters.length + filterState.advancedFilters.length || void 0
+              filters: filterState.advancedFilters,
+              properties,
+              onFiltersChange: handleAdvancedFiltersChange,
+              open: advancedOpen,
+              onOpenChange: setAdvancedOpen,
+              children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                AdvancedChip,
+                {
+                  count: filterState.advancedFilters.length,
+                  onClick: () => setAdvancedOpen(true),
+                  onClear: handleClearAdvanced
+                }
+              )
+            }
+          ),
+          filterState.basicFilters.map((filter) => {
+            const propDef = getPropertyDef(filter.propertyId);
+            if (!propDef) return null;
+            return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              InteractiveFilterChip,
+              {
+                propertyDef: propDef,
+                condition: filter,
+                properties,
+                mode: pendingFilterId === filter.id ? "add" : "edit",
+                autoOpen: pendingFilterId === filter.id,
+                onUpdate: handleUpdateFilter,
+                onPropertyChange: (newProp) => handlePropertyChange(filter.id, newProp),
+                onDelete: () => handleDeleteFilter(filter.id),
+                onConvertToAdvanced: () => handleConvertToAdvanced(filter.id)
+              },
+              filter.id
+            );
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            PropertySelector,
+            {
+              properties,
+              onSelect: handleAddFilter,
+              open: propertySelectorOpen,
+              onOpenChange: setPropertySelectorOpen,
+              children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                FilterBarButton,
+                {
+                  count: totalCount || void 0
+                }
+              )
             }
           )
-        }
+        ] })
       )
     ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FilterBarRight, { children: actions })
+    (actions || totalCount > 0) && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(FilterBarRight, { children: [
+      totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "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__ */ (0, import_jsx_runtime50.jsx)(import_icons34.Icon, { icon: import_icons34.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-medium leading-sm text-[var(--color-foreground)]", children: "Clear" })
+        }
+      ),
+      actions
+    ] })
   ] });
 };
 FilterSystem.displayName = "FilterSystem";
 
 // src/components/ui/date-picker.tsx
-var React47 = __toESM(require("react"));
-var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
-var import_icons32 = require("@l3mpire/icons");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var React49 = __toESM(require("react"));
+var PopoverPrimitive12 = __toESM(require("@radix-ui/react-popover"));
+var import_icons35 = require("@l3mpire/icons");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -6944,16 +7173,16 @@ var MONTH_NAMES = [
   "November",
   "December"
 ];
-var DatePickerContext = React47.createContext(
+var DatePickerContext = React49.createContext(
   null
 );
 function useDatePickerContext() {
-  const ctx = React47.useContext(DatePickerContext);
+  const ctx = React49.useContext(DatePickerContext);
   if (!ctx)
     throw new Error("DatePicker compound components must be used within <DatePicker>");
   return ctx;
 }
-var DatePicker = React47.forwardRef(
+var DatePicker = React49.forwardRef(
   ({
     className,
     mode = "single",
@@ -6964,22 +7193,22 @@ var DatePicker = React47.forwardRef(
     children,
     ...props
   }, ref) => {
-    const today = React47.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-    const initialDate = React47.useMemo(() => {
+    const today = React49.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+    const initialDate = React49.useMemo(() => {
       if (value) {
         if (value instanceof Date) return value;
         return value.from;
       }
       return today;
     }, []);
-    const [month, setMonth] = React47.useState(
+    const [month, setMonth] = React49.useState(
       defaultMonth ?? initialDate.getMonth()
     );
-    const [year, setYear] = React47.useState(
+    const [year, setYear] = React49.useState(
       defaultYear ?? initialDate.getFullYear()
     );
-    const [hoveredDate, setHoveredDate] = React47.useState();
-    const goToPrevMonth = React47.useCallback(() => {
+    const [hoveredDate, setHoveredDate] = React49.useState();
+    const goToPrevMonth = React49.useCallback(() => {
       setMonth((m) => {
         if (m === 0) {
           setYear((y) => y - 1);
@@ -6988,7 +7217,7 @@ var DatePicker = React47.forwardRef(
         return m - 1;
       });
     }, []);
-    const goToNextMonth = React47.useCallback(() => {
+    const goToNextMonth = React49.useCallback(() => {
       setMonth((m) => {
         if (m === 11) {
           setYear((y) => y + 1);
@@ -6997,7 +7226,7 @@ var DatePicker = React47.forwardRef(
         return m + 1;
       });
     }, []);
-    const onSelect = React47.useCallback(
+    const onSelect = React49.useCallback(
       (date) => {
         if (mode === "single") {
           onValueChange?.(date);
@@ -7016,7 +7245,7 @@ var DatePicker = React47.forwardRef(
       },
       [mode, value, onValueChange]
     );
-    const ctxValue = React47.useMemo(
+    const ctxValue = React49.useMemo(
       () => ({
         mode,
         selected: value,
@@ -7043,7 +7272,7 @@ var DatePicker = React47.forwardRef(
         hoveredDate
       ]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "div",
       {
         ref,
@@ -7066,32 +7295,32 @@ function defaultFormatDate(date) {
     year: "numeric"
   });
 }
-var DatePickerSelects = React47.forwardRef(({ className, formatDate = defaultFormatDate, ...props }, ref) => {
+var DatePickerSelects = React49.forwardRef(({ className, formatDate = defaultFormatDate, ...props }, ref) => {
   const { selected } = useDatePickerContext();
   const fromDate = selected instanceof Date ? selected : selected?.from;
   const toDate = selected instanceof Date ? void 0 : selected?.to;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       ref,
       className: cn("flex flex-col items-start pt-lg px-lg", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("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__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons32.Icon, { icon: import_icons32.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("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__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons35.Icon, { icon: import_icons35.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-          import_icons32.Icon,
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          import_icons35.Icon,
           {
-            icon: import_icons32.faArrowRightOutline,
+            icon: import_icons35.faArrowRightOutline,
             size: "sm",
             className: "shrink-0 text-datepicker-header-weekday"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("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__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons32.Icon, { icon: import_icons32.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("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__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons35.Icon, { icon: import_icons35.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] })
       ] })
     }
@@ -7107,7 +7336,7 @@ var DatePickerDay = ({ date, isOutside }) => {
   const inRange = mode === "range" && selected && !(selected instanceof Date) && selected.from && selected.to && !isSelected && isInRange(date, selected.from, selected.to);
   const inPreviewRange = mode === "range" && selected && !(selected instanceof Date) && selected.from && !selected.to && hoveredDate && !isSelected && hoveredDate.getTime() > selected.from.getTime() && isInRange(date, selected.from, hoveredDate);
   const isInRangeOrPreview = inRange || inPreviewRange;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "button",
     {
       type: "button",
@@ -7131,14 +7360,14 @@ var DatePickerDay = ({ date, isOutside }) => {
       ),
       children: [
         date.getDate(),
-        isToday && !isOutside && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
+        isToday && !isOutside && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
       ]
     }
   );
 };
-var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, ref) => {
+var DatePickerCalendar = React49.forwardRef(({ className, header, ...props }, ref) => {
   const { month, year, goToPrevMonth, goToNextMonth } = useDatePickerContext();
-  const weeks = React47.useMemo(() => {
+  const weeks = React49.useMemo(() => {
     const firstDay = new Date(year, month, 1);
     const startOffset = getWeekdayIndex(firstDay);
     const daysInMonth = getDaysInMonth(year, month);
@@ -7178,7 +7407,7 @@ var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, re
     }
     return result;
   }, [month, year]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       ref,
@@ -7186,38 +7415,38 @@ var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, re
       ...props,
       children: [
         header,
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
               " ",
               year
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "button",
                 {
                   type: "button",
                   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__ */ (0, import_jsx_runtime50.jsx)(import_icons32.Icon, { icon: import_icons32.faChevronLeftOutline, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons35.Icon, { icon: import_icons35.faChevronLeftOutline, size: "xs", className: "text-datepicker-header-nav" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 "button",
                 {
                   type: "button",
                   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__ */ (0, import_jsx_runtime50.jsx)(import_icons32.Icon, { icon: import_icons32.faChevronRightOutline, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons35.Icon, { icon: import_icons35.faChevronRightOutline, size: "xs", className: "text-datepicker-header-nav" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               "span",
               {
                 className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
@@ -7225,7 +7454,7 @@ var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, re
               },
               day
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               DatePickerDay,
               {
                 date: day.date,
@@ -7240,10 +7469,10 @@ var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, re
   );
 });
 DatePickerCalendar.displayName = "DatePickerCalendar";
-var DatePickerSuggestions = React47.forwardRef(
+var DatePickerSuggestions = React49.forwardRef(
   ({ className, suggestions, formatDate = defaultFormatDate, ...props }, ref) => {
     const { onSelect, mode } = useDatePickerContext();
-    const onValueChange = React47.useContext(DatePickerContext) ? void 0 : void 0;
+    const onValueChange = React49.useContext(DatePickerContext) ? void 0 : void 0;
     const ctx = useDatePickerContext();
     const handleClick = (suggestion) => {
       const val = suggestion.getValue();
@@ -7265,7 +7494,7 @@ var DatePickerSuggestions = React47.forwardRef(
       const to = val.to ? formatDate(val.to) : "";
       return to ? `${from} - ${to}` : from;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
       "div",
       {
         ref,
@@ -7275,16 +7504,16 @@ var DatePickerSuggestions = React47.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
             "button",
             {
               type: "button",
               onClick: () => handleClick(suggestion),
               className: "flex items-center gap-sm p-base rounded-base hover:bg-datepicker-suggestion-hover transition-colors cursor-pointer text-left",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
               ]
             },
             i
@@ -7295,8 +7524,8 @@ var DatePickerSuggestions = React47.forwardRef(
   }
 );
 DatePickerSuggestions.displayName = "DatePickerSuggestions";
-var DatePickerFooter = React47.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+var DatePickerFooter = React49.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       ref,
@@ -7312,8 +7541,8 @@ var DatePickerFooter = React47.forwardRef(
   )
 );
 DatePickerFooter.displayName = "DatePickerFooter";
-var DatePickerPanel = React47.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+var DatePickerPanel = React49.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       ref,
@@ -7324,10 +7553,10 @@ var DatePickerPanel = React47.forwardRef(
   )
 );
 DatePickerPanel.displayName = "DatePickerPanel";
-var DatePickerRoot = PopoverPrimitive11.Root;
-var DatePickerTrigger = PopoverPrimitive11.Trigger;
-var DatePickerPopover = React47.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-  PopoverPrimitive11.Content,
+var DatePickerRoot = PopoverPrimitive12.Root;
+var DatePickerTrigger = PopoverPrimitive12.Trigger;
+var DatePickerPopover = React49.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  PopoverPrimitive12.Content,
   {
     ref,
     sideOffset,
@@ -7487,6 +7716,7 @@ function getDefaultSuggestions(referenceDate) {
   SidebarSection,
   SortButton,
   StatusCell,
+  SummaryChip,
   Switch,
   TabContent,
   TabList,
@@ -7541,6 +7771,7 @@ function getDefaultSuggestions(referenceDate) {
   toastVariants,
   tooltipContentVariants,
   typographyVariants,
+  useFilterBarMode,
   useSidebarContext
 });
 //# sourceMappingURL=index.js.map