@pichetch08/trip-ui 0.1.0

package/dist/date-range-picker.js

@@ -0,0 +1,456 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+const THAI_MONTHS_SHORT = [
+  "\u0E21.\u0E04.",
+  "\u0E01.\u0E1E.",
+  "\u0E21\u0E35.\u0E04.",
+  "\u0E40\u0E21.\u0E22.",
+  "\u0E1E.\u0E04.",
+  "\u0E21\u0E34.\u0E22.",
+  "\u0E01.\u0E04.",
+  "\u0E2A.\u0E04.",
+  "\u0E01.\u0E22.",
+  "\u0E15.\u0E04.",
+  "\u0E1E.\u0E22.",
+  "\u0E18.\u0E04."
+];
+const WEEKDAY_LABELS = ["\u0E2D\u0E32", "\u0E08", "\u0E2D", "\u0E1E", "\u0E1E\u0E24", "\u0E28", "\u0E2A"];
+function parseDate(str) {
+  if (!str) return null;
+  const [y, m, d] = str.split("-").map(Number);
+  if (!y || !m || !d) return null;
+  return new Date(y, m - 1, d);
+}
+function toDateString(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function formatDisplay(str, months) {
+  const d = parseDate(str);
+  if (!d) return "";
+  const buddhistYear = d.getFullYear() + 543;
+  return `${d.getDate()} ${months[d.getMonth()]} ${buddhistYear}`;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function CalendarMonth({
+  year,
+  month,
+  startDate,
+  endDate,
+  hoverDate,
+  picking,
+  minDate,
+  maxDate,
+  onSelectDate,
+  onHoverDate,
+  onPrevMonth,
+  onNextMonth,
+  showPrev,
+  showNext,
+  monthNames,
+  dayNames
+}) {
+  const buddhistYear = year + 543;
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfMonth(year, month);
+  const rangeEnd = picking === "end" && !endDate && hoverDate ? hoverDate : endDate;
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push(new Date(year, month, d));
+  }
+  function isDisabled(date) {
+    const s = startOfDay(date);
+    if (minDate && s < startOfDay(minDate)) return true;
+    if (maxDate && s > startOfDay(maxDate)) return true;
+    return false;
+  }
+  function isStart(date) {
+    return !!startDate && isSameDay(date, startDate);
+  }
+  function isEnd(date) {
+    return !!rangeEnd && isSameDay(date, rangeEnd);
+  }
+  function isInRange(date) {
+    if (!startDate || !rangeEnd) return false;
+    const s = startOfDay(startDate);
+    const e = startOfDay(rangeEnd);
+    const d = startOfDay(date);
+    if (s > e) return d > e && d < s;
+    return d > s && d < e;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-[240px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3 px-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onPrevMonth,
+          className: `w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-variant transition-colors text-on-surface-variant active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${!showPrev ? "invisible" : ""}`,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-lg", children: "chevron_left" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold text-on-surface", children: [
+        monthNames[month],
+        " ",
+        buddhistYear
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onNextMonth,
+          className: `w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-variant transition-colors text-on-surface-variant active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${!showNext ? "invisible" : ""}`,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-lg", children: "chevron_right" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-1", children: dayNames.map((d) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-center text-xs font-semibold text-on-surface-variant py-1",
+        children: d
+      },
+      d
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: cells.map((date, idx) => {
+      if (!date) {
+        return /* @__PURE__ */ jsx("div", {}, `empty-${idx}`);
+      }
+      const disabled = isDisabled(date);
+      const start = isStart(date);
+      const end = isEnd(date);
+      const inRange = isInRange(date);
+      let cellBg = "";
+      if (start || end) {
+        cellBg = "bg-primary text-on-primary rounded-full";
+      } else if (inRange) {
+        cellBg = "bg-primary/10 text-on-surface";
+      } else {
+        cellBg = "text-on-surface hover:bg-surface-variant/60 rounded-full";
+      }
+      let rangeRound = "";
+      if (inRange) {
+        const isFirst = date.getDay() === 0;
+        const isLast = date.getDay() === 6;
+        if (isFirst) rangeRound = "rounded-l-full";
+        if (isLast) rangeRound = "rounded-r-full";
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+        inRange && /* @__PURE__ */ jsx("div", { className: `absolute inset-y-0 inset-x-0 bg-primary/10 ${rangeRound}` }),
+        start && rangeEnd && !isSameDay(date, rangeEnd) && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 w-1/2 bg-primary/10" }),
+        end && startDate && !isSameDay(date, startDate) && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 w-1/2 bg-primary/10" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => !disabled && onSelectDate(date),
+            onMouseEnter: () => !disabled && onHoverDate(date),
+            onMouseLeave: () => onHoverDate(null),
+            className: `relative z-10 w-8 h-8 text-xs font-medium transition-all duration-150 ${disabled ? "opacity-30 cursor-not-allowed" : "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"} ${cellBg}`,
+            children: date.getDate()
+          }
+        )
+      ] }, date.toISOString());
+    }) })
+  ] });
+}
+function DateRangePicker({
+  label,
+  startDate,
+  endDate,
+  onStartChange,
+  onEndChange,
+  required,
+  error,
+  placeholder = { start: "\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", end: "\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14" },
+  clearLabel = "\u0E25\u0E49\u0E32\u0E07",
+  confirmLabel = "\u0E15\u0E01\u0E25\u0E07",
+  minDate: minDateStr,
+  maxDate: maxDateStr,
+  icon = "calendar_month",
+  nameStart,
+  nameEnd,
+  monthNames = THAI_MONTHS_SHORT,
+  dayNames = WEEKDAY_LABELS
+}) {
+  var _a, _b, _c, _d, _e;
+  const [open, setOpen] = useState(false);
+  const [picking, setPicking] = useState("start");
+  const [hoverDate, setHoverDate] = useState(null);
+  const [popupStyle, setPopupStyle] = useState({});
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const now = /* @__PURE__ */ new Date();
+  const initialMonth = startDate ? (_a = parseDate(startDate)) != null ? _a : now : now;
+  const [leftMonth, setLeftMonth] = useState({
+    year: initialMonth.getFullYear(),
+    month: initialMonth.getMonth()
+  });
+  const rightMonth = (() => {
+    const d = new Date(leftMonth.year, leftMonth.month + 1, 1);
+    return { year: d.getFullYear(), month: d.getMonth() };
+  })();
+  const parsedStart = parseDate(startDate);
+  const parsedEnd = parseDate(endDate);
+  const minDate = parseDate(minDateStr != null ? minDateStr : "");
+  const maxDate = parseDate(maxDateStr != null ? maxDateStr : "");
+  const displayText = startDate || endDate ? `${startDate ? formatDisplay(startDate, monthNames) : (_b = placeholder.start) != null ? _b : ""} \u2192 ${endDate ? formatDisplay(endDate, monthNames) : (_c = placeholder.end) != null ? _c : ""}` : null;
+  function calculatePopupStyle() {
+    const btn = triggerRef.current;
+    if (!btn) return;
+    const rect = btn.getBoundingClientRect();
+    const popupWidth = 560;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const showAbove = spaceBelow < 420 && rect.top > 420;
+    let left = rect.left;
+    if (left + popupWidth > window.innerWidth - 8) {
+      left = Math.max(8, window.innerWidth - popupWidth - 8);
+    }
+    if (showAbove) {
+      setPopupStyle({ position: "fixed", bottom: window.innerHeight - rect.top + 4, left, width: popupWidth, zIndex: 9999 });
+    } else {
+      setPopupStyle({ position: "fixed", top: rect.bottom + 4, left, width: popupWidth, zIndex: 9999 });
+    }
+  }
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      var _a2, _b2;
+      const target = e.target;
+      const insideTrigger = (_a2 = containerRef.current) == null ? void 0 : _a2.contains(target);
+      const insidePopup = (_b2 = dropdownRef.current) == null ? void 0 : _b2.contains(target);
+      if (!insideTrigger && !insidePopup) setOpen(false);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    function handleScroll() {
+      calculatePopupStyle();
+    }
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [open]);
+  function handleOpen() {
+    if (!open) {
+      calculatePopupStyle();
+      setPicking("start");
+      const base = parsedStart != null ? parsedStart : /* @__PURE__ */ new Date();
+      setLeftMonth({ year: base.getFullYear(), month: base.getMonth() });
+    }
+    setOpen((v) => !v);
+  }
+  function handleSelectDate(date) {
+    if (picking === "start") {
+      onStartChange(toDateString(date));
+      if (parsedEnd && date > parsedEnd) {
+        onEndChange("");
+      }
+      setPicking("end");
+    } else {
+      if (parsedStart && date < parsedStart) {
+        onEndChange(toDateString(parsedStart));
+        onStartChange(toDateString(date));
+      } else {
+        onEndChange(toDateString(date));
+      }
+      setPicking("start");
+    }
+  }
+  function handleClear() {
+    onStartChange("");
+    onEndChange("");
+    setPicking("start");
+  }
+  function handleConfirm() {
+    setOpen(false);
+  }
+  function prevMonth() {
+    const d = new Date(leftMonth.year, leftMonth.month - 1, 1);
+    setLeftMonth({ year: d.getFullYear(), month: d.getMonth() });
+  }
+  function nextMonth() {
+    const d = new Date(leftMonth.year, leftMonth.month + 1, 1);
+    setLeftMonth({ year: d.getFullYear(), month: d.getMonth() });
+  }
+  const triggerId = label ? `daterange-${label.replace(/\s+/g, "-").toLowerCase()}` : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", ref: containerRef, children: [
+    nameStart && /* @__PURE__ */ jsx("input", { type: "hidden", name: nameStart, value: startDate }),
+    nameEnd && /* @__PURE__ */ jsx("input", { type: "hidden", name: nameEnd, value: endDate }),
+    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",
+      {
+        ref: triggerRef,
+        id: triggerId,
+        type: "button",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        "aria-required": required,
+        onClick: handleOpen,
+        className: `relative w-full bg-surface-container-low border rounded-xl py-4 pl-12 pr-10 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 ${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: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant", children: icon }),
+          displayText ? /* @__PURE__ */ jsx("span", { className: "text-on-surface text-sm", children: displayText }) : /* @__PURE__ */ jsxs("span", { className: "text-outline/40 text-sm", children: [
+            placeholder.start,
+            " \u2192 ",
+            placeholder.end
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-lg transition-transform ${open ? "rotate-180" : ""}`,
+              children: "expand_more"
+            }
+          )
+        ]
+      }
+    ),
+    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",
+      {
+        ref: dropdownRef,
+        style: popupStyle,
+        className: "bg-surface rounded-2xl shadow-2xl border border-outline-variant/30 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 pt-4 pb-3 border-b border-outline-variant/20", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `flex-1 flex flex-col items-center px-3 py-2 rounded-xl transition-all ${picking === "start" ? "bg-primary/10 ring-1 ring-primary/30" : "bg-surface-container-low"}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant font-medium mb-0.5", children: (_d = placeholder.start) != null ? _d : "\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `text-sm font-bold ${startDate ? "text-primary" : "text-outline/40"}`,
+                      children: startDate ? formatDisplay(startDate, monthNames) : "\u2014"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-on-surface-variant", children: "arrow_forward" }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `flex-1 flex flex-col items-center px-3 py-2 rounded-xl transition-all ${picking === "end" ? "bg-primary/10 ring-1 ring-primary/30" : "bg-surface-container-low"}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant font-medium mb-0.5", children: (_e = placeholder.end) != null ? _e : "\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14" }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `text-sm font-bold ${endDate ? "text-primary" : "text-outline/40"}`,
+                      children: endDate ? formatDisplay(endDate, monthNames) : "\u2014"
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-4 p-4", children: [
+            /* @__PURE__ */ jsx(
+              CalendarMonth,
+              {
+                year: leftMonth.year,
+                month: leftMonth.month,
+                startDate: parsedStart,
+                endDate: parsedEnd,
+                hoverDate,
+                picking,
+                minDate,
+                maxDate,
+                onSelectDate: handleSelectDate,
+                onHoverDate: setHoverDate,
+                onPrevMonth: prevMonth,
+                onNextMonth: nextMonth,
+                showPrev: true,
+                showNext: false,
+                monthNames,
+                dayNames
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-px bg-outline-variant/20 self-stretch" }),
+            /* @__PURE__ */ jsx(
+              CalendarMonth,
+              {
+                year: rightMonth.year,
+                month: rightMonth.month,
+                startDate: parsedStart,
+                endDate: parsedEnd,
+                hoverDate,
+                picking,
+                minDate,
+                maxDate,
+                onSelectDate: handleSelectDate,
+                onHoverDate: setHoverDate,
+                onPrevMonth: prevMonth,
+                onNextMonth: nextMonth,
+                showPrev: false,
+                showNext: true,
+                monthNames,
+                dayNames
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-t border-outline-variant/20", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "text-sm font-semibold text-red-500 hover:opacity-70 transition-opacity px-3 py-1.5 rounded-lg hover:bg-red-50 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+                children: clearLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleConfirm,
+                disabled: !startDate || !endDate,
+                className: "text-sm font-bold bg-primary text-on-primary px-5 py-1.5 rounded-xl hover:opacity-90 transition-opacity disabled:opacity-40 disabled:cursor-not-allowed active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+                children: confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  DateRangePicker
+};

package/dist/dev-auto-fill.d.ts

@@ -0,0 +1,12 @@
+interface DevAutoFillProps {
+    onFill: () => void;
+    label?: string;
+}
+/**
+ * ปุ่ม Auto Fill สำหรับ dev mode เท่านั้น
+ * ไม่แสดงใน production
+ * ใช้ได้ทุกหน้าที่มี form
+ */
+declare function DevAutoFill({ onFill, label }: DevAutoFillProps): React.ReactNode;
+
+export { DevAutoFill };

package/dist/dev-auto-fill.js

@@ -0,0 +1,22 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const isDev = process.env.NODE_ENV === "development";
+function DevAutoFill({ onFill, label = "Auto Fill" }) {
+  if (!isDev) return null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onFill,
+      className: "fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-2.5 bg-amber-500 text-white rounded-full text-xs font-bold shadow-lg hover:bg-amber-600 active:scale-95 transition-all",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-sm", children: "auto_fix_high" }),
+        label
+      ]
+    }
+  );
+}
+export {
+  DevAutoFill
+};

package/dist/divider.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface DividerProps {
+    orientation?: "horizontal" | "vertical";
+    label?: string;
+    className?: string;
+}
+declare function Divider({ orientation, label, className, }: DividerProps): react_jsx_runtime.JSX.Element;
+
+export { Divider };

package/dist/divider.js

@@ -0,0 +1,44 @@
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Divider({
+  orientation = "horizontal",
+  label,
+  className = ""
+}) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `border-l border-outline-variant/30 h-full self-stretch ${className}`,
+        role: "separator",
+        "aria-orientation": "vertical"
+      }
+    );
+  }
+  if (label) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center gap-3 w-full ${className}`,
+        role: "separator",
+        "aria-orientation": "horizontal",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 border-t border-outline-variant/30" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-on-surface-variant font-medium whitespace-nowrap", children: label }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 border-t border-outline-variant/30" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `border-t border-outline-variant/30 w-full ${className}`,
+      role: "separator",
+      "aria-orientation": "horizontal"
+    }
+  );
+}
+export {
+  Divider
+};

package/dist/drawer.d.ts

@@ -0,0 +1,16 @@
+type DrawerPosition = "left" | "right";
+type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    position?: DrawerPosition;
+    size?: DrawerSize;
+    closeAriaLabel?: string;
+}
+declare function Drawer({ open, onClose, title, subtitle, children, footer, position, size, closeAriaLabel, }: DrawerProps): React.ReactNode;
+
+export { Drawer };

package/dist/drawer.js

@@ -0,0 +1,111 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from "react";
+import { IconButton } from "./icon-button";
+const SIZE_CLASSES = {
+  sm: "max-w-xs",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  full: "max-w-full"
+};
+function Drawer({
+  open,
+  onClose,
+  title,
+  subtitle,
+  children,
+  footer,
+  position = "right",
+  size = "md",
+  closeAriaLabel = "\u0E1B\u0E34\u0E14"
+}) {
+  const closeButtonRef = useRef(null);
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  useEffect(() => {
+    if (open) {
+      const id = setTimeout(() => {
+        var _a;
+        return (_a = closeButtonRef.current) == null ? void 0 : _a.focus();
+      }, 50);
+      return () => clearTimeout(id);
+    }
+  }, [open]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key !== "Tab" || !panelRef.current) return;
+    const focusable = panelRef.current.querySelectorAll(
+      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }, []);
+  const isLeft = position === "left";
+  const slideIn = isLeft ? "-translate-x-full" : "translate-x-full";
+  const positionClasses = isLeft ? "top-0 left-0" : "top-0 right-0";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `fixed inset-0 z-60 bg-black/40 transition-opacity duration-300 ${open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "drawer-title",
+        onKeyDown: handleKeyDown,
+        className: `fixed ${positionClasses} z-70 h-full w-full ${SIZE_CLASSES[size]} bg-surface shadow-2xl flex flex-col transition-transform duration-300 ease-out ${open ? "translate-x-0" : slideIn}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between p-6 border-b border-outline-variant", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h2", { id: "drawer-title", className: "text-lg font-bold text-on-surface", children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-on-surface-variant mt-0.5", children: subtitle })
+            ] }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                ref: closeButtonRef,
+                icon: "close",
+                variant: "ghost",
+                size: "sm",
+                onClick: onClose,
+                "aria-label": closeAriaLabel,
+                className: "-mr-1 -mt-1"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children }),
+          footer && /* @__PURE__ */ jsx("div", { className: "border-t border-outline-variant p-4 bg-surface-container-low", children: footer })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Drawer
+};