@ai-matrx/design-system 0.26.0 → 0.27.0

package/dist/data-table/index.cjs

@@ -58,6 +58,8 @@ __export(data_table_exports, {
   SavedViewsControl: () => SavedViewsControl,
   TABLE_STYLE_METADATA_KEY: () => TABLE_STYLE_METADATA_KEY,
   TABLE_STYLE_VERSION: () => TABLE_STYLE_VERSION,
+  TIME_RANGE_PRESETS: () => TIME_RANGE_PRESETS,
+  TIME_RANGE_PRESET_VALUES: () => TIME_RANGE_PRESET_VALUES,
   TableTitleRow: () => TableTitleRow,
   TableViewTabs: () => TableViewTabs,
   UNKNOWN_TOTAL_BADGE: () => UNKNOWN_TOTAL_BADGE,
@@ -81,6 +83,7 @@ __export(data_table_exports, {
   computeVariableWindow: () => computeVariableWindow,
   computeWindow: () => computeWindow,
   createUndoStack: () => createUndoStack,
+  dateFilterBounds: () => dateFilterBounds,
   describeCoverage: () => describeCoverage,
   detectSeries: () => detectSeries,
   directClickKinds: () => directClickKinds,
@@ -5131,6 +5134,124 @@ function layeredFilterRuleSummary(rule, fields) {
   return rule.operator === "between" ? `${fieldLabel} ${operator} ${value} and ${rule.valueTo ?? ""}` : `${fieldLabel} ${operator} ${value}`;
 }
 
+// src/data-table/date-filter.ts
+var TIME_RANGE_PRESET_VALUES = [
+  "all",
+  "1m",
+  "15m",
+  "30m",
+  "1h",
+  "2h",
+  "6h",
+  "12h",
+  "today",
+  "yesterday",
+  "this_week",
+  "this_month",
+  "this_year",
+  "older_1m",
+  "older_15m",
+  "older_30m",
+  "older_1h",
+  "older_2h",
+  "older_6h",
+  "older_12h",
+  "older_today",
+  "older_this_week",
+  "older_this_month",
+  "older_this_year"
+];
+var TIME_RANGE_PRESETS = [
+  { value: "all", label: "All time", group: "all" },
+  { value: "1m", label: "Last minute", group: "recent" },
+  { value: "15m", label: "Last 15 minutes", group: "recent" },
+  { value: "30m", label: "Last 30 minutes", group: "recent" },
+  { value: "1h", label: "Last hour", group: "recent" },
+  { value: "2h", label: "Last 2 hours", group: "recent" },
+  { value: "6h", label: "Last 6 hours", group: "recent" },
+  { value: "12h", label: "Last 12 hours", group: "recent" },
+  { value: "today", label: "Today", group: "calendar" },
+  { value: "yesterday", label: "Yesterday", group: "calendar" },
+  { value: "this_week", label: "This week", group: "calendar" },
+  { value: "this_month", label: "This month", group: "calendar" },
+  { value: "this_year", label: "This year", group: "calendar" },
+  { value: "older_1m", label: "Older than 1 minute", group: "older" },
+  { value: "older_15m", label: "Older than 15 minutes", group: "older" },
+  { value: "older_30m", label: "Older than 30 minutes", group: "older" },
+  { value: "older_1h", label: "Older than 1 hour", group: "older" },
+  { value: "older_2h", label: "Older than 2 hours", group: "older" },
+  { value: "older_6h", label: "Older than 6 hours", group: "older" },
+  { value: "older_12h", label: "Older than 12 hours", group: "older" },
+  { value: "older_today", label: "Before today", group: "older" },
+  { value: "older_this_week", label: "Before this week", group: "older" },
+  { value: "older_this_month", label: "Before this month", group: "older" },
+  { value: "older_this_year", label: "Before this year", group: "older" }
+];
+function startOfDay(date) {
+  const next = new Date(date);
+  next.setHours(0, 0, 0, 0);
+  return next;
+}
+function startOfWeek(date) {
+  const next = startOfDay(date);
+  next.setDate(next.getDate() - (next.getDay() === 0 ? 6 : next.getDay() - 1));
+  return next;
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function startOfYear(date) {
+  return new Date(date.getFullYear(), 0, 1);
+}
+function validDate(value) {
+  if (value === void 0) return void 0;
+  const date = value instanceof Date ? new Date(value) : new Date(value);
+  return Number.isNaN(date.valueOf()) ? void 0 : date;
+}
+function dateFilterBounds(filter, now = /* @__PURE__ */ new Date()) {
+  if (!filter.preset) {
+    return {
+      ...filter.since === void 0 ? {} : { since: filter.since },
+      ...filter.until === void 0 ? {} : { until: filter.until }
+    };
+  }
+  if (filter.preset === "all") return {};
+  const anchor = validDate(filter.anchor) ?? validDate(now) ?? /* @__PURE__ */ new Date();
+  const ago = (milliseconds) => new Date(anchor.valueOf() - milliseconds).toISOString();
+  const recent = {
+    "1m": 6e4,
+    "15m": 15 * 6e4,
+    "30m": 30 * 6e4,
+    "1h": 60 * 6e4,
+    "2h": 2 * 60 * 6e4,
+    "6h": 6 * 60 * 6e4,
+    "12h": 12 * 60 * 6e4
+  };
+  const duration = recent[filter.preset.replace("older_", "")];
+  if (duration !== void 0) {
+    return filter.preset.startsWith("older_") ? { until: ago(duration) } : { since: ago(duration) };
+  }
+  const starts = {
+    today: startOfDay(anchor),
+    this_week: startOfWeek(anchor),
+    this_month: startOfMonth(anchor),
+    this_year: startOfYear(anchor),
+    older_today: startOfDay(anchor),
+    older_this_week: startOfWeek(anchor),
+    older_this_month: startOfMonth(anchor),
+    older_this_year: startOfYear(anchor)
+  };
+  if (filter.preset === "yesterday") {
+    const until = startOfDay(anchor);
+    const since = new Date(until);
+    since.setDate(since.getDate() - 1);
+    return { since: since.toISOString(), until: until.toISOString() };
+  }
+  const start = starts[filter.preset];
+  if (!start) return {};
+  return filter.preset.startsWith("older_") ? { until: start.toISOString() } : { since: start.toISOString() };
+}
+
 // src/data-table/filter-engine.ts
 var SELECT_EMPTY_VALUE = "__empty__";
 var SELECT_NOT_EMPTY_VALUE = "__not_empty__";
@@ -5233,6 +5354,21 @@ function passesColumnFilter(value, filter) {
         if (filter.max !== void 0 && n2 > filter.max) return false;
         return true;
       }
+      case "date": {
+        const raw = value instanceof Date ? value : new Date(stringifyCellValue(value));
+        if (Number.isNaN(raw.valueOf())) return false;
+        const { since, until } = dateFilterBounds(filter);
+        const timestamp = raw.valueOf();
+        if (since !== void 0) {
+          const sinceTimestamp = new Date(since).valueOf();
+          if (Number.isNaN(sinceTimestamp) || timestamp < sinceTimestamp) return false;
+        }
+        if (until !== void 0) {
+          const untilTimestamp = new Date(until).valueOf();
+          if (Number.isNaN(untilTimestamp) || timestamp >= untilTimestamp) return false;
+        }
+        return true;
+      }
     }
   })();
   return filter.negated ? !matches : matches;
@@ -5310,6 +5446,9 @@ function countActiveColumnFilters(filters) {
       case "number":
         if (f.min !== void 0 || f.max !== void 0) n2 += 1;
         break;
+      case "date":
+        if (isColumnFilterActive(f)) n2 += 1;
+        break;
     }
   }
   return n2;
@@ -5325,6 +5464,10 @@ function isColumnFilterActive(filter) {
       return true;
     case "number":
       return filter.min !== void 0 || filter.max !== void 0;
+    case "date": {
+      const bounds = dateFilterBounds(filter);
+      return bounds.since !== void 0 || bounds.until !== void 0;
+    }
   }
 }
 function applyRowEdits(row, edits) {
@@ -6141,7 +6284,7 @@ function ColumnHeaderCell({
   const visibleFilter = deferredFilter ? draftFilter : filterValue;
   const setNegated = (negated) => {
     setPendingNegation(negated);
-    if (!visibleFilter) return;
+    if (!visibleFilter || visibleFilter.kind === "date") return;
     const next = { ...visibleFilter, ...negated ? { negated: true } : {} };
     if (!negated) delete next.negated;
     if (deferredFilter) setDraftFilter(next);
@@ -6149,7 +6292,7 @@ function ColumnHeaderCell({
   };
   const markerLabels = marker ? markerCopy(marker) : void 0;
   const accessibleLabel = markerLabels?.label ?? labelText;
-  const menuLabel = accessibleLabel ? `Sort or filter ${accessibleLabel}` : "Sort or filter column";
+  const menuLabel = filterKind ? accessibleLabel ? `Sort or filter ${accessibleLabel}` : "Sort or filter column" : accessibleLabel ? `Sort ${accessibleLabel}` : "Sort column";
   const menuContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     PopoverContent,
     {
@@ -6217,7 +6360,7 @@ function ColumnHeaderCell({
             kind: filterKind,
             value: visibleFilter,
             onChange: (next) => {
-              const preservingNegation = next && (visibleFilter?.negated ?? pendingNegation) ? { ...next, negated: true } : next;
+              const preservingNegation = next && next.kind !== "date" && (visibleFilter?.negated ?? pendingNegation) ? { ...next, negated: true } : next;
               if (deferredFilter) setDraftFilter(preservingNegation);
               else onFilterChange(preservingNegation);
             },
@@ -6237,7 +6380,7 @@ function ColumnHeaderCell({
             allowNullModes
           }
         ) : null,
-        filterKind && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
+        filterKind && filterKind !== "date" && allowNegation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 border-t border-border pt-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Match mode" }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grid grid-cols-2 gap-1 rounded-md border p-0.5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -6596,6 +6739,9 @@ function FilterBody({
       )
     ] });
   }
+  if (kind === "date") {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DateFilterBody, { value, onChange });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(NumberFilterBody, { value, onChange });
 }
 function FacetChecklist({
@@ -6704,6 +6850,72 @@ function FacetChecklist({
     ) : null
   ] });
 }
+function DateFilterBody({
+  value,
+  onChange
+}) {
+  const dateValue = value?.kind === "date" ? value : void 0;
+  const isCustom = dateValue !== void 0 && dateValue.preset === void 0;
+  const selected = dateValue?.preset ?? (isCustom ? "__custom__" : "all");
+  const setBound = (bound, raw) => {
+    const next = raw ? new Date(raw) : void 0;
+    const iso = next && !Number.isNaN(next.valueOf()) ? next.toISOString() : void 0;
+    const current = dateValue && dateValue.preset === void 0 ? dateValue : { kind: "date" };
+    const updated = { ...current, [bound]: iso };
+    if (updated.since === void 0 && updated.until === void 0) onChange(void 0);
+    else onChange(updated);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-2 px-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Date range" }),
+      dateValue ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: "text-[11px] text-muted-foreground hover:text-foreground", onClick: () => onChange(void 0), children: "clear" }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      Select,
+      {
+        value: selected,
+        onValueChange: (next) => {
+          if (next === "all") {
+            onChange(void 0);
+            return;
+          }
+          if (next === "__custom__") {
+            onChange({ kind: "date" });
+            return;
+          }
+          onChange({ kind: "date", preset: next, anchor: (/* @__PURE__ */ new Date()).toISOString() });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectValue, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(SelectContent, { children: [
+            ["all", "recent", "calendar", "older"].map((group) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
+              group !== "all" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "px-2 py-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: group }) : null,
+              TIME_RANGE_PRESETS.filter((option) => option.group === group).map((option) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: option.value, children: option.label }, option.value))
+            ] }, group)),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: "__custom__", children: "Custom range" })
+          ] })
+        ]
+      }
+    ),
+    isCustom ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grid gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "grid gap-0.5 text-[11px] text-muted-foreground", children: [
+        "On or after",
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Input, { type: "datetime-local", value: dateTimeLocal(dateValue?.since), onChange: (event) => setBound("since", event.target.value), className: "h-8 text-xs" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "grid gap-0.5 text-[11px] text-muted-foreground", children: [
+        "Before",
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Input, { type: "datetime-local", value: dateTimeLocal(dateValue?.until), onChange: (event) => setBound("until", event.target.value), className: "h-8 text-xs" })
+      ] })
+    ] }) : null
+  ] });
+}
+function dateTimeLocal(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.valueOf())) return "";
+  const offset = date.getTimezoneOffset() * 6e4;
+  return new Date(date.valueOf() - offset).toISOString().slice(0, 16);
+}
 function SearchableSelectFilter({
   selected,
   options,
@@ -9286,7 +9498,8 @@ var filterSchema = import_zod2.z.union([
   import_zod2.z.object({ kind: import_zod2.z.literal("text"), value: import_zod2.z.string(), mode: import_zod2.z.enum(["contains", "empty", "not_empty", "null", "not_null"]).optional(), negated: import_zod2.z.boolean().optional() }),
   import_zod2.z.object({ kind: import_zod2.z.literal("select"), value: import_zod2.z.string(), values: import_zod2.z.array(import_zod2.z.string()).optional(), negated: import_zod2.z.boolean().optional() }),
   import_zod2.z.object({ kind: import_zod2.z.literal("boolean"), value: import_zod2.z.boolean(), negated: import_zod2.z.boolean().optional() }),
-  import_zod2.z.object({ kind: import_zod2.z.literal("number"), min: import_zod2.z.number().optional(), max: import_zod2.z.number().optional(), negated: import_zod2.z.boolean().optional() })
+  import_zod2.z.object({ kind: import_zod2.z.literal("number"), min: import_zod2.z.number().optional(), max: import_zod2.z.number().optional(), negated: import_zod2.z.boolean().optional() }),
+  import_zod2.z.object({ kind: import_zod2.z.literal("date"), preset: import_zod2.z.enum(TIME_RANGE_PRESET_VALUES).optional(), since: import_zod2.z.string().datetime({ offset: true }).optional(), until: import_zod2.z.string().datetime({ offset: true }).optional(), anchor: import_zod2.z.string().datetime({ offset: true }).optional() })
 ]);
 var layeredRuleSchema = import_zod2.z.object({ id: import_zod2.z.string().min(1), field: import_zod2.z.string().min(1), operator: import_zod2.z.enum(LAYERED_FILTER_OPERATORS), value: import_zod2.z.string(), valueTo: import_zod2.z.string().optional() });
 var snapshotSchema = import_zod2.z.object({
@@ -9314,7 +9527,8 @@ function normalizeFilters(raw) {
     if (value.kind === "text") filters[id] = { kind: "text", value: value.value, ...value.mode === void 0 ? {} : { mode: value.mode }, ...value.negated === void 0 ? {} : { negated: value.negated } };
     else if (value.kind === "select") filters[id] = { kind: "select", value: value.value, ...value.values === void 0 ? {} : { values: value.values }, ...value.negated === void 0 ? {} : { negated: value.negated } };
     else if (value.kind === "boolean") filters[id] = { kind: "boolean", value: value.value, ...value.negated === void 0 ? {} : { negated: value.negated } };
-    else filters[id] = { kind: "number", ...value.min === void 0 ? {} : { min: value.min }, ...value.max === void 0 ? {} : { max: value.max }, ...value.negated === void 0 ? {} : { negated: value.negated } };
+    else if (value.kind === "number") filters[id] = { kind: "number", ...value.min === void 0 ? {} : { min: value.min }, ...value.max === void 0 ? {} : { max: value.max }, ...value.negated === void 0 ? {} : { negated: value.negated } };
+    else filters[id] = { kind: "date", ...value.preset === void 0 ? {} : { preset: value.preset }, ...value.since === void 0 ? {} : { since: value.since }, ...value.until === void 0 ? {} : { until: value.until }, ...value.anchor === void 0 ? {} : { anchor: value.anchor } };
   }
   return filters;
 }
@@ -9864,6 +10078,7 @@ function toText(value) {
     return String(value);
   return null;
 }
+var BARE_CALENDAR_DATE = /^(\d{4})-(\d{2})-(\d{2})(?:[T ]00:00(?::00(?:\.0+)?)?)?$/;
 function toDate(value) {
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
   if (typeof value === "number") {
@@ -9871,6 +10086,20 @@ function toDate(value) {
     return Number.isNaN(d.getTime()) ? null : d;
   }
   if (typeof value === "string" && value.trim()) {
+    const bare = BARE_CALENDAR_DATE.exec(value.trim());
+    if (bare) {
+      const [year, month, day] = [
+        Number(bare[1]),
+        Number(bare[2]),
+        Number(bare[3])
+      ];
+      const d2 = new Date(year, month - 1, day);
+      d2.setFullYear(year);
+      if (d2.getFullYear() !== year || d2.getMonth() !== month - 1 || d2.getDate() !== day) {
+        return null;
+      }
+      return d2;
+    }
     const d = new Date(value);
     return Number.isNaN(d.getTime()) ? null : d;
   }
@@ -11593,6 +11822,8 @@ function filterKindLabel(kind) {
       return "Boolean";
     case "number":
       return "Number";
+    case "date":
+      return "Date";
     case "auto":
       return "Auto";
     case false:
@@ -14768,7 +14999,7 @@ function MatrxDataTableCore({
                                                         "div",
                                                         {
                                                           "data-matrx-cell-content": true,
-                                                          className: "min-w-0 max-w-full flex-1 whitespace-normal break-words [overflow-wrap:anywhere] sm:[&_*]:min-w-0 sm:[&_*]:whitespace-normal sm:[&_*]:[overflow-wrap:anywhere] sm:[&_.truncate]:whitespace-nowrap sm:[&_[data-slot=badge]]:whitespace-nowrap sm:[&_[data-slot=badge]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]]:w-max sm:[&_[data-matrx-cell-control]]:min-w-max sm:[&_[data-matrx-cell-control]]:max-w-none sm:[&_[data-matrx-cell-control]]:whitespace-nowrap sm:[&_[data-matrx-cell-control]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]_*]:whitespace-nowrap sm:[&_[data-matrx-cell-control]_*]:[overflow-wrap:normal]",
+                                                          className: "min-w-0 max-w-full flex-1 whitespace-normal break-words [overflow-wrap:anywhere] sm:[&_*]:min-w-0 sm:[&_*]:whitespace-normal sm:[&_*]:[overflow-wrap:anywhere] sm:[&_.truncate]:whitespace-nowrap sm:[&_[data-slot=badge]]:whitespace-nowrap sm:[&_[data-slot=badge]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]]:w-max sm:[&_[data-matrx-cell-control]]:min-w-max sm:[&_[data-matrx-cell-control]]:max-w-none sm:[&_[data-matrx-cell-control]]:whitespace-nowrap sm:[&_[data-matrx-cell-control]]:[overflow-wrap:normal] sm:[&_[data-matrx-cell-control]_*]:whitespace-nowrap sm:[&_[data-matrx-cell-control]_*]:[overflow-wrap:normal] [&_[data-matrx-cell-fill]]:!w-full [&_[data-matrx-cell-fill]]:!min-w-0 [&_[data-matrx-cell-fill]]:!max-w-full sm:[&_[data-matrx-cell-fill]]:!w-full sm:[&_[data-matrx-cell-fill]]:!min-w-0 sm:[&_[data-matrx-cell-fill]]:!max-w-full",
                                                           children: renderRecordCell(row, col, index)
                                                         }
                                                       )