@chekinapp/ui 0.0.76 → 0.0.79

package/dist/index.cjs

@@ -5557,7 +5557,9 @@ var translation_default2 = {
   date_range_min_days_error_other: "Range must be at least {{count}} days",
   past_dates: "Date cannot be before {{minDate}}",
   future_dates: "Date cannot be after {{maxDate}}",
-  signature_placeholder_text: "Sign inside this box.<br/> Use your finger.<br/> Tap to start."
+  signature_placeholder_text: "Sign inside this box.<br/> Use your finger.<br/> Tap to start.",
+  camera_permissions_denied: "The camera doesn't open? Make sure to allow the browser permission to use the camera.",
+  clear: "Clear"
 };
 
 // src/locales/es/translation.json
@@ -8589,7 +8591,7 @@ var SignatureCanvas = (0, import_react69.forwardRef)(
           type: "button",
           className: cn(
             "absolute left-0 top-0 z-10 flex h-[174px] w-[250px] flex-col items-center",
-            "justify-between rounded border-0 bg-[var(--signature-canvas-placeholder-bg)] px-0 pb-11 pt-10",
+            "justify-between rounded border-0 bg-[var(--signature-canvas-placeholder-bg)] px-0 pb-7 pt-10",
             "cursor-pointer select-none"
           ),
           onClick: onEnable,
@@ -8600,7 +8602,7 @@ var SignatureCanvas = (0, import_react69.forwardRef)(
               "span",
               {
                 className: cn(
-                  "mx-auto max-w-[154px] break-words text-center text-sm font-medium uppercase",
+                  "mx-auto mt-2 max-w-[154px] break-words text-center text-sm font-medium uppercase",
                   "text-[var(--signature-canvas-placeholder-text)] opacity-[0.55]"
                 ),
                 children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_react_i18next16.Trans, { i18nKey: "signature_placeholder_text" })
@@ -10234,15 +10236,15 @@ function UploadedFilesList({
   return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: cn("flex flex-wrap gap-2.5", className), children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
     "div",
     {
-      className: "flex cursor-default items-center gap-2 rounded border border-[var(--chekin-color-gray-2)] bg-[var(--chekin-color-surface-pressed)] py-1.5 pl-3 pr-1.5",
+      className: "flex cursor-default items-center gap-2 rounded border border-[#acacd5] bg-[#f0f0f8] py-1.5 pl-3 pr-1.5",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-nowrap text-sm font-medium leading-5 text-[var(--chekin-color-brand-navy)]", children: file.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-nowrap text-sm font-medium leading-5 text-[#161643]", children: file.name }),
         /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           "button",
           {
             type: "button",
             onClick: () => onRemoveFile(file.name),
-            className: "flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded bg-[var(--chekin-color-gray-1)] transition-all hover:shadow-md active:opacity-95",
+            className: "flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center rounded bg-[#6b6b95] transition-all hover:shadow-md active:opacity-95",
             "aria-label": `Remove ${file.name}`,
             children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react37.X, { className: "h-3.5 w-3.5 text-white", strokeWidth: 3 })
           }
@@ -14823,7 +14825,9 @@ function DashboardMultiSelectInternal({
   }, [isOpen, filteredOptions]);
   React58.useEffect(() => {
     if (!isOpen || !isMobile2) return;
-    const frame = window.requestAnimationFrame(() => mobileSearchInputRef.current?.focus());
+    const frame = window.requestAnimationFrame(
+      () => mobileSearchInputRef.current?.focus()
+    );
     return () => window.cancelAnimationFrame(frame);
   }, [isOpen, isMobile2]);
   const openMenu = () => {
@@ -16292,6 +16296,7 @@ var createDisabledMatchers = ({
 
 // src/dashboard/date-range-picker/hooks/useRangeValue.ts
 var React63 = __toESM(require("react"), 1);
+var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
 function useRangeValue({
   value: externalValue,
   defaultValue,
@@ -16299,22 +16304,29 @@ function useRangeValue({
   name
 }) {
   const isControlled = externalValue !== void 0;
-  const [internalValue, setInternalValue] = React63.useState(
-    defaultValue
+  const [draft, setDraft] = React63.useState(
+    isControlled ? externalValue : defaultValue
   );
-  const value = isControlled ? externalValue : internalValue;
+  const lastExternalKeyRef = React63.useRef(getRangeKey(externalValue));
+  if (isControlled) {
+    const externalKey = getRangeKey(externalValue);
+    if (externalKey !== lastExternalKeyRef.current) {
+      lastExternalKeyRef.current = externalKey;
+      setDraft(externalValue);
+    }
+  }
   const commit = React63.useCallback(
     (next) => {
-      if (!isControlled) setInternalValue(next);
+      setDraft(next);
       if (next === void 0) {
         onChange?.(void 0, name);
         return;
       }
-      if (next?.from && next?.to) onChange?.(next, name);
+      if (next.from && next.to) onChange?.(next, name);
     },
-    [isControlled, name, onChange]
+    [name, onChange]
   );
-  return { value, commit };
+  return { value: draft, commit };
 }
 
 // src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
@@ -16560,52 +16572,8 @@ function DateRangeInputs({
   );
 }
 
-// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
-var import_lucide_react52 = require("lucide-react");
-var import_react_day_picker2 = require("react-day-picker");
-
-// src/dashboard/_calendar/dashboardCalendarClassNames.ts
-var dashboardCalendarClassNames = {
-  root: "relative",
-  months: "relative flex flex-col gap-6 sm:flex-row sm:gap-8",
-  month: "w-full",
-  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)]",
-  caption_label: "px-3 text-[18px] font-normal",
-  nav: "absolute left-0 right-0 top-[4px] z-10 flex justify-between px-[6px] pointer-events-none",
-  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",
-  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",
-  weekday: "size-9 p-0 text-[14px] font-normal text-[var(--chekin-color-brand-blue)]",
-  day_button: [
-    "relative mx-auto flex size-9 items-center justify-center whitespace-nowrap rounded-full p-0",
-    "text-[14px] font-light text-[var(--chekin-color-brand-navy)] outline-offset-2",
-    "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--chekin-color-brand-blue)]/60",
-    "hover:bg-[#f0f8ff]",
-    "group-data-[selected]:bg-[var(--chekin-color-brand-blue)] group-data-[selected]:text-white",
-    "group-data-[disabled]:pointer-events-none group-data-[disabled]:text-[var(--chekin-color-gray-2)] group-data-[disabled]:line-through",
-    "group-data-[outside]:text-[var(--chekin-color-gray-2)]",
-    "group-data-[outside]:group-data-[selected]:text-white",
-    "group-[.range-middle]:rounded-none group-[.range-middle]:bg-transparent",
-    "group-data-[selected]:group-[.range-middle]:bg-[#edf7ff] group-data-[selected]:group-[.range-middle]:text-[var(--chekin-color-brand-navy)]"
-  ].join(" "),
-  day: "group size-9 p-0 text-center text-[14px]",
-  range_start: "range-start",
-  range_end: "range-end",
-  range_middle: "range-middle",
-  today: [
-    "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2",
-    "*:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full",
-    "*:after:bg-[var(--chekin-color-brand-blue)]",
-    "[&[data-selected]:not(.range-middle)>*]:after:bg-white"
-  ].join(" "),
-  outside: "text-[var(--chekin-color-gray-2)]",
-  hidden: "invisible"
-};
-
 // src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
 var import_jsx_runtime169 = require("react/jsx-runtime");
-var calendarComponents = {
-  Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_lucide_react52.ArrowLeft, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_lucide_react52.ArrowRight, { size: 14, strokeWidth: 2, "aria-hidden": "true" })
-};
 function DateRangeCalendar({
   value,
   month,
@@ -16618,11 +16586,11 @@ function DateRangeCalendar({
   minDays,
   autoFocus,
   disabledMatchers,
-  components: customComponents,
+  components,
   ...dayPickerProps
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
-    import_react_day_picker2.DayPicker,
+    Calendar,
     {
       mode: "range",
       selected: value,
@@ -16630,16 +16598,14 @@ function DateRangeCalendar({
       onMonthChange,
       onSelect,
       numberOfMonths,
-      showOutsideDays: true,
       startMonth: minDate,
       endMonth: maxDate,
       max: maxDays,
       min: minDays,
       autoFocus,
-      classNames: dashboardCalendarClassNames,
-      components: { ...calendarComponents, ...customComponents },
-      className: "p-5",
       disabled: disabledMatchers,
+      components,
+      className: "p-5",
       ...dayPickerProps
     }
   );
@@ -16756,7 +16722,13 @@ var DashboardDateRangePicker = React66.forwardRef(function DashboardDateRangePic
   const normalizedMaxDate = React66.useMemo(() => toDate(maxDate), [maxDate]);
   const formatter = React66.useMemo(() => formatDate(displayFormat), [displayFormat]);
   const parser = React66.useMemo(() => parseDate(displayFormat), [displayFormat]);
-  const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({ value, format: formatter, parse: parser, onCommit: commit, onBlur });
+  const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
+    value,
+    format: formatter,
+    parse: parser,
+    onCommit: commit,
+    onBlur
+  });
   const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
   const [isOpen, setIsOpen] = React66.useState(false);
   const [focusedInput, setFocusedInput] = React66.useState(null);
@@ -16839,7 +16811,15 @@ var DashboardDateRangePicker = React66.forwardRef(function DashboardDateRangePic
       open: openCalendar,
       close: closeCalendar
     }),
-    [closeCalendar, commit, formatter, openCalendar, setFromText, setToText, syncMonthToValue]
+    [
+      closeCalendar,
+      commit,
+      formatter,
+      openCalendar,
+      setFromText,
+      setToText,
+      syncMonthToValue
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
     "div",
@@ -17000,7 +16980,7 @@ var DashboardDateRangePicker = React66.forwardRef(function DashboardDateRangePic
 var React67 = __toESM(require("react"), 1);
 var import_react_i18next37 = require("react-i18next");
 var import_date_fns4 = require("date-fns");
-var import_react_day_picker3 = require("react-day-picker");
+var import_react_day_picker2 = require("react-day-picker");
 function isAfterMax(date, maxDate) {
   return (0, import_date_fns4.isAfter)(resetTime(date), resetTime(maxDate));
 }
@@ -17029,7 +17009,7 @@ function useValidateDates({
       const startDate = dates?.from;
       const endDate = dates?.to;
       if (!startDate || !endDate) return true;
-      if (disabledDays && ((0, import_react_day_picker3.dateMatchModifiers)(startDate, disabledDays, import_react_day_picker3.dateLib) || (0, import_react_day_picker3.dateMatchModifiers)(endDate, disabledDays, import_react_day_picker3.dateLib))) {
+      if (disabledDays && ((0, import_react_day_picker2.dateMatchModifiers)(startDate, disabledDays, import_react_day_picker2.dateLib) || (0, import_react_day_picker2.dateMatchModifiers)(endDate, disabledDays, import_react_day_picker2.dateLib))) {
         handleError(t("wrong_period_of_dates"));
         return false;
       }
@@ -17131,7 +17111,7 @@ var DashboardTimePicker = React68.forwardRef(
 
 // src/dashboard/file-input/FileInput.tsx
 var React69 = __toESM(require("react"), 1);
-var import_lucide_react53 = require("lucide-react");
+var import_lucide_react52 = require("lucide-react");
 var import_react_i18next38 = require("react-i18next");
 var import_jsx_runtime173 = require("react/jsx-runtime");
 function defaultFileNameFromUrl(url) {
@@ -17254,7 +17234,7 @@ var DashboardFileInput = React69.forwardRef(
                               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",
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
-                                /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react53.Download, { size: 15 })
+                                /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react52.Download, { size: 15 })
                               ]
                             }
                           ) : /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
@@ -17266,15 +17246,7 @@ var DashboardFileInput = React69.forwardRef(
                               onClick: handleClear,
                               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]",
                               "aria-label": t("remove_file"),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
-                                import_lucide_react53.SquareX,
-                                {
-                                  size: 15,
-                                  fill: "#9696b9",
-                                  color: "#f8f8f8",
-                                  strokeWidth: 1.8
-                                }
-                              )
+                              children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react52.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                             }
                           )
                         ]
@@ -17282,7 +17254,7 @@ var DashboardFileInput = React69.forwardRef(
                     ) : /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
                     /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
                       loading && /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react53.Paperclip, { size: 20 })
+                      /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(import_lucide_react52.Paperclip, { size: 20 })
                     ] })
                   ]
                 }
@@ -17400,7 +17372,7 @@ function DashboardSelectIconsBox({
 
 // src/searchable-select/SearchableSelect.tsx
 var React71 = __toESM(require("react"), 1);
-var import_lucide_react54 = require("lucide-react");
+var import_lucide_react53 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_react82 = require("react");
 var import_jsx_runtime175 = require("react/jsx-runtime");
@@ -17638,7 +17610,7 @@ var SearchableSelectInternal = ({
         onKeyDown: handleTriggerKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
-          import_lucide_react54.ChevronDown,
+          import_lucide_react53.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -17736,7 +17708,7 @@ function SearchableSelectContent({
   return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "p-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
-        import_lucide_react54.Search,
+        import_lucide_react53.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"