persian-date-kit 1.1.0 → 1.1.2

package/README.md

@@ -107,6 +107,96 @@ export function RangeExample() {
 }
 ```
 
+### Date picker with time
+
+```tsx
+import { useState } from 'react'
+import { PersianDatePicker } from 'persian-date-kit'
+
+export function DateTimeExample() {
+  const [value, setValue] = useState<Date | null>(new Date())
+
+  return (
+    <PersianDatePicker
+      value={value}
+      onChange={setValue}
+      placeholder="YYYY/MM/DD HH:mm"
+      timePicker={{
+        enabled: true,
+        format: 'HH:mm',
+        defaultTime: { hour: 12, minute: 0 },
+        hourStep: 1,
+        minuteStep: 5,
+      }}
+    />
+  )
+}
+```
+
+Or simply enable with defaults:
+
+```tsx
+<PersianDatePicker
+  value={value}
+  onChange={setValue}
+  timePicker={true}  // Uses default time 00:00
+/>
+```
+
+With seconds:
+
+```tsx
+<PersianDatePicker
+  value={value}
+  onChange={setValue}
+  timePicker={{
+    enabled: true,
+    format: 'HH:mm:ss',
+    showSeconds: true,
+  }}
+/>
+```
+
+### Multiple date selection
+
+```tsx
+import { useState } from 'react'
+import { PersianDatePicker } from 'persian-date-kit'
+
+export function MultipleSelectionExample() {
+  const [dates, setDates] = useState<Date[]>([])
+
+  return (
+    <PersianDatePicker
+      value={dates}
+      onChange={setDates}
+      multiple={true}
+      maxSelections={5} // Optional: limit number of selections
+    />
+  )
+}
+```
+
+### Custom calendar button
+
+```tsx
+import { Calendar } from 'lucide-react'
+
+// Hide the calendar button
+<PersianDatePicker
+  value={value}
+  onChange={setValue}
+  showCalendarButton={false}
+/>
+
+// Use custom icon
+<PersianDatePicker
+  value={value}
+  onChange={setValue}
+  calendarIcon={<Calendar className="w-4 h-4" />}
+/>
+```
+
 ## React Hook Form (optional adapter)
 The core package has **no required** form dependency.
 If you want React Hook Form integration, import from the subpath:
@@ -141,9 +231,14 @@ All values you receive in `onChange` are **Gregorian** (`Date | null`). Jalali i
 
 | Prop | Type | Default | Description |
 |---|---|---:|---|
-| `value` | `Date \| null` | — | Controlled value (**Gregorian**) |
-| `onChange` | `(date: Date \| null) => void` | — | Called with the next value (**Gregorian**) |
+| `value` | `Date \| null \| Date[]` | — | Controlled value (**Gregorian**). Can be single date or array for multiple selection |
+| `onChange` | `(date: Date \| null \| Date[]) => void` | — | Called with the next value (**Gregorian**) |
 | `placeholder?` | `string` | `undefined` | Input placeholder (popover mode) |
+| `multiple?` | `boolean` | `false` | Enable multiple date selection |
+| `maxSelections?` | `number` | `undefined` | Maximum number of selectable dates (multiple mode) |
+| `timePicker?` | `TimePickerConfig \| boolean` | `undefined` | Enable time picker (see **TimePickerConfig** below) |
+| `showCalendarButton?` | `boolean` | `true` | Show/hide the calendar button |
+| `calendarIcon?` | `React.ReactNode` | `undefined` | Custom calendar icon. If not provided, default icon is used |
 | `classes?` | `PersianDatePickerClasses` | `undefined` | Per-slot class overrides (see **Classes table** below) |
 
 ### `PersianDateRangePicker`
@@ -182,6 +277,20 @@ These props exist on both pickers:
 | `nextIcon?` | `React.ReactNode` | `undefined` | Custom next icon |
 | `className?` | `string` | `undefined` | Extra class on the root element |
 
+### `TimePickerConfig`
+
+| Prop | Type | Default | Description |
+|---|---|---:|---|
+| `enabled` | `boolean` | — | Enable time picker |
+| `format?` | `'HH:mm' \| 'HH:mm:ss'` | `'HH:mm'` | Time format |
+| `defaultTime?` | `{ hour: number; minute: number; second?: number }` | `undefined` | Default time when value is null (uses current time if not provided) |
+| `showSeconds?` | `boolean` | `false` | Show seconds stepper (requires `format: 'HH:mm:ss'`) |
+| `hourStep?` | `number` | `1` | Step size for hour increment/decrement |
+| `minuteStep?` | `number` | `1` | Step size for minute increment/decrement |
+| `secondStep?` | `number` | `1` | Step size for second increment/decrement |
+
+**Note:** You can also pass `timePicker={true}` as a shorthand to enable with defaults.
+
 ### `PopoverConfig`
 
 | Prop | Type | Default | Description |
@@ -216,6 +325,11 @@ You can override class names per slot:
 | `dayInRange` | **Range picker** day inside range |
 | `dayRangeStart` | **Range picker** range start day |
 | `dayRangeEnd` | **Range picker** range end day |
+| `timePicker` | Time picker container |
+| `timeStepper` | Time stepper wrapper (hour/minute/second) |
+| `timeStepperButton` | Stepper increment/decrement buttons |
+| `timeStepperInput` | Time input field |
+| `timeSeparator` | Time separator (`:`) |
 
 ## Styling / Theming