@kopexa/date-picker 1.0.4 → 1.1.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.
Files changed (6) hide show
  1. package/dist/{chunk-VYQ6BFFN.mjs → chunk-QMTYH76U.mjs} +77 -9
  2. package/dist/date-picker-field.js +77 -9
  3. package/dist/date-picker-field.mjs +1 -1
  4. package/dist/index.js +77 -9
  5. package/dist/index.mjs +1 -1
  6. package/package.json +2 -2
package/dist/{chunk-VYQ6BFFN.mjs → chunk-QMTYH76U.mjs} RENAMED
@@ -241,7 +241,8 @@ function YearView() {
241
241
  }
242
242
  function CalendarFooter({
243
243
  todayLabel,
244
- clearLabel
244
+ clearLabel,
245
+ clearable = true
245
246
  }) {
246
247
  return /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
247
248
  /* @__PURE__ */ jsx(
@@ -253,7 +254,7 @@ function CalendarFooter({
253
254
  children: todayLabel
254
255
  }
255
256
  ),
256
- /* @__PURE__ */ jsx(
257
+ clearable && /* @__PURE__ */ jsx(
257
258
  "button",
258
259
  {
259
260
  type: "button",
@@ -264,6 +265,34 @@ function CalendarFooter({
264
265
  )
265
266
  ] }) });
266
267
  }
268
+ function DateTimeFooter({
269
+ todayLabel,
270
+ clearLabel,
271
+ clearable = true,
272
+ onSelectNow,
273
+ onClear
274
+ }) {
275
+ return /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
276
+ /* @__PURE__ */ jsx(
277
+ "button",
278
+ {
279
+ type: "button",
280
+ onClick: onSelectNow,
281
+ className: `${styles.footerButton} text-foreground`,
282
+ children: todayLabel
283
+ }
284
+ ),
285
+ clearable && /* @__PURE__ */ jsx(
286
+ "button",
287
+ {
288
+ type: "button",
289
+ onClick: onClear,
290
+ className: `${styles.footerButton} text-destructive`,
291
+ children: clearLabel
292
+ }
293
+ )
294
+ ] });
295
+ }
267
296
  function DatePickerField({
268
297
  label,
269
298
  value,
@@ -347,7 +376,14 @@ function DatePickerField({
347
376
  /* @__PURE__ */ jsx(DayView, {}),
348
377
  /* @__PURE__ */ jsx(MonthView, {}),
349
378
  /* @__PURE__ */ jsx(YearView, {}),
350
- /* @__PURE__ */ jsx(CalendarFooter, { todayLabel, clearLabel })
379
+ /* @__PURE__ */ jsx(
380
+ CalendarFooter,
381
+ {
382
+ todayLabel,
383
+ clearLabel,
384
+ clearable
385
+ }
386
+ )
351
387
  ] }) }) })
352
388
  ]
353
389
  }
@@ -445,6 +481,22 @@ function DateTimePickerField({
445
481
  view: "day"
446
482
  });
447
483
  }, [onValueChange]);
484
+ const handleSelectNow = useCallback(() => {
485
+ const now = /* @__PURE__ */ new Date();
486
+ const nowValue = new CalendarDateTime(
487
+ now.getFullYear(),
488
+ now.getMonth() + 1,
489
+ now.getDate(),
490
+ now.getHours(),
491
+ now.getMinutes()
492
+ );
493
+ setInternalValue([nowValue]);
494
+ onValueChange == null ? void 0 : onValueChange({
495
+ value: [nowValue],
496
+ valueAsString: [nowValue.toString()],
497
+ view: "day"
498
+ });
499
+ }, [onValueChange]);
448
500
  return /* @__PURE__ */ jsxs(
449
501
  DatePickerRoot,
450
502
  {
@@ -462,9 +514,15 @@ function DateTimePickerField({
462
514
  ...rootProps,
463
515
  children: [
464
516
  label && /* @__PURE__ */ jsx(DatePickerLabel, { className: styles.label, children: label }),
465
- /* @__PURE__ */ jsxs(DatePickerControl, { className: "flex items-center gap-1", children: [
517
+ /* @__PURE__ */ jsxs(DatePickerControl, { className: "flex items-center", children: [
466
518
  /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center", children: [
467
- /* @__PURE__ */ jsx(DatePickerInput, { className: styles.input, placeholder }),
519
+ /* @__PURE__ */ jsx(
520
+ DatePickerInput,
521
+ {
522
+ className: "w-full h-9 rounded-l-md border border-r-0 bg-transparent pl-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring",
523
+ placeholder
524
+ }
525
+ ),
468
526
  /* @__PURE__ */ jsx(DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }) })
469
527
  ] }),
470
528
  /* @__PURE__ */ jsx(
@@ -475,13 +533,14 @@ function DateTimePickerField({
475
533
  onChange: handleTimeChange,
476
534
  disabled,
477
535
  readOnly,
478
- className: styles.timeInput
536
+ className: `h-9 border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring ${clearable && !disabled && !readOnly ? "border-r-0" : "rounded-r-md"}`
479
537
  }
480
538
  ),
481
539
  clearable && !disabled && !readOnly && /* @__PURE__ */ jsx(
482
- DatePickerClearTrigger,
540
+ "button",
483
541
  {
484
- className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
542
+ type: "button",
543
+ className: "inline-flex items-center justify-center size-9 rounded-r-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
485
544
  onClick: handleClear,
486
545
  children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
487
546
  }
@@ -491,7 +550,16 @@ function DateTimePickerField({
491
550
  /* @__PURE__ */ jsx(DayView, {}),
492
551
  /* @__PURE__ */ jsx(MonthView, {}),
493
552
  /* @__PURE__ */ jsx(YearView, {}),
494
- /* @__PURE__ */ jsx(CalendarFooter, { todayLabel, clearLabel })
553
+ /* @__PURE__ */ jsx(
554
+ DateTimeFooter,
555
+ {
556
+ todayLabel,
557
+ clearLabel,
558
+ clearable,
559
+ onSelectNow: handleSelectNow,
560
+ onClear: handleClear
561
+ }
562
+ )
495
563
  ] }) }) })
496
564
  ]
497
565
  }
package/dist/date-picker-field.js CHANGED
@@ -271,7 +271,8 @@ function YearView() {
271
271
  }
272
272
  function CalendarFooter({
273
273
  todayLabel,
274
- clearLabel
274
+ clearLabel,
275
+ clearable = true
275
276
  }) {
276
277
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
277
278
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -283,7 +284,7 @@ function CalendarFooter({
283
284
  children: todayLabel
284
285
  }
285
286
  ),
286
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
287
+ clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
287
288
  "button",
288
289
  {
289
290
  type: "button",
@@ -294,6 +295,34 @@ function CalendarFooter({
294
295
  )
295
296
  ] }) });
296
297
  }
298
+ function DateTimeFooter({
299
+ todayLabel,
300
+ clearLabel,
301
+ clearable = true,
302
+ onSelectNow,
303
+ onClear
304
+ }) {
305
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
306
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
307
+ "button",
308
+ {
309
+ type: "button",
310
+ onClick: onSelectNow,
311
+ className: `${styles.footerButton} text-foreground`,
312
+ children: todayLabel
313
+ }
314
+ ),
315
+ clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
316
+ "button",
317
+ {
318
+ type: "button",
319
+ onClick: onClear,
320
+ className: `${styles.footerButton} text-destructive`,
321
+ children: clearLabel
322
+ }
323
+ )
324
+ ] });
325
+ }
297
326
  function DatePickerField({
298
327
  label,
299
328
  value,
@@ -377,7 +406,14 @@ function DatePickerField({
377
406
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
378
407
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
379
408
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
380
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
409
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
410
+ CalendarFooter,
411
+ {
412
+ todayLabel,
413
+ clearLabel,
414
+ clearable
415
+ }
416
+ )
381
417
  ] }) }) })
382
418
  ]
383
419
  }
@@ -475,6 +511,22 @@ function DateTimePickerField({
475
511
  view: "day"
476
512
  });
477
513
  }, [onValueChange]);
514
+ const handleSelectNow = (0, import_react.useCallback)(() => {
515
+ const now = /* @__PURE__ */ new Date();
516
+ const nowValue = new import_date.CalendarDateTime(
517
+ now.getFullYear(),
518
+ now.getMonth() + 1,
519
+ now.getDate(),
520
+ now.getHours(),
521
+ now.getMinutes()
522
+ );
523
+ setInternalValue([nowValue]);
524
+ onValueChange == null ? void 0 : onValueChange({
525
+ value: [nowValue],
526
+ valueAsString: [nowValue.toString()],
527
+ view: "day"
528
+ });
529
+ }, [onValueChange]);
478
530
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
479
531
  import_date_picker.DatePickerRoot,
480
532
  {
@@ -492,9 +544,15 @@ function DateTimePickerField({
492
544
  ...rootProps,
493
545
  children: [
494
546
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerLabel, { className: styles.label, children: label }),
495
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerControl, { className: "flex items-center gap-1", children: [
547
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerControl, { className: "flex items-center", children: [
496
548
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 flex items-center", children: [
497
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerInput, { className: styles.input, placeholder }),
549
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
550
+ import_date_picker.DatePickerInput,
551
+ {
552
+ className: "w-full h-9 rounded-l-md border border-r-0 bg-transparent pl-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring",
553
+ placeholder
554
+ }
555
+ ),
498
556
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
499
557
  ] }),
500
558
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -505,13 +563,14 @@ function DateTimePickerField({
505
563
  onChange: handleTimeChange,
506
564
  disabled,
507
565
  readOnly,
508
- className: styles.timeInput
566
+ className: `h-9 border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring ${clearable && !disabled && !readOnly ? "border-r-0" : "rounded-r-md"}`
509
567
  }
510
568
  ),
511
569
  clearable && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
512
- import_date_picker.DatePickerClearTrigger,
570
+ "button",
513
571
  {
514
- className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
572
+ type: "button",
573
+ className: "inline-flex items-center justify-center size-9 rounded-r-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
515
574
  onClick: handleClear,
516
575
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, { className: "size-4" })
517
576
  }
@@ -521,7 +580,16 @@ function DateTimePickerField({
521
580
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
522
581
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
523
582
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
524
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
583
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
584
+ DateTimeFooter,
585
+ {
586
+ todayLabel,
587
+ clearLabel,
588
+ clearable,
589
+ onSelectNow: handleSelectNow,
590
+ onClear: handleClear
591
+ }
592
+ )
525
593
  ] }) }) })
526
594
  ]
527
595
  }
package/dist/date-picker-field.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  "use client";
3
3
  import {
4
4
  DatePickerField
5
- } from "./chunk-VYQ6BFFN.mjs";
5
+ } from "./chunk-QMTYH76U.mjs";
6
6
  import "./chunk-HPM5Y2V6.mjs";
7
7
  import "./chunk-C7GZJJIK.mjs";
8
8
  export {
package/dist/index.js CHANGED
@@ -313,7 +313,8 @@ function YearView() {
313
313
  }
314
314
  function CalendarFooter({
315
315
  todayLabel,
316
- clearLabel
316
+ clearLabel,
317
+ clearable = true
317
318
  }) {
318
319
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
319
320
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -325,7 +326,7 @@ function CalendarFooter({
325
326
  children: todayLabel
326
327
  }
327
328
  ),
328
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
329
+ clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
329
330
  "button",
330
331
  {
331
332
  type: "button",
@@ -336,6 +337,34 @@ function CalendarFooter({
336
337
  )
337
338
  ] }) });
338
339
  }
340
+ function DateTimeFooter({
341
+ todayLabel,
342
+ clearLabel,
343
+ clearable = true,
344
+ onSelectNow,
345
+ onClear
346
+ }) {
347
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
348
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
349
+ "button",
350
+ {
351
+ type: "button",
352
+ onClick: onSelectNow,
353
+ className: `${styles.footerButton} text-foreground`,
354
+ children: todayLabel
355
+ }
356
+ ),
357
+ clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
358
+ "button",
359
+ {
360
+ type: "button",
361
+ onClick: onClear,
362
+ className: `${styles.footerButton} text-destructive`,
363
+ children: clearLabel
364
+ }
365
+ )
366
+ ] });
367
+ }
339
368
  function DatePickerField({
340
369
  label,
341
370
  value,
@@ -419,7 +448,14 @@ function DatePickerField({
419
448
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
420
449
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
421
450
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
422
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
451
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
452
+ CalendarFooter,
453
+ {
454
+ todayLabel,
455
+ clearLabel,
456
+ clearable
457
+ }
458
+ )
423
459
  ] }) }) })
424
460
  ]
425
461
  }
@@ -517,6 +553,22 @@ function DateTimePickerField({
517
553
  view: "day"
518
554
  });
519
555
  }, [onValueChange]);
556
+ const handleSelectNow = (0, import_react.useCallback)(() => {
557
+ const now = /* @__PURE__ */ new Date();
558
+ const nowValue = new import_date.CalendarDateTime(
559
+ now.getFullYear(),
560
+ now.getMonth() + 1,
561
+ now.getDate(),
562
+ now.getHours(),
563
+ now.getMinutes()
564
+ );
565
+ setInternalValue([nowValue]);
566
+ onValueChange == null ? void 0 : onValueChange({
567
+ value: [nowValue],
568
+ valueAsString: [nowValue.toString()],
569
+ view: "day"
570
+ });
571
+ }, [onValueChange]);
520
572
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
521
573
  import_date_picker2.DatePickerRoot,
522
574
  {
@@ -534,9 +586,15 @@ function DateTimePickerField({
534
586
  ...rootProps,
535
587
  children: [
536
588
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerLabel, { className: styles.label, children: label }),
537
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerControl, { className: "flex items-center gap-1", children: [
589
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerControl, { className: "flex items-center", children: [
538
590
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 flex items-center", children: [
539
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerInput, { className: styles.input, placeholder }),
591
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
592
+ import_date_picker2.DatePickerInput,
593
+ {
594
+ className: "w-full h-9 rounded-l-md border border-r-0 bg-transparent pl-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring",
595
+ placeholder
596
+ }
597
+ ),
540
598
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
541
599
  ] }),
542
600
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -547,13 +605,14 @@ function DateTimePickerField({
547
605
  onChange: handleTimeChange,
548
606
  disabled,
549
607
  readOnly,
550
- className: styles.timeInput
608
+ className: `h-9 border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring ${clearable && !disabled && !readOnly ? "border-r-0" : "rounded-r-md"}`
551
609
  }
552
610
  ),
553
611
  clearable && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
554
- import_date_picker2.DatePickerClearTrigger,
612
+ "button",
555
613
  {
556
- className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
614
+ type: "button",
615
+ className: "inline-flex items-center justify-center size-9 rounded-r-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
557
616
  onClick: handleClear,
558
617
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, { className: "size-4" })
559
618
  }
@@ -563,7 +622,16 @@ function DateTimePickerField({
563
622
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
564
623
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
565
624
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
566
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
625
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
626
+ DateTimeFooter,
627
+ {
628
+ todayLabel,
629
+ clearLabel,
630
+ clearable,
631
+ onSelectNow: handleSelectNow,
632
+ onClear: handleClear
633
+ }
634
+ )
567
635
  ] }) }) })
568
636
  ]
569
637
  }
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  DatePickerField
4
- } from "./chunk-VYQ6BFFN.mjs";
4
+ } from "./chunk-QMTYH76U.mjs";
5
5
  import {
6
6
  datePickerMessages
7
7
  } from "./chunk-HPM5Y2V6.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/date-picker",
3
- "version": "1.0.4",
3
+ "version": "1.1.0",
4
4
  "description": "DatePicker component for selecting dates and times",
5
5
  "keywords": [
6
6
  "date-picker",
@@ -30,7 +30,7 @@
30
30
  "dependencies": {
31
31
  "@ark-ui/react": "^5.35.0",
32
32
  "@internationalized/date": "^3.12.0",
33
- "@kopexa/i18n": "17.13.4"
33
+ "@kopexa/i18n": "17.13.6"
34
34
  },
35
35
  "clean-package": "../../../clean-package.config.json",
36
36
  "module": "dist/index.mjs",