@mastra/playground-ui 56.0.0-alpha.9 → 56.0.0

package/dist/data-panel-section-heading-CXD1skJD.js

@@ -0,0 +1,21 @@
+import { jsxs } from 'react/jsx-runtime';
+import { c as cn } from './cn-65Adrsfj.js';
+
+function DataPanelSectionHeading({ icon, className, children }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5 text-caption tracking-widest text-placeholder uppercase [&>svg]:size-3.5",
+        className
+      ),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+
+export { DataPanelSectionHeading as D };
+//# sourceMappingURL=data-panel-section-heading-CXD1skJD.js.map

package/dist/data-panel-section-heading-CXD1skJD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-panel-section-heading-CXD1skJD.js","sources":["../src/ds/components/DataPanel/data-panel-section-heading.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelSectionHeadingProps {\n  /** Optional leading icon. Rendered before `children` and sized via `[&>svg]:size-3.5`. */\n  icon?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Section heading inside a DataPanel.Content (e.g. above a code block or a key-values list).\n * Used by `DataCodeSection` and any consumer that needs a matching small-caps label.\n */\nexport function DataPanelSectionHeading({ icon, className, children }: DataPanelSectionHeadingProps) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-caption tracking-widest text-placeholder uppercase [&>svg]:size-3.5',\n        className,\n      )}\n    >\n      {icon}\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAcO,SAAS,uBAAA,CAAwB,EAAE,IAAA,EAAM,SAAA,EAAW,UAAS,EAAiC;AACnG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oGAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/data-panel-section-heading-V86Awzqg.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function DataPanelSectionHeading({ icon, className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "flex items-center gap-1.5 text-caption tracking-widest text-placeholder uppercase [&>svg]:size-3.5",
+        className
+      ),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+
+exports.DataPanelSectionHeading = DataPanelSectionHeading;
+//# sourceMappingURL=data-panel-section-heading-V86Awzqg.cjs.map

package/dist/data-panel-section-heading-V86Awzqg.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-panel-section-heading-V86Awzqg.cjs","sources":["../src/ds/components/DataPanel/data-panel-section-heading.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelSectionHeadingProps {\n  /** Optional leading icon. Rendered before `children` and sized via `[&>svg]:size-3.5`. */\n  icon?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Section heading inside a DataPanel.Content (e.g. above a code block or a key-values list).\n * Used by `DataCodeSection` and any consumer that needs a matching small-caps label.\n */\nexport function DataPanelSectionHeading({ icon, className, children }: DataPanelSectionHeadingProps) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-caption tracking-widest text-placeholder uppercase [&>svg]:size-3.5',\n        className,\n      )}\n    >\n      {icon}\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","cn"],"mappings":";;;;;AAcO,SAAS,uBAAA,CAAwB,EAAE,IAAA,EAAM,SAAA,EAAW,UAAS,EAAiC;AACnG,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,oGAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/date-picker-DgWTsiJ7.js

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { DayPicker } from 'react-day-picker';
+import { quietTextHover } from './primitives/typography.es.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col space-y-4 sm:space-y-0 ",
+        month: "space-y-4 text-caption",
+        caption: "flex justify-between pt-1 items-center pl-2",
+        caption_label: "text-label text-foreground",
+        nav: "flex items-center",
+        nav_button_previous: cn(
+          quietTextHover,
+          "flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle"
+        ),
+        nav_button_next: cn(
+          quietTextHover,
+          "flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle"
+        ),
+        dropdown_month: "w-full border-collapse space-y-1",
+        weeknumber: "flex",
+        day: cn(
+          "relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-fill [&:has([aria-selected].day-outside)]:bg-fill-subtle [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
+          "size-8 p-0 text-caption hover:bg-fill-subtle aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start rounded-l-md",
+        day_range_end: "day-range-end rounded-r-md",
+        day_selected: cn(
+          "bg-foreground! text-sidebar! hover:bg-foreground/90! focus:bg-foreground/90! focus:text-sidebar!",
+          props.mode !== "range" && "rounded-md"
+        ),
+        day_today: "bg-fill text-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-fill-subtle aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-fill aria-selected:text-foreground",
+        day_hidden: "invisible",
+        head_cell: "text-meta text-muted-foreground",
+        ...classNames
+      },
+      ...props
+    }
+  );
+}
+
+export { DatePicker as D };
+//# sourceMappingURL=date-picker-DgWTsiJ7.js.map

package/dist/date-picker-DgWTsiJ7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-DgWTsiJ7.js","sources":["../src/ds/components/DateTimePicker/date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nexport function DatePicker({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col space-y-4 sm:space-y-0 ',\n        month: 'space-y-4 text-caption',\n        caption: 'flex justify-between pt-1 items-center pl-2',\n        caption_label: 'text-label text-foreground',\n        nav: 'flex items-center',\n        nav_button_previous: cn(\n          quietTextHover,\n          'flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle',\n        ),\n        nav_button_next: cn(\n          quietTextHover,\n          'flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle',\n        ),\n        dropdown_month: 'w-full border-collapse space-y-1',\n        weeknumber: 'flex',\n        day: cn(\n          'relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-fill [&:has([aria-selected].day-outside)]:bg-fill-subtle [&:has([aria-selected].day-range-end)]:rounded-r-md',\n          props.mode === 'range'\n            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'\n            : '[&:has([aria-selected])]:rounded-md',\n          'size-8 p-0 text-caption hover:bg-fill-subtle aria-selected:opacity-100',\n        ),\n        day_range_start: 'day-range-start rounded-l-md',\n        day_range_end: 'day-range-end rounded-r-md',\n        day_selected: cn(\n          'bg-foreground! text-sidebar! hover:bg-foreground/90! focus:bg-foreground/90! focus:text-sidebar!',\n          props.mode !== 'range' && 'rounded-md',\n        ),\n        day_today: 'bg-fill text-foreground',\n        day_outside:\n          'day-outside text-muted-foreground opacity-50 aria-selected:bg-fill-subtle aria-selected:text-muted-foreground aria-selected:opacity-30',\n        day_disabled: 'text-muted-foreground opacity-50',\n        day_range_middle: 'aria-selected:bg-fill aria-selected:text-foreground',\n        day_hidden: 'invisible',\n        head_cell: 'text-meta text-muted-foreground',\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAOO,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,UAAA,EAAY,kBAAkB,IAAA,EAAM,GAAG,OAAM,EAAkB;AACrG,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,eAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,KAAA,EAAO,SAAS,CAAA;AAAA,MAC9B,UAAA,EAAY;AAAA,QACV,MAAA,EAAQ,uCAAA;AAAA,QACR,KAAA,EAAO,wBAAA;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,aAAA,EAAe,4BAAA;AAAA,QACf,GAAA,EAAK,mBAAA;AAAA,QACL,mBAAA,EAAqB,EAAA;AAAA,UACnB,cAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,eAAA,EAAiB,EAAA;AAAA,UACf,cAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,cAAA,EAAgB,kCAAA;AAAA,QAChB,UAAA,EAAY,MAAA;AAAA,QACZ,GAAA,EAAK,EAAA;AAAA,UACH,2MAAA;AAAA,UACA,KAAA,CAAM,IAAA,KAAS,OAAA,GACX,sKAAA,GACA,qCAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,eAAA,EAAiB,8BAAA;AAAA,QACjB,aAAA,EAAe,4BAAA;AAAA,QACf,YAAA,EAAc,EAAA;AAAA,UACZ,kGAAA;AAAA,UACA,KAAA,CAAM,SAAS,OAAA,IAAW;AAAA,SAC5B;AAAA,QACA,SAAA,EAAW,yBAAA;AAAA,QACX,WAAA,EACE,wIAAA;AAAA,QACF,YAAA,EAAc,kCAAA;AAAA,QACd,gBAAA,EAAkB,qDAAA;AAAA,QAClB,UAAA,EAAY,WAAA;AAAA,QACZ,SAAA,EAAW,iCAAA;AAAA,QACX,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/date-picker-dRZF8frf.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactDayPicker = require('react-day-picker');
+const primitives_typography = require('./primitives/typography.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactDayPicker.DayPicker,
+    {
+      showOutsideDays,
+      className: utils_cn.cn("p-3", className),
+      classNames: {
+        months: "flex flex-col space-y-4 sm:space-y-0 ",
+        month: "space-y-4 text-caption",
+        caption: "flex justify-between pt-1 items-center pl-2",
+        caption_label: "text-label text-foreground",
+        nav: "flex items-center",
+        nav_button_previous: utils_cn.cn(
+          primitives_typography.quietTextHover,
+          "flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle"
+        ),
+        nav_button_next: utils_cn.cn(
+          primitives_typography.quietTextHover,
+          "flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle"
+        ),
+        dropdown_month: "w-full border-collapse space-y-1",
+        weeknumber: "flex",
+        day: utils_cn.cn(
+          "relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-fill [&:has([aria-selected].day-outside)]:bg-fill-subtle [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
+          "size-8 p-0 text-caption hover:bg-fill-subtle aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start rounded-l-md",
+        day_range_end: "day-range-end rounded-r-md",
+        day_selected: utils_cn.cn(
+          "bg-foreground! text-sidebar! hover:bg-foreground/90! focus:bg-foreground/90! focus:text-sidebar!",
+          props.mode !== "range" && "rounded-md"
+        ),
+        day_today: "bg-fill text-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-fill-subtle aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-fill aria-selected:text-foreground",
+        day_hidden: "invisible",
+        head_cell: "text-meta text-muted-foreground",
+        ...classNames
+      },
+      ...props
+    }
+  );
+}
+
+exports.DatePicker = DatePicker;
+//# sourceMappingURL=date-picker-dRZF8frf.cjs.map

package/dist/date-picker-dRZF8frf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-dRZF8frf.cjs","sources":["../src/ds/components/DateTimePicker/date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker } from 'react-day-picker';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>;\n\nexport function DatePicker({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col space-y-4 sm:space-y-0 ',\n        month: 'space-y-4 text-caption',\n        caption: 'flex justify-between pt-1 items-center pl-2',\n        caption_label: 'text-label text-foreground',\n        nav: 'flex items-center',\n        nav_button_previous: cn(\n          quietTextHover,\n          'flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle',\n        ),\n        nav_button_next: cn(\n          quietTextHover,\n          'flex size-7 items-center justify-center rounded-md bg-transparent p-0 hover:bg-fill-subtle',\n        ),\n        dropdown_month: 'w-full border-collapse space-y-1',\n        weeknumber: 'flex',\n        day: cn(\n          'relative p-0 text-center focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-fill [&:has([aria-selected].day-outside)]:bg-fill-subtle [&:has([aria-selected].day-range-end)]:rounded-r-md',\n          props.mode === 'range'\n            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'\n            : '[&:has([aria-selected])]:rounded-md',\n          'size-8 p-0 text-caption hover:bg-fill-subtle aria-selected:opacity-100',\n        ),\n        day_range_start: 'day-range-start rounded-l-md',\n        day_range_end: 'day-range-end rounded-r-md',\n        day_selected: cn(\n          'bg-foreground! text-sidebar! hover:bg-foreground/90! focus:bg-foreground/90! focus:text-sidebar!',\n          props.mode !== 'range' && 'rounded-md',\n        ),\n        day_today: 'bg-fill text-foreground',\n        day_outside:\n          'day-outside text-muted-foreground opacity-50 aria-selected:bg-fill-subtle aria-selected:text-muted-foreground aria-selected:opacity-30',\n        day_disabled: 'text-muted-foreground opacity-50',\n        day_range_middle: 'aria-selected:bg-fill aria-selected:text-foreground',\n        day_hidden: 'invisible',\n        head_cell: 'text-meta text-muted-foreground',\n        ...classNames,\n      }}\n      {...props}\n    />\n  );\n}\n"],"names":["jsx","DayPicker","cn","quietTextHover"],"mappings":";;;;;;;AAOO,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,UAAA,EAAY,kBAAkB,IAAA,EAAM,GAAG,OAAM,EAAkB;AACrG,EAAA,uBACEA,cAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MACC,eAAA;AAAA,MACA,SAAA,EAAWC,WAAA,CAAG,KAAA,EAAO,SAAS,CAAA;AAAA,MAC9B,UAAA,EAAY;AAAA,QACV,MAAA,EAAQ,uCAAA;AAAA,QACR,KAAA,EAAO,wBAAA;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,aAAA,EAAe,4BAAA;AAAA,QACf,GAAA,EAAK,mBAAA;AAAA,QACL,mBAAA,EAAqBA,WAAA;AAAA,UACnBC,oCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,eAAA,EAAiBD,WAAA;AAAA,UACfC,oCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,cAAA,EAAgB,kCAAA;AAAA,QAChB,UAAA,EAAY,MAAA;AAAA,QACZ,GAAA,EAAKD,WAAA;AAAA,UACH,2MAAA;AAAA,UACA,KAAA,CAAM,IAAA,KAAS,OAAA,GACX,sKAAA,GACA,qCAAA;AAAA,UACJ;AAAA,SACF;AAAA,QACA,eAAA,EAAiB,8BAAA;AAAA,QACjB,aAAA,EAAe,4BAAA;AAAA,QACf,YAAA,EAAcA,WAAA;AAAA,UACZ,kGAAA;AAAA,UACA,KAAA,CAAM,SAAS,OAAA,IAAW;AAAA,SAC5B;AAAA,QACA,SAAA,EAAW,yBAAA;AAAA,QACX,WAAA,EACE,wIAAA;AAAA,QACF,YAAA,EAAc,kCAAA;AAAA,QACd,gBAAA,EAAkB,qDAAA;AAAA,QAClB,UAAA,EAAY,WAAA;AAAA,QACZ,SAAA,EAAW,iCAAA;AAAA,QACX,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/date-time-range-picker-BcjLbkGu.js

@@ -0,0 +1,178 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { parse, isValid } from 'date-fns';
+import { CalendarIcon, Check } from 'lucide-react';
+import { useState, useId } from 'react';
+import { B as Button } from './Button-cWcBEd-G.js';
+import { D as DatePicker } from './date-picker-DgWTsiJ7.js';
+import { T as TimePicker } from './time-picker-DVt1ZUsS.js';
+import { D as DropdownMenu } from './dropdown-menu-DL0MzjEb.js';
+import { F as FieldBlock } from './field-block-DWkbNcsV.js';
+import { f as fieldErrorId } from './field-error-id-D3yg1nBh.js';
+import { P as Popover, b as PopoverTrigger, a as PopoverContent } from './popover-Dg70UGyn.js';
+import { c as cn } from './cn-65Adrsfj.js';
+
+const DATE_PRESETS = [
+  { value: "all", label: "All" },
+  { value: "last-24h", label: "Last 24 hours", ms: 24 * 60 * 60 * 1e3 },
+  { value: "last-3d", label: "Last 3 days", ms: 3 * 24 * 60 * 60 * 1e3 },
+  { value: "last-7d", label: "Last 7 days", ms: 7 * 24 * 60 * 60 * 1e3 },
+  { value: "last-14d", label: "Last 14 days", ms: 14 * 24 * 60 * 60 * 1e3 },
+  { value: "last-30d", label: "Last 30 days", ms: 30 * 24 * 60 * 60 * 1e3 },
+  { value: "custom", label: "Custom range..." }
+];
+function buildDateWithTime(date, timeStr) {
+  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const combined = parse(timeStr, "h:mm a", dateOnly);
+  return isValid(combined) ? combined : null;
+}
+function DateTimeRangePicker({
+  preset = "all",
+  onPresetChange,
+  dateFrom,
+  dateTo,
+  onDateChange,
+  onDateRangeChange,
+  disabled,
+  presets,
+  size = "md",
+  renderTrigger
+}) {
+  const visiblePresets = presets ? DATE_PRESETS.filter((p) => presets.includes(p.value)) : DATE_PRESETS;
+  const fallbackPreset = visiblePresets.find((p) => p.value !== "custom")?.value ?? "all";
+  const [customRangeOpen, setCustomRangeOpen] = useState(false);
+  const [draftDateFrom, setDraftDateFrom] = useState(dateFrom);
+  const [draftDateTo, setDraftDateTo] = useState(dateTo);
+  const [draftTimeFrom, setDraftTimeFrom] = useState("12:00 AM");
+  const [draftTimeTo, setDraftTimeTo] = useState("11:59 PM");
+  const [customRangeError, setCustomRangeError] = useState();
+  const customRangeFieldName = useId();
+  const datePresetLabel = DATE_PRESETS.find((p) => p.value === preset)?.label ?? "All";
+  const handlePresetSelect = (value) => {
+    onPresetChange?.(value);
+    if (value === "custom") {
+      setDraftDateFrom(dateFrom);
+      setDraftDateTo(dateTo);
+      setDraftTimeFrom("12:00 AM");
+      setDraftTimeTo("11:59 PM");
+      setCustomRangeOpen(true);
+      return;
+    }
+    const entry = DATE_PRESETS.find((p) => p.value === value);
+    if (entry?.ms) {
+      onDateChange?.(new Date(Date.now() - entry.ms), "from");
+      onDateChange?.(void 0, "to");
+    } else {
+      onDateChange?.(void 0, "from");
+      onDateChange?.(void 0, "to");
+    }
+  };
+  const applyCustomRange = () => {
+    const fromDate = draftDateFrom ? buildDateWithTime(draftDateFrom, draftTimeFrom) ?? draftDateFrom : void 0;
+    const toDate = draftDateTo ? buildDateWithTime(draftDateTo, draftTimeTo) ?? draftDateTo : void 0;
+    if (fromDate && toDate && fromDate.getTime() > toDate.getTime()) {
+      setCustomRangeError("Start date/time must be before end date/time");
+      return;
+    }
+    setCustomRangeError(void 0);
+    if (onDateRangeChange) {
+      onDateRangeChange(fromDate, toDate);
+    } else {
+      onDateChange?.(fromDate, "from");
+      onDateChange?.(toDate, "to");
+    }
+    setCustomRangeOpen(false);
+  };
+  if (preset === "custom") {
+    const customLabel = `${dateFrom ? dateFrom.toLocaleDateString() : "Start"} – ${dateTo ? dateTo.toLocaleDateString() : "End"}`;
+    return /* @__PURE__ */ jsxs(Popover, { open: customRangeOpen, onOpenChange: setCustomRangeOpen, children: [
+      renderTrigger ? /* @__PURE__ */ jsx(PopoverTrigger, { render: renderTrigger({ label: customLabel, disabled }) }) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size, disabled, icon: /* @__PURE__ */ jsx(CalendarIcon, {}), children: customLabel }) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: cn("w-auto p-0"), children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": "Custom date range",
+            "aria-invalid": customRangeError ? true : void 0,
+            "aria-describedby": customRangeError ? fieldErrorId(customRangeFieldName) : void 0,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex"), children: [
+                /* @__PURE__ */ jsxs("div", { className: cn("border-r border-border"), children: [
+                  /* @__PURE__ */ jsx("span", { className: cn("block px-4 pt-3 text-column text-muted-foreground"), children: "Start" }),
+                  /* @__PURE__ */ jsx(
+                    DatePicker,
+                    {
+                      mode: "single",
+                      selected: draftDateFrom,
+                      month: draftDateFrom,
+                      onSelect: setDraftDateFrom,
+                      disabled,
+                      toDate: draftDateTo
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TimePicker,
+                    {
+                      className: "mx-4 mb-3 w-auto",
+                      defaultValue: draftTimeFrom,
+                      onValueChange: (v) => {
+                        if (!disabled) setDraftTimeFrom(v);
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { className: cn("block px-4 pt-3 text-column text-muted-foreground"), children: "End" }),
+                  /* @__PURE__ */ jsx(
+                    DatePicker,
+                    {
+                      mode: "single",
+                      selected: draftDateTo,
+                      month: draftDateTo,
+                      onSelect: setDraftDateTo,
+                      disabled,
+                      fromDate: draftDateFrom
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TimePicker,
+                    {
+                      className: "mx-4 mb-3 w-auto",
+                      defaultValue: draftTimeTo,
+                      onValueChange: (v) => {
+                        if (!disabled) setDraftTimeTo(v);
+                      }
+                    }
+                  )
+                ] })
+              ] }),
+              customRangeError && /* @__PURE__ */ jsx(FieldBlock.ErrorMsg, { name: customRangeFieldName, className: "px-4 pb-1", children: customRangeError })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between px-4 pb-3"), children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              disabled,
+              onClick: () => {
+                setCustomRangeError(void 0);
+                handlePresetSelect(fallbackPreset);
+              },
+              children: "← Presets"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(Check, {}), variant: "primary", size: "sm", onClick: applyCustomRange, disabled, children: "Apply" })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    renderTrigger ? /* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: renderTrigger({ label: datePresetLabel, disabled }) }) : /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size, disabled, icon: /* @__PURE__ */ jsx(CalendarIcon, {}), children: datePresetLabel }) }),
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", children: visiblePresets.map((p) => /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => handlePresetSelect(p.value), children: p.label }, p.value)) })
+  ] });
+}
+
+export { DateTimeRangePicker as D };
+//# sourceMappingURL=date-time-range-picker-BcjLbkGu.js.map

package/dist/date-time-range-picker-BcjLbkGu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-range-picker-BcjLbkGu.js","sources":["../src/ds/components/DateTimeRangePicker/date-time-range-picker.tsx"],"sourcesContent":["import { isValid, parse } from 'date-fns';\nimport { CalendarIcon, Check } from 'lucide-react';\nimport { useId, useState } from 'react';\nimport type { ReactElement } from 'react';\nimport { Button } from '@/ds/components/Button/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { DatePicker, TimePicker } from '@/ds/components/DateTimePicker';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu/dropdown-menu';\nimport { FieldBlock, fieldErrorId } from '@/ds/components/FormFieldBlocks';\nimport { Popover, PopoverTrigger, PopoverContent } from '@/ds/components/Popover/popover';\nimport { cn } from '@/lib/utils';\n\nexport type DateRangePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';\n\nconst DATE_PRESETS: { value: DateRangePreset; label: string; ms?: number }[] = [\n  { value: 'all', label: 'All' },\n  { value: 'last-24h', label: 'Last 24 hours', ms: 24 * 60 * 60 * 1000 },\n  { value: 'last-3d', label: 'Last 3 days', ms: 3 * 24 * 60 * 60 * 1000 },\n  { value: 'last-7d', label: 'Last 7 days', ms: 7 * 24 * 60 * 60 * 1000 },\n  { value: 'last-14d', label: 'Last 14 days', ms: 14 * 24 * 60 * 60 * 1000 },\n  { value: 'last-30d', label: 'Last 30 days', ms: 30 * 24 * 60 * 60 * 1000 },\n  { value: 'custom', label: 'Custom range...' },\n];\n\nfunction buildDateWithTime(date: Date, timeStr: string): Date | null {\n  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const combined = parse(timeStr, 'h:mm a', dateOnly);\n  return isValid(combined) ? combined : null;\n}\n\nexport interface DateTimeRangePickerProps {\n  preset?: DateRangePreset;\n  onPresetChange?: (preset: DateRangePreset) => void;\n  dateFrom?: Date;\n  dateTo?: Date;\n  onDateChange?: (value: Date | undefined, type: 'from' | 'to') => void;\n  /**\n   * Called once with both ends when a custom range is applied. When provided it replaces\n   * the two `onDateChange` calls for that step, so consumers can write the range atomically.\n   */\n  onDateRangeChange?: (from: Date | undefined, to: Date | undefined) => void;\n  disabled?: boolean;\n  /** Subset of presets to show. If omitted, all presets are shown. */\n  presets?: readonly DateRangePreset[];\n  /** Size passed through to the trigger Button. Defaults to 'md'. */\n  size?: ButtonProps['size'];\n  /**\n   * Replace the default Button trigger. Receives the current label (preset name or\n   * custom range) and must return an element the menu/popover can attach to.\n   */\n  renderTrigger?: (props: { label: string; disabled?: boolean }) => ReactElement;\n}\n\nexport function DateTimeRangePicker({\n  preset = 'all',\n  onPresetChange,\n  dateFrom,\n  dateTo,\n  onDateChange,\n  onDateRangeChange,\n  disabled,\n  presets,\n  size = 'md',\n  renderTrigger,\n}: DateTimeRangePickerProps) {\n  const visiblePresets = presets ? DATE_PRESETS.filter(p => presets.includes(p.value)) : DATE_PRESETS;\n  const fallbackPreset: DateRangePreset = visiblePresets.find(p => p.value !== 'custom')?.value ?? 'all';\n  const [customRangeOpen, setCustomRangeOpen] = useState(false);\n  const [draftDateFrom, setDraftDateFrom] = useState<Date | undefined>(dateFrom);\n  const [draftDateTo, setDraftDateTo] = useState<Date | undefined>(dateTo);\n  const [draftTimeFrom, setDraftTimeFrom] = useState('12:00 AM');\n  const [draftTimeTo, setDraftTimeTo] = useState('11:59 PM');\n  const [customRangeError, setCustomRangeError] = useState<string | undefined>();\n  const customRangeFieldName = useId();\n\n  const datePresetLabel = DATE_PRESETS.find(p => p.value === preset)?.label ?? 'All';\n\n  const handlePresetSelect = (value: DateRangePreset) => {\n    onPresetChange?.(value);\n    if (value === 'custom') {\n      setDraftDateFrom(dateFrom);\n      setDraftDateTo(dateTo);\n      setDraftTimeFrom('12:00 AM');\n      setDraftTimeTo('11:59 PM');\n      setCustomRangeOpen(true);\n      return;\n    }\n    const entry = DATE_PRESETS.find(p => p.value === value);\n    if (entry?.ms) {\n      onDateChange?.(new Date(Date.now() - entry.ms), 'from');\n      onDateChange?.(undefined, 'to');\n    } else {\n      onDateChange?.(undefined, 'from');\n      onDateChange?.(undefined, 'to');\n    }\n  };\n\n  const applyCustomRange = () => {\n    const fromDate = draftDateFrom ? (buildDateWithTime(draftDateFrom, draftTimeFrom) ?? draftDateFrom) : undefined;\n    const toDate = draftDateTo ? (buildDateWithTime(draftDateTo, draftTimeTo) ?? draftDateTo) : undefined;\n    if (fromDate && toDate && fromDate.getTime() > toDate.getTime()) {\n      setCustomRangeError('Start date/time must be before end date/time');\n      return;\n    }\n    setCustomRangeError(undefined);\n    if (onDateRangeChange) {\n      onDateRangeChange(fromDate, toDate);\n    } else {\n      onDateChange?.(fromDate, 'from');\n      onDateChange?.(toDate, 'to');\n    }\n    setCustomRangeOpen(false);\n  };\n\n  if (preset === 'custom') {\n    const customLabel = `${dateFrom ? dateFrom.toLocaleDateString() : 'Start'} \\u2013 ${dateTo ? dateTo.toLocaleDateString() : 'End'}`;\n    return (\n      <Popover open={customRangeOpen} onOpenChange={setCustomRangeOpen}>\n        {renderTrigger ? (\n          <PopoverTrigger render={renderTrigger({ label: customLabel, disabled })} />\n        ) : (\n          <PopoverTrigger asChild>\n            <Button size={size} disabled={disabled} icon={<CalendarIcon />}>\n              {customLabel}\n            </Button>\n          </PopoverTrigger>\n        )}\n        <PopoverContent align=\"start\" className={cn('w-auto p-0')}>\n          <div\n            role=\"group\"\n            aria-label=\"Custom date range\"\n            aria-invalid={customRangeError ? true : undefined}\n            aria-describedby={customRangeError ? fieldErrorId(customRangeFieldName) : undefined}\n          >\n            <div className={cn('flex')}>\n              <div className={cn('border-r border-border')}>\n                <span className={cn('block px-4 pt-3 text-column text-muted-foreground')}>Start</span>\n                <DatePicker\n                  mode=\"single\"\n                  selected={draftDateFrom}\n                  month={draftDateFrom}\n                  onSelect={setDraftDateFrom}\n                  disabled={disabled}\n                  toDate={draftDateTo}\n                />\n                <TimePicker\n                  className=\"mx-4 mb-3 w-auto\"\n                  defaultValue={draftTimeFrom}\n                  onValueChange={v => {\n                    if (!disabled) setDraftTimeFrom(v);\n                  }}\n                />\n              </div>\n              <div>\n                <span className={cn('block px-4 pt-3 text-column text-muted-foreground')}>End</span>\n                <DatePicker\n                  mode=\"single\"\n                  selected={draftDateTo}\n                  month={draftDateTo}\n                  onSelect={setDraftDateTo}\n                  disabled={disabled}\n                  fromDate={draftDateFrom}\n                />\n                <TimePicker\n                  className=\"mx-4 mb-3 w-auto\"\n                  defaultValue={draftTimeTo}\n                  onValueChange={v => {\n                    if (!disabled) setDraftTimeTo(v);\n                  }}\n                />\n              </div>\n            </div>\n            {customRangeError && (\n              <FieldBlock.ErrorMsg name={customRangeFieldName} className=\"px-4 pb-1\">\n                {customRangeError}\n              </FieldBlock.ErrorMsg>\n            )}\n          </div>\n          <div className={cn('flex items-center justify-between px-4 pb-3')}>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              disabled={disabled}\n              onClick={() => {\n                setCustomRangeError(undefined);\n                handlePresetSelect(fallbackPreset);\n              }}\n            >\n              &larr; Presets\n            </Button>\n            <Button icon={<Check />} variant=\"primary\" size=\"sm\" onClick={applyCustomRange} disabled={disabled}>\n              Apply\n            </Button>\n          </div>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return (\n    <DropdownMenu>\n      {renderTrigger ? (\n        <DropdownMenu.Trigger render={renderTrigger({ label: datePresetLabel, disabled })} />\n      ) : (\n        <DropdownMenu.Trigger asChild>\n          <Button size={size} disabled={disabled} icon={<CalendarIcon />}>\n            {datePresetLabel}\n          </Button>\n        </DropdownMenu.Trigger>\n      )}\n      <DropdownMenu.Content align=\"start\">\n        {visiblePresets.map(p => (\n          <DropdownMenu.Item key={p.value} onSelect={() => handlePresetSelect(p.value)}>\n            {p.label}\n          </DropdownMenu.Item>\n        ))}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/date-time-range-picker-C6hjZswK.cjs

@@ -0,0 +1,180 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const dateFns = require('date-fns');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const Button = require('./Button-CVewl8nT.cjs');
+const datePicker = require('./date-picker-dRZF8frf.cjs');
+const timePicker = require('./time-picker-Dlm-C-n4.cjs');
+const dropdownMenu = require('./dropdown-menu-DNRCA4Gj.cjs');
+const fieldBlock = require('./field-block-Dy1IaWbv.cjs');
+const fieldErrorId = require('./field-error-id-B3Z2Zu5y.cjs');
+const popover = require('./popover-lBqKiPtp.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+const DATE_PRESETS = [
+  { value: "all", label: "All" },
+  { value: "last-24h", label: "Last 24 hours", ms: 24 * 60 * 60 * 1e3 },
+  { value: "last-3d", label: "Last 3 days", ms: 3 * 24 * 60 * 60 * 1e3 },
+  { value: "last-7d", label: "Last 7 days", ms: 7 * 24 * 60 * 60 * 1e3 },
+  { value: "last-14d", label: "Last 14 days", ms: 14 * 24 * 60 * 60 * 1e3 },
+  { value: "last-30d", label: "Last 30 days", ms: 30 * 24 * 60 * 60 * 1e3 },
+  { value: "custom", label: "Custom range..." }
+];
+function buildDateWithTime(date, timeStr) {
+  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const combined = dateFns.parse(timeStr, "h:mm a", dateOnly);
+  return dateFns.isValid(combined) ? combined : null;
+}
+function DateTimeRangePicker({
+  preset = "all",
+  onPresetChange,
+  dateFrom,
+  dateTo,
+  onDateChange,
+  onDateRangeChange,
+  disabled,
+  presets,
+  size = "md",
+  renderTrigger
+}) {
+  const visiblePresets = presets ? DATE_PRESETS.filter((p) => presets.includes(p.value)) : DATE_PRESETS;
+  const fallbackPreset = visiblePresets.find((p) => p.value !== "custom")?.value ?? "all";
+  const [customRangeOpen, setCustomRangeOpen] = React.useState(false);
+  const [draftDateFrom, setDraftDateFrom] = React.useState(dateFrom);
+  const [draftDateTo, setDraftDateTo] = React.useState(dateTo);
+  const [draftTimeFrom, setDraftTimeFrom] = React.useState("12:00 AM");
+  const [draftTimeTo, setDraftTimeTo] = React.useState("11:59 PM");
+  const [customRangeError, setCustomRangeError] = React.useState();
+  const customRangeFieldName = React.useId();
+  const datePresetLabel = DATE_PRESETS.find((p) => p.value === preset)?.label ?? "All";
+  const handlePresetSelect = (value) => {
+    onPresetChange?.(value);
+    if (value === "custom") {
+      setDraftDateFrom(dateFrom);
+      setDraftDateTo(dateTo);
+      setDraftTimeFrom("12:00 AM");
+      setDraftTimeTo("11:59 PM");
+      setCustomRangeOpen(true);
+      return;
+    }
+    const entry = DATE_PRESETS.find((p) => p.value === value);
+    if (entry?.ms) {
+      onDateChange?.(new Date(Date.now() - entry.ms), "from");
+      onDateChange?.(void 0, "to");
+    } else {
+      onDateChange?.(void 0, "from");
+      onDateChange?.(void 0, "to");
+    }
+  };
+  const applyCustomRange = () => {
+    const fromDate = draftDateFrom ? buildDateWithTime(draftDateFrom, draftTimeFrom) ?? draftDateFrom : void 0;
+    const toDate = draftDateTo ? buildDateWithTime(draftDateTo, draftTimeTo) ?? draftDateTo : void 0;
+    if (fromDate && toDate && fromDate.getTime() > toDate.getTime()) {
+      setCustomRangeError("Start date/time must be before end date/time");
+      return;
+    }
+    setCustomRangeError(void 0);
+    if (onDateRangeChange) {
+      onDateRangeChange(fromDate, toDate);
+    } else {
+      onDateChange?.(fromDate, "from");
+      onDateChange?.(toDate, "to");
+    }
+    setCustomRangeOpen(false);
+  };
+  if (preset === "custom") {
+    const customLabel = `${dateFrom ? dateFrom.toLocaleDateString() : "Start"} – ${dateTo ? dateTo.toLocaleDateString() : "End"}`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { open: customRangeOpen, onOpenChange: setCustomRangeOpen, children: [
+      renderTrigger ? /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { render: renderTrigger({ label: customLabel, disabled }) }) : /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size, disabled, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}), children: customLabel }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(popover.PopoverContent, { align: "start", className: utils_cn.cn("w-auto p-0"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": "Custom date range",
+            "aria-invalid": customRangeError ? true : void 0,
+            "aria-describedby": customRangeError ? fieldErrorId.fieldErrorId(customRangeFieldName) : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex"), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("border-r border-border"), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("block px-4 pt-3 text-column text-muted-foreground"), children: "Start" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    datePicker.DatePicker,
+                    {
+                      mode: "single",
+                      selected: draftDateFrom,
+                      month: draftDateFrom,
+                      onSelect: setDraftDateFrom,
+                      disabled,
+                      toDate: draftDateTo
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    timePicker.TimePicker,
+                    {
+                      className: "mx-4 mb-3 w-auto",
+                      defaultValue: draftTimeFrom,
+                      onValueChange: (v) => {
+                        if (!disabled) setDraftTimeFrom(v);
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("block px-4 pt-3 text-column text-muted-foreground"), children: "End" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    datePicker.DatePicker,
+                    {
+                      mode: "single",
+                      selected: draftDateTo,
+                      month: draftDateTo,
+                      onSelect: setDraftDateTo,
+                      disabled,
+                      fromDate: draftDateFrom
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    timePicker.TimePicker,
+                    {
+                      className: "mx-4 mb-3 w-auto",
+                      defaultValue: draftTimeTo,
+                      onValueChange: (v) => {
+                        if (!disabled) setDraftTimeTo(v);
+                      }
+                    }
+                  )
+                ] })
+              ] }),
+              customRangeError && /* @__PURE__ */ jsxRuntime.jsx(fieldBlock.FieldBlock.ErrorMsg, { name: customRangeFieldName, className: "px-4 pb-1", children: customRangeError })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex items-center justify-between px-4 pb-3"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              disabled,
+              onClick: () => {
+                setCustomRangeError(void 0);
+                handlePresetSelect(fallbackPreset);
+              },
+              children: "← Presets"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}), variant: "primary", size: "sm", onClick: applyCustomRange, disabled, children: "Apply" })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+    renderTrigger ? /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { render: renderTrigger({ label: datePresetLabel, disabled }) }) : /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size, disabled, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}), children: datePresetLabel }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Content, { align: "start", children: visiblePresets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Item, { onSelect: () => handlePresetSelect(p.value), children: p.label }, p.value)) })
+  ] });
+}
+
+exports.DateTimeRangePicker = DateTimeRangePicker;
+//# sourceMappingURL=date-time-range-picker-C6hjZswK.cjs.map

package/dist/date-time-range-picker-C6hjZswK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-range-picker-C6hjZswK.cjs","sources":["../src/ds/components/DateTimeRangePicker/date-time-range-picker.tsx"],"sourcesContent":["import { isValid, parse } from 'date-fns';\nimport { CalendarIcon, Check } from 'lucide-react';\nimport { useId, useState } from 'react';\nimport type { ReactElement } from 'react';\nimport { Button } from '@/ds/components/Button/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { DatePicker, TimePicker } from '@/ds/components/DateTimePicker';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu/dropdown-menu';\nimport { FieldBlock, fieldErrorId } from '@/ds/components/FormFieldBlocks';\nimport { Popover, PopoverTrigger, PopoverContent } from '@/ds/components/Popover/popover';\nimport { cn } from '@/lib/utils';\n\nexport type DateRangePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';\n\nconst DATE_PRESETS: { value: DateRangePreset; label: string; ms?: number }[] = [\n  { value: 'all', label: 'All' },\n  { value: 'last-24h', label: 'Last 24 hours', ms: 24 * 60 * 60 * 1000 },\n  { value: 'last-3d', label: 'Last 3 days', ms: 3 * 24 * 60 * 60 * 1000 },\n  { value: 'last-7d', label: 'Last 7 days', ms: 7 * 24 * 60 * 60 * 1000 },\n  { value: 'last-14d', label: 'Last 14 days', ms: 14 * 24 * 60 * 60 * 1000 },\n  { value: 'last-30d', label: 'Last 30 days', ms: 30 * 24 * 60 * 60 * 1000 },\n  { value: 'custom', label: 'Custom range...' },\n];\n\nfunction buildDateWithTime(date: Date, timeStr: string): Date | null {\n  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  const combined = parse(timeStr, 'h:mm a', dateOnly);\n  return isValid(combined) ? combined : null;\n}\n\nexport interface DateTimeRangePickerProps {\n  preset?: DateRangePreset;\n  onPresetChange?: (preset: DateRangePreset) => void;\n  dateFrom?: Date;\n  dateTo?: Date;\n  onDateChange?: (value: Date | undefined, type: 'from' | 'to') => void;\n  /**\n   * Called once with both ends when a custom range is applied. When provided it replaces\n   * the two `onDateChange` calls for that step, so consumers can write the range atomically.\n   */\n  onDateRangeChange?: (from: Date | undefined, to: Date | undefined) => void;\n  disabled?: boolean;\n  /** Subset of presets to show. If omitted, all presets are shown. */\n  presets?: readonly DateRangePreset[];\n  /** Size passed through to the trigger Button. Defaults to 'md'. */\n  size?: ButtonProps['size'];\n  /**\n   * Replace the default Button trigger. Receives the current label (preset name or\n   * custom range) and must return an element the menu/popover can attach to.\n   */\n  renderTrigger?: (props: { label: string; disabled?: boolean }) => ReactElement;\n}\n\nexport function DateTimeRangePicker({\n  preset = 'all',\n  onPresetChange,\n  dateFrom,\n  dateTo,\n  onDateChange,\n  onDateRangeChange,\n  disabled,\n  presets,\n  size = 'md',\n  renderTrigger,\n}: DateTimeRangePickerProps) {\n  const visiblePresets = presets ? DATE_PRESETS.filter(p => presets.includes(p.value)) : DATE_PRESETS;\n  const fallbackPreset: DateRangePreset = visiblePresets.find(p => p.value !== 'custom')?.value ?? 'all';\n  const [customRangeOpen, setCustomRangeOpen] = useState(false);\n  const [draftDateFrom, setDraftDateFrom] = useState<Date | undefined>(dateFrom);\n  const [draftDateTo, setDraftDateTo] = useState<Date | undefined>(dateTo);\n  const [draftTimeFrom, setDraftTimeFrom] = useState('12:00 AM');\n  const [draftTimeTo, setDraftTimeTo] = useState('11:59 PM');\n  const [customRangeError, setCustomRangeError] = useState<string | undefined>();\n  const customRangeFieldName = useId();\n\n  const datePresetLabel = DATE_PRESETS.find(p => p.value === preset)?.label ?? 'All';\n\n  const handlePresetSelect = (value: DateRangePreset) => {\n    onPresetChange?.(value);\n    if (value === 'custom') {\n      setDraftDateFrom(dateFrom);\n      setDraftDateTo(dateTo);\n      setDraftTimeFrom('12:00 AM');\n      setDraftTimeTo('11:59 PM');\n      setCustomRangeOpen(true);\n      return;\n    }\n    const entry = DATE_PRESETS.find(p => p.value === value);\n    if (entry?.ms) {\n      onDateChange?.(new Date(Date.now() - entry.ms), 'from');\n      onDateChange?.(undefined, 'to');\n    } else {\n      onDateChange?.(undefined, 'from');\n      onDateChange?.(undefined, 'to');\n    }\n  };\n\n  const applyCustomRange = () => {\n    const fromDate = draftDateFrom ? (buildDateWithTime(draftDateFrom, draftTimeFrom) ?? draftDateFrom) : undefined;\n    const toDate = draftDateTo ? (buildDateWithTime(draftDateTo, draftTimeTo) ?? draftDateTo) : undefined;\n    if (fromDate && toDate && fromDate.getTime() > toDate.getTime()) {\n      setCustomRangeError('Start date/time must be before end date/time');\n      return;\n    }\n    setCustomRangeError(undefined);\n    if (onDateRangeChange) {\n      onDateRangeChange(fromDate, toDate);\n    } else {\n      onDateChange?.(fromDate, 'from');\n      onDateChange?.(toDate, 'to');\n    }\n    setCustomRangeOpen(false);\n  };\n\n  if (preset === 'custom') {\n    const customLabel = `${dateFrom ? dateFrom.toLocaleDateString() : 'Start'} \\u2013 ${dateTo ? dateTo.toLocaleDateString() : 'End'}`;\n    return (\n      <Popover open={customRangeOpen} onOpenChange={setCustomRangeOpen}>\n        {renderTrigger ? (\n          <PopoverTrigger render={renderTrigger({ label: customLabel, disabled })} />\n        ) : (\n          <PopoverTrigger asChild>\n            <Button size={size} disabled={disabled} icon={<CalendarIcon />}>\n              {customLabel}\n            </Button>\n          </PopoverTrigger>\n        )}\n        <PopoverContent align=\"start\" className={cn('w-auto p-0')}>\n          <div\n            role=\"group\"\n            aria-label=\"Custom date range\"\n            aria-invalid={customRangeError ? true : undefined}\n            aria-describedby={customRangeError ? fieldErrorId(customRangeFieldName) : undefined}\n          >\n            <div className={cn('flex')}>\n              <div className={cn('border-r border-border')}>\n                <span className={cn('block px-4 pt-3 text-column text-muted-foreground')}>Start</span>\n                <DatePicker\n                  mode=\"single\"\n                  selected={draftDateFrom}\n                  month={draftDateFrom}\n                  onSelect={setDraftDateFrom}\n                  disabled={disabled}\n                  toDate={draftDateTo}\n                />\n                <TimePicker\n                  className=\"mx-4 mb-3 w-auto\"\n                  defaultValue={draftTimeFrom}\n                  onValueChange={v => {\n                    if (!disabled) setDraftTimeFrom(v);\n                  }}\n                />\n              </div>\n              <div>\n                <span className={cn('block px-4 pt-3 text-column text-muted-foreground')}>End</span>\n                <DatePicker\n                  mode=\"single\"\n                  selected={draftDateTo}\n                  month={draftDateTo}\n                  onSelect={setDraftDateTo}\n                  disabled={disabled}\n                  fromDate={draftDateFrom}\n                />\n                <TimePicker\n                  className=\"mx-4 mb-3 w-auto\"\n                  defaultValue={draftTimeTo}\n                  onValueChange={v => {\n                    if (!disabled) setDraftTimeTo(v);\n                  }}\n                />\n              </div>\n            </div>\n            {customRangeError && (\n              <FieldBlock.ErrorMsg name={customRangeFieldName} className=\"px-4 pb-1\">\n                {customRangeError}\n              </FieldBlock.ErrorMsg>\n            )}\n          </div>\n          <div className={cn('flex items-center justify-between px-4 pb-3')}>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              disabled={disabled}\n              onClick={() => {\n                setCustomRangeError(undefined);\n                handlePresetSelect(fallbackPreset);\n              }}\n            >\n              &larr; Presets\n            </Button>\n            <Button icon={<Check />} variant=\"primary\" size=\"sm\" onClick={applyCustomRange} disabled={disabled}>\n              Apply\n            </Button>\n          </div>\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return (\n    <DropdownMenu>\n      {renderTrigger ? (\n        <DropdownMenu.Trigger render={renderTrigger({ label: datePresetLabel, disabled })} />\n      ) : (\n        <DropdownMenu.Trigger asChild>\n          <Button size={size} disabled={disabled} icon={<CalendarIcon />}>\n            {datePresetLabel}\n          </Button>\n        </DropdownMenu.Trigger>\n      )}\n      <DropdownMenu.Content align=\"start\">\n        {visiblePresets.map(p => (\n          <DropdownMenu.Item key={p.value} onSelect={() => handlePresetSelect(p.value)}>\n            {p.label}\n          </DropdownMenu.Item>\n        ))}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n}\n"],"names":["parse","isValid","useState","useId","jsxs","Popover","jsx","PopoverTrigger","Button","CalendarIcon","PopoverContent","cn","fieldErrorId","DatePicker","TimePicker","FieldBlock","Check","DropdownMenu"],"mappings":"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"}