@chekinapp/ui 0.2.7 → 0.2.9

package/dist/index.cjs

@@ -44,6 +44,7 @@ __export(index_exports, {
   AirbnbSearchableSelect: () => AirbnbSearchableSelect,
   AirbnbSelect: () => AirbnbSelect,
   AirbnbSwitch: () => AirbnbSwitch,
+  AirbnbTimePicker: () => AirbnbTimePicker,
   Alert: () => Alert,
   AlertBox: () => AlertBox,
   AlertDescription: () => AlertDescription,
@@ -605,24 +606,32 @@ var AlertSize = /* @__PURE__ */ ((AlertSize2) => {
   AlertSize2["L"] = "L";
   return AlertSize2;
 })(AlertSize || {});
-var getIcon = (type) => ({
-  ["INFO" /* INFO */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.AlertCircle, { className: "relative" }),
-  ["WARNING" /* WARNING */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.TriangleAlert, { className: "relative" }),
-  ["ERROR" /* ERROR */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.XCircle, { className: "relative" }),
-  ["LIGHT" /* LIGHT */]: null,
-  ["SUCCESS" /* SUCCESS */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Check, { className: "relative" })
-})[type];
+var getIcon = (type) => {
+  const key = type.toLowerCase();
+  const iconProps = {
+    className: "relative",
+    fill: `var(--alert-box-${key}-icon-fill)`,
+    stroke: `var(--alert-box-${key}-icon)`
+  };
+  return {
+    ["INFO" /* INFO */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.AlertCircle, { ...iconProps }),
+    ["WARNING" /* WARNING */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.TriangleAlert, { ...iconProps }),
+    ["ERROR" /* ERROR */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.XCircle, { ...iconProps }),
+    ["LIGHT" /* LIGHT */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.AlertCircle, { ...iconProps }),
+    ["SUCCESS" /* SUCCESS */]: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.Check, { ...iconProps })
+  }[type];
+};
 var sizeClasses = {
   ["S" /* S */]: "px-3 py-3 text-sm font-medium items-start",
   ["M" /* M */]: "p-4 text-base font-medium items-start",
   ["L" /* L */]: "px-6 py-5 items-start"
 };
 var typeStyles = {
-  ["INFO" /* INFO */]: "bg-[var(--alert-box-info-bg)] [&_svg]:text-[var(--alert-box-info-icon)]",
-  ["WARNING" /* WARNING */]: "bg-[var(--alert-box-warning-bg)] [&_svg]:text-[var(--alert-box-warning-icon)]",
-  ["ERROR" /* ERROR */]: "bg-[var(--alert-box-error-bg)] [&_svg]:text-[var(--alert-box-error-icon)]",
-  ["SUCCESS" /* SUCCESS */]: "bg-[var(--alert-box-success-bg)] text-[var(--alert-box-success-text)] [&_svg]:text-[var(--alert-box-success-icon)]",
-  ["LIGHT" /* LIGHT */]: ""
+  ["INFO" /* INFO */]: "border-[color:var(--alert-box-info-border)] bg-[var(--alert-box-info-bg)] text-[color:var(--alert-box-info-text)]",
+  ["WARNING" /* WARNING */]: "border-[color:var(--alert-box-warning-border)] bg-[var(--alert-box-warning-bg)] text-[color:var(--alert-box-warning-text)]",
+  ["ERROR" /* ERROR */]: "border-[color:var(--alert-box-error-border)] bg-[var(--alert-box-error-bg)] text-[color:var(--alert-box-error-text)]",
+  ["SUCCESS" /* SUCCESS */]: "border-[color:var(--alert-box-success-border)] bg-[var(--alert-box-success-bg)] text-[color:var(--alert-box-success-text)]",
+  ["LIGHT" /* LIGHT */]: "border-[color:var(--alert-box-light-border)] bg-[var(--alert-box-light-bg)] text-[color:var(--alert-box-light-text)]"
 };
 function AlertBox({
   children,
@@ -636,7 +645,7 @@ function AlertBox({
     {
       "data-slot": "alert-box",
       className: cn(
-        "flex gap-3 rounded-[var(--alert-box-radius)] [&_svg]:h-5 [&_svg]:w-5 [&_svg]:shrink-0",
+        "flex gap-3 rounded-[var(--alert-box-radius)] border-solid border-[length:var(--alert-box-border-width)] [&_svg]:h-5 [&_svg]:w-5 [&_svg]:shrink-0",
         sizeClasses[size],
         typeStyles[type],
         className
@@ -8346,9 +8355,9 @@ var LinkInternal = (0, import_react53.forwardRef)(
     {
       ref,
       className: cn(
-        "inline cursor-pointer text-[var(--button-link-text)] no-underline transition-all duration-75 ease-in-out",
+        "inline cursor-pointer text-[var(--link-text-color)] [text-decoration:var(--link-text-decoration)] transition-all duration-75 ease-in-out",
         !disabled && "hover:opacity-80 active:opacity-100",
-        disabled && "cursor-not-allowed text-[var(--chekin-neutral-400)]",
+        disabled && "cursor-not-allowed text-[var(--link-disabled-text-color)]",
         "[&_img]:inline [&_img]:align-middle [&_svg]:relative [&_svg]:bottom-[1px] [&_svg]:ml-1 [&_svg]:inline [&_svg]:align-middle",
         className
       ),
@@ -18915,13 +18924,13 @@ var import_date_fns2 = require("date-fns");
 var import_date_fns = require("date-fns");
 var DEFAULT_DISPLAY_FORMAT = "dd-MM-yyyy";
 var SUPPORTED_FORMATS = ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"];
-var formatDate = (format2 = DEFAULT_DISPLAY_FORMAT) => (date) => (0, import_date_fns.format)(date, format2);
+var formatDate = (format3 = DEFAULT_DISPLAY_FORMAT) => (date) => (0, import_date_fns.format)(date, format3);
 var parseDate = (displayFormat) => (dateStr) => {
   if (!dateStr) return void 0;
   const formats = displayFormat ? Array.from(/* @__PURE__ */ new Set([...SUPPORTED_FORMATS, displayFormat])) : SUPPORTED_FORMATS;
-  for (const format2 of formats) {
-    const parsed = (0, import_date_fns.parse)(dateStr, format2, /* @__PURE__ */ new Date());
-    if ((0, import_date_fns.isValid)(parsed) && (0, import_date_fns.format)(parsed, format2) === dateStr) {
+  for (const format3 of formats) {
+    const parsed = (0, import_date_fns.parse)(dateStr, format3, /* @__PURE__ */ new Date());
+    if ((0, import_date_fns.isValid)(parsed) && (0, import_date_fns.format)(parsed, format3) === dateStr) {
       return parsed;
     }
   }
@@ -19022,14 +19031,14 @@ function useRangeValue({
 var React66 = __toESM(require("react"), 1);
 
 // src/fields/date-range-picker/utils/inputFormat.ts
-function parseDateInputFormat(format2) {
+function parseDateInputFormat(format3) {
   const tokens = [];
   let i = 0;
-  while (i < format2.length) {
-    const ch = format2[i];
+  while (i < format3.length) {
+    const ch = format3[i];
     if (/[a-zA-Z]/.test(ch)) {
       let len = 1;
-      while (i + len < format2.length && format2[i + len] === ch) len++;
+      while (i + len < format3.length && format3[i + len] === ch) len++;
       tokens.push({ type: "digits", length: len });
       i += len;
     } else {
@@ -19101,8 +19110,8 @@ function autoFormatDateInput(raw, tokens) {
 var countDigits = (text) => text.replace(/\D/g, "").length;
 function useRangeTextInputs({
   value,
-  format: format2,
-  parse: parse3,
+  format: format3,
+  parse: parse4,
   displayFormat,
   onCommit,
   onBlur,
@@ -19114,23 +19123,23 @@ function useRangeTextInputs({
     [displayFormat]
   );
   const maxDigits = React66.useMemo(() => getMaxDigits(tokens), [tokens]);
-  const [fromText, setFromText] = React66.useState(value?.from ? format2(value.from) : "");
-  const [toText, setToText] = React66.useState(value?.to ? format2(value.to) : "");
+  const [fromText, setFromText] = React66.useState(value?.from ? format3(value.from) : "");
+  const [toText, setToText] = React66.useState(value?.to ? format3(value.to) : "");
   React66.useEffect(() => {
-    setFromText(value?.from ? format2(value.from) : "");
-    setToText(value?.to ? format2(value.to) : "");
-  }, [format2, value?.from, value?.to]);
+    setFromText(value?.from ? format3(value.from) : "");
+    setToText(value?.to ? format3(value.to) : "");
+  }, [format3, value?.from, value?.to]);
   const handleFromChange = React66.useCallback(
     (raw) => {
       const formatted = autoFormatDateInput(raw, tokens);
       const wasComplete = countDigits(fromText) === maxDigits;
       const isComplete = countDigits(formatted) === maxDigits;
       setFromText(formatted);
-      if (!wasComplete && isComplete && parse3(formatted)) {
+      if (!wasComplete && isComplete && parse4(formatted)) {
         setTimeout(() => onFromComplete?.(), 0);
       }
     },
-    [fromText, maxDigits, onFromComplete, parse3, tokens]
+    [fromText, maxDigits, onFromComplete, parse4, tokens]
   );
   const handleToChange = React66.useCallback(
     (raw) => {
@@ -19138,11 +19147,11 @@ function useRangeTextInputs({
       const wasComplete = countDigits(toText) === maxDigits;
       const isComplete = countDigits(formatted) === maxDigits;
       setToText(formatted);
-      if (!wasComplete && isComplete && parse3(formatted)) {
+      if (!wasComplete && isComplete && parse4(formatted)) {
         setTimeout(() => onToComplete?.(), 0);
       }
     },
-    [maxDigits, onToComplete, parse3, toText, tokens]
+    [maxDigits, onToComplete, parse4, toText, tokens]
   );
   const handleFromBlur = React66.useCallback(() => {
     if (!fromText) {
@@ -19151,16 +19160,16 @@ function useRangeTextInputs({
       onBlur?.(next);
       return void 0;
     }
-    const parsed = parse3(fromText);
+    const parsed = parse4(fromText);
     if (parsed) {
       const next = { from: parsed, to: value?.to };
       onCommit(next);
       onBlur?.(next);
       return parsed;
     }
-    setFromText(value?.from ? format2(value.from) : "");
+    setFromText(value?.from ? format3(value.from) : "");
     return void 0;
-  }, [format2, fromText, onBlur, onCommit, parse3, value]);
+  }, [format3, fromText, onBlur, onCommit, parse4, value]);
   const handleToBlur = React66.useCallback(() => {
     if (!toText) {
       const next = { from: value?.from, to: void 0 };
@@ -19168,15 +19177,15 @@ function useRangeTextInputs({
       onBlur?.(next);
       return;
     }
-    const parsed = parse3(toText);
+    const parsed = parse4(toText);
     if (parsed) {
       const next = { from: value?.from, to: parsed };
       onCommit(next);
       onBlur?.(next);
       return;
     }
-    setToText(value?.to ? format2(value.to) : "");
-  }, [format2, onBlur, onCommit, parse3, toText, value]);
+    setToText(value?.to ? format3(value.to) : "");
+  }, [format3, onBlur, onCommit, parse4, toText, value]);
   return {
     fromText,
     toText,
@@ -20361,7 +20370,7 @@ function AirbnbFieldHelperText({
     {
       id,
       className: cn(
-        "mt-2 text-[12px] font-normal leading-5 text-[var(--chekin-airbnb-gray-text)]",
+        "mt-2 text-[12px] leading-5 text-[var(--chekin-airbnb-gray-text)]",
         disabled && "opacity-50",
         className
       ),
@@ -22762,6 +22771,62 @@ var AirbnbSwitch = React84.forwardRef(
   }
 );
 AirbnbSwitch.displayName = "AirbnbSwitch";
+
+// src/airbnb-fields/time-picker/TimePicker.tsx
+var React85 = __toESM(require("react"), 1);
+var import_date_fns6 = require("date-fns");
+var import_jsx_runtime198 = require("react/jsx-runtime");
+var SHORT_TIME_FORMAT2 = "HH:mm";
+function parseTime2(value) {
+  return (0, import_date_fns6.parse)(value, SHORT_TIME_FORMAT2, /* @__PURE__ */ new Date());
+}
+function getRange2(settings) {
+  const min = parseTime2(settings.min_time);
+  const max = settings.max_time === "00:00" && settings.addNextDay ? (0, import_date_fns6.addDays)(parseTime2(settings.max_time), 1) : parseTime2(settings.max_time);
+  return { min, max };
+}
+function buildOptions2(settings) {
+  const interval_unit = settings.interval_unit ?? "M";
+  const interval = settings.interval ?? (interval_unit === "H" ? 1 : 60);
+  const min_time = settings.min_time ?? "00:00";
+  const max_time = settings.max_time ?? (interval_unit === "H" ? "23:00" : "23:00");
+  const addNextDay = settings.addNextDay !== false;
+  const { min, max } = getRange2({ interval_unit, interval, min_time, max_time, addNextDay });
+  const options = [];
+  let current = new Date(min.getTime());
+  while (current.getTime() <= max.getTime()) {
+    const text = (0, import_date_fns6.format)(current, SHORT_TIME_FORMAT2);
+    options.push({ value: text, label: text });
+    current = interval_unit === "H" ? (0, import_date_fns6.addHours)(current, interval) : (0, import_date_fns6.addMinutes)(current, interval);
+  }
+  return options;
+}
+var FORMAT_SETTINGS2 = {
+  time: { interval_unit: "M", interval: 30, min_time: "00:00", max_time: "23:30" },
+  timeEach15Minutes: {
+    interval_unit: "M",
+    interval: 15,
+    min_time: "00:00",
+    max_time: "23:45"
+  },
+  timeEach30Minutes: {
+    interval_unit: "M",
+    interval: 30,
+    min_time: "00:00",
+    max_time: "23:30"
+  },
+  hours: { interval_unit: "H", interval: 1, min_time: "00:00", max_time: "23:00" }
+};
+var AirbnbTimePicker = React85.forwardRef(
+  function AirbnbTimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
+    const resolvedOptions = React85.useMemo(() => {
+      if (options) return options;
+      const settings = timeSettings ?? FORMAT_SETTINGS2[formatName];
+      return buildOptions2(settings);
+    }, [formatName, options, timeSettings]);
+    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(AirbnbSelect, { ref, ...selectProps, options: resolvedOptions });
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ALERT_BOX_VARIANTS,
@@ -22778,6 +22843,7 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
   AirbnbSearchableSelect,
   AirbnbSelect,
   AirbnbSwitch,
+  AirbnbTimePicker,
   Alert,
   AlertBox,
   AlertDescription,