@lichta/svelte 2.0.1 → 2.2.0

package/README.md

@@ -1,9 +1,14 @@
 # @lichta/svelte
 
-[![npm version](https://img.shields.io/npm/v/@lichta/svelte.svg)](https://www.npmjs.com/package/@lichta/svelte)
+[![@lichta/svelte](https://img.shields.io/npm/v/@lichta/svelte.svg?label=%40lichta%2Fsvelte)](https://www.npmjs.com/package/@lichta/svelte)
+[![@lichta/core](https://img.shields.io/npm/v/@lichta/core.svg?label=%40lichta%2Fcore)](https://www.npmjs.com/package/@lichta/core)
+
+🚀 **[Demo trực tiếp](https://lichta.zeneo.app/)**
 
 Component `Calendar`/`Formatter` (lịch tháng có ngày âm lịch) cho Svelte 5, đóng gói trên [`@lichta/core`](https://www.npmjs.com/package/@lichta/core).
 
+Package này gồm 3 component: `Calendar` (lịch tháng), `Formatter` (hiển thị ngày âm cho 1 ngày cụ thể), `DatePicker` (input + popover chọn ngày, dựng trên `Calendar`).
+
 Khác với `@lichta/react`/`@lichta/vue`, package này **re-export toàn bộ API của `@lichta/core`** (`LichTa`, `getYearDetails`, `formatTraditional`, `t`, ...) — bạn không cần cài `@lichta/core` riêng, chỉ cần import thẳng từ `@lichta/svelte`.
 
 ## Cài đặt
@@ -58,8 +63,11 @@ Bạn cần cài `svelte` (peer dependency, `^5.0.0`) nếu dự án chưa có.
 | `selectedDate` | `Date \| null`                           | `null`         | Ngày được chọn (controlled)       |
 | `showLunar`    | `boolean`                                | `true`         | Hiện ngày âm lịch dưới ngày dương |
 | `locale`       | `'vi' \| 'en' \| 'ja' \| 'ko'`           | `'vi'`         | Ngôn ngữ nhãn thứ trong tuần      |
+| `firstDayOfWeek` | `0 \| 1`                                | `0`            | Ngày bắt đầu tuần: `0` = Chủ Nhật, `1` = Thứ Hai |
+| `showWeekNumber` | `boolean`                               | `false`        | Hiện số tuần (ISO-8601) ở đầu mỗi hàng |
 | `theme`        | `'classic' \| 'glass'`                   | `'classic'`    | Giao diện lịch                    |
 | `onSelect`     | `(date: Date, lunar: LunarDate) => void` | —              | Callback khi chọn ngày            |
+| `onMonthChange` | `(month: number, year: number) => void` | —             | Callback khi điều hướng tháng qua nút prev/next trong header |
 | `dayCell`      | `Snippet<[DayCellData]>`                 | —              | Custom snippet cho mỗi ô ngày     |
 | `children`     | `Snippet`                                | —              | Nội dung footer tùy chỉnh         |
 
@@ -70,6 +78,37 @@ Bạn cần cài `svelte` (peer dependency, `^5.0.0`) nếu dự án chưa có.
 | `date`     | `Date`    | `new Date()` | Ngày dương lịch cần hiển thị     |
 | `children` | `Snippet` | —            | Nội dung tùy chỉnh (render prop) |
 
+### `DatePicker`
+
+```svelte
+<script>
+	import { DatePicker } from '@lichta/svelte';
+	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)
+</script>
+
+<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.
+
+| 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                                    |
+| `onMonthChange` | `(month: number, year: number) => void` | —          | Callback khi điều hướng tháng qua nút prev/next 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                                         |
+| `firstDayOfWeek` | `0 \| 1`                             | `0`            | Ngày bắt đầu tuần: `0` = Chủ Nhật, `1` = Thứ Hai                        |
+| `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                                                       |
+
+Popover tự đóng khi: chọn xong 1 ngày, click ra ngoài, hoặc nhấn phím `Escape`.
+
 ## Dùng logic thuần (không cần component)
 
 Vì `@lichta/svelte` re-export toàn bộ `@lichta/core`, bạn có thể import thẳng logic tính toán từ đây thay vì cài thêm `@lichta/core`:

package/dist/components/Calendar.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
-	import { LichTa, getYearDetails } from '@lichta/core';
-	import type { LunarDate } from '@lichta/core';
+	import { getYearDetails, getCalendarGrid, getWeekDayLabels, t } from '@lichta/core';
+	import type { LunarDate, CalendarDayCell } from '@lichta/core';
 	import type { Snippet } from 'svelte';
 	import { untrack } from 'svelte';
 
-	import type { Locale } from '@lichta/core';
+	import type { Locale, FirstDayOfWeek } from '@lichta/core';
 
 	/**
 	 * Dữ liệu cho mỗi ô ngày trong lưới lịch
 	 */
-	interface DayCellData {
-		solar: Date;
-		lunar: LunarDate;
-		isToday: boolean;
-		isSelected: boolean;
-		isCurrentMonth: boolean;
-	}
+	type DayCellData = CalendarDayCell;
 
 	interface Props {
 		/** Tháng hiển thị (1-12). Mặc định: tháng hiện tại */
@@ -26,10 +20,16 @@
 		selectedDate?: Date | null;
 		/** Callback khi chọn ngày */
 		onSelect?: (date: Date, lunar: LunarDate) => void;
+		/** Callback khi user điều hướng tháng qua nút prev/next trong header */
+		onMonthChange?: (month: number, year: number) => void;
 		/** Hiển thị ngày âm lịch bên dưới ngày dương */
 		showLunar?: boolean;
 		/** Locale (vi | en | ja | ko) */
 		locale?: Locale;
+		/** Ngày bắt đầu tuần: 0 = Chủ Nhật (mặc định), 1 = Thứ Hai */
+		firstDayOfWeek?: FirstDayOfWeek;
+		/** Hiển thị số tuần (ISO-8601) ở đầu mỗi hàng */
+		showWeekNumber?: boolean;
 		/** Custom snippet cho mỗi ô ngày */
 		dayCell?: Snippet<[DayCellData]>;
 		children?: Snippet;
@@ -42,8 +42,11 @@
 		year = new Date().getFullYear(),
 		selectedDate = null,
 		onSelect,
+		onMonthChange,
 		showLunar = true,
 		locale = 'vi',
+		firstDayOfWeek = 0,
+		showWeekNumber = false,
 		dayCell,
 		children,
 		theme = 'classic'
@@ -66,127 +69,32 @@
 	});
 
 	// Tên thứ trong tuần
-	const weekDayLabels = $derived(
-		locale === 'vi'
-			? ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']
-			: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-	);
+	const weekDayLabels = $derived(getWeekDayLabels(locale, firstDayOfWeek));
 
-	// Tên tháng hiển thị
-	const monthNames = [
-		'Tháng 1',
-		'Tháng 2',
-		'Tháng 3',
-		'Tháng 4',
-		'Tháng 5',
-		'Tháng 6',
-		'Tháng 7',
-		'Tháng 8',
-		'Tháng 9',
-		'Tháng 10',
-		'Tháng 11',
-		'Tháng 12'
-	];
+	// Tên tháng dương lịch cho phần header điều hướng
+	const monthNames = $derived(t(locale).solarMonthNames);
 
 	// Can Chi năm hiển thị
 	let yearInfo = $derived(getYearDetails(currentYear));
 
-	// Ngày hôm nay
-	const today = new Date();
-	const todayStr = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
-
 	// Tính grid lịch 6x7 = 42 ô
-	let calendarGrid = $derived.by((): DayCellData[] => {
-		const grid: DayCellData[] = [];
-
-		// Ngày đầu tiên của tháng
-		const firstDay = new Date(currentYear, currentMonth - 1, 1);
-		// Thứ của ngày đầu tiên (0=CN, 1=T2, ...)
-		const startDayOfWeek = firstDay.getDay();
-		// Số ngày trong tháng
-		const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
-
-		// Padding ngày tháng trước
-		const prevMonthDays = new Date(currentYear, currentMonth - 1, 0).getDate();
-		for (let i = startDayOfWeek - 1; i >= 0; i--) {
-			const d = prevMonthDays - i;
-			const m = currentMonth - 1 <= 0 ? 12 : currentMonth - 1;
-			const y = currentMonth - 1 <= 0 ? currentYear - 1 : currentYear;
-			const solar = new Date(y, m - 1, d);
-			const lunar = LichTa.toLunar(d, m, y);
-			const dateStr = `${y}-${m}-${d}`;
-			const selStr = selectedDate
-				? `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`
-				: '';
-
-			grid.push({
-				solar,
-				lunar,
-				isToday: dateStr === todayStr,
-				isSelected: dateStr === selStr,
-				isCurrentMonth: false
-			});
-		}
-
-		// Ngày trong tháng hiện tại
-		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}`;
-			const selStr = selectedDate
-				? `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`
-				: '';
-
-			grid.push({
-				solar,
-				lunar,
-				isToday: dateStr === todayStr,
-				isSelected: dateStr === selStr,
-				isCurrentMonth: true
-			});
-		}
-
-		// Padding ngày tháng sau
-		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}`;
-			const selStr = selectedDate
-				? `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`
-				: '';
-
-			grid.push({
-				solar,
-				lunar,
-				isToday: dateStr === todayStr,
-				isSelected: dateStr === selStr,
-				isCurrentMonth: false
-			});
-		}
-
-		return grid;
-	});
+	let calendarGrid = $derived(getCalendarGrid(currentMonth, currentYear, selectedDate, firstDayOfWeek));
 
 	// Navigation
 	function prevMonth() {
-		if (currentMonth === 1) {
-			currentMonth = 12;
-			currentYear -= 1;
-		} else {
-			currentMonth -= 1;
-		}
+		const newMonth = currentMonth === 1 ? 12 : currentMonth - 1;
+		const newYear = currentMonth === 1 ? currentYear - 1 : currentYear;
+		currentMonth = newMonth;
+		currentYear = newYear;
+		onMonthChange?.(newMonth, newYear);
 	}
 
 	function nextMonth() {
-		if (currentMonth === 12) {
-			currentMonth = 1;
-			currentYear += 1;
-		} else {
-			currentMonth += 1;
-		}
+		const newMonth = currentMonth === 12 ? 1 : currentMonth + 1;
+		const newYear = currentMonth === 12 ? currentYear + 1 : currentYear;
+		currentMonth = newMonth;
+		currentYear = newYear;
+		onMonthChange?.(newMonth, newYear);
 	}
 
 	function handleDayClick(cell: DayCellData) {
@@ -201,7 +109,7 @@
 	}
 </script>
 
-<div class={['lich-ta-calendar', `lichta-theme-${theme}`].join(' ')}>
+<div class={['lich-ta-calendar', `lichta-theme-${theme}`, showWeekNumber ? 'lich-ta-calendar--with-week-number' : ''].filter(Boolean).join(' ')}>
 	<!-- Header: Navigation + Tháng/Năm -->
 	<div class="lich-ta-calendar-header">
 		<button class="lich-ta-calendar-nav" onclick={prevMonth} aria-label="Tháng trước">◀</button>
@@ -219,6 +127,9 @@
 
 	<!-- Tên thứ -->
 	<div class="lich-ta-calendar-weekdays">
+		{#if showWeekNumber}
+			<div class="lich-ta-calendar-week-number" aria-hidden="true"></div>
+		{/if}
 		{#each weekDayLabels as label (label)}
 			<div class="lich-ta-calendar-weekday">{label}</div>
 		{/each}
@@ -226,7 +137,10 @@
 
 	<!-- Grid ngày -->
 	<div class="lich-ta-calendar-grid">
-		{#each calendarGrid as cell (cell.solar.getTime())}
+		{#each calendarGrid as cell, idx (cell.solar.getTime())}
+			{#if showWeekNumber && idx % 7 === 0}
+				<div class="lich-ta-calendar-week-number">{cell.weekNumber}</div>
+			{/if}
 			{#if dayCell}
 				{@render dayCell(cell)}
 			{:else}
@@ -262,202 +176,3 @@
 		</div>
 	{/if}
 </div>
-
-<style>
-	.lich-ta-calendar {
-		--lichta-primary: #d4a373;
-		--lichta-primary-light: #f5e6d3;
-		--lichta-bg: #fffcf7;
-		--lichta-surface: #ffffff;
-		--lichta-text: #2c1810;
-		--lichta-text-muted: #8b7355;
-		--lichta-text-dim: #c4b5a0;
-		--lichta-border: #e8ddd0;
-		--lichta-today-bg: #d4a373;
-		--lichta-today-text: #ffffff;
-		--lichta-selected-bg: #a0522d;
-		--lichta-selected-text: #ffffff;
-		--lichta-hover-bg: #f5e6d3;
-		--lichta-lunar-text: #b08968;
-		--lichta-first-lunar: #c2185b;
-		--lichta-radius: 8px;
-		--lichta-font: inherit;
-
-		font-family: var(--lichta-font);
-		background: var(--lichta-bg);
-		border: 1px solid var(--lichta-border);
-		border-radius: calc(var(--lichta-radius) * 2);
-		padding: 16px;
-		max-width: 420px;
-		width: 100%;
-		box-sizing: border-box;
-		user-select: none;
-	}
-
-	/* Header */
-	.lich-ta-calendar-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 16px;
-	}
-
-	.lich-ta-calendar-nav {
-		background: none;
-		border: 1px solid var(--lichta-border);
-		border-radius: var(--lichta-radius);
-		width: 36px;
-		height: 36px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		color: var(--lichta-text);
-		font-size: 0.85rem;
-		transition: all 0.15s ease;
-	}
-
-	.lich-ta-calendar-nav:hover {
-		background: var(--lichta-hover-bg);
-		border-color: var(--lichta-primary);
-	}
-
-	.lich-ta-calendar-title {
-		text-align: center;
-	}
-
-	.lich-ta-calendar-month-year {
-		display: block;
-		font-size: 1.1rem;
-		font-weight: 600;
-		color: var(--lichta-text);
-	}
-
-	.lich-ta-calendar-canchi {
-		display: block;
-		font-size: 0.8rem;
-		color: var(--lichta-text-muted);
-		margin-top: 2px;
-	}
-
-	/* Weekdays */
-	.lich-ta-calendar-weekdays {
-		display: grid;
-		grid-template-columns: repeat(7, 1fr);
-		margin-bottom: 4px;
-	}
-
-	.lich-ta-calendar-weekday {
-		text-align: center;
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: var(--lichta-text-muted);
-		padding: 6px 0;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	/* Grid */
-	.lich-ta-calendar-grid {
-		display: grid;
-		grid-template-columns: repeat(7, 1fr);
-		gap: 2px;
-	}
-
-	.lich-ta-calendar-day {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 6px 2px;
-		min-height: 48px;
-		border: none;
-		border-radius: var(--lichta-radius);
-		background: transparent;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		font-family: inherit;
-	}
-
-	.lich-ta-calendar-day:hover {
-		background: var(--lichta-hover-bg);
-	}
-
-	.lich-ta-calendar-day:focus-visible {
-		outline: 2px solid var(--lichta-primary);
-		outline-offset: 1px;
-	}
-
-	.solar-day {
-		font-size: 0.95rem;
-		font-weight: 500;
-		color: var(--lichta-text);
-		line-height: 1.2;
-	}
-
-	.lunar-day {
-		font-size: 0.65rem;
-		color: var(--lichta-lunar-text);
-		line-height: 1.2;
-		margin-top: 1px;
-	}
-
-	/* States */
-	.is-other-month .solar-day {
-		color: var(--lichta-text-dim);
-	}
-
-	.is-other-month .lunar-day {
-		color: var(--lichta-text-dim);
-	}
-
-	.is-today {
-		background: var(--lichta-today-bg);
-	}
-
-	.is-today .solar-day {
-		color: var(--lichta-today-text);
-		font-weight: 700;
-	}
-
-	.is-today .lunar-day {
-		color: var(--lichta-today-text);
-		opacity: 0.85;
-	}
-
-	.is-today:hover {
-		background: var(--lichta-today-bg);
-		opacity: 0.9;
-	}
-
-	.is-selected {
-		background: var(--lichta-selected-bg);
-	}
-
-	.is-selected .solar-day {
-		color: var(--lichta-selected-text);
-		font-weight: 700;
-	}
-
-	.is-selected .lunar-day {
-		color: var(--lichta-selected-text);
-		opacity: 0.85;
-	}
-
-	.is-first-lunar .lunar-day {
-		color: var(--lichta-first-lunar);
-		font-weight: 600;
-	}
-
-	.is-today.is-first-lunar .lunar-day,
-	.is-selected.is-first-lunar .lunar-day {
-		color: var(--lichta-today-text);
-	}
-
-	/* Footer */
-	.lich-ta-calendar-footer {
-		margin-top: 12px;
-		padding-top: 12px;
-		border-top: 1px solid var(--lichta-border);
-	}
-</style>

package/dist/components/Calendar.svelte.d.ts

@@ -1,16 +1,10 @@
-import type { LunarDate } from '@lichta/core';
+import type { LunarDate, CalendarDayCell } from '@lichta/core';
 import type { Snippet } from 'svelte';
-import type { Locale } from '@lichta/core';
+import type { Locale, FirstDayOfWeek } from '@lichta/core';
 /**
  * Dữ liệu cho mỗi ô ngày trong lưới lịch
  */
-interface DayCellData {
-    solar: Date;
-    lunar: LunarDate;
-    isToday: boolean;
-    isSelected: boolean;
-    isCurrentMonth: boolean;
-}
+type DayCellData = CalendarDayCell;
 interface Props {
     /** Tháng hiển thị (1-12). Mặc định: tháng hiện tại */
     month?: number;
@@ -20,10 +14,16 @@ interface Props {
     selectedDate?: Date | null;
     /** Callback khi chọn ngày */
     onSelect?: (date: Date, lunar: LunarDate) => void;
+    /** Callback khi user điều hướng tháng qua nút prev/next trong header */
+    onMonthChange?: (month: number, year: number) => void;
     /** Hiển thị ngày âm lịch bên dưới ngày dương */
     showLunar?: boolean;
     /** Locale (vi | en | ja | ko) */
     locale?: Locale;
+    /** Ngày bắt đầu tuần: 0 = Chủ Nhật (mặc định), 1 = Thứ Hai */
+    firstDayOfWeek?: FirstDayOfWeek;
+    /** Hiển thị số tuần (ISO-8601) ở đầu mỗi hàng */
+    showWeekNumber?: boolean;
     /** Custom snippet cho mỗi ô ngày */
     dayCell?: Snippet<[DayCellData]>;
     children?: Snippet;

package/dist/components/DatePicker.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { getYearDetails, getCalendarGrid, getWeekDayLabels, t } from '@lichta/core';
+	import type { LunarDate, Locale, CalendarDayCell, FirstDayOfWeek } from '@lichta/core';
+
+	interface Props {
+		/** 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;
+		/** Callback khi user điều hướng tháng qua nút prev/next trong popover */
+		onMonthChange?: (month: number, year: number) => void;
+		placeholder?: string;
+		locale?: Locale;
+		/** Ngày bắt đầu tuần: 0 = Chủ Nhật (mặc định), 1 = Thứ Hai */
+		firstDayOfWeek?: FirstDayOfWeek;
+		theme?: 'classic' | 'glass';
+		showLunar?: boolean;
+		format?: (date: Date) => string;
+		disabled?: boolean;
+	}
+
+	function defaultFormat(date: Date): string {
+		const dd = String(date.getDate()).padStart(2, '0');
+		const mm = String(date.getMonth() + 1).padStart(2, '0');
+		return `${dd}/${mm}/${date.getFullYear()}`;
+	}
+
+	let {
+		value = null,
+		onSelect,
+		onMonthChange,
+		placeholder = 'Chọn ngày',
+		locale = 'vi',
+		firstDayOfWeek = 0,
+		theme = 'classic',
+		showLunar = true,
+		format = defaultFormat,
+		disabled = false
+	}: Props = $props();
+
+	// Writable $derived (Svelte 5): mặc định bám theo prop `value`, nhưng có thể
+	// gán lại trực tiếp (xem handleDaySelect) — giá trị gán tay giữ nguyên cho tới
+	// khi `value` đổi thì tính lại từ đầu.
+	let selected = $derived<Date | null>(value ?? null);
+	let isOpen = $state(false);
+	let rootEl: HTMLElement | undefined = $state();
+
+	// State điều hướng tháng/năm hiển thị trong popover, tách khỏi `selected` để
+	// prevMonth()/nextMonth() điều hướng được độc lập (không phụ thuộc ngày đã chọn).
+	const initialAnchor = value ?? new Date();
+	let viewMonth = $state(initialAnchor.getMonth() + 1);
+	let viewYear = $state(initialAnchor.getFullYear());
+
+	// Đồng bộ lại view khi component cha đổi prop `value` từ bên ngoài.
+	$effect(() => {
+		if (value) {
+			viewMonth = value.getMonth() + 1;
+			viewYear = value.getFullYear();
+		}
+	});
+
+	const weekDayLabels = $derived(getWeekDayLabels(locale, firstDayOfWeek));
+	const monthNames = $derived(t(locale).solarMonthNames);
+	let yearInfo = $derived(getYearDetails(viewYear));
+	let grid = $derived(getCalendarGrid(viewMonth, viewYear, selected, firstDayOfWeek));
+	const displayValue = $derived(selected ? format(selected) : '');
+
+	function toggleOpen() {
+		if (!disabled) isOpen = !isOpen;
+	}
+
+	function prevMonth() {
+		const newMonth = viewMonth === 1 ? 12 : viewMonth - 1;
+		const newYear = viewMonth === 1 ? viewYear - 1 : viewYear;
+		viewMonth = newMonth;
+		viewYear = newYear;
+		onMonthChange?.(newMonth, newYear);
+	}
+
+	function nextMonth() {
+		const newMonth = viewMonth === 12 ? 1 : viewMonth + 1;
+		const newYear = viewMonth === 12 ? viewYear + 1 : viewYear;
+		viewMonth = newMonth;
+		viewYear = newYear;
+		onMonthChange?.(newMonth, newYear);
+	}
+
+	function handleDaySelect(cell: CalendarDayCell) {
+		selected = cell.solar;
+		isOpen = false;
+		onSelect?.(cell.solar, cell.lunar);
+	}
+
+	function handlePointerDown(event: MouseEvent) {
+		if (rootEl && !rootEl.contains(event.target as Node)) {
+			isOpen = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') isOpen = false;
+	}
+
+	$effect(() => {
+		if (!isOpen) return;
+		document.addEventListener('mousedown', handlePointerDown);
+		document.addEventListener('keydown', handleKeydown);
+		return () => {
+			document.removeEventListener('mousedown', handlePointerDown);
+			document.removeEventListener('keydown', handleKeydown);
+		};
+	});
+</script>
+
+<div bind:this={rootEl} class={['lich-ta-datepicker', `lichta-theme-${theme}`].join(' ')}>
+	<input
+		type="text"
+		class="lich-ta-datepicker-input"
+		readonly
+		{disabled}
+		{placeholder}
+		value={displayValue}
+		aria-haspopup="dialog"
+		aria-expanded={isOpen}
+		onclick={toggleOpen}
+	/>
+	{#if isOpen}
+		<div class="lich-ta-datepicker-popover" role="dialog">
+			<div class="lich-ta-datepicker-calendar">
+				<div class="lich-ta-datepicker-calendar-header">
+					<button
+						type="button"
+						class="lich-ta-datepicker-calendar-nav"
+						onclick={prevMonth}
+						aria-label="Tháng trước">◀</button
+					>
+					<div class="lich-ta-datepicker-calendar-title">
+						<span class="lich-ta-datepicker-calendar-month-year">
+							{monthNames[viewMonth - 1]}, {viewYear}
+						</span>
+						<span class="lich-ta-datepicker-calendar-canchi">
+							{yearInfo.can}
+							{yearInfo.chi}
+						</span>
+					</div>
+					<button
+						type="button"
+						class="lich-ta-datepicker-calendar-nav"
+						onclick={nextMonth}
+						aria-label="Tháng sau">▶</button
+					>
+				</div>
+
+				<div class="lich-ta-datepicker-calendar-weekdays">
+					{#each weekDayLabels as label (label)}
+						<div class="lich-ta-datepicker-calendar-weekday">{label}</div>
+					{/each}
+				</div>
+
+				<div class="lich-ta-datepicker-calendar-grid">
+					{#each grid as cell (cell.solar.getTime())}
+						<button
+							type="button"
+							class="lich-ta-datepicker-calendar-day"
+							class:is-today={cell.isToday}
+							class:is-selected={cell.isSelected}
+							class:is-other-month={!cell.isCurrentMonth}
+							class:is-first-lunar={cell.lunar.day === 1}
+							tabindex={cell.isCurrentMonth ? 0 : -1}
+							onclick={() => handleDaySelect(cell)}
+						>
+							<span class="solar-day">{cell.solar.getDate()}</span>
+							{#if showLunar}
+								<span class="lunar-day">
+									{#if cell.lunar.day === 1}
+										{cell.lunar.day}/{cell.lunar.month}{cell.lunar.isLeap ? '*' : ''}
+									{:else}
+										{cell.lunar.day}
+									{/if}
+								</span>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/components/DatePicker.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { LunarDate, Locale, FirstDayOfWeek } from '@lichta/core';
+interface Props {
+    /** 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;
+    /** Callback khi user điều hướng tháng qua nút prev/next trong popover */
+    onMonthChange?: (month: number, year: number) => void;
+    placeholder?: string;
+    locale?: Locale;
+    /** Ngày bắt đầu tuần: 0 = Chủ Nhật (mặc định), 1 = Thứ Hai */
+    firstDayOfWeek?: FirstDayOfWeek;
+    theme?: 'classic' | 'glass';
+    showLunar?: boolean;
+    format?: (date: Date) => string;
+    disabled?: boolean;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { LichTa, jdFromDate, jdToDate, getYearDetails, getDayCanChi, getMonthCanChi, getHourCanChi, getAuspiciousHours, formatLunarDate, formatTraditional, getMonthName, getDayName, t, getZodiacAnimal } from '@lichta/core';
-export type { LunarDate, SolarDate, Locale } from '@lichta/core';
+export { LichTa, jdFromDate, jdToDate, getYearDetails, getDayCanChi, getMonthCanChi, getHourCanChi, getAuspiciousHours, formatLunarDate, formatTraditional, getMonthName, getDayName, getCalendarGrid, getISOWeekNumber, t, getZodiacAnimal } from '@lichta/core';
+export type { LunarDate, SolarDate, Locale, CalendarDayCell, FirstDayOfWeek } from '@lichta/core';
 export { default as Formatter } from './components/Formatter.svelte';
 export { default as Calendar } from './components/Calendar.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';

package/dist/index.js

@@ -2,7 +2,8 @@
 // Lichta Svelte — Public API (Root Entry Point)
 // ============================================================
 // Re-export phần lõi từ @lichta/core
-export { LichTa, jdFromDate, jdToDate, getYearDetails, getDayCanChi, getMonthCanChi, getHourCanChi, getAuspiciousHours, formatLunarDate, formatTraditional, getMonthName, getDayName, t, getZodiacAnimal } from '@lichta/core';
+export { LichTa, jdFromDate, jdToDate, getYearDetails, getDayCanChi, getMonthCanChi, getHourCanChi, getAuspiciousHours, formatLunarDate, formatTraditional, getMonthName, getDayName, getCalendarGrid, getISOWeekNumber, t, getZodiacAnimal } from '@lichta/core';
 // Xuất bản phần Svelte Component
 export { default as Formatter } from './components/Formatter.svelte';
 export { default as Calendar } from './components/Calendar.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lichta/svelte",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Svelte components for LichTa",
   "author": "Zeforc Labs | Stridev",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "vite": "^8.0.16"
   },
   "dependencies": {
-    "@lichta/core": "2.0.1"
+    "@lichta/core": "2.2.0"
   },
   "repository": {
     "type": "git",