@deepnoid/ui 0.0.89 → 0.0.91

package/dist/index.js

@@ -108,6 +108,7 @@ __export(src_exports, {
   ButtonGroup: () => button_group_default,
   Card: () => card_default,
   CheckBox: () => checkbox_default,
+  DateTimePicker: () => dateTimePicker_default,
   Icon: () => Icon_default,
   Input: () => input_default,
   List: () => list_default,
@@ -6317,8 +6318,7 @@ var toggle = (0, import_tailwind_variants12.tv)({
       "bg-neutral-soft",
       "overflow-hidden",
       "rounded-full",
-      "px-[2px]",
-      "hover:bg-primary-main/20"
+      "px-[2px]"
     ],
     wrapper: [
       "relative",
@@ -7276,7 +7276,7 @@ Modal.displayName = "Modal";
 var modal_default = Modal;
 var modal = tv({
   slots: {
-    backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[9999]"],
+    backdrop: ["relative w-screen h-screen fixed inset-0 bg-black/60", "z-[900]"],
     modalWrapper: ["group/modal", "absolute", "top-1/2", "-translate-y-1/2", "left-1/2", "-translate-x-1/2"],
     icon: ["absolute", "top-[20px]", "left-1/2", "-translate-x-1/2", "z-10"],
     closeIcon: [
@@ -7711,13 +7711,13 @@ var listItem = tv({
     },
     size: {
       sm: {
-        base: "h-[30px] text-sm"
+        base: "min-h-[30px] text-sm"
       },
       md: {
-        base: "h-[40px] text-md"
+        base: "min-h-[40px] text-md"
       },
       lg: {
-        base: "h-[50px] text-lg"
+        base: "min-h-[50px] text-lg"
       }
     },
     color: {
@@ -7974,6 +7974,740 @@ var ToastProvider = ({
   ] });
 };
 
+// src/components/dateTimePicker/dateTimePicker.tsx
+var import_react33 = __toESM(require("react"));
+var import_react_dom4 = require("react-dom");
+
+// src/components/dateTimePicker/useDateTimePicker.tsx
+var import_react30 = require("react");
+
+// src/components/dateTimePicker/util.ts
+var formatDateToString = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+var formatStringToDate = (date) => {
+  const formattedDate = new Date(date);
+  return formattedDate;
+};
+
+// src/components/dateTimePicker/useDateTimePicker.tsx
+var useDatePicker = ({ initialDate, initialTime }) => {
+  const [selectedDate, setSelectedDate] = (0, import_react30.useState)(
+    initialDate ? formatDateToString(initialDate) : ""
+  );
+  const [selectedTime, setSelectedTime] = (0, import_react30.useState)(initialTime ? initialTime : "");
+  const [targetRect, setTargetRect] = (0, import_react30.useState)(null);
+  const [popupWidth, setPopupWidth] = (0, import_react30.useState)(0);
+  const [popupHeight, setPopupHeight] = (0, import_react30.useState)(0);
+  const [isFocusInput, setIsFocusInput] = (0, import_react30.useState)(false);
+  const dateInputRef = (0, import_react30.useRef)(null);
+  const datePickerWrapperRef = (0, import_react30.useRef)(null);
+  const datePickerRef = (0, import_react30.useRef)(null);
+  const DATE_PICKER_GAP = 4;
+  const calculatePositionWithScroll = (targetRect2) => {
+    if (targetRect2 && popupWidth && popupHeight) {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+      const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
+      const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
+      const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
+      const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
+      return {
+        top: top + scrollTop,
+        left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
+      };
+    }
+  };
+  const handleToggleDatePicker = () => {
+    if (datePickerRef.current) {
+      const rect = datePickerRef.current.getBoundingClientRect();
+      setTargetRect((prevRect) => prevRect ? null : { x: rect.x, y: rect.y, width: rect.width, height: rect.height });
+    }
+  };
+  const handleChangeDate = (date) => {
+    setSelectedDate(date);
+  };
+  const handleChangeTime = (time) => {
+    setSelectedTime(time);
+  };
+  const handleFocusInput = () => {
+    setIsFocusInput(true);
+  };
+  const handleBlueInput = () => {
+    setIsFocusInput(false);
+  };
+  (0, import_react30.useEffect)(() => {
+    const onClickOutside = (e) => {
+      if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
+        setTargetRect(null);
+      }
+    };
+    window.addEventListener("mousedown", onClickOutside);
+    return () => window.removeEventListener("mousedown", onClickOutside);
+  }, []);
+  (0, import_react30.useEffect)(() => {
+    if (datePickerWrapperRef.current) {
+      setPopupHeight(datePickerWrapperRef.current.getBoundingClientRect().height);
+      setPopupWidth(datePickerWrapperRef.current.getBoundingClientRect().width);
+    }
+  }, [targetRect]);
+  return {
+    selectedDate,
+    selectedTime,
+    targetRect,
+    popupHeight,
+    isFocusInput,
+    dateInputRef,
+    datePickerWrapperRef,
+    datePickerRef,
+    handleToggleDatePicker,
+    handleChangeDate,
+    handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
+    calculatePositionWithScroll
+  };
+};
+
+// src/components/dateTimePicker/calendar.tsx
+var import_react31 = __toESM(require("react"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Calendar = (0, import_react31.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, calendarStyle.variantKeys);
+  const { selectedDate, classNames, highlightWeekend = true, onChangeDate, ...inputProps } = props;
+  const [currentDate, setCurrentDate] = (0, import_react31.useState)(selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date());
+  const daysOfWeek = ["S", "M", "T", "W", "T", "F", "S"];
+  (0, import_react31.useEffect)(() => {
+    if (selectedDate) {
+      setCurrentDate(new Date(selectedDate));
+    }
+  }, [selectedDate]);
+  const getCalendarDates = (0, import_react31.useCallback)(() => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const firstDayOfMonth = new Date(year, month, 1).getDay();
+    const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
+    const lastDateOfPrevMonth = new Date(year, month, 0).getDate();
+    let dates = [];
+    for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+      dates.push({
+        date: lastDateOfPrevMonth - i,
+        currentMonth: false
+      });
+    }
+    for (let date = 1; date <= lastDateOfMonth; date++) {
+      dates.push({
+        date,
+        currentMonth: true
+      });
+    }
+    const remainingDays = 42 - dates.length;
+    for (let i = 1; i <= remainingDays; i++) {
+      dates.push({
+        date: i,
+        currentMonth: false
+      });
+    }
+    const weeks = [];
+    for (let i = 0; i < dates.length; i += 7) {
+      weeks.push(dates.slice(i, i + 7));
+    }
+    return weeks;
+  }, [currentDate]);
+  const handlePrevMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
+  };
+  const handleNextMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1));
+  };
+  const handleDateSelect = (date, isCurrentMonth) => {
+    if (!isCurrentMonth) return;
+    if (onChangeDate) {
+      const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
+      const formatted = formatDateToString(selected);
+      onChangeDate(formatted);
+    }
+  };
+  (0, import_react31.useImperativeHandle)(ref, () => ({
+    getSelectedDate: () => selectedDate
+  }));
+  const slots = (0, import_react31.useMemo)(() => calendarStyle({ ...variantProps }), [variantProps]);
+  const getBaseProps = (0, import_react31.useCallback)(
+    () => ({
+      className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })}`
+    }),
+    [slots, classNames]
+  );
+  const getDateTitleProps = (0, import_react31.useCallback)(
+    (index) => {
+      return {
+        className: `${slots.dateTitle({
+          class: classNames == null ? void 0 : classNames.date
+        })}`,
+        "data-saturday": highlightWeekend && index === 6,
+        "data-sunday": highlightWeekend && index === 0
+      };
+    },
+    [slots, classNames, highlightWeekend]
+  );
+  const getDateProps = (0, import_react31.useCallback)(
+    (dateObj) => {
+      const today = /* @__PURE__ */ new Date();
+      const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
+      const formatted = selectedDate ? formatStringToDate(selectedDate) : "";
+      const isSelected = formatted ? formatted.getDate() === dateObj.date && formatted.getMonth() === currentDate.getMonth() && formatted.getFullYear() === currentDate.getFullYear() : false;
+      const dayOfWeek = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date).getDay();
+      return {
+        className: `${slots.date({
+          class: classNames == null ? void 0 : classNames.date
+        })}`,
+        "data-today": dateObj.currentMonth && isToday,
+        "data-selected": dateObj.currentMonth && isSelected,
+        "data-disabled": !dateObj.currentMonth,
+        "data-saturday": highlightWeekend && dayOfWeek === 6,
+        "data-sunday": highlightWeekend && dayOfWeek === 0,
+        onClick: () => handleDateSelect(dateObj.date, dateObj.currentMonth)
+      };
+    },
+    [slots, classNames, selectedDate, currentDate, highlightWeekend]
+  );
+  const calendarDates = getCalendarDates();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ...getBaseProps(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "calendar-header flex justify-between items-center mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "brace-left", size: "md", className: "cursor-pointer", onClick: handlePrevMonth }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-h6 font-semibold", children: currentDate.toLocaleString("default", { year: "numeric", month: "2-digit" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "brace-right", size: "md", className: "cursor-pointer", onClick: handleNextMonth })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7 gap-2 text-center", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ...getDateTitleProps(index), children: day }, `${day}-${index}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-7 gap-[5px] text-center mt-2", children: calendarDates.map((week, weekIndex) => {
+      const hasCurrentMonthDates = week.some((dateObj) => dateObj.currentMonth);
+      if (!hasCurrentMonthDates) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react31.default.Fragment, { children: week.map((dateObj, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ...getDateProps(dateObj), children: dateObj.date }, index);
+      }) }, weekIndex);
+    }) })
+  ] }) });
+});
+Calendar.displayName = "Calendar";
+var calendar_default = Calendar;
+var calendarStyle = tv({
+  slots: {
+    base: [
+      "flex",
+      "flex-col",
+      "w-[240px]",
+      "border",
+      "border-neutral-main",
+      "bg-background",
+      "rounded-md",
+      "p-4",
+      "shadow-lg",
+      "select-none"
+    ],
+    dateTitle: ["text-sm", "font-[500]", "data-[saturday=true]:text-[#1E7EEE]", "data-[sunday=true]:text-[#FF4684]"],
+    date: [
+      "flex",
+      "justify-center",
+      "items-center",
+      "h-[25px]",
+      "text-sm",
+      "rounded-full",
+      "cursor-pointer",
+      "data-[today=true]:border",
+      "data-[today=true]:border-foreground",
+      "data-[saturday=true]:text-[#1E7EEE]",
+      "data-[saturday=true]:!border-[#1E7EEE]",
+      "data-[sunday=true]:text-[#FF4684]",
+      "data-[sunday=true]:!border-[#FF4684]",
+      "data-[selected=true]:!text-white",
+      "data-[selected=true]:border-none",
+      "data-[disabled=true]:!text-neutral-main",
+      "data-[disabled=true]:cursor-default",
+      "data-[disabled=true]:hover:bg-transparent"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: {}
+    },
+    color: {
+      primary: {
+        date: [
+          "hover:text-primary-main",
+          "hover:bg-primary-soft",
+          "data-[selected=true]:!border-primary-main",
+          "data-[selected=true]:bg-primary-main"
+        ]
+      },
+      secondary: {
+        date: [
+          "hover:text-secondary-main",
+          "hover:bg-secondary-soft",
+          "data-[selected=true]:!border-secondary-main",
+          "data-[selected=true]:bg-secondary-main"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "primary"
+  },
+  compoundVariants: [
+    {
+      isDisabled: true,
+      isRequired: true,
+      class: {}
+    }
+  ]
+});
+
+// src/components/dateTimePicker/timePicker.tsx
+var import_react32 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
+  const TOTAL_HOURS = 12;
+  const TOTAL_MINUTES = 60;
+  const ITEM_HEIGHT = 30;
+  const PERIODS = ["AM", "PM"];
+  const [selectedHour, setSelectedHour] = (0, import_react32.useState)("01");
+  const [selectedMinute, setSelectedMinute] = (0, import_react32.useState)("00");
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react32.useState)("AM");
+  const hourRef = (0, import_react32.useRef)(null);
+  const minuteRef = (0, import_react32.useRef)(null);
+  const periodRef = (0, import_react32.useRef)(null);
+  const hoursArray = [...Array(TOTAL_HOURS).keys()].map((i) => (i + 1).toString().padStart(2, "0"));
+  const minutesArray = [...Array(TOTAL_MINUTES).keys()].map((i) => i.toString().padStart(2, "0"));
+  (0, import_react32.useEffect)(() => {
+    if (selectedTime) {
+      const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
+      setSelectedHour(formattedHour);
+      setSelectedMinute(minute);
+      setSelectedPeriod(period);
+    }
+    if (isFocusInput) {
+      scrollToSelectedTime();
+    }
+  }, [selectedTime, isFocusInput]);
+  (0, import_react32.useEffect)(() => {
+    scrollToSelectedTime();
+  }, []);
+  const parseAndFormatTime = (time) => {
+    const [hour, minute] = time.split(":").map((part) => part.padStart(2, "0"));
+    const parsedHour = parseInt(hour, 10);
+    const period = parsedHour >= 12 ? "PM" : "AM";
+    const formattedHour = parsedHour % 12 === 0 ? "12" : (parsedHour % 12).toString().padStart(2, "0");
+    return { formattedHour, minute, period };
+  };
+  const scrollToSelectedTime = () => {
+    if (selectedTime) {
+      const { formattedHour, minute, period } = parseAndFormatTime(selectedTime);
+      if (hourRef.current) {
+        hourRef.current.scrollTop = (parseInt(formattedHour) - 1) * ITEM_HEIGHT;
+      }
+      if (minuteRef.current) {
+        minuteRef.current.scrollTop = parseInt(minute) * ITEM_HEIGHT;
+      }
+      if (periodRef.current) {
+        periodRef.current.scrollTop = period === "AM" ? 0 : ITEM_HEIGHT;
+      }
+    }
+  };
+  const handleTimeChange = (hour, minute, period) => {
+    const parsedHour = parseInt(hour);
+    let hour24 = parsedHour;
+    if (period === "PM" && parsedHour !== 12) {
+      hour24 = parsedHour + 12;
+    } else if (period === "AM" && parsedHour === 12) {
+      hour24 = 0;
+    }
+    const formattedTime = `${hour24.toString().padStart(2, "0")}:${minute}`;
+    if (onChangeTime) {
+      onChangeTime(formattedTime);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex h-[200px] p-[10px] gap-[5px] border border-neutral-main rounded-md bg-background shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(list_default, { ref: periodRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: PERIODS.map((period, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      listItem_default,
+      {
+        color,
+        selected: period === selectedPeriod,
+        title: period,
+        size: "sm",
+        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
+        onClick: () => {
+          handleTimeChange(selectedHour, selectedMinute, period);
+        }
+      },
+      `${period}-${index}`
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(list_default, { ref: hourRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: hoursArray.map((hour, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      listItem_default,
+      {
+        color,
+        selected: hour === selectedHour,
+        title: hour,
+        size: "sm",
+        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
+        onClick: () => {
+          handleTimeChange(hour, selectedMinute, selectedPeriod);
+        }
+      },
+      `${hour}-${index}`
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(list_default, { ref: minuteRef, classNames: { base: "overflow-y-auto scrollbar-hide" }, children: minutesArray.map((minute, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      listItem_default,
+      {
+        color,
+        selected: minute === selectedMinute,
+        title: minute,
+        size: "sm",
+        classNames: { base: "w-[50px] min-h-[30px]", titleWrapper: "flex justify-center" },
+        onClick: () => {
+          handleTimeChange(selectedHour, minute, selectedPeriod);
+        }
+      },
+      `${minute}-${index}`
+    )) })
+  ] });
+};
+var timePicker_default = TimePicker;
+
+// src/components/dateTimePicker/dateTimePicker.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
+  const {
+    classNames,
+    label,
+    errorMessage,
+    startContent,
+    endContent,
+    type = "date",
+    value,
+    onChangeDate,
+    onChangeTime,
+    ...inputProps
+  } = props;
+  const slots = (0, import_react33.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
+  const {
+    selectedDate,
+    selectedTime,
+    targetRect,
+    popupHeight,
+    isFocusInput,
+    datePickerRef,
+    dateInputRef,
+    datePickerWrapperRef,
+    handleToggleDatePicker,
+    handleChangeDate,
+    handleChangeTime,
+    handleFocusInput,
+    handleBlueInput,
+    calculatePositionWithScroll
+  } = useDatePicker({
+    initialDate: void 0
+  });
+  const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
+  const getBaseProps = (0, import_react33.useCallback)(
+    () => ({
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+    }),
+    [slots, classNames]
+  );
+  const getLabelProps = (0, import_react33.useCallback)(
+    () => ({
+      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
+    }),
+    [slots, classNames]
+  );
+  const getInnerWrapperProps = (0, import_react33.useCallback)(
+    () => ({
+      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
+    }),
+    [slots, classNames]
+  );
+  const getInputWrapperProps = (0, import_react33.useCallback)(
+    () => ({
+      className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
+      ref: datePickerRef
+    }),
+    [slots, classNames]
+  );
+  const getInputProps = (0, import_react33.useCallback)(
+    () => ({
+      ...inputProps,
+      ref: ref || dateInputRef,
+      className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
+      size: 0,
+      type,
+      value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
+      onChange: (e) => {
+        if (type === "date") {
+          handleChangeDate(e.target.value);
+          if (onChangeDate) {
+            onChangeDate(e.target.value);
+          }
+        } else if (type === "time") {
+          handleChangeTime(e.target.value);
+          if (onChangeTime) {
+            onChangeTime(e.target.value);
+          }
+        }
+      },
+      onFocus: (e) => {
+        handleFocusInput();
+      },
+      onBlur: (e) => {
+        handleBlueInput();
+      },
+      max: "9999-12-31"
+    }),
+    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
+  );
+  const getContentProps = (0, import_react33.useCallback)(
+    () => ({
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      size: originalProps.size
+    }),
+    [slots, classNames, originalProps.size]
+  );
+  const getErrorMessageProps = (0, import_react33.useCallback)(
+    () => ({
+      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
+    }),
+    [slots, classNames]
+  );
+  const renderStartContent = () => {
+    if (import_react33.default.isValidElement(startContent)) {
+      const existingProps = startContent.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return import_react33.default.cloneElement(startContent, mergedProps);
+    } else {
+      const contentProps = getContentProps();
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...contentProps, children: startContent });
+    }
+  };
+  const renderDateTimePickerIcon = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...getContentProps(), onClick: handleToggleDatePicker, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    Icon_default,
+    {
+      name: type === "time" ? "clock" : "calendar",
+      size: originalProps.size,
+      className: "cursor-pointer",
+      fill: type === "date"
+    }
+  ) });
+  const renderContentWithIcon = () => {
+    if (import_react33.default.isValidElement(endContent)) {
+      const existingProps = endContent.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return import_react33.default.cloneElement(endContent, mergedProps);
+    } else if (errorMessage) {
+      const iconProps = { ...getContentProps(), className: getContentProps().className };
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, {});
+    }
+  };
+  const renderEndContent = () => {
+    switch (type) {
+      case "date":
+      case "datetime-local":
+      case "month":
+      case "week":
+      case "time":
+        return renderDateTimePickerIcon();
+      default:
+        return renderContentWithIcon();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...getBaseProps(), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { ...getLabelProps(), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...getInnerWrapperProps(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { ...getInputWrapperProps(), children: [
+          startContent && renderStartContent(),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { ...getInputProps() }),
+          renderEndContent()
+        ] }),
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
+      ] })
+    ] }),
+    targetRect && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        "div",
+        {
+          ref: datePickerWrapperRef,
+          style: {
+            position: "absolute",
+            top: (position == null ? void 0 : position.top) || -99999,
+            left: (position == null ? void 0 : position.left) || -99999,
+            zIndex: 1e3
+          },
+          children: [
+            type === "date" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              calendar_default,
+              {
+                color: originalProps.color,
+                selectedDate,
+                highlightWeekend: originalProps.highlightWeekend,
+                onChangeDate: (date) => {
+                  handleChangeDate(date);
+                  if (onChangeDate) onChangeDate(date);
+                }
+              }
+            ),
+            type === "time" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              timePicker_default,
+              {
+                color: originalProps.color,
+                selectedTime,
+                isFocusInput,
+                onChangeTime: (time) => {
+                  handleChangeTime(time);
+                  if (onChangeTime) onChangeTime(time);
+                }
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    ) })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+var dateTimePicker_default = DatePicker;
+var dateTimePickerStyle = tv({
+  slots: {
+    base: ["group/input", "flex", "flex-col", "inline-block"],
+    label: ["flex", "items-center"],
+    innerWrapper: ["flex", "flex-col"],
+    inputWrapper: [
+      "flex",
+      "items-center",
+      "transition",
+      "duration-200",
+      "group-has-[p]/input:border-danger-main",
+      "group-has-[p]/input:bg-danger-soft"
+    ],
+    input: ["w-full", "h-full", "bg-transparent", "placeholder:text-neutral-main", "focus-visible:outline-none"],
+    content: ["flex", "items-center", "select-none", "group-has-[p]/input:text-danger-main"],
+    errorMessage: ["text-danger-main"]
+  },
+  variants: {
+    variant: {
+      solid: {
+        inputWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+      },
+      normal: {
+        inputWrapper: [
+          "bg-transparent",
+          "border",
+          "border-neutral-main",
+          "hover:bg-trans-soft",
+          "has-[:focus]:bg-trans-soft"
+        ]
+      },
+      line: {
+        inputWrapper: [
+          "bg-transparent",
+          "border-b",
+          "border-neutral-main",
+          "!rounded-none",
+          "hover:bg-trans-soft",
+          "has-[:focus]:bg-trans-soft"
+        ]
+      }
+    },
+    color: {
+      primary: {
+        inputWrapper: ["has-[:focus]:border-primary-main"],
+        content: ["text-primary-main"]
+      },
+      secondary: {
+        inputWrapper: ["has-[:focus]:border-secondary-main"],
+        content: ["text-secondary-main"]
+      }
+    },
+    size: {
+      sm: {
+        base: ["text-sm", "gap-[6px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[6px]", "py-[4.5px]", "gap-[6px]"],
+        errorMessage: ["text-sm"]
+      },
+      md: {
+        base: ["text-md", "gap-[8px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[30px]", "rounded-md", "px-[8px]", "py-[6.5px]", "gap-[8px]"],
+        errorMessage: ["text-md"]
+      },
+      lg: {
+        base: ["text-lg", "gap-[10px]"],
+        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
+        errorMessage: ["text-lg"]
+      }
+    },
+    radius: {
+      default: "",
+      none: {
+        inputWrapper: ["rounded-none"]
+      },
+      full: {
+        inputWrapper: ["rounded-full"]
+      }
+    },
+    fullWidth: {
+      true: {
+        base: ["w-full"],
+        innerWrapper: ["flex-1"],
+        inputWrapper: ["w-full"]
+      }
+    },
+    isDisabled: {
+      true: {
+        label: ["text-neutral-light"],
+        inputWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
+        input: ["text-neutral-light", "placeholder:text-neutral-light"],
+        content: ["text-neutral-light"],
+        errorMessage: ["text-danger-light"]
+      }
+    },
+    isRequired: {
+      true: {
+        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    fullWidth: false,
+    isDisabled: false,
+    isRequired: false
+  },
+  compoundVariants: [
+    {
+      isDisabled: true,
+      isRequired: true,
+      class: {
+        label: ["after:text-danger-light"]
+      }
+    }
+  ]
+});
+
 // ../tailwind-config/src/plugin.ts
 var import_plugin = __toESM(require_plugin());
 
@@ -8537,6 +9271,16 @@ var resolveConfig = (themes = {}, defaultTheme, prefix = "deepnoidUi") => {
       }
     }
   }
+  resolved.utilities = {
+    ...resolved.utilities,
+    ".scrollbar-hide": {
+      "-ms-overflow-style": "none",
+      "scrollbar-width": "none",
+      "&::-webkit-scrollbar": {
+        display: "none"
+      }
+    }
+  };
   return resolved;
 };
 var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
@@ -8611,6 +9355,7 @@ var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
   ButtonGroup,
   Card,
   CheckBox,
+  DateTimePicker,
   Icon,
   Input,
   List,