lll-date-picker 1.0.0

package/README.md

@@ -0,0 +1,176 @@
+# LLLDatePicker
+
+A modern, customizable date picker library for React with Lao language support. Built with React, TypeScript, TailwindCSS, and shadcn/ui.
+
+## Features
+
+- ✅ **Lao Language Support** - All preset buttons and labels in Lao
+- ✅ **Manual Date Input** - Separate day/month/year input fields
+- ✅ **8 Preset Date Ranges** - Quick selection for common date ranges
+- ✅ **Customizable Styling** - Full control via className props
+- ✅ **TypeScript Support** - Complete type definitions included
+- ✅ **Modern UI** - Built with shadcn/ui components
+- ✅ **Lightweight** - Minimal dependencies
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm install lll-date-picker
+
+# Using npm
+npm install lll-date-picker
+
+# Using yarn
+yarn add lll-date-picker
+```
+
+## Quick Start
+
+```tsx
+import { LLLDatePicker } from 'lll-date-picker';
+import 'lll-date-picker/styles.css';
+
+function App() {
+  const handleDateChange = (startDate: Date | null, endDate: Date | null) => {
+    console.log('Selected dates:', { startDate, endDate });
+  };
+
+  return (
+    <LLLDatePicker
+      onDateChange={handleDateChange}
+      placeholder="ເລືອກວັນທີ"
+    />
+  );
+}
+```
+
+## Props API
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `startDate` | `Date \| undefined` | `undefined` | Initial start date |
+| `endDate` | `Date \| undefined` | `undefined` | Initial end date |
+| `onDateChange` | `(startDate: Date \| null, endDate: Date \| null) => void` | `undefined` | Callback when dates change |
+| `className` | `string` | `undefined` | Custom CSS classes for root container |
+| `buttonClassName` | `string` | `undefined` | Custom CSS classes for trigger button |
+| `dropdownClassName` | `string` | `undefined` | Custom CSS classes for dropdown card |
+| `disabled` | `boolean` | `false` | Disable the date picker |
+| `placeholder` | `string` | `'ເລືອກວັນທີ'` | Placeholder text for button |
+
+## Preset Date Ranges
+
+The date picker includes 8 preset options in Lao:
+
+| Preset | Lao | Description |
+|--------|-----|-------------|
+| Today | ມື້ນີ້ | Current day |
+| Yesterday | ມື້ວານ | Previous day |
+| Last Week | ອາທິດກ່ອນ | 7 days ago to yesterday |
+| This Week | ອາທິດນີ້ | Monday to today |
+| Last Month | ເດືອນກ່ອນ | First to last day of previous month |
+| This Month | ເດືອນນີ້ | First day of month to today |
+| Last Year | ປີກ່ອນ | Jan 1 to Dec 31 of previous year |
+| This Year | ປີນີ້ | Jan 1 to today |
+
+## Examples
+
+### With Initial Values
+
+```tsx
+<LLLDatePicker
+  startDate={new Date('2024-01-01')}
+  endDate={new Date('2024-12-31')}
+  onDateChange={handleDateChange}
+/>
+```
+
+### Custom Styling
+
+```tsx
+<LLLDatePicker
+  buttonClassName="bg-blue-500 text-white hover:bg-blue-600"
+  dropdownClassName="shadow-2xl"
+  onDateChange={handleDateChange}
+/>
+```
+
+### Controlled Component
+
+```tsx
+function ControlledExample() {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  return (
+    <LLLDatePicker
+      startDate={startDate || undefined}
+      endDate={endDate || undefined}
+      onDateChange={(start, end) => {
+        setStartDate(start);
+        setEndDate(end);
+      }}
+    />
+  );
+}
+```
+
+## Utility Functions
+
+The library also exports utility functions for advanced usage:
+
+```tsx
+import {
+  getToday,
+  getYesterday,
+  getLastWeek,
+  getThisWeek,
+  getLastMonth,
+  getThisMonth,
+  getLastYear,
+  getThisYear,
+  formatDate,
+  parseDate,
+  isValidDate,
+  createDate,
+  extractDateParts,
+} from 'lll-date-picker';
+
+// Example: Get today's date range
+const today = getToday();
+console.log(today); // { startDate: Date, endDate: Date }
+
+// Example: Format a date
+const formatted = formatDate(new Date()); // "05/02/2026"
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run development server
+pnpm dev
+
+# Build library
+pnpm build
+```
+
+## Tech Stack
+
+- **React** - UI library
+- **TypeScript** - Type safety
+- **TailwindCSS** - Styling
+- **shadcn/ui** - UI components
+- **date-fns** - Date utilities
+- **Vite** - Build tool
+- **pnpm** - Package manager
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/components/LLLDatePicker/DateInputs.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+interface DateInputsProps {
+    startDate: Date | null;
+    endDate: Date | null;
+    onStartDateChange: (date: Date | null) => void;
+    onEndDateChange: (date: Date | null) => void;
+    className?: string;
+}
+export declare const DateInputs: React.FC<DateInputsProps>;
+export {};
+//# sourceMappingURL=DateInputs.d.ts.map

package/dist/components/LLLDatePicker/DateInputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputs.d.ts","sourceRoot":"","sources":["../../../src/components/LLLDatePicker/DateInputs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,eAAe;IACrB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0DhD,CAAC"}

package/dist/components/LLLDatePicker/PresetButtons.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { DateRange } from './types';
+
+interface PresetButtonsProps {
+    onPresetSelect: (range: DateRange) => void;
+    startDate: Date | null;
+    endDate: Date | null;
+    className?: string;
+}
+export declare const PresetButtons: React.FC<PresetButtonsProps>;
+export {};
+//# sourceMappingURL=PresetButtons.d.ts.map

package/dist/components/LLLDatePicker/PresetButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetButtons.d.ts","sourceRoot":"","sources":["../../../src/components/LLLDatePicker/PresetButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,UAAU,kBAAkB;IACxB,cAAc,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAcD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6DtD,CAAC"}

package/dist/components/LLLDatePicker/index.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { LLLDatePickerProps } from './types';
+
+export declare const LLLDatePicker: React.FC<LLLDatePickerProps>;
+export default LLLDatePicker;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LLLDatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LLLDatePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AASnD,OAAO,EAAE,kBAAkB,EAAa,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqGtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/LLLDatePicker/types.d.ts

@@ -0,0 +1,24 @@
+export interface LLLDatePickerProps {
+    /** Initial start date */
+    startDate?: Date;
+    /** Initial end date */
+    endDate?: Date;
+    /** Callback when dates change */
+    onDateChange?: (startDate: Date | null, endDate: Date | null) => void;
+    /** Custom CSS classes for the root container */
+    className?: string;
+    /** Custom CSS classes for the trigger button */
+    buttonClassName?: string;
+    /** Custom CSS classes for the dropdown card */
+    dropdownClassName?: string;
+    /** Disable the date picker */
+    disabled?: boolean;
+    /** Placeholder text for the button */
+    placeholder?: string;
+}
+export type DatePreset = 'today' | 'yesterday' | 'lastWeek' | 'thisWeek' | 'lastMonth' | 'thisMonth' | 'lastYear' | 'thisYear';
+export interface DateRange {
+    startDate: Date | null;
+    endDate: Date | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/LLLDatePicker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/LLLDatePicker/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IAC/B,yBAAyB;IACzB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,uBAAuB;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,UAAU,GAChB,OAAO,GACP,WAAW,GACX,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,UAAU,GACV,UAAU,CAAC;AAEjB,MAAM,WAAW,SAAS;IACtB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;CACxB"}

package/dist/components/LLLDatePicker/utils.d.ts

@@ -0,0 +1,59 @@
+import { DateRange } from './types';
+
+/**
+ * Get today's date range (start and end are the same)
+ */
+export declare const getToday: () => DateRange;
+/**
+ * Get yesterday's date range
+ */
+export declare const getYesterday: () => DateRange;
+/**
+ * Get last week's date range (7 days ago to yesterday)
+ */
+export declare const getLastWeek: () => DateRange;
+/**
+ * Get this week's date range (Monday to today)
+ */
+export declare const getThisWeek: () => DateRange;
+/**
+ * Get last month's date range (first to last day of previous month)
+ */
+export declare const getLastMonth: () => DateRange;
+/**
+ * Get this month's date range (first day to today)
+ */
+export declare const getThisMonth: () => DateRange;
+/**
+ * Get last year's date range (Jan 1 to Dec 31 of previous year)
+ */
+export declare const getLastYear: () => DateRange;
+/**
+ * Get this year's date range (Jan 1 to today)
+ */
+export declare const getThisYear: () => DateRange;
+/**
+ * Format a date to display string (DD/MM/YYYY)
+ */
+export declare const formatDate: (date: Date | null) => string;
+/**
+ * Parse a date string to Date object
+ */
+export declare const parseDate: (dateStr: string) => Date | null;
+/**
+ * Validate if a day/month/year combination is valid
+ */
+export declare const isValidDate: (day: number, month: number, year: number) => boolean;
+/**
+ * Create a date from day, month, year
+ */
+export declare const createDate: (day: number, month: number, year: number) => Date | null;
+/**
+ * Extract day, month, year from a Date object
+ */
+export declare const extractDateParts: (date: Date | null) => {
+    day: number;
+    month: number;
+    year: number;
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/LLLDatePicker/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/LLLDatePicker/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAO,SAI3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,QAAO,SAI/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,SAM9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,SAK9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,QAAO,SAK/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,QAAO,SAK/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,SAK9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,SAK9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,IAAI,GAAG,IAAI,KAAG,MAG9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS,MAAM,KAAG,IAAI,GAAG,IAGlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,OAAO,MAAM,EAAE,MAAM,MAAM,KAAG,OAWtE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,EAAE,OAAO,MAAM,EAAE,MAAM,MAAM,KAAG,IAAI,GAAG,IAK5E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,MAAM,IAAI,GAAG,IAAI,KAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAS9F,CAAC"}

package/dist/components/ui/button.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;8EA2BnB,CAAA;AAED,MAAM,WAAW,WACb,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACrD,YAAY,CAAC,OAAO,cAAc,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,QAAA,MAAM,MAAM,uFAWX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/ui/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,IAAI,6GAYR,CAAA;AAGF,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,QAAA,MAAM,SAAS,uHAYb,CAAA;AAGF,QAAA,MAAM,eAAe,yHASnB,CAAA;AAGF,QAAA,MAAM,WAAW,6GAKf,CAAA;AAGF,QAAA,MAAM,UAAU,6GASd,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/input.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,UACb,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;CAAI;AAE3D,QAAA,MAAM,KAAK,qFAcV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/ui/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,QAAA,MAAM,OAAO,yCAAwB,CAAA;AAErC,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,QAAA,MAAM,cAAc,gKAgBlB,CAAA;AAGF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/tabs.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/ui/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAA;AAIrD,QAAA,MAAM,IAAI,gGAAqB,CAAA;AAE/B,QAAA,MAAM,QAAQ,uJAYZ,CAAA;AAGF,QAAA,MAAM,WAAW,gKAYf,CAAA;AAGF,QAAA,MAAM,WAAW,0JAYf,CAAA;AAGF,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}