thailife-react 0.0.19 → 0.0.21

package/dist/index.js

@@ -1532,7 +1532,7 @@ const cssClasses = {
   shadowXl: "shadow-xl"
 };
 
-const _excluded$6 = ["className", "color", "variant", "size", "fullWidth", "loading", "disabled", "children"];
+const _excluded$8 = ["className", "color", "variant", "size", "fullWidth", "loading", "disabled", "children"];
 const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
@@ -1544,7 +1544,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disabled,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   const baseClass = cssClasses.button;
   const variantClass = variant === "contained" ? cssClasses.buttonContained : variant === "outlined" ? cssClasses.buttonOutlined : cssClasses.buttonLink;
   const sizeClass = size === "sm" ? cssClasses.buttonSmall : size === "md" ? cssClasses.buttonMedium : cssClasses.buttonLarge;
@@ -1561,7 +1561,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Button.displayName = "Button";
 
-const _excluded$5 = ["className", "type", "label", "error", "helperText", "size", "fullWidth", "id"];
+const _excluded$7 = ["className", "type", "label", "error", "helperText", "size", "fullWidth", "id"];
 const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
@@ -1573,7 +1573,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       fullWidth = false,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   const inputId = id || "input-".concat(Math.random().toString(36).substr(2, 9));
   const containerClass = fullWidth ? cssClasses.inputContainerFullWidth : cssClasses.inputContainer;
   const inputClass = error ? "".concat(cssClasses.input, " ").concat(cssClasses.inputError) : cssClasses.input;
@@ -1598,7 +1598,7 @@ const Input = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Input.displayName = "Input";
 
-const _excluded$4 = ["className", "label", "error", "helperText", "size", "fullWidth", "rows", "id"];
+const _excluded$6 = ["className", "label", "error", "helperText", "size", "fullWidth", "rows", "id"];
 const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
@@ -1610,7 +1610,7 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       rows = 3,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   const textareaId = id || "textarea-".concat(Math.random().toString(36).substr(2, 9));
   const containerClass = fullWidth ? cssClasses.textareaContainerFullWidth : cssClasses.textareaContainer;
   const textareaClass = error ? "".concat(cssClasses.textarea, " ").concat(cssClasses.textareaError) : cssClasses.textarea;
@@ -1635,7 +1635,7 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Textarea.displayName = "Textarea";
 
-const _excluded$3 = ["className", "label", "error", "helperText", "size", "fullWidth", "multiple", "accept", "buttonText", "id"];
+const _excluded$5 = ["className", "label", "error", "helperText", "size", "fullWidth", "multiple", "accept", "buttonText", "id"];
 const InputFile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
@@ -1649,7 +1649,7 @@ const InputFile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       buttonText = "Choose File",
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   const inputId = id || "input-file-".concat(Math.random().toString(36).substr(2, 9));
   const containerClass = fullWidth ? cssClasses.inputFileContainerFullWidth : cssClasses.inputFileContainer;
   const uploadAreaClass = error ? "".concat(cssClasses.inputFileUploadArea, " ").concat(cssClasses.inputFileUploadAreaError) : cssClasses.inputFileUploadArea;
@@ -1688,7 +1688,7 @@ const InputFile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 InputFile.displayName = "InputFile";
 
-const _excluded$2 = ["className", "label", "error", "helperText", "size", "fullWidth", "indeterminate", "id"];
+const _excluded$4 = ["className", "label", "error", "helperText", "size", "fullWidth", "indeterminate", "id"];
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
@@ -1700,7 +1700,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       indeterminate = false,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   const checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
   React.useEffect(() => {
     if (ref && typeof ref === "object" && ref.current) {
@@ -1735,7 +1735,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Checkbox.displayName = "Checkbox";
 
-const _excluded$1 = ["className", "label", "error", "helperText", "size", "fullWidth", "id"];
+const _excluded$3 = ["className", "label", "error", "helperText", "size", "fullWidth", "id"];
 const Radio = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
@@ -1746,7 +1746,7 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       fullWidth = false,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   const radioId = id || "radio-".concat(Math.random().toString(36).substr(2, 9));
   const containerClass = fullWidth ? cssClasses.radioContainerFullWidth : cssClasses.radioContainer;
   const radioClass = error ? "".concat(cssClasses.radio, " ").concat(cssClasses.radioError) : cssClasses.radio;
@@ -1776,7 +1776,7 @@ const Radio = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Radio.displayName = "Radio";
 
-const _excluded = ["className", "label", "error", "helperText", "size", "fullWidth", "options", "placeholder", "id"];
+const _excluded$2 = ["className", "label", "error", "helperText", "size", "fullWidth", "options", "placeholder", "id"];
 const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       className,
@@ -1789,7 +1789,7 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       placeholder,
       id
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   const selectId = id || "select-".concat(Math.random().toString(36).substr(2, 9));
   const containerClass = fullWidth ? cssClasses.selectContainerFullWidth : cssClasses.selectContainer;
   const selectClass = error ? "".concat(cssClasses.select, " ").concat(cssClasses.selectError) : cssClasses.select;
@@ -1844,12 +1844,552 @@ const Select = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Select.displayName = "Select";
 
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = string => string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase());
+const toPascalCase = string => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = function () {
+  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
+    classes[_key] = arguments[_key];
+  }
+  return classes.filter((className, index, array) => {
+    return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+  }).join(" ").trim();
+};
+const hasA11yProp = props => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+const _excluded$1 = ["color", "size", "strokeWidth", "absoluteStrokeWidth", "className", "children", "iconNode"];
+const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      color = "currentColor",
+      size = 24,
+      strokeWidth = 2,
+      absoluteStrokeWidth,
+      className = "",
+      children,
+      iconNode
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2(_objectSpread2(_objectSpread2({
+    ref
+  }, defaultAttributes), {}, {
+    width: size,
+    height: size,
+    stroke: color,
+    strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+    className: mergeClasses("lucide", className)
+  }, !children && !hasA11yProp(rest) && {
+    "aria-hidden": "true"
+  }), rest), [...iconNode.map(_ref2 => {
+    let [tag, attrs] = _ref2;
+    return /*#__PURE__*/React.createElement(tag, attrs);
+  }), ...(Array.isArray(children) ? children : [children])]);
+});
+
+const _excluded = ["className"];
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+    let {
+        className
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/React.createElement(Icon, _objectSpread2({
+      ref,
+      iconNode,
+      className: mergeClasses("lucide-".concat(toKebabCase(toPascalCase(iconName))), "lucide-".concat(iconName), className)
+    }, props));
+  });
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+/**
+ * @license lucide-react v0.542.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const __iconNode = [["path", {
+  d: "M8 2v4",
+  key: "1cmpym"
+}], ["path", {
+  d: "M16 2v4",
+  key: "4m81vk"
+}], ["rect", {
+  width: "18",
+  height: "18",
+  x: "3",
+  y: "4",
+  rx: "2",
+  key: "1hopcy"
+}], ["path", {
+  d: "M3 10h18",
+  key: "8toen8"
+}], ["path", {
+  d: "M8 14h.01",
+  key: "6423bh"
+}], ["path", {
+  d: "M12 14h.01",
+  key: "1etili"
+}], ["path", {
+  d: "M16 14h.01",
+  key: "1gbofw"
+}], ["path", {
+  d: "M8 18h.01",
+  key: "lrp35t"
+}], ["path", {
+  d: "M12 18h.01",
+  key: "mhygvu"
+}], ["path", {
+  d: "M16 18h.01",
+  key: "kzsmim"
+}]];
+const CalendarDays = createLucideIcon("calendar-days", __iconNode);
+
+// Translations
+const translations = {
+  th: {
+    months: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],
+    weekdaysShort: ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส'],
+    today: 'วันนี้',
+    clear: 'ล้าง',
+    ok: 'ตกลง',
+    hour: 'ชั่วโมง',
+    minute: 'นาที'
+  },
+  en: {
+    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    today: 'Today',
+    clear: 'Clear',
+    ok: 'OK',
+    hour: 'Hour',
+    minute: 'Minute'
+  }
+};
+// Utility functions
+const convertYear = (year, fromType, toType) => {
+  return year + 543;
+};
+const formatDate = (date, format, yearType) => {
+  if (!date || isNaN(date.getTime())) return '';
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const year = yearType === 'be' ? convertYear(date.getFullYear()) : date.getFullYear();
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  let formatted = format.replace('DD', day).replace('MM', month).replace('YYYY', year.toString()).replace('HH', hours).replace('mm', minutes);
+  return formatted;
+};
+const isSameDay = (date1, date2) => {
+  return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+};
+// New utility function to check for disabled dates
+const isDisabled = (date, disabledPast, disabledFuture) => {
+  const today = new Date();
+  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  if (disabledPast && dateOnly < todayOnly) {
+    return true;
+  }
+  if (disabledFuture && dateOnly > todayOnly) {
+    return true;
+  }
+  return false;
+};
+const DatePicker = _ref => {
+  let {
+    format = 'DD/MM/YYYY',
+    language = 'en',
+    yearType = 'ad',
+    value = null,
+    onChange,
+    placeholder = '',
+    disabled = false,
+    className = '',
+    showClear = true,
+    showToday = true,
+    disabledPast = false,
+    // Default to false
+    disabledFuture = false // Default to false
+  } = _ref;
+  // State
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedDate, setSelectedDate] = React.useState(null);
+  const [currentMonth, setCurrentMonth] = React.useState(new Date().getMonth());
+  const [currentYear, setCurrentYear] = React.useState(new Date().getFullYear());
+  const [inputValue, setInputValue] = React.useState('');
+  const [timeHour, setTimeHour] = React.useState(0);
+  const [timeMinute, setTimeMinute] = React.useState(0);
+  // Refs
+  const containerRef = React.useRef(null);
+  // Constants
+  const includeTime = format.includes('HH:mm');
+  const t = translations[language];
+  // Initialize from value prop
+  React.useEffect(() => {
+    if (value) {
+      const date = new Date(value);
+      if (!isNaN(date.getTime())) {
+        setSelectedDate(date);
+        setCurrentMonth(date.getMonth());
+        setCurrentYear(date.getFullYear());
+        setTimeHour(date.getHours());
+        setTimeMinute(date.getMinutes());
+        setInputValue(formatDate(date, format, yearType));
+      }
+    } else {
+      setSelectedDate(null);
+      setInputValue('');
+    }
+  }, [value, format, yearType]);
+  // Handle date selection
+  const handleDateSelect = (day, year, month) => {
+    const newDate = new Date(year, month, day, timeHour, timeMinute);
+    // Check if the selected date is disabled before proceeding
+    if (isDisabled(newDate, disabledPast, disabledFuture)) {
+      return;
+    }
+    setSelectedDate(newDate);
+    setInputValue(formatDate(newDate, format, yearType));
+    onChange === null || onChange === void 0 || onChange(newDate);
+    if (!includeTime) {
+      setIsOpen(false);
+    }
+  };
+  // Handle time change
+  const handleTimeChange = (type, newValue) => {
+    if (type === 'hour') {
+      setTimeHour(newValue);
+    } else {
+      setTimeMinute(newValue);
+    }
+    if (selectedDate) {
+      const newDate = new Date(selectedDate);
+      if (type === 'hour') {
+        newDate.setHours(newValue);
+      } else {
+        newDate.setMinutes(newValue);
+      }
+      setSelectedDate(newDate);
+      setInputValue(formatDate(newDate, format, yearType));
+      onChange === null || onChange === void 0 || onChange(newDate);
+    }
+  };
+  // Handle today button
+  const handleToday = () => {
+    const today = new Date();
+    if (isDisabled(today, disabledPast, disabledFuture)) {
+      return;
+    }
+    setSelectedDate(today);
+    setCurrentMonth(today.getMonth());
+    setCurrentYear(today.getFullYear());
+    setTimeHour(today.getHours());
+    setTimeMinute(today.getMinutes());
+    setInputValue(formatDate(today, format, yearType));
+    onChange === null || onChange === void 0 || onChange(today);
+    if (!includeTime) {
+      setIsOpen(false);
+    }
+  };
+  // Handle clear button
+  const handleClear = () => {
+    setSelectedDate(null);
+    setInputValue('');
+    onChange === null || onChange === void 0 || onChange(null);
+    setIsOpen(false);
+  };
+  // Handle confirm (for time picker)
+  const handleConfirm = () => {
+    setIsOpen(false);
+  };
+  // Navigation handlers
+  const goToPreviousMonth = () => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+  const goToNextMonth = () => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+  const goToPreviousYear = () => {
+    setCurrentYear(currentYear - 1);
+  };
+  const goToNextYear = () => {
+    setCurrentYear(currentYear + 1);
+  };
+  // Generate calendar days
+  const generateCalendarDays = () => {
+    const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
+    const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
+    const firstDayOfWeek = firstDayOfMonth.getDay();
+    const daysInMonth = lastDayOfMonth.getDate();
+    const days = [];
+    // Previous month days
+    const prevMonth = new Date(currentYear, currentMonth - 1, 0);
+    const daysFromPrevMonth = firstDayOfWeek;
+    for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
+      days.push({
+        day: prevMonth.getDate() - i,
+        isCurrentMonth: false,
+        isOtherMonth: true,
+        month: currentMonth - 1,
+        year: currentYear
+      });
+    }
+    // Current month days
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push({
+        day,
+        isCurrentMonth: true,
+        isOtherMonth: false,
+        month: currentMonth,
+        year: currentYear
+      });
+    }
+    // Next month days
+    const remainingDays = 42 - days.length;
+    for (let day = 1; day <= remainingDays; day++) {
+      days.push({
+        day,
+        isCurrentMonth: false,
+        isOtherMonth: true,
+        month: currentMonth + 1,
+        year: currentYear
+      });
+    }
+    return days;
+  };
+  // Click outside handler
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+  const calendarDays = generateCalendarDays();
+  const today = new Date();
+  const displayYear = yearType === 'be' ? convertYear(currentYear) : currentYear;
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [jsxRuntimeExports.jsx("style", {
+      children: "\n      .datetime-picker {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  max-width: 300px;\n}\n\n.datetime-picker-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.datetime-picker-input {\n  width: 100%;\n  padding: 8px 40px 8px 12px;\n  border: 1px solid #e1e5e9;\n  font-size: 14px;\n  background-color: #ffffff;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  box-sizing: border-box;\n}\n\n.datetime-picker-input:hover {\n  border-color: #d1d5db;\n}\n\n.datetime-picker-input:focus {\n  outline: none;\n  border-color: #3b82f6;\n}\n\n.datetime-picker-input:disabled {\n  background-color: #f9fafb;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.datetime-picker-icon {\n  position: absolute;\n  right: 6px;\n  top: 6px;\n  font-size: 16px;\n  pointer-events: none;\n  color: #666666;\n}\n\n.datetime-picker-dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: 4px;\n  background: #ffffff;\n  border: 1px solid #e1e5e9;\n  /* border-radius: 8px; */\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n  padding: 16px;\n  min-width: 320px;\n}\n\n.calendar-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n\n.nav-button {\n  background: none;\n  border: none;\n  padding: 8px;\n  /* border-radius: 4px; */\n  cursor: pointer;\n  font-size: 18px;\n  color: #6b7280;\n  transition: all 0.2s ease;\n}\n\n.nav-button:hover {\n  background-color: #f3f4f6;\n  color: #374151;\n}\n\n.current-month-year {\n  font-size: 16px;\n  font-weight: 600;\n  color: #374151;\n  min-width: 140px;\n  text-align: center;\n}\n\n.weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 2px;\n  margin-bottom: 8px;\n}\n\n.weekday {\n  text-align: center;\n  padding: 8px 4px;\n  font-size: 12px;\n  font-weight: 600;\n  color: #6b7280;\n  text-transform: uppercase;\n}\n\n.calendar-days {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 2px;\n  margin-bottom: 16px;\n}\n\n.calendar-day {\n  background: none;\n  border: none;\n  padding: 8px;\n  text-align: center;\n  cursor: pointer;\n  /* border-radius: 4px; */\n  font-size: 14px;\n  color: #374151;\n  transition: all 0.2s ease;\n  min-height: 32px;\n}\n\n.calendar-day:hover {\n  background-color: #f3f4f6;\n}\n\n.calendar-day.other-month {\n  color: #9ca3af;\n}\n\n.calendar-day.selected {\n  background-color: #007ac2;\n  color: #ffffff;\n}\n\n.calendar-day.today {\n  background-color: #e2f3fe;\n  color: #007ac2;\n  font-weight: 600;\n}\n\n.calendar-day.selected.today {\n  background-color: #007ac2;\n  color: #ffffff;\n}\n\n.calendar-day.disabled {\n  color: #dcdcdc;\n  cursor: not-allowed;\n}\n\n.calendar-day:hover.disabled {\n  background-color: none;\n}\n\n.time-picker {\n  display: flex;\n  gap: 16px;\n  padding: 16px 0;\n  border-top: 1px solid #e5e7eb;\n  border-bottom: 1px solid #e5e7eb;\n  margin: 16px 0;\n}\n\n.time-picker-section {\n  flex: 1;\n}\n\n.time-picker-section label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: #6b7280;\n  margin-bottom: 4px;\n}\n\n.time-select {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid #d1d5db;\n  /* border-radius: 4px; */\n  font-size: 14px;\n  background-color: #ffffff;\n  box-sizing: border-box;\n}\n\n.calendar-footer {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.footer-button {\n  padding: 6px 12px;\n  border: 1px solid #d1d5db;\n  /* border-radius: 4px; */\n  background: #ffffff;\n  cursor: pointer;\n  font-size: 12px;\n  transition: all 0.2s ease;\n}\n\n.footer-button:hover {\n  background-color: #f9fafb;\n}\n\n.today-button {\n  color: #007ac2;\n  border-color: #007ac2;\n}\n\n.today-button:hover {\n  background-color: #ecfdf5;\n}\n\n.clear-button {\n  color: #007ac2;\n  border-color: #007ac2;\n}\n\n.clear-button:hover {\n  background-color: #fef2f2;\n}\n\n.confirm-button {\n  color: #007ac2;\n  border-color: #007ac2;\n}\n\n.confirm-button:hover {\n  background-color: #eff6ff;\n}\n\n      "
+    }), jsxRuntimeExports.jsxs("div", {
+      ref: containerRef,
+      className: "datetime-picker ".concat(className),
+      children: [jsxRuntimeExports.jsxs("div", {
+        className: "datetime-picker-input-wrapper",
+        children: [jsxRuntimeExports.jsx("input", {
+          type: "text",
+          value: inputValue,
+          placeholder: placeholder || format,
+          disabled: disabled,
+          readOnly: true,
+          onClick: () => !disabled && setIsOpen(true),
+          className: "datetime-picker-input"
+        }), jsxRuntimeExports.jsx("div", {
+          className: "datetime-picker-icon",
+          children: jsxRuntimeExports.jsx(CalendarDays, {
+            size: "18"
+          })
+        })]
+      }), isOpen && jsxRuntimeExports.jsx("div", {
+        className: "datetime-picker-dropdown",
+        children: jsxRuntimeExports.jsxs("div", {
+          className: "datetime-picker-calendar",
+          children: [jsxRuntimeExports.jsxs("div", {
+            className: "calendar-header",
+            children: [jsxRuntimeExports.jsx("button", {
+              type: "button",
+              onClick: goToPreviousYear,
+              className: "nav-button",
+              children: "\u27EA"
+            }), jsxRuntimeExports.jsx("button", {
+              type: "button",
+              onClick: goToPreviousMonth,
+              className: "nav-button",
+              children: "\u27E8"
+            }), jsxRuntimeExports.jsxs("div", {
+              className: "current-month-year",
+              children: [t.months[currentMonth], " ", displayYear]
+            }), jsxRuntimeExports.jsx("button", {
+              type: "button",
+              onClick: goToNextMonth,
+              className: "nav-button",
+              children: "\u27E9"
+            }), jsxRuntimeExports.jsx("button", {
+              type: "button",
+              onClick: goToNextYear,
+              className: "nav-button",
+              children: "\u27EB"
+            })]
+          }), jsxRuntimeExports.jsx("div", {
+            className: "weekdays",
+            children: t.weekdaysShort.map((day, index) => jsxRuntimeExports.jsx("div", {
+              className: "weekday",
+              children: day
+            }, index))
+          }), jsxRuntimeExports.jsx("div", {
+            className: "calendar-days",
+            children: calendarDays.map((dateInfo, index) => {
+              let actualDate;
+              // Determine the correct date object for the day
+              if (dateInfo.isCurrentMonth) {
+                actualDate = new Date(currentYear, currentMonth, dateInfo.day);
+              } else if (index < 7 && dateInfo.day > 20) {
+                actualDate = new Date(currentYear, currentMonth - 1, dateInfo.day);
+              } else {
+                actualDate = new Date(currentYear, currentMonth + 1, dateInfo.day);
+              }
+              const isSelected = selectedDate && isSameDay(actualDate, selectedDate);
+              const isToday = isSameDay(actualDate, today);
+              const isDayDisabled = isDisabled(actualDate, disabledPast, disabledFuture);
+              return jsxRuntimeExports.jsx("button", {
+                type: "button",
+                onClick: () => {
+                  if (dateInfo.isCurrentMonth) {
+                    handleDateSelect(dateInfo.day, currentYear, currentMonth);
+                  } else if (index < 7 && dateInfo.day > 20) {
+                    // Navigate to previous month and select date
+                    const prevMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+                    const prevYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+                    const newDate = new Date(prevYear, prevMonth, dateInfo.day);
+                    if (isDisabled(newDate, disabledPast, disabledFuture)) return;
+                    setCurrentMonth(prevMonth);
+                    setCurrentYear(prevYear);
+                    handleDateSelect(dateInfo.day, prevYear, prevMonth);
+                  } else {
+                    // Navigate to next month and select date
+                    const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1;
+                    const nextYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+                    const newDate = new Date(nextYear, nextMonth, dateInfo.day);
+                    if (isDisabled(newDate, disabledPast, disabledFuture)) return;
+                    setCurrentMonth(nextMonth);
+                    setCurrentYear(nextYear);
+                    handleDateSelect(dateInfo.day, nextYear, nextMonth);
+                  }
+                },
+                disabled: isDayDisabled,
+                className: "\n                        calendar-day\n                        ".concat(dateInfo.isOtherMonth ? 'other-month' : '', "\n                        ").concat(isSelected ? 'selected' : '', "\n                        ").concat(isToday ? 'today' : '', "\n                        ").concat(isDayDisabled ? 'disabled' : '', "\n                      ").trim(),
+                children: dateInfo.day
+              }, index);
+            })
+          }), includeTime && jsxRuntimeExports.jsxs("div", {
+            className: "time-picker",
+            children: [jsxRuntimeExports.jsxs("div", {
+              className: "time-picker-section",
+              children: [jsxRuntimeExports.jsx("label", {
+                children: t.hour
+              }), jsxRuntimeExports.jsx("select", {
+                value: timeHour,
+                onChange: e => handleTimeChange('hour', parseInt(e.target.value)),
+                className: "time-select",
+                children: Array.from({
+                  length: 24
+                }, (_, i) => jsxRuntimeExports.jsx("option", {
+                  value: i,
+                  children: String(i).padStart(2, '0')
+                }, i))
+              })]
+            }), jsxRuntimeExports.jsxs("div", {
+              className: "time-picker-section",
+              children: [jsxRuntimeExports.jsx("label", {
+                children: t.minute
+              }), jsxRuntimeExports.jsx("select", {
+                value: timeMinute,
+                onChange: e => handleTimeChange('minute', parseInt(e.target.value)),
+                className: "time-select",
+                children: Array.from({
+                  length: 60
+                }, (_, i) => jsxRuntimeExports.jsx("option", {
+                  value: i,
+                  children: String(i).padStart(2, '0')
+                }, i))
+              })]
+            })]
+          }), jsxRuntimeExports.jsxs("div", {
+            className: "calendar-footer",
+            children: [showToday && jsxRuntimeExports.jsx("button", {
+              type: "button",
+              onClick: handleToday,
+              disabled: isDisabled(today, disabledPast, disabledFuture),
+              className: "footer-button today-button ".concat(isDisabled(today, disabledPast, disabledFuture) ? 'disabled' : ''),
+              children: t.today
+            }), showClear && jsxRuntimeExports.jsx("button", {
+              type: "button",
+              onClick: handleClear,
+              className: "footer-button clear-button",
+              children: t.clear
+            }), includeTime && jsxRuntimeExports.jsx("button", {
+              type: "button",
+              onClick: handleConfirm,
+              className: "footer-button confirm-button",
+              children: t.ok
+            })]
+          })]
+        })
+      })]
+    })]
+  });
+};
+
 // Ensure React is available before importing components
 
 exports.React = React;
 exports.default = React;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
+exports.DatePicker = DatePicker;
 exports.Input = Input;
 exports.InputFile = InputFile;
 exports.Radio = Radio;