@chekinapp/ui 0.0.77 → 0.0.80

package/dist/index.d.cts

@@ -555,20 +555,20 @@ declare const FramedIcon: React$1.ForwardRefExoticComponent<FramedIconProps & Re
 
 declare const statusStyles: {
     readonly INACTIVE: {
-        readonly background: "bg-[#f4f6f8]";
-        readonly color: "text-[#9696b9]";
+        readonly background: "bg-[var(--chekin-color-surface-input-empty)]";
+        readonly color: "text-[var(--chekin-color-gray-2)]";
     };
     readonly ACTIVE: {
-        readonly background: "bg-[#eff6ff]";
-        readonly color: "text-[#385cf8]";
+        readonly background: "bg-[var(--chekin-color-surface-autocomplete)]";
+        readonly color: "text-[var(--chekin-color-brand-blue)]";
     };
     readonly SUCCESS: {
         readonly background: "bg-[#e8fcf7]";
         readonly color: "text-[#2bc29f]";
     };
     readonly DANGER: {
-        readonly background: "bg-[#fff5f9]";
-        readonly color: "text-[#ff2467]";
+        readonly background: "bg-[#ffe2ed]";
+        readonly color: "text-[var(--error-message-color)]";
     };
 };
 interface HaloIconProps extends PropsWithChildren {
@@ -795,6 +795,8 @@ declare const uiKitTranslations: {
         past_dates: string;
         future_dates: string;
         signature_placeholder_text: string;
+        camera_permissions_denied: string;
+        clear: string;
     };
     readonly es: {
         verified: string;
@@ -1229,6 +1231,8 @@ declare const uiKitI18nResources: {
             past_dates: string;
             future_dates: string;
             signature_placeholder_text: string;
+            camera_permissions_denied: string;
+            clear: string;
         };
     };
     readonly es: {

package/dist/index.d.ts

@@ -555,20 +555,20 @@ declare const FramedIcon: React$1.ForwardRefExoticComponent<FramedIconProps & Re
 
 declare const statusStyles: {
     readonly INACTIVE: {
-        readonly background: "bg-[#f4f6f8]";
-        readonly color: "text-[#9696b9]";
+        readonly background: "bg-[var(--chekin-color-surface-input-empty)]";
+        readonly color: "text-[var(--chekin-color-gray-2)]";
     };
     readonly ACTIVE: {
-        readonly background: "bg-[#eff6ff]";
-        readonly color: "text-[#385cf8]";
+        readonly background: "bg-[var(--chekin-color-surface-autocomplete)]";
+        readonly color: "text-[var(--chekin-color-brand-blue)]";
     };
     readonly SUCCESS: {
         readonly background: "bg-[#e8fcf7]";
         readonly color: "text-[#2bc29f]";
     };
     readonly DANGER: {
-        readonly background: "bg-[#fff5f9]";
-        readonly color: "text-[#ff2467]";
+        readonly background: "bg-[#ffe2ed]";
+        readonly color: "text-[var(--error-message-color)]";
     };
 };
 interface HaloIconProps extends PropsWithChildren {
@@ -795,6 +795,8 @@ declare const uiKitTranslations: {
         past_dates: string;
         future_dates: string;
         signature_placeholder_text: string;
+        camera_permissions_denied: string;
+        clear: string;
     };
     readonly es: {
         verified: string;
@@ -1229,6 +1231,8 @@ declare const uiKitI18nResources: {
             past_dates: string;
             future_dates: string;
             signature_placeholder_text: string;
+            camera_permissions_denied: string;
+            clear: string;
         };
     };
     readonly es: {

package/dist/index.js

@@ -4059,20 +4059,20 @@ var HALO_ICON_STATUS = {
 import { jsx as jsx49 } from "react/jsx-runtime";
 var statusStyles = {
   [HALO_ICON_STATUS.inactive]: {
-    background: "bg-[#f4f6f8]",
-    color: "text-[#9696b9]"
+    background: "bg-[var(--chekin-color-surface-input-empty)]",
+    color: "text-[var(--chekin-color-gray-2)]"
   },
   [HALO_ICON_STATUS.active]: {
-    background: "bg-[#eff6ff]",
-    color: "text-[#385cf8]"
+    background: "bg-[var(--chekin-color-surface-autocomplete)]",
+    color: "text-[var(--chekin-color-brand-blue)]"
   },
   [HALO_ICON_STATUS.success]: {
     background: "bg-[#e8fcf7]",
     color: "text-[#2bc29f]"
   },
   [HALO_ICON_STATUS.danger]: {
-    background: "bg-[#fff5f9]",
-    color: "text-[#ff2467]"
+    background: "bg-[#ffe2ed]",
+    color: "text-[var(--error-message-color)]"
   }
 };
 var HaloIcon = forwardRef21(
@@ -5186,7 +5186,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
@@ -15941,6 +15943,7 @@ var createDisabledMatchers = ({
 
 // src/dashboard/date-range-picker/hooks/useRangeValue.ts
 import * as React63 from "react";
+var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
 function useRangeValue({
   value: externalValue,
   defaultValue,
@@ -15948,22 +15951,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
@@ -16209,54 +16219,8 @@ function DateRangeInputs({
   );
 }
 
-// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
-import { ArrowLeft, ArrowRight } from "lucide-react";
-import {
-  DayPicker as DayPicker2
-} from "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
 import { jsx as jsx167 } from "react/jsx-runtime";
-var calendarComponents = {
-  Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx167(ArrowLeft, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ jsx167(ArrowRight, { size: 14, strokeWidth: 2, "aria-hidden": "true" })
-};
 function DateRangeCalendar({
   value,
   month,
@@ -16269,11 +16233,11 @@ function DateRangeCalendar({
   minDays,
   autoFocus,
   disabledMatchers,
-  components: customComponents,
+  components,
   ...dayPickerProps
 }) {
   return /* @__PURE__ */ jsx167(
-    DayPicker2,
+    Calendar,
     {
       mode: "range",
       selected: value,
@@ -16281,16 +16245,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
     }
   );