@chekinapp/ui 0.0.72 → 0.0.73

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/dist/index.js CHANGED
@@ -490,7 +490,7 @@ function ErrorMessage({ className, children, disabled }) {
490
490
  }
491
491
 
492
492
  // src/switch/Switch.tsx
493
- import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
493
+ import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
494
494
  var switchVariants = cva4(
495
495
  [
496
496
  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
@@ -530,7 +530,19 @@ var switchThumbVariants = cva4(
530
530
  }
531
531
  );
532
532
  var Switch = React5.forwardRef(
533
- ({ className, size, readOnly, loading, onChange, value, id, label, error, ...props }, ref) => {
533
+ ({
534
+ className,
535
+ size,
536
+ readOnly,
537
+ loading,
538
+ onChange,
539
+ value,
540
+ id,
541
+ label,
542
+ error,
543
+ wrapperClassName,
544
+ ...props
545
+ }, ref) => {
534
546
  const generatedId = React5.useId();
535
547
  const fieldId = id || generatedId;
536
548
  const switchElement = /* @__PURE__ */ jsx9(
@@ -552,8 +564,8 @@ var Switch = React5.forwardRef(
552
564
  if (!label && !error) {
553
565
  return switchElement;
554
566
  }
555
- return /* @__PURE__ */ jsxs6("div", { children: [
556
- /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
567
+ return /* @__PURE__ */ jsxs6(Fragment2, { children: [
568
+ /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center gap-3", wrapperClassName), children: [
557
569
  switchElement,
558
570
  label && /* @__PURE__ */ jsx9(Label, { htmlFor: fieldId, className: "cursor-pointer text-base font-medium", children: label })
559
571
  ] }),
@@ -685,7 +697,7 @@ function Breadcrumb({
685
697
  // src/breadcrumbs/Breadcrumbs.tsx
686
698
  import {
687
699
  Children,
688
- Fragment as Fragment2,
700
+ Fragment as Fragment3,
689
701
  cloneElement,
690
702
  isValidElement
691
703
  } from "react";
@@ -701,7 +713,7 @@ function Breadcrumbs({ className, children }) {
701
713
  return /* @__PURE__ */ jsx12("nav", { className: cn("breadcrumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx12("ul", { className: "m-0 flex list-none flex-wrap items-center gap-3 p-0", children: items.map((child, index) => {
702
714
  const isLastVisibleItem = items.length - 1 === index;
703
715
  const childWithProps = isValidElement(child) ? cloneElement(child, { current: isLastVisibleItem }) : child;
704
- return /* @__PURE__ */ jsxs9(Fragment2, { children: [
716
+ return /* @__PURE__ */ jsxs9(Fragment3, { children: [
705
717
  index > 0 ? /* @__PURE__ */ jsx12(
706
718
  ChevronRight,
707
719
  {
@@ -833,7 +845,7 @@ var buttonVariants = cva5(
833
845
  );
834
846
 
835
847
  // src/button/Button.tsx
836
- import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
848
+ import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
837
849
  var Button = React6.forwardRef(
838
850
  ({
839
851
  className,
@@ -873,7 +885,7 @@ var Button = React6.forwardRef(
873
885
  disabled: isDisabled,
874
886
  className: classNames,
875
887
  ...props,
876
- children: loading ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
888
+ children: loading ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
877
889
  /* @__PURE__ */ jsx13(Spinner, {}),
878
890
  showLoadingLabel ? /* @__PURE__ */ jsx13("span", { children: loadingText || t("please_wait") }) : null
879
891
  ] }) : children
@@ -1467,7 +1479,7 @@ function ScrollBar({
1467
1479
  }
1468
1480
 
1469
1481
  // src/checkbox/CheckboxGroup.tsx
1470
- import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
1482
+ import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
1471
1483
  var ScrollAreaWrapper = ({
1472
1484
  children,
1473
1485
  scrollable,
@@ -1522,7 +1534,7 @@ var CheckboxGroup = React10.forwardRef(
1522
1534
  );
1523
1535
  const isAllSelected = selectedAvailableValues.length > 0 && selectedAvailableValues.length === availableOptions.length;
1524
1536
  return /* @__PURE__ */ jsxs15("div", { ref, className: cn("space-y-2", className), ...props, children: [
1525
- showSelectAll && /* @__PURE__ */ jsxs15(Fragment4, { children: [
1537
+ showSelectAll && /* @__PURE__ */ jsxs15(Fragment5, { children: [
1526
1538
  /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
1527
1539
  /* @__PURE__ */ jsx24(
1528
1540
  BaseCheckbox,
@@ -3784,10 +3796,10 @@ var CheckboxDropdownGroup = forwardRef18(
3784
3796
  CheckboxDropdownGroup.displayName = "CheckboxDropdownGroup";
3785
3797
 
3786
3798
  // src/dropdown-menu/CheckboxDropdownMultiGroup.tsx
3787
- import { forwardRef as forwardRef19, Fragment as Fragment5 } from "react";
3799
+ import { forwardRef as forwardRef19, Fragment as Fragment6 } from "react";
3788
3800
  import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
3789
3801
  var CheckboxDropdownMultiGroup = forwardRef19(({ groups, className = "", keepOpenOnSelect }, ref) => {
3790
- return /* @__PURE__ */ jsx41("div", { ref, className: cn("space-y-1", className), children: groups.map((group, index) => /* @__PURE__ */ jsxs29(Fragment5, { children: [
3802
+ return /* @__PURE__ */ jsx41("div", { ref, className: cn("space-y-1", className), children: groups.map((group, index) => /* @__PURE__ */ jsxs29(Fragment6, { children: [
3791
3803
  /* @__PURE__ */ jsxs29(DropdownMenuGroup, { children: [
3792
3804
  /* @__PURE__ */ jsx41(DropdownMenuLabel, { children: group.label }),
3793
3805
  group.multiple ? /* @__PURE__ */ jsx41(
@@ -4443,7 +4455,7 @@ FramedIcon.displayName = "FramedIcon";
4443
4455
 
4444
4456
  // src/help-tooltip/HelpTooltip.tsx
4445
4457
  import { CircleQuestionMark } from "lucide-react";
4446
- import { Fragment as Fragment6, jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
4458
+ import { Fragment as Fragment7, jsx as jsx60, jsxs as jsxs36 } from "react/jsx-runtime";
4447
4459
  function HelpTooltip({
4448
4460
  content,
4449
4461
  side,
@@ -4462,7 +4474,7 @@ function HelpTooltip({
4462
4474
  className
4463
4475
  );
4464
4476
  const triggerStyle = { width: size, height: size };
4465
- const triggerContent = /* @__PURE__ */ jsxs36(Fragment6, { children: [
4477
+ const triggerContent = /* @__PURE__ */ jsxs36(Fragment7, { children: [
4466
4478
  /* @__PURE__ */ jsx60(CircleQuestionMark, { "aria-hidden": "true", style: { width: size, height: size } }),
4467
4479
  /* @__PURE__ */ jsx60("span", { className: "absolute -left-0.5 -top-0.5 h-5 w-5" })
4468
4480
  ] });
@@ -5170,7 +5182,35 @@ var translation_default2 = {
5170
5182
  would_you_like_to_save_them: "Would you like to save them?",
5171
5183
  save: "Save",
5172
5184
  dont_save: "Don't save",
5173
- copied_exclamation: "Copied!"
5185
+ copied_exclamation: "Copied!",
5186
+ search_placeholder: "Search\u2026",
5187
+ loading_more: "Loading\u2026",
5188
+ no_options: "No options",
5189
+ select_option: "Select option",
5190
+ clear_all: "Clear all",
5191
+ remove_item: "Remove {{label}}",
5192
+ upload_file: "Upload file",
5193
+ download_attachment: "Download attachment",
5194
+ remove_file: "Remove file",
5195
+ open_calendar: "Open calendar",
5196
+ clear_dates: "Clear dates",
5197
+ select_dates: "Select dates",
5198
+ pick_date_range: "Pick a date range",
5199
+ from: "From",
5200
+ to: "To",
5201
+ pick_month: "Pick a month",
5202
+ pick_date: "Pick a date",
5203
+ month: "Month",
5204
+ day: "Day",
5205
+ year: "Year",
5206
+ done: "Done",
5207
+ wrong_period_of_dates: "Selected period is invalid",
5208
+ date_range_max_days_error_one: "Range cannot exceed {{count}} day",
5209
+ date_range_max_days_error_other: "Range cannot exceed {{count}} days",
5210
+ date_range_min_days_error_one: "Range must be at least {{count}} day",
5211
+ date_range_min_days_error_other: "Range must be at least {{count}} days",
5212
+ past_dates: "Date cannot be before {{minDate}}",
5213
+ future_dates: "Date cannot be after {{maxDate}}"
5174
5214
  };
5175
5215
 
5176
5216
  // src/locales/es/translation.json
@@ -6676,7 +6716,7 @@ function useRadioOptions({ options, defaultValue, onChange }) {
6676
6716
  }
6677
6717
 
6678
6718
  // src/radio/Radio.tsx
6679
- import { Fragment as Fragment7, jsx as jsx84, jsxs as jsxs51 } from "react/jsx-runtime";
6719
+ import { Fragment as Fragment8, jsx as jsx84, jsxs as jsxs51 } from "react/jsx-runtime";
6680
6720
  var Radio = forwardRef36(
6681
6721
  ({ options, value, onChange, error, className = "", disabled = false, renderOption }, ref) => {
6682
6722
  const { selectedValue, handleValueChange } = useRadioOptions({
@@ -6690,7 +6730,7 @@ var Radio = forwardRef36(
6690
6730
  }
6691
6731
  return option.value === selectedValue;
6692
6732
  };
6693
- return /* @__PURE__ */ jsxs51(Fragment7, { children: [
6733
+ return /* @__PURE__ */ jsxs51(Fragment8, { children: [
6694
6734
  /* @__PURE__ */ jsx84(
6695
6735
  RadioGroup2,
6696
6736
  {
@@ -6707,7 +6747,7 @@ var Radio = forwardRef36(
6707
6747
  "flex cursor-pointer items-center gap-2",
6708
6748
  (disabled || option.disabled) && "cursor-default opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
6709
6749
  ),
6710
- children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ jsxs51(Fragment7, { children: [
6750
+ children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ jsxs51(Fragment8, { children: [
6711
6751
  /* @__PURE__ */ jsx84(
6712
6752
  RadioGroupItem,
6713
6753
  {
@@ -6773,7 +6813,7 @@ function RadioWithBorder({ ...props }) {
6773
6813
 
6774
6814
  // src/radio-cards-group/RadioCardsGroup.tsx
6775
6815
  import { forwardRef as forwardRef37, memo as memo4, useEffect as useEffect25 } from "react";
6776
- import { Fragment as Fragment8, jsx as jsx86, jsxs as jsxs53 } from "react/jsx-runtime";
6816
+ import { Fragment as Fragment9, jsx as jsx86, jsxs as jsxs53 } from "react/jsx-runtime";
6777
6817
  var isValueSelectOption = (value) => {
6778
6818
  return value?.value !== void 0;
6779
6819
  };
@@ -6805,7 +6845,7 @@ var RadioCardsGroup = forwardRef37(
6805
6845
  [defaultValue, onChange, options, value]
6806
6846
  );
6807
6847
  const currentValue = isValueSelectOption(value) ? value.value : value;
6808
- return /* @__PURE__ */ jsxs53(Fragment8, { children: [
6848
+ return /* @__PURE__ */ jsxs53(Fragment9, { children: [
6809
6849
  /* @__PURE__ */ jsx86(
6810
6850
  Radio,
6811
6851
  {
@@ -8154,7 +8194,7 @@ var VALUE_PART = 1;
8154
8194
  var getSidebarState = (stateName) => document.cookie.split("; ").find((row) => row.startsWith(`${stateName}=`))?.split("=")[VALUE_PART] === "true";
8155
8195
 
8156
8196
  // src/signature-canvas/SignatureCanvas.tsx
8157
- import { forwardRef as forwardRef40, Fragment as Fragment9, useEffect as useEffect27, useRef as useRef18 } from "react";
8197
+ import { forwardRef as forwardRef40, Fragment as Fragment10, useEffect as useEffect27, useRef as useRef18 } from "react";
8158
8198
  import { useTranslation as useTranslation16 } from "react-i18next";
8159
8199
  import ReactSignatureCanvas from "react-signature-pad-wrapper";
8160
8200
 
@@ -8183,7 +8223,7 @@ var SIGNATURE_PROPS = {
8183
8223
  dotSize: 1
8184
8224
  };
8185
8225
  function breakIntoLines(text = "") {
8186
- return text.split("\n").map((line, index) => /* @__PURE__ */ jsxs63(Fragment9, { children: [
8226
+ return text.split("\n").map((line, index) => /* @__PURE__ */ jsxs63(Fragment10, { children: [
8187
8227
  line,
8188
8228
  /* @__PURE__ */ jsx103("br", {})
8189
8229
  ] }, index));
@@ -9777,7 +9817,7 @@ var Textarea = forwardRef53(
9777
9817
  Textarea.displayName = "Textarea";
9778
9818
 
9779
9819
  // src/three-dots-loader/ThreeDotsLoader.tsx
9780
- import { Fragment as Fragment10, jsx as jsx129, jsxs as jsxs77 } from "react/jsx-runtime";
9820
+ import { Fragment as Fragment11, jsx as jsx129, jsxs as jsxs77 } from "react/jsx-runtime";
9781
9821
  function Dots({
9782
9822
  height,
9783
9823
  width,
@@ -9833,10 +9873,10 @@ function ThreeDotsLoader({
9833
9873
  className
9834
9874
  ),
9835
9875
  role: "progressbar",
9836
- children: labelPlacement === "right" ? /* @__PURE__ */ jsxs77(Fragment10, { children: [
9876
+ children: labelPlacement === "right" ? /* @__PURE__ */ jsxs77(Fragment11, { children: [
9837
9877
  dots,
9838
9878
  /* @__PURE__ */ jsx129("div", { children: label })
9839
- ] }) : /* @__PURE__ */ jsxs77(Fragment10, { children: [
9879
+ ] }) : /* @__PURE__ */ jsxs77(Fragment11, { children: [
9840
9880
  /* @__PURE__ */ jsx129("div", { children: label }),
9841
9881
  dots
9842
9882
  ] })
@@ -10065,7 +10105,7 @@ import {
10065
10105
  VolumeX,
10066
10106
  X as X8
10067
10107
  } from "lucide-react";
10068
- import { Fragment as Fragment11, jsx as jsx133, jsxs as jsxs81 } from "react/jsx-runtime";
10108
+ import { Fragment as Fragment12, jsx as jsx133, jsxs as jsxs81 } from "react/jsx-runtime";
10069
10109
  function VideoPlayer({
10070
10110
  src,
10071
10111
  poster,
@@ -10261,7 +10301,7 @@ function VideoPlayer({
10261
10301
  onLoad: () => setIsLoading(false),
10262
10302
  title: title || "Vimeo video player"
10263
10303
  }
10264
- ) : /* @__PURE__ */ jsxs81(Fragment11, { children: [
10304
+ ) : /* @__PURE__ */ jsxs81(Fragment12, { children: [
10265
10305
  /* @__PURE__ */ jsxs81(
10266
10306
  "video",
10267
10307
  {
@@ -10378,7 +10418,7 @@ function isDOMException(error) {
10378
10418
  }
10379
10419
 
10380
10420
  // src/webcam/Webcam.tsx
10381
- import { Fragment as Fragment12, jsx as jsx134, jsxs as jsxs82 } from "react/jsx-runtime";
10421
+ import { Fragment as Fragment13, jsx as jsx134, jsxs as jsxs82 } from "react/jsx-runtime";
10382
10422
  var SCREENSHOT_FORMAT = "image/jpeg";
10383
10423
  var MEDIA_CONSTRAINTS = {
10384
10424
  audio: false,
@@ -10469,7 +10509,7 @@ var Webcam = forwardRef54(
10469
10509
  },
10470
10510
  [onUserMediaError, onException]
10471
10511
  );
10472
- return /* @__PURE__ */ jsxs82(Fragment12, { children: [
10512
+ return /* @__PURE__ */ jsxs82(Fragment13, { children: [
10473
10513
  /* @__PURE__ */ jsx134(
10474
10514
  "div",
10475
10515
  {
@@ -11401,7 +11441,7 @@ function FieldErrorMessage({
11401
11441
  }
11402
11442
 
11403
11443
  // src/field-trigger/FieldTrigger.tsx
11404
- import { Fragment as Fragment13, jsx as jsx140, jsxs as jsxs87 } from "react/jsx-runtime";
11444
+ import { Fragment as Fragment14, jsx as jsx140, jsxs as jsxs87 } from "react/jsx-runtime";
11405
11445
  var FieldTrigger = React43.forwardRef(
11406
11446
  ({
11407
11447
  as = "button",
@@ -11480,7 +11520,7 @@ var FieldTrigger = React43.forwardRef(
11480
11520
  disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
11481
11521
  className
11482
11522
  );
11483
- const sharedContent = /* @__PURE__ */ jsxs87(Fragment13, { children: [
11523
+ const sharedContent = /* @__PURE__ */ jsxs87(Fragment14, { children: [
11484
11524
  /* @__PURE__ */ jsxs87(
11485
11525
  "span",
11486
11526
  {
@@ -13309,9 +13349,10 @@ AirbnbSearchInput.displayName = "SearchInput";
13309
13349
  // src/dashboard/input/Input.tsx
13310
13350
  import * as React53 from "react";
13311
13351
  import { Eye, Minus as Minus3, Plus as Plus2, X as X10 } from "lucide-react";
13352
+ import { useTranslation as useTranslation26 } from "react-i18next";
13312
13353
 
13313
13354
  // src/dashboard/_fieldset/Fieldset.tsx
13314
- import { Fragment as Fragment14, jsx as jsx152, jsxs as jsxs96 } from "react/jsx-runtime";
13355
+ import { Fragment as Fragment15, jsx as jsx152, jsxs as jsxs96 } from "react/jsx-runtime";
13315
13356
  function Fieldset({
13316
13357
  isActivated,
13317
13358
  isFocused,
@@ -13331,7 +13372,7 @@ function Fieldset({
13331
13372
  }) {
13332
13373
  const showLegendText = Boolean(legend || typeof label === "string");
13333
13374
  const raised = !isEmpty || isFocused;
13334
- return /* @__PURE__ */ jsxs96(Fragment14, { children: [
13375
+ return /* @__PURE__ */ jsxs96(Fragment15, { children: [
13335
13376
  /* @__PURE__ */ jsxs96(
13336
13377
  "div",
13337
13378
  {
@@ -13456,6 +13497,7 @@ var DashboardInput = React53.forwardRef(
13456
13497
  const generatedId = React53.useId();
13457
13498
  const inputId = id ?? name ?? generatedId;
13458
13499
  const errorId = `${inputId}-error`;
13500
+ const { t } = useTranslation26();
13459
13501
  const isEmpty = checkIfEmpty({ empty, value, defaultValue });
13460
13502
  const [inputType, setInputType] = React53.useState(type);
13461
13503
  const [isPasswordRevealed, setIsPasswordRevealed] = React53.useState(false);
@@ -13647,7 +13689,7 @@ var DashboardInput = React53.forwardRef(
13647
13689
  {
13648
13690
  "data-testid": `${name}-optional`,
13649
13691
  className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]",
13650
- children: typeof optional === "string" ? optional : "optional"
13692
+ children: typeof optional === "string" ? optional : t("optional")
13651
13693
  }
13652
13694
  ),
13653
13695
  !errorMessage && helperText && /* @__PURE__ */ jsx153("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
@@ -13671,6 +13713,10 @@ DashboardInput.displayName = "DashboardInput";
13671
13713
  // src/dashboard/select/Select.tsx
13672
13714
  import * as React55 from "react";
13673
13715
  import { ChevronDown as ChevronDown4 } from "lucide-react";
13716
+ import { useTranslation as useTranslation29 } from "react-i18next";
13717
+
13718
+ // src/dashboard/_select-internals/SelectMenu.tsx
13719
+ import { useTranslation as useTranslation27 } from "react-i18next";
13674
13720
 
13675
13721
  // src/dashboard/_select-internals/utils.ts
13676
13722
  function getOptionIndex2(options, option) {
@@ -13723,7 +13769,8 @@ function SelectMenu({
13723
13769
  emptyContent,
13724
13770
  footer
13725
13771
  }) {
13726
- const emptyMessage = noOptionsMessage?.();
13772
+ const { t } = useTranslation27();
13773
+ const emptyMessage = noOptionsMessage?.() ?? t("no_options");
13727
13774
  const hasOptions = options.length > 0;
13728
13775
  return /* @__PURE__ */ jsxs98(
13729
13776
  "div",
@@ -13742,8 +13789,7 @@ function SelectMenu({
13742
13789
  menuClassName
13743
13790
  ),
13744
13791
  children: [
13745
- !hasOptions && emptyMessage && /* @__PURE__ */ jsx154("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage }),
13746
- !hasOptions && !emptyMessage && emptyContent,
13792
+ !hasOptions && (emptyContent ?? /* @__PURE__ */ jsx154("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
13747
13793
  options.map((option, index) => {
13748
13794
  const isSelected = isOptionSelected(option, selectedValue, selectedValues);
13749
13795
  const isHighlighted = index === highlightedIndex;
@@ -13786,18 +13832,25 @@ function SelectMenu({
13786
13832
  }
13787
13833
 
13788
13834
  // src/dashboard/_select-internals/SelectMenuPanel.tsx
13835
+ import { useTranslation as useTranslation28 } from "react-i18next";
13789
13836
  import { jsx as jsx155, jsxs as jsxs99 } from "react/jsx-runtime";
13790
13837
  function SelectMenuPanel({
13791
13838
  isOpen,
13792
13839
  isMobile: isMobile2,
13793
13840
  onClose,
13794
13841
  title,
13842
+ description,
13795
13843
  className,
13796
13844
  drawerClassName,
13845
+ drawerContentClassName,
13797
13846
  children
13798
13847
  }) {
13848
+ const { t } = useTranslation28();
13799
13849
  if (!isOpen) return null;
13800
13850
  if (isMobile2) {
13851
+ const fallbackTitle = t("select_option");
13852
+ const titleText = typeof title === "string" || typeof title === "number" ? String(title) : fallbackTitle;
13853
+ const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : titleText;
13801
13854
  return /* @__PURE__ */ jsx155(
13802
13855
  Drawer,
13803
13856
  {
@@ -13809,10 +13862,21 @@ function SelectMenuPanel({
13809
13862
  DrawerContent,
13810
13863
  {
13811
13864
  onClose,
13865
+ lockScroll: false,
13812
13866
  className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
13813
13867
  children: [
13814
- title ? /* @__PURE__ */ jsx155(DrawerTitle, { className: "px-5 pb-3 pt-1 text-left text-[16px] font-semibold leading-6 text-[var(--chekin-color-brand-navy)]", children: title }) : /* @__PURE__ */ jsx155(DrawerTitle, { className: "sr-only", children: "Select option" }),
13815
- /* @__PURE__ */ jsx155("div", { className: "flex min-h-0 flex-1 flex-col", children })
13868
+ /* @__PURE__ */ jsx155(DrawerTitle, { className: "sr-only", children: titleText }),
13869
+ /* @__PURE__ */ jsx155(DrawerDescription, { className: "sr-only", children: descriptionText }),
13870
+ /* @__PURE__ */ jsx155(
13871
+ "div",
13872
+ {
13873
+ className: cn(
13874
+ "flex min-h-0 flex-1 flex-col px-1 pb-4 pt-1",
13875
+ drawerContentClassName
13876
+ ),
13877
+ children
13878
+ }
13879
+ )
13816
13880
  ]
13817
13881
  }
13818
13882
  )
@@ -13905,6 +13969,8 @@ function DashboardSelectInternal({
13905
13969
  const [searchValue, setSearchValue] = React55.useState("");
13906
13970
  const [highlightedIndex, setHighlightedIndex] = React55.useState(-1);
13907
13971
  const isMobile2 = useIsMobile();
13972
+ const { t } = useTranslation29();
13973
+ const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
13908
13974
  const hasValue = Boolean(value);
13909
13975
  const isEmpty = !hasValue;
13910
13976
  const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -14048,7 +14114,7 @@ function DashboardSelectInternal({
14048
14114
  loading && "cursor-progress"
14049
14115
  ),
14050
14116
  children: [
14051
- /* @__PURE__ */ jsx156("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
14117
+ /* @__PURE__ */ jsx156("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
14052
14118
  /* @__PURE__ */ jsxs100("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
14053
14119
  loading && /* @__PURE__ */ jsx156(ThreeDotsLoader, { height: 18, width: 18 }),
14054
14120
  /* @__PURE__ */ jsx156(
@@ -14098,7 +14164,7 @@ function DashboardSelectInternal({
14098
14164
  ref: searchInputRef,
14099
14165
  type: "text",
14100
14166
  value: searchValue,
14101
- placeholder: searchPlaceholder,
14167
+ placeholder: resolvedSearchPlaceholder,
14102
14168
  onChange: (event) => setSearchValue(event.target.value),
14103
14169
  onKeyDown: handleSearchKeyDown,
14104
14170
  autoComplete: "off",
@@ -14132,7 +14198,7 @@ function DashboardSelectInternal({
14132
14198
  }
14133
14199
  )
14134
14200
  ] }),
14135
- !errorMessage && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
14201
+ !errorMessage && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
14136
14202
  !errorMessage && helperText && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14137
14203
  errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx156(
14138
14204
  FieldErrorMessage,
@@ -14154,6 +14220,7 @@ var DashboardSelect = React55.forwardRef(
14154
14220
  // src/dashboard/multi-select/MultiSelect.tsx
14155
14221
  import * as React56 from "react";
14156
14222
  import { SquareX as SquareX2 } from "lucide-react";
14223
+ import { useTranslation as useTranslation30 } from "react-i18next";
14157
14224
  import { jsx as jsx157, jsxs as jsxs101 } from "react/jsx-runtime";
14158
14225
  var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
14159
14226
  function DashboardMultiSelectInternal({
@@ -14198,6 +14265,7 @@ function DashboardMultiSelectInternal({
14198
14265
  const [isFocused, setIsFocused] = React56.useState(false);
14199
14266
  const [highlightedIndex, setHighlightedIndex] = React56.useState(-1);
14200
14267
  const isMobile2 = useIsMobile();
14268
+ const { t } = useTranslation30();
14201
14269
  const selectedValues = React56.useMemo(() => value ?? [], [value]);
14202
14270
  const hasValue = selectedValues.length > 0;
14203
14271
  const isEmpty = !hasValue;
@@ -14422,7 +14490,9 @@ function DashboardMultiSelectInternal({
14422
14490
  removeOption(option);
14423
14491
  },
14424
14492
  className: "flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
14425
- "aria-label": `Remove ${typeof option.label === "string" ? option.label : String(option.value)}`,
14493
+ "aria-label": t("remove_item", {
14494
+ label: typeof option.label === "string" ? option.label : String(option.value)
14495
+ }),
14426
14496
  children: /* @__PURE__ */ jsx157(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
14427
14497
  }
14428
14498
  )
@@ -14449,7 +14519,7 @@ function DashboardMultiSelectInternal({
14449
14519
  onKeyDown: handleInputKeyDown,
14450
14520
  disabled: isBlocked,
14451
14521
  readOnly,
14452
- placeholder: hasValue ? "" : placeholder ?? "",
14522
+ placeholder: !hasValue && (isFocused || isOpen) ? placeholder ?? "" : "",
14453
14523
  autoComplete: "off",
14454
14524
  className: cn(
14455
14525
  "m-0 box-border min-w-[40px] flex-1 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
@@ -14471,7 +14541,7 @@ function DashboardMultiSelectInternal({
14471
14541
  clearAll();
14472
14542
  },
14473
14543
  className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
14474
- "aria-label": "Clear all",
14544
+ "aria-label": t("clear_all"),
14475
14545
  children: /* @__PURE__ */ jsx157(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
14476
14546
  }
14477
14547
  ),
@@ -14569,7 +14639,7 @@ function DashboardMultiSelectInternal({
14569
14639
  }
14570
14640
  )
14571
14641
  ] }),
14572
- !errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
14642
+ !errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
14573
14643
  !errorMessage && helperText && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14574
14644
  errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx157(
14575
14645
  FieldErrorMessage,
@@ -14600,6 +14670,7 @@ var DashboardCreatableMultiSelect = React57.forwardRef(
14600
14670
  import * as React58 from "react";
14601
14671
  import { ChevronDown as ChevronDown5 } from "lucide-react";
14602
14672
  import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
14673
+ import { useTranslation as useTranslation31 } from "react-i18next";
14603
14674
  import { jsx as jsx159, jsxs as jsxs102 } from "react/jsx-runtime";
14604
14675
  var DEFAULT_ITEM_HEIGHT = 60;
14605
14676
  var DEFAULT_LIST_HEIGHT = 322;
@@ -14635,7 +14706,7 @@ function DashboardInfiniteScrollSelectInternal({
14635
14706
  canLoadMore,
14636
14707
  isLoadingMore,
14637
14708
  loadMoreItems,
14638
- loadingMoreText = "Loading\u2026",
14709
+ loadingMoreText,
14639
14710
  onSearchChange,
14640
14711
  itemHeight = DEFAULT_ITEM_HEIGHT,
14641
14712
  listHeight = DEFAULT_LIST_HEIGHT,
@@ -14646,10 +14717,15 @@ function DashboardInfiniteScrollSelectInternal({
14646
14717
  const triggerRef = React58.useRef(null);
14647
14718
  const searchInputRef = React58.useRef(null);
14648
14719
  const scrollRef = React58.useRef(null);
14720
+ const previousHighlightedIndexRef = React58.useRef(-1);
14721
+ const lastLoadMoreOptionsLengthRef = React58.useRef(null);
14649
14722
  const [isOpen, setIsOpen] = React58.useState(false);
14650
14723
  const [searchValue, setSearchValue] = React58.useState("");
14651
14724
  const [highlightedIndex, setHighlightedIndex] = React58.useState(-1);
14652
14725
  const isMobile2 = useIsMobile();
14726
+ const { t } = useTranslation31();
14727
+ const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
14728
+ const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
14653
14729
  const hasValue = Boolean(value);
14654
14730
  const isEmpty = !hasValue;
14655
14731
  const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -14680,28 +14756,35 @@ function DashboardInfiniteScrollSelectInternal({
14680
14756
  if (isBlocked) setIsOpen(false);
14681
14757
  }, [isBlocked]);
14682
14758
  React58.useEffect(() => {
14683
- if (!isOpen) {
14684
- setSearchValue("");
14685
- setHighlightedIndex(-1);
14686
- return;
14687
- }
14688
- const selectedIndex = getOptionIndex2(filteredOptions, value);
14689
- setHighlightedIndex(
14690
- selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions)
14691
- );
14692
- if (searchable) {
14693
- const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
14694
- return () => window.cancelAnimationFrame(frame);
14695
- }
14696
- }, [isOpen, filteredOptions, searchable, value]);
14759
+ if (isOpen) return;
14760
+ setSearchValue("");
14761
+ setHighlightedIndex(-1);
14762
+ previousHighlightedIndexRef.current = -1;
14763
+ lastLoadMoreOptionsLengthRef.current = null;
14764
+ }, [isOpen]);
14765
+ React58.useEffect(() => {
14766
+ if (!isOpen) return;
14767
+ setHighlightedIndex((current) => {
14768
+ const option = current >= 0 ? filteredOptions[current] : void 0;
14769
+ if (option && !option.isDisabled) return current;
14770
+ const selectedIndex = getOptionIndex2(filteredOptions, value);
14771
+ return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions);
14772
+ });
14773
+ }, [isOpen, filteredOptions, value]);
14774
+ React58.useEffect(() => {
14775
+ if (!isOpen || !searchable) return;
14776
+ const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
14777
+ return () => window.cancelAnimationFrame(frame);
14778
+ }, [isOpen, searchable]);
14697
14779
  const virtualItems = virtualizer.getVirtualItems();
14698
14780
  React58.useEffect(() => {
14699
14781
  if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
14700
14782
  if (virtualItems.length === 0) return;
14701
14783
  const lastItem = virtualItems[virtualItems.length - 1];
14702
- if (lastItem && lastItem.index >= filteredOptions.length - loadMoreThreshold) {
14703
- loadMoreItems();
14704
- }
14784
+ if (!lastItem || lastItem.index < filteredOptions.length - loadMoreThreshold) return;
14785
+ if (lastLoadMoreOptionsLengthRef.current === filteredOptions.length) return;
14786
+ lastLoadMoreOptionsLengthRef.current = filteredOptions.length;
14787
+ loadMoreItems();
14705
14788
  }, [
14706
14789
  canLoadMore,
14707
14790
  filteredOptions.length,
@@ -14712,7 +14795,9 @@ function DashboardInfiniteScrollSelectInternal({
14712
14795
  virtualItems
14713
14796
  ]);
14714
14797
  React58.useEffect(() => {
14715
- if (!isOpen || highlightedIndex < 0) return;
14798
+ const changed = previousHighlightedIndexRef.current !== highlightedIndex;
14799
+ previousHighlightedIndexRef.current = highlightedIndex;
14800
+ if (!isOpen || highlightedIndex < 0 || !changed) return;
14716
14801
  virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
14717
14802
  }, [highlightedIndex, isOpen, virtualizer]);
14718
14803
  const toggleMenu = () => {
@@ -14764,6 +14849,7 @@ function DashboardInfiniteScrollSelectInternal({
14764
14849
  const handleSearchChange = (event) => {
14765
14850
  const next = event.target.value;
14766
14851
  setSearchValue(next);
14852
+ lastLoadMoreOptionsLengthRef.current = null;
14767
14853
  onSearchChange?.(next);
14768
14854
  };
14769
14855
  const emptyMessage = noOptionsMessage?.();
@@ -14816,7 +14902,7 @@ function DashboardInfiniteScrollSelectInternal({
14816
14902
  loading && "cursor-progress"
14817
14903
  ),
14818
14904
  children: [
14819
- /* @__PURE__ */ jsx159("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
14905
+ /* @__PURE__ */ jsx159("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
14820
14906
  /* @__PURE__ */ jsxs102("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
14821
14907
  loading && /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
14822
14908
  /* @__PURE__ */ jsx159(
@@ -14866,7 +14952,7 @@ function DashboardInfiniteScrollSelectInternal({
14866
14952
  ref: searchInputRef,
14867
14953
  type: "text",
14868
14954
  value: searchValue,
14869
- placeholder: searchPlaceholder,
14955
+ placeholder: resolvedSearchPlaceholder,
14870
14956
  onChange: handleSearchChange,
14871
14957
  onKeyDown: handleSearchKeyDown,
14872
14958
  autoComplete: "off",
@@ -14875,7 +14961,10 @@ function DashboardInfiniteScrollSelectInternal({
14875
14961
  className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
14876
14962
  }
14877
14963
  ) }),
14878
- itemCount === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ jsx159(
14964
+ filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs102("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
14965
+ /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
14966
+ /* @__PURE__ */ jsx159("span", { children: resolvedLoadingMoreText })
14967
+ ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ jsx159(
14879
14968
  "div",
14880
14969
  {
14881
14970
  ref: scrollRef,
@@ -14908,8 +14997,8 @@ function DashboardInfiniteScrollSelectInternal({
14908
14997
  transform: `translateY(${virtualItem.start}px)`
14909
14998
  },
14910
14999
  children: isLoaderRow ? /* @__PURE__ */ jsxs102("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
14911
- /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
14912
- /* @__PURE__ */ jsx159("span", { children: loadingMoreText })
15000
+ /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 36, width: 36 }),
15001
+ /* @__PURE__ */ jsx159("span", { children: resolvedLoadingMoreText })
14913
15002
  ] }) : /* @__PURE__ */ jsxs102(
14914
15003
  "button",
14915
15004
  {
@@ -14946,7 +15035,7 @@ function DashboardInfiniteScrollSelectInternal({
14946
15035
  }
14947
15036
  )
14948
15037
  ] }),
14949
- !errorMessage && optional && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
15038
+ !errorMessage && optional && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
14950
15039
  !errorMessage && helperText && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
14951
15040
  errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx159(
14952
15041
  FieldErrorMessage,
@@ -14965,135 +15054,2025 @@ var DashboardInfiniteScrollSelect = React58.forwardRef(
14965
15054
  DashboardInfiniteScrollSelectInternal
14966
15055
  );
14967
15056
 
14968
- // src/searchable-select/SearchableSelect.tsx
15057
+ // src/dashboard/textarea/Textarea.tsx
14969
15058
  import * as React59 from "react";
14970
- import { ChevronDown as ChevronDown6, Search as Search4 } from "lucide-react";
14971
- import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
14972
- import { useCallback as useCallback35 } from "react";
15059
+ import { useTranslation as useTranslation32 } from "react-i18next";
14973
15060
  import { jsx as jsx160, jsxs as jsxs103 } from "react/jsx-runtime";
14974
- var ROW_HEIGHT = 48;
14975
- var DESKTOP_LIST_HEIGHT = 280;
14976
- var MOBILE_LIST_HEIGHT = 420;
14977
- var LOAD_MORE_THRESHOLD = 6;
14978
- function defaultFilter(option, searchValue) {
14979
- return String(option.label).toLowerCase().includes(searchValue.trim().toLowerCase());
15061
+ var LINE_HEIGHT = 20;
15062
+ var VERTICAL_PADDING = 32;
15063
+ function getEmptyState(empty, value, defaultValue) {
15064
+ if (typeof empty === "boolean") return empty;
15065
+ if (value !== void 0) return !String(value);
15066
+ return !defaultValue;
14980
15067
  }
14981
- var SearchableSelectInternal = ({
14982
- options,
14983
- value,
14984
- onChange,
14985
- onBlur,
14986
- onOpenChange,
14987
- searchValue,
14988
- onSearchChange,
14989
- filterOption = defaultFilter,
14990
- loading,
14991
- hasNextPage,
14992
- onLoadMore,
14993
- variant = "default",
14994
- label,
14995
- topLabel,
14996
- placeholder,
14997
- searchPlaceholder = "Search...",
14998
- mobileTitle,
14999
- getValueLabel,
15000
- disabled,
15001
- error,
15002
- invalid,
15003
- optional,
15004
- tooltip,
15005
- hideErrorMessage,
15006
- name,
15007
- className,
15008
- dropdownClassName,
15009
- menuClassName,
15010
- noOptionsMessage,
15011
- loadingMessage
15012
- }, ref) => {
15013
- const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
15014
- const reactId = React59.useId();
15015
- const [open, setOpen] = React59.useState(false);
15016
- const [internalSearchValue, setInternalSearchValue] = React59.useState("");
15017
- const [highlightedIndex, setHighlightedIndex] = React59.useState(-1);
15018
- const containerRef = React59.useRef(null);
15019
- const triggerRef = React59.useRef(null);
15020
- const inputRef = React59.useRef(null);
15021
- const listboxId = `${reactId}-listbox`;
15022
- const labelId = `${reactId}-label`;
15023
- const valueId = `${reactId}-value`;
15024
- const helperTextId = `${reactId}-helper`;
15025
- const errorId = `${reactId}-error`;
15026
- const searchInputId = `${reactId}-search`;
15027
- const effectiveSearchValue = searchValue ?? internalSearchValue;
15028
- const shouldFilterLocally = !onSearchChange && filterOption !== null;
15029
- const visibleOptions = React59.useMemo(() => {
15030
- if (!shouldFilterLocally || !effectiveSearchValue) {
15031
- return options;
15032
- }
15033
- return options.filter((option) => filterOption(option, effectiveSearchValue));
15034
- }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
15035
- const selectedIndex = React59.useMemo(
15036
- () => visibleOptions.findIndex((option) => option.value === value?.value),
15037
- [value?.value, visibleOptions]
15038
- );
15039
- const helperText = placeholder ?? label;
15040
- const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
15041
- const isBlocked = Boolean(disabled) || Boolean(loading);
15042
- const triggerError = error ?? invalid;
15043
- const describedBy = error && !hideErrorMessage ? errorId : void 0;
15044
- const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
15045
- useOutsideClick({
15046
- elementRef: containerRef,
15047
- onOutsideClick: () => closeSelect(),
15048
- isDisabled: !open || isMobile2
15049
- });
15050
- const handleOnOpenChange = useEvent(onOpenChange);
15051
- const setSelectOpen = useCallback35(
15052
- (nextOpen, options2) => {
15053
- setOpen(nextOpen);
15054
- handleOnOpenChange?.(nextOpen);
15055
- if (!nextOpen && options2?.restoreFocus) {
15056
- triggerRef.current?.focus();
15068
+ var DashboardTextarea = React59.forwardRef(
15069
+ function DashboardTextarea2({
15070
+ className,
15071
+ textareaClassName,
15072
+ label,
15073
+ invalid,
15074
+ error,
15075
+ empty,
15076
+ optional,
15077
+ disabled,
15078
+ readOnly,
15079
+ loading,
15080
+ tooltip,
15081
+ name,
15082
+ id,
15083
+ helperText,
15084
+ minRows = 3,
15085
+ maxRows,
15086
+ autosize = true,
15087
+ value,
15088
+ defaultValue,
15089
+ onInput,
15090
+ ...textareaProps
15091
+ }, ref) {
15092
+ const innerRef = React59.useRef(null);
15093
+ const combinedRef = useCombinedRef(ref, innerRef);
15094
+ const reactId = React59.useId();
15095
+ const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
15096
+ const { t } = useTranslation32();
15097
+ const isInvalid = Boolean(invalid || error);
15098
+ const isEmpty = getEmptyState(empty, value, defaultValue);
15099
+ const isBlocked = Boolean(disabled);
15100
+ const resize = React59.useCallback(() => {
15101
+ const el = innerRef.current;
15102
+ if (!el || !autosize) return;
15103
+ el.style.height = "auto";
15104
+ const minHeight = minRows * LINE_HEIGHT + VERTICAL_PADDING;
15105
+ const maxHeight = maxRows ? maxRows * LINE_HEIGHT + VERTICAL_PADDING : Infinity;
15106
+ const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
15107
+ el.style.height = `${nextHeight}px`;
15108
+ el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
15109
+ }, [autosize, maxRows, minRows]);
15110
+ React59.useLayoutEffect(() => {
15111
+ resize();
15112
+ }, [resize, value]);
15113
+ const handleInput = (event) => {
15114
+ resize();
15115
+ onInput?.(event);
15116
+ };
15117
+ return /* @__PURE__ */ jsxs103(
15118
+ "div",
15119
+ {
15120
+ className: cn(
15121
+ "relative block min-h-[88px] w-full",
15122
+ isBlocked && "cursor-not-allowed opacity-50",
15123
+ loading && "cursor-progress opacity-50",
15124
+ className
15125
+ ),
15126
+ children: [
15127
+ label && /* @__PURE__ */ jsxs103(
15128
+ "label",
15129
+ {
15130
+ htmlFor: textareaId,
15131
+ className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
15132
+ children: [
15133
+ label,
15134
+ tooltip && /* @__PURE__ */ jsx160("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx160(HelpTooltip, { content: tooltip, size: 16 }) })
15135
+ ]
15136
+ }
15137
+ ),
15138
+ /* @__PURE__ */ jsx160(
15139
+ "textarea",
15140
+ {
15141
+ ref: combinedRef,
15142
+ id: textareaId,
15143
+ name,
15144
+ value,
15145
+ defaultValue,
15146
+ rows: minRows,
15147
+ disabled: isBlocked || loading,
15148
+ readOnly: isBlocked || readOnly,
15149
+ "aria-invalid": isInvalid,
15150
+ "aria-busy": loading,
15151
+ onInput: handleInput,
15152
+ className: cn(
15153
+ "m-0 box-border block w-full resize-none rounded-[6px] border bg-white px-4 py-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100 ease-in-out",
15154
+ "border-[var(--chekin-color-gray-3)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
15155
+ !isBlocked && "focus:border-[var(--chekin-color-brand-blue)]",
15156
+ isEmpty && "border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
15157
+ isInvalid && "border-[var(--error-message-color)] focus:border-[var(--error-message-color)]",
15158
+ (readOnly || isBlocked) && "cursor-default",
15159
+ isBlocked && "cursor-not-allowed",
15160
+ loading && "cursor-progress",
15161
+ textareaClassName
15162
+ ),
15163
+ style: autosize ? { minHeight: minRows * LINE_HEIGHT + VERTICAL_PADDING } : void 0,
15164
+ ...textareaProps
15165
+ }
15166
+ ),
15167
+ error && /* @__PURE__ */ jsx160(
15168
+ FieldErrorMessage,
15169
+ {
15170
+ id: `${textareaId}-error`,
15171
+ message: error,
15172
+ className: "mt-[1px] text-[14px]"
15173
+ }
15174
+ ),
15175
+ !error && optional && /* @__PURE__ */ jsx160("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
15176
+ !error && helperText && /* @__PURE__ */ jsx160("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
15177
+ ]
15057
15178
  }
15058
- },
15059
- [handleOnOpenChange]
15179
+ );
15180
+ }
15181
+ );
15182
+
15183
+ // src/dashboard/datepicker/Datepicker.tsx
15184
+ import * as React60 from "react";
15185
+ import { ChevronDown as ChevronDown6 } from "lucide-react";
15186
+ import { useTranslation as useTranslation33 } from "react-i18next";
15187
+ import { jsx as jsx161, jsxs as jsxs104 } from "react/jsx-runtime";
15188
+ var MONTHS_IN_YEAR2 = 12;
15189
+ var DEFAULT_MIN_DATE2 = new Date(1920, 0, 1);
15190
+ function getMonthLabels2(locale) {
15191
+ const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
15192
+ return Array.from(
15193
+ { length: MONTHS_IN_YEAR2 },
15194
+ (_, monthIndex) => formatter.format(new Date(2024, monthIndex, 1))
15060
15195
  );
15061
- React59.useEffect(() => {
15062
- if (isBlocked) {
15063
- setSelectOpen(false);
15064
- return;
15065
- }
15066
- if (!open) return;
15067
- const frameId = window.requestAnimationFrame(() => {
15068
- inputRef.current?.focus();
15196
+ }
15197
+ var DAY_PATTERN = /^([1-9]|[12]\d|3[01])$/;
15198
+ var PARTIAL_DAY_PATTERN = /^[0-9]{0,2}$/;
15199
+ var PARTIAL_YEAR_PATTERN = /^[0-9]{0,4}$/;
15200
+ var FULL_YEAR_PATTERN = /^(19|20)\d{2}$/;
15201
+ function isValidCalendarDate(year, monthIndex, day) {
15202
+ const date = new Date(year, monthIndex, day);
15203
+ return date.getFullYear() === year && date.getMonth() === monthIndex && date.getDate() === day;
15204
+ }
15205
+ function partsFromDate(date) {
15206
+ if (!date) return { day: "", monthIndex: null, year: "" };
15207
+ return {
15208
+ day: String(date.getDate()),
15209
+ monthIndex: date.getMonth(),
15210
+ year: String(date.getFullYear())
15211
+ };
15212
+ }
15213
+ function dateFromParts(day, monthIndex, year) {
15214
+ if (!day || monthIndex === null || !year) return null;
15215
+ if (!DAY_PATTERN.test(day) || !FULL_YEAR_PATTERN.test(year)) return null;
15216
+ const dayNum = parseInt(day, 10);
15217
+ const yearNum = parseInt(year, 10);
15218
+ if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
15219
+ return new Date(yearNum, monthIndex, dayNum);
15220
+ }
15221
+ var DashboardDatepicker = React60.forwardRef(
15222
+ function DashboardDatepicker2({
15223
+ label,
15224
+ value,
15225
+ defaultValue,
15226
+ onChange,
15227
+ name,
15228
+ invalid,
15229
+ error,
15230
+ disabled,
15231
+ readOnly,
15232
+ loading,
15233
+ optional,
15234
+ tooltip,
15235
+ className,
15236
+ monthLabels,
15237
+ dayPlaceholder = "DD",
15238
+ yearPlaceholder = "YYYY",
15239
+ monthPlaceholder,
15240
+ mobilePlaceholder,
15241
+ mobileTitle,
15242
+ doneLabel,
15243
+ hideErrorMessage,
15244
+ helperText,
15245
+ width,
15246
+ locale = "en-US",
15247
+ minDate,
15248
+ maxDate,
15249
+ formatValue
15250
+ }, ref) {
15251
+ const containerRef = React60.useRef(null);
15252
+ const dayInputRef = React60.useRef(null);
15253
+ const monthInputRef = React60.useRef(null);
15254
+ const monthListRef = React60.useRef(null);
15255
+ const yearInputRef = React60.useRef(null);
15256
+ const mobileTriggerRef = React60.useRef(null);
15257
+ const wheelBaseId = React60.useId();
15258
+ const reactId = React60.useId();
15259
+ const baseId = name ?? `dash-datepicker-${reactId}`;
15260
+ const dayId = `${baseId}-day`;
15261
+ const monthId = `${baseId}-month`;
15262
+ const yearId = `${baseId}-year`;
15263
+ const labelId = `${baseId}-label`;
15264
+ const errorId = `${baseId}-error`;
15265
+ const { t } = useTranslation33();
15266
+ const resolvedMonthLabels = React60.useMemo(
15267
+ () => monthLabels ?? getMonthLabels2(locale),
15268
+ [locale, monthLabels]
15269
+ );
15270
+ const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
15271
+ const resolvedDoneLabel = doneLabel ?? t("done");
15272
+ const isControlled = value !== void 0;
15273
+ const initialParts = React60.useMemo(
15274
+ () => partsFromDate(value ?? defaultValue ?? null),
15275
+ // eslint-disable-next-line react-hooks/exhaustive-deps
15276
+ []
15277
+ );
15278
+ const [day, setDay] = React60.useState(initialParts.day);
15279
+ const [monthIndex, setMonthIndex] = React60.useState(
15280
+ initialParts.monthIndex
15281
+ );
15282
+ const [year, setYear] = React60.useState(initialParts.year);
15283
+ const [isMonthOpen, setIsMonthOpen] = React60.useState(false);
15284
+ const [isWheelOpen, setIsWheelOpen] = React60.useState(false);
15285
+ const [focusedField, setFocusedField] = React60.useState(null);
15286
+ const [monthInputValue, setMonthInputValue] = React60.useState("");
15287
+ const [monthHighlightIndex, setMonthHighlightIndex] = React60.useState(-1);
15288
+ const isMobile2 = useIsMobile();
15289
+ React60.useImperativeHandle(ref, () => dayInputRef.current, []);
15290
+ React60.useEffect(() => {
15291
+ if (!isControlled) return;
15292
+ const next = partsFromDate(value ?? null);
15293
+ setDay(next.day);
15294
+ setMonthIndex(next.monthIndex);
15295
+ setYear(next.year);
15296
+ }, [isControlled, value]);
15297
+ React60.useEffect(() => {
15298
+ if (focusedField === "month") return;
15299
+ setMonthInputValue(
15300
+ monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
15301
+ );
15302
+ }, [monthIndex, resolvedMonthLabels, focusedField]);
15303
+ const filteredMonths = React60.useMemo(() => {
15304
+ const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
15305
+ const query = monthInputValue.trim().toLowerCase();
15306
+ const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
15307
+ if (!query || monthInputValue === currentLabel) return all;
15308
+ return all.filter((opt) => opt.label.toLowerCase().includes(query));
15309
+ }, [monthInputValue, monthIndex, resolvedMonthLabels]);
15310
+ React60.useEffect(() => {
15311
+ if (!isMonthOpen) {
15312
+ setMonthHighlightIndex(-1);
15313
+ return;
15314
+ }
15315
+ if (monthIndex !== null) {
15316
+ const currentLabel = resolvedMonthLabels[monthIndex];
15317
+ const index = filteredMonths.findIndex((o) => o.label === currentLabel);
15318
+ if (index >= 0) {
15319
+ setMonthHighlightIndex(index);
15320
+ return;
15321
+ }
15322
+ }
15323
+ setMonthHighlightIndex(filteredMonths.length > 0 ? 0 : -1);
15324
+ }, [isMonthOpen, filteredMonths.length]);
15325
+ const hasAnyValue = Boolean(day) || monthIndex !== null || Boolean(year);
15326
+ const isEmpty = !hasAnyValue;
15327
+ const isBlocked = Boolean(disabled) || Boolean(loading);
15328
+ const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
15329
+ const isInvalid = Boolean(invalid || error);
15330
+ const wrapperWidth = toCssSize(width);
15331
+ const currentDate = React60.useMemo(
15332
+ () => dateFromParts(day, monthIndex, year),
15333
+ [day, monthIndex, year]
15334
+ );
15335
+ useOutsideClick({
15336
+ elementRef: containerRef,
15337
+ onOutsideClick: () => setIsMonthOpen(false),
15338
+ isDisabled: !isMonthOpen || isMobile2
15069
15339
  });
15070
- return () => {
15071
- window.cancelAnimationFrame(frameId);
15340
+ const emitChange = React60.useCallback(
15341
+ (nextDay, nextMonth, nextYear) => {
15342
+ if (!onChange) return;
15343
+ const date = dateFromParts(nextDay, nextMonth, nextYear);
15344
+ onChange(date, name);
15345
+ },
15346
+ [name, onChange]
15347
+ );
15348
+ const handleDayChange = (event) => {
15349
+ const next = event.target.value;
15350
+ if (!PARTIAL_DAY_PATTERN.test(next)) return;
15351
+ setDay(next);
15352
+ emitChange(next, monthIndex, year);
15353
+ if (next.length === 2 && DAY_PATTERN.test(next)) {
15354
+ monthInputRef.current?.focus();
15355
+ }
15072
15356
  };
15073
- }, [isBlocked, open, setSelectOpen]);
15074
- React59.useEffect(() => {
15075
- if (!open) {
15076
- setHighlightedIndex(-1);
15077
- return;
15078
- }
15079
- setHighlightedIndex((currentIndex) => {
15080
- if (currentIndex >= 0 && currentIndex < visibleOptions.length && !visibleOptions[currentIndex]?.isDisabled) {
15081
- return currentIndex;
15357
+ const handleYearChange = (event) => {
15358
+ const next = event.target.value;
15359
+ if (!PARTIAL_YEAR_PATTERN.test(next)) return;
15360
+ setYear(next);
15361
+ emitChange(day, monthIndex, next);
15362
+ };
15363
+ const handleMonthSelect = (index) => {
15364
+ setMonthIndex(index);
15365
+ setMonthInputValue(resolvedMonthLabels[index] ?? "");
15366
+ setIsMonthOpen(false);
15367
+ emitChange(day, index, year);
15368
+ yearInputRef.current?.focus();
15369
+ };
15370
+ const handleMonthInputChange = (event) => {
15371
+ setMonthInputValue(event.target.value);
15372
+ setIsMonthOpen(true);
15373
+ setMonthHighlightIndex(0);
15374
+ };
15375
+ const commitMonthInput = React60.useCallback(() => {
15376
+ const query = monthInputValue.trim().toLowerCase();
15377
+ if (!query) {
15378
+ if (monthIndex !== null) {
15379
+ setMonthIndex(null);
15380
+ emitChange(day, null, year);
15381
+ }
15382
+ setMonthInputValue("");
15383
+ return;
15082
15384
  }
15083
- return selectedIndex >= 0 ? selectedIndex : getFirstEnabledIndex(visibleOptions);
15084
- });
15085
- }, [open, selectedIndex, visibleOptions]);
15086
- function openSelect() {
15087
- if (isBlocked) return;
15088
- setSelectOpen(true);
15089
- }
15090
- function closeSelect() {
15091
- setSelectOpen(false, { restoreFocus: true });
15092
- }
15093
- function handleSearchChange(nextValue) {
15094
- if (!onSearchChange) {
15095
- setInternalSearchValue(nextValue);
15096
- }
15385
+ const exactMatch = resolvedMonthLabels.findIndex(
15386
+ (label2) => label2.toLowerCase() === query
15387
+ );
15388
+ if (exactMatch >= 0) {
15389
+ if (exactMatch !== monthIndex) {
15390
+ setMonthIndex(exactMatch);
15391
+ emitChange(day, exactMatch, year);
15392
+ }
15393
+ setMonthInputValue(resolvedMonthLabels[exactMatch]);
15394
+ return;
15395
+ }
15396
+ setMonthInputValue(monthIndex !== null ? resolvedMonthLabels[monthIndex] : "");
15397
+ }, [day, emitChange, monthIndex, monthInputValue, resolvedMonthLabels, year]);
15398
+ const handleMonthInputKeyDown = (event) => {
15399
+ if (isBlocked) return;
15400
+ if (event.key === "ArrowDown") {
15401
+ event.preventDefault();
15402
+ setIsMonthOpen(true);
15403
+ setMonthHighlightIndex(
15404
+ (prev) => filteredMonths.length === 0 ? -1 : Math.min(prev + 1, filteredMonths.length - 1)
15405
+ );
15406
+ return;
15407
+ }
15408
+ if (event.key === "ArrowUp") {
15409
+ event.preventDefault();
15410
+ setIsMonthOpen(true);
15411
+ setMonthHighlightIndex((prev) => Math.max(prev - 1, 0));
15412
+ return;
15413
+ }
15414
+ if (event.key === "Enter") {
15415
+ if (!isMonthOpen) return;
15416
+ event.preventDefault();
15417
+ const target = filteredMonths[monthHighlightIndex];
15418
+ if (target) {
15419
+ handleMonthSelect(target.index);
15420
+ } else {
15421
+ commitMonthInput();
15422
+ }
15423
+ return;
15424
+ }
15425
+ if (event.key === "Escape") {
15426
+ event.preventDefault();
15427
+ setIsMonthOpen(false);
15428
+ setMonthInputValue(monthIndex !== null ? resolvedMonthLabels[monthIndex] : "");
15429
+ return;
15430
+ }
15431
+ if (event.key === "Tab") {
15432
+ setIsMonthOpen(false);
15433
+ }
15434
+ };
15435
+ const focusDayInput = React60.useCallback(() => {
15436
+ if (isBlocked || readOnly) return;
15437
+ dayInputRef.current?.focus();
15438
+ }, [isBlocked, readOnly]);
15439
+ const openWheel = React60.useCallback(() => {
15440
+ if (isBlocked || readOnly) return;
15441
+ setIsWheelOpen(true);
15442
+ }, [isBlocked, readOnly]);
15443
+ const closeWheel = React60.useCallback(() => {
15444
+ setIsWheelOpen(false);
15445
+ mobileTriggerRef.current?.focus();
15446
+ }, []);
15447
+ const closeMonth = () => setIsMonthOpen(false);
15448
+ const showCoverage = isEmpty && !isFocused && !isMobile2;
15449
+ const wheel = useDatePickerWheel({
15450
+ isOpen: isWheelOpen,
15451
+ value: currentDate,
15452
+ defaultValue: null,
15453
+ minDate,
15454
+ maxDate
15455
+ });
15456
+ const handleWheelDone = React60.useCallback(() => {
15457
+ const next = wheel.draftDate;
15458
+ setDay(String(next.getDate()));
15459
+ setMonthIndex(next.getMonth());
15460
+ setYear(String(next.getFullYear()));
15461
+ onChange?.(next, name);
15462
+ setIsWheelOpen(false);
15463
+ mobileTriggerRef.current?.focus();
15464
+ }, [name, onChange, wheel.draftDate]);
15465
+ const defaultFormatValue = React60.useCallback(
15466
+ (date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
15467
+ [resolvedMonthLabels]
15468
+ );
15469
+ const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
15470
+ const monthListboxId = `${monthId}-listbox`;
15471
+ const getMonthOptionId = (index) => `${monthId}-option-${index}`;
15472
+ const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx161("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx161(
15473
+ "ul",
15474
+ {
15475
+ ref: monthListRef,
15476
+ id: monthListboxId,
15477
+ role: "listbox",
15478
+ "aria-labelledby": labelId,
15479
+ className: "m-0 max-h-[260px] list-none overflow-y-auto p-1",
15480
+ children: filteredMonths.map((option, position) => {
15481
+ const isSelected = option.index === monthIndex;
15482
+ const isHighlighted = position === monthHighlightIndex;
15483
+ return /* @__PURE__ */ jsx161("li", { role: "presentation", children: /* @__PURE__ */ jsx161(
15484
+ "button",
15485
+ {
15486
+ id: getMonthOptionId(option.index),
15487
+ type: "button",
15488
+ role: "option",
15489
+ "aria-selected": isSelected,
15490
+ tabIndex: -1,
15491
+ onMouseDown: (event) => event.preventDefault(),
15492
+ onMouseMove: () => setMonthHighlightIndex(position),
15493
+ onClick: () => handleMonthSelect(option.index),
15494
+ className: cn(
15495
+ "flex w-full items-center justify-start rounded-md border-0 bg-transparent px-3 py-[10px] text-left text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors",
15496
+ isHighlighted && "bg-[var(--chekin-color-surface-pressed)] text-[var(--chekin-color-brand-blue)]",
15497
+ isSelected && "font-bold"
15498
+ ),
15499
+ children: option.label
15500
+ }
15501
+ ) }, option.index);
15502
+ })
15503
+ }
15504
+ );
15505
+ const subInputClass = cn(
15506
+ "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
15507
+ isBlocked && "cursor-not-allowed",
15508
+ loading && "cursor-progress"
15509
+ );
15510
+ return /* @__PURE__ */ jsx161(
15511
+ "div",
15512
+ {
15513
+ ref: containerRef,
15514
+ className: cn(
15515
+ "relative w-full max-w-[var(--max-field-width)]",
15516
+ disabled && "cursor-not-allowed opacity-50",
15517
+ loading && "cursor-progress",
15518
+ className
15519
+ ),
15520
+ style: wrapperWidth ? { width: wrapperWidth } : void 0,
15521
+ children: /* @__PURE__ */ jsxs104("div", { className: "relative min-h-[68px] w-full", children: [
15522
+ /* @__PURE__ */ jsxs104("div", { className: "relative w-full", children: [
15523
+ isMobile2 ? /* @__PURE__ */ jsxs104(
15524
+ "button",
15525
+ {
15526
+ ref: mobileTriggerRef,
15527
+ id: dayId,
15528
+ type: "button",
15529
+ "aria-haspopup": "dialog",
15530
+ "aria-expanded": isWheelOpen,
15531
+ "aria-labelledby": labelId,
15532
+ "aria-invalid": isInvalid,
15533
+ "aria-busy": loading,
15534
+ disabled: isBlocked || readOnly,
15535
+ onClick: openWheel,
15536
+ className: cn(
15537
+ "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
15538
+ triggerText ? "bg-transparent text-[var(--chekin-color-brand-navy)]" : "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
15539
+ (isBlocked || readOnly) && "cursor-not-allowed"
15540
+ ),
15541
+ children: [
15542
+ /* @__PURE__ */ jsx161("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
15543
+ /* @__PURE__ */ jsxs104("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
15544
+ loading && /* @__PURE__ */ jsx161(ThreeDotsLoader, { height: 18, width: 18 }),
15545
+ /* @__PURE__ */ jsx161(
15546
+ ChevronDown6,
15547
+ {
15548
+ size: 16,
15549
+ className: cn(
15550
+ "transition-transform duration-200",
15551
+ isWheelOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
15552
+ )
15553
+ }
15554
+ )
15555
+ ] })
15556
+ ]
15557
+ }
15558
+ ) : /* @__PURE__ */ jsxs104(
15559
+ "div",
15560
+ {
15561
+ className: cn(
15562
+ "relative box-border grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(96px,140px)_minmax(0,1fr)] items-center rounded-[6px] text-[16px] font-medium text-[var(--chekin-color-brand-navy)]"
15563
+ ),
15564
+ children: [
15565
+ /* @__PURE__ */ jsx161("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx161(
15566
+ "input",
15567
+ {
15568
+ ref: dayInputRef,
15569
+ id: dayId,
15570
+ type: "text",
15571
+ inputMode: "numeric",
15572
+ autoComplete: "off",
15573
+ name: name ? `${name}-day` : void 0,
15574
+ value: day,
15575
+ placeholder: dayPlaceholder,
15576
+ disabled: isBlocked,
15577
+ readOnly,
15578
+ "aria-invalid": isInvalid,
15579
+ "aria-labelledby": labelId,
15580
+ onChange: handleDayChange,
15581
+ onFocus: () => setFocusedField("day"),
15582
+ onBlur: () => setFocusedField(null),
15583
+ maxLength: 2,
15584
+ className: subInputClass
15585
+ }
15586
+ ) }),
15587
+ /* @__PURE__ */ jsxs104("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
15588
+ /* @__PURE__ */ jsx161(
15589
+ "input",
15590
+ {
15591
+ ref: monthInputRef,
15592
+ id: monthId,
15593
+ type: "text",
15594
+ role: "combobox",
15595
+ autoComplete: "off",
15596
+ "aria-haspopup": "listbox",
15597
+ "aria-expanded": isMonthOpen,
15598
+ "aria-controls": monthListboxId,
15599
+ "aria-autocomplete": "list",
15600
+ "aria-activedescendant": monthHighlightIndex >= 0 && filteredMonths[monthHighlightIndex] ? getMonthOptionId(filteredMonths[monthHighlightIndex].index) : void 0,
15601
+ "aria-labelledby": labelId,
15602
+ "aria-invalid": isInvalid,
15603
+ name: name ? `${name}-month` : void 0,
15604
+ value: monthInputValue,
15605
+ placeholder: resolvedMonthPlaceholder,
15606
+ disabled: isBlocked,
15607
+ readOnly,
15608
+ onChange: handleMonthInputChange,
15609
+ onFocus: () => {
15610
+ setFocusedField("month");
15611
+ if (!isBlocked && !readOnly) {
15612
+ setIsMonthOpen(true);
15613
+ monthInputRef.current?.select();
15614
+ }
15615
+ },
15616
+ onBlur: () => {
15617
+ setFocusedField(null);
15618
+ commitMonthInput();
15619
+ },
15620
+ onClick: () => {
15621
+ if (!isBlocked && !readOnly) setIsMonthOpen(true);
15622
+ },
15623
+ onKeyDown: handleMonthInputKeyDown,
15624
+ className: cn(
15625
+ "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 outline-none placeholder:text-[var(--chekin-color-gray-1)]",
15626
+ monthIndex !== null ? "text-[var(--chekin-color-brand-navy)]" : "text-[var(--chekin-color-gray-1)]",
15627
+ (isBlocked || readOnly) && "cursor-not-allowed"
15628
+ )
15629
+ }
15630
+ ),
15631
+ /* @__PURE__ */ jsx161(
15632
+ ChevronDown6,
15633
+ {
15634
+ size: 14,
15635
+ onMouseDown: (event) => {
15636
+ event.preventDefault();
15637
+ if (isBlocked || readOnly) return;
15638
+ setIsMonthOpen((prev) => !prev);
15639
+ monthInputRef.current?.focus();
15640
+ },
15641
+ className: cn(
15642
+ "shrink-0 cursor-pointer text-[var(--chekin-color-gray-2)] transition-transform duration-200",
15643
+ isMonthOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
15644
+ )
15645
+ }
15646
+ )
15647
+ ] }),
15648
+ /* @__PURE__ */ jsxs104("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
15649
+ /* @__PURE__ */ jsx161(
15650
+ "input",
15651
+ {
15652
+ ref: yearInputRef,
15653
+ id: yearId,
15654
+ type: "text",
15655
+ inputMode: "numeric",
15656
+ autoComplete: "off",
15657
+ name: name ? `${name}-year` : void 0,
15658
+ value: year,
15659
+ placeholder: yearPlaceholder,
15660
+ disabled: isBlocked,
15661
+ readOnly,
15662
+ "aria-invalid": isInvalid,
15663
+ "aria-labelledby": labelId,
15664
+ onChange: handleYearChange,
15665
+ onFocus: () => setFocusedField("year"),
15666
+ onBlur: () => setFocusedField(null),
15667
+ maxLength: 4,
15668
+ className: subInputClass
15669
+ }
15670
+ ),
15671
+ loading && /* @__PURE__ */ jsx161(
15672
+ ThreeDotsLoader,
15673
+ {
15674
+ height: 18,
15675
+ width: 18,
15676
+ className: "ml-2 text-[var(--chekin-color-gray-2)]"
15677
+ }
15678
+ )
15679
+ ] })
15680
+ ]
15681
+ }
15682
+ ),
15683
+ showCoverage && /* @__PURE__ */ jsx161(
15684
+ "div",
15685
+ {
15686
+ className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
15687
+ onClick: focusDayInput,
15688
+ "aria-hidden": "true"
15689
+ }
15690
+ ),
15691
+ /* @__PURE__ */ jsx161(
15692
+ Fieldset,
15693
+ {
15694
+ isFocused,
15695
+ invalid: isInvalid,
15696
+ isEmpty,
15697
+ isActivated: !isEmpty || isFocused,
15698
+ disabled,
15699
+ loading,
15700
+ readOnly,
15701
+ htmlFor: dayId,
15702
+ labelId,
15703
+ legend: label,
15704
+ label,
15705
+ tooltip,
15706
+ onClick: isMobile2 ? openWheel : showCoverage ? focusDayInput : void 0
15707
+ }
15708
+ ),
15709
+ isMonthOpen && !isMobile2 && /* @__PURE__ */ jsx161("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
15710
+ ] }),
15711
+ isMobile2 && /* @__PURE__ */ jsx161(
15712
+ DatePickerContent,
15713
+ {
15714
+ baseId: wheelBaseId,
15715
+ open: isWheelOpen,
15716
+ isMobile: true,
15717
+ label: label ?? t("pick_date"),
15718
+ title: mobileTitle ?? label ?? t("pick_date"),
15719
+ doneLabel: resolvedDoneLabel,
15720
+ monthLabels: wheel.months.map((m) => resolvedMonthLabels[m] ?? ""),
15721
+ days: wheel.days,
15722
+ years: wheel.years,
15723
+ monthIndex: wheel.monthIndex,
15724
+ dayIndex: wheel.dayIndex,
15725
+ yearIndex: wheel.yearIndex,
15726
+ monthScrollTop: wheel.monthScrollTop,
15727
+ dayScrollTop: wheel.dayScrollTop,
15728
+ yearScrollTop: wheel.yearScrollTop,
15729
+ monthListRef: wheel.monthListRef,
15730
+ dayListRef: wheel.dayListRef,
15731
+ yearListRef: wheel.yearListRef,
15732
+ onOpenChange: (next) => next ? openWheel() : closeWheel(),
15733
+ onDone: handleWheelDone,
15734
+ onColumnScroll: wheel.handleColumnScroll,
15735
+ onColumnKeyDown: wheel.handleColumnKeyDown,
15736
+ onOptionSelect: wheel.handleOptionSelect
15737
+ }
15738
+ ),
15739
+ !error && optional && /* @__PURE__ */ jsx161("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
15740
+ !error && helperText && /* @__PURE__ */ jsx161("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
15741
+ error && !hideErrorMessage && /* @__PURE__ */ jsx161(
15742
+ FieldErrorMessage,
15743
+ {
15744
+ id: errorId,
15745
+ message: error,
15746
+ className: "mt-[1px] text-[14px]"
15747
+ }
15748
+ )
15749
+ ] })
15750
+ }
15751
+ );
15752
+ }
15753
+ );
15754
+
15755
+ // src/dashboard/date-range-picker/DateRangePicker.tsx
15756
+ import * as React64 from "react";
15757
+ import { useTranslation as useTranslation34 } from "react-i18next";
15758
+
15759
+ // src/dashboard/date-range-picker/isDayBlocked.ts
15760
+ import { differenceInDays, isAfter, isBefore, isSameDay } from "date-fns";
15761
+
15762
+ // src/dashboard/date-range-picker/dateUtils.ts
15763
+ import { format as formatDateFns, isValid, parse } from "date-fns";
15764
+ var DEFAULT_DISPLAY_FORMAT = "dd-MM-yyyy";
15765
+ var SUPPORTED_FORMATS = ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"];
15766
+ var formatDate = (format2 = DEFAULT_DISPLAY_FORMAT) => (date) => formatDateFns(date, format2);
15767
+ var parseDate = (displayFormat) => (dateStr) => {
15768
+ if (!dateStr) return void 0;
15769
+ const formats = displayFormat ? Array.from(/* @__PURE__ */ new Set([...SUPPORTED_FORMATS, displayFormat])) : SUPPORTED_FORMATS;
15770
+ for (const format2 of formats) {
15771
+ const parsed = parse(dateStr, format2, /* @__PURE__ */ new Date());
15772
+ if (isValid(parsed) && formatDateFns(parsed, format2) === dateStr) {
15773
+ return parsed;
15774
+ }
15775
+ }
15776
+ return void 0;
15777
+ };
15778
+ function toDate(input) {
15779
+ if (input === void 0 || input === null || input === "") return void 0;
15780
+ if (input instanceof Date) return Number.isNaN(input.getTime()) ? void 0 : input;
15781
+ const next = new Date(input);
15782
+ return Number.isNaN(next.getTime()) ? void 0 : next;
15783
+ }
15784
+ function resetTime(date) {
15785
+ const next = toDate(date) ?? /* @__PURE__ */ new Date();
15786
+ next.setHours(0, 0, 0, 0);
15787
+ return next;
15788
+ }
15789
+
15790
+ // src/dashboard/date-range-picker/isDayBlocked.ts
15791
+ var isDayBlocked = ({ minDate, maxDate, maxDays, minDays, datesRange }) => (date) => {
15792
+ const startDate = datesRange?.from ? resetTime(datesRange.from) : null;
15793
+ const endDate = datesRange?.to ? resetTime(datesRange.to) : null;
15794
+ const min = toDate(minDate);
15795
+ const max = toDate(maxDate);
15796
+ if (maxDays) {
15797
+ if (startDate && Math.abs(differenceInDays(date, startDate)) + 1 > maxDays) {
15798
+ return true;
15799
+ }
15800
+ if (endDate && Math.abs(differenceInDays(date, endDate)) + 1 > maxDays) {
15801
+ return true;
15802
+ }
15803
+ }
15804
+ if (minDays) {
15805
+ if (startDate && !isSameDay(date, startDate) && Math.abs(differenceInDays(date, startDate)) < minDays) {
15806
+ return true;
15807
+ }
15808
+ if (endDate && !isSameDay(date, endDate) && Math.abs(differenceInDays(date, endDate)) < minDays) {
15809
+ return true;
15810
+ }
15811
+ }
15812
+ if (min && isBefore(date, resetTime(min))) return true;
15813
+ if (max && isAfter(date, resetTime(max))) return true;
15814
+ return false;
15815
+ };
15816
+
15817
+ // src/dashboard/date-range-picker/createDisabledMatchers.ts
15818
+ var createDisabledMatchers = ({
15819
+ disabledDays,
15820
+ minDate,
15821
+ maxDate,
15822
+ maxDays,
15823
+ minDays,
15824
+ datesRange
15825
+ }) => {
15826
+ const result = [
15827
+ isDayBlocked({ minDate, maxDate, maxDays, minDays, datesRange })
15828
+ ];
15829
+ if (Array.isArray(disabledDays)) result.push(...disabledDays);
15830
+ else if (disabledDays) result.push(disabledDays);
15831
+ return result;
15832
+ };
15833
+
15834
+ // src/dashboard/date-range-picker/hooks/useRangeValue.ts
15835
+ import * as React61 from "react";
15836
+ function useRangeValue({
15837
+ value: externalValue,
15838
+ defaultValue,
15839
+ onChange,
15840
+ name
15841
+ }) {
15842
+ const isControlled = externalValue !== void 0;
15843
+ const [internalValue, setInternalValue] = React61.useState(
15844
+ defaultValue
15845
+ );
15846
+ const value = isControlled ? externalValue : internalValue;
15847
+ const commit = React61.useCallback(
15848
+ (next) => {
15849
+ if (!isControlled) setInternalValue(next);
15850
+ if (next === void 0) {
15851
+ onChange?.(void 0, name);
15852
+ return;
15853
+ }
15854
+ if (next?.from && next?.to) onChange?.(next, name);
15855
+ },
15856
+ [isControlled, name, onChange]
15857
+ );
15858
+ return { value, commit };
15859
+ }
15860
+
15861
+ // src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
15862
+ import * as React62 from "react";
15863
+ function useRangeTextInputs({
15864
+ value,
15865
+ format: format2,
15866
+ parse: parse3,
15867
+ onCommit,
15868
+ onBlur
15869
+ }) {
15870
+ const [fromText, setFromText] = React62.useState(value?.from ? format2(value.from) : "");
15871
+ const [toText, setToText] = React62.useState(value?.to ? format2(value.to) : "");
15872
+ React62.useEffect(() => {
15873
+ setFromText(value?.from ? format2(value.from) : "");
15874
+ setToText(value?.to ? format2(value.to) : "");
15875
+ }, [format2, value?.from, value?.to]);
15876
+ const handleFromBlur = React62.useCallback(() => {
15877
+ if (!fromText) {
15878
+ const next = { from: void 0, to: value?.to };
15879
+ onCommit(next);
15880
+ onBlur?.(next);
15881
+ return void 0;
15882
+ }
15883
+ const parsed = parse3(fromText);
15884
+ if (parsed) {
15885
+ const next = { from: parsed, to: value?.to };
15886
+ onCommit(next);
15887
+ onBlur?.(next);
15888
+ return parsed;
15889
+ }
15890
+ setFromText(value?.from ? format2(value.from) : "");
15891
+ return void 0;
15892
+ }, [format2, fromText, onBlur, onCommit, parse3, value?.from, value?.to]);
15893
+ const handleToBlur = React62.useCallback(() => {
15894
+ if (!toText) {
15895
+ const next = { from: value?.from, to: void 0 };
15896
+ onCommit(next);
15897
+ onBlur?.(next);
15898
+ return;
15899
+ }
15900
+ const parsed = parse3(toText);
15901
+ if (parsed) {
15902
+ const next = { from: value?.from, to: parsed };
15903
+ onCommit(next);
15904
+ onBlur?.(next);
15905
+ return;
15906
+ }
15907
+ setToText(value?.to ? format2(value.to) : "");
15908
+ }, [format2, onBlur, onCommit, parse3, toText, value?.from, value?.to]);
15909
+ return {
15910
+ fromText,
15911
+ toText,
15912
+ setFromText,
15913
+ setToText,
15914
+ handleFromBlur,
15915
+ handleToBlur
15916
+ };
15917
+ }
15918
+
15919
+ // src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
15920
+ import * as React63 from "react";
15921
+ function useRangeMonthSync(value) {
15922
+ const isPreloadedRef = React63.useRef(false);
15923
+ const [month, setMonth] = React63.useState(value?.from ?? /* @__PURE__ */ new Date());
15924
+ React63.useEffect(() => {
15925
+ if (value?.from && !isPreloadedRef.current) {
15926
+ setMonth(value.from);
15927
+ isPreloadedRef.current = true;
15928
+ }
15929
+ }, [value?.from]);
15930
+ const syncMonthToValue = React63.useCallback((next) => {
15931
+ isPreloadedRef.current = true;
15932
+ if (next?.from) setMonth(next.from);
15933
+ }, []);
15934
+ const resetPreload = React63.useCallback(() => {
15935
+ isPreloadedRef.current = false;
15936
+ }, []);
15937
+ return { month, setMonth, syncMonthToValue, resetPreload };
15938
+ }
15939
+
15940
+ // src/dashboard/date-range-picker/utils/rangeSelection.ts
15941
+ import { isBefore as isBefore2 } from "date-fns";
15942
+ function resolveRangeSelection({
15943
+ previous,
15944
+ range,
15945
+ pickedDate
15946
+ }) {
15947
+ const startingNewRange = !previous?.from || previous.from && previous.to || range?.to && pickedDate && isBefore2(pickedDate, range.to);
15948
+ if (startingNewRange) {
15949
+ return { next: { from: pickedDate, to: void 0 }, shouldClose: false };
15950
+ }
15951
+ const next = range;
15952
+ const shouldClose = Boolean(
15953
+ next?.from && next?.to || pickedDate && range?.from && isBefore2(range.from, pickedDate)
15954
+ );
15955
+ return { next, shouldClose };
15956
+ }
15957
+
15958
+ // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
15959
+ import { CalendarDays, SquareX as SquareX3 } from "lucide-react";
15960
+ import { jsx as jsx162, jsxs as jsxs105 } from "react/jsx-runtime";
15961
+ var DEFAULT_PLACEHOLDER = "00-00-0000";
15962
+ var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
15963
+ var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
15964
+ function DateRangeInputs({
15965
+ fromId,
15966
+ toId,
15967
+ name,
15968
+ labelId,
15969
+ fromText,
15970
+ toText,
15971
+ fromPlaceholder = DEFAULT_PLACEHOLDER,
15972
+ toPlaceholder = DEFAULT_PLACEHOLDER,
15973
+ fromInputRef,
15974
+ toInputRef,
15975
+ isEmpty,
15976
+ isFocused,
15977
+ isBlocked,
15978
+ isInvalid,
15979
+ loading,
15980
+ readOnly,
15981
+ hideClearDates,
15982
+ hideCalendarIcon,
15983
+ isOpen,
15984
+ focusedInput,
15985
+ clearLabel,
15986
+ openCalendarLabel,
15987
+ onFromTextChange,
15988
+ onToTextChange,
15989
+ onFromFocus,
15990
+ onToFocus,
15991
+ onFromBlur,
15992
+ onToBlur,
15993
+ onRowClick,
15994
+ onReset,
15995
+ onToggleCalendar
15996
+ }) {
15997
+ const inputClass = cn(
15998
+ inputBaseClass,
15999
+ isBlocked && "cursor-not-allowed",
16000
+ loading && "cursor-progress"
16001
+ );
16002
+ return /* @__PURE__ */ jsxs105(
16003
+ "div",
16004
+ {
16005
+ className: cn(
16006
+ "relative box-border flex h-12 w-full items-center rounded-[6px] pr-2 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] transition-colors duration-200",
16007
+ isEmpty && !isFocused && "bg-[var(--chekin-color-surface-input-empty)]"
16008
+ ),
16009
+ onClick: onRowClick,
16010
+ children: [
16011
+ /* @__PURE__ */ jsx162(
16012
+ "input",
16013
+ {
16014
+ ref: fromInputRef,
16015
+ id: fromId,
16016
+ name: name ? `${name}-from` : void 0,
16017
+ type: "text",
16018
+ autoComplete: "off",
16019
+ placeholder: fromPlaceholder,
16020
+ value: fromText,
16021
+ disabled: isBlocked,
16022
+ readOnly,
16023
+ "aria-invalid": isInvalid,
16024
+ "aria-labelledby": labelId,
16025
+ onChange: (event) => onFromTextChange(event.target.value),
16026
+ onFocus: onFromFocus,
16027
+ onBlur: onFromBlur,
16028
+ className: cn(
16029
+ inputClass,
16030
+ "max-w-[110px] pl-[14px] pr-0",
16031
+ isEmpty && !isFocused && "placeholder:invisible"
16032
+ )
16033
+ }
16034
+ ),
16035
+ /* @__PURE__ */ jsx162(
16036
+ "span",
16037
+ {
16038
+ "aria-hidden": "true",
16039
+ className: cn(
16040
+ "shrink-0 px-2 text-[18px] leading-none text-[var(--chekin-color-gray-2)]",
16041
+ isEmpty && !isFocused && "invisible"
16042
+ ),
16043
+ children: "\u2192"
16044
+ }
16045
+ ),
16046
+ /* @__PURE__ */ jsx162(
16047
+ "input",
16048
+ {
16049
+ ref: toInputRef,
16050
+ id: toId,
16051
+ name: name ? `${name}-to` : void 0,
16052
+ type: "text",
16053
+ autoComplete: "off",
16054
+ placeholder: toPlaceholder,
16055
+ value: toText,
16056
+ disabled: isBlocked,
16057
+ readOnly,
16058
+ "aria-invalid": isInvalid,
16059
+ "aria-labelledby": labelId,
16060
+ onChange: (event) => onToTextChange(event.target.value),
16061
+ onFocus: onToFocus,
16062
+ onBlur: onToBlur,
16063
+ className: cn(
16064
+ inputClass,
16065
+ "px-0",
16066
+ isEmpty && !isFocused && "placeholder:invisible"
16067
+ )
16068
+ }
16069
+ ),
16070
+ /* @__PURE__ */ jsxs105("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
16071
+ loading && /* @__PURE__ */ jsx162(ThreeDotsLoader, { height: 18, width: 18 }),
16072
+ !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx162(
16073
+ "button",
16074
+ {
16075
+ type: "button",
16076
+ disabled: isBlocked,
16077
+ onClick: onReset,
16078
+ className: iconButtonClass,
16079
+ "aria-label": clearLabel,
16080
+ children: /* @__PURE__ */ jsx162(SquareX3, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
16081
+ }
16082
+ ),
16083
+ !readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx162(
16084
+ "button",
16085
+ {
16086
+ type: "button",
16087
+ disabled: isBlocked,
16088
+ onClick: onToggleCalendar,
16089
+ "aria-pressed": isOpen,
16090
+ className: cn(
16091
+ "flex h-6 w-6 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 outline-none disabled:cursor-not-allowed",
16092
+ focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
16093
+ ),
16094
+ "aria-label": openCalendarLabel,
16095
+ children: /* @__PURE__ */ jsx162(CalendarDays, { size: 18 })
16096
+ }
16097
+ )
16098
+ ] })
16099
+ ]
16100
+ }
16101
+ );
16102
+ }
16103
+
16104
+ // src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
16105
+ import { ArrowLeft, ArrowRight } from "lucide-react";
16106
+ import {
16107
+ DayPicker as DayPicker2
16108
+ } from "react-day-picker";
16109
+
16110
+ // src/dashboard/_calendar/dashboardCalendarClassNames.ts
16111
+ var dashboardCalendarClassNames = {
16112
+ root: "relative",
16113
+ months: "relative flex flex-col gap-6 sm:flex-row sm:gap-8",
16114
+ month: "w-full",
16115
+ month_caption: "relative z-0 mb-3 flex h-9 items-center justify-center text-[18px] font-normal capitalize text-[var(--chekin-color-brand-navy)]",
16116
+ caption_label: "px-3 text-[18px] font-normal",
16117
+ nav: "absolute left-0 right-0 top-[4px] z-10 flex justify-between px-[6px] pointer-events-none",
16118
+ button_previous: "pointer-events-auto inline-flex h-[26px] w-[26px] items-center justify-center rounded-[2px] border border-[#9696b9] bg-transparent text-[var(--chekin-color-brand-blue)] outline-none transition-colors hover:bg-[#f0f8ff] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
16119
+ button_next: "pointer-events-auto inline-flex h-[26px] w-[26px] items-center justify-center rounded-[2px] border border-[#9696b9] bg-transparent text-[var(--chekin-color-brand-blue)] outline-none transition-colors hover:bg-[#f0f8ff] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
16120
+ weekday: "size-9 p-0 text-[14px] font-normal text-[var(--chekin-color-brand-blue)]",
16121
+ day_button: [
16122
+ "relative mx-auto flex size-9 items-center justify-center whitespace-nowrap rounded-full p-0",
16123
+ "text-[14px] font-light text-[var(--chekin-color-brand-navy)] outline-offset-2",
16124
+ "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--chekin-color-brand-blue)]/60",
16125
+ "hover:bg-[#f0f8ff]",
16126
+ "group-data-[selected]:bg-[var(--chekin-color-brand-blue)] group-data-[selected]:text-white",
16127
+ "group-data-[disabled]:pointer-events-none group-data-[disabled]:text-[var(--chekin-color-gray-2)] group-data-[disabled]:line-through",
16128
+ "group-data-[outside]:text-[var(--chekin-color-gray-2)]",
16129
+ "group-data-[outside]:group-data-[selected]:text-white",
16130
+ "group-[.range-middle]:rounded-none group-[.range-middle]:bg-transparent",
16131
+ "group-data-[selected]:group-[.range-middle]:bg-[#edf7ff] group-data-[selected]:group-[.range-middle]:text-[var(--chekin-color-brand-navy)]"
16132
+ ].join(" "),
16133
+ day: "group size-9 p-0 text-center text-[14px]",
16134
+ range_start: "range-start",
16135
+ range_end: "range-end",
16136
+ range_middle: "range-middle",
16137
+ today: [
16138
+ "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2",
16139
+ "*:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full",
16140
+ "*:after:bg-[var(--chekin-color-brand-blue)]",
16141
+ "[&[data-selected]:not(.range-middle)>*]:after:bg-white"
16142
+ ].join(" "),
16143
+ outside: "text-[var(--chekin-color-gray-2)]",
16144
+ hidden: "invisible"
16145
+ };
16146
+
16147
+ // src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
16148
+ import { jsx as jsx163 } from "react/jsx-runtime";
16149
+ var calendarComponents = {
16150
+ Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx163(ArrowLeft, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ jsx163(ArrowRight, { size: 14, strokeWidth: 2, "aria-hidden": "true" })
16151
+ };
16152
+ function DateRangeCalendar({
16153
+ value,
16154
+ month,
16155
+ onMonthChange,
16156
+ onSelect,
16157
+ numberOfMonths,
16158
+ minDate,
16159
+ maxDate,
16160
+ maxDays,
16161
+ minDays,
16162
+ autoFocus,
16163
+ disabledMatchers,
16164
+ components: customComponents,
16165
+ ...dayPickerProps
16166
+ }) {
16167
+ return /* @__PURE__ */ jsx163(
16168
+ DayPicker2,
16169
+ {
16170
+ mode: "range",
16171
+ selected: value,
16172
+ month,
16173
+ onMonthChange,
16174
+ onSelect,
16175
+ numberOfMonths,
16176
+ showOutsideDays: true,
16177
+ startMonth: minDate,
16178
+ endMonth: maxDate,
16179
+ max: maxDays,
16180
+ min: minDays,
16181
+ autoFocus,
16182
+ classNames: dashboardCalendarClassNames,
16183
+ components: { ...calendarComponents, ...customComponents },
16184
+ className: "p-5",
16185
+ disabled: disabledMatchers,
16186
+ ...dayPickerProps
16187
+ }
16188
+ );
16189
+ }
16190
+
16191
+ // src/dashboard/date-range-picker/components/DateRangePopover.tsx
16192
+ import { jsx as jsx164, jsxs as jsxs106 } from "react/jsx-runtime";
16193
+ function DateRangePopover({
16194
+ isOpen,
16195
+ isMobile: isMobile2,
16196
+ openDirection,
16197
+ drawerTitle,
16198
+ drawerDescription,
16199
+ onClose,
16200
+ children
16201
+ }) {
16202
+ if (!isOpen) return null;
16203
+ if (isMobile2) {
16204
+ return /* @__PURE__ */ jsx164(
16205
+ Drawer,
16206
+ {
16207
+ open: isOpen,
16208
+ onOpenChange: (next) => {
16209
+ if (!next) onClose();
16210
+ },
16211
+ children: /* @__PURE__ */ jsxs106(
16212
+ DrawerContent,
16213
+ {
16214
+ onClose,
16215
+ lockScroll: false,
16216
+ className: "max-h-[calc(100vh-1rem)]",
16217
+ children: [
16218
+ /* @__PURE__ */ jsx164(DrawerTitle, { className: "sr-only", children: drawerTitle }),
16219
+ /* @__PURE__ */ jsx164(DrawerDescription, { className: "sr-only", children: drawerDescription }),
16220
+ /* @__PURE__ */ jsx164("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
16221
+ ]
16222
+ }
16223
+ )
16224
+ }
16225
+ );
16226
+ }
16227
+ return /* @__PURE__ */ jsx164(
16228
+ "div",
16229
+ {
16230
+ className: cn(
16231
+ "absolute left-0 z-30 w-max overflow-hidden rounded-[3px] border border-[var(--chekin-color-brand-blue)] bg-white shadow-[0_5px_5px_0_rgba(33,72,255,0.1)]",
16232
+ openDirection === "up" ? "bottom-full mb-2" : "top-full mt-1"
16233
+ ),
16234
+ children
16235
+ }
16236
+ );
16237
+ }
16238
+
16239
+ // src/dashboard/date-range-picker/DateRangePicker.tsx
16240
+ import { jsx as jsx165, jsxs as jsxs107 } from "react/jsx-runtime";
16241
+ var DashboardDateRangePicker = React64.forwardRef(function DashboardDateRangePicker2({
16242
+ label,
16243
+ value: externalValue,
16244
+ defaultValue,
16245
+ onChange,
16246
+ onBlur,
16247
+ name,
16248
+ invalid,
16249
+ error,
16250
+ disabled,
16251
+ readOnly,
16252
+ loading,
16253
+ optional,
16254
+ tooltip,
16255
+ className,
16256
+ displayFormat = DEFAULT_DISPLAY_FORMAT,
16257
+ fromPlaceholder,
16258
+ toPlaceholder,
16259
+ minDate,
16260
+ maxDate,
16261
+ minDays,
16262
+ maxDays,
16263
+ disabledDays,
16264
+ hideClearDates,
16265
+ hideCalendarIcon,
16266
+ hideErrorMessage,
16267
+ helperText,
16268
+ width,
16269
+ numberOfMonths,
16270
+ openDirection = "down",
16271
+ autoFocusOnOpen = true,
16272
+ components: customComponents,
16273
+ ...dayPickerProps
16274
+ }, ref) {
16275
+ const containerRef = React64.useRef(null);
16276
+ const fromInputRef = React64.useRef(null);
16277
+ const toInputRef = React64.useRef(null);
16278
+ const reactId = React64.useId();
16279
+ const baseId = name ?? `dash-daterange-${reactId}`;
16280
+ const fromId = `${baseId}-from`;
16281
+ const toId = `${baseId}-to`;
16282
+ const labelId = `${baseId}-label`;
16283
+ const errorId = `${baseId}-error`;
16284
+ const normalizedValue = React64.useMemo(() => {
16285
+ if (externalValue === void 0) return void 0;
16286
+ return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
16287
+ }, [externalValue]);
16288
+ const normalizedDefaultValue = React64.useMemo(() => {
16289
+ if (defaultValue === void 0) return void 0;
16290
+ return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
16291
+ }, [defaultValue]);
16292
+ const { value, commit } = useRangeValue({
16293
+ value: normalizedValue,
16294
+ defaultValue: normalizedDefaultValue,
16295
+ onChange,
16296
+ name
16297
+ });
16298
+ const normalizedMinDate = React64.useMemo(() => toDate(minDate), [minDate]);
16299
+ const normalizedMaxDate = React64.useMemo(() => toDate(maxDate), [maxDate]);
16300
+ const formatter = React64.useMemo(() => formatDate(displayFormat), [displayFormat]);
16301
+ const parser = React64.useMemo(() => parseDate(displayFormat), [displayFormat]);
16302
+ const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({ value, format: formatter, parse: parser, onCommit: commit, onBlur });
16303
+ const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
16304
+ const [isOpen, setIsOpen] = React64.useState(false);
16305
+ const [focusedInput, setFocusedInput] = React64.useState(null);
16306
+ const [autoFocus, setAutoFocus] = React64.useState(false);
16307
+ const isMobile2 = useIsMobile();
16308
+ const { t } = useTranslation34();
16309
+ const drawerTitle = label ?? t("select_dates");
16310
+ const drawerDescription = label ?? t("pick_date_range");
16311
+ const isEmpty = !value?.from && !value?.to;
16312
+ const isBlocked = Boolean(disabled) || Boolean(loading);
16313
+ const isInvalid = Boolean(invalid || error);
16314
+ const isFocused = focusedInput !== null || isOpen;
16315
+ const wrapperWidth = toCssSize(width);
16316
+ const monthsToShow = numberOfMonths ?? (isMobile2 ? 1 : 2);
16317
+ const closeCalendar = React64.useCallback(() => {
16318
+ setIsOpen(false);
16319
+ setFocusedInput(null);
16320
+ setAutoFocus(false);
16321
+ if (value?.from) setMonth(value.from);
16322
+ }, [setMonth, value?.from]);
16323
+ const openCalendar = React64.useCallback(() => {
16324
+ if (isBlocked || readOnly) return;
16325
+ setIsOpen(true);
16326
+ }, [isBlocked, readOnly]);
16327
+ useOutsideClick({
16328
+ elementRef: containerRef,
16329
+ onOutsideClick: closeCalendar,
16330
+ isDisabled: !isOpen || isMobile2
16331
+ });
16332
+ const handlePickerChange = React64.useCallback(
16333
+ (range, pickedDate) => {
16334
+ const { next, shouldClose } = resolveRangeSelection({
16335
+ previous: value,
16336
+ range,
16337
+ pickedDate
16338
+ });
16339
+ syncMonthToValue(next);
16340
+ commit(next);
16341
+ if (shouldClose) closeCalendar();
16342
+ },
16343
+ [closeCalendar, commit, syncMonthToValue, value]
16344
+ );
16345
+ const handleReset = (event) => {
16346
+ event.preventDefault();
16347
+ event.stopPropagation();
16348
+ commit(void 0);
16349
+ setFromText("");
16350
+ setToText("");
16351
+ setMonth(/* @__PURE__ */ new Date());
16352
+ };
16353
+ const disabledMatchers = React64.useMemo(
16354
+ () => createDisabledMatchers({
16355
+ minDate: normalizedMinDate,
16356
+ maxDate: normalizedMaxDate,
16357
+ maxDays,
16358
+ minDays,
16359
+ datesRange: value,
16360
+ disabledDays
16361
+ }),
16362
+ [disabledDays, maxDays, minDays, normalizedMaxDate, normalizedMinDate, value]
16363
+ );
16364
+ const toggleCalendar = () => {
16365
+ if (isOpen) {
16366
+ closeCalendar();
16367
+ return;
16368
+ }
16369
+ openCalendar();
16370
+ if (autoFocusOnOpen) setAutoFocus(true);
16371
+ };
16372
+ React64.useImperativeHandle(
16373
+ ref,
16374
+ () => ({
16375
+ setDateRange: (range) => {
16376
+ syncMonthToValue(range);
16377
+ commit(range);
16378
+ setFromText(range?.from ? formatter(range.from) : "");
16379
+ setToText(range?.to ? formatter(range.to) : "");
16380
+ },
16381
+ focus: () => fromInputRef.current?.focus(),
16382
+ open: openCalendar,
16383
+ close: closeCalendar
16384
+ }),
16385
+ [closeCalendar, commit, formatter, openCalendar, setFromText, setToText, syncMonthToValue]
16386
+ );
16387
+ return /* @__PURE__ */ jsx165(
16388
+ "div",
16389
+ {
16390
+ ref: containerRef,
16391
+ className: cn(
16392
+ "relative w-full max-w-[var(--max-field-width)]",
16393
+ disabled && "cursor-not-allowed opacity-50",
16394
+ loading && "cursor-progress",
16395
+ className
16396
+ ),
16397
+ style: wrapperWidth ? { width: wrapperWidth } : void 0,
16398
+ children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
16399
+ /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
16400
+ /* @__PURE__ */ jsx165(
16401
+ DateRangeInputs,
16402
+ {
16403
+ fromId,
16404
+ toId,
16405
+ name,
16406
+ labelId,
16407
+ fromText,
16408
+ toText,
16409
+ fromPlaceholder,
16410
+ toPlaceholder,
16411
+ fromInputRef,
16412
+ toInputRef,
16413
+ isEmpty,
16414
+ isFocused,
16415
+ isBlocked,
16416
+ isInvalid,
16417
+ loading,
16418
+ readOnly,
16419
+ hideClearDates,
16420
+ hideCalendarIcon,
16421
+ isOpen,
16422
+ focusedInput,
16423
+ clearLabel: t("clear_dates"),
16424
+ openCalendarLabel: t("open_calendar"),
16425
+ onFromTextChange: setFromText,
16426
+ onToTextChange: setToText,
16427
+ onFromFocus: () => {
16428
+ setFocusedInput("from");
16429
+ if (!readOnly && !isBlocked) setIsOpen(true);
16430
+ },
16431
+ onToFocus: () => {
16432
+ setFocusedInput("to");
16433
+ if (!readOnly && !isBlocked) setIsOpen(true);
16434
+ },
16435
+ onFromBlur: () => {
16436
+ setFocusedInput((prev) => prev === "from" ? null : prev);
16437
+ handleFromBlur();
16438
+ },
16439
+ onToBlur: () => {
16440
+ setFocusedInput((prev) => prev === "to" ? null : prev);
16441
+ handleToBlur();
16442
+ },
16443
+ onRowClick: () => {
16444
+ if (isBlocked || readOnly) return;
16445
+ if (!focusedInput) fromInputRef.current?.focus();
16446
+ },
16447
+ onReset: handleReset,
16448
+ onToggleCalendar: toggleCalendar
16449
+ }
16450
+ ),
16451
+ /* @__PURE__ */ jsx165(
16452
+ Fieldset,
16453
+ {
16454
+ isFocused,
16455
+ invalid: isInvalid,
16456
+ isEmpty,
16457
+ isActivated: !isEmpty || isFocused,
16458
+ disabled,
16459
+ loading,
16460
+ readOnly,
16461
+ htmlFor: fromId,
16462
+ labelId,
16463
+ legend: label,
16464
+ label,
16465
+ tooltip
16466
+ }
16467
+ ),
16468
+ /* @__PURE__ */ jsx165(
16469
+ DateRangePopover,
16470
+ {
16471
+ isOpen: isOpen && !isMobile2,
16472
+ isMobile: false,
16473
+ openDirection,
16474
+ drawerTitle,
16475
+ drawerDescription,
16476
+ onClose: closeCalendar,
16477
+ children: /* @__PURE__ */ jsx165(
16478
+ DateRangeCalendar,
16479
+ {
16480
+ value,
16481
+ month,
16482
+ onMonthChange: setMonth,
16483
+ onSelect: handlePickerChange,
16484
+ numberOfMonths: monthsToShow,
16485
+ minDate: normalizedMinDate,
16486
+ maxDate: normalizedMaxDate,
16487
+ maxDays,
16488
+ minDays,
16489
+ autoFocus,
16490
+ disabledMatchers,
16491
+ components: customComponents,
16492
+ ...dayPickerProps
16493
+ }
16494
+ )
16495
+ }
16496
+ )
16497
+ ] }),
16498
+ /* @__PURE__ */ jsx165(
16499
+ DateRangePopover,
16500
+ {
16501
+ isOpen: isOpen && isMobile2,
16502
+ isMobile: true,
16503
+ openDirection,
16504
+ drawerTitle,
16505
+ drawerDescription,
16506
+ onClose: closeCalendar,
16507
+ children: /* @__PURE__ */ jsx165(
16508
+ DateRangeCalendar,
16509
+ {
16510
+ value,
16511
+ month,
16512
+ onMonthChange: setMonth,
16513
+ onSelect: handlePickerChange,
16514
+ numberOfMonths: monthsToShow,
16515
+ minDate: normalizedMinDate,
16516
+ maxDate: normalizedMaxDate,
16517
+ maxDays,
16518
+ minDays,
16519
+ autoFocus,
16520
+ disabledMatchers,
16521
+ components: customComponents,
16522
+ ...dayPickerProps
16523
+ }
16524
+ )
16525
+ }
16526
+ ),
16527
+ !error && optional && /* @__PURE__ */ jsx165("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
16528
+ !error && helperText && /* @__PURE__ */ jsx165("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
16529
+ error && !hideErrorMessage && /* @__PURE__ */ jsx165(
16530
+ FieldErrorMessage,
16531
+ {
16532
+ id: errorId,
16533
+ message: error,
16534
+ className: "mt-[1px] text-[14px]"
16535
+ }
16536
+ )
16537
+ ] })
16538
+ }
16539
+ );
16540
+ });
16541
+
16542
+ // src/dashboard/date-range-picker/useValidateDates.ts
16543
+ import * as React65 from "react";
16544
+ import { useTranslation as useTranslation35 } from "react-i18next";
16545
+ import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
16546
+ import {
16547
+ dateMatchModifiers,
16548
+ dateLib
16549
+ } from "react-day-picker";
16550
+ function isAfterMax(date, maxDate) {
16551
+ return isAfter2(resetTime(date), resetTime(maxDate));
16552
+ }
16553
+ function isBeforeMin(date, minDate) {
16554
+ return isBefore3(resetTime(date), resetTime(minDate));
16555
+ }
16556
+ function useValidateDates({
16557
+ minDays,
16558
+ maxDays,
16559
+ minDate,
16560
+ maxDate,
16561
+ disabledDays,
16562
+ onError,
16563
+ onSuccess,
16564
+ displayFormat
16565
+ }) {
16566
+ const { t } = useTranslation35();
16567
+ const handleError = useEvent(onError);
16568
+ const handleSuccess = useEvent(onSuccess);
16569
+ const errorFormatter = React65.useMemo(
16570
+ () => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
16571
+ [displayFormat]
16572
+ );
16573
+ const validateDates = React65.useCallback(
16574
+ (dates) => {
16575
+ const startDate = dates?.from;
16576
+ const endDate = dates?.to;
16577
+ if (!startDate || !endDate) return true;
16578
+ if (disabledDays && (dateMatchModifiers(startDate, disabledDays, dateLib) || dateMatchModifiers(endDate, disabledDays, dateLib))) {
16579
+ handleError(t("wrong_period_of_dates"));
16580
+ return false;
16581
+ }
16582
+ if (isAfter2(startDate, endDate)) {
16583
+ handleError(t("wrong_period_of_dates"));
16584
+ return false;
16585
+ }
16586
+ if (maxDays && differenceInDays2(endDate, startDate) + 1 > maxDays) {
16587
+ handleError(t("date_range_max_days_error", { count: maxDays }));
16588
+ return false;
16589
+ }
16590
+ if (minDays && differenceInDays2(endDate, startDate) < minDays) {
16591
+ handleError(t("date_range_min_days_error", { count: minDays }));
16592
+ return false;
16593
+ }
16594
+ const min = toDate(minDate);
16595
+ const max = toDate(maxDate);
16596
+ if (min && isBeforeMin(startDate, min)) {
16597
+ handleError(t("past_dates", { minDate: errorFormatter(resetTime(min)) }));
16598
+ return false;
16599
+ }
16600
+ if (max && (isAfterMax(startDate, max) || isAfterMax(endDate, max))) {
16601
+ handleError(t("future_dates", { maxDate: errorFormatter(resetTime(max)) }));
16602
+ return false;
16603
+ }
16604
+ handleSuccess();
16605
+ return true;
16606
+ },
16607
+ [
16608
+ disabledDays,
16609
+ errorFormatter,
16610
+ handleError,
16611
+ handleSuccess,
16612
+ maxDate,
16613
+ maxDays,
16614
+ minDate,
16615
+ minDays,
16616
+ t
16617
+ ]
16618
+ );
16619
+ return { validateDates };
16620
+ }
16621
+
16622
+ // src/dashboard/time-picker/TimePicker.tsx
16623
+ import * as React66 from "react";
16624
+ import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
16625
+ import { jsx as jsx166 } from "react/jsx-runtime";
16626
+ var SHORT_TIME_FORMAT = "HH:mm";
16627
+ function parseTime(value) {
16628
+ return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
16629
+ }
16630
+ function getRange(settings) {
16631
+ const min = parseTime(settings.minTime);
16632
+ const max = settings.maxTime === "00:00" && settings.addNextDay ? addDays(parseTime(settings.maxTime), 1) : parseTime(settings.maxTime);
16633
+ return { min, max };
16634
+ }
16635
+ function buildOptions(settings) {
16636
+ const intervalUnit = settings.intervalUnit ?? "M";
16637
+ const interval = settings.interval ?? (intervalUnit === "H" ? 1 : 60);
16638
+ const minTime = settings.minTime ?? "00:00";
16639
+ const maxTime = settings.maxTime ?? (intervalUnit === "H" ? "23:00" : "23:00");
16640
+ const addNextDay = settings.addNextDay !== false;
16641
+ const { min, max } = getRange({ intervalUnit, interval, minTime, maxTime, addNextDay });
16642
+ const options = [];
16643
+ let current = new Date(min.getTime());
16644
+ while (current.getTime() <= max.getTime()) {
16645
+ const text = format(current, SHORT_TIME_FORMAT);
16646
+ options.push({ value: text, label: text });
16647
+ current = intervalUnit === "H" ? addHours(current, interval) : addMinutes(current, interval);
16648
+ }
16649
+ return options;
16650
+ }
16651
+ var FORMAT_SETTINGS = {
16652
+ time: { intervalUnit: "M", interval: 30, minTime: "00:00", maxTime: "23:30" },
16653
+ timeEach15Minutes: {
16654
+ intervalUnit: "M",
16655
+ interval: 15,
16656
+ minTime: "00:00",
16657
+ maxTime: "23:45"
16658
+ },
16659
+ timeEach30Minutes: {
16660
+ intervalUnit: "M",
16661
+ interval: 30,
16662
+ minTime: "00:00",
16663
+ maxTime: "23:30"
16664
+ },
16665
+ hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
16666
+ };
16667
+ var DashboardTimePicker = React66.forwardRef(
16668
+ function DashboardTimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
16669
+ const resolvedOptions = React66.useMemo(() => {
16670
+ if (options) return options;
16671
+ const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
16672
+ return buildOptions(settings);
16673
+ }, [formatName, options, timeSettings]);
16674
+ return /* @__PURE__ */ jsx166(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
16675
+ }
16676
+ );
16677
+
16678
+ // src/dashboard/file-input/FileInput.tsx
16679
+ import * as React67 from "react";
16680
+ import { Download, Paperclip, SquareX as SquareX4 } from "lucide-react";
16681
+ import { useTranslation as useTranslation36 } from "react-i18next";
16682
+ import { jsx as jsx167, jsxs as jsxs108 } from "react/jsx-runtime";
16683
+ function defaultFileNameFromUrl(url) {
16684
+ try {
16685
+ const parsed = new URL(url);
16686
+ const segments = parsed.pathname.split("/");
16687
+ return decodeURIComponent(segments[segments.length - 1] ?? url);
16688
+ } catch {
16689
+ return url;
16690
+ }
16691
+ }
16692
+ function defaultDownload(url) {
16693
+ window.open(url, "_blank", "noopener,noreferrer");
16694
+ }
16695
+ var DashboardFileInput = React67.forwardRef(
16696
+ function DashboardFileInput2({
16697
+ label,
16698
+ value,
16699
+ onChange,
16700
+ onDownload = defaultDownload,
16701
+ name = "file",
16702
+ placeholder,
16703
+ accept,
16704
+ multiple,
16705
+ disabled,
16706
+ readOnly,
16707
+ loading,
16708
+ invalid,
16709
+ error,
16710
+ optional,
16711
+ tooltip,
16712
+ helperText,
16713
+ hideErrorMessage,
16714
+ className,
16715
+ width,
16716
+ downloadLabel,
16717
+ fileNameFromUrl = defaultFileNameFromUrl
16718
+ }, ref) {
16719
+ const internalRef = React67.useRef(null);
16720
+ const inputRef = useCombinedRef(ref, internalRef);
16721
+ const { t } = useTranslation36();
16722
+ const resolvedLabel = label ?? t("upload_file");
16723
+ const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
16724
+ const reactId = React67.useId();
16725
+ const inputId = `${name || "dash-file"}-${reactId}`;
16726
+ const labelId = `${inputId}-label`;
16727
+ const errorId = `${inputId}-error`;
16728
+ const isBlocked = Boolean(disabled) || Boolean(loading);
16729
+ const isInvalid = Boolean(invalid || error);
16730
+ const isEmpty = !value;
16731
+ const wrapperWidth = toCssSize(width);
16732
+ const isUrl = typeof value === "string" && value.length > 0;
16733
+ const isFile = typeof File !== "undefined" && value instanceof File;
16734
+ const hasFileChip = isUrl || isFile;
16735
+ const handleFileChange = (event) => {
16736
+ const file = event.target.files?.[0] ?? null;
16737
+ onChange?.(file, event);
16738
+ };
16739
+ const handleClear = (event) => {
16740
+ event.preventDefault();
16741
+ event.stopPropagation();
16742
+ if (internalRef.current) internalRef.current.value = "";
16743
+ onChange?.(null);
16744
+ };
16745
+ const handleDownload = (event) => {
16746
+ event.preventDefault();
16747
+ event.stopPropagation();
16748
+ if (isUrl) onDownload(value);
16749
+ };
16750
+ return /* @__PURE__ */ jsxs108(
16751
+ "label",
16752
+ {
16753
+ htmlFor: inputId,
16754
+ className: cn(
16755
+ "relative block w-full max-w-[var(--max-field-width)] cursor-pointer text-left",
16756
+ (disabled || readOnly) && "cursor-not-allowed",
16757
+ loading && "cursor-progress",
16758
+ disabled && "opacity-50",
16759
+ className
16760
+ ),
16761
+ style: wrapperWidth ? { width: wrapperWidth } : void 0,
16762
+ children: [
16763
+ /* @__PURE__ */ jsx167(
16764
+ "input",
16765
+ {
16766
+ ref: inputRef,
16767
+ id: inputId,
16768
+ name,
16769
+ type: "file",
16770
+ accept,
16771
+ multiple,
16772
+ disabled: isBlocked || readOnly,
16773
+ onChange: handleFileChange,
16774
+ className: "absolute h-[0.1px] w-[0.1px] opacity-0",
16775
+ "aria-labelledby": labelId,
16776
+ "aria-invalid": isInvalid
16777
+ }
16778
+ ),
16779
+ /* @__PURE__ */ jsxs108("div", { className: "relative min-h-[68px] w-full", children: [
16780
+ /* @__PURE__ */ jsxs108("div", { className: "relative w-full", children: [
16781
+ /* @__PURE__ */ jsxs108(
16782
+ "div",
16783
+ {
16784
+ className: cn(
16785
+ "relative box-border flex h-12 w-full items-center justify-between gap-2 rounded-[6px] px-4 text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
16786
+ isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
16787
+ ),
16788
+ children: [
16789
+ hasFileChip ? /* @__PURE__ */ jsxs108(
16790
+ "div",
16791
+ {
16792
+ className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
16793
+ onClick: (event) => event.preventDefault(),
16794
+ children: [
16795
+ isUrl ? /* @__PURE__ */ jsxs108(
16796
+ "button",
16797
+ {
16798
+ type: "button",
16799
+ onClick: handleDownload,
16800
+ className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
16801
+ children: [
16802
+ /* @__PURE__ */ jsx167("span", { className: "truncate", children: resolvedDownloadLabel }),
16803
+ /* @__PURE__ */ jsx167(Download, { size: 15 })
16804
+ ]
16805
+ }
16806
+ ) : /* @__PURE__ */ jsx167("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
16807
+ /* @__PURE__ */ jsx167(
16808
+ "button",
16809
+ {
16810
+ type: "button",
16811
+ disabled: isBlocked || readOnly,
16812
+ onClick: handleClear,
16813
+ className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
16814
+ "aria-label": t("remove_file"),
16815
+ children: /* @__PURE__ */ jsx167(
16816
+ SquareX4,
16817
+ {
16818
+ size: 15,
16819
+ fill: "#9696b9",
16820
+ color: "#f8f8f8",
16821
+ strokeWidth: 1.8
16822
+ }
16823
+ )
16824
+ }
16825
+ )
16826
+ ]
16827
+ }
16828
+ ) : /* @__PURE__ */ jsx167("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
16829
+ /* @__PURE__ */ jsxs108("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
16830
+ loading && /* @__PURE__ */ jsx167(ThreeDotsLoader, { height: 18, width: 18 }),
16831
+ /* @__PURE__ */ jsx167(Paperclip, { size: 20 })
16832
+ ] })
16833
+ ]
16834
+ }
16835
+ ),
16836
+ /* @__PURE__ */ jsx167(
16837
+ Fieldset,
16838
+ {
16839
+ isFocused: false,
16840
+ invalid: isInvalid,
16841
+ isEmpty,
16842
+ isActivated: !isEmpty,
16843
+ disabled,
16844
+ loading,
16845
+ readOnly,
16846
+ htmlFor: inputId,
16847
+ labelId,
16848
+ legend: resolvedLabel,
16849
+ label: resolvedLabel,
16850
+ tooltip
16851
+ }
16852
+ )
16853
+ ] }),
16854
+ !error && optional && /* @__PURE__ */ jsx167("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
16855
+ !error && helperText && /* @__PURE__ */ jsx167("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
16856
+ error && !hideErrorMessage && /* @__PURE__ */ jsx167(
16857
+ FieldErrorMessage,
16858
+ {
16859
+ id: errorId,
16860
+ message: error,
16861
+ className: "mt-[1px] text-[14px]"
16862
+ }
16863
+ )
16864
+ ] })
16865
+ ]
16866
+ }
16867
+ );
16868
+ }
16869
+ );
16870
+
16871
+ // src/dashboard/select-icons-box/SelectIconsBox.tsx
16872
+ import * as React68 from "react";
16873
+ import { jsx as jsx168, jsxs as jsxs109 } from "react/jsx-runtime";
16874
+ function DashboardSelectIconsBox({
16875
+ children,
16876
+ icons,
16877
+ renderIcon,
16878
+ onSelect,
16879
+ columns = 4,
16880
+ iconsColor = "#6B6B95",
16881
+ isOpen: controlledOpen,
16882
+ defaultOpen = false,
16883
+ onOpenChange,
16884
+ position = "left",
16885
+ className,
16886
+ boxClassName
16887
+ }) {
16888
+ const containerRef = React68.useRef(null);
16889
+ const isControlled = controlledOpen !== void 0;
16890
+ const [internalOpen, setInternalOpen] = React68.useState(defaultOpen);
16891
+ const isOpen = isControlled ? controlledOpen : internalOpen;
16892
+ const setOpen = (next) => {
16893
+ if (!isControlled) setInternalOpen(next);
16894
+ onOpenChange?.(next);
16895
+ };
16896
+ const handleToggle = (event) => {
16897
+ if (event.target.closest("[data-icon-box-item]")) return;
16898
+ setOpen(!isOpen);
16899
+ };
16900
+ useOutsideClick({
16901
+ elementRef: containerRef,
16902
+ onOutsideClick: () => setOpen(false),
16903
+ isDisabled: !isOpen
16904
+ });
16905
+ const handlePick = (iconName) => {
16906
+ onSelect(iconName);
16907
+ setOpen(false);
16908
+ };
16909
+ return /* @__PURE__ */ jsxs109(
16910
+ "div",
16911
+ {
16912
+ ref: containerRef,
16913
+ onClick: handleToggle,
16914
+ className: cn("relative inline-block", className),
16915
+ children: [
16916
+ children,
16917
+ isOpen && /* @__PURE__ */ jsx168(
16918
+ "div",
16919
+ {
16920
+ className: cn(
16921
+ "absolute top-full z-30 mt-1 grid max-h-[192px] overflow-y-auto rounded-[6px] bg-white p-6 shadow-[0_15px_15px_0_rgba(33,72,255,0.2)]",
16922
+ position === "left" && "left-0",
16923
+ position === "right" && "right-0",
16924
+ position === "center" && "left-1/2 -translate-x-1/2",
16925
+ boxClassName
16926
+ ),
16927
+ style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
16928
+ children: icons.map((iconName) => /* @__PURE__ */ jsx168(
16929
+ "button",
16930
+ {
16931
+ type: "button",
16932
+ "data-icon-box-item": true,
16933
+ onClick: () => handlePick(iconName),
16934
+ className: "relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 outline-none hover:bg-[#f4f6f8]",
16935
+ "aria-label": iconName,
16936
+ children: renderIcon(iconName, iconsColor)
16937
+ },
16938
+ iconName
16939
+ ))
16940
+ }
16941
+ )
16942
+ ]
16943
+ }
16944
+ );
16945
+ }
16946
+
16947
+ // src/searchable-select/SearchableSelect.tsx
16948
+ import * as React69 from "react";
16949
+ import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
16950
+ import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
16951
+ import { useCallback as useCallback42 } from "react";
16952
+ import { jsx as jsx169, jsxs as jsxs110 } from "react/jsx-runtime";
16953
+ var ROW_HEIGHT = 48;
16954
+ var DESKTOP_LIST_HEIGHT = 280;
16955
+ var MOBILE_LIST_HEIGHT = 420;
16956
+ var LOAD_MORE_THRESHOLD = 6;
16957
+ function defaultFilter(option, searchValue) {
16958
+ return String(option.label).toLowerCase().includes(searchValue.trim().toLowerCase());
16959
+ }
16960
+ var SearchableSelectInternal = ({
16961
+ options,
16962
+ value,
16963
+ onChange,
16964
+ onBlur,
16965
+ onOpenChange,
16966
+ searchValue,
16967
+ onSearchChange,
16968
+ filterOption = defaultFilter,
16969
+ loading,
16970
+ hasNextPage,
16971
+ onLoadMore,
16972
+ variant = "default",
16973
+ label,
16974
+ topLabel,
16975
+ placeholder,
16976
+ searchPlaceholder = "Search...",
16977
+ mobileTitle,
16978
+ getValueLabel,
16979
+ disabled,
16980
+ error,
16981
+ invalid,
16982
+ optional,
16983
+ tooltip,
16984
+ hideErrorMessage,
16985
+ name,
16986
+ className,
16987
+ dropdownClassName,
16988
+ menuClassName,
16989
+ noOptionsMessage,
16990
+ loadingMessage
16991
+ }, ref) => {
16992
+ const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
16993
+ const reactId = React69.useId();
16994
+ const [open, setOpen] = React69.useState(false);
16995
+ const [internalSearchValue, setInternalSearchValue] = React69.useState("");
16996
+ const [highlightedIndex, setHighlightedIndex] = React69.useState(-1);
16997
+ const containerRef = React69.useRef(null);
16998
+ const triggerRef = React69.useRef(null);
16999
+ const inputRef = React69.useRef(null);
17000
+ const listboxId = `${reactId}-listbox`;
17001
+ const labelId = `${reactId}-label`;
17002
+ const valueId = `${reactId}-value`;
17003
+ const helperTextId = `${reactId}-helper`;
17004
+ const errorId = `${reactId}-error`;
17005
+ const searchInputId = `${reactId}-search`;
17006
+ const effectiveSearchValue = searchValue ?? internalSearchValue;
17007
+ const shouldFilterLocally = !onSearchChange && filterOption !== null;
17008
+ const visibleOptions = React69.useMemo(() => {
17009
+ if (!shouldFilterLocally || !effectiveSearchValue) {
17010
+ return options;
17011
+ }
17012
+ return options.filter((option) => filterOption(option, effectiveSearchValue));
17013
+ }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
17014
+ const selectedIndex = React69.useMemo(
17015
+ () => visibleOptions.findIndex((option) => option.value === value?.value),
17016
+ [value?.value, visibleOptions]
17017
+ );
17018
+ const helperText = placeholder ?? label;
17019
+ const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
17020
+ const isBlocked = Boolean(disabled) || Boolean(loading);
17021
+ const triggerError = error ?? invalid;
17022
+ const describedBy = error && !hideErrorMessage ? errorId : void 0;
17023
+ const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
17024
+ useOutsideClick({
17025
+ elementRef: containerRef,
17026
+ onOutsideClick: () => closeSelect(),
17027
+ isDisabled: !open || isMobile2
17028
+ });
17029
+ const handleOnOpenChange = useEvent(onOpenChange);
17030
+ const setSelectOpen = useCallback42(
17031
+ (nextOpen, options2) => {
17032
+ setOpen(nextOpen);
17033
+ handleOnOpenChange?.(nextOpen);
17034
+ if (!nextOpen && options2?.restoreFocus) {
17035
+ triggerRef.current?.focus();
17036
+ }
17037
+ },
17038
+ [handleOnOpenChange]
17039
+ );
17040
+ React69.useEffect(() => {
17041
+ if (isBlocked) {
17042
+ setSelectOpen(false);
17043
+ return;
17044
+ }
17045
+ if (!open) return;
17046
+ const frameId = window.requestAnimationFrame(() => {
17047
+ inputRef.current?.focus();
17048
+ });
17049
+ return () => {
17050
+ window.cancelAnimationFrame(frameId);
17051
+ };
17052
+ }, [isBlocked, open, setSelectOpen]);
17053
+ React69.useEffect(() => {
17054
+ if (!open) {
17055
+ setHighlightedIndex(-1);
17056
+ return;
17057
+ }
17058
+ setHighlightedIndex((currentIndex) => {
17059
+ if (currentIndex >= 0 && currentIndex < visibleOptions.length && !visibleOptions[currentIndex]?.isDisabled) {
17060
+ return currentIndex;
17061
+ }
17062
+ return selectedIndex >= 0 ? selectedIndex : getFirstEnabledIndex(visibleOptions);
17063
+ });
17064
+ }, [open, selectedIndex, visibleOptions]);
17065
+ function openSelect() {
17066
+ if (isBlocked) return;
17067
+ setSelectOpen(true);
17068
+ }
17069
+ function closeSelect() {
17070
+ setSelectOpen(false, { restoreFocus: true });
17071
+ }
17072
+ function handleSearchChange(nextValue) {
17073
+ if (!onSearchChange) {
17074
+ setInternalSearchValue(nextValue);
17075
+ }
15097
17076
  onSearchChange?.(nextValue);
15098
17077
  }
15099
17078
  function handleSelect(option) {
@@ -15139,7 +17118,7 @@ var SearchableSelectInternal = ({
15139
17118
  }
15140
17119
  }
15141
17120
  }
15142
- const content = /* @__PURE__ */ jsx160(
17121
+ const content = /* @__PURE__ */ jsx169(
15143
17122
  SearchableSelectContent,
15144
17123
  {
15145
17124
  inputId: searchInputId,
@@ -15166,10 +17145,10 @@ var SearchableSelectInternal = ({
15166
17145
  onOptionHover: setHighlightedIndex
15167
17146
  }
15168
17147
  );
15169
- React59.useImperativeHandle(ref, () => triggerRef.current, []);
15170
- return /* @__PURE__ */ jsxs103("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
15171
- name && /* @__PURE__ */ jsx160("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
15172
- /* @__PURE__ */ jsx160(
17148
+ React69.useImperativeHandle(ref, () => triggerRef.current, []);
17149
+ return /* @__PURE__ */ jsxs110("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
17150
+ name && /* @__PURE__ */ jsx169("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
17151
+ /* @__PURE__ */ jsx169(
15173
17152
  FieldTrigger,
15174
17153
  {
15175
17154
  id: `${reactId}-trigger`,
@@ -15204,8 +17183,8 @@ var SearchableSelectInternal = ({
15204
17183
  },
15205
17184
  onKeyDown: handleTriggerKeyDown,
15206
17185
  onBlur,
15207
- trailingAdornment: /* @__PURE__ */ jsx160(
15208
- ChevronDown6,
17186
+ trailingAdornment: /* @__PURE__ */ jsx169(
17187
+ ChevronDown7,
15209
17188
  {
15210
17189
  className: cn(
15211
17190
  "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -15215,7 +17194,7 @@ var SearchableSelectInternal = ({
15215
17194
  )
15216
17195
  }
15217
17196
  ),
15218
- isMobile2 ? /* @__PURE__ */ jsx160(
17197
+ isMobile2 ? /* @__PURE__ */ jsx169(
15219
17198
  Drawer,
15220
17199
  {
15221
17200
  open,
@@ -15227,13 +17206,13 @@ var SearchableSelectInternal = ({
15227
17206
  }
15228
17207
  closeSelect();
15229
17208
  },
15230
- children: /* @__PURE__ */ jsxs103(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
15231
- /* @__PURE__ */ jsx160(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
15232
- /* @__PURE__ */ jsx160(DrawerDescription, { className: "sr-only", children: label }),
15233
- /* @__PURE__ */ jsx160("div", { className: "px-5 pb-5 pt-1", children: content })
17209
+ children: /* @__PURE__ */ jsxs110(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
17210
+ /* @__PURE__ */ jsx169(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
17211
+ /* @__PURE__ */ jsx169(DrawerDescription, { className: "sr-only", children: label }),
17212
+ /* @__PURE__ */ jsx169("div", { className: "px-5 pb-5 pt-1", children: content })
15234
17213
  ] })
15235
17214
  }
15236
- ) : open ? /* @__PURE__ */ jsx160(
17215
+ ) : open ? /* @__PURE__ */ jsx169(
15237
17216
  "div",
15238
17217
  {
15239
17218
  className: cn(
@@ -15245,7 +17224,7 @@ var SearchableSelectInternal = ({
15245
17224
  ) : null
15246
17225
  ] });
15247
17226
  };
15248
- var SearchableSelect = React59.forwardRef(
17227
+ var SearchableSelect = React69.forwardRef(
15249
17228
  SearchableSelectInternal
15250
17229
  );
15251
17230
  function SearchableSelectContent({
@@ -15272,9 +17251,9 @@ function SearchableSelectContent({
15272
17251
  onOptionClick,
15273
17252
  onOptionHover
15274
17253
  }) {
15275
- const listRef = React59.useRef(null);
15276
- const lastLoadMoreOptionsLengthRef = React59.useRef(null);
15277
- const previousHighlightedIndexRef = React59.useRef(highlightedIndex);
17254
+ const listRef = React69.useRef(null);
17255
+ const lastLoadMoreOptionsLengthRef = React69.useRef(null);
17256
+ const previousHighlightedIndexRef = React69.useRef(highlightedIndex);
15278
17257
  const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
15279
17258
  const virtualizer = useVirtualizer3({
15280
17259
  count: rowCount,
@@ -15285,7 +17264,7 @@ function SearchableSelectContent({
15285
17264
  const virtualItems = virtualizer.getVirtualItems();
15286
17265
  const emptyMessage = noOptionsMessage?.() ?? "No matches found";
15287
17266
  const loadingText = loadingMessage?.() ?? "Loading...";
15288
- React59.useEffect(() => {
17267
+ React69.useEffect(() => {
15289
17268
  const lastItem = virtualItems[virtualItems.length - 1];
15290
17269
  const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
15291
17270
  if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
@@ -15293,23 +17272,23 @@ function SearchableSelectContent({
15293
17272
  onLoadMore?.();
15294
17273
  }
15295
17274
  }, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
15296
- React59.useEffect(() => {
17275
+ React69.useEffect(() => {
15297
17276
  const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
15298
17277
  previousHighlightedIndexRef.current = highlightedIndex;
15299
17278
  if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
15300
17279
  virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
15301
17280
  }
15302
17281
  }, [highlightedIndex, virtualizer]);
15303
- return /* @__PURE__ */ jsxs103("div", { className: "p-2", children: [
15304
- /* @__PURE__ */ jsxs103("div", { className: "relative mb-2", children: [
15305
- /* @__PURE__ */ jsx160(
17282
+ return /* @__PURE__ */ jsxs110("div", { className: "p-2", children: [
17283
+ /* @__PURE__ */ jsxs110("div", { className: "relative mb-2", children: [
17284
+ /* @__PURE__ */ jsx169(
15306
17285
  Search4,
15307
17286
  {
15308
17287
  "aria-hidden": "true",
15309
17288
  className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
15310
17289
  }
15311
17290
  ),
15312
- /* @__PURE__ */ jsx160(
17291
+ /* @__PURE__ */ jsx169(
15313
17292
  "input",
15314
17293
  {
15315
17294
  id: inputId,
@@ -15328,7 +17307,7 @@ function SearchableSelectContent({
15328
17307
  }
15329
17308
  )
15330
17309
  ] }),
15331
- loading && options.length === 0 ? /* @__PURE__ */ jsx160("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx160("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx160(
17310
+ loading && options.length === 0 ? /* @__PURE__ */ jsx169("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx169("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx169(
15332
17311
  "div",
15333
17312
  {
15334
17313
  id: listboxId,
@@ -15337,7 +17316,7 @@ function SearchableSelectContent({
15337
17316
  "aria-labelledby": labelId,
15338
17317
  className: cn("overflow-y-auto outline-none", menuClassName),
15339
17318
  style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
15340
- children: /* @__PURE__ */ jsx160(
17319
+ children: /* @__PURE__ */ jsx169(
15341
17320
  "div",
15342
17321
  {
15343
17322
  className: "relative w-full",
@@ -15345,7 +17324,7 @@ function SearchableSelectContent({
15345
17324
  children: virtualItems.map((virtualItem) => {
15346
17325
  const option = options[virtualItem.index];
15347
17326
  if (!option) {
15348
- return /* @__PURE__ */ jsx160(
17327
+ return /* @__PURE__ */ jsx169(
15349
17328
  "div",
15350
17329
  {
15351
17330
  className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -15360,7 +17339,7 @@ function SearchableSelectContent({
15360
17339
  }
15361
17340
  const isSelected = value?.value === option.value;
15362
17341
  const isHighlighted = virtualItem.index === highlightedIndex;
15363
- return /* @__PURE__ */ jsx160(
17342
+ return /* @__PURE__ */ jsx169(
15364
17343
  "button",
15365
17344
  {
15366
17345
  id: getOptionId(idPrefix, virtualItem.index),
@@ -15382,7 +17361,7 @@ function SearchableSelectContent({
15382
17361
  height: `${virtualItem.size}px`,
15383
17362
  transform: `translateY(${virtualItem.start}px)`
15384
17363
  },
15385
- children: /* @__PURE__ */ jsx160("span", { className: "truncate text-center", children: String(option.label) })
17364
+ children: /* @__PURE__ */ jsx169("span", { className: "truncate text-center", children: String(option.label) })
15386
17365
  },
15387
17366
  `${String(option.value)}-${virtualItem.index}`
15388
17367
  );
@@ -15468,14 +17447,14 @@ function getErrorMessage(error) {
15468
17447
 
15469
17448
  // src/lib/toastResponseError.tsx
15470
17449
  import i18next from "i18next";
15471
- import { jsx as jsx161, jsxs as jsxs104 } from "react/jsx-runtime";
17450
+ import { jsx as jsx170, jsxs as jsxs111 } from "react/jsx-runtime";
15472
17451
  function addSupportEmailToMessage(message, prefixText) {
15473
17452
  if (typeof message !== "string") {
15474
17453
  return message;
15475
17454
  }
15476
17455
  const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
15477
- return /* @__PURE__ */ jsxs104("div", { children: [
15478
- /* @__PURE__ */ jsx161("div", { children: builtMessage }),
17456
+ return /* @__PURE__ */ jsxs111("div", { children: [
17457
+ /* @__PURE__ */ jsx170("div", { children: builtMessage }),
15479
17458
  i18next.t("reach_us_at_email")
15480
17459
  ] });
15481
17460
  }
@@ -15535,12 +17514,19 @@ export {
15535
17514
  CopyLinkButton,
15536
17515
  CopyString,
15537
17516
  CustomCheckboxDropdownGroup,
17517
+ DEFAULT_DISPLAY_FORMAT,
15538
17518
  DEVICE_BREAKPOINTS,
15539
17519
  DashboardCreatableMultiSelect,
17520
+ DashboardDateRangePicker,
17521
+ DashboardDatepicker,
17522
+ DashboardFileInput,
15540
17523
  DashboardInfiniteScrollSelect,
15541
17524
  DashboardInput,
15542
17525
  DashboardMultiSelect,
15543
17526
  DashboardSelect,
17527
+ DashboardSelectIconsBox,
17528
+ DashboardTextarea,
17529
+ DashboardTimePicker,
15544
17530
  DataTable,
15545
17531
  DatePicker,
15546
17532
  DateTableFilter,
@@ -15776,13 +17762,17 @@ export {
15776
17762
  calendarClassNames,
15777
17763
  cn,
15778
17764
  copyToClipboard,
17765
+ createDisabledMatchers,
15779
17766
  emptyMediaVariants,
17767
+ formatDate,
15780
17768
  getErrorMessage,
15781
17769
  getScrollableAreaState,
15782
17770
  getSidebarState,
15783
17771
  inputVariants,
17772
+ isDayBlocked,
15784
17773
  isNumeric,
15785
17774
  labelVariants,
17775
+ parseDate,
15786
17776
  registerUiKitI18n,
15787
17777
  scrollToTop,
15788
17778
  sectionTagVariants,
@@ -15833,6 +17823,7 @@ export {
15833
17823
  useTimeout,
15834
17824
  useTimeoutRef,
15835
17825
  useTimer,
15836
- useUpdateToast
17826
+ useUpdateToast,
17827
+ useValidateDates
15837
17828
  };
15838
17829
  //# sourceMappingURL=index.js.map