@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/date-time-picker-t67keTZg.js

@@ -0,0 +1,245 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { format, isValid, formatDate } from 'date-fns';
+import { CircleAlertIcon, CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { T as TextFieldBlock } from './text-field-block-gjrZyIFr.js';
+import { D as DatePicker, T as TimePicker } from './time-picker-BtJz6IU2.js';
+import { B as Button } from './Button-DoOEJwa_.js';
+import { P as Popover, b as PopoverTrigger, a as PopoverContent } from './popover-CRLP2Ay_.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+
+const DateTimePicker = ({
+  value,
+  minValue,
+  maxValue,
+  defaultTimeStrValue,
+  onValueChange,
+  children,
+  className,
+  placeholder,
+  ...props
+}) => {
+  const [openPopover, setOpenPopover] = React.useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: setOpenPopover, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children ? children : /* @__PURE__ */ jsx(
+      DefaultTrigger,
+      {
+        value,
+        placeholder,
+        className,
+        "data-testid": "datepicker-button"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "backdrop-blur-4xl w-auto p-0! bg-surface4 max-w-[16.5rem]",
+        align: "start",
+        "data-testid": "datepicker-calendar",
+        children: /* @__PURE__ */ jsx(
+          DateTimePickerContent,
+          {
+            value,
+            minValue,
+            maxValue,
+            onValueChange,
+            setOpenPopover,
+            defaultTimeStrValue,
+            ...props
+          }
+        )
+      }
+    )
+  ] });
+};
+function getCompoundDate({ date, timeStr = "" }) {
+  if (!isValid(date)) {
+    return null;
+  }
+  if (timeStr) {
+    const dateStr = format(date, "yyyy-MM-dd");
+    const newDate = /* @__PURE__ */ new Date(`${dateStr} ${timeStr}`);
+    if (isValid(newDate)) {
+      return newDate;
+    }
+  }
+  return date;
+}
+const DateTimePickerContent = ({
+  value,
+  minValue,
+  maxValue,
+  onValueChange,
+  setOpenPopover,
+  placeholder,
+  className,
+  defaultTimeStrValue,
+  ...props
+}) => {
+  const [localErrorMsg, setLocalErrorMsg] = React.useState(null);
+  const [dateInputValue, setDateInputValue] = React.useState(
+    value ? format(getCompoundDate({ date: value, timeStr: defaultTimeStrValue }) || "", "PP p") : ""
+  );
+  const [timeStrValue, setTimeStrValue] = React.useState(defaultTimeStrValue || "");
+  const [selected, setSelected] = React.useState(value ? new Date(value) : void 0);
+  const debouncedDateUpdate = useDebouncedCallback((date) => {
+    if (isValid(date)) {
+      setSelected(date);
+      onValueChange?.(date);
+      setOpenPopover?.(false);
+    }
+  }, 500);
+  const handleInputChange = (e) => {
+    setDateInputValue(e.currentTarget.value);
+    const date = new Date(e.currentTarget.value);
+    debouncedDateUpdate(date);
+  };
+  const updateInputValue = (date) => {
+    if (isValid(date)) {
+      if (maxValue && date > maxValue) {
+        setLocalErrorMsg(`The selected date should be before ${format(maxValue, "PP p")}`);
+        setDateInputValue("");
+      } else if (minValue && date < minValue) {
+        setLocalErrorMsg(`The selected date should be after ${format(minValue, "PP p")}`);
+        setDateInputValue("");
+      } else {
+        setDateInputValue(format(date, "PP p"));
+        setLocalErrorMsg("");
+      }
+    } else {
+      setDateInputValue("");
+      setLocalErrorMsg("");
+    }
+  };
+  const dateInputValueDate = new Date(dateInputValue);
+  const dateInputValueIsValid = isValid(dateInputValueDate);
+  const newValueDefined = dateInputValueIsValid && dateInputValueDate.getTime() !== value?.getTime();
+  const handleDaySelect = (date) => {
+    setSelected(date);
+    if (date) {
+      const newDate = getCompoundDate({ date, timeStr: timeStrValue });
+      updateInputValue(newDate || "");
+    } else {
+      updateInputValue("");
+    }
+  };
+  const handleMonthSelect = (date) => {
+    setSelected(date);
+    if (date) {
+      const newDate = getCompoundDate({ date, timeStr: timeStrValue });
+      updateInputValue(newDate || "");
+    } else {
+      updateInputValue("");
+    }
+  };
+  const handleTimeStrChange = (val) => {
+    setTimeStrValue(val);
+    if (dateInputValueIsValid) {
+      const newDate = getCompoundDate({ date: dateInputValueDate, timeStr: val });
+      updateInputValue(newDate || "");
+    }
+  };
+  const handleCancel = () => {
+    setOpenPopover?.(false);
+  };
+  const handleApply = () => {
+    if (isValid(dateInputValueDate)) {
+      onValueChange(dateInputValueDate);
+    }
+    setOpenPopover?.(false);
+  };
+  const handleClear = () => {
+    onValueChange(void 0);
+    setSelected(void 0);
+    setDateInputValue("");
+    setTimeStrValue("");
+    setOpenPopover?.(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Choose date",
+      className: cn("relative flex flex-col", className),
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          setOpenPopover?.(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          TextFieldBlock,
+          {
+            name: "date-range",
+            type: "text",
+            value: dateInputValue,
+            onChange: handleInputChange,
+            placeholder,
+            className: "m-4 mb-0 w-auto!"
+          }
+        ),
+        localErrorMsg && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "text-ui-md m-4 mb-0 text-neutral3",
+              "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:mt-0.5 [&>svg]:text-red-500 [&>svg]:float-left [&>svg]:mr-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CircleAlertIcon, {}),
+              " ",
+              localErrorMsg
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            mode: "single",
+            month: selected,
+            selected,
+            onMonthChange: handleMonthSelect,
+            onSelect: handleDaySelect,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            onValueChange: handleTimeStrChange,
+            className: "m-4 mt-0 w-auto",
+            defaultValue: value ? formatDate(new Date(value), "hh:mm a") : defaultTimeStrValue
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_2fr] gap-2 m-4 mt-0", children: [
+          newValueDefined && /* @__PURE__ */ jsx(Button, { tabIndex: 0, size: "md", onClick: handleClear, type: "button", children: "Clear" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              tabIndex: 0,
+              type: "button",
+              size: "md",
+              variant: newValueDefined ? "primary" : "default",
+              onClick: () => {
+                dateInputValueIsValid ? handleApply() : handleCancel();
+              },
+              children: newValueDefined ? `Apply` : `Cancel`
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const DefaultTrigger = React.forwardRef(
+  ({ value, placeholder, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Button, { ref, className: cn("justify-start", className), ...props, children: [
+      /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" }),
+      value ? /* @__PURE__ */ jsx("span", { className: "text-white", children: format(value, "PP p") }) : /* @__PURE__ */ jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
+    ] });
+  }
+);
+
+export { DateTimePicker as D, DateTimePickerContent as a, DefaultTrigger as b };
+//# sourceMappingURL=date-time-picker-t67keTZg.js.map

package/dist/date-time-picker-t67keTZg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-picker-t67keTZg.js","sources":["../src/ds/components/DateTimePicker/date-time-picker.tsx"],"sourcesContent":["import { format, formatDate, isValid } from 'date-fns';\nimport { CalendarIcon, CircleAlertIcon } from 'lucide-react';\nimport * as React from 'react';\nimport type { DayPickerSingleProps } from 'react-day-picker';\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { TextFieldBlock } from '../FormFieldBlocks/fields/text-field-block';\nimport { DatePicker } from './date-picker';\nimport { TimePicker } from './time-picker';\nimport { Button } from '@/ds/components/Button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { cn } from '@/lib/utils';\n\ntype CommonProps = Omit<DayPickerSingleProps, 'mode' | 'selected' | 'onSelect'> & {\n  value: Date | undefined | null;\n  minValue?: Date | null;\n  maxValue?: Date | null;\n  defaultTimeStrValue?: string;\n  onValueChange: (date: Date | undefined) => void;\n};\n\nexport type DateTimePickerProps =\n  | (CommonProps & { children?: never; className?: string; placeholder?: string })\n  | (CommonProps & { children: React.ReactNode; className?: never; placeholder?: string });\n\nexport const DateTimePicker: React.FC<DateTimePickerProps> = ({\n  value,\n  minValue,\n  maxValue,\n  defaultTimeStrValue,\n  onValueChange,\n  children,\n  className,\n  placeholder,\n  ...props\n}) => {\n  const [openPopover, setOpenPopover] = React.useState(false);\n\n  return (\n    <Popover open={openPopover} onOpenChange={setOpenPopover}>\n      <PopoverTrigger asChild>\n        {children ? (\n          children\n        ) : (\n          <DefaultTrigger\n            value={value}\n            placeholder={placeholder}\n            className={className}\n            data-testid=\"datepicker-button\"\n          />\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"backdrop-blur-4xl w-auto p-0! bg-surface4 max-w-[16.5rem]\"\n        align=\"start\"\n        data-testid=\"datepicker-calendar\"\n      >\n        <DateTimePickerContent\n          value={value}\n          minValue={minValue}\n          maxValue={maxValue}\n          onValueChange={onValueChange}\n          setOpenPopover={setOpenPopover}\n          defaultTimeStrValue={defaultTimeStrValue}\n          {...props}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nfunction getCompoundDate({ date, timeStr = '' }: { date: Date; timeStr?: string }): Date | null {\n  if (!isValid(date)) {\n    return null;\n  }\n\n  if (timeStr) {\n    const dateStr = format(date, 'yyyy-MM-dd');\n    const newDate = new Date(`${dateStr} ${timeStr}`);\n    if (isValid(newDate)) {\n      return newDate;\n    }\n  }\n\n  return date;\n}\n\nexport const DateTimePickerContent = ({\n  value,\n  minValue,\n  maxValue,\n  onValueChange,\n  setOpenPopover,\n  placeholder,\n  className,\n  defaultTimeStrValue,\n  ...props\n}: CommonProps & {\n  setOpenPopover?: (open: boolean) => void;\n  placeholder?: string;\n  className?: string;\n}) => {\n  const [localErrorMsg, setLocalErrorMsg] = React.useState<string | null>(null);\n  const [dateInputValue, setDateInputValue] = React.useState<string>(\n    value ? format(getCompoundDate({ date: value, timeStr: defaultTimeStrValue }) || '', 'PP p') : '',\n  );\n  const [timeStrValue, setTimeStrValue] = React.useState<string>(defaultTimeStrValue || '');\n  const [selected, setSelected] = React.useState<Date | undefined>(value ? new Date(value) : undefined);\n\n  const debouncedDateUpdate = useDebouncedCallback((date: Date) => {\n    if (isValid(date)) {\n      setSelected(date);\n      onValueChange?.(date);\n      setOpenPopover?.(false);\n    }\n  }, 500);\n\n  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = e => {\n    setDateInputValue(e.currentTarget.value);\n    const date = new Date(e.currentTarget.value);\n    debouncedDateUpdate(date);\n  };\n\n  const updateInputValue = (date: Date | string) => {\n    if (isValid(date)) {\n      if (maxValue && date > maxValue) {\n        setLocalErrorMsg(`The selected date should be before ${format(maxValue, 'PP p')}`);\n        setDateInputValue('');\n      } else if (minValue && date < minValue) {\n        setLocalErrorMsg(`The selected date should be after ${format(minValue, 'PP p')}`);\n        setDateInputValue('');\n      } else {\n        setDateInputValue(format(date, 'PP p'));\n        setLocalErrorMsg('');\n      }\n    } else {\n      setDateInputValue('');\n      setLocalErrorMsg('');\n    }\n  };\n\n  const dateInputValueDate = new Date(dateInputValue);\n  const dateInputValueIsValid = isValid(dateInputValueDate);\n  const newValueDefined = dateInputValueIsValid && dateInputValueDate.getTime() !== value?.getTime();\n\n  const handleDaySelect = (date: Date | undefined) => {\n    setSelected(date);\n    if (date) {\n      const newDate = getCompoundDate({ date, timeStr: timeStrValue });\n      updateInputValue(newDate || '');\n    } else {\n      updateInputValue('');\n    }\n  };\n\n  const handleMonthSelect = (date: Date | undefined) => {\n    setSelected(date);\n    if (date) {\n      const newDate = getCompoundDate({ date, timeStr: timeStrValue });\n      updateInputValue(newDate || '');\n    } else {\n      updateInputValue('');\n    }\n  };\n\n  const handleTimeStrChange = (val: string) => {\n    setTimeStrValue(val);\n\n    if (dateInputValueIsValid) {\n      const newDate = getCompoundDate({ date: dateInputValueDate, timeStr: val });\n      updateInputValue(newDate || '');\n    }\n  };\n\n  const handleCancel = () => {\n    setOpenPopover?.(false);\n  };\n\n  const handleApply = () => {\n    if (isValid(dateInputValueDate)) {\n      onValueChange(dateInputValueDate);\n    }\n    setOpenPopover?.(false);\n  };\n\n  const handleClear = () => {\n    onValueChange(undefined);\n    setSelected(undefined);\n    setDateInputValue('');\n    setTimeStrValue('');\n    setOpenPopover?.(false);\n  };\n\n  return (\n    <div\n      aria-label=\"Choose date\"\n      className={cn('relative flex flex-col', className)}\n      onKeyDown={e => {\n        e.stopPropagation();\n        if (e.key === 'Escape') {\n          setOpenPopover?.(false);\n        }\n      }}\n    >\n      <TextFieldBlock\n        name=\"date-range\"\n        type=\"text\"\n        value={dateInputValue}\n        onChange={handleInputChange}\n        placeholder={placeholder}\n        className=\"m-4 mb-0 w-auto!\"\n      />\n\n      {localErrorMsg && (\n        <div\n          className={cn(\n            'text-ui-md m-4 mb-0 text-neutral3',\n            '[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:mt-0.5 [&>svg]:text-red-500 [&>svg]:float-left [&>svg]:mr-2',\n          )}\n        >\n          <CircleAlertIcon /> {localErrorMsg}\n        </div>\n      )}\n\n      <DatePicker\n        mode=\"single\"\n        month={selected}\n        selected={selected}\n        onMonthChange={handleMonthSelect}\n        onSelect={handleDaySelect}\n        {...props}\n      />\n\n      <TimePicker\n        onValueChange={handleTimeStrChange}\n        className=\"m-4 mt-0 w-auto\"\n        defaultValue={value ? formatDate(new Date(value), 'hh:mm a') : defaultTimeStrValue}\n      />\n\n      <div className=\"grid grid-cols-[1fr_2fr] gap-2 m-4 mt-0\">\n        {newValueDefined && (\n          <Button tabIndex={0} size=\"md\" onClick={handleClear} type=\"button\">\n            Clear\n          </Button>\n        )}\n        <Button\n          tabIndex={0}\n          type=\"button\"\n          size=\"md\"\n          variant={newValueDefined ? 'primary' : 'default'}\n          onClick={() => {\n            dateInputValueIsValid ? handleApply() : handleCancel();\n          }}\n        >\n          {newValueDefined ? `Apply` : `Cancel`}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\ntype DefaultButtonProps = {\n  className?: string;\n  placeholder?: string;\n  value: Date | undefined | null;\n};\n\nexport const DefaultTrigger = React.forwardRef<HTMLButtonElement, DefaultButtonProps>(\n  ({ value, placeholder, className, ...props }, ref) => {\n    return (\n      <Button ref={ref} className={cn('justify-start', className)} {...props}>\n        <CalendarIcon className=\"h-4 w-4\" />\n        {value ? (\n          <span className=\"text-white\">{format(value, 'PP p')}</span>\n        ) : (\n          <span className=\"text-gray\">{placeholder ?? 'Pick a date'}</span>\n        )}\n      </Button>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAyBO,MAAM,iBAAgD,CAAC;AAAA,EAC5D,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,KAAA,CAAM,SAAS,KAAK,CAAA;AAE1D,EAAA,uBACE,IAAA,CAAC,OAAA,EAAA,EAAQ,IAAA,EAAM,WAAA,EAAa,cAAc,cAAA,EACxC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,QAAA,GACC,QAAA,mBAEA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA,EAAY;AAAA;AAAA,KACd,EAEJ,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,2DAAA;AAAA,QACV,KAAA,EAAM,OAAA;AAAA,QACN,aAAA,EAAY,qBAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA;AAAA,UAAC,qBAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA,aAAA;AAAA,YACA,cAAA;AAAA,YACA,mBAAA;AAAA,YACC,GAAG;AAAA;AAAA;AACN;AAAA;AACF,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,eAAA,CAAgB,EAAE,IAAA,EAAM,OAAA,GAAU,IAAG,EAAkD;AAC9F,EAAA,IAAI,CAAC,OAAA,CAAQ,IAAI,CAAA,EAAG;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,OAAA,GAAU,MAAA,CAAO,IAAA,EAAM,YAAY,CAAA;AACzC,IAAA,MAAM,0BAAU,IAAI,IAAA,CAAK,GAAG,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAE,CAAA;AAChD,IAAA,IAAI,OAAA,CAAQ,OAAO,CAAA,EAAG;AACpB,MAAA,OAAO,OAAA;AAAA,IACT;AAAA,EACF;AAEA,EAAA,OAAO,IAAA;AACT;AAEO,MAAM,wBAAwB,CAAC;AAAA,EACpC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG;AACL,CAAA,KAIM;AACJ,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,KAAA,CAAM,SAAwB,IAAI,CAAA;AAC5E,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,KAAA,CAAM,QAAA;AAAA,IAChD,KAAA,GAAQ,MAAA,CAAO,eAAA,CAAgB,EAAE,IAAA,EAAM,KAAA,EAAO,OAAA,EAAS,mBAAA,EAAqB,CAAA,IAAK,EAAA,EAAI,MAAM,CAAA,GAAI;AAAA,GACjG;AACA,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,IAAI,KAAA,CAAM,QAAA,CAAiB,uBAAuB,EAAE,CAAA;AACxF,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,KAAA,CAAM,QAAA,CAA2B,KAAA,GAAQ,IAAI,IAAA,CAAK,KAAK,CAAA,GAAI,MAAS,CAAA;AAEpG,EAAA,MAAM,mBAAA,GAAsB,oBAAA,CAAqB,CAAC,IAAA,KAAe;AAC/D,IAAA,IAAI,OAAA,CAAQ,IAAI,CAAA,EAAG;AACjB,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,aAAA,GAAgB,IAAI,CAAA;AACpB,MAAA,cAAA,GAAiB,KAAK,CAAA;AAAA,IACxB;AAAA,EACF,GAAG,GAAG,CAAA;AAEN,EAAA,MAAM,oBAAgE,CAAA,CAAA,KAAK;AACzE,IAAA,iBAAA,CAAkB,CAAA,CAAE,cAAc,KAAK,CAAA;AACvC,IAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,CAAA,CAAE,cAAc,KAAK,CAAA;AAC3C,IAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,IAAA,KAAwB;AAChD,IAAA,IAAI,OAAA,CAAQ,IAAI,CAAA,EAAG;AACjB,MAAA,IAAI,QAAA,IAAY,OAAO,QAAA,EAAU;AAC/B,QAAA,gBAAA,CAAiB,CAAA,mCAAA,EAAsC,MAAA,CAAO,QAAA,EAAU,MAAM,CAAC,CAAA,CAAE,CAAA;AACjF,QAAA,iBAAA,CAAkB,EAAE,CAAA;AAAA,MACtB,CAAA,MAAA,IAAW,QAAA,IAAY,IAAA,GAAO,QAAA,EAAU;AACtC,QAAA,gBAAA,CAAiB,CAAA,kCAAA,EAAqC,MAAA,CAAO,QAAA,EAAU,MAAM,CAAC,CAAA,CAAE,CAAA;AAChF,QAAA,iBAAA,CAAkB,EAAE,CAAA;AAAA,MACtB,CAAA,MAAO;AACL,QAAA,iBAAA,CAAkB,MAAA,CAAO,IAAA,EAAM,MAAM,CAAC,CAAA;AACtC,QAAA,gBAAA,CAAiB,EAAE,CAAA;AAAA,MACrB;AAAA,IACF,CAAA,MAAO;AACL,MAAA,iBAAA,CAAkB,EAAE,CAAA;AACpB,MAAA,gBAAA,CAAiB,EAAE,CAAA;AAAA,IACrB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,kBAAA,GAAqB,IAAI,IAAA,CAAK,cAAc,CAAA;AAClD,EAAA,MAAM,qBAAA,GAAwB,QAAQ,kBAAkB,CAAA;AACxD,EAAA,MAAM,kBAAkB,qBAAA,IAAyB,kBAAA,CAAmB,OAAA,EAAQ,KAAM,OAAO,OAAA,EAAQ;AAEjG,EAAA,MAAM,eAAA,GAAkB,CAAC,IAAA,KAA2B;AAClD,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,MAAM,UAAU,eAAA,CAAgB,EAAE,IAAA,EAAM,OAAA,EAAS,cAAc,CAAA;AAC/D,MAAA,gBAAA,CAAiB,WAAW,EAAE,CAAA;AAAA,IAChC,CAAA,MAAO;AACL,MAAA,gBAAA,CAAiB,EAAE,CAAA;AAAA,IACrB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,IAAA,KAA2B;AACpD,IAAA,WAAA,CAAY,IAAI,CAAA;AAChB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,MAAM,UAAU,eAAA,CAAgB,EAAE,IAAA,EAAM,OAAA,EAAS,cAAc,CAAA;AAC/D,MAAA,gBAAA,CAAiB,WAAW,EAAE,CAAA;AAAA,IAChC,CAAA,MAAO;AACL,MAAA,gBAAA,CAAiB,EAAE,CAAA;AAAA,IACrB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,mBAAA,GAAsB,CAAC,GAAA,KAAgB;AAC3C,IAAA,eAAA,CAAgB,GAAG,CAAA;AAEnB,IAAA,IAAI,qBAAA,EAAuB;AACzB,MAAA,MAAM,UAAU,eAAA,CAAgB,EAAE,MAAM,kBAAA,EAAoB,OAAA,EAAS,KAAK,CAAA;AAC1E,MAAA,gBAAA,CAAiB,WAAW,EAAE,CAAA;AAAA,IAChC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,cAAA,GAAiB,KAAK,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,OAAA,CAAQ,kBAAkB,CAAA,EAAG;AAC/B,MAAA,aAAA,CAAc,kBAAkB,CAAA;AAAA,IAClC;AACA,IAAA,cAAA,GAAiB,KAAK,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,aAAA,CAAc,MAAS,CAAA;AACvB,IAAA,WAAA,CAAY,MAAS,CAAA;AACrB,IAAA,iBAAA,CAAkB,EAAE,CAAA;AACpB,IAAA,eAAA,CAAgB,EAAE,CAAA;AAClB,IAAA,cAAA,GAAiB,KAAK,CAAA;AAAA,EACxB,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAW,EAAA,CAAG,wBAAA,EAA0B,SAAS,CAAA;AAAA,MACjD,WAAW,CAAA,CAAA,KAAK;AACd,QAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,QAAA,IAAI,CAAA,CAAE,QAAQ,QAAA,EAAU;AACtB,UAAA,cAAA,GAAiB,KAAK,CAAA;AAAA,QACxB;AAAA,MACF,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,YAAA;AAAA,YACL,IAAA,EAAK,MAAA;AAAA,YACL,KAAA,EAAO,cAAA;AAAA,YACP,QAAA,EAAU,iBAAA;AAAA,YACV,WAAA;AAAA,YACA,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,QAEC,aAAA,oBACC,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,mCAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,cAAE,GAAA;AAAA,cAAE;AAAA;AAAA;AAAA,SACvB;AAAA,wBAGF,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAO,QAAA;AAAA,YACP,QAAA;AAAA,YACA,aAAA,EAAe,iBAAA;AAAA,YACf,QAAA,EAAU,eAAA;AAAA,YACT,GAAG;AAAA;AAAA,SACN;AAAA,wBAEA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAe,mBAAA;AAAA,YACf,SAAA,EAAU,iBAAA;AAAA,YACV,YAAA,EAAc,QAAQ,UAAA,CAAW,IAAI,KAAK,KAAK,CAAA,EAAG,SAAS,CAAA,GAAI;AAAA;AAAA,SACjE;AAAA,wBAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EACZ,QAAA,EAAA;AAAA,UAAA,eAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAO,QAAA,EAAU,CAAA,EAAG,IAAA,EAAK,MAAK,OAAA,EAAS,WAAA,EAAa,IAAA,EAAK,QAAA,EAAS,QAAA,EAAA,OAAA,EAEnE,CAAA;AAAA,0BAEF,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAU,CAAA;AAAA,cACV,IAAA,EAAK,QAAA;AAAA,cACL,IAAA,EAAK,IAAA;AAAA,cACL,OAAA,EAAS,kBAAkB,SAAA,GAAY,SAAA;AAAA,cACvC,SAAS,MAAM;AACb,gBAAA,qBAAA,GAAwB,WAAA,KAAgB,YAAA,EAAa;AAAA,cACvD,CAAA;AAAA,cAEC,4BAAkB,CAAA,KAAA,CAAA,GAAU,CAAA,MAAA;AAAA;AAAA;AAC/B,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AAQO,MAAM,iBAAiB,KAAA,CAAM,UAAA;AAAA,EAClC,CAAC,EAAE,KAAA,EAAO,WAAA,EAAa,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AACpD,IAAA,uBACE,IAAA,CAAC,UAAO,GAAA,EAAU,SAAA,EAAW,GAAG,eAAA,EAAiB,SAAS,CAAA,EAAI,GAAG,KAAA,EAC/D,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,WAAU,SAAA,EAAU,CAAA;AAAA,MACjC,KAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAc,QAAA,EAAA,MAAA,CAAO,KAAA,EAAO,MAAM,CAAA,EAAE,oBAEpD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAA,EAAa,yBAAe,aAAA,EAAc;AAAA,KAAA,EAE9D,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist/date-time-range-picker-Do-3VVvo.cjs

@@ -0,0 +1,170 @@
+'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-DpIX8JMz.cjs');
+const timePicker = require('./time-picker-DWrxHBfR.cjs');
+const dropdownMenu = require('./dropdown-menu-Vl_C0N5e.cjs');
+const popover = require('./popover-ttQgAb0m.cjs');
+const utils = require('./utils-vA5sWo9W.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,
+  disabled,
+  presets,
+  size = "md"
+}) {
+  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 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);
+    onDateChange?.(fromDate, "from");
+    onDateChange?.(toDate, "to");
+    setCustomRangeOpen(false);
+  };
+  if (preset === "custom") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { open: customRangeOpen, onOpenChange: setCustomRangeOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size, disabled, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
+        dateFrom ? dateFrom.toLocaleDateString() : "Start",
+        " ",
+        " – ",
+        dateTo ? dateTo.toLocaleDateString() : "End"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(popover.PopoverContent, { align: "start", className: utils.cn("w-auto p-0"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("border-r border-border1"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("text-ui-sm text-neutral3 font-medium px-4 pt-3 block"), children: "Start" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              timePicker.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("text-ui-sm text-neutral3 font-medium px-4 pt-3 block"), children: "End" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              timePicker.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("p", { className: utils.cn("text-ui-sm text-red-500 px-4 pb-1"), children: customRangeError }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex justify-between items-center px-4 pb-3"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              className: utils.cn(
+                "text-ui-sm text-neutral3 hover:text-neutral4",
+                disabled && "opacity-50 pointer-events-none"
+              ),
+              onClick: () => {
+                setCustomRangeError(void 0);
+                handlePresetSelect(fallbackPreset);
+              },
+              children: "← Presets"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "primary", size: "sm", onClick: applyCustomRange, disabled, children: "Apply" })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size, disabled, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
+      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-Do-3VVvo.cjs.map

package/dist/date-time-range-picker-Do-3VVvo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-range-picker-Do-3VVvo.cjs","sources":["../src/ds/components/DateTimeRangePicker/date-time-range-picker.tsx"],"sourcesContent":["import { isValid, parse } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\nimport { useState } 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 { 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  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\nexport function DateTimeRangePicker({\n  preset = 'all',\n  onPresetChange,\n  dateFrom,\n  dateTo,\n  onDateChange,\n  disabled,\n  presets,\n  size = 'md',\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\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    onDateChange?.(fromDate, 'from');\n    onDateChange?.(toDate, 'to');\n    setCustomRangeOpen(false);\n  };\n\n  if (preset === 'custom') {\n    return (\n      <Popover open={customRangeOpen} onOpenChange={setCustomRangeOpen}>\n        <PopoverTrigger asChild>\n          <Button size={size} disabled={disabled}>\n            <CalendarIcon />\n            {dateFrom ? dateFrom.toLocaleDateString() : 'Start'} {' \\u2013 '}\n            {dateTo ? dateTo.toLocaleDateString() : 'End'}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className={cn('w-auto p-0')}>\n          <div className={cn('flex')}>\n            <div className={cn('border-r border-border1')}>\n              <span className={cn('text-ui-sm text-neutral3 font-medium px-4 pt-3 block')}>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('text-ui-sm text-neutral3 font-medium px-4 pt-3 block')}>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 && <p className={cn('text-ui-sm text-red-500 px-4 pb-1')}>{customRangeError}</p>}\n          <div className={cn('flex justify-between items-center px-4 pb-3')}>\n            <button\n              type=\"button\"\n              disabled={disabled}\n              className={cn(\n                'text-ui-sm text-neutral3 hover:text-neutral4',\n                disabled && 'opacity-50 pointer-events-none',\n              )}\n              onClick={() => {\n                setCustomRangeError(undefined);\n                handlePresetSelect(fallbackPreset);\n              }}\n            >\n              &larr; Presets\n            </button>\n            <Button 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      <DropdownMenu.Trigger asChild>\n        <Button size={size} disabled={disabled}>\n          <CalendarIcon />\n          {datePresetLabel}\n        </Button>\n      </DropdownMenu.Trigger>\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","jsxs","Popover","jsx","PopoverTrigger","Button","CalendarIcon","PopoverContent","cn","DatePicker","TimePicker","DropdownMenu"],"mappings":"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"}

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

@@ -0,0 +1,168 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { parse, isValid } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import { useState } from 'react';
+import { B as Button } from './Button-DoOEJwa_.js';
+import { D as DatePicker, T as TimePicker } from './time-picker-BtJz6IU2.js';
+import { D as DropdownMenu } from './dropdown-menu-Dh-CMMjl.js';
+import { P as Popover, b as PopoverTrigger, a as PopoverContent } from './popover-CRLP2Ay_.js';
+import { c as cn } from './utils-CzYGxqbG.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,
+  disabled,
+  presets,
+  size = "md"
+}) {
+  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 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);
+    onDateChange?.(fromDate, "from");
+    onDateChange?.(toDate, "to");
+    setCustomRangeOpen(false);
+  };
+  if (preset === "custom") {
+    return /* @__PURE__ */ jsxs(Popover, { open: customRangeOpen, onOpenChange: setCustomRangeOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size, disabled, children: [
+        /* @__PURE__ */ jsx(CalendarIcon, {}),
+        dateFrom ? dateFrom.toLocaleDateString() : "Start",
+        " ",
+        " – ",
+        dateTo ? dateTo.toLocaleDateString() : "End"
+      ] }) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: cn("w-auto p-0"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("border-r border-border1"), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("text-ui-sm text-neutral3 font-medium px-4 pt-3 block"), 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("text-ui-sm text-neutral3 font-medium px-4 pt-3 block"), 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("p", { className: cn("text-ui-sm text-red-500 px-4 pb-1"), children: customRangeError }),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex justify-between items-center px-4 pb-3"), children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled,
+              className: cn(
+                "text-ui-sm text-neutral3 hover:text-neutral4",
+                disabled && "opacity-50 pointer-events-none"
+              ),
+              onClick: () => {
+                setCustomRangeError(void 0);
+                handlePresetSelect(fallbackPreset);
+              },
+              children: "← Presets"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: applyCustomRange, disabled, children: "Apply" })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size, disabled, children: [
+      /* @__PURE__ */ jsx(CalendarIcon, {}),
+      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-iMvwOfiZ.js.map