persian-date-kit 0.0.11 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -1
- package/dist/PersianDatePicker-BEj7IYGl.js +1178 -0
- package/dist/PersianDatePicker-D7P5lkvA.cjs +1 -0
- package/dist/components/PersianDatePicker.d.ts.map +1 -1
- package/dist/components/PersianDateRangePicker.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +124 -120
- package/dist/react-hook-form.cjs +1 -1
- package/dist/react-hook-form.d.ts +1 -0
- package/dist/react-hook-form.d.ts.map +1 -1
- package/dist/react-hook-form.mjs +1 -1
- package/dist/styles.css +21 -10
- package/dist/types/shared.d.ts +9 -0
- package/dist/types/shared.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/PersianDatePicker-BLIBy0yJ.cjs +0 -1
- package/dist/PersianDatePicker-BYF8CIZO.js +0 -1174
package/README.md
CHANGED
|
@@ -6,6 +6,10 @@ Production-ready Persian (Jalali) date pickers for React.
|
|
|
6
6
|
|
|
7
7
|
**Repository:** [https://github.com/aliseyedabady/darvix-persian-date-kit](https://github.com/aliseyedabady/darvix-persian-date-kit)
|
|
8
8
|
|
|
9
|
+
## Demo
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
9
13
|
## Key principles
|
|
10
14
|
- **Gregorian-only internally**: component values are always `Date | null` (Gregorian). Jalali is only for display/input.
|
|
11
15
|
- **Controlled components**: you own the state (`value` + `onChange`).
|
|
@@ -165,6 +169,7 @@ These props exist on both pickers:
|
|
|
165
169
|
| `maxDate?` | `Date` | `undefined` | Maximum selectable day (**Gregorian**) |
|
|
166
170
|
| `disabled?` | `boolean` | `false` | Disable interactions |
|
|
167
171
|
| `mode?` | `'popover' \| 'inline'` | `'popover'` | `inline` shows calendar without input |
|
|
172
|
+
| `theme?` | `'light' \| 'dark' \| 'auto'` | `'light'` | Default stylesheet theme (`auto` follows `prefers-color-scheme`) |
|
|
168
173
|
| `open?` | `boolean` | `undefined` | Control popover open state (popover mode) |
|
|
169
174
|
| `onOpenChange?` | `(open: boolean) => void` | `undefined` | Notified when open state changes (popover mode) |
|
|
170
175
|
| `popover?` | `PopoverConfig` | `{ portal: true }` | Popover positioning options (popover mode) |
|
|
@@ -241,12 +246,16 @@ These variables control most of the look:
|
|
|
241
246
|
Example:
|
|
242
247
|
|
|
243
248
|
```css
|
|
244
|
-
|
|
249
|
+
.myPicker {
|
|
245
250
|
--dvx-pdp-accent: #16a34a;
|
|
246
251
|
--dvx-pdp-ring: rgba(22, 163, 74, 0.25);
|
|
247
252
|
}
|
|
248
253
|
```
|
|
249
254
|
|
|
255
|
+
```tsx
|
|
256
|
+
<PersianDatePicker className="myPicker" theme="light" value={value} onChange={setValue} />
|
|
257
|
+
```
|
|
258
|
+
|
|
250
259
|
### 3) Override per-slot classes (`classes` prop)
|
|
251
260
|
|
|
252
261
|
If you use Tailwind (or your own utility classes), pass overrides:
|