@l3mpire/ui 2.7.2 → 2.9.0

package/dist/index.mjs

@@ -4857,7 +4857,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,
@@ -5046,6 +5046,7 @@ var SortButton = ({
   activeField,
   direction,
   onChange,
+  iconOnly = false,
   ...props
 }) => {
   const [open, setOpen] = React37.useState(false);
@@ -5057,12 +5058,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: [
@@ -5074,7 +5076,7 @@ var SortButton = ({
               className: "shrink-0 text-[var(--color-foreground)]"
             }
           ),
-          /* @__PURE__ */ jsxs32("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
+          !iconOnly && /* @__PURE__ */ jsxs32("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
             /* @__PURE__ */ jsxs32("span", { className: "text-[var(--color-muted-foreground)]", children: [
               "Sort by",
               " "
@@ -5227,18 +5229,19 @@ SortButton.displayName = "SortButton";
 import * as React38 from "react";
 import { Icon as Icon24, faSlidersOutline } from "@l3mpire/icons";
 import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
-var FilterBarButton = React38.forwardRef(({ className, count, children, ...props }, ref) => /* @__PURE__ */ jsxs33(
+var FilterBarButton = React38.forwardRef(({ className, count, iconOnly = false, children, ...props }, ref) => /* @__PURE__ */ jsxs33(
   "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,
@@ -5251,7 +5254,7 @@ var FilterBarButton = React38.forwardRef(({ className, count, children, ...props
           className: "shrink-0 text-[var(--color-foreground)]"
         }
       ),
-      /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
+      !iconOnly && /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
       count != null && count > 0 && /* @__PURE__ */ jsx38("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ jsx38("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
     ]
   }
@@ -6192,7 +6195,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: [
@@ -6314,69 +6317,83 @@ var InteractiveFilterChip = ({
 InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
-import * as React46 from "react";
+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,
@@ -6385,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)) {
@@ -6400,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,
         {
@@ -6452,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",
@@ -6471,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,
         {
@@ -6516,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"
@@ -6530,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)]" })
       }
     )
   ] });
@@ -6541,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,
@@ -6550,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));
@@ -6572,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(
@@ -6580,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,
@@ -6608,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,
               {
@@ -6616,22 +6631,165 @@ var AdvancedPopover = ({
                 onSelect: handleAddFilter,
                 open: addSelectorOpen,
                 onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ jsx48(
+                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(
+              "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
+import * as React46 from "react";
+import * as PopoverPrimitive11 from "@radix-ui/react-popover";
+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,
+  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__ */ jsxs44(PopoverPrimitive11.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx49(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs44(
+      "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__ */ jsx49(
+            Icon32,
+            {
+              icon: faSlidersOutline2,
+              size: "sm",
+              className: "shrink-0 text-[var(--color-foreground)]"
+            }
+          ),
+          /* @__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 }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx49(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsxs44(
+      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__ */ 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" : (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__ */ 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 p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ jsx49(
+              PropertySelector,
+              {
+                properties,
+                onSelect: handleAddFilter,
+                open: addSelectorOpen,
+                onOpenChange: setAddSelectorOpen,
+                children: /* @__PURE__ */ jsxs44(
                   "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__ */ jsx49(Icon32, { icon: faPlusOutline3, size: "sm", className: "text-[var(--color-foreground)]" }),
+                      "Add filter"
+                    ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx48(
+            filters.length > 0 && /* @__PURE__ */ jsx49(
               "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"
               }
             )
@@ -6641,22 +6799,45 @@ var AdvancedPopover = ({
     ) })
   ] });
 };
-AdvancedPopover.displayName = "AdvancedPopover";
+SummaryChip.displayName = "SummaryChip";
+
+// src/components/ui/filter/use-filter-bar-mode.ts
+import * as React47 from "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
-import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs45 } from "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)) {
@@ -6711,106 +6892,152 @@ 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__ */ jsxs44(FilterBar, { className, children: [
-    /* @__PURE__ */ jsxs44(FilterBarLeft, { children: [
+  const isMinimal = mode === "minimal";
+  return /* @__PURE__ */ jsxs45(FilterBar, { ref: containerRef, className, children: [
+    /* @__PURE__ */ jsxs45(FilterBarLeft, { children: [
       children,
-      sortFields && filterState.sort && /* @__PURE__ */ jsx49(
+      sortFields && filterState.sort && /* @__PURE__ */ jsx50(
         SortButton,
         {
           fields: sortFields,
           activeField: filterState.sort.field,
           direction: filterState.sort.direction,
-          onChange: handleSortChange
-        }
-      ),
-      hasAdvanced && /* @__PURE__ */ jsx49(
-        AdvancedPopover,
-        {
-          filters: filterState.advancedFilters,
-          properties,
-          onFiltersChange: handleAdvancedFiltersChange,
-          open: advancedOpen,
-          onOpenChange: setAdvancedOpen,
-          children: /* @__PURE__ */ jsx49(
-            AdvancedChip,
-            {
-              count: filterState.advancedFilters.length,
-              onClick: () => setAdvancedOpen(true),
-              onClear: handleClearAdvanced
-            }
-          )
+          onChange: handleSortChange,
+          iconOnly: isMinimal
         }
       ),
-      filterState.basicFilters.map((filter) => {
-        const propDef = getPropertyDef(filter.propertyId);
-        if (!propDef) return null;
-        return /* @__PURE__ */ jsx49(
-          InteractiveFilterChip,
+      isMinimal ? totalCount > 0 ? (
+        /* Has filters → SummaryChip (interactive popover) */
+        /* @__PURE__ */ jsx50(
+          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__ */ jsx49(
-        PropertySelector,
-        {
-          properties,
-          onSelect: handleAddFilter,
-          open: propertySelectorOpen,
-          onOpenChange: setPropertySelectorOpen,
-          children: /* @__PURE__ */ jsx49(
-            FilterBarButton,
+            onFiltersChange: (filters) => {
+              onFilterStateChange({
+                ...filterState,
+                basicFilters: filters,
+                advancedFilters: []
+              });
+            },
+            onClearAll: handleClearAll
+          }
+        )
+      ) : (
+        /* No filters → same FilterBarButton as default, icon-only */
+        /* @__PURE__ */ jsx50(
+          PropertySelector,
+          {
+            properties,
+            onSelect: handleAddFilter,
+            open: propertySelectorOpen,
+            onOpenChange: setPropertySelectorOpen,
+            children: /* @__PURE__ */ jsx50(FilterBarButton, { iconOnly: true })
+          }
+        )
+      ) : (
+        /* ── DEFAULT MODE ────────────────────────────────────── */
+        /* @__PURE__ */ jsxs45(Fragment4, { children: [
+          hasAdvanced && /* @__PURE__ */ jsx50(
+            AdvancedPopover,
+            {
+              filters: filterState.advancedFilters,
+              properties,
+              onFiltersChange: handleAdvancedFiltersChange,
+              open: advancedOpen,
+              onOpenChange: setAdvancedOpen,
+              children: /* @__PURE__ */ jsx50(
+                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__ */ jsx50(
+              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__ */ jsx50(
+            PropertySelector,
             {
-              count: filterState.basicFilters.length + filterState.advancedFilters.length || void 0
+              properties,
+              onSelect: handleAddFilter,
+              open: propertySelectorOpen,
+              onOpenChange: setPropertySelectorOpen,
+              children: /* @__PURE__ */ jsx50(
+                FilterBarButton,
+                {
+                  count: totalCount || void 0
+                }
+              )
             }
           )
-        }
+        ] })
       )
     ] }),
-    actions && /* @__PURE__ */ jsx49(FilterBarRight, { children: actions })
+    (actions || totalCount > 0) && /* @__PURE__ */ jsxs45(FilterBarRight, { children: [
+      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
+    ] })
   ] });
 };
 FilterSystem.displayName = "FilterSystem";
 
 // src/components/ui/date-picker.tsx
-import * as React47 from "react";
-import * as PopoverPrimitive11 from "@radix-ui/react-popover";
+import * as React49 from "react";
+import * as PopoverPrimitive12 from "@radix-ui/react-popover";
 import {
-  Icon as Icon31,
+  Icon as Icon34,
   faChevronLeftOutline as faChevronLeftOutline3,
   faChevronRightOutline as faChevronRightOutline3,
   faArrowRightOutline as faArrowRightOutline2,
   faCalendarOutline
 } from "@l3mpire/icons";
-import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -6842,16 +7069,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",
@@ -6862,22 +7089,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);
@@ -6886,7 +7113,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);
@@ -6895,7 +7122,7 @@ var DatePicker = React47.forwardRef(
         return m + 1;
       });
     }, []);
-    const onSelect = React47.useCallback(
+    const onSelect = React49.useCallback(
       (date) => {
         if (mode === "single") {
           onValueChange?.(date);
@@ -6914,7 +7141,7 @@ var DatePicker = React47.forwardRef(
       },
       [mode, value, onValueChange]
     );
-    const ctxValue = React47.useMemo(
+    const ctxValue = React49.useMemo(
       () => ({
         mode,
         selected: value,
@@ -6941,7 +7168,7 @@ var DatePicker = React47.forwardRef(
         hoveredDate
       ]
     );
-    return /* @__PURE__ */ jsx50(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx51(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx51(
       "div",
       {
         ref,
@@ -6964,32 +7191,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__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       ref,
       className: cn("flex flex-col items-start pt-lg px-lg", className),
       ...props,
-      children: /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-base w-full", children: [
-        /* @__PURE__ */ jsxs45("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__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ jsx50(Icon31, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+      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(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] }),
-        /* @__PURE__ */ jsx50(
-          Icon31,
+        /* @__PURE__ */ jsx51(
+          Icon34,
           {
             icon: faArrowRightOutline2,
             size: "sm",
             className: "shrink-0 text-datepicker-header-weekday"
           }
         ),
-        /* @__PURE__ */ jsxs45("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__ */ jsx50("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ jsx50(Icon31, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        /* @__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(Icon34, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] })
       ] })
     }
@@ -7005,7 +7232,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__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "button",
     {
       type: "button",
@@ -7029,14 +7256,14 @@ var DatePickerDay = ({ date, isOutside }) => {
       ),
       children: [
         date.getDate(),
-        isToday && !isOutside && /* @__PURE__ */ jsx50("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__ */ jsx51("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);
@@ -7076,7 +7303,7 @@ var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, re
     }
     return result;
   }, [month, year]);
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       ref,
@@ -7084,38 +7311,38 @@ var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, re
       ...props,
       children: [
         header,
-        /* @__PURE__ */ jsxs45("div", { className: "flex flex-col gap-lg p-lg", children: [
-          /* @__PURE__ */ jsxs45("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs45("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
+        /* @__PURE__ */ jsxs46("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ jsxs46("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs46("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
               " ",
               year
             ] }),
-            /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-xs", children: [
-              /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ jsx51(
                 "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__ */ jsx50(Icon31, { icon: faChevronLeftOutline3, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ jsx51(Icon34, { icon: faChevronLeftOutline3, size: "xs", className: "text-datepicker-header-nav" })
                 }
               ),
-              /* @__PURE__ */ jsx50(
+              /* @__PURE__ */ jsx51(
                 "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__ */ jsx50(Icon31, { icon: faChevronRightOutline3, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ jsx51(Icon34, { icon: faChevronRightOutline3, size: "xs", className: "text-datepicker-header-nav" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs45("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx50("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsxs46("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx51("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx51(
               "span",
               {
                 className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
@@ -7123,7 +7350,7 @@ var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, re
               },
               day
             )) }),
-            /* @__PURE__ */ jsx50("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ jsx50("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ jsx51("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ jsx51(
               DatePickerDay,
               {
                 date: day.date,
@@ -7138,10 +7365,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();
@@ -7163,7 +7390,7 @@ var DatePickerSuggestions = React47.forwardRef(
       const to = val.to ? formatDate(val.to) : "";
       return to ? `${from} - ${to}` : from;
     };
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs46(
       "div",
       {
         ref,
@@ -7173,16 +7400,16 @@ var DatePickerSuggestions = React47.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx50("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx50("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx50("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
-          /* @__PURE__ */ jsx50("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs45(
+          /* @__PURE__ */ jsx51("div", { className: "pt-lg px-base", children: /* @__PURE__ */ jsx51("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ jsx51("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ jsx51("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ jsxs46(
             "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__ */ jsx50("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
-                /* @__PURE__ */ jsx50("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+                /* @__PURE__ */ jsx51("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ jsx51("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
               ]
             },
             i
@@ -7193,8 +7420,8 @@ var DatePickerSuggestions = React47.forwardRef(
   }
 );
 DatePickerSuggestions.displayName = "DatePickerSuggestions";
-var DatePickerFooter = React47.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(
+var DatePickerFooter = React49.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx51(
     "div",
     {
       ref,
@@ -7210,8 +7437,8 @@ var DatePickerFooter = React47.forwardRef(
   )
 );
 DatePickerFooter.displayName = "DatePickerFooter";
-var DatePickerPanel = React47.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx50(
+var DatePickerPanel = React49.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx51(
     "div",
     {
       ref,
@@ -7222,10 +7449,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__ */ jsx50(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ jsx50(
-  PopoverPrimitive11.Content,
+var DatePickerRoot = PopoverPrimitive12.Root;
+var DatePickerTrigger = PopoverPrimitive12.Trigger;
+var DatePickerPopover = React49.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ jsx51(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ jsx51(
+  PopoverPrimitive12.Content,
   {
     ref,
     sideOffset,
@@ -7384,6 +7611,7 @@ export {
   SidebarSection,
   SortButton,
   StatusCell,
+  SummaryChip,
   Switch,
   TabContent,
   TabList,
@@ -7438,6 +7666,7 @@ export {
   toastVariants,
   tooltipContentVariants,
   typographyVariants,
+  useFilterBarMode,
   useSidebarContext
 };
 //# sourceMappingURL=index.mjs.map