@l3mpire/ui 2.7.2 → 2.8.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,7 +6317,7 @@ var InteractiveFilterChip = ({
 InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
-import * as React46 from "react";
+import * as React48 from "react";
 
 // src/components/ui/filter/advanced-chip.tsx
 import * as React43 from "react";
@@ -6643,20 +6646,182 @@ var AdvancedPopover = ({
 };
 AdvancedPopover.displayName = "AdvancedPopover";
 
-// src/components/ui/filter/filter-system.tsx
+// src/components/ui/filter/summary-chip.tsx
+import * as React46 from "react";
+import * as PopoverPrimitive11 from "@radix-ui/react-popover";
+import { Icon as Icon31, faFilterOutline as faFilterOutline2, faPlusOutline as faPlusOutline2 } from "@l3mpire/icons";
 import { 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 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]",
+          count > 0 ? "bg-[var(--color-primary)]/5 border border-[var(--color-primary)]/30 text-[var(--color-primary)]" : "bg-filter-chip-bg border border-filter-chip-border text-[var(--color-foreground)]",
+          "rounded-md text-sm font-medium leading-sm",
+          "cursor-pointer transition-colors hover:opacity-80",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx49(
+            Icon31,
+            {
+              icon: faFilterOutline2,
+              size: "sm",
+              className: count > 0 ? "text-[var(--color-primary)]" : "text-[var(--color-muted-foreground)]"
+            }
+          ),
+          /* @__PURE__ */ jsxs44("span", { className: "whitespace-nowrap", children: [
+            "Filters",
+            count > 0 && ` (${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 px-base pt-base", children: [
+            filters.map((filter, i) => {
+              const propDef = getPropertyDef(filter.propertyId);
+              if (!propDef) return null;
+              return /* @__PURE__ */ jsx49(
+                AdvancedRow,
+                {
+                  connector: i === 0 ? "Where" : "And",
+                  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 px-base py-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: "flex items-center gap-xs text-sm font-regular leading-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsx49(Icon31, { icon: faPlusOutline2, size: "xs" }),
+                      "Add filter"
+                    ]
+                  }
+                )
+              }
+            ),
+            filters.length > 0 && /* @__PURE__ */ jsx49(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onClearAll();
+                  setOpen(false);
+                },
+                className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                children: "Clear all filters"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+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 { Fragment as Fragment5, 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 +6876,141 @@ 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(Fragment5, { children: [
+          hasAdvanced && /* @__PURE__ */ jsx50(
+            AdvancedPopover,
             {
-              count: filterState.basicFilters.length + filterState.advancedFilters.length || void 0
+              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,
+            {
+              properties,
+              onSelect: handleAddFilter,
+              open: propertySelectorOpen,
+              onOpenChange: setPropertySelectorOpen,
+              children: /* @__PURE__ */ jsx50(
+                FilterBarButton,
+                {
+                  count: totalCount || void 0
+                }
+              )
             }
           )
-        }
+        ] })
       )
     ] }),
-    actions && /* @__PURE__ */ jsx49(FilterBarRight, { children: actions })
+    actions && /* @__PURE__ */ jsx50(FilterBarRight, { children: 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 Icon32,
   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 +7042,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 +7062,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 +7086,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 +7095,7 @@ var DatePicker = React47.forwardRef(
         return m + 1;
       });
     }, []);
-    const onSelect = React47.useCallback(
+    const onSelect = React49.useCallback(
       (date) => {
         if (mode === "single") {
           onValueChange?.(date);
@@ -6914,7 +7114,7 @@ var DatePicker = React47.forwardRef(
       },
       [mode, value, onValueChange]
     );
-    const ctxValue = React47.useMemo(
+    const ctxValue = React49.useMemo(
       () => ({
         mode,
         selected: value,
@@ -6941,7 +7141,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 +7164,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(Icon32, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] }),
-        /* @__PURE__ */ jsx50(
-          Icon31,
+        /* @__PURE__ */ jsx51(
+          Icon32,
           {
             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(Icon32, { icon: faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] })
       ] })
     }
@@ -7005,7 +7205,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 +7229,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 +7276,7 @@ var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, re
     }
     return result;
   }, [month, year]);
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       ref,
@@ -7084,38 +7284,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(Icon32, { 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(Icon32, { 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 +7323,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 +7338,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 +7363,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 +7373,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 +7393,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 +7410,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 +7422,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 +7584,7 @@ export {
   SidebarSection,
   SortButton,
   StatusCell,
+  SummaryChip,
   Switch,
   TabContent,
   TabList,
@@ -7438,6 +7639,7 @@ export {
   toastVariants,
   tooltipContentVariants,
   typographyVariants,
+  useFilterBarMode,
   useSidebarContext
 };
 //# sourceMappingURL=index.mjs.map