@l3mpire/ui 2.6.0 → 2.7.1

package/dist/index.js

@@ -30,6 +30,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AdvancedChip: () => AdvancedChip,
+  AdvancedPopover: () => AdvancedPopover,
+  AdvancedRow: () => AdvancedRow,
   Avatar: () => Avatar,
   AvatarCell: () => AvatarCell,
   Badge: () => Badge,
@@ -39,9 +42,19 @@ __export(index_exports, {
   ButtonCell: () => ButtonCell,
   Checkbox: () => Checkbox,
   ChipInput: () => ChipInput,
+  DEFAULT_OPERATOR_BY_TYPE: () => DEFAULT_OPERATOR_BY_TYPE,
   DataTable: () => DataTable,
   DataTablePagination: () => DataTablePagination,
   DateCell: () => DateCell,
+  DatePicker: () => DatePicker,
+  DatePickerCalendar: () => DatePickerCalendar,
+  DatePickerFooter: () => DatePickerFooter,
+  DatePickerPanel: () => DatePickerPanel,
+  DatePickerPopover: () => DatePickerPopover,
+  DatePickerRoot: () => DatePickerRoot,
+  DatePickerSelects: () => DatePickerSelects,
+  DatePickerSuggestions: () => DatePickerSuggestions,
+  DatePickerTrigger: () => DatePickerTrigger,
   Dialog: () => Dialog,
   DropdownMenu: () => DropdownMenu,
   DropdownMenuClear: () => DropdownMenuClear,
@@ -55,8 +68,18 @@ __export(index_exports, {
   EditableCell: () => EditableCell,
   EmailCell: () => EmailCell,
   EmptyState: () => EmptyState,
+  FilterBar: () => FilterBar,
+  FilterBarButton: () => FilterBarButton,
+  FilterBarLeft: () => FilterBarLeft,
+  FilterBarRight: () => FilterBarRight,
+  FilterChip: () => FilterChip,
+  FilterChipSegment: () => FilterChipSegment,
+  FilterEditor: () => FilterEditor,
+  FilterSystem: () => FilterSystem,
   InfoMessage: () => InfoMessage,
   InputLabel: () => InputLabel,
+  InteractiveFilterChip: () => InteractiveFilterChip,
+  KebabMenu: () => KebabMenu,
   Link: () => Link,
   LinkCell: () => LinkCell,
   Modal: () => Modal,
@@ -71,8 +94,13 @@ __export(index_exports, {
   ModalTrigger: () => ModalTrigger,
   NumberCell: () => NumberCell,
   NumberInput: () => NumberInput,
+  OPERATORS_BY_TYPE: () => OPERATORS_BY_TYPE,
+  OperatorList: () => OperatorList,
+  OperatorSelector: () => OperatorSelector,
   ProductLogo: () => ProductLogo,
+  PropertySelector: () => PropertySelector,
   RowActions: () => RowActions,
+  SaveViewButton: () => SaveViewButton,
   SearchBar: () => SearchBar,
   Select: () => Select,
   SidePanel: () => SidePanel,
@@ -85,6 +113,7 @@ __export(index_exports, {
   SidebarHeadingItem: () => SidebarHeadingItem,
   SidebarItem: () => SidebarItem,
   SidebarSection: () => SidebarSection,
+  SortButton: () => SortButton,
   StatusCell: () => StatusCell,
   Switch: () => Switch,
   TabContent: () => TabContent,
@@ -114,14 +143,21 @@ __export(index_exports, {
   UserMenu: () => UserMenu,
   UserMenuInfoRow: () => UserMenuInfoRow,
   UserMenuSection: () => UserMenuSection,
+  ValueInput: () => ValueInput,
   avatarVariants: () => avatarVariants,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   chipInputVariants: () => chipInputVariants,
   cn: () => cn,
+  createFilterWithDefaults: () => createFilterWithDefaults,
   emptyStateVariants: () => emptyStateVariants,
+  filterChipSegmentVariants: () => filterChipSegmentVariants,
   flexRender: () => import_react_table.flexRender,
+  getDefaultOperator: () => getDefaultOperator,
+  getDefaultSuggestions: () => getDefaultSuggestions,
+  getValueInputType: () => getValueInputType,
   infoMessageVariants: () => infoMessageVariants,
+  isNoValueOperator: () => isNoValueOperator,
   linkVariants: () => linkVariants,
   modalVariants: () => modalVariants,
   productLogoVariants: () => productLogoVariants,
@@ -4799,8 +4835,2576 @@ var SidePanelContent = React33.forwardRef(({ className, overlay = true, children
   )
 ] }));
 SidePanelContent.displayName = "SidePanelContent";
+
+// src/components/ui/filter/filter-chip-segment.tsx
+var React34 = __toESM(require("react"));
+var import_class_variance_authority19 = require("class-variance-authority");
+var import_icons22 = require("@l3mpire/icons");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var filterChipSegmentVariants = (0, import_class_variance_authority19.cva)(
+  ["flex items-center shrink-0 transition-colors"],
+  {
+    variants: {
+      type: {
+        property: "gap-xs px-base py-sm",
+        operator: "gap-0 px-base py-sm",
+        value: "gap-xs px-base py-sm",
+        placeholder: "gap-0 px-base py-sm",
+        button: "gap-0 p-0"
+      },
+      hasBorder: {
+        true: "border-r border-filter-chip-segment-border",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      type: "property",
+      hasBorder: false
+    }
+  }
+);
+var FilterChipSegment = React34.forwardRef(
+  ({
+    className,
+    segmentType = "property",
+    hasBorder,
+    icon,
+    label,
+    badgeCount,
+    adornment,
+    onKebabClick,
+    children,
+    ...props
+  }, ref) => {
+    if (segmentType === "button") {
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "div",
+        {
+          ref,
+          className: cn(filterChipSegmentVariants({ type: "button", hasBorder: false }), className),
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onKebabClick,
+                className: "flex items-center justify-center p-sm cursor-pointer hover:bg-filter-chip-segment-bg-hover active:bg-filter-chip-segment-bg-pressed transition-colors",
+                "aria-label": "Filter actions",
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "size-5 flex items-center justify-center text-sm leading-sm text-filter-chip-kebab-text", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "10", cy: "4.5", r: "1.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "10", cy: "10", r: "1.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "10", cy: "15.5", r: "1.5" })
+                ] }) })
+              }
+            ),
+            children
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          filterChipSegmentVariants({ type: segmentType, hasBorder }),
+          "cursor-pointer hover:bg-filter-chip-segment-bg-hover active:bg-filter-chip-segment-bg-pressed",
+          className
+        ),
+        ...props,
+        children: [
+          adornment && segmentType === "value" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "shrink-0 size-5", children: adornment }),
+          icon && segmentType === "property" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            import_icons22.Icon,
+            {
+              icon,
+              size: "sm",
+              className: "shrink-0 text-filter-chip-segment-icon"
+            }
+          ),
+          label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "span",
+            {
+              className: cn(
+                "text-sm font-medium leading-sm whitespace-nowrap",
+                segmentType === "placeholder" ? "text-filter-chip-segment-placeholder" : "text-filter-chip-segment-text"
+              ),
+              children: label
+            }
+          ),
+          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+FilterChipSegment.displayName = "FilterChipSegment";
+
+// src/components/ui/filter/filter-chip.tsx
+var React35 = __toESM(require("react"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var FilterChip = React35.forwardRef(
+  ({
+    className,
+    icon,
+    property,
+    operator,
+    value,
+    badgeCount,
+    valueAdornment,
+    onPropertyClick,
+    onOperatorClick,
+    onValueClick,
+    onKebabClick,
+    ...props
+  }, ref) => {
+    const hasOperator = !!operator;
+    const hasValue = hasOperator && value != null;
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center overflow-clip",
+          "bg-filter-chip-bg border border-filter-chip-border rounded-md",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            FilterChipSegment,
+            {
+              segmentType: "property",
+              hasBorder: true,
+              icon,
+              label: property,
+              onClick: onPropertyClick
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            FilterChipSegment,
+            {
+              segmentType: hasOperator ? "operator" : "placeholder",
+              hasBorder: true,
+              label: hasOperator ? operator : "Select condition",
+              onClick: onOperatorClick
+            }
+          ),
+          hasOperator && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            FilterChipSegment,
+            {
+              segmentType: hasValue ? "value" : "placeholder",
+              hasBorder: true,
+              label: hasValue ? value : "Select condition",
+              adornment: valueAdornment,
+              badgeCount,
+              onClick: onValueClick
+            }
+          ),
+          hasOperator && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            FilterChipSegment,
+            {
+              segmentType: "button",
+              onKebabClick
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FilterChip.displayName = "FilterChip";
+
+// src/components/ui/filter/utils.ts
+var OPERATORS_BY_TYPE = {
+  text: [
+    "contains",
+    "does not contain",
+    "is",
+    "is not",
+    "starts with",
+    "ends with",
+    "is empty",
+    "is not empty"
+  ],
+  number: ["=", "\u2260", ">", "<", "\u2265", "\u2264", "is between", "is empty", "is not empty"],
+  date: [
+    "is",
+    "is before",
+    "is after",
+    "is on or before",
+    "is on or after",
+    "is between",
+    "is relative",
+    "is empty",
+    "is not empty"
+  ],
+  enum: ["is", "is not", "is any of", "is none of", "is empty", "is not empty"],
+  tags: [
+    "contains",
+    "does not contain",
+    "contains any of",
+    "contains all of",
+    "is empty",
+    "is not empty"
+  ],
+  boolean: ["is true", "is false"],
+  relation: ["is", "is not", "is any of", "is none of", "is empty", "is not empty"]
+};
+var DEFAULT_OPERATOR_BY_TYPE = {
+  text: "contains",
+  number: "=",
+  date: "is relative",
+  enum: "is",
+  tags: "contains",
+  boolean: "is true",
+  relation: "is"
+};
+function isNoValueOperator(operator) {
+  return ["is empty", "is not empty", "is true", "is false"].includes(operator);
+}
+function getDefaultOperator(type) {
+  return DEFAULT_OPERATOR_BY_TYPE[type];
+}
+function createFilterWithDefaults(propertyId, type) {
+  const operator = getDefaultOperator(type);
+  return {
+    id: crypto.randomUUID(),
+    propertyId,
+    operator,
+    value: type === "boolean" ? true : null
+  };
+}
+function getValueInputType(type, operator) {
+  if (isNoValueOperator(operator)) return null;
+  if (type === "text") return "TextInput";
+  if (type === "number")
+    return operator === "is between" ? "NumberRange" : "NumberInput";
+  if (type === "date") {
+    if (operator === "is between") return "DateRange";
+    if (operator === "is relative") return "PresetTags";
+    return "DatePicker";
+  }
+  if (type === "enum")
+    return ["is any of", "is none of"].includes(operator) ? "MultiSelect" : "SingleSelect";
+  if (type === "tags")
+    return ["contains any of", "contains all of"].includes(operator) ? "MultiSelect" : "SingleSelect";
+  if (type === "relation")
+    return ["is any of", "is none of"].includes(operator) ? "MultiRelationPicker" : "RelationPicker";
+  return null;
+}
+
+// src/components/ui/filter/filter-bar.tsx
+var React36 = __toESM(require("react"));
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var FilterBar = React36.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between w-full",
+        className
+      ),
+      role: "toolbar",
+      "aria-label": "Filters",
+      "aria-orientation": "horizontal",
+      ...props,
+      children
+    }
+  )
+);
+FilterBar.displayName = "FilterBar";
+var FilterBarLeft = React36.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center gap-base flex-wrap", className),
+      ...props,
+      children
+    }
+  )
+);
+FilterBarLeft.displayName = "FilterBarLeft";
+var FilterBarRight = React36.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center gap-base shrink-0", className),
+      ...props,
+      children
+    }
+  )
+);
+FilterBarRight.displayName = "FilterBarRight";
+
+// src/components/ui/filter/sort-button.tsx
+var React37 = __toESM(require("react"));
+var PopoverPrimitive3 = __toESM(require("@radix-ui/react-popover"));
+var import_icons23 = require("@l3mpire/icons");
+var import_icons24 = require("@l3mpire/icons");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var SortButton = ({
+  className,
+  fields,
+  activeField,
+  direction,
+  onChange,
+  ...props
+}) => {
+  const [open, setOpen] = React37.useState(false);
+  const activeFieldDef = fields.find((f) => f.id === activeField);
+  const activeLabel = activeFieldDef?.label ?? activeField;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "flex items-center gap-xs px-md py-sm",
+          "min-h-[32px] max-h-[32px] min-w-[80px]",
+          "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)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            import_icons23.Icon,
+            {
+              icon: direction === "asc" ? import_icons24.faArrowUpSmallBigOutline : import_icons24.faArrowDownBigSmallOutline,
+              size: "sm",
+              className: "shrink-0 text-[var(--color-foreground)]"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "text-[var(--color-muted-foreground)]", children: [
+              "Sort by",
+              " "
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-[var(--color-foreground)]", children: activeLabel })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopoverPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      PopoverPrimitive3.Content,
+      {
+        sideOffset: 4,
+        align: "start",
+        className: cn(
+          "z-50 flex flex-col gap-xs overflow-clip p-xs",
+          "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-[180px]"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange?.(field.id, direction);
+                setOpen(false);
+              },
+              className: cn(
+                "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
+                "hover:bg-[var(--color-dropdown-item-hover)]",
+                field.id === activeField ? "bg-[var(--color-dropdown-item-hover)]" : ""
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  import_icons23.Icon,
+                  {
+                    icon: field.icon,
+                    size: "sm",
+                    className: cn(
+                      "shrink-0",
+                      field.id === activeField ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "flex-1 text-sm font-regular leading-sm text-left truncate",
+                      field.id === activeField ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                    ),
+                    children: field.label
+                  }
+                )
+              ]
+            },
+            field.id
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-px bg-[var(--color-border)]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange?.(activeField, "asc");
+                  setOpen(false);
+                },
+                className: cn(
+                  "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
+                  "hover:bg-[var(--color-dropdown-item-hover)]",
+                  direction === "asc" ? "bg-[var(--color-dropdown-item-hover)]" : ""
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    import_icons23.Icon,
+                    {
+                      icon: import_icons24.faArrowUpSmallBigOutline,
+                      size: "sm",
+                      className: cn(
+                        "shrink-0",
+                        direction === "asc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "flex-1 text-sm font-regular leading-sm text-left",
+                        direction === "asc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                      ),
+                      children: "Ascending"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange?.(activeField, "desc");
+                  setOpen(false);
+                },
+                className: cn(
+                  "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
+                  "hover:bg-[var(--color-dropdown-item-hover)]",
+                  direction === "desc" ? "bg-[var(--color-dropdown-item-hover)]" : ""
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    import_icons23.Icon,
+                    {
+                      icon: import_icons24.faArrowDownBigSmallOutline,
+                      size: "sm",
+                      className: cn(
+                        "shrink-0",
+                        direction === "desc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "flex-1 text-sm font-regular leading-sm text-left",
+                        direction === "desc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                      ),
+                      children: "Descending"
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+SortButton.displayName = "SortButton";
+
+// src/components/ui/filter/filter-bar-button.tsx
+var React38 = __toESM(require("react"));
+var import_icons25 = require("@l3mpire/icons");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var FilterBarButton = React38.forwardRef(({ className, count, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  "button",
+  {
+    ref,
+    type: "button",
+    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)] 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
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        import_icons25.Icon,
+        {
+          icon: import_icons25.faSlidersOutline,
+          size: "sm",
+          className: "shrink-0 text-[var(--color-foreground)]"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
+      count != null && count > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+    ]
+  }
+));
+FilterBarButton.displayName = "FilterBarButton";
+
+// src/components/ui/filter/save-view-button.tsx
+var React39 = __toESM(require("react"));
+var import_icons26 = require("@l3mpire/icons");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var SaveViewButton = React39.forwardRef(
+  ({ className, label = "Save view", onSave, onDropdown, ...props }, ref) => {
+    const sharedStyle = [
+      "flex items-center justify-center",
+      "min-h-[32px] max-h-[32px]",
+      "bg-gradient-to-t from-[var(--color-btn-solid-brand-bg-default)] from-[10%] to-[var(--color-btn-solid-brand-bg-gradient-to-default)]",
+      "border border-[var(--color-btn-solid-brand-border-default)]",
+      "shadow-sm cursor-pointer transition-colors",
+      "hover:from-[var(--color-btn-solid-brand-bg-hover)] hover:to-[var(--color-btn-solid-brand-bg-gradient-to-hover)]"
+    ];
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: onSave,
+              className: cn(
+                sharedStyle,
+                "gap-sm px-base py-sm min-w-[80px]",
+                "rounded-l-md -mr-px"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-btn-solid-brand-text-default)]", children: label }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "absolute inset-0 rounded-l-[11px] border border-[var(--color-btn-solid-brand-inner-border-default)] shadow-sm pointer-events-none" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: onDropdown,
+              className: cn(
+                sharedStyle,
+                "p-sm",
+                "rounded-r-md -ml-px"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  import_icons26.Icon,
+                  {
+                    icon: import_icons26.faChevronDownOutline,
+                    size: "sm",
+                    className: "text-[var(--color-btn-solid-brand-text-default)]"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "absolute inset-0 rounded-r-[11px] border border-[var(--color-btn-solid-brand-inner-border-default)] shadow-sm pointer-events-none" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SaveViewButton.displayName = "SaveViewButton";
+
+// src/components/ui/filter/operator-selector.tsx
+var PopoverPrimitive4 = __toESM(require("@radix-ui/react-popover"));
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var OperatorSelector = ({
+  dataType,
+  activeOperator,
+  onSelect,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const operators = OPERATORS_BY_TYPE[dataType];
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(PopoverPrimitive4.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverPrimitive4.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PopoverPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      PopoverPrimitive4.Content,
+      {
+        sideOffset: 4,
+        align: "start",
+        className: cn(
+          "z-50 flex flex-col p-xs 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-[180px]"
+        ),
+        children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect(op),
+            className: cn(
+              "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+              "hover:bg-[var(--color-dropdown-item-hover)]",
+              op === activeOperator && "bg-[var(--color-dropdown-item-hover)]"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "text-sm font-regular leading-sm",
+                    op === activeOperator ? "text-[var(--color-foreground)] font-medium" : "text-[var(--color-dropdown-item-text)]"
+                  ),
+                  children: op
+                }
+              ),
+              isNoValueOperator(op) && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ml-auto text-xs text-[var(--color-muted-foreground)]", children: "instant" })
+            ]
+          },
+          op
+        ))
+      }
+    ) })
+  ] });
+};
+OperatorSelector.displayName = "OperatorSelector";
+var OperatorList = ({
+  dataType,
+  activeOperator,
+  onSelect
+}) => {
+  const operators = OPERATORS_BY_TYPE[dataType];
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col", children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect(op),
+      className: cn(
+        "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+        "hover:bg-[var(--color-dropdown-item-hover)]",
+        op === activeOperator && "bg-[var(--color-dropdown-item-hover)]"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "span",
+        {
+          className: cn(
+            "text-sm font-regular leading-sm",
+            op === activeOperator ? "text-[var(--color-foreground)] font-medium" : "text-[var(--color-dropdown-item-text)]"
+          ),
+          children: op
+        }
+      )
+    },
+    op
+  )) });
+};
+OperatorList.displayName = "OperatorList";
+
+// src/components/ui/filter/value-input.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var RELATIVE_DATE_PRESETS = [
+  { group: "Past", options: ["Today", "Yesterday", "Last 7 days", "Last 14 days", "Last 30 days", "Last 90 days"] },
+  { group: "Current", options: ["This week", "This month", "This quarter", "This year"] },
+  { group: "Future", options: ["Tomorrow", "Next 7 days", "Next 14 days", "Next 30 days", "Next week", "Next month", "Next quarter"] }
+];
+var ValueInput = ({
+  dataType,
+  operator,
+  value,
+  onChange,
+  onSubmit,
+  options = [],
+  className
+}) => {
+  const inputType = getValueInputType(dataType, operator);
+  if (!inputType) return null;
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSubmit?.();
+  };
+  switch (inputType) {
+    case "TextInput":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "input",
+          {
+            type: "text",
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: "Enter value...",
+            autoFocus: true,
+            className: cn(
+              "w-full px-base py-sm rounded-base 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"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSubmit,
+            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
+            children: "Apply"
+          }
+        )
+      ] });
+    case "NumberInput":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "input",
+          {
+            type: "number",
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value ? Number(e.target.value) : null),
+            onKeyDown: handleKeyDown,
+            placeholder: "Enter number...",
+            autoFocus: true,
+            className: cn(
+              "w-full px-base py-sm rounded-base 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"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSubmit,
+            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
+            children: "Apply"
+          }
+        )
+      ] });
+    case "NumberRange": {
+      const rangeVal = value ?? [0, 0];
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-base", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "input",
+            {
+              type: "number",
+              value: rangeVal[0] ?? "",
+              onChange: (e) => onChange([Number(e.target.value), rangeVal[1]]),
+              placeholder: "Min",
+              autoFocus: true,
+              className: cn(
+                "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
+                "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
+                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "and" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "input",
+            {
+              type: "number",
+              value: rangeVal[1] ?? "",
+              onChange: (e) => onChange([rangeVal[0], Number(e.target.value)]),
+              placeholder: "Max",
+              className: cn(
+                "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
+                "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
+                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSubmit,
+            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
+            children: "Apply"
+          }
+        )
+      ] });
+    }
+    case "PresetTags":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onChange(preset);
+              onSubmit?.();
+            },
+            className: cn(
+              "px-base py-2xs rounded-base border cursor-pointer transition-colors text-sm font-regular leading-sm",
+              value === preset ? "border-[var(--color-ring)] bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "border-[var(--color-input)] bg-[var(--color-background)] text-[var(--color-foreground)] hover:bg-[var(--color-accent)]"
+            ),
+            children: preset
+          },
+          preset
+        )) })
+      ] }, group.group)) });
+    case "SingleSelect":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("flex flex-col gap-xs p-base max-h-[250px] overflow-y-auto", className), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onChange(opt);
+            onSubmit?.();
+          },
+          className: cn(
+            "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+            "hover:bg-[var(--color-dropdown-item-hover)]",
+            value === opt && "bg-[var(--color-dropdown-item-hover)]"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+        },
+        opt
+      )) });
+    case "MultiSelect": {
+      const selected = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: options.map((opt) => {
+          const isSelected = selected.includes(opt);
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                const next = isSelected ? selected.filter((s) => s !== opt) : [...selected, opt];
+                onChange(next);
+              },
+              className: cn(
+                "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+                "hover:bg-[var(--color-dropdown-item-hover)]"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "flex items-center justify-center size-4 rounded-xs border transition-colors",
+                      isSelected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
+                    ),
+                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M2 5L4 7L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+              ]
+            },
+            opt
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSubmit,
+            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
+            children: "Apply"
+          }
+        )
+      ] });
+    }
+    // DatePicker, DateRange, RelationPicker, MultiRelationPicker
+    // Stub as text inputs for now — will wire to actual DatePicker/relation components
+    case "DatePicker":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "input",
+          {
+            type: "date",
+            value: value instanceof Date ? value.toISOString().split("T")[0] : value ?? "",
+            onChange: (e) => onChange(e.target.value ? new Date(e.target.value) : null),
+            autoFocus: true,
+            className: cn(
+              "w-full px-base py-sm rounded-base border border-[var(--color-input)]",
+              "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
+              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSubmit,
+            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
+            children: "Apply"
+          }
+        )
+      ] });
+    case "DateRange":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-base", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "input",
+            {
+              type: "date",
+              autoFocus: true,
+              className: cn(
+                "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
+                "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
+                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "to" }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "input",
+            {
+              type: "date",
+              className: cn(
+                "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
+                "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
+                "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSubmit,
+            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
+            children: "Apply"
+          }
+        )
+      ] });
+    case "RelationPicker":
+    case "MultiRelationPicker":
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "input",
+          {
+            type: "text",
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: "Search...",
+            autoFocus: true,
+            className: cn(
+              "w-full px-base py-sm rounded-base 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)]"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSubmit,
+            className: "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity",
+            children: "Apply"
+          }
+        )
+      ] });
+    default:
+      return null;
+  }
+};
+ValueInput.displayName = "ValueInput";
+
+// src/components/ui/filter/property-selector.tsx
+var React40 = __toESM(require("react"));
+var PopoverPrimitive5 = __toESM(require("@radix-ui/react-popover"));
+var import_icons27 = require("@l3mpire/icons");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var PropertySelector = ({
+  properties,
+  onSelect,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [activeGroup, setActiveGroup] = React40.useState(null);
+  const [search, setSearch] = React40.useState("");
+  React40.useEffect(() => {
+    if (!open) {
+      setActiveGroup(null);
+      setSearch("");
+    }
+  }, [open]);
+  const groups = React40.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const prop of properties) {
+      const existing = map.get(prop.group);
+      if (existing) {
+        existing.count++;
+      } else {
+        map.set(prop.group, {
+          group: prop.group,
+          groupLabel: prop.groupLabel,
+          groupIcon: prop.icon,
+          count: 1
+        });
+      }
+    }
+    return Array.from(map.values());
+  }, [properties]);
+  const filteredProperties = React40.useMemo(() => {
+    if (!activeGroup) return [];
+    const groupProps = properties.filter((p) => p.group === activeGroup);
+    if (!search) return groupProps;
+    const lower = search.toLowerCase();
+    return groupProps.filter((p) => p.label.toLowerCase().includes(lower));
+  }, [properties, activeGroup, search]);
+  const activeGroupInfo = groups.find((g) => g.group === activeGroup);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(PopoverPrimitive5.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverPrimitive5.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      PopoverPrimitive5.Content,
+      {
+        sideOffset: 4,
+        align: "start",
+        className: cn(
+          "z-50 flex flex-col gap-xs overflow-clip p-xs",
+          "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-[230px]"
+        ),
+        children: activeGroup === null ? (
+          /* ── Level 1: Categories ─────────────────────────────────── */
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveGroup(g.group),
+              className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  import_icons27.Icon,
+                  {
+                    icon: g.groupIcon,
+                    size: "sm",
+                    className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  import_icons27.Icon,
+                  {
+                    icon: import_icons27.faChevronRightOutline,
+                    size: "xs",
+                    className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                  }
+                )
+              ]
+            },
+            g.group
+          )) })
+        ) : (
+          /* ── Level 2: Properties ─────────────────────────────────── */
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setActiveGroup(null);
+                  setSearch("");
+                },
+                className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    import_icons27.Icon,
+                    {
+                      icon: import_icons27.faChevronLeftOutline,
+                      size: "sm",
+                      className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                import_icons27.Icon,
+                {
+                  icon: import_icons27.faMagnifyingGlassOutline,
+                  size: "sm",
+                  className: "shrink-0 text-[var(--color-muted-foreground)]"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                "input",
+                {
+                  type: "text",
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: "Search...",
+                  autoFocus: true,
+                  className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
+              filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onSelect(prop);
+                    onOpenChange?.(false);
+                  },
+                  className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      import_icons27.Icon,
+                      {
+                        icon: prop.icon,
+                        size: "sm",
+                        className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label })
+                  ]
+                },
+                prop.id
+              )),
+              filteredProperties.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+            ] })
+          ] })
+        )
+      }
+    ) })
+  ] });
+};
+PropertySelector.displayName = "PropertySelector";
+
+// src/components/ui/filter/kebab-menu.tsx
+var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"));
+var import_icons28 = require("@l3mpire/icons");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var KebabMenu = ({
+  onConvertToAdvanced,
+  onDelete,
+  open,
+  onOpenChange,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
+  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    PopoverPrimitive6.Content,
+    {
+      sideOffset: 4,
+      align: "end",
+      className: cn(
+        "z-50 flex flex-col p-xs 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-[210px]"
+      ),
+      children: [
+        onConvertToAdvanced && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onConvertToAdvanced();
+              onOpenChange?.(false);
+            },
+            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_icons28.Icon,
+                {
+                  icon: import_icons28.faArrowRightOutline,
+                  size: "sm",
+                  className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
+            ]
+          }
+        ),
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
+        onDelete && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onDelete();
+              onOpenChange?.(false);
+            },
+            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_icons28.Icon,
+                {
+                  icon: import_icons28.faTrashOutline,
+                  size: "sm",
+                  className: "shrink-0 text-[var(--color-destructive)]"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
+            ]
+          }
+        )
+      ]
+    }
+  ) })
+] });
+KebabMenu.displayName = "KebabMenu";
+
+// src/components/ui/filter/filter-editor.tsx
+var React41 = __toESM(require("react"));
+var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"));
+var import_icons29 = require("@l3mpire/icons");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var FilterEditor = ({
+  propertyDef,
+  condition,
+  mode,
+  onUpdate,
+  onClose,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [view, setView] = React41.useState(
+    mode === "add" ? "value" : "operator"
+  );
+  const [localOperator, setLocalOperator] = React41.useState(
+    condition.operator
+  );
+  const [localValue, setLocalValue] = React41.useState(
+    condition.value
+  );
+  React41.useEffect(() => {
+    if (open) {
+      setView(mode === "add" ? "value" : "operator");
+      setLocalOperator(condition.operator);
+      setLocalValue(condition.value);
+    }
+  }, [open, mode, condition.operator, condition.value]);
+  const handleOperatorSelect = (op) => {
+    setLocalOperator(op);
+    if (isNoValueOperator(op)) {
+      onUpdate({ ...condition, operator: op, value: null });
+      onOpenChange?.(false);
+      onClose();
+    } else {
+      if (op !== localOperator) {
+        setLocalValue(null);
+      }
+      setView("value");
+    }
+  };
+  const handleSubmit = () => {
+    onUpdate({ ...condition, operator: localOperator, value: localValue });
+    onOpenChange?.(false);
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(PopoverPrimitive7.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      PopoverPrimitive7.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-[240px]"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              import_icons29.Icon,
+              {
+                icon: propertyDef.icon,
+                size: "sm",
+                className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-medium leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
+            localOperator && view === "value" && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setView("operator"),
+                className: "ml-auto text-xs font-regular text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                children: [
+                  localOperator,
+                  " \u25BE"
+                ]
+              }
+            )
+          ] }),
+          view === "operator" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            OperatorList,
+            {
+              dataType: propertyDef.type,
+              activeOperator: localOperator,
+              onSelect: handleOperatorSelect
+            }
+          ) }) : localOperator && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            ValueInput,
+            {
+              dataType: propertyDef.type,
+              operator: localOperator,
+              value: localValue,
+              onChange: setLocalValue,
+              onSubmit: handleSubmit,
+              options: propertyDef.options
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+FilterEditor.displayName = "FilterEditor";
+
+// src/components/ui/filter/interactive-filter-chip.tsx
+var React42 = __toESM(require("react"));
+var PopoverPrimitive8 = __toESM(require("@radix-ui/react-popover"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function formatFilterValue(value) {
+  if (value == null) return void 0;
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (value instanceof Date) {
+    return value.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) return void 0;
+    if (value.length === 2 && typeof value[0] === "number") {
+      return `${value[0]} \u2013 ${value[1]}`;
+    }
+    return value[0];
+  }
+  return String(value);
+}
+function getBadgeCount(value) {
+  if (Array.isArray(value) && value.length > 1 && typeof value[0] === "string") {
+    return value.length;
+  }
+  return void 0;
+}
+var SegmentPopover = ({
+  open,
+  onOpenChange,
+  trigger,
+  children,
+  align = "start",
+  minWidth = "240px"
+}) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(PopoverPrimitive8.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive8.Trigger, { asChild: true, children: trigger }),
+  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    PopoverPrimitive8.Content,
+    {
+      sideOffset: 4,
+      align,
+      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"
+      ),
+      style: { minWidth },
+      children
+    }
+  ) })
+] });
+var InteractiveFilterChip = ({
+  propertyDef,
+  condition,
+  properties,
+  mode = "edit",
+  autoOpen = false,
+  onUpdate,
+  onPropertyChange,
+  onDelete,
+  onConvertToAdvanced,
+  className
+}) => {
+  const [operatorOpen, setOperatorOpen] = React42.useState(false);
+  const [valueOpen, setValueOpen] = React42.useState(false);
+  const [propertyOpen, setPropertyOpen] = React42.useState(false);
+  const [kebabOpen, setKebabOpen] = React42.useState(false);
+  React42.useEffect(() => {
+    if (autoOpen && condition.operator && !isNoValueOperator(condition.operator)) {
+      const t = setTimeout(() => setValueOpen(true), 50);
+      return () => clearTimeout(t);
+    }
+  }, []);
+  const handleOperatorSelect = (op) => {
+    if (isNoValueOperator(op)) {
+      onUpdate({ ...condition, operator: op, value: null });
+      setOperatorOpen(false);
+    } else {
+      const resetValue = op !== condition.operator ? null : condition.value;
+      onUpdate({ ...condition, operator: op, value: resetValue });
+      setOperatorOpen(false);
+      if (resetValue == null) {
+        setTimeout(() => setValueOpen(true), 100);
+      }
+    }
+  };
+  const handleValueChange = (val) => {
+    onUpdate({ ...condition, value: val });
+  };
+  const handleValueSubmit = () => {
+    setValueOpen(false);
+  };
+  const hasOperator = !!condition.operator;
+  const displayValue = formatFilterValue(condition.value);
+  const hasValue = hasOperator && displayValue != null;
+  const badgeCount = getBadgeCount(condition.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center overflow-clip",
+        "bg-filter-chip-bg border border-filter-chip-border rounded-md",
+        className
+      ),
+      children: [
+        properties ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          PropertySelector,
+          {
+            properties,
+            onSelect: (prop) => {
+              onPropertyChange?.(prop);
+              setPropertyOpen(false);
+            },
+            open: propertyOpen,
+            onOpenChange: setPropertyOpen,
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              FilterChipSegment,
+              {
+                segmentType: "property",
+                hasBorder: true,
+                icon: propertyDef.icon,
+                label: propertyDef.label,
+                onClick: () => setPropertyOpen(true)
+              }
+            ) })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          FilterChipSegment,
+          {
+            segmentType: "property",
+            hasBorder: true,
+            icon: propertyDef.icon,
+            label: propertyDef.label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          SegmentPopover,
+          {
+            open: operatorOpen,
+            onOpenChange: setOperatorOpen,
+            minWidth: "180px",
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              FilterChipSegment,
+              {
+                segmentType: hasOperator ? "operator" : "placeholder",
+                hasBorder: true,
+                label: hasOperator ? condition.operator : "Select condition",
+                onClick: () => setOperatorOpen(true)
+              }
+            ) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              OperatorList,
+              {
+                dataType: propertyDef.type,
+                activeOperator: condition.operator,
+                onSelect: handleOperatorSelect
+              }
+            ) })
+          }
+        ),
+        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          SegmentPopover,
+          {
+            open: valueOpen,
+            onOpenChange: setValueOpen,
+            minWidth: "240px",
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              FilterChipSegment,
+              {
+                segmentType: hasValue ? "value" : "placeholder",
+                hasBorder: true,
+                label: hasValue ? displayValue : "Enter value",
+                badgeCount,
+                onClick: () => setValueOpen(true)
+              }
+            ) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              ValueInput,
+              {
+                dataType: propertyDef.type,
+                operator: condition.operator,
+                value: condition.value,
+                onChange: handleValueChange,
+                onSubmit: handleValueSubmit,
+                options: propertyDef.options
+              }
+            )
+          }
+        ),
+        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          FilterChipSegment,
+          {
+            segmentType: "value",
+            hasBorder: true,
+            label: condition.operator
+          }
+        ),
+        hasOperator && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          KebabMenu,
+          {
+            open: kebabOpen,
+            onOpenChange: setKebabOpen,
+            onConvertToAdvanced,
+            onDelete,
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              FilterChipSegment,
+              {
+                segmentType: "button",
+                onKebabClick: (e) => {
+                  e.stopPropagation();
+                  setKebabOpen(true);
+                }
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+InteractiveFilterChip.displayName = "InteractiveFilterChip";
+
+// src/components/ui/filter/filter-system.tsx
+var React46 = __toESM(require("react"));
+
+// src/components/ui/filter/advanced-chip.tsx
+var React43 = __toESM(require("react"));
+var import_icons30 = require("@l3mpire/icons");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var AdvancedChip = React43.forwardRef(
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center overflow-clip",
+        "bg-[var(--color-primary)]/5 border border-[var(--color-primary)]/30 rounded-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "button",
+          {
+            ref,
+            type: "button",
+            onClick,
+            className: "flex items-center gap-sm px-base py-sm cursor-pointer transition-colors hover:bg-[var(--color-primary)]/10",
+            ...props,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-primary)]", children: "Advanced filter" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+            ]
+          }
+        ),
+        onClear && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "w-px h-4 bg-[var(--color-primary)]/20" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onClear();
+              },
+              className: "flex items-center justify-center p-sm cursor-pointer transition-colors hover:bg-[var(--color-primary)]/10",
+              "aria-label": "Clear all advanced filters",
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons30.Icon, { icon: import_icons30.faXmarkOutline, size: "xs", className: "text-[var(--color-primary)]" })
+            }
+          )
+        ] })
+      ]
+    }
+  )
+);
+AdvancedChip.displayName = "AdvancedChip";
+
+// src/components/ui/filter/advanced-popover.tsx
+var React45 = __toESM(require("react"));
+var PopoverPrimitive10 = __toESM(require("@radix-ui/react-popover"));
+
+// src/components/ui/filter/advanced-row.tsx
+var React44 = __toESM(require("react"));
+var PopoverPrimitive9 = __toESM(require("@radix-ui/react-popover"));
+var import_icons31 = require("@l3mpire/icons");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var AdvancedRow = ({
+  connector,
+  propertyDef,
+  condition,
+  properties,
+  onUpdate,
+  onPropertyChange,
+  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)) {
+      onUpdate({ ...condition, operator: op, value: null });
+    } else {
+      const resetValue = op !== condition.operator ? null : condition.value;
+      onUpdate({ ...condition, operator: op, value: resetValue });
+    }
+    setOperatorOpen(false);
+  };
+  const handleValueChange = (val) => {
+    onUpdate({ ...condition, value: val });
+  };
+  const displayValue = condition.value == null ? "" : typeof condition.value === "string" ? condition.value : String(condition.value);
+  const groupedProps = React44.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const p of properties) {
+      const arr = map.get(p.group) ?? [];
+      arr.push(p);
+      map.set(p.group, arr);
+    }
+    return map;
+  }, [properties]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "group flex items-center gap-base py-xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "span",
+      {
+        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)]"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "flex items-center justify-end gap-2xs", children: [
+          connector,
+          connector === "And" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: import_icons31.faRefreshOutline, size: "xs", className: "text-[var(--color-muted-foreground)]" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-xs px-base py-sm rounded-base border border-[var(--color-input)] bg-[var(--color-background)] cursor-pointer hover:bg-[var(--color-accent)] transition-colors",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: propertyDef.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap", children: [
+              propertyDef.groupLabel,
+              " \u203A ",
+              propertyDef.label
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "currentColor", className: "text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M2.5 4L5 6.5L7.5 4", stroke: "currentColor", strokeWidth: "1.2", fill: "none", strokeLinecap: "round" }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        PopoverPrimitive9.Content,
+        {
+          sideOffset: 4,
+          align: "start",
+          className: cn(
+            "z-50 flex flex-col p-xs overflow-clip max-h-[300px] overflow-y-auto",
+            "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",
+            "min-w-[200px]"
+          ),
+          children: Array.from(groupedProps.entries()).map(([group, props]) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-col", children: props.map((p) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onPropertyChange(p);
+                setPropertyOpen(false);
+              },
+              className: cn(
+                "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+                "hover:bg-[var(--color-dropdown-item-hover)]",
+                p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
+              ]
+            },
+            p.id
+          )) }, group))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center gap-xs px-base py-sm rounded-base border border-[var(--color-input)] bg-[var(--color-background)] cursor-pointer hover:bg-[var(--color-accent)] transition-colors",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap", children: condition.operator ?? "select" }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "currentColor", className: "text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M2.5 4L5 6.5L7.5 4", stroke: "currentColor", strokeWidth: "1.2", fill: "none", strokeLinecap: "round" }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        PopoverPrimitive9.Content,
+        {
+          sideOffset: 4,
+          align: "start",
+          className: cn(
+            "z-50 flex flex-col p-xs 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",
+            "min-w-[160px]"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            OperatorList,
+            {
+              dataType: propertyDef.type,
+              activeOperator: condition.operator,
+              onSelect: handleOperatorSelect
+            }
+          )
+        }
+      ) })
+    ] }),
+    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "input",
+      {
+        type: "text",
+        value: displayValue,
+        onChange: (e) => handleValueChange(e.target.value),
+        placeholder: "Enter value...",
+        className: cn(
+          "flex-1 min-w-[100px] px-base py-sm rounded-base 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"
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "button",
+      {
+        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)]",
+        "aria-label": "Remove filter",
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons31.Icon, { icon: import_icons31.faEllipsisVerticalOutline, size: "sm", className: "text-[var(--color-muted-foreground)]" })
+      }
+    )
+  ] });
+};
+AdvancedRow.displayName = "AdvancedRow";
+
+// src/components/ui/filter/advanced-popover.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var AdvancedPopover = ({
+  filters,
+  properties,
+  onFiltersChange,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [addSelectorOpen, setAddSelectorOpen] = React45.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) => {
+    onFiltersChange(filters.filter((f) => f.id !== id));
+  };
+  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);
+  };
+  const handleClearAll = () => {
+    onFiltersChange([]);
+    onOpenChange?.(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PopoverPrimitive10.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      PopoverPrimitive10.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-[520px] max-w-[90vw]"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsx)(
+                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__ */ (0, import_jsx_runtime48.jsx)("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No advanced filters yet." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between px-base py-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              PropertySelector,
+              {
+                properties,
+                onSelect: handleAddFilter,
+                open: addSelectorOpen,
+                onOpenChange: setAddSelectorOpen,
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  "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"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleClearAll,
+                className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                children: "Clear all filters"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+AdvancedPopover.displayName = "AdvancedPopover";
+
+// src/components/ui/filter/filter-system.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var FilterSystem = ({
+  properties,
+  filterState,
+  onFilterStateChange,
+  sortFields,
+  children,
+  actions,
+  className
+}) => {
+  const [propertySelectorOpen, setPropertySelectorOpen] = React46.useState(false);
+  const [advancedOpen, setAdvancedOpen] = React46.useState(false);
+  const [pendingFilterId, setPendingFilterId] = React46.useState(null);
+  const handleAddFilter = (property) => {
+    const newFilter = createFilterWithDefaults(property.id, property.type);
+    if (newFilter.operator && isNoValueOperator(newFilter.operator)) {
+      onFilterStateChange({
+        ...filterState,
+        basicFilters: [...filterState.basicFilters, newFilter]
+      });
+      return;
+    }
+    setPendingFilterId(newFilter.id);
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: [...filterState.basicFilters, newFilter]
+    });
+  };
+  const handleUpdateFilter = (updated) => {
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.map(
+        (f) => f.id === updated.id ? updated : f
+      )
+    });
+    if (pendingFilterId === updated.id) {
+      setPendingFilterId(null);
+    }
+  };
+  const handleDeleteFilter = (id) => {
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.filter((f) => f.id !== id)
+    });
+  };
+  const handlePropertyChange = (filterId, newProp) => {
+    const newCondition = createFilterWithDefaults(newProp.id, newProp.type);
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.map(
+        (f) => f.id === filterId ? { ...newCondition, id: filterId } : f
+      )
+    });
+    if (newCondition.operator && !isNoValueOperator(newCondition.operator)) {
+      setPendingFilterId(filterId);
+    }
+  };
+  const handleConvertToAdvanced = (id) => {
+    const filter = filterState.basicFilters.find((f) => f.id === id);
+    if (!filter) return;
+    onFilterStateChange({
+      ...filterState,
+      basicFilters: filterState.basicFilters.filter((f) => f.id !== id),
+      advancedFilters: [...filterState.advancedFilters, filter]
+    });
+  };
+  const handleAdvancedFiltersChange = (filters) => {
+    onFilterStateChange({
+      ...filterState,
+      advancedFilters: filters
+    });
+  };
+  const handleClearAdvanced = () => {
+    onFilterStateChange({
+      ...filterState,
+      advancedFilters: []
+    });
+  };
+  const handleSortChange = (field, direction) => {
+    onFilterStateChange({
+      ...filterState,
+      sort: { field, direction }
+    });
+  };
+  const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
+  const hasAdvanced = filterState.advancedFilters.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(FilterBar, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(FilterBarLeft, { children: [
+      children,
+      sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        SortButton,
+        {
+          fields: sortFields,
+          activeField: filterState.sort.field,
+          direction: filterState.sort.direction,
+          onChange: handleSortChange
+        }
+      ),
+      hasAdvanced && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        AdvancedPopover,
+        {
+          filters: filterState.advancedFilters,
+          properties,
+          onFiltersChange: handleAdvancedFiltersChange,
+          open: advancedOpen,
+          onOpenChange: setAdvancedOpen,
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            AdvancedChip,
+            {
+              count: filterState.advancedFilters.length,
+              onClick: () => setAdvancedOpen(true),
+              onClear: handleClearAdvanced
+            }
+          )
+        }
+      ),
+      filterState.basicFilters.map((filter) => {
+        const propDef = getPropertyDef(filter.propertyId);
+        if (!propDef) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          InteractiveFilterChip,
+          {
+            propertyDef: propDef,
+            condition: filter,
+            properties,
+            mode: pendingFilterId === filter.id ? "add" : "edit",
+            autoOpen: pendingFilterId === filter.id,
+            onUpdate: handleUpdateFilter,
+            onPropertyChange: (newProp) => handlePropertyChange(filter.id, newProp),
+            onDelete: () => handleDeleteFilter(filter.id),
+            onConvertToAdvanced: () => handleConvertToAdvanced(filter.id)
+          },
+          filter.id
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        PropertySelector,
+        {
+          properties,
+          onSelect: handleAddFilter,
+          open: propertySelectorOpen,
+          onOpenChange: setPropertySelectorOpen,
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            FilterBarButton,
+            {
+              count: filterState.basicFilters.length + filterState.advancedFilters.length || void 0
+            }
+          )
+        }
+      )
+    ] }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FilterBarRight, { children: actions })
+  ] });
+};
+FilterSystem.displayName = "FilterSystem";
+
+// src/components/ui/date-picker.tsx
+var React47 = __toESM(require("react"));
+var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
+var import_icons32 = require("@l3mpire/icons");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getWeekdayIndex(date) {
+  return (date.getDay() + 6) % 7;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isInRange(date, from, to) {
+  const t = date.getTime();
+  return t >= from.getTime() && t <= to.getTime();
+}
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DatePickerContext = React47.createContext(
+  null
+);
+function useDatePickerContext() {
+  const ctx = React47.useContext(DatePickerContext);
+  if (!ctx)
+    throw new Error("DatePicker compound components must be used within <DatePicker>");
+  return ctx;
+}
+var DatePicker = React47.forwardRef(
+  ({
+    className,
+    mode = "single",
+    value,
+    onValueChange,
+    defaultMonth,
+    defaultYear,
+    children,
+    ...props
+  }, ref) => {
+    const today = React47.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+    const initialDate = React47.useMemo(() => {
+      if (value) {
+        if (value instanceof Date) return value;
+        return value.from;
+      }
+      return today;
+    }, []);
+    const [month, setMonth] = React47.useState(
+      defaultMonth ?? initialDate.getMonth()
+    );
+    const [year, setYear] = React47.useState(
+      defaultYear ?? initialDate.getFullYear()
+    );
+    const [hoveredDate, setHoveredDate] = React47.useState();
+    const goToPrevMonth = React47.useCallback(() => {
+      setMonth((m) => {
+        if (m === 0) {
+          setYear((y) => y - 1);
+          return 11;
+        }
+        return m - 1;
+      });
+    }, []);
+    const goToNextMonth = React47.useCallback(() => {
+      setMonth((m) => {
+        if (m === 11) {
+          setYear((y) => y + 1);
+          return 0;
+        }
+        return m + 1;
+      });
+    }, []);
+    const onSelect = React47.useCallback(
+      (date) => {
+        if (mode === "single") {
+          onValueChange?.(date);
+          return;
+        }
+        if (!value || value instanceof Date) {
+          onValueChange?.({ from: date });
+          return;
+        }
+        const range = value;
+        if (range.to || date.getTime() < range.from.getTime()) {
+          onValueChange?.({ from: date });
+        } else {
+          onValueChange?.({ from: range.from, to: date });
+        }
+      },
+      [mode, value, onValueChange]
+    );
+    const ctxValue = React47.useMemo(
+      () => ({
+        mode,
+        selected: value,
+        onSelect,
+        month,
+        year,
+        setMonth,
+        setYear,
+        goToPrevMonth,
+        goToNextMonth,
+        today,
+        hoveredDate,
+        setHoveredDate
+      }),
+      [
+        mode,
+        value,
+        onSelect,
+        month,
+        year,
+        goToPrevMonth,
+        goToNextMonth,
+        today,
+        hoveredDate
+      ]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col overflow-clip",
+          "bg-datepicker-bg border border-datepicker-border rounded-md shadow-lg",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DatePicker.displayName = "DatePicker";
+function defaultFormatDate(date) {
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+var DatePickerSelects = React47.forwardRef(({ className, formatDate = defaultFormatDate, ...props }, ref) => {
+  const { selected } = useDatePickerContext();
+  const fromDate = selected instanceof Date ? selected : selected?.from;
+  const toDate = selected instanceof Date ? void 0 : selected?.to;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-start pt-lg px-lg", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons32.Icon, { icon: import_icons32.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          import_icons32.Icon,
+          {
+            icon: import_icons32.faArrowRightOutline,
+            size: "sm",
+            className: "shrink-0 text-datepicker-header-weekday"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons32.Icon, { icon: import_icons32.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        ] })
+      ] })
+    }
+  );
+});
+DatePickerSelects.displayName = "DatePickerSelects";
+var DatePickerDay = ({ date, isOutside }) => {
+  const { mode, selected, onSelect, today, hoveredDate, setHoveredDate } = useDatePickerContext();
+  const isToday = isSameDay(date, today);
+  const isSelected = selected instanceof Date ? isSameDay(date, selected) : selected?.from ? isSameDay(date, selected.from) || (selected.to ? isSameDay(date, selected.to) : false) : false;
+  const isRangeStart = mode === "range" && selected && !(selected instanceof Date) && selected.from && isSameDay(date, selected.from);
+  const isRangeEnd = mode === "range" && selected && !(selected instanceof Date) && selected.to && isSameDay(date, selected.to);
+  const inRange = mode === "range" && selected && !(selected instanceof Date) && selected.from && selected.to && !isSelected && isInRange(date, selected.from, selected.to);
+  const inPreviewRange = mode === "range" && selected && !(selected instanceof Date) && selected.from && !selected.to && hoveredDate && !isSelected && hoveredDate.getTime() > selected.from.getTime() && isInRange(date, selected.from, hoveredDate);
+  const isInRangeOrPreview = inRange || inPreviewRange;
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: () => !isOutside && onSelect(date),
+      onMouseEnter: () => mode === "range" && setHoveredDate(date),
+      onMouseLeave: () => mode === "range" && setHoveredDate(void 0),
+      disabled: isOutside,
+      className: cn(
+        "relative flex flex-col items-center justify-center w-9 rounded-full p-2 cursor-pointer transition-colors",
+        "text-sm font-medium leading-sm text-center",
+        // Default
+        !isOutside && !isSelected && !isInRangeOrPreview && "text-datepicker-day-text-default hover:bg-datepicker-day-bg-hover",
+        // Outside month (disabled)
+        isOutside && "text-datepicker-day-text-disabled cursor-default",
+        // Selected
+        isSelected && "bg-datepicker-day-bg-selected text-datepicker-day-text-selected",
+        // In range
+        isInRangeOrPreview && "bg-datepicker-day-bg-range text-datepicker-day-text-range",
+        // Range start/end get full rounded; in-range items could be less rounded
+        (isRangeStart || isRangeEnd) && "rounded-full"
+      ),
+      children: [
+        date.getDate(),
+        isToday && !isOutside && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
+      ]
+    }
+  );
+};
+var DatePickerCalendar = React47.forwardRef(({ className, header, ...props }, ref) => {
+  const { month, year, goToPrevMonth, goToNextMonth } = useDatePickerContext();
+  const weeks = React47.useMemo(() => {
+    const firstDay = new Date(year, month, 1);
+    const startOffset = getWeekdayIndex(firstDay);
+    const daysInMonth = getDaysInMonth(year, month);
+    const daysInPrevMonth = getDaysInMonth(
+      month === 0 ? year - 1 : year,
+      month === 0 ? 11 : month - 1
+    );
+    const days = [];
+    for (let i = startOffset - 1; i >= 0; i--) {
+      const d = daysInPrevMonth - i;
+      days.push({
+        date: new Date(
+          month === 0 ? year - 1 : year,
+          month === 0 ? 11 : month - 1,
+          d
+        ),
+        isOutside: true
+      });
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      days.push({ date: new Date(year, month, d), isOutside: false });
+    }
+    const remaining = 42 - days.length;
+    for (let d = 1; d <= remaining; d++) {
+      days.push({
+        date: new Date(
+          month === 11 ? year + 1 : year,
+          month === 11 ? 0 : month + 1,
+          d
+        ),
+        isOutside: true
+      });
+    }
+    const result = [];
+    for (let i = 0; i < days.length; i += 7) {
+      result.push(days.slice(i, i + 7));
+    }
+    return result;
+  }, [month, year]);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col", className),
+      ...props,
+      children: [
+        header,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
+              MONTH_NAMES[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: goToPrevMonth,
+                  className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
+                  "aria-label": "Previous month",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons32.Icon, { icon: import_icons32.faChevronLeftOutline, size: "xs", className: "text-datepicker-header-nav" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: goToNextMonth,
+                  className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
+                  "aria-label": "Next month",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons32.Icon, { icon: import_icons32.faChevronRightOutline, size: "xs", className: "text-datepicker-header-nav" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              "span",
+              {
+                className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
+                children: day
+              },
+              day
+            )) }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              DatePickerDay,
+              {
+                date: day.date,
+                isOutside: day.isOutside
+              },
+              di
+            )) }, wi)) })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+DatePickerCalendar.displayName = "DatePickerCalendar";
+var DatePickerSuggestions = React47.forwardRef(
+  ({ className, suggestions, formatDate = defaultFormatDate, ...props }, ref) => {
+    const { onSelect, mode } = useDatePickerContext();
+    const onValueChange = React47.useContext(DatePickerContext) ? void 0 : void 0;
+    const ctx = useDatePickerContext();
+    const handleClick = (suggestion) => {
+      const val = suggestion.getValue();
+      if (val instanceof Date) {
+        ctx.onSelect(val);
+      } else {
+        ctx.onSelect(val.from);
+        if (val.to) {
+          setTimeout(() => ctx.onSelect(val.to), 0);
+        }
+      }
+    };
+    const formatSuggestionDate = (suggestion) => {
+      const val = suggestion.getValue();
+      if (val instanceof Date) {
+        return formatDate(val);
+      }
+      const from = formatDate(val.from);
+      const to = val.to ? formatDate(val.to) : "";
+      return to ? `${from} - ${to}` : from;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col border-l border-datepicker-border self-stretch shrink-0",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleClick(suggestion),
+              className: "flex items-center gap-sm p-base rounded-base hover:bg-datepicker-suggestion-hover transition-colors cursor-pointer text-left",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+              ]
+            },
+            i
+          )) })
+        ]
+      }
+    );
+  }
+);
+DatePickerSuggestions.displayName = "DatePickerSuggestions";
+var DatePickerFooter = React47.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-between p-lg",
+        "border-t border-datepicker-footer-border",
+        "bg-datepicker-bg",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+DatePickerFooter.displayName = "DatePickerFooter";
+var DatePickerPanel = React47.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("flex items-start", className),
+      ...props,
+      children
+    }
+  )
+);
+DatePickerPanel.displayName = "DatePickerPanel";
+var DatePickerRoot = PopoverPrimitive11.Root;
+var DatePickerTrigger = PopoverPrimitive11.Trigger;
+var DatePickerPopover = React47.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  PopoverPrimitive11.Content,
+  {
+    ref,
+    sideOffset,
+    align,
+    className: cn(
+      "z-50",
+      "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 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props,
+    children
+  }
+) }));
+DatePickerPopover.displayName = "DatePickerPopover";
+function getDefaultSuggestions(referenceDate) {
+  const now = referenceDate ?? /* @__PURE__ */ new Date();
+  const today = startOfDay(now);
+  const dayOfWeek = getWeekdayIndex(today);
+  const startOfThisWeek = new Date(today);
+  startOfThisWeek.setDate(today.getDate() - dayOfWeek);
+  const endOfThisWeek = new Date(startOfThisWeek);
+  endOfThisWeek.setDate(startOfThisWeek.getDate() + 6);
+  const startOfThisMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+  const endOfThisMonth = new Date(
+    today.getFullYear(),
+    today.getMonth() + 1,
+    0
+  );
+  const startOfThisYear = new Date(today.getFullYear(), 0, 1);
+  const endOfThisYear = new Date(today.getFullYear(), 11, 31);
+  const startOfLastWeek = new Date(startOfThisWeek);
+  startOfLastWeek.setDate(startOfThisWeek.getDate() - 7);
+  const endOfLastWeek = new Date(startOfThisWeek);
+  endOfLastWeek.setDate(startOfThisWeek.getDate() - 1);
+  const startOfLastMonth = new Date(
+    today.getFullYear(),
+    today.getMonth() - 1,
+    1
+  );
+  const endOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
+  const startOfLastYear = new Date(today.getFullYear() - 1, 0, 1);
+  const endOfLastYear = new Date(today.getFullYear() - 1, 11, 31);
+  return [
+    { label: "Today", getValue: () => today },
+    {
+      label: "This week",
+      getValue: () => ({ from: startOfThisWeek, to: endOfThisWeek })
+    },
+    {
+      label: "This month",
+      getValue: () => ({ from: startOfThisMonth, to: endOfThisMonth })
+    },
+    {
+      label: "This year",
+      getValue: () => ({ from: startOfThisYear, to: endOfThisYear })
+    },
+    {
+      label: "Last week",
+      getValue: () => ({ from: startOfLastWeek, to: endOfLastWeek })
+    },
+    {
+      label: "Last month",
+      getValue: () => ({ from: startOfLastMonth, to: endOfLastMonth })
+    },
+    {
+      label: "Last year",
+      getValue: () => ({ from: startOfLastYear, to: endOfLastYear })
+    }
+  ];
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AdvancedChip,
+  AdvancedPopover,
+  AdvancedRow,
   Avatar,
   AvatarCell,
   Badge,
@@ -4810,9 +7414,19 @@ SidePanelContent.displayName = "SidePanelContent";
   ButtonCell,
   Checkbox,
   ChipInput,
+  DEFAULT_OPERATOR_BY_TYPE,
   DataTable,
   DataTablePagination,
   DateCell,
+  DatePicker,
+  DatePickerCalendar,
+  DatePickerFooter,
+  DatePickerPanel,
+  DatePickerPopover,
+  DatePickerRoot,
+  DatePickerSelects,
+  DatePickerSuggestions,
+  DatePickerTrigger,
   Dialog,
   DropdownMenu,
   DropdownMenuClear,
@@ -4826,8 +7440,18 @@ SidePanelContent.displayName = "SidePanelContent";
   EditableCell,
   EmailCell,
   EmptyState,
+  FilterBar,
+  FilterBarButton,
+  FilterBarLeft,
+  FilterBarRight,
+  FilterChip,
+  FilterChipSegment,
+  FilterEditor,
+  FilterSystem,
   InfoMessage,
   InputLabel,
+  InteractiveFilterChip,
+  KebabMenu,
   Link,
   LinkCell,
   Modal,
@@ -4842,8 +7466,13 @@ SidePanelContent.displayName = "SidePanelContent";
   ModalTrigger,
   NumberCell,
   NumberInput,
+  OPERATORS_BY_TYPE,
+  OperatorList,
+  OperatorSelector,
   ProductLogo,
+  PropertySelector,
   RowActions,
+  SaveViewButton,
   SearchBar,
   Select,
   SidePanel,
@@ -4856,6 +7485,7 @@ SidePanelContent.displayName = "SidePanelContent";
   SidebarHeadingItem,
   SidebarItem,
   SidebarSection,
+  SortButton,
   StatusCell,
   Switch,
   TabContent,
@@ -4885,14 +7515,21 @@ SidePanelContent.displayName = "SidePanelContent";
   UserMenu,
   UserMenuInfoRow,
   UserMenuSection,
+  ValueInput,
   avatarVariants,
   badgeVariants,
   buttonVariants,
   chipInputVariants,
   cn,
+  createFilterWithDefaults,
   emptyStateVariants,
+  filterChipSegmentVariants,
   flexRender,
+  getDefaultOperator,
+  getDefaultSuggestions,
+  getValueInputType,
   infoMessageVariants,
+  isNoValueOperator,
   linkVariants,
   modalVariants,
   productLogoVariants,