@pichetch08/trip-ui 0.1.0

package/dist/date-picker.js

@@ -0,0 +1,234 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+const DAYS_TH = ["\u0E2D\u0E32", "\u0E08", "\u0E2D", "\u0E1E", "\u0E1E\u0E24", "\u0E28", "\u0E2A"];
+const MONTHS_TH = [
+  "\u0E21\u0E01\u0E23\u0E32\u0E04\u0E21",
+  "\u0E01\u0E38\u0E21\u0E20\u0E32\u0E1E\u0E31\u0E19\u0E18\u0E4C",
+  "\u0E21\u0E35\u0E19\u0E32\u0E04\u0E21",
+  "\u0E40\u0E21\u0E29\u0E32\u0E22\u0E19",
+  "\u0E1E\u0E24\u0E29\u0E20\u0E32\u0E04\u0E21",
+  "\u0E21\u0E34\u0E16\u0E38\u0E19\u0E32\u0E22\u0E19",
+  "\u0E01\u0E23\u0E01\u0E0E\u0E32\u0E04\u0E21",
+  "\u0E2A\u0E34\u0E07\u0E2B\u0E32\u0E04\u0E21",
+  "\u0E01\u0E31\u0E19\u0E22\u0E32\u0E22\u0E19",
+  "\u0E15\u0E38\u0E25\u0E32\u0E04\u0E21",
+  "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
+  "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
+];
+function daysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function firstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function toDateStr(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function parseDate(s) {
+  if (!s) return null;
+  const d = /* @__PURE__ */ new Date(s + "T00:00:00");
+  return isNaN(d.getTime()) ? null : d;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function DatePicker({
+  label,
+  value,
+  onChange,
+  placeholder = "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
+  todayLabel = "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49",
+  clearLabel = "\u0E25\u0E49\u0E32\u0E07",
+  min,
+  max,
+  required,
+  error,
+  icon = "calendar_today",
+  name,
+  dayNames = DAYS_TH,
+  monthNames = MONTHS_TH
+}) {
+  var _a, _b;
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  const selectedDate = parseDate(value);
+  const minDate = parseDate(min != null ? min : "");
+  const maxDate = parseDate(max != null ? max : "");
+  const today = /* @__PURE__ */ new Date();
+  const [viewYear, setViewYear] = useState((_a = selectedDate == null ? void 0 : selectedDate.getFullYear()) != null ? _a : today.getFullYear());
+  const [viewMonth, setViewMonth] = useState((_b = selectedDate == null ? void 0 : selectedDate.getMonth()) != null ? _b : today.getMonth());
+  useEffect(() => {
+    if (selectedDate) {
+      setViewYear(selectedDate.getFullYear());
+      setViewMonth(selectedDate.getMonth());
+    }
+  }, [value]);
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+  const prevMonth = useCallback(() => {
+    setViewMonth((m) => {
+      if (m === 0) {
+        setViewYear((y) => y - 1);
+        return 11;
+      }
+      return m - 1;
+    });
+  }, []);
+  const nextMonth = useCallback(() => {
+    setViewMonth((m) => {
+      if (m === 11) {
+        setViewYear((y) => y + 1);
+        return 0;
+      }
+      return m + 1;
+    });
+  }, []);
+  const handleSelect = useCallback((day) => {
+    const d = new Date(viewYear, viewMonth, day);
+    onChange(toDateStr(d));
+    setOpen(false);
+  }, [viewYear, viewMonth, onChange]);
+  const isDisabled = useCallback((day) => {
+    const d = new Date(viewYear, viewMonth, day);
+    if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
+    if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
+    return false;
+  }, [viewYear, viewMonth, minDate, maxDate]);
+  const totalDays = daysInMonth(viewYear, viewMonth);
+  const startDay = firstDayOfMonth(viewYear, viewMonth);
+  const cells = [];
+  for (let i = 0; i < startDay; i++) cells.push(null);
+  for (let d = 1; d <= totalDays; d++) cells.push(d);
+  while (cells.length % 7 !== 0) cells.push(null);
+  const displayValue = selectedDate ? selectedDate.toLocaleDateString("th-TH", { day: "2-digit", month: "2-digit", year: "numeric" }) : "";
+  const triggerId = label ? `datepicker-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-2", ref: containerRef, children: [
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value }),
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: triggerId, className: "text-xs font-bold text-on-surface-variant uppercase tracking-widest px-1", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: triggerId,
+        type: "button",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        "aria-required": required,
+        onClick: () => setOpen(!open),
+        className: `relative w-full bg-surface-container-low border rounded-xl py-4 px-6 text-left transition-all font-medium outline-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${icon ? "pl-12" : ""} ${open ? "bg-surface ring-2 ring-primary/20 border-primary" : error ? "border-red-400 bg-red-50/30" : "border-transparent hover:border-outline-variant"}`,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant", children: icon }),
+          displayValue ? /* @__PURE__ */ jsx("span", { className: "text-on-surface", children: displayValue }) : /* @__PURE__ */ jsx("span", { className: "text-outline/40", children: placeholder })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxs("p", { className: "text-xs text-red-500 px-1 flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", children: "error" }),
+      error
+    ] }),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute top-full mt-1 z-50 bg-surface rounded-2xl shadow-2xl border border-outline-variant/30 p-4 w-75 animate-in fade-in slide-in-from-top-2 duration-150",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: prevMonth,
+                className: "w-8 h-8 rounded-lg flex items-center justify-center hover:bg-surface-variant transition-colors active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-lg text-on-surface-variant", children: "chevron_left" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold text-on-surface", children: [
+              monthNames[viewMonth],
+              " ",
+              viewYear + 543
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: nextMonth,
+                className: "w-8 h-8 rounded-lg flex items-center justify-center hover:bg-surface-variant transition-colors active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-lg text-on-surface-variant", children: "chevron_right" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0.5 mb-1", children: dayNames.map((d) => /* @__PURE__ */ jsx("div", { className: "text-center text-[10px] font-bold text-on-surface-variant uppercase tracking-wider", children: d }, d)) }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0.5", children: cells.map((day, i) => {
+            if (day === null) return /* @__PURE__ */ jsx("div", { className: "aspect-square" }, `e-${i}`);
+            const d = new Date(viewYear, viewMonth, day);
+            const isToday = isSameDay(d, today);
+            const isSelected = selectedDate ? isSameDay(d, selectedDate) : false;
+            const disabled = isDisabled(day);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled,
+                onClick: () => handleSelect(day),
+                className: `aspect-square rounded-lg text-xs font-semibold transition-all duration-150 flex items-center justify-center ${isSelected ? "bg-primary text-on-primary shadow-md shadow-primary/25" : isToday ? "bg-primary-container text-(--on-primary-container) font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30" : disabled ? "text-outline/30 cursor-not-allowed" : "text-on-surface hover:bg-surface-variant focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"}`,
+                children: day
+              },
+              `d-${day}`
+            );
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-outline-variant/20", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onChange("");
+                  setOpen(false);
+                },
+                className: "text-xs font-bold text-on-surface-variant hover:text-red-500 transition-colors px-2 py-1 rounded-lg hover:bg-red-50",
+                children: clearLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  handleSelect(today.getDate());
+                  setViewYear(today.getFullYear());
+                  setViewMonth(today.getMonth());
+                },
+                className: "text-xs font-bold text-primary hover:bg-primary-container transition-colors px-3 py-1 rounded-lg",
+                children: todayLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DatePicker
+};

package/dist/date-range-picker.d.ts

@@ -0,0 +1,25 @@
+interface DateRangePickerProps {
+    label?: string;
+    startDate: string;
+    endDate: string;
+    onStartChange: (date: string) => void;
+    onEndChange: (date: string) => void;
+    required?: boolean;
+    error?: string;
+    placeholder?: {
+        start?: string;
+        end?: string;
+    };
+    clearLabel?: string;
+    confirmLabel?: string;
+    minDate?: string;
+    maxDate?: string;
+    icon?: string;
+    nameStart?: string;
+    nameEnd?: string;
+    monthNames?: string[];
+    dayNames?: string[];
+}
+declare function DateRangePicker({ label, startDate, endDate, onStartChange, onEndChange, required, error, placeholder, clearLabel, confirmLabel, minDate: minDateStr, maxDate: maxDateStr, icon, nameStart, nameEnd, monthNames, dayNames, }: DateRangePickerProps): React.ReactNode;
+
+export { DateRangePicker };