@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,263 @@
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import * as M from "react";
+import { Calendar as ue } from "@dsui/ui/components/calendar";
+import { Popover as me, PopoverTrigger as fe, PopoverContent as pe } from "@dsui/ui/components/popover";
+import { Drawer as ge, DrawerTrigger as ve, DrawerContent as we, DrawerHeader as he, DrawerTitle as ye, DrawerDescription as be } from "@dsui/ui/components/drawer";
+import { cn as v } from "@dsui/ui/index";
+import De from "../Input/Input.js";
+import Me from "../Button/Button.js";
+import { TimePicker as xe } from "./TimePicker.js";
+import { CalendarIcon as ze } from "lucide-react";
+import { isMobile as w } from "react-device-detect";
+import { format as I, parse as Ce, isValid as He } from "date-fns";
+import { enUS as Ne, vi as Pe } from "date-fns/locale";
+import { DATE_FORMAT as _ } from "../../constants/common.js";
+function ke(n, o = _, t) {
+  return n ? I(n, o, t ? { locale: t } : void 0) : "";
+}
+const x = (n, o = _) => {
+  const t = Ce(n, o, /* @__PURE__ */ new Date());
+  return He(t) ? t : void 0;
+};
+function Se(n) {
+  return n.replace(/dd|MM|yyyy/g, (o) => {
+    switch (o) {
+      case "dd":
+      case "MM":
+        return "99";
+      case "yyyy":
+        return "9999";
+      default:
+        return o;
+    }
+  }).replace(/d|M|y/g, (o) => {
+    switch (o) {
+      case "d":
+      case "M":
+        return "9";
+      case "y":
+        return "9";
+      default:
+        return o;
+    }
+  });
+}
+function Ke({
+  value: n,
+  onChange: o,
+  onSelect: t,
+  calendarClassName: E,
+  side: K = "bottom",
+  align: q = "end",
+  format: g = "dd/MM/yyyy",
+  language: G = "vi",
+  mask: z,
+  closeOnSelect: J = !1,
+  calendarConfig: C,
+  desktopMode: H = "popover",
+  mobileMode: Q = "drawer",
+  showOutsideDays: W = !0,
+  children: N,
+  showTime: c = !1,
+  timeFormat: h = "HH:mm",
+  hideDate: R = !1,
+  numberOfMonths: X = 1,
+  variant: Y = "default",
+  color: V = "primary",
+  // TimePicker props
+  timePickerMode: Z = "wheel",
+  hourInterval: $ = 1,
+  minuteInterval: ee = 1,
+  secondInterval: re = 1,
+  disabledTimes: te,
+  disabledTimeRanges: oe,
+  showNowButton: ae = !1,
+  nowButtonLabel: ne = "Now",
+  timePickerLabel: se,
+  ...l
+}) {
+  let u, P;
+  typeof g == "string" ? (u = g, P = g) : (u = g.input, P = g.output);
+  let k;
+  z === !0 ? k = Se(u) : typeof z == "string" && (k = z);
+  const A = n ? x(n, u) : void 0, [L, y] = M.useState(!1), [s, d] = M.useState(A), [ie, b] = M.useState(A), [S, m] = M.useState(n || ""), O = C?.locale ? C?.locale : G === "en" ? Ne : Pe, F = w ? Q : H, i = (e) => {
+    if (!e) return "";
+    let r = ke(e, P, O);
+    return c && (r += ` ${I(e, h)}`), r;
+  }, le = (e) => {
+    d(e), m(i(e)), t?.(e, i(e));
+  }, de = (e) => {
+    if (!e) {
+      m(""), d(void 0), t?.(void 0, void 0);
+      return;
+    }
+    m(e);
+    const r = x(e, u);
+    r ? (d(r), b(r), t?.(r, i(r))) : (d(void 0), t?.(void 0, void 0));
+  }, ce = (e, r, D) => {
+    if (!D) {
+      o?.(e, r, void 0);
+      return;
+    }
+    const f = new Date(s || /* @__PURE__ */ new Date());
+    f.setHours(
+      D.getHours(),
+      D.getMinutes(),
+      D.getSeconds(),
+      0
+    ), d(f), m(i(f)), t?.(f, i(f)), o?.(e, i(f), f);
+  }, T = N ? N({
+    value: S,
+    date: s,
+    onSelect: le,
+    onChange: de
+  }) : /* @__PURE__ */ p(
+    Me,
+    {
+      variant: "ghost",
+      className: "!p-1 !leading-0 h-auto rounded hover:bg-accent transition-colors",
+      size: l.size,
+      children: [
+        /* @__PURE__ */ a(
+          ze,
+          {
+            className: v({
+              "size-3": l.size === "xs" || l.size === "sm",
+              "size-3.5": !l.size || l.size === "normal",
+              "size-4": l.size === "lg" || l.size === "xl"
+            })
+          }
+        ),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "Select date" })
+      ]
+    }
+  ), j = /* @__PURE__ */ p(
+    "div",
+    {
+      className: v(
+        "flex items-stretch mx-auto w-full",
+        c && !R ? "gap-0 md:max-w-lg" : "",
+        // mode === "drawer" ? "mb-6" : "",
+        w ? "max-w-md md:max-w-md lg:max-w-lg" : ""
+      ),
+      children: [
+        !R && /* @__PURE__ */ a(
+          ue,
+          {
+            ...C,
+            mode: "single",
+            selected: s,
+            captionLayout: "dropdown",
+            month: ie,
+            onMonthChange: b,
+            numberOfMonths: w ? 1 : X || 1,
+            variant: Y,
+            color: V,
+            onSelect: (e) => {
+              let r = e;
+              e && s && c && (r = new Date(e), r.setHours(
+                s.getHours(),
+                s.getMinutes(),
+                s.getSeconds(),
+                s.getMilliseconds()
+              )), d(r), m(i(r)), t?.(r, i(r)), J && !c && y(!1);
+            },
+            locale: O,
+            formatters: {
+              formatMonthDropdown: (e) => e.toLocaleString(O.code, { month: "short" })
+            },
+            showOutsideDays: W,
+            className: v(
+              "my-auto bg-transparent mx-auto",
+              {
+                "[--cell-size:clamp(0px,calc(100vw/7.5),52px)] mb-8 bg-transparent": w && !c || H === "drawer",
+                "[--cell-size:clamp(0px,calc(100vw/7.5),34px)]": !w && H !== "drawer",
+                "w-full": F === "drawer" && c
+              },
+              E
+            )
+          }
+        ),
+        c && /* @__PURE__ */ a("div", { className: "border-l border-border", children: /* @__PURE__ */ a(
+          xe,
+          {
+            value: s ? I(s, h) : void 0,
+            format: h,
+            onChange: ce,
+            showHours: !0,
+            showMinutes: !0,
+            showSeconds: h === "HH:mm:ss",
+            mode: Z,
+            hourInterval: $,
+            minuteInterval: ee,
+            secondInterval: re,
+            disabledTimes: te,
+            disabledTimeRanges: oe,
+            showNowButton: ae,
+            nowButtonLabel: ne,
+            timeLabel: se,
+            standalone: !1,
+            color: V
+          }
+        ) })
+      ]
+    }
+  ), B = /* @__PURE__ */ p(me, { open: L, onOpenChange: y, children: [
+    /* @__PURE__ */ a(fe, { asChild: !0, disabled: l.disabled, children: T }),
+    /* @__PURE__ */ a(
+      pe,
+      {
+        className: v(
+          "w-auto overflow-hidden p-0",
+          "backdrop-blur bg-background/50"
+        ),
+        side: K,
+        align: q,
+        children: j
+      }
+    )
+  ] }), U = /* @__PURE__ */ p(ge, { open: L, onOpenChange: y, children: [
+    /* @__PURE__ */ a(ve, { asChild: !0, children: T }),
+    /* @__PURE__ */ p(
+      we,
+      {
+        className: v(
+          "w-auto overflow-hidden p-0",
+          "backdrop-blur bg-background"
+        ),
+        children: [
+          /* @__PURE__ */ p(he, { className: "sr-only", children: [
+            /* @__PURE__ */ a(ye, { children: "Select date" }),
+            /* @__PURE__ */ a(be, { children: "Set date" })
+          ] }),
+          j
+        ]
+      }
+    )
+  ] });
+  return N ? F === "drawer" ? U : B : /* @__PURE__ */ a(
+    De,
+    {
+      ...l,
+      clearable: !0,
+      value: S,
+      mask: k,
+      onChange: (e) => {
+        m(e.target.value);
+        const r = x(e.target.value, u);
+        r ? (d(r), b(r), t?.(r, i(r)), o?.(e, i(r), r)) : (t?.(void 0, void 0), o?.(e, void 0, void 0));
+      },
+      onBlur: () => {
+        x(S, u) || (m(""), d(void 0), b(void 0), t?.(void 0, void 0));
+      },
+      onKeyDown: (e) => {
+        e.key === "ArrowDown" && (e.preventDefault(), y(!0));
+      },
+      suffixIcon: F === "drawer" ? U : B
+    }
+  );
+}
+export {
+  Ke as DatePicker
+};
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  CalendarDayButton as SCalendarDayButton,\n  type CalendarDayButtonProps as SCalendarDayButtonProps,\n  Calendar,\n  type CalendarProps,\n  type CalendarColor,\n} from \"@dsui/ui/components/calendar\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@dsui/ui/components/popover\";\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@dsui/ui/components/drawer\";\nimport { cn } from \"@dsui/ui/index\";\nimport Input, { type InputProps } from \"../Input/Input\";\nimport Button from \"../Button/Button\";\nimport {\n  TimePicker,\n  type TimePickerMode,\n  type DisabledTimeRange,\n} from \"./TimePicker\";\nimport { CalendarIcon } from \"lucide-react\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { isMobile } from \"react-device-detect\";\nimport { format as dfFormat, parse, isValid, type Locale } from \"date-fns\";\nimport { vi, enUS } from \"date-fns/locale\";\nimport { DATE_FORMAT } from \"@/constants/common\";\n\nfunction formatDate(\n  date: Date | undefined,\n  outputFormat: string = DATE_FORMAT,\n  locale?: Locale,\n) {\n  if (!date) return \"\";\n\n  return dfFormat(date, outputFormat, locale ? { locale } : undefined);\n}\n\nconst parseDate = (\n  str: string,\n  inputFormat: string = DATE_FORMAT,\n): Date | undefined => {\n  const date = parse(str, inputFormat, new Date());\n  return isValid(date) ? date : undefined;\n};\n\nfunction generateMaskFromFormat(format: string): string {\n  return format\n    .replace(/dd|MM|yyyy/g, (match) => {\n      switch (match) {\n        case \"dd\":\n        case \"MM\":\n          return \"99\";\n        case \"yyyy\":\n          return \"9999\";\n        default:\n          return match;\n      }\n    })\n    .replace(/d|M|y/g, (match) => {\n      switch (match) {\n        case \"d\":\n        case \"M\":\n          return \"9\";\n        case \"y\":\n          return \"9\";\n        default:\n          return match;\n      }\n    });\n}\n\nexport type FormatType = string | { input: string; output: string };\n\nexport type DatePickerRenderProps = {\n  value: string;\n  date?: Date;\n  onSelect: (date?: Date) => void;\n  onChange: (text?: string) => void;\n};\n\nexport type DatePickerProps = Omit<\n  InputProps,\n  \"value\" | \"onChange\" | \"onSelect\" | \"mask\" | \"children\"\n> & {\n  value?: string;\n  onChange?: (\n    event?: React.ChangeEvent<HTMLInputElement>,\n    value?: string,\n    date?: Date,\n  ) => void;\n  onSelect?: (date?: Date, value?: string) => void;\n  calendarClassName?: string;\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  align?: \"start\" | \"center\" | \"end\";\n  size?: VariantProps<typeof Input>[\"size\"];\n  format?: FormatType;\n  language?: \"vi\" | \"en\";\n  mask?: boolean | string;\n  closeOnSelect?: boolean;\n  calendarConfig?: CalendarProps;\n  desktopMode?: \"popover\" | \"drawer\";\n  mobileMode?: \"popover\" | \"drawer\";\n  showOutsideDays?: boolean;\n  children?: (props: DatePickerRenderProps) => React.ReactNode;\n  showTime?: boolean;\n  timeFormat?: \"HH:mm\" | \"HH:mm:ss\";\n  hideDate?: boolean;\n  numberOfMonths?: number;\n  variant?: \"default\" | \"rounded\";\n  color?: CalendarColor;\n\n  // TimePicker configuration options\n  timePickerMode?: TimePickerMode; // Display mode: 'wheel' (default), 'select', 'compact'\n  hourInterval?: number; // Hour interval (e.g., 1, 2, 3) - defaults to 1\n  minuteInterval?: number; // Minute interval (e.g., 5, 10, 15, 30) - defaults to 1\n  secondInterval?: number; // Second interval (e.g., 5, 10, 15, 30) - defaults to 1\n  disabledTimes?: string[]; // Array of disabled times in \"HH:mm\" or \"HH:mm:ss\" format\n  disabledTimeRanges?: DisabledTimeRange[]; // Array of disabled time ranges\n  showNowButton?: boolean; // Show \"Now\" button to select current time\n  nowButtonLabel?: string; // Label for \"Now\" button (defaults to \"Now\")\n  timePickerLabel?:\n    | boolean\n    | { hours?: string; minutes?: string; seconds?: string };\n};\n\nexport function DatePicker({\n  value,\n  onChange,\n  onSelect,\n  calendarClassName,\n  side = \"bottom\",\n  align = \"end\",\n  format = \"dd/MM/yyyy\",\n  language = \"vi\",\n  mask,\n  closeOnSelect = false,\n  calendarConfig,\n  desktopMode = \"popover\",\n  mobileMode = \"drawer\",\n  showOutsideDays = true,\n  children,\n  showTime = false,\n  timeFormat = \"HH:mm\",\n  hideDate = false,\n  numberOfMonths = 1,\n  variant = \"default\",\n  color = \"primary\",\n  // TimePicker props\n  timePickerMode = \"wheel\",\n  hourInterval = 1,\n  minuteInterval = 1,\n  secondInterval = 1,\n  disabledTimes,\n  disabledTimeRanges,\n  showNowButton = false,\n  nowButtonLabel = \"Now\",\n  timePickerLabel,\n  ...props\n}: DatePickerProps) {\n  let inputFormat: string;\n  let outputFormat: string;\n  if (typeof format === \"string\") {\n    inputFormat = format;\n    outputFormat = format;\n  } else {\n    inputFormat = format.input;\n    outputFormat = format.output;\n  }\n\n  // Determine the mask to use\n  let maskToUse: string | undefined;\n  if (mask === true) {\n    maskToUse = generateMaskFromFormat(inputFormat);\n  } else if (typeof mask === \"string\") {\n    maskToUse = mask;\n  }\n  // If mask is false or undefined, maskToUse remains undefined\n\n  const initialDate = value ? parseDate(value, inputFormat) : undefined;\n\n  const [open, setOpen] = React.useState(false);\n  const [date, setDate] = React.useState<Date | undefined>(initialDate);\n  const [month, setMonth] = React.useState<Date | undefined>(initialDate);\n  const [inputValue, setInputValue] = React.useState(value || \"\");\n\n  const _locale: Locale = calendarConfig?.locale\n    ? (calendarConfig?.locale as Locale)\n    : language === \"en\"\n      ? enUS\n      : vi;\n\n  const mode = isMobile ? mobileMode : desktopMode;\n\n  // Helper to format date-time based on showTime and timeFormat\n  const formatDateTimeValue = (d: Date | undefined): string => {\n    if (!d) return \"\";\n    let result = formatDate(d, outputFormat, _locale);\n    if (showTime) {\n      result += ` ${dfFormat(d, timeFormat)}`;\n    }\n    return result;\n  };\n\n  // Helper functions for render props\n  const handleSelectForRenderProp = (date?: Date) => {\n    setDate(date);\n    setInputValue(formatDateTimeValue(date));\n    onSelect?.(date, formatDateTimeValue(date));\n  };\n\n  const handleChangeForRenderProp = (text?: string) => {\n    if (!text) {\n      setInputValue(\"\");\n      setDate(undefined);\n      onSelect?.(undefined, undefined);\n      return;\n    }\n    setInputValue(text);\n    const parsedDate = parseDate(text, inputFormat);\n    if (parsedDate) {\n      setDate(parsedDate);\n      setMonth(parsedDate);\n      onSelect?.(parsedDate, formatDateTimeValue(parsedDate));\n    } else {\n      setDate(undefined);\n      onSelect?.(undefined, undefined);\n    }\n  };\n\n  const handleTimeChange = (\n    event?: React.ChangeEvent<HTMLInputElement>,\n    value?: string,\n    newDate?: Date,\n  ) => {\n    if (!newDate) {\n      // Handle clear/invalid time\n      onChange?.(event, value, undefined);\n      return;\n    }\n\n    // Merge: keep date (year, month, day) from Calendar, take time (hours, minutes, seconds) from TimePicker\n    const mergedDate = new Date(date || new Date());\n    mergedDate.setHours(\n      newDate.getHours(),\n      newDate.getMinutes(),\n      newDate.getSeconds(),\n      0,\n    );\n\n    setDate(mergedDate);\n    setInputValue(formatDateTimeValue(mergedDate));\n    onSelect?.(mergedDate, formatDateTimeValue(mergedDate));\n    onChange?.(event, formatDateTimeValue(mergedDate), mergedDate);\n  };\n\n  // Determine trigger component\n  const triggerComponent = children ? (\n    children({\n      value: inputValue,\n      date,\n      onSelect: handleSelectForRenderProp,\n      onChange: handleChangeForRenderProp,\n    })\n  ) : (\n    <Button\n      variant=\"ghost\"\n      className=\"!p-1 !leading-0 h-auto rounded hover:bg-accent transition-colors\"\n      size={props.size}\n    >\n      <CalendarIcon\n        className={cn({\n          \"size-3\": props.size === \"xs\" || props.size === \"sm\",\n          \"size-3.5\": !props.size || props.size === \"normal\",\n          \"size-4\": props.size === \"lg\" || props.size === \"xl\",\n        })}\n      />\n      <span className=\"sr-only\">Select date</span>\n    </Button>\n  );\n\n  const calendarSelection = (\n    <div\n      className={cn(\n        \"flex items-stretch mx-auto w-full\",\n        showTime && !hideDate ? \"gap-0 md:max-w-lg\" : \"\",\n        // mode === \"drawer\" ? \"mb-6\" : \"\",\n        isMobile ? \"max-w-md md:max-w-md lg:max-w-lg\" : \"\",\n      )}\n    >\n      {!hideDate && (\n        <Calendar\n          {...calendarConfig}\n          mode=\"single\"\n          selected={date}\n          captionLayout=\"dropdown\"\n          month={month}\n          onMonthChange={setMonth}\n          numberOfMonths={isMobile ? 1 : numberOfMonths || 1}\n          variant={variant}\n          color={color}\n          onSelect={(selectedDate) => {\n            // Preserve time from current date when selecting new date\n            let newDate = selectedDate;\n            if (selectedDate && date && showTime) {\n              newDate = new Date(selectedDate);\n              newDate.setHours(\n                date.getHours(),\n                date.getMinutes(),\n                date.getSeconds(),\n                date.getMilliseconds(),\n              );\n            }\n            setDate(newDate);\n            setInputValue(formatDateTimeValue(newDate));\n            onSelect?.(newDate, formatDateTimeValue(newDate));\n            if (closeOnSelect && !showTime) setOpen(false);\n          }}\n          locale={_locale}\n          formatters={{\n            formatMonthDropdown: (date) =>\n              date.toLocaleString(_locale.code, { month: \"short\" }),\n          }}\n          showOutsideDays={showOutsideDays}\n          className={cn(\n            \"my-auto bg-transparent mx-auto\",\n            {\n              \"[--cell-size:clamp(0px,calc(100vw/7.5),52px)] mb-8 bg-transparent\":\n                (isMobile && !showTime) || desktopMode === \"drawer\",\n              \"[--cell-size:clamp(0px,calc(100vw/7.5),34px)]\":\n                !isMobile && desktopMode !== \"drawer\",\n              \"w-full\": mode === \"drawer\" && showTime,\n            },\n            calendarClassName,\n          )}\n        />\n      )}\n      {showTime && (\n        <div className=\"border-l border-border\">\n          <TimePicker\n            value={date ? dfFormat(date, timeFormat) : undefined}\n            format={timeFormat}\n            onChange={handleTimeChange}\n            showHours\n            showMinutes\n            showSeconds={timeFormat === \"HH:mm:ss\"}\n            mode={timePickerMode}\n            hourInterval={hourInterval}\n            minuteInterval={minuteInterval}\n            secondInterval={secondInterval}\n            disabledTimes={disabledTimes}\n            disabledTimeRanges={disabledTimeRanges}\n            showNowButton={showNowButton}\n            nowButtonLabel={nowButtonLabel}\n            timeLabel={timePickerLabel}\n            standalone={false}\n            color={color}\n          />\n        </div>\n      )}\n    </div>\n  );\n\n  const popPicker = (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild disabled={props.disabled}>\n        {triggerComponent}\n      </PopoverTrigger>\n      <PopoverContent\n        className={cn(\n          \"w-auto overflow-hidden p-0\",\n          \"backdrop-blur bg-background/50\",\n        )}\n        side={side}\n        align={align}\n      >\n        {calendarSelection}\n      </PopoverContent>\n    </Popover>\n  );\n\n  const drawPicker = (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>{triggerComponent}</DrawerTrigger>\n      <DrawerContent\n        className={cn(\n          \"w-auto overflow-hidden p-0\",\n          \"backdrop-blur bg-background\",\n        )}\n      >\n        <DrawerHeader className=\"sr-only\">\n          <DrawerTitle>Select date</DrawerTitle>\n          <DrawerDescription>Set date</DrawerDescription>\n        </DrawerHeader>\n        {calendarSelection}\n      </DrawerContent>\n    </Drawer>\n  );\n\n  // If children is provided, use render prop pattern with picker\n  if (children) {\n    return mode === \"drawer\" ? drawPicker : popPicker;\n  }\n\n  // Default input rendering\n  return (\n    <Input\n      {...props}\n      clearable\n      value={inputValue}\n      mask={maskToUse}\n      onChange={(e) => {\n        setInputValue(e.target.value);\n        const date = parseDate(e.target.value, inputFormat);\n        if (date) {\n          setDate(date);\n          setMonth(date);\n          onSelect?.(date, formatDateTimeValue(date));\n          onChange?.(e, formatDateTimeValue(date), date);\n        } else {\n          onSelect?.(undefined, undefined);\n          onChange?.(e, undefined, undefined);\n        }\n      }}\n      onBlur={() => {\n        const parsedDate = parseDate(inputValue, inputFormat);\n        if (!parsedDate) {\n          setInputValue(\"\");\n          setDate(undefined);\n          setMonth(undefined);\n          onSelect?.(undefined, undefined);\n        }\n      }}\n      onKeyDown={(e) => {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setOpen(true);\n        }\n      }}\n      suffixIcon={mode === \"drawer\" ? drawPicker : popPicker}\n    />\n  );\n}\n\nexport const CalendarDayButton = SCalendarDayButton;\nexport type CalendarDayButtonProps = SCalendarDayButtonProps;\n"],"names":["formatDate","date","outputFormat","DATE_FORMAT","locale","dfFormat","parseDate","str","inputFormat","parse","isValid","generateMaskFromFormat","format","match","DatePicker","value","onChange","onSelect","calendarClassName","side","align","language","mask","closeOnSelect","calendarConfig","desktopMode","mobileMode","showOutsideDays","children","showTime","timeFormat","hideDate","numberOfMonths","variant","color","timePickerMode","hourInterval","minuteInterval","secondInterval","disabledTimes","disabledTimeRanges","showNowButton","nowButtonLabel","timePickerLabel","props","maskToUse","initialDate","open","setOpen","React","setDate","month","setMonth","inputValue","setInputValue","_locale","enUS","vi","mode","isMobile","formatDateTimeValue","d","result","handleSelectForRenderProp","handleChangeForRenderProp","text","parsedDate","handleTimeChange","event","newDate","mergedDate","triggerComponent","jsxs","Button","jsx","CalendarIcon","cn","calendarSelection","Calendar","selectedDate","TimePicker","popPicker","Popover","PopoverTrigger","PopoverContent","drawPicker","Drawer","DrawerTrigger","DrawerContent","DrawerHeader","DrawerTitle","DrawerDescription","Input"],"mappings":"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"}