@lichta/react 2.0.1 → 2.1.0

package/README.md

@@ -1,6 +1,9 @@
 # @lichta/react
 
 [![npm version](https://img.shields.io/npm/v/@lichta/react.svg)](https://www.npmjs.com/package/@lichta/react)
+[![npm version](https://img.shields.io/npm/v/@lichta/core.svg)](https://www.npmjs.com/package/@lichta/core)
+
+🚀 **[Demo trực tiếp](https://lichta.zeneo.app/)**
 
 Component `Calendar` (lịch tháng có ngày âm lịch) cho React, đóng gói trên [`@lichta/core`](https://www.npmjs.com/package/@lichta/core).
 
@@ -63,6 +66,46 @@ export default function App() {
 
 > Lưu ý: `month`/`year` hiện chỉ dùng làm giá trị khởi tạo state nội bộ (uncontrolled) — thay đổi prop sau khi mount chưa tự động cập nhật lại lịch đang hiển thị.
 
+## DatePicker
+
+Component `DatePicker` (input + popover chọn ngày, dựng trên `Calendar` ở trên).
+
+```tsx
+import { DatePicker } from '@lichta/react';
+import '@lichta/core/styles/calendar-base.css';
+import '@lichta/core/styles/calendar-glass.css'; // theme "glass" (tùy chọn)
+import '@lichta/core/styles/datepicker-base.css';
+import '@lichta/core/styles/datepicker-glass.css'; // theme "glass" (tùy chọn)
+
+export default function App() {
+  return (
+    <DatePicker
+      theme="glass"
+      locale="vi"
+      onSelect={(date, lunar) => console.log(date, lunar)}
+    />
+  );
+}
+```
+
+> ⚠️ Cần import cả CSS của `Calendar` (dùng trong popover) lẫn `DatePicker` (input + popover chrome) — thiếu 1 trong 2 sẽ hiển thị thiếu style.
+
+### Props
+
+| Prop | Kiểu | Mặc định | Mô tả |
+|---|---|---|---|
+| `value` | `Date \| null` | `null` | Ngày đang chọn (uncontrolled — component tự quản lý sau lần mount đầu) |
+| `onSelect` | `(date: Date, lunar: LunarDate) => void` | — | Callback khi chọn ngày trong popover |
+| `placeholder` | `string` | `'Chọn ngày'` | Placeholder khi chưa chọn ngày |
+| `locale` | `'vi' \| 'en' \| 'ja' \| 'ko'` | `'vi'` | Ngôn ngữ hiển thị trong popover |
+| `theme` | `'classic' \| 'glass'` | `'classic'` | Giao diện input + popover |
+| `showLunar` | `boolean` | `true` | Hiện ngày âm lịch trong popover |
+| `format` | `(date: Date) => string` | `dd/MM/yyyy` | Hàm format ngày hiển thị trên input |
+| `disabled` | `boolean` | `false` | Vô hiệu hoá input |
+| `className` | `string` | `''` | Class CSS bổ sung cho container |
+
+Popover tự đóng khi: chọn xong 1 ngày, click ra ngoài, hoặc nhấn phím `Escape`.
+
 ## Theming
 
 ```css
@@ -78,6 +121,8 @@ export default function App() {
 }
 ```
 
+`DatePicker` dùng chung biến CSS `--lichta-*` ở trên — không cần custom class riêng.
+
 ## License
 
 [MIT](./LICENSE)

package/dist/index.d.mts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { LunarDate, Locale } from '@lichta/core';
+import { LunarDate, Locale, CalendarDayCell } from '@lichta/core';
 
 interface CalendarProps {
     month?: number;
     year?: number;
+    /** Ngày được chọn (controlled). Bỏ qua thì Calendar tự quản lý selection nội bộ (uncontrolled). */
+    selectedDate?: Date | null;
     onSelect?: (date: Date, lunar: LunarDate) => void;
     showLunar?: boolean;
     locale?: Locale;
@@ -12,13 +14,27 @@ interface CalendarProps {
     children?: React.ReactNode;
     renderDay?: (cell: DayCellData) => React.ReactNode;
 }
-interface DayCellData {
-    solar: Date;
-    lunar: LunarDate;
-    isToday: boolean;
-    isSelected: boolean;
-    isCurrentMonth: boolean;
-}
+type DayCellData = CalendarDayCell;
 declare const Calendar: React.FC<CalendarProps>;
 
-export { Calendar, type CalendarProps };
+interface DatePickerProps {
+    /** Ngày đang chọn (uncontrolled — component tự quản lý sau lần mount đầu) */
+    value?: Date | null;
+    /** Gọi khi người dùng chọn 1 ngày trong popover */
+    onSelect?: (date: Date, lunar: LunarDate) => void;
+    /** Placeholder khi chưa chọn ngày nào */
+    placeholder?: string;
+    /** Ngôn ngữ hiển thị Can Chi/thứ trong tuần */
+    locale?: Locale;
+    /** Theme cho input + popover */
+    theme?: 'classic' | 'glass';
+    /** Hiển thị ngày âm lịch trong popover */
+    showLunar?: boolean;
+    /** Hàm format ngày hiển thị trên input, mặc định dd/MM/yyyy */
+    format?: (date: Date) => string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+
+export { Calendar, type CalendarProps, DatePicker, type DatePickerProps };

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { LunarDate, Locale } from '@lichta/core';
+import { LunarDate, Locale, CalendarDayCell } from '@lichta/core';
 
 interface CalendarProps {
     month?: number;
     year?: number;
+    /** Ngày được chọn (controlled). Bỏ qua thì Calendar tự quản lý selection nội bộ (uncontrolled). */
+    selectedDate?: Date | null;
     onSelect?: (date: Date, lunar: LunarDate) => void;
     showLunar?: boolean;
     locale?: Locale;
@@ -12,13 +14,27 @@ interface CalendarProps {
     children?: React.ReactNode;
     renderDay?: (cell: DayCellData) => React.ReactNode;
 }
-interface DayCellData {
-    solar: Date;
-    lunar: LunarDate;
-    isToday: boolean;
-    isSelected: boolean;
-    isCurrentMonth: boolean;
-}
+type DayCellData = CalendarDayCell;
 declare const Calendar: React.FC<CalendarProps>;
 
-export { Calendar, type CalendarProps };
+interface DatePickerProps {
+    /** Ngày đang chọn (uncontrolled — component tự quản lý sau lần mount đầu) */
+    value?: Date | null;
+    /** Gọi khi người dùng chọn 1 ngày trong popover */
+    onSelect?: (date: Date, lunar: LunarDate) => void;
+    /** Placeholder khi chưa chọn ngày nào */
+    placeholder?: string;
+    /** Ngôn ngữ hiển thị Can Chi/thứ trong tuần */
+    locale?: Locale;
+    /** Theme cho input + popover */
+    theme?: 'classic' | 'glass';
+    /** Hiển thị ngày âm lịch trong popover */
+    showLunar?: boolean;
+    /** Hàm format ngày hiển thị trên input, mặc định dd/MM/yyyy */
+    format?: (date: Date) => string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+
+export { Calendar, type CalendarProps, DatePicker, type DatePickerProps };

package/dist/index.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Calendar: () => Calendar
+  Calendar: () => Calendar,
+  DatePicker: () => DatePicker
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -38,29 +39,10 @@ module.exports = __toCommonJS(index_exports);
 var import_react = __toESM(require("react"));
 var import_core = require("@lichta/core");
 var import_jsx_runtime = require("react/jsx-runtime");
-var monthNames = [
-  "Th\xE1ng 1",
-  "Th\xE1ng 2",
-  "Th\xE1ng 3",
-  "Th\xE1ng 4",
-  "Th\xE1ng 5",
-  "Th\xE1ng 6",
-  "Th\xE1ng 7",
-  "Th\xE1ng 8",
-  "Th\xE1ng 9",
-  "Th\xE1ng 10",
-  "Th\xE1ng 11",
-  "Th\xE1ng 12"
-];
-var weekDayLabelsByLocale = {
-  vi: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
-  en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  ja: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  ko: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
-};
 var Calendar = ({
   month = (/* @__PURE__ */ new Date()).getMonth() + 1,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
+  selectedDate: selectedDateProp,
   onSelect,
   showLunar = true,
   locale = "vi",
@@ -71,66 +53,20 @@ var Calendar = ({
 }) => {
   const [currentMonth, setCurrentMonth] = (0, import_react.useState)(month);
   const [currentYear, setCurrentYear] = (0, import_react.useState)(year);
-  const [selectedDate, setSelectedDate] = (0, import_react.useState)(null);
+  const [internalSelectedDate, setInternalSelectedDate] = (0, import_react.useState)(null);
+  const selectedDate = selectedDateProp !== void 0 ? selectedDateProp : internalSelectedDate;
+  (0, import_react.useEffect)(() => {
+    setCurrentMonth(month);
+  }, [month]);
+  (0, import_react.useEffect)(() => {
+    setCurrentYear(year);
+  }, [year]);
   const yearInfo = (0, import_react.useMemo)(() => (0, import_core.getYearDetails)(currentYear), [currentYear]);
-  const weekDayLabels = weekDayLabelsByLocale[locale];
-  const calendarGrid = (0, import_react.useMemo)(() => {
-    const grid = [];
-    const firstDay = new Date(currentYear, currentMonth - 1, 1);
-    const lastDay = new Date(currentYear, currentMonth, 0);
-    const startingDayOfWeek = firstDay.getDay();
-    const daysInMonth = lastDay.getDate();
-    const today = /* @__PURE__ */ new Date();
-    const todayStr = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
-    let selStr = "";
-    if (selectedDate) {
-      selStr = `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`;
-    }
-    const prevMonthLastDay = new Date(currentYear, currentMonth - 1, 0).getDate();
-    for (let i = startingDayOfWeek - 1; i >= 0; i--) {
-      const d = prevMonthLastDay - i;
-      const m = currentMonth - 1 < 1 ? 12 : currentMonth - 1;
-      const y = currentMonth - 1 < 1 ? currentYear - 1 : currentYear;
-      const solar = new Date(y, m - 1, d);
-      const lunar = import_core.LichTa.toLunar(d, m, y);
-      const dateStr = `${y}-${m}-${d}`;
-      grid.push({
-        solar,
-        lunar,
-        isToday: dateStr === todayStr,
-        isSelected: dateStr === selStr,
-        isCurrentMonth: false
-      });
-    }
-    for (let d = 1; d <= daysInMonth; d++) {
-      const solar = new Date(currentYear, currentMonth - 1, d);
-      const lunar = import_core.LichTa.toLunar(d, currentMonth, currentYear);
-      const dateStr = `${currentYear}-${currentMonth}-${d}`;
-      grid.push({
-        solar,
-        lunar,
-        isToday: dateStr === todayStr,
-        isSelected: dateStr === selStr,
-        isCurrentMonth: true
-      });
-    }
-    const remaining = 42 - grid.length;
-    for (let d = 1; d <= remaining; d++) {
-      const m = currentMonth + 1 > 12 ? 1 : currentMonth + 1;
-      const y = currentMonth + 1 > 12 ? currentYear + 1 : currentYear;
-      const solar = new Date(y, m - 1, d);
-      const lunar = import_core.LichTa.toLunar(d, m, y);
-      const dateStr = `${y}-${m}-${d}`;
-      grid.push({
-        solar,
-        lunar,
-        isToday: dateStr === todayStr,
-        isSelected: dateStr === selStr,
-        isCurrentMonth: false
-      });
-    }
-    return grid;
-  }, [currentMonth, currentYear, selectedDate]);
+  const { weekDays: weekDayLabels, solarMonthNames: monthNames } = (0, import_core.t)(locale);
+  const calendarGrid = (0, import_react.useMemo)(
+    () => (0, import_core.getCalendarGrid)(currentMonth, currentYear, selectedDate),
+    [currentMonth, currentYear, selectedDate]
+  );
   const prevMonth = () => {
     if (currentMonth === 1) {
       setCurrentMonth(12);
@@ -148,7 +84,9 @@ var Calendar = ({
     }
   };
   const handleDayClick = (cell) => {
-    setSelectedDate(cell.solar);
+    if (selectedDateProp === void 0) {
+      setInternalSelectedDate(cell.solar);
+    }
     if (onSelect) {
       onSelect(cell.solar, cell.lunar);
     }
@@ -204,7 +142,162 @@ var Calendar = ({
     children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lich-ta-calendar-footer", children })
   ] });
 };
+
+// src/DatePicker.tsx
+var import_react2 = require("react");
+var import_core2 = require("@lichta/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function defaultFormat(date) {
+  const dd = String(date.getDate()).padStart(2, "0");
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  return `${dd}/${mm}/${date.getFullYear()}`;
+}
+var DatePicker = ({
+  value = null,
+  onSelect,
+  placeholder = "Ch\u1ECDn ng\xE0y",
+  locale = "vi",
+  theme = "classic",
+  showLunar = true,
+  format = defaultFormat,
+  disabled = false,
+  className = ""
+}) => {
+  const [selected, setSelected] = (0, import_react2.useState)(value);
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const anchor = selected ?? /* @__PURE__ */ new Date();
+  const [viewMonth, setViewMonth] = (0, import_react2.useState)(anchor.getMonth() + 1);
+  const [viewYear, setViewYear] = (0, import_react2.useState)(anchor.getFullYear());
+  const rootRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const next = value ?? null;
+    setSelected(next);
+    if (next) {
+      setViewMonth(next.getMonth() + 1);
+      setViewYear(next.getFullYear());
+    }
+  }, [value]);
+  (0, import_react2.useEffect)(() => {
+    if (!isOpen) return;
+    function handlePointerDown(event) {
+      if (rootRef.current && !rootRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    function handleKeydown(event) {
+      if (event.key === "Escape") setIsOpen(false);
+    }
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeydown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [isOpen]);
+  const yearInfo = (0, import_react2.useMemo)(() => (0, import_core2.getYearDetails)(viewYear), [viewYear]);
+  const { weekDays: weekDayLabels, solarMonthNames: monthNames } = (0, import_core2.t)(locale);
+  const grid = (0, import_react2.useMemo)(
+    () => (0, import_core2.getCalendarGrid)(viewMonth, viewYear, selected),
+    [viewMonth, viewYear, selected]
+  );
+  function prevMonth() {
+    if (viewMonth === 1) {
+      setViewMonth(12);
+      setViewYear((y) => y - 1);
+    } else {
+      setViewMonth((m) => m - 1);
+    }
+  }
+  function nextMonth() {
+    if (viewMonth === 12) {
+      setViewMonth(1);
+      setViewYear((y) => y + 1);
+    } else {
+      setViewMonth((m) => m + 1);
+    }
+  }
+  function handleDaySelect(cell) {
+    setSelected(cell.solar);
+    setIsOpen(false);
+    onSelect?.(cell.solar, cell.lunar);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: rootRef, className: `lich-ta-datepicker lichta-theme-${theme} ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "input",
+      {
+        type: "text",
+        className: "lich-ta-datepicker-input",
+        readOnly: true,
+        disabled,
+        placeholder,
+        value: selected ? format(selected) : "",
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        onClick: () => !disabled && setIsOpen((open) => !open)
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lich-ta-datepicker-popover", role: "dialog", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lich-ta-datepicker-calendar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lich-ta-datepicker-calendar-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "lich-ta-datepicker-calendar-nav",
+            onClick: prevMonth,
+            "aria-label": "Th\xE1ng tr\u01B0\u1EDBc",
+            children: "\u25C0"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lich-ta-datepicker-calendar-title", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lich-ta-datepicker-calendar-month-year", children: [
+            monthNames[viewMonth - 1],
+            ", ",
+            viewYear
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "lich-ta-datepicker-calendar-canchi", children: [
+            yearInfo.can,
+            " ",
+            yearInfo.chi
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "lich-ta-datepicker-calendar-nav",
+            onClick: nextMonth,
+            "aria-label": "Th\xE1ng sau",
+            children: "\u25B6"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lich-ta-datepicker-calendar-weekdays", children: weekDayLabels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lich-ta-datepicker-calendar-weekday", children: label }, label)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lich-ta-datepicker-calendar-grid", children: grid.map((cell, idx) => {
+        let classes = "lich-ta-datepicker-calendar-day";
+        if (cell.isToday) classes += " is-today";
+        if (cell.isSelected) classes += " is-selected";
+        if (!cell.isCurrentMonth) classes += " is-other-month";
+        if (cell.lunar.day === 1) classes += " is-first-lunar";
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: classes,
+            onClick: () => handleDaySelect(cell),
+            tabIndex: cell.isCurrentMonth ? 0 : -1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "solar-day", children: cell.solar.getDate() }),
+              showLunar && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "lunar-day", children: cell.lunar.day === 1 ? `${cell.lunar.day}/${cell.lunar.month}${cell.lunar.isLeap ? "*" : ""}` : cell.lunar.day })
+            ]
+          },
+          idx
+        );
+      }) })
+    ] }) })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Calendar
+  Calendar,
+  DatePicker
 });

package/dist/index.mjs

@@ -1,30 +1,11 @@
 // src/Calendar.tsx
-import React, { useState, useMemo } from "react";
-import { LichTa, getYearDetails } from "@lichta/core";
+import React, { useState, useMemo, useEffect } from "react";
+import { getYearDetails, getCalendarGrid, t } from "@lichta/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var monthNames = [
-  "Th\xE1ng 1",
-  "Th\xE1ng 2",
-  "Th\xE1ng 3",
-  "Th\xE1ng 4",
-  "Th\xE1ng 5",
-  "Th\xE1ng 6",
-  "Th\xE1ng 7",
-  "Th\xE1ng 8",
-  "Th\xE1ng 9",
-  "Th\xE1ng 10",
-  "Th\xE1ng 11",
-  "Th\xE1ng 12"
-];
-var weekDayLabelsByLocale = {
-  vi: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
-  en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  ja: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  ko: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
-};
 var Calendar = ({
   month = (/* @__PURE__ */ new Date()).getMonth() + 1,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
+  selectedDate: selectedDateProp,
   onSelect,
   showLunar = true,
   locale = "vi",
@@ -35,66 +16,20 @@ var Calendar = ({
 }) => {
   const [currentMonth, setCurrentMonth] = useState(month);
   const [currentYear, setCurrentYear] = useState(year);
-  const [selectedDate, setSelectedDate] = useState(null);
+  const [internalSelectedDate, setInternalSelectedDate] = useState(null);
+  const selectedDate = selectedDateProp !== void 0 ? selectedDateProp : internalSelectedDate;
+  useEffect(() => {
+    setCurrentMonth(month);
+  }, [month]);
+  useEffect(() => {
+    setCurrentYear(year);
+  }, [year]);
   const yearInfo = useMemo(() => getYearDetails(currentYear), [currentYear]);
-  const weekDayLabels = weekDayLabelsByLocale[locale];
-  const calendarGrid = useMemo(() => {
-    const grid = [];
-    const firstDay = new Date(currentYear, currentMonth - 1, 1);
-    const lastDay = new Date(currentYear, currentMonth, 0);
-    const startingDayOfWeek = firstDay.getDay();
-    const daysInMonth = lastDay.getDate();
-    const today = /* @__PURE__ */ new Date();
-    const todayStr = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
-    let selStr = "";
-    if (selectedDate) {
-      selStr = `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`;
-    }
-    const prevMonthLastDay = new Date(currentYear, currentMonth - 1, 0).getDate();
-    for (let i = startingDayOfWeek - 1; i >= 0; i--) {
-      const d = prevMonthLastDay - i;
-      const m = currentMonth - 1 < 1 ? 12 : currentMonth - 1;
-      const y = currentMonth - 1 < 1 ? currentYear - 1 : currentYear;
-      const solar = new Date(y, m - 1, d);
-      const lunar = LichTa.toLunar(d, m, y);
-      const dateStr = `${y}-${m}-${d}`;
-      grid.push({
-        solar,
-        lunar,
-        isToday: dateStr === todayStr,
-        isSelected: dateStr === selStr,
-        isCurrentMonth: false
-      });
-    }
-    for (let d = 1; d <= daysInMonth; d++) {
-      const solar = new Date(currentYear, currentMonth - 1, d);
-      const lunar = LichTa.toLunar(d, currentMonth, currentYear);
-      const dateStr = `${currentYear}-${currentMonth}-${d}`;
-      grid.push({
-        solar,
-        lunar,
-        isToday: dateStr === todayStr,
-        isSelected: dateStr === selStr,
-        isCurrentMonth: true
-      });
-    }
-    const remaining = 42 - grid.length;
-    for (let d = 1; d <= remaining; d++) {
-      const m = currentMonth + 1 > 12 ? 1 : currentMonth + 1;
-      const y = currentMonth + 1 > 12 ? currentYear + 1 : currentYear;
-      const solar = new Date(y, m - 1, d);
-      const lunar = LichTa.toLunar(d, m, y);
-      const dateStr = `${y}-${m}-${d}`;
-      grid.push({
-        solar,
-        lunar,
-        isToday: dateStr === todayStr,
-        isSelected: dateStr === selStr,
-        isCurrentMonth: false
-      });
-    }
-    return grid;
-  }, [currentMonth, currentYear, selectedDate]);
+  const { weekDays: weekDayLabels, solarMonthNames: monthNames } = t(locale);
+  const calendarGrid = useMemo(
+    () => getCalendarGrid(currentMonth, currentYear, selectedDate),
+    [currentMonth, currentYear, selectedDate]
+  );
   const prevMonth = () => {
     if (currentMonth === 1) {
       setCurrentMonth(12);
@@ -112,7 +47,9 @@ var Calendar = ({
     }
   };
   const handleDayClick = (cell) => {
-    setSelectedDate(cell.solar);
+    if (selectedDateProp === void 0) {
+      setInternalSelectedDate(cell.solar);
+    }
     if (onSelect) {
       onSelect(cell.solar, cell.lunar);
     }
@@ -168,6 +105,161 @@ var Calendar = ({
     children && /* @__PURE__ */ jsx("div", { className: "lich-ta-calendar-footer", children })
   ] });
 };
+
+// src/DatePicker.tsx
+import { useState as useState2, useRef, useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { getYearDetails as getYearDetails2, getCalendarGrid as getCalendarGrid2, t as t2 } from "@lichta/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function defaultFormat(date) {
+  const dd = String(date.getDate()).padStart(2, "0");
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  return `${dd}/${mm}/${date.getFullYear()}`;
+}
+var DatePicker = ({
+  value = null,
+  onSelect,
+  placeholder = "Ch\u1ECDn ng\xE0y",
+  locale = "vi",
+  theme = "classic",
+  showLunar = true,
+  format = defaultFormat,
+  disabled = false,
+  className = ""
+}) => {
+  const [selected, setSelected] = useState2(value);
+  const [isOpen, setIsOpen] = useState2(false);
+  const anchor = selected ?? /* @__PURE__ */ new Date();
+  const [viewMonth, setViewMonth] = useState2(anchor.getMonth() + 1);
+  const [viewYear, setViewYear] = useState2(anchor.getFullYear());
+  const rootRef = useRef(null);
+  useEffect2(() => {
+    const next = value ?? null;
+    setSelected(next);
+    if (next) {
+      setViewMonth(next.getMonth() + 1);
+      setViewYear(next.getFullYear());
+    }
+  }, [value]);
+  useEffect2(() => {
+    if (!isOpen) return;
+    function handlePointerDown(event) {
+      if (rootRef.current && !rootRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    function handleKeydown(event) {
+      if (event.key === "Escape") setIsOpen(false);
+    }
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeydown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [isOpen]);
+  const yearInfo = useMemo2(() => getYearDetails2(viewYear), [viewYear]);
+  const { weekDays: weekDayLabels, solarMonthNames: monthNames } = t2(locale);
+  const grid = useMemo2(
+    () => getCalendarGrid2(viewMonth, viewYear, selected),
+    [viewMonth, viewYear, selected]
+  );
+  function prevMonth() {
+    if (viewMonth === 1) {
+      setViewMonth(12);
+      setViewYear((y) => y - 1);
+    } else {
+      setViewMonth((m) => m - 1);
+    }
+  }
+  function nextMonth() {
+    if (viewMonth === 12) {
+      setViewMonth(1);
+      setViewYear((y) => y + 1);
+    } else {
+      setViewMonth((m) => m + 1);
+    }
+  }
+  function handleDaySelect(cell) {
+    setSelected(cell.solar);
+    setIsOpen(false);
+    onSelect?.(cell.solar, cell.lunar);
+  }
+  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, className: `lich-ta-datepicker lichta-theme-${theme} ${className}`, children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        className: "lich-ta-datepicker-input",
+        readOnly: true,
+        disabled,
+        placeholder,
+        value: selected ? format(selected) : "",
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        onClick: () => !disabled && setIsOpen((open) => !open)
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx2("div", { className: "lich-ta-datepicker-popover", role: "dialog", children: /* @__PURE__ */ jsxs2("div", { className: "lich-ta-datepicker-calendar", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "lich-ta-datepicker-calendar-header", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "lich-ta-datepicker-calendar-nav",
+            onClick: prevMonth,
+            "aria-label": "Th\xE1ng tr\u01B0\u1EDBc",
+            children: "\u25C0"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "lich-ta-datepicker-calendar-title", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "lich-ta-datepicker-calendar-month-year", children: [
+            monthNames[viewMonth - 1],
+            ", ",
+            viewYear
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { className: "lich-ta-datepicker-calendar-canchi", children: [
+            yearInfo.can,
+            " ",
+            yearInfo.chi
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "lich-ta-datepicker-calendar-nav",
+            onClick: nextMonth,
+            "aria-label": "Th\xE1ng sau",
+            children: "\u25B6"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "lich-ta-datepicker-calendar-weekdays", children: weekDayLabels.map((label) => /* @__PURE__ */ jsx2("div", { className: "lich-ta-datepicker-calendar-weekday", children: label }, label)) }),
+      /* @__PURE__ */ jsx2("div", { className: "lich-ta-datepicker-calendar-grid", children: grid.map((cell, idx) => {
+        let classes = "lich-ta-datepicker-calendar-day";
+        if (cell.isToday) classes += " is-today";
+        if (cell.isSelected) classes += " is-selected";
+        if (!cell.isCurrentMonth) classes += " is-other-month";
+        if (cell.lunar.day === 1) classes += " is-first-lunar";
+        return /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            className: classes,
+            onClick: () => handleDaySelect(cell),
+            tabIndex: cell.isCurrentMonth ? 0 : -1,
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "solar-day", children: cell.solar.getDate() }),
+              showLunar && /* @__PURE__ */ jsx2("span", { className: "lunar-day", children: cell.lunar.day === 1 ? `${cell.lunar.day}/${cell.lunar.month}${cell.lunar.isLeap ? "*" : ""}` : cell.lunar.day })
+            ]
+          },
+          idx
+        );
+      }) })
+    ] }) })
+  ] });
+};
 export {
-  Calendar
+  Calendar,
+  DatePicker
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lichta/react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React components for LichTa",
   "author": "Zeforc Labs | Stridev",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@lichta/core": "2.0.1"
+    "@lichta/core": "2.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",