@herca/r-kit 0.0.14 → 0.0.15

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.
@@ -539,10 +539,11 @@ interface DatePickerProps {
539
539
  size?: "sm" | "lg" | "md";
540
540
  showController?: boolean;
541
541
  align?: "start" | "center" | "end";
542
+ containerClassName?: string;
542
543
  }
543
544
  type DateFormat = "DD-MM-YYYY" | "DD/MM/YYYY" | "DD MMM YYYY" | "DD MMMM YYYY" | "YYYY-MM-DD" | "MM/DD/YYYY" | "DD-MM-YYYY HH:mm:ss" | "DD/MM/YYYY HH:mm:ss" | "DD MMM YYYY HH:mm:ss" | "DD MMMM YYYY HH:mm:ss" | "YYYY-MM-DD HH:mm:ss" | "MM/DD/YYYY HH:mm:ss" | "DD MMMM YYYY - HH:mm:ss" | "DD MMM YYYY - HH:mm:ss";
544
545
 
545
- declare const DatePicker: ({ format, mode, value: controlledValue, rangeValue: controlledRangeValue, onChange: controlledOnChange, onRangeChange: controlledOnRangeChange, trigger, open, onOpenChange, calendarProps, endDateCalendarProps, startDateCalendarProps, wrapperClassName, size, showController, align, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
546
+ declare const DatePicker: ({ format, mode, value: controlledValue, rangeValue: controlledRangeValue, onChange: controlledOnChange, onRangeChange: controlledOnRangeChange, trigger, open, onOpenChange, calendarProps, endDateCalendarProps, startDateCalendarProps, wrapperClassName, size, showController, align, containerClassName, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
546
547
 
547
548
  declare const monthsShort: string[];
548
549
  declare const monthsFull: string[];
package/dist/clients.d.ts CHANGED
@@ -539,10 +539,11 @@ interface DatePickerProps {
539
539
  size?: "sm" | "lg" | "md";
540
540
  showController?: boolean;
541
541
  align?: "start" | "center" | "end";
542
+ containerClassName?: string;
542
543
  }
543
544
  type DateFormat = "DD-MM-YYYY" | "DD/MM/YYYY" | "DD MMM YYYY" | "DD MMMM YYYY" | "YYYY-MM-DD" | "MM/DD/YYYY" | "DD-MM-YYYY HH:mm:ss" | "DD/MM/YYYY HH:mm:ss" | "DD MMM YYYY HH:mm:ss" | "DD MMMM YYYY HH:mm:ss" | "YYYY-MM-DD HH:mm:ss" | "MM/DD/YYYY HH:mm:ss" | "DD MMMM YYYY - HH:mm:ss" | "DD MMM YYYY - HH:mm:ss";
544
545
 
545
- declare const DatePicker: ({ format, mode, value: controlledValue, rangeValue: controlledRangeValue, onChange: controlledOnChange, onRangeChange: controlledOnRangeChange, trigger, open, onOpenChange, calendarProps, endDateCalendarProps, startDateCalendarProps, wrapperClassName, size, showController, align, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
546
+ declare const DatePicker: ({ format, mode, value: controlledValue, rangeValue: controlledRangeValue, onChange: controlledOnChange, onRangeChange: controlledOnRangeChange, trigger, open, onOpenChange, calendarProps, endDateCalendarProps, startDateCalendarProps, wrapperClassName, size, showController, align, containerClassName, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
546
547
 
547
548
  declare const monthsShort: string[];
548
549
  declare const monthsFull: string[];
package/dist/clients.js CHANGED
@@ -856,7 +856,8 @@ var Input = React5.forwardRef(
856
856
  props.disabled && "cursor-not-allowed bg-gray-100",
857
857
  className
858
858
  ),
859
- ...props
859
+ ...props,
860
+ required: false
860
861
  }
861
862
  ),
862
863
  rightAddon && /* @__PURE__ */ jsx10(
@@ -11079,7 +11080,8 @@ var DatePicker = ({
11079
11080
  wrapperClassName,
11080
11081
  size = "md",
11081
11082
  showController = true,
11082
- align = "start"
11083
+ align = "start",
11084
+ containerClassName
11083
11085
  }) => {
11084
11086
  const [selectedDate, setSelectedDate] = useState10(
11085
11087
  controlledValue || null
@@ -11305,225 +11307,232 @@ var DatePicker = ({
11305
11307
  setIsCalendarShow(open);
11306
11308
  }
11307
11309
  }, [open]);
11308
- return /* @__PURE__ */ jsx309("div", { ref: containerRef, className: "relative flex max-w-sm flex-col", children: /* @__PURE__ */ jsxs40(
11309
- Dropdown,
11310
+ return /* @__PURE__ */ jsx309(
11311
+ "div",
11310
11312
  {
11311
- open: isCalendarShow,
11312
- onOpenChange: (open2) => {
11313
- setIsCalendarShow(open2);
11314
- onOpenChange?.(open2);
11315
- if (mode === "range" && controlledRangeValue) {
11316
- setDateRange(controlledRangeValue);
11317
- }
11318
- },
11319
- children: [
11320
- /* @__PURE__ */ jsx309(DropdownTrigger, { asChild: !!trigger, children: !trigger ? /* @__PURE__ */ jsx309(
11321
- Input,
11322
- {
11323
- type: "text",
11324
- mergedAddon: true,
11325
- className: "pl-0",
11326
- leftAddonClassName: "pr-1!",
11327
- leftAddon: /* @__PURE__ */ jsx309(Icon_default, { name: "calendar", className: "text-gray-900" }),
11328
- placeholder: mode === "range" ? `${formatConfig.placeholder} - ${formatConfig.placeholder}` : formatConfig.placeholder,
11329
- onChange: handleInputChange2,
11330
- value: inputValue,
11331
- readOnly: mode === "range"
11332
- }
11333
- ) : trigger }),
11334
- /* @__PURE__ */ jsx309(
11335
- DropdownContent,
11336
- {
11337
- align,
11338
- sideOffset: 5,
11339
- className: clsx3("z-10 overflow-hidden p-0", wrapperClassName),
11340
- children: /* @__PURE__ */ jsx309("div", { className: "top-full z-10", children: mode === "single" ? /* @__PURE__ */ jsx309(
11341
- Calendar2,
11313
+ ref: containerRef,
11314
+ className: clsx3("relative flex max-w-sm flex-col", containerClassName),
11315
+ children: /* @__PURE__ */ jsxs40(
11316
+ Dropdown,
11317
+ {
11318
+ open: isCalendarShow,
11319
+ onOpenChange: (open2) => {
11320
+ setIsCalendarShow(open2);
11321
+ onOpenChange?.(open2);
11322
+ if (mode === "range" && controlledRangeValue) {
11323
+ setDateRange(controlledRangeValue);
11324
+ }
11325
+ },
11326
+ children: [
11327
+ /* @__PURE__ */ jsx309(DropdownTrigger, { asChild: !!trigger, children: !trigger ? /* @__PURE__ */ jsx309(
11328
+ Input,
11342
11329
  {
11343
- size,
11344
- wrapperClassname: "w-full border-0",
11345
- weekWrapperClassname: "w-full justify-between",
11346
- dayWrapperClassname: "justify-between",
11347
- onChange: handleCalendarChange,
11348
- value: selectedDate,
11349
- ...calendarProps
11330
+ type: "text",
11331
+ mergedAddon: true,
11332
+ className: "pl-0",
11333
+ leftAddonClassName: "pr-1!",
11334
+ leftAddon: /* @__PURE__ */ jsx309(Icon_default, { name: "calendar", className: "text-gray-900" }),
11335
+ placeholder: mode === "range" ? `${formatConfig.placeholder} - ${formatConfig.placeholder}` : formatConfig.placeholder,
11336
+ onChange: handleInputChange2,
11337
+ value: inputValue,
11338
+ readOnly: mode === "range"
11350
11339
  }
11351
- ) : /* @__PURE__ */ jsxs40("div", { className: "flex", children: [
11352
- showController && /* @__PURE__ */ jsxs40("div", { className: "flex flex-col items-start gap-2 border-r border-gray-400 px-3 py-6.5", children: [
11353
- /* @__PURE__ */ jsx309(
11354
- ChipGroup,
11355
- {
11356
- direction: "vertical",
11357
- options: filterCalendar,
11358
- selected: selectedFilter,
11359
- onSelect: (val) => {
11360
- setSelectedFilter(val);
11361
- const now = /* @__PURE__ */ new Date();
11362
- const end = /* @__PURE__ */ new Date();
11363
- const start = /* @__PURE__ */ new Date();
11364
- if (val[0] === 0) {
11365
- const day = now.getDay();
11366
- const diffToMonday = day === 0 ? -6 : 1 - day;
11367
- const startOfThisWeek = new Date(now);
11368
- startOfThisWeek.setDate(now.getDate() + diffToMonday);
11369
- startOfThisWeek.setHours(0, 0, 0, 0);
11370
- const startOfLastWeek = new Date(startOfThisWeek);
11371
- startOfLastWeek.setDate(
11372
- startOfThisWeek.getDate() - 7
11373
- );
11374
- const endOfLastWeek = new Date(startOfThisWeek);
11375
- endOfLastWeek.setDate(startOfThisWeek.getDate() - 1);
11376
- endOfLastWeek.setHours(23, 59, 59, 999);
11377
- setDateRange({
11378
- start: startOfLastWeek,
11379
- end: endOfLastWeek
11380
- });
11381
- } else if (val[0] === 1) {
11382
- start.setDate(end.getDate() - 7);
11383
- start.setHours(0, 0, 0, 0);
11384
- end.setHours(23, 59, 59, 999);
11385
- setDateRange({
11386
- start,
11387
- end
11388
- });
11389
- } else if (val[0] === 2) {
11390
- start.setDate(end.getDate() - 29);
11391
- start.setHours(0, 0, 0, 0);
11392
- end.setHours(23, 59, 59, 999);
11393
- setDateRange({
11394
- start,
11395
- end
11396
- });
11397
- } else if (val[0] === 3) {
11398
- const start2 = new Date(
11399
- now.getFullYear(),
11400
- now.getMonth(),
11401
- 1
11402
- );
11403
- const end2 = new Date(
11404
- now.getFullYear(),
11405
- now.getMonth() + 1,
11406
- 0
11407
- );
11408
- start2.setHours(0, 0, 0, 0);
11409
- end2.setHours(23, 59, 59, 999);
11410
- setDateRange({
11411
- start: start2,
11412
- end: end2
11413
- });
11414
- } else if (val[0] === 4) {
11415
- start.setFullYear(end.getFullYear() - 1);
11416
- start.setHours(0, 0, 0, 0);
11417
- end.setHours(23, 59, 59, 999);
11418
- setDateRange({
11419
- start,
11420
- end
11421
- });
11422
- }
11423
- },
11424
- color: "gray",
11425
- size
11426
- }
11427
- ),
11428
- /* @__PURE__ */ jsx309(
11429
- Button,
11340
+ ) : trigger }),
11341
+ /* @__PURE__ */ jsx309(
11342
+ DropdownContent,
11343
+ {
11344
+ align,
11345
+ sideOffset: 5,
11346
+ className: clsx3("z-10 overflow-hidden p-0", wrapperClassName),
11347
+ children: /* @__PURE__ */ jsx309("div", { className: "top-full z-10", children: mode === "single" ? /* @__PURE__ */ jsx309(
11348
+ Calendar2,
11430
11349
  {
11431
- color: "danger",
11432
- variant: "outline",
11433
11350
  size,
11434
- onClick: () => {
11435
- setDateRange({ start: null, end: null });
11436
- setSelectedFilter([]);
11437
- },
11438
- children: "Reset"
11439
- }
11440
- )
11441
- ] }),
11442
- /* @__PURE__ */ jsxs40("div", { className: "flex flex-col", children: [
11443
- /* @__PURE__ */ jsxs40(
11444
- "div",
11445
- {
11446
- className: cn("flex", isMobile ? "flex-col" : "flex-row"),
11447
- children: [
11448
- /* @__PURE__ */ jsx309(
11449
- Calendar2,
11450
- {
11451
- size,
11452
- wrapperClassname: "w-full rounded-none! border-0",
11453
- weekWrapperClassname: "w-full justify-between",
11454
- dayWrapperClassname: "justify-between",
11455
- onChange: handleRangeCalendarChange,
11456
- value: dateRange.start,
11457
- rangeValue: dateRange,
11458
- mode: "range",
11459
- ...startDateCalendarProps
11460
- }
11461
- ),
11462
- !isMobile && /* @__PURE__ */ jsx309(
11463
- Calendar2,
11464
- {
11465
- size,
11466
- wrapperClassname: "w-full rounded-none border-0 border-l",
11467
- weekWrapperClassname: "w-full justify-between",
11468
- dayWrapperClassname: "justify-between",
11469
- onChange: handleRangeCalendarChange,
11470
- value: dateRange.end,
11471
- rangeValue: dateRange,
11472
- mode: "range",
11473
- defaultMonth: nextMonthData.month,
11474
- defaultYear: nextMonthData.year,
11475
- ...endDateCalendarProps
11476
- }
11477
- )
11478
- ]
11351
+ wrapperClassname: "w-full border-0",
11352
+ weekWrapperClassname: "w-full justify-between",
11353
+ dayWrapperClassname: "justify-between",
11354
+ onChange: handleCalendarChange,
11355
+ value: selectedDate,
11356
+ ...calendarProps
11479
11357
  }
11480
- ),
11481
- /* @__PURE__ */ jsxs40("div", { className: "flex flex-col items-end justify-between gap-2 border-t border-gray-300 px-4 py-3 md:flex-row md:items-center", children: [
11482
- /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
11358
+ ) : /* @__PURE__ */ jsxs40("div", { className: "flex", children: [
11359
+ showController && /* @__PURE__ */ jsxs40("div", { className: "flex flex-col items-start gap-2 border-r border-gray-400 px-3 py-6.5", children: [
11483
11360
  /* @__PURE__ */ jsx309(
11484
- Input,
11361
+ ChipGroup,
11485
11362
  {
11486
- size,
11487
- readOnly: true,
11488
- className: "w-30 truncate",
11489
- placeholder: "Start Date",
11490
- value: formatDateToString(
11491
- dateRange.start,
11492
- "DD MMM YYYY"
11493
- )
11363
+ direction: "vertical",
11364
+ options: filterCalendar,
11365
+ selected: selectedFilter,
11366
+ onSelect: (val) => {
11367
+ setSelectedFilter(val);
11368
+ const now = /* @__PURE__ */ new Date();
11369
+ const end = /* @__PURE__ */ new Date();
11370
+ const start = /* @__PURE__ */ new Date();
11371
+ if (val[0] === 0) {
11372
+ const day = now.getDay();
11373
+ const diffToMonday = day === 0 ? -6 : 1 - day;
11374
+ const startOfThisWeek = new Date(now);
11375
+ startOfThisWeek.setDate(now.getDate() + diffToMonday);
11376
+ startOfThisWeek.setHours(0, 0, 0, 0);
11377
+ const startOfLastWeek = new Date(startOfThisWeek);
11378
+ startOfLastWeek.setDate(
11379
+ startOfThisWeek.getDate() - 7
11380
+ );
11381
+ const endOfLastWeek = new Date(startOfThisWeek);
11382
+ endOfLastWeek.setDate(startOfThisWeek.getDate() - 1);
11383
+ endOfLastWeek.setHours(23, 59, 59, 999);
11384
+ setDateRange({
11385
+ start: startOfLastWeek,
11386
+ end: endOfLastWeek
11387
+ });
11388
+ } else if (val[0] === 1) {
11389
+ start.setDate(end.getDate() - 7);
11390
+ start.setHours(0, 0, 0, 0);
11391
+ end.setHours(23, 59, 59, 999);
11392
+ setDateRange({
11393
+ start,
11394
+ end
11395
+ });
11396
+ } else if (val[0] === 2) {
11397
+ start.setDate(end.getDate() - 29);
11398
+ start.setHours(0, 0, 0, 0);
11399
+ end.setHours(23, 59, 59, 999);
11400
+ setDateRange({
11401
+ start,
11402
+ end
11403
+ });
11404
+ } else if (val[0] === 3) {
11405
+ const start2 = new Date(
11406
+ now.getFullYear(),
11407
+ now.getMonth(),
11408
+ 1
11409
+ );
11410
+ const end2 = new Date(
11411
+ now.getFullYear(),
11412
+ now.getMonth() + 1,
11413
+ 0
11414
+ );
11415
+ start2.setHours(0, 0, 0, 0);
11416
+ end2.setHours(23, 59, 59, 999);
11417
+ setDateRange({
11418
+ start: start2,
11419
+ end: end2
11420
+ });
11421
+ } else if (val[0] === 4) {
11422
+ start.setFullYear(end.getFullYear() - 1);
11423
+ start.setHours(0, 0, 0, 0);
11424
+ end.setHours(23, 59, 59, 999);
11425
+ setDateRange({
11426
+ start,
11427
+ end
11428
+ });
11429
+ }
11430
+ },
11431
+ color: "gray",
11432
+ size
11494
11433
  }
11495
11434
  ),
11496
- /* @__PURE__ */ jsx309(Icon_default, { name: "minus", size: 16 }),
11497
11435
  /* @__PURE__ */ jsx309(
11498
- Input,
11436
+ Button,
11499
11437
  {
11438
+ color: "danger",
11439
+ variant: "outline",
11500
11440
  size,
11501
- readOnly: true,
11502
- placeholder: "End Date",
11503
- className: "w-30 truncate",
11504
- value: formatDateToString(dateRange.end, "DD MMM YYYY")
11441
+ onClick: () => {
11442
+ setDateRange({ start: null, end: null });
11443
+ setSelectedFilter([]);
11444
+ },
11445
+ children: "Reset"
11505
11446
  }
11506
11447
  )
11507
11448
  ] }),
11508
- /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
11509
- /* @__PURE__ */ jsx309(
11510
- Button,
11449
+ /* @__PURE__ */ jsxs40("div", { className: "flex flex-col", children: [
11450
+ /* @__PURE__ */ jsxs40(
11451
+ "div",
11511
11452
  {
11512
- onClick: () => setIsCalendarShow(false),
11513
- variant: "tertiary",
11514
- children: "Cancel"
11453
+ className: cn("flex", isMobile ? "flex-col" : "flex-row"),
11454
+ children: [
11455
+ /* @__PURE__ */ jsx309(
11456
+ Calendar2,
11457
+ {
11458
+ size,
11459
+ wrapperClassname: "w-full rounded-none! border-0",
11460
+ weekWrapperClassname: "w-full justify-between",
11461
+ dayWrapperClassname: "justify-between",
11462
+ onChange: handleRangeCalendarChange,
11463
+ value: dateRange.start,
11464
+ rangeValue: dateRange,
11465
+ mode: "range",
11466
+ ...startDateCalendarProps
11467
+ }
11468
+ ),
11469
+ !isMobile && /* @__PURE__ */ jsx309(
11470
+ Calendar2,
11471
+ {
11472
+ size,
11473
+ wrapperClassname: "w-full rounded-none border-0 border-l",
11474
+ weekWrapperClassname: "w-full justify-between",
11475
+ dayWrapperClassname: "justify-between",
11476
+ onChange: handleRangeCalendarChange,
11477
+ value: dateRange.end,
11478
+ rangeValue: dateRange,
11479
+ mode: "range",
11480
+ defaultMonth: nextMonthData.month,
11481
+ defaultYear: nextMonthData.year,
11482
+ ...endDateCalendarProps
11483
+ }
11484
+ )
11485
+ ]
11515
11486
  }
11516
11487
  ),
11517
- /* @__PURE__ */ jsx309(Button, { onClick: handleApplyDateRange, children: "Apply" })
11488
+ /* @__PURE__ */ jsxs40("div", { className: "flex flex-col items-end justify-between gap-2 border-t border-gray-300 px-4 py-3 md:flex-row md:items-center", children: [
11489
+ /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
11490
+ /* @__PURE__ */ jsx309(
11491
+ Input,
11492
+ {
11493
+ size,
11494
+ readOnly: true,
11495
+ className: "w-30 truncate",
11496
+ placeholder: "Start Date",
11497
+ value: formatDateToString(
11498
+ dateRange.start,
11499
+ "DD MMM YYYY"
11500
+ )
11501
+ }
11502
+ ),
11503
+ /* @__PURE__ */ jsx309(Icon_default, { name: "minus", size: 16 }),
11504
+ /* @__PURE__ */ jsx309(
11505
+ Input,
11506
+ {
11507
+ size,
11508
+ readOnly: true,
11509
+ placeholder: "End Date",
11510
+ className: "w-30 truncate",
11511
+ value: formatDateToString(dateRange.end, "DD MMM YYYY")
11512
+ }
11513
+ )
11514
+ ] }),
11515
+ /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
11516
+ /* @__PURE__ */ jsx309(
11517
+ Button,
11518
+ {
11519
+ onClick: () => setIsCalendarShow(false),
11520
+ variant: "tertiary",
11521
+ children: "Cancel"
11522
+ }
11523
+ ),
11524
+ /* @__PURE__ */ jsx309(Button, { onClick: handleApplyDateRange, children: "Apply" })
11525
+ ] })
11526
+ ] })
11518
11527
  ] })
11519
- ] })
11520
- ] })
11521
- ] }) })
11522
- }
11523
- )
11524
- ]
11528
+ ] }) })
11529
+ }
11530
+ )
11531
+ ]
11532
+ }
11533
+ )
11525
11534
  }
11526
- ) });
11535
+ );
11527
11536
  };
11528
11537
 
11529
11538
  // src/components/textarea/textarea.tsx