@kopexa/date-picker 1.1.0 → 1.1.1

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.
@@ -241,8 +241,7 @@ function YearView() {
241
241
  }
242
242
  function CalendarFooter({
243
243
  todayLabel,
244
- clearLabel,
245
- clearable = true
244
+ clearLabel
246
245
  }) {
247
246
  return /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
248
247
  /* @__PURE__ */ jsx(
@@ -254,7 +253,7 @@ function CalendarFooter({
254
253
  children: todayLabel
255
254
  }
256
255
  ),
257
- clearable && /* @__PURE__ */ jsx(
256
+ /* @__PURE__ */ jsx(
258
257
  "button",
259
258
  {
260
259
  type: "button",
@@ -265,34 +264,6 @@ function CalendarFooter({
265
264
  )
266
265
  ] }) });
267
266
  }
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
- }
296
267
  function DatePickerField({
297
268
  label,
298
269
  value,
@@ -376,14 +347,7 @@ function DatePickerField({
376
347
  /* @__PURE__ */ jsx(DayView, {}),
377
348
  /* @__PURE__ */ jsx(MonthView, {}),
378
349
  /* @__PURE__ */ jsx(YearView, {}),
379
- /* @__PURE__ */ jsx(
380
- CalendarFooter,
381
- {
382
- todayLabel,
383
- clearLabel,
384
- clearable
385
- }
386
- )
350
+ /* @__PURE__ */ jsx(CalendarFooter, { todayLabel, clearLabel })
387
351
  ] }) }) })
388
352
  ]
389
353
  }
@@ -481,22 +445,6 @@ function DateTimePickerField({
481
445
  view: "day"
482
446
  });
483
447
  }, [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]);
500
448
  return /* @__PURE__ */ jsxs(
501
449
  DatePickerRoot,
502
450
  {
@@ -514,15 +462,9 @@ function DateTimePickerField({
514
462
  ...rootProps,
515
463
  children: [
516
464
  label && /* @__PURE__ */ jsx(DatePickerLabel, { className: styles.label, children: label }),
517
- /* @__PURE__ */ jsxs(DatePickerControl, { className: "flex items-center", children: [
465
+ /* @__PURE__ */ jsxs(DatePickerControl, { className: "flex items-center gap-1", children: [
518
466
  /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center", children: [
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
- ),
467
+ /* @__PURE__ */ jsx(DatePickerInput, { className: styles.input, placeholder }),
526
468
  /* @__PURE__ */ jsx(DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }) })
527
469
  ] }),
528
470
  /* @__PURE__ */ jsx(
@@ -533,14 +475,13 @@ function DateTimePickerField({
533
475
  onChange: handleTimeChange,
534
476
  disabled,
535
477
  readOnly,
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"}`
478
+ className: styles.timeInput
537
479
  }
538
480
  ),
539
481
  clearable && !disabled && !readOnly && /* @__PURE__ */ jsx(
540
- "button",
482
+ DatePickerClearTrigger,
541
483
  {
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",
484
+ className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
544
485
  onClick: handleClear,
545
486
  children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
546
487
  }
@@ -550,16 +491,7 @@ function DateTimePickerField({
550
491
  /* @__PURE__ */ jsx(DayView, {}),
551
492
  /* @__PURE__ */ jsx(MonthView, {}),
552
493
  /* @__PURE__ */ jsx(YearView, {}),
553
- /* @__PURE__ */ jsx(
554
- DateTimeFooter,
555
- {
556
- todayLabel,
557
- clearLabel,
558
- clearable,
559
- onSelectNow: handleSelectNow,
560
- onClear: handleClear
561
- }
562
- )
494
+ /* @__PURE__ */ jsx(CalendarFooter, { todayLabel, clearLabel })
563
495
  ] }) }) })
564
496
  ]
565
497
  }
@@ -271,8 +271,7 @@ function YearView() {
271
271
  }
272
272
  function CalendarFooter({
273
273
  todayLabel,
274
- clearLabel,
275
- clearable = true
274
+ clearLabel
276
275
  }) {
277
276
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
278
277
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -284,7 +283,7 @@ function CalendarFooter({
284
283
  children: todayLabel
285
284
  }
286
285
  ),
287
- clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
286
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
288
287
  "button",
289
288
  {
290
289
  type: "button",
@@ -295,34 +294,6 @@ function CalendarFooter({
295
294
  )
296
295
  ] }) });
297
296
  }
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
- }
326
297
  function DatePickerField({
327
298
  label,
328
299
  value,
@@ -406,14 +377,7 @@ function DatePickerField({
406
377
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
407
378
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
408
379
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
409
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
410
- CalendarFooter,
411
- {
412
- todayLabel,
413
- clearLabel,
414
- clearable
415
- }
416
- )
380
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
417
381
  ] }) }) })
418
382
  ]
419
383
  }
@@ -511,22 +475,6 @@ function DateTimePickerField({
511
475
  view: "day"
512
476
  });
513
477
  }, [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]);
530
478
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
531
479
  import_date_picker.DatePickerRoot,
532
480
  {
@@ -544,15 +492,9 @@ function DateTimePickerField({
544
492
  ...rootProps,
545
493
  children: [
546
494
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerLabel, { className: styles.label, children: label }),
547
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerControl, { className: "flex items-center", children: [
495
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerControl, { className: "flex items-center gap-1", children: [
548
496
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 flex items-center", children: [
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
- ),
497
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerInput, { className: styles.input, placeholder }),
556
498
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
557
499
  ] }),
558
500
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -563,14 +505,13 @@ function DateTimePickerField({
563
505
  onChange: handleTimeChange,
564
506
  disabled,
565
507
  readOnly,
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"}`
508
+ className: styles.timeInput
567
509
  }
568
510
  ),
569
511
  clearable && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
570
- "button",
512
+ import_date_picker.DatePickerClearTrigger,
571
513
  {
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",
514
+ className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
574
515
  onClick: handleClear,
575
516
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, { className: "size-4" })
576
517
  }
@@ -580,16 +521,7 @@ function DateTimePickerField({
580
521
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
581
522
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
582
523
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
583
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
584
- DateTimeFooter,
585
- {
586
- todayLabel,
587
- clearLabel,
588
- clearable,
589
- onSelectNow: handleSelectNow,
590
- onClear: handleClear
591
- }
592
- )
524
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
593
525
  ] }) }) })
594
526
  ]
595
527
  }
@@ -2,7 +2,7 @@
2
2
  "use client";
3
3
  import {
4
4
  DatePickerField
5
- } from "./chunk-QMTYH76U.mjs";
5
+ } from "./chunk-VYQ6BFFN.mjs";
6
6
  import "./chunk-HPM5Y2V6.mjs";
7
7
  import "./chunk-C7GZJJIK.mjs";
8
8
  export {
package/dist/index.js CHANGED
@@ -313,8 +313,7 @@ function YearView() {
313
313
  }
314
314
  function CalendarFooter({
315
315
  todayLabel,
316
- clearLabel,
317
- clearable = true
316
+ clearLabel
318
317
  }) {
319
318
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
320
319
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -326,7 +325,7 @@ function CalendarFooter({
326
325
  children: todayLabel
327
326
  }
328
327
  ),
329
- clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
328
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
330
329
  "button",
331
330
  {
332
331
  type: "button",
@@ -337,34 +336,6 @@ function CalendarFooter({
337
336
  )
338
337
  ] }) });
339
338
  }
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
- }
368
339
  function DatePickerField({
369
340
  label,
370
341
  value,
@@ -448,14 +419,7 @@ function DatePickerField({
448
419
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
449
420
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
450
421
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
451
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
452
- CalendarFooter,
453
- {
454
- todayLabel,
455
- clearLabel,
456
- clearable
457
- }
458
- )
422
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
459
423
  ] }) }) })
460
424
  ]
461
425
  }
@@ -553,22 +517,6 @@ function DateTimePickerField({
553
517
  view: "day"
554
518
  });
555
519
  }, [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]);
572
520
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
573
521
  import_date_picker2.DatePickerRoot,
574
522
  {
@@ -586,15 +534,9 @@ function DateTimePickerField({
586
534
  ...rootProps,
587
535
  children: [
588
536
  label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerLabel, { className: styles.label, children: label }),
589
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerControl, { className: "flex items-center", children: [
537
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerControl, { className: "flex items-center gap-1", children: [
590
538
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 flex items-center", children: [
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
- ),
539
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerInput, { className: styles.input, placeholder }),
598
540
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
599
541
  ] }),
600
542
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -605,14 +547,13 @@ function DateTimePickerField({
605
547
  onChange: handleTimeChange,
606
548
  disabled,
607
549
  readOnly,
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"}`
550
+ className: styles.timeInput
609
551
  }
610
552
  ),
611
553
  clearable && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
612
- "button",
554
+ import_date_picker2.DatePickerClearTrigger,
613
555
  {
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",
556
+ className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
616
557
  onClick: handleClear,
617
558
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, { className: "size-4" })
618
559
  }
@@ -622,16 +563,7 @@ function DateTimePickerField({
622
563
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
623
564
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
624
565
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
625
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
626
- DateTimeFooter,
627
- {
628
- todayLabel,
629
- clearLabel,
630
- clearable,
631
- onSelectNow: handleSelectNow,
632
- onClear: handleClear
633
- }
634
- )
566
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
635
567
  ] }) }) })
636
568
  ]
637
569
  }
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  DatePickerField
4
- } from "./chunk-QMTYH76U.mjs";
4
+ } from "./chunk-VYQ6BFFN.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.1.0",
3
+ "version": "1.1.1",
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.6"
33
+ "@kopexa/i18n": "17.13.7"
34
34
  },
35
35
  "clean-package": "../../../clean-package.config.json",
36
36
  "module": "dist/index.mjs",