@chekinapp/ui 0.0.95 → 0.0.98

package/dist/index.cjs

@@ -367,6 +367,7 @@ __export(index_exports, {
   useClickEscape: () => useClickEscape,
   useCombinedRef: () => useCombinedRef,
   useCopyToClipboard: () => useCopyToClipboard,
+  useCountdown: () => useCountdown,
   useDebounce: () => useDebounce,
   useDebouncedFunction: () => useDebouncedFunction,
   useEvent: () => useEvent,
@@ -399,7 +400,6 @@ __export(index_exports, {
   useTimeline: () => useTimeline,
   useTimeout: () => useTimeout,
   useTimeoutRef: () => useTimeoutRef,
-  useTimer: () => useTimer,
   useUpdateToast: () => useUpdateToast,
   useValidateDates: () => useValidateDates
 });
@@ -3786,16 +3786,20 @@ function useSwitchSectionActive(preloadedSectionActive, { canToggle, onToggle, o
   };
 }
 
-// src/hooks/use-timer.ts
+// src/hooks/use-countdown.ts
 var import_react33 = require("react");
-var useTimer = ({ seconds, enabled = true, onFinish }) => {
-  const [timeLeft, setTimeLeft] = (0, import_react33.useState)(seconds);
+var useCountdown = ({
+  initialTime = 60,
+  enabled = true,
+  onFinish
+} = {}) => {
+  const [timeLeft, setTimeLeft] = (0, import_react33.useState)(initialTime);
   const [isTimerRunning, setIsTimerRunning] = (0, import_react33.useState)(enabled);
   const handleOnFinish = useEvent(onFinish);
   (0, import_react33.useEffect)(() => {
-    setTimeLeft(seconds);
+    setTimeLeft(initialTime);
     setIsTimerRunning(enabled);
-  }, [enabled, seconds]);
+  }, [initialTime, enabled]);
   (0, import_react33.useEffect)(() => {
     if (!isTimerRunning) return;
     const timer = setInterval(() => {
@@ -3816,7 +3820,7 @@ var useTimer = ({ seconds, enabled = true, onFinish }) => {
     }
   }, [timeLeft]);
   const resetTimer = () => {
-    setTimeLeft(seconds);
+    setTimeLeft(initialTime);
     setIsTimerRunning(enabled);
   };
   return {
@@ -6653,12 +6657,16 @@ var import_jsx_runtime74 = require("react/jsx-runtime");
 var loaderSizePixels = {
   sm: 16,
   md: 32,
-  lg: 48
+  lg: 48,
+  xl: 58,
+  "2xl": 72
 };
 var labelSizeClassName = {
   sm: "text-xs",
   md: "text-sm",
-  lg: "text-base"
+  lg: "text-base",
+  xl: "text-base",
+  "2xl": "text-base"
 };
 var CircularLoader = import_react57.default.memo(
   ({
@@ -6675,7 +6683,7 @@ var CircularLoader = import_react57.default.memo(
       "div",
       {
         className: cn(
-          "main-loader flex flex-col items-center justify-center gap-2",
+          "main-loader flex flex-col items-center justify-center gap-2 z-50",
           position === "center" && "h-full",
           className
         ),
@@ -7565,7 +7573,16 @@ function useRadioOptions({ options, defaultValue, onChange }) {
 // src/radio/Radio.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
 var Radio = (0, import_react64.forwardRef)(
-  ({ options, value, onChange, error, className = "", disabled = false, renderOption }, ref) => {
+  ({
+    options,
+    value,
+    onChange,
+    error,
+    className = "",
+    size,
+    disabled = false,
+    renderOption
+  }, ref) => {
     const { selectedValue, handleValueChange } = useRadioOptions({
       options,
       defaultValue: value,
@@ -7591,7 +7608,7 @@ var Radio = (0, import_react64.forwardRef)(
             {
               className: cn(
                 "radio__wrapper",
-                "flex cursor-pointer items-center gap-2",
+                "flex cursor-pointer items-center gap-2 transition-all duration-200",
                 (disabled || option.disabled) && "cursor-default opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
               ),
               children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
@@ -7601,6 +7618,7 @@ var Radio = (0, import_react64.forwardRef)(
                     value: option.value,
                     id: `option-${option.value}`,
                     disabled: option.disabled,
+                    size,
                     className: "radio__indicator"
                   }
                 ),
@@ -7630,7 +7648,7 @@ function RadioWithBorder({ size, ...props }) {
           "div",
           {
             className: cn(
-              "flex w-full items-start gap-3 rounded-lg border p-4",
+              "flex w-full items-start gap-3 rounded-lg border p-4 transition-all duration-200",
               isSelected && "border-[var(--chekin-color-brand-blue)] bg-[var(--chekin-color-surface-autocomplete)]"
             ),
             children: [
@@ -7644,12 +7662,15 @@ function RadioWithBorder({ size, ...props }) {
                   size
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "space-y-1 leading-6", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("p", { className: "flex items-center gap-3 font-semibold", children: [
-                  option.label,
-                  data?.subLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "rounded bg-[color-mix(in_srgb,var(--chekin-color-brand-blue)_10%,transparent)] px-2 py-1 text-sm font-semibold leading-4 text-[var(--chekin-color-brand-blue)]", children: data.subLabel })
+              /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex min-w-0 flex-1 items-start justify-between gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "min-w-0 space-y-1 leading-6", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("p", { className: "flex items-center gap-3 font-semibold", children: [
+                    option.label,
+                    data?.subLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "rounded bg-[color-mix(in_srgb,var(--chekin-color-brand-blue)_10%,transparent)] px-2 py-1 text-sm font-semibold leading-4 text-[var(--chekin-color-brand-blue)]", children: data.subLabel })
+                  ] }),
+                  data?.description && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: "text-sm font-medium text-[var(--chekin-color-gray-1)]", children: data.description })
                 ] }),
-                data?.description && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: "text-sm font-medium text-[var(--chekin-color-gray-1)]", children: data.description })
+                data?.rightContent && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "shrink-0", children: data.rightContent })
               ] })
             ]
           }
@@ -19207,6 +19228,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
   useClickEscape,
   useCombinedRef,
   useCopyToClipboard,
+  useCountdown,
   useDebounce,
   useDebouncedFunction,
   useEvent,
@@ -19239,7 +19261,6 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
   useTimeline,
   useTimeout,
   useTimeoutRef,
-  useTimer,
   useUpdateToast,
   useValidateDates
 });