@multiplatform.one/table 6.0.4 → 6.3.0

package/dist/jsx/components/DataTableDateFilter/index.native.js

@@ -37,6 +37,7 @@ var DataTableDateFilter_exports = {};
 __export(DataTableDateFilter_exports, {
   DataTableDateFilter: () => DataTableDateFilter,
   applyDateFilter: () => applyDateFilter,
+  resolveDateFilterRange: () => resolveDateFilterRange,
   useDateFilter: () => useDateFilter
 });
 module.exports = __toCommonJS(DataTableDateFilter_exports);
@@ -46,11 +47,14 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react2 = __toESM(require("react"));
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
+var import_t = require("../../shared/t.native.js");
+var PRESET_VISIBLE_ROWS = 4;
+var PRESET_ROW_GAP_TOKEN = "$1";
 function DataTableDateFilter(param) {
   var {
     value,
     onChange,
-    placeholder = "Filter by date...",
+    placeholder = (0, import_t.t)("Filter by date..."),
     disabled = false,
     showPresets = true,
     customPresets = [],
@@ -58,45 +62,53 @@ function DataTableDateFilter(param) {
     minDate,
     maxDate
   } = param;
+  var _sizeTokens_sz, _pickerRange_start, _pickerRange_end;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   var sz = knobProps.sizeToken;
   var triggerMinWidth = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
   var popoverMinWidth = sz === "$3" ? 280 : sz === "$5" ? 360 : 320;
+  var tokens = (0, import_tamagui.getTokens)({
+    prefixed: true
+  });
+  var sizeTokens = tokens.size;
+  var presetRowHeight = Math.round((0, import_tamagui.getVariableValue)((_sizeTokens_sz = sizeTokens[sz]) !== null && _sizeTokens_sz !== void 0 ? _sizeTokens_sz : sizeTokens.$true));
+  var presetRowGap = Math.round((0, import_tamagui.getVariableValue)(tokens.space[PRESET_ROW_GAP_TOKEN]));
+  var presetListMaxHeight = PRESET_VISIBLE_ROWS * presetRowHeight + (PRESET_VISIBLE_ROWS - 1) * presetRowGap;
   var [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   var [activePresetId, setActivePresetId] = (0, import_react2.useState)(null);
   var defaultPresets = [{
     id: "today",
-    label: "Today",
+    label: (0, import_t.t)("Today"),
     operator: "isToday",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
       size: 16
     })
   }, {
     id: "yesterday",
-    label: "Yesterday",
+    label: (0, import_t.t)("Yesterday"),
     operator: "isYesterday",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
       size: 16
     })
   }, {
     id: "thisWeek",
-    label: "This Week",
+    label: (0, import_t.t)("This Week"),
     operator: "isThisWeek",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarDotsIcon, {
       size: 16
     })
   }, {
     id: "thisMonth",
-    label: "This Month",
+    label: (0, import_t.t)("This Month"),
     operator: "isThisMonth",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarDotsIcon, {
       size: 16
     })
   }, {
     id: "last7days",
-    label: "Last 7 Days",
+    label: (0, import_t.t)("Last 7 Days"),
     operator: "isBetween",
     values: [new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()],
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {
@@ -104,7 +116,7 @@ function DataTableDateFilter(param) {
     })
   }, {
     id: "last30days",
-    label: "Last 30 Days",
+    label: (0, import_t.t)("Last 30 Days"),
     operator: "isBetween",
     values: [new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString()],
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarBlankIcon, {
@@ -112,14 +124,14 @@ function DataTableDateFilter(param) {
     })
   }, {
     id: "empty",
-    label: "Is Empty",
+    label: (0, import_t.t)("Is Empty"),
     operator: "isEmpty",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
       size: 16
     })
   }, {
     id: "notEmpty",
-    label: "Is Not Empty",
+    label: (0, import_t.t)("Is Not Empty"),
     operator: "isNotEmpty",
     icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ClockIcon, {
       size: 16
@@ -136,7 +148,6 @@ function DataTableDateFilter(param) {
     };
     setActivePresetId(preset.id);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    setIsOpen(false);
   };
   var handleCustomDateSelect = function handleCustomDateSelect2(dateValue) {
     var operator = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "is";
@@ -144,6 +155,7 @@ function DataTableDateFilter(param) {
       operator,
       value: dateValue
     };
+    setActivePresetId(null);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
   };
   var handleDateRangeSelect = function handleDateRangeSelect2(startDate, endDate) {
@@ -151,250 +163,437 @@ function DataTableDateFilter(param) {
       operator: "isBetween",
       values: [startDate, endDate]
     };
+    setActivePresetId(null);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
   };
+  var pickerRange = (0, import_react2.useMemo)(function () {
+    return resolveDateFilterRange(value);
+  }, [value]);
+  var commitCustomRange = function commitCustomRange2(start, end) {
+    setActivePresetId(null);
+    if (start && end) {
+      handleDateRangeSelect(startOfDay(start).toISOString(), endOfDay(end).toISOString());
+    } else if (start) {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        operator: "isOnOrAfter",
+        value: startOfDay(start).toISOString()
+      });
+    } else if (end) {
+      onChange === null || onChange === void 0 ? void 0 : onChange({
+        operator: "isOnOrBefore",
+        value: endOfDay(end).toISOString()
+      });
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(void 0);
+    }
+  };
+  var handleStartDatePick = function handleStartDatePick2(date) {
+    var end = date && pickerRange.end && pickerRange.end < startOfDay(date) ? null : pickerRange.end;
+    commitCustomRange(date, end);
+  };
+  var handleEndDatePick = function handleEndDatePick2(date) {
+    var start = date && pickerRange.start && pickerRange.start > endOfDay(date) ? null : pickerRange.start;
+    commitCustomRange(start, date);
+  };
   var handleClear = function handleClear2() {
     setActivePresetId(null);
     onChange === null || onChange === void 0 ? void 0 : onChange(void 0);
-    setIsOpen(false);
   };
   var formatDate = function formatDate2(dateString) {
-    try {
-      return new Date(dateString).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric"
-      });
-    } catch (unused) {
-      return dateString;
-    }
+    var formatted = (0, import_theme.formatAbsoluteDate)(dateString, {
+      year: "always"
+    });
+    return formatted === "" ? dateString : formatted;
   };
   var getDisplayValue = function getDisplayValue2() {
     if (!value) return placeholder;
     switch (value.operator) {
       case "is":
-        return value.value ? `Is ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("Is {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isNot":
-        return value.value ? `Is not ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("Is not {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isBefore":
-        return value.value ? `Before ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("Before {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isAfter":
-        return value.value ? `After ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("After {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isOnOrBefore":
-        return value.value ? `On or before ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("On or before {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isOnOrAfter":
-        return value.value ? `On or after ${formatDate(value.value)}` : placeholder;
+        return value.value ? (0, import_t.t)("On or after {{date}}", {
+          date: formatDate(value.value)
+        }) : placeholder;
       case "isBetween":
-        return value.values ? `${formatDate(value.values[0])} - ${formatDate(value.values[1])}` : placeholder;
+        return value.values ? (0, import_t.t)("{{start}} - {{end}}", {
+          start: formatDate(value.values[0]),
+          end: formatDate(value.values[1])
+        }) : placeholder;
       case "isToday":
-        return "Today";
+        return (0, import_t.t)("Today");
       case "isYesterday":
-        return "Yesterday";
+        return (0, import_t.t)("Yesterday");
       case "isTomorrow":
-        return "Tomorrow";
+        return (0, import_t.t)("Tomorrow");
       case "isThisWeek":
-        return "This week";
+        return (0, import_t.t)("This week");
       case "isLastWeek":
-        return "Last week";
+        return (0, import_t.t)("Last week");
       case "isNextWeek":
-        return "Next week";
+        return (0, import_t.t)("Next week");
       case "isThisMonth":
-        return "This month";
+        return (0, import_t.t)("This month");
       case "isLastMonth":
-        return "Last month";
+        return (0, import_t.t)("Last month");
       case "isNextMonth":
-        return "Next month";
+        return (0, import_t.t)("Next month");
       case "isThisYear":
-        return "This year";
+        return (0, import_t.t)("This year");
       case "isLastYear":
-        return "Last year";
+        return (0, import_t.t)("Last year");
       case "isNextYear":
-        return "Next year";
+        return (0, import_t.t)("Next year");
       case "isEmpty":
-        return "Is empty";
+        return (0, import_t.t)("Is empty");
       case "isNotEmpty":
-        return "Is not empty";
+        return (0, import_t.t)("Is not empty");
       default:
         return placeholder;
     }
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
-      asChild: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
-        size: knobProps.sizeToken,
-        variant: "outlined",
-        disabled,
-        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
-          size: 16
-        }),
-        justifyContent: "flex-start",
-        minWidth: triggerMinWidth,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          flex: 1,
-          textAlign: "left",
-          color: value ? void 0 : "$color10",
-          fontSize: "$3",
-          numberOfLines: 1,
-          children: getDisplayValue()
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
-          size: 16
-        })]
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-      ...knobProps.borderRadius,
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      enterStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      exitStyle: {
-        x: 0,
-        y: -10,
-        opacity: 0
-      },
-      minWidth: popoverMinWidth,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...knobProps.panelPadding,
-        ...knobProps.gapLg,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          justifyContent: "space-between",
-          alignItems: "center",
+  return (
+    // LC-06: anchored editor — start-aligned to the trigger edge with
+    // collision handling (flip + clamp + resize inside the viewport).
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: "bottom-start",
+      offset: 4,
+      stayInFrame: true,
+      allowFlip: true,
+      resize: true,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          variant: "outlined",
+          disabled,
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CalendarIcon, {
+            size: 16
+          }),
+          justifyContent: "flex-start",
+          minWidth: triggerMinWidth,
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$5",
-            fontWeight: "600",
-            children: "Date Filter"
-          }), value && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-            size: "$2",
-            variant: "outlined",
-            onPress: handleClear,
-            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
-              size: 16
-            }),
-            children: "Clear"
+            flex: 1,
+            textAlign: "left",
+            // LC-40: while disabled, the placeholder tier ($color10) drops
+            // below AA on the washed chrome — pin to the lowest AA step.
+            color: disabled ? "$color11" : value ? void 0 : "$color10",
+            fontSize: "$3",
+            numberOfLines: 1,
+            children: getDisplayValue()
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+            size: 16
           })]
-        }), /* Quick Presets */
-        showPresets && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          gap: "$2",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$4",
-            fontWeight: "500",
-            children: "Quick Filters"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-            maxHeight: 120,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-              gap: "$1",
-              children: allPresets.map(function (preset) {
-                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                  size: knobProps.sizeToken,
-                  variant: "outlined",
-                  justifyContent: "flex-start",
-                  onPress: function onPress() {
-                    return handlePresetSelect(preset);
-                  },
-                  ...(activePresetId === preset.id ? {
-                    theme: "accent",
-                    backgroundColor: "$background"
-                  } : void 0),
-                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-                    fontSize: "$3",
-                    children: preset.label
-                  })
-                }, preset.id);
-              })
-            })
-          })]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Custom Date Selection */
-        /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$4",
-            fontWeight: "500",
-            children: "Custom Date"
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              flex: 1,
-              size: knobProps.sizeToken,
-              variant: "outlined",
-              onPress: function onPress() {
-                return handleCustomDateSelect((/* @__PURE__ */new Date()).toISOString(), "is");
-              },
-              children: "Today"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-              flex: 1,
-              size: knobProps.sizeToken,
-              variant: "outlined",
-              onPress: function onPress() {
-                return handleCustomDateSelect(new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString(), "is");
-              },
-              children: "Yesterday"
-            })]
-          }), /* Date Range */
-          /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$3",
-              fontWeight: "500",
-              children: "Date Range"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-              gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                flex: 1,
-                size: knobProps.sizeToken,
-                variant: "outlined",
-                onPress: function onPress() {
-                  return handleDateRangeSelect(new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString());
-                },
-                children: "Last 7 days"
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
-                flex: 1,
-                size: knobProps.sizeToken,
+        })
+      }),
+      /* Overlay contract: elevatedSurface + transition-paired enter/exit
+      motion (LC-24) — same fragments as the shared components
+      PopoverContent. The popper resize middleware caps the height to
+      the viewport; the ScrollView keeps every section reachable
+      instead of painting past the frame (LC-10). */
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+        ...knobProps.elevatedSurface,
+        transition: knobProps.transition,
+        enterStyle: {
+          opacity: 0,
+          y: -4,
+          scale: 0.97
+        },
+        exitStyle: {
+          opacity: 0,
+          y: -4,
+          scale: 0.97
+        },
+        minWidth: popoverMinWidth,
+        padding: 0,
+        overflow: "hidden",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.ScrollView, {
+          minHeight: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            ...knobProps.panelPadding,
+            ...knobProps.gapLg,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              justifyContent: "space-between",
+              alignItems: "center",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$5",
+                fontWeight: "600",
+                children: (0, import_t.t)("Date Filter")
+              }), value && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                size: "$2",
                 variant: "outlined",
-                onPress: function onPress() {
-                  return handleDateRangeSelect(new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString());
-                },
-                children: "Last 30 days"
+                onPress: handleClear,
+                icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+                  size: 16
+                }),
+                children: (0, import_t.t)("Clear")
               })]
-            })]
-          }), /* DatePicker-based Custom Range Selection */
-          /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            gap: "$2",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-              fontSize: "$3",
-              fontWeight: "500",
-              children: "Custom Range"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            }), /* Quick Presets */
+            showPresets && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
               gap: "$2",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                flex: 1,
-                "data-testid": "start-date-picker",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
-                  placeholder: "Start date",
-                  label: "From",
-                  minDate,
-                  maxDate
-                })
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                flex: 1,
-                "data-testid": "end-date-picker",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
-                  placeholder: "End date",
-                  label: "To",
-                  minDate,
-                  maxDate
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$4",
+                fontWeight: "500",
+                children: (0, import_t.t)("Quick Filters")
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+                maxHeight: presetListMaxHeight,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+                  gap: PRESET_ROW_GAP_TOKEN,
+                  children: allPresets.map(function (preset) {
+                    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                      size: knobProps.sizeToken,
+                      variant: "outlined",
+                      justifyContent: "flex-start",
+                      onPress: function onPress() {
+                        return handlePresetSelect(preset);
+                      },
+                      ...(activePresetId === preset.id ? {
+                        theme: "accent",
+                        backgroundColor: "$background"
+                      } : void 0),
+                      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                        fontSize: "$3",
+                        children: preset.label
+                      })
+                    }, preset.id);
+                  })
                 })
               })]
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Custom Date Selection */
+            /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+              ...knobProps.gap,
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$4",
+                fontWeight: "500",
+                children: (0, import_t.t)("Custom Date")
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                gap: "$2",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                  flex: 1,
+                  size: knobProps.sizeToken,
+                  variant: "outlined",
+                  onPress: function onPress() {
+                    return handleCustomDateSelect((/* @__PURE__ */new Date()).toISOString(), "is");
+                  },
+                  children: (0, import_t.t)("Today")
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                  flex: 1,
+                  size: knobProps.sizeToken,
+                  variant: "outlined",
+                  onPress: function onPress() {
+                    return handleCustomDateSelect(new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString(), "is");
+                  },
+                  children: (0, import_t.t)("Yesterday")
+                })]
+              }), /* Date Range */
+              /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                gap: "$2",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$3",
+                  fontWeight: "500",
+                  children: (0, import_t.t)("Date Range")
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  gap: "$2",
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                    flex: 1,
+                    size: knobProps.sizeToken,
+                    variant: "outlined",
+                    onPress: function onPress() {
+                      return handleDateRangeSelect(new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString());
+                    },
+                    children: (0, import_t.t)("Last 7 days")
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                    flex: 1,
+                    size: knobProps.sizeToken,
+                    variant: "outlined",
+                    onPress: function onPress() {
+                      return handleDateRangeSelect(new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString(), (/* @__PURE__ */new Date()).toISOString());
+                    },
+                    children: (0, import_t.t)("Last 30 days")
+                  })]
+                })]
+              }), /* DatePicker-based Custom Range Selection */
+              /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                gap: "$2",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$3",
+                  fontWeight: "500",
+                  children: (0, import_t.t)("Custom Range")
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  gap: "$2",
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                    flex: 1,
+                    "data-testid": "start-date-picker",
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
+                      placeholder: (0, import_t.t)("Start date"),
+                      label: (0, import_t.t)("From"),
+                      minDate,
+                      maxDate,
+                      value: (_pickerRange_start = pickerRange.start) !== null && _pickerRange_start !== void 0 ? _pickerRange_start : null,
+                      onChange: handleStartDatePick
+                    })
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                    flex: 1,
+                    "data-testid": "end-date-picker",
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DatePicker, {
+                      placeholder: (0, import_t.t)("End date"),
+                      label: (0, import_t.t)("To"),
+                      minDate,
+                      maxDate,
+                      value: (_pickerRange_end = pickerRange.end) !== null && _pickerRange_end !== void 0 ? _pickerRange_end : null,
+                      onChange: handleEndDatePick
+                    })
+                  })]
+                })]
+              })]
             })]
-          })]
-        })]
-      })
-    })]
-  });
+          })
+        })
+      })]
+    })
+  );
+}
+function startOfDay(date) {
+  var day = new Date(date);
+  day.setHours(0, 0, 0, 0);
+  return day;
+}
+function endOfDay(date) {
+  var day = new Date(date);
+  day.setHours(23, 59, 59, 999);
+  return day;
+}
+function resolveDateFilterRange(filterValue) {
+  var now = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : /* @__PURE__ */new Date();
+  if (!filterValue) return {
+    start: null,
+    end: null
+  };
+  var {
+    operator,
+    value,
+    values
+  } = filterValue;
+  var today = startOfDay(now);
+  var parsed = function parsed2(iso) {
+    if (!iso) return null;
+    var date2 = new Date(iso);
+    return Number.isNaN(date2.getTime()) ? null : date2;
+  };
+  var dayWindow = function dayWindow2(offsetDays) {
+    var day = new Date(today);
+    day.setDate(day.getDate() + offsetDays);
+    return {
+      start: day,
+      end: endOfDay(day)
+    };
+  };
+  var weekWindow = function weekWindow2(offsetWeeks) {
+    var weekStart = new Date(today);
+    weekStart.setDate(today.getDate() - today.getDay() + offsetWeeks * 7);
+    var weekEnd = new Date(weekStart);
+    weekEnd.setDate(weekStart.getDate() + 6);
+    return {
+      start: weekStart,
+      end: endOfDay(weekEnd)
+    };
+  };
+  var monthWindow = function monthWindow2(offsetMonths) {
+    var start = new Date(today.getFullYear(), today.getMonth() + offsetMonths, 1);
+    var end = new Date(today.getFullYear(), today.getMonth() + offsetMonths + 1, 0);
+    return {
+      start,
+      end: endOfDay(end)
+    };
+  };
+  var yearWindow = function yearWindow2(offsetYears) {
+    var start = new Date(today.getFullYear() + offsetYears, 0, 1);
+    var end = new Date(today.getFullYear() + offsetYears, 11, 31);
+    return {
+      start,
+      end: endOfDay(end)
+    };
+  };
+  switch (operator) {
+    case "isBetween":
+      return {
+        start: parsed(values === null || values === void 0 ? void 0 : values[0]),
+        end: parsed(values === null || values === void 0 ? void 0 : values[1])
+      };
+    case "is":
+      {
+        var date = parsed(value);
+        return date ? {
+          start: date,
+          end: date
+        } : {
+          start: null,
+          end: null
+        };
+      }
+    case "isAfter":
+    case "isOnOrAfter":
+      return {
+        start: parsed(value),
+        end: null
+      };
+    case "isBefore":
+    case "isOnOrBefore":
+      return {
+        start: null,
+        end: parsed(value)
+      };
+    case "isToday":
+      return dayWindow(0);
+    case "isYesterday":
+      return dayWindow(-1);
+    case "isTomorrow":
+      return dayWindow(1);
+    case "isThisWeek":
+      return weekWindow(0);
+    case "isLastWeek":
+      return weekWindow(-1);
+    case "isNextWeek":
+      return weekWindow(1);
+    case "isThisMonth":
+      return monthWindow(0);
+    case "isLastMonth":
+      return monthWindow(-1);
+    case "isNextMonth":
+      return monthWindow(1);
+    case "isThisYear":
+      return yearWindow(0);
+    case "isLastYear":
+      return yearWindow(-1);
+    case "isNextYear":
+      return yearWindow(1);
+    default:
+      return {
+        start: null,
+        end: null
+      };
+  }
 }
 function applyDateFilter(data, columnKey, filterValue) {
   if (!filterValue) return data;
@@ -443,13 +642,15 @@ function applyDateFilter(data, columnKey, filterValue) {
           tomorrow.setDate(tomorrow.getDate() + 1);
           return itemDate.toDateString() === tomorrow.toDateString();
         }
+      // Week windows are day-granular like isToday/isThisMonth: the last day
+      // counts in full (endOfDay), not only its first midnight instant.
       case "isThisWeek":
         {
           var weekStart = new Date(today);
           weekStart.setDate(today.getDate() - today.getDay());
           var weekEnd = new Date(weekStart);
           weekEnd.setDate(weekStart.getDate() + 6);
-          return itemDate >= weekStart && itemDate <= weekEnd;
+          return itemDate >= weekStart && itemDate <= endOfDay(weekEnd);
         }
       case "isLastWeek":
         {
@@ -457,7 +658,7 @@ function applyDateFilter(data, columnKey, filterValue) {
           lastWeekStart.setDate(today.getDate() - today.getDay() - 7);
           var lastWeekEnd = new Date(lastWeekStart);
           lastWeekEnd.setDate(lastWeekStart.getDate() + 6);
-          return itemDate >= lastWeekStart && itemDate <= lastWeekEnd;
+          return itemDate >= lastWeekStart && itemDate <= endOfDay(lastWeekEnd);
         }
       case "isNextWeek":
         {
@@ -465,7 +666,7 @@ function applyDateFilter(data, columnKey, filterValue) {
           nextWeekStart.setDate(today.getDate() - today.getDay() + 7);
           var nextWeekEnd = new Date(nextWeekStart);
           nextWeekEnd.setDate(nextWeekStart.getDate() + 6);
-          return itemDate >= nextWeekStart && itemDate <= nextWeekEnd;
+          return itemDate >= nextWeekStart && itemDate <= endOfDay(nextWeekEnd);
         }
       case "isThisMonth":
         return itemDate.getMonth() === today.getMonth() && itemDate.getFullYear() === today.getFullYear();