@123usmanhaider321/ui 0.1.0 → 0.1.8

package/dist/components/ui/TimePicker/index.js

@@ -0,0 +1,215 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Clock } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import { IMaskInput, IMask } from "react-imask";
+import dayjs from "../../../node_modules/dayjs/dayjs.min.js";
+import customParseFormat from "../../../node_modules/dayjs/plugin/customParseFormat.js";
+import TimeSelector from "../TimeSelector/index.js";
+dayjs.extend(customParseFormat);
+const TimePicker = ({
+  value,
+  onChange,
+  placeholder = "--:-- --",
+  minTime,
+  maxTime,
+  disabled = false,
+  error,
+  className = "",
+  inputClassName = "",
+  position = "auto",
+  renderExtra,
+  onBlur,
+  step = 30
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0, position: "bottom" });
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      const isClickInsideContainer = (_a = containerRef.current) == null ? void 0 : _a.contains(target);
+      const isClickInsidePopover = (_b = popoverRef.current) == null ? void 0 : _b.contains(target);
+      if (!isClickInsideContainer && !isClickInsidePopover) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isOpen]);
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      let position2 = "bottom";
+      if (spaceBelow < 300 && spaceAbove > 300) {
+        position2 = "top";
+      }
+      setCoords({
+        top: position2 === "bottom" ? rect.bottom + 8 : rect.top - 8,
+        left: rect.left,
+        position: position2
+      });
+    }
+  };
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+    }
+  }, [isOpen, position]);
+  const handleTimeSelect = (time) => {
+    onChange(time);
+    onBlur == null ? void 0 : onBlur();
+  };
+  const [inputValue, setInputValue] = useState("");
+  useEffect(() => {
+    if (value) {
+      setInputValue(dayjs(`2000-01-01 ${value}`).format("hh:mm A"));
+    } else {
+      setInputValue("");
+    }
+  }, [value]);
+  const handleInputBlur = () => {
+    if (value) {
+      setInputValue(dayjs(`2000-01-01 ${value}`).format("hh:mm A"));
+    } else {
+      setInputValue("");
+    }
+    onBlur == null ? void 0 : onBlur();
+  };
+  const toggleOpen = () => {
+    if (!disabled) {
+      if (!isOpen) {
+        updatePosition();
+      }
+      setIsOpen(!isOpen);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: triggerRef,
+        className: `w-full h-10 px-3 flex items-center justify-between bg-white rounded-lg ease-in-out focus-within:ring-2 focus-within:ring-primaryx-500/20 focus-within:border-primaryx-500 transition-all duration-200 ${disabled ? "bg-grey-50 cursor-not-allowed opacity-60" : ""} ${error ? "ring-1 ring-error-500 text-error-900" : "input-border text-grey-700"} ${inputClassName}`,
+        onClick: () => {
+          if (!isOpen && !disabled) toggleOpen();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            IMaskInput,
+            {
+              mask: "h:m p",
+              blocks: {
+                h: {
+                  mask: IMask.MaskedRange,
+                  from: 1,
+                  to: 12,
+                  maxLength: 2
+                },
+                m: {
+                  mask: IMask.MaskedRange,
+                  from: 0,
+                  to: 59,
+                  maxLength: 2
+                },
+                p: {
+                  mask: IMask.MaskedEnum,
+                  enum: ["AM", "PM", "am", "pm"]
+                }
+              },
+              autofix: true,
+              lazy: false,
+              value: inputValue,
+              onAccept: (val) => {
+                setInputValue(val);
+                if (val.includes("_")) return;
+                let time = dayjs(val.toUpperCase(), "hh:mm A", true);
+                if (time.isValid()) {
+                  if (step) {
+                    const m = time.minute();
+                    const roundedM = Math.round(m / step) * step;
+                    if (roundedM === 60) {
+                      time = time.add(1, "hour").minute(0);
+                    } else {
+                      time = time.minute(roundedM);
+                    }
+                  }
+                  let time24 = time.format("HH:mm");
+                  if (minTime && time24 < minTime || maxTime && time24 > maxTime) {
+                    return;
+                  }
+                  if (time24 !== value) {
+                    onChange(time24);
+                  }
+                } else if (!val && value) {
+                  onChange("");
+                }
+              },
+              onBlur: handleInputBlur,
+              onFocus: () => {
+                if (!isOpen && !disabled) toggleOpen();
+              },
+              placeholder,
+              disabled,
+              className: "imask-input w-full h-full bg-transparent border-none outline-none focus:border-none focus:outline-none focus:border-none! focus:outline-none! focus:ring-0 focus:ring-0! ring-0 text-sm placeholder-grey-400 uppercase font-medium px-0"
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            toggleOpen();
+          }, className: "focus:outline-none", children: /* @__PURE__ */ jsx(Clock, { className: `w-4 h-4 ${!value ? "text-grey-400" : "text-grey-600"}` }) })
+        ]
+      }
+    ),
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: popoverRef,
+          initial: { opacity: 0, y: coords.position === "bottom" ? -10 : 10, scale: 0.95 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: coords.position === "bottom" ? -10 : 10, scale: 0.95 },
+          transition: { duration: 0.15 },
+          style: {
+            position: "fixed",
+            top: coords.top,
+            left: coords.left,
+            zIndex: 99999,
+            transformOrigin: coords.position === "bottom" ? "top left" : "bottom left"
+          },
+          className: `p-1 w-max ${coords.position === "top" ? "-translate-y-full" : ""}`,
+          children: /* @__PURE__ */ jsx(
+            TimeSelector,
+            {
+              value,
+              onChange: handleTimeSelect,
+              minTime,
+              maxTime,
+              renderExtra,
+              className: "shadow-xl",
+              step
+            }
+          )
+        }
+      ) }),
+      document.body
+    )
+  ] });
+};
+export {
+  TimePicker as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ui/TimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ui/TimePicker/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useState, useRef, useEffect } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\nimport { Clock } from \"lucide-react\";\r\nimport { AnimatePresence, motion } from \"framer-motion\";\r\nimport { IMaskInput, IMask } from 'react-imask';\r\nimport dayjs from \"dayjs\";\r\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\r\nimport TimeSelector from \"@/components/ui/TimeSelector\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ndayjs.extend(customParseFormat);\r\n\r\ninterface TimePickerProps {\r\n    value?: string;\r\n    onChange: (time: string) => void;\r\n    placeholder?: string;\r\n    minTime?: string;\r\n    maxTime?: string;\r\n    disabled?: boolean;\r\n    error?: string;\r\n    className?: string;\r\n    inputClassName?: string;\r\n    position?: 'top' | 'bottom' | 'auto';\r\n    renderExtra?: (time: string) => React.ReactNode;\r\n    onBlur?: () => void;\r\n    step?: number;\r\n}\r\n\r\nconst TimePicker = ({\r\n    value,\r\n    onChange,\r\n    placeholder = \"--:-- --\",\r\n    minTime,\r\n    maxTime,\r\n    disabled = false,\r\n    error,\r\n    className = \"\",\r\n    inputClassName = \"\",\r\n    position = \"auto\",\r\n    renderExtra,\r\n    onBlur,\r\n    step = 30\r\n}: TimePickerProps) => {\r\n    const [isOpen, setIsOpen] = useState(false);\r\n    const [coords, setCoords] = useState<{ top: number; left: number; position: 'top' | 'bottom' }>({ top: 0, left: 0, position: 'bottom' });\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const triggerRef = useRef<HTMLDivElement>(null);\r\n    const popoverRef = useRef<HTMLDivElement>(null);\r\n\r\n    // Close when clicking outside\r\n    useEffect(() => {\r\n        const handleClickOutside = (event: MouseEvent) => {\r\n            const target = event.target as Node;\r\n            const isClickInsideContainer = containerRef.current?.contains(target);\r\n            const isClickInsidePopover = popoverRef.current?.contains(target);\r\n\r\n            if (!isClickInsideContainer && !isClickInsidePopover) {\r\n                setIsOpen(false);\r\n            }\r\n        };\r\n\r\n        if (isOpen) {\r\n            document.addEventListener('mousedown', handleClickOutside);\r\n            window.addEventListener('scroll', updatePosition, true);\r\n            window.addEventListener('resize', updatePosition);\r\n        }\r\n\r\n        return () => {\r\n            document.removeEventListener('mousedown', handleClickOutside);\r\n            window.removeEventListener('scroll', updatePosition, true);\r\n            window.removeEventListener('resize', updatePosition);\r\n        };\r\n    }, [isOpen]);\r\n\r\n    const updatePosition = () => {\r\n        if (triggerRef.current) {\r\n            const rect = triggerRef.current.getBoundingClientRect();\r\n            const spaceBelow = window.innerHeight - rect.bottom;\r\n            const spaceAbove = rect.top;\r\n\r\n            // Prefer bottom, unless limited space\r\n            let position: 'top' | 'bottom' = 'bottom';\r\n            if (spaceBelow < 300 && spaceAbove > 300) {\r\n                position = 'top';\r\n            }\r\n\r\n            setCoords({\r\n                top: position === 'bottom' ? rect.bottom + 8 : rect.top - 8,\r\n                left: rect.left,\r\n                position\r\n            });\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        if (isOpen) {\r\n            updatePosition();\r\n        }\r\n    }, [isOpen, position]);\r\n\r\n    const handleTimeSelect = (time: string) => {\r\n        onChange(time);\r\n        // Popover stays open as per user request\r\n        onBlur?.();\r\n    };\r\n\r\n    const [inputValue, setInputValue] = useState(\"\");\r\n\r\n    useEffect(() => {\r\n        if (value) {\r\n            setInputValue(dayjs(`2000-01-01 ${value}`).format('hh:mm A'));\r\n        } else {\r\n            setInputValue(\"\");\r\n        }\r\n    }, [value]);\r\n\r\n    const handleInputBlur = () => {\r\n        if (value) {\r\n            setInputValue(dayjs(`2000-01-01 ${value}`).format('hh:mm A'));\r\n        } else {\r\n            setInputValue(\"\");\r\n        }\r\n        onBlur?.();\r\n    };\r\n\r\n    const toggleOpen = () => {\r\n        if (!disabled) {\r\n            if (!isOpen) {\r\n                updatePosition();\r\n            }\r\n            setIsOpen(!isOpen);\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div ref={containerRef} className={`relative w-full ${className}`}>\r\n            <div\r\n                ref={triggerRef}\r\n                className={`w-full h-10 px-3 flex items-center justify-between bg-white rounded-lg ease-in-out focus-within:ring-2 focus-within:ring-primaryx-500/20 focus-within:border-primaryx-500 transition-all duration-200 ${disabled ? 'bg-grey-50 cursor-not-allowed opacity-60' : ''\r\n                    } ${error\r\n                        ? 'ring-1 ring-error-500 text-error-900'\r\n                        : 'input-border text-grey-700'\r\n                    } ${inputClassName}`}\r\n                onClick={() => {\r\n                    // Open on click (matches DatePicker behavior)\r\n                    if (!isOpen && !disabled) toggleOpen();\r\n                }}\r\n            >\r\n                <IMaskInput\r\n                    mask=\"h:m p\"\r\n                    blocks={{\r\n                        h: {\r\n                            mask: IMask.MaskedRange,\r\n                            from: 1,\r\n                            to: 12,\r\n                            maxLength: 2,\r\n                        },\r\n                        m: {\r\n                            mask: IMask.MaskedRange,\r\n                            from: 0,\r\n                            to: 59,\r\n                            maxLength: 2,\r\n                        },\r\n                        p: {\r\n                            mask: IMask.MaskedEnum,\r\n                            enum: ['AM', 'PM', 'am', 'pm']\r\n                        }\r\n                    }}\r\n                    autofix={true}\r\n                    lazy={false} // Visible mask\r\n                    value={inputValue}\r\n                    onAccept={(val: string) => {\r\n                        setInputValue(val);\r\n                        // Don't try to parse if there are placeholders (not fully typed)\r\n                        if (val.includes('_')) return;\r\n\r\n                        // Parse normalized value (uppercase for AM/PM)\r\n                        let time = dayjs(val.toUpperCase(), \"hh:mm A\", true);\r\n\r\n                        if (time.isValid()) {\r\n                            // Strict Snapping\r\n                            if (step) {\r\n                                const m = time.minute();\r\n                                const roundedM = Math.round(m / step) * step;\r\n                                if (roundedM === 60) {\r\n                                    time = time.add(1, 'hour').minute(0);\r\n                                } else {\r\n                                    time = time.minute(roundedM);\r\n                                }\r\n                            }\r\n\r\n                            let time24 = time.format(\"HH:mm\");\r\n\r\n                            // If user typed a disabled time, DO NOT fire onChange.\r\n                            // The onBlur handler will revert the input back to the last valid selection.\r\n                            if ((minTime && time24 < minTime) || (maxTime && time24 > maxTime)) {\r\n                                return;\r\n                            }\r\n\r\n                            if (time24 !== value) {\r\n                                onChange(time24);\r\n                            }\r\n                        } else if (!val && value) {\r\n                            // Handle full deletion\r\n                            onChange(\"\");\r\n                        }\r\n                    }}\r\n                    onBlur={handleInputBlur}\r\n                    onFocus={() => {\r\n                        // Open on focus\r\n                        if (!isOpen && !disabled) toggleOpen();\r\n                    }}\r\n                    placeholder={placeholder}\r\n                    disabled={disabled}\r\n                    className=\"imask-input w-full h-full bg-transparent border-none outline-none focus:border-none focus:outline-none focus:border-none! focus:outline-none! focus:ring-0 focus:ring-0! ring-0 text-sm placeholder-grey-400 uppercase font-medium px-0\"\r\n                />\r\n\r\n                <button type=\"button\" onClick={(e) => { e.stopPropagation(); toggleOpen(); }} className=\"focus:outline-none\">\r\n                    <Clock className={`w-4 h-4 ${!value ? \"text-grey-400\" : \"text-grey-600\"}`} />\r\n                </button>\r\n            </div>\r\n\r\n            {typeof document !== 'undefined' && createPortal(\r\n                <AnimatePresence>\r\n                    {isOpen && (\r\n                        <motion.div\r\n                            ref={popoverRef}\r\n                            initial={{ opacity: 0, y: coords.position === 'bottom' ? -10 : 10, scale: 0.95 }}\r\n                            animate={{ opacity: 1, y: 0, scale: 1 }}\r\n                            exit={{ opacity: 0, y: coords.position === 'bottom' ? -10 : 10, scale: 0.95 }}\r\n                            transition={{ duration: 0.15 }}\r\n                            style={{\r\n                                position: 'fixed',\r\n                                top: coords.top,\r\n                                left: coords.left,\r\n                                zIndex: 99999,\r\n                                transformOrigin: coords.position === 'bottom' ? 'top left' : 'bottom left'\r\n                            }}\r\n                            className={`p-1 w-max ${coords.position === 'top' ? '-translate-y-full' : ''}`}\r\n                        >\r\n                            <TimeSelector\r\n                                value={value}\r\n                                onChange={handleTimeSelect}\r\n                                minTime={minTime}\r\n                                maxTime={maxTime}\r\n                                renderExtra={renderExtra}\r\n                                className=\"shadow-xl\"\r\n                                step={step}\r\n                            />\r\n                        </motion.div>\r\n                    )}\r\n                </AnimatePresence>,\r\n                document.body\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default TimePicker;\r\n"],"names":["position"],"mappings":"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"}

package/dist/components/ui/TimeSelector/index.d.ts

@@ -0,0 +1,11 @@
+interface TimeSelectorProps {
+    value?: string;
+    onChange: (time: string) => void;
+    minTime?: string;
+    maxTime?: string;
+    className?: string;
+    renderExtra?: (time: string) => React.ReactNode;
+    step?: number;
+}
+declare const _default: import('react').MemoExoticComponent<({ value, onChange, minTime, maxTime, className, renderExtra, step }: TimeSelectorProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/ui/TimeSelector/index.js

@@ -0,0 +1,138 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useRef, useEffect } from "react";
+import { cn } from "../../../lib/utils.js";
+import Tooltip from "../Tooltip.js";
+const formatTo12HourParts = (time) => {
+  if (typeof time !== "string" || time === "Invalid Date" || time.includes("undefined")) {
+    return { hour: "12", minute: "00", period: "AM" };
+  }
+  const parts = time.split(":");
+  const h = Number(parts[0]);
+  const m = parts.length > 1 ? Number(parts[1]) : 0;
+  const period = h >= 12 ? "PM" : "AM";
+  const hour12 = h % 12 || 12;
+  return {
+    hour: String(hour12),
+    minute: String(m || 0).padStart(2, "0"),
+    period
+  };
+};
+const TimeSelector = ({
+  value,
+  onChange,
+  minTime,
+  maxTime,
+  className,
+  renderExtra,
+  step = 30
+}) => {
+  const parts = formatTo12HourParts(value || "12:00");
+  const hours = Array.from({ length: 12 }, (_, i) => String(i + 1));
+  const minutes = Array.from({ length: 60 / step }, (_, i) => String(i * step).padStart(2, "0"));
+  const periods = ["AM", "PM"];
+  const parentScrollRef = useRef(null);
+  useEffect(() => {
+    const scrollToSelected = () => {
+      const container = parentScrollRef.current;
+      if (!container) return;
+      const selectedElement = container.querySelector(`[data-type="hour"][data-value="${parts.hour}"]`);
+      if (selectedElement) {
+        const centerOffset = selectedElement.offsetTop - container.clientHeight / 2 + selectedElement.clientHeight / 2;
+        container.scrollTop = centerOffset;
+      }
+    };
+    const timer = setTimeout(scrollToSelected, 100);
+    return () => clearTimeout(timer);
+  }, [value, parts.hour]);
+  const handlePartChange = (type, newValue) => {
+    let { hour, minute, period } = parts;
+    if (type === "hour") hour = newValue;
+    if (type === "minute") minute = newValue;
+    if (type === "period") period = newValue;
+    let h = parseInt(hour);
+    if (period === "PM" && h !== 12) h += 12;
+    if (period === "AM" && h === 12) h = 0;
+    const time24 = `${String(h).padStart(2, "0")}:${minute}`;
+    onChange(time24);
+  };
+  const isSlotDisabled = (type, val) => {
+    if (!minTime && !maxTime) return false;
+    let { hour, minute, period } = parts;
+    if (type === "hour") hour = val;
+    if (type === "minute") minute = val;
+    if (type === "period") period = val;
+    let h = parseInt(hour);
+    if (period === "PM" && h !== 12) h += 12;
+    if (period === "AM" && h === 12) h = 0;
+    const time24 = `${String(h).padStart(2, "0")}:${minute}`;
+    if (minTime && time24 < minTime) return true;
+    if (maxTime && time24 > maxTime) return true;
+    return false;
+  };
+  const renderColumn = (title, items, currentVal, type, isSticky = false) => /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col flex-1 min-w-[70px]", isSticky && "sticky top-0 h-fit bg-white z-20 pb-2"), children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase font-bold text-grey-400 px-2 mb-2 text-center tracking-wider", children: title }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex-1 p-1 space-y-1 relative",
+        children: items.map((item) => {
+          const isSelected = currentVal === item;
+          const disabled = isSlotDisabled(type, item);
+          const button = /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-value": item,
+              "data-type": type,
+              type: "button",
+              disabled,
+              onClick: () => !disabled && handlePartChange(type, item),
+              className: cn(
+                "w-full py-2 text-sm rounded-lg transition-all duration-200",
+                isSelected ? "bg-primaryx-500 text-white font-bold shadow-md" : disabled ? "text-grey-300 cursor-not-allowed opacity-40" : "text-grey-600 hover:bg-grey-100"
+              ),
+              children: item
+            },
+            item
+          );
+          if (disabled) {
+            return /* @__PURE__ */ jsx(Tooltip, { content: type === "hour" ? "Hour is outside allowed range" : "Time slot unavailable", placement: "right", children: button }, item);
+          }
+          return button;
+        })
+      }
+    )
+  ] });
+  const getFinalTime24 = () => {
+    let h = parseInt(parts.hour);
+    if (parts.period === "PM" && h !== 12) h += 12;
+    if (parts.period === "AM" && h === 12) h = 0;
+    return `${String(h).padStart(2, "0")}:${parts.minute}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("bg-white rounded-2xl shadow-2xl border border-grey-200 w-[260px] flex flex-col overflow-hidden z-50", className), children: [
+    /* @__PURE__ */ jsxs("div", { ref: parentScrollRef, className: "flex p-2 pr-3 border-b border-grey-100 max-h-[280px] overflow-y-auto overflow-x-hidden bg-white relative", children: [
+      renderColumn("Hour", hours, parts.hour, "hour", false),
+      /* @__PURE__ */ jsx("div", { className: "w-px bg-grey-100 my-4 shrink-0 mx-1" }),
+      renderColumn("Min", minutes, parts.minute, "minute", true),
+      /* @__PURE__ */ jsx("div", { className: "w-px bg-grey-100 my-4 shrink-0 mx-1" }),
+      renderColumn("Period", periods, parts.period, "period", true)
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-grey-50 p-3 flex items-center justify-between border-t border-grey-100", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-grey-400 font-bold uppercase tracking-tight", children: "Selection" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm font-extrabold text-primaryx-600", children: [
+          parts.hour,
+          ":",
+          parts.minute,
+          " ",
+          parts.period
+        ] })
+      ] }),
+      renderExtra && /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-grey-500 bg-white px-2.5 py-1.5 rounded-full border border-grey-200 shadow-sm animate-in fade-in zoom-in duration-300", children: renderExtra(getFinalTime24()) })
+    ] })
+  ] });
+};
+const TimeSelector$1 = memo(TimeSelector);
+export {
+  TimeSelector$1 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ui/TimeSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ui/TimeSelector/index.tsx"],"sourcesContent":["import { useEffect, useRef, memo, ReactNode } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport Tooltip from \"@/components/ui/Tooltip\";\r\n\r\ninterface TimeSelectorProps {\r\n    value?: string;\r\n    onChange: (time: string) => void;\r\n    minTime?: string;\r\n    maxTime?: string;\r\n    className?: string;\r\n    renderExtra?: (time: string) => React.ReactNode;\r\n    step?: number;\r\n}\r\n\r\nconst formatTo12HourParts = (time: string) => {\r\n    if (!time || typeof time !== 'string' || time === 'Invalid Date' || time.includes('undefined')) {\r\n        return { hour: '12', minute: '00', period: 'AM' };\r\n    }\r\n    const parts = time.split(':');\r\n    const h = Number(parts[0]);\r\n    const m = parts.length > 1 ? Number(parts[1]) : 0;\r\n\r\n    const period = h >= 12 ? 'PM' : 'AM';\r\n    const hour12 = h % 12 || 12;\r\n    return {\r\n        hour: String(hour12),\r\n        minute: String(m || 0).padStart(2, '0'),\r\n        period\r\n    };\r\n};\r\n\r\nconst TimeSelector = ({\r\n    value,\r\n    onChange,\r\n    minTime,\r\n    maxTime,\r\n    className,\r\n    renderExtra,\r\n    step = 30\r\n}: TimeSelectorProps) => {\r\n    const parts = formatTo12HourParts(value || '12:00');\r\n\r\n    const hours = Array.from({ length: 12 }, (_, i) => String(i + 1));\r\n    const minutes = Array.from({ length: 60 / step }, (_, i) => String(i * step).padStart(2, '0'));\r\n    const periods = ['AM', 'PM'];\r\n\r\n    const parentScrollRef = useRef<HTMLDivElement>(null);\r\n\r\n    // Auto-scroll on mount and value change (only for the parent container based on Hour)\r\n    useEffect(() => {\r\n        const scrollToSelected = () => {\r\n            const container = parentScrollRef.current;\r\n            if (!container) return;\r\n            // Find the selected hour button\r\n            const selectedElement = container.querySelector(`[data-type=\"hour\"][data-value=\"${parts.hour}\"]`) as HTMLElement;\r\n            if (selectedElement) {\r\n                // Scroll the parent container to center the selected hour\r\n                const centerOffset = selectedElement.offsetTop - (container.clientHeight / 2) + (selectedElement.clientHeight / 2);\r\n                container.scrollTop = centerOffset;\r\n            }\r\n        };\r\n\r\n        const timer = setTimeout(scrollToSelected, 100);\r\n        return () => clearTimeout(timer);\r\n    }, [value, parts.hour]);\r\n\r\n\r\n    const handlePartChange = (type: 'hour' | 'minute' | 'period', newValue: string) => {\r\n        let { hour, minute, period } = parts;\r\n\r\n        if (type === 'hour') hour = newValue;\r\n        if (type === 'minute') minute = newValue;\r\n        if (type === 'period') period = newValue;\r\n\r\n        let h = parseInt(hour);\r\n        if (period === 'PM' && h !== 12) h += 12;\r\n        if (period === 'AM' && h === 12) h = 0;\r\n\r\n        const time24 = `${String(h).padStart(2, '0')}:${minute}`;\r\n        onChange(time24);\r\n    };\r\n\r\n    const isSlotDisabled = (type: 'hour' | 'minute' | 'period', val: string) => {\r\n        if (!minTime && !maxTime) return false;\r\n\r\n        let { hour, minute, period } = parts;\r\n        if (type === 'hour') hour = val;\r\n        if (type === 'minute') minute = val;\r\n        if (type === 'period') period = val;\r\n\r\n        let h = parseInt(hour);\r\n        if (period === 'PM' && h !== 12) h += 12;\r\n        if (period === 'AM' && h === 12) h = 0;\r\n\r\n        const time24 = `${String(h).padStart(2, '0')}:${minute}`;\r\n\r\n        if (minTime && time24 < minTime) return true;\r\n        if (maxTime && time24 > maxTime) return true;\r\n        return false;\r\n    };\r\n\r\n    const renderColumn = (title: string, items: string[], currentVal: string, type: 'hour' | 'minute' | 'period', isSticky: boolean = false) => (\r\n        <div className={cn(\"flex flex-col flex-1 min-w-[70px]\", isSticky && \"sticky top-0 h-fit bg-white z-20 pb-2\")}>\r\n            <div className=\"text-[10px] uppercase font-bold text-grey-400 px-2 mb-2 text-center tracking-wider\">{title}</div>\r\n            <div\r\n                className=\"flex-1 p-1 space-y-1 relative\"\r\n            >\r\n                {items.map((item: string) => {\r\n                    const isSelected = currentVal === item;\r\n                    const disabled = isSlotDisabled(type, item);\r\n\r\n                    const button = (\r\n                        <button\r\n                            key={item}\r\n                            data-value={item}\r\n                            data-type={type}\r\n                            type=\"button\"\r\n                            disabled={disabled}\r\n                            onClick={() => !disabled && handlePartChange(type, item)}\r\n                            className={cn(\r\n                                \"w-full py-2 text-sm rounded-lg transition-all duration-200\",\r\n                                isSelected\r\n                                    ? \"bg-primaryx-500 text-white font-bold shadow-md\"\r\n                                    : disabled\r\n                                        ? \"text-grey-300 cursor-not-allowed opacity-40\"\r\n                                        : \"text-grey-600 hover:bg-grey-100\"\r\n                            )}\r\n                        >\r\n                            {item}\r\n                        </button>\r\n                    );\r\n\r\n                    if (disabled) {\r\n                        return (\r\n                            <Tooltip key={item} content={type === 'hour' ? \"Hour is outside allowed range\" : \"Time slot unavailable\"} placement=\"right\" >\r\n                                {button}\r\n                            </Tooltip>\r\n                        );\r\n                    }\r\n\r\n                    return button;\r\n                })}\r\n            </div>\r\n        </div>\r\n    );\r\n\r\n    const getFinalTime24 = () => {\r\n        let h = parseInt(parts.hour);\r\n        if (parts.period === 'PM' && h !== 12) h += 12;\r\n        if (parts.period === 'AM' && h === 12) h = 0;\r\n        return `${String(h).padStart(2, '0')}:${parts.minute}`;\r\n    };\r\n\r\n    return (\r\n        <div className={cn(\"bg-white rounded-2xl shadow-2xl border border-grey-200 w-[260px] flex flex-col overflow-hidden z-50\", className)}>\r\n            <div ref={parentScrollRef} className=\"flex p-2 pr-3 border-b border-grey-100 max-h-[280px] overflow-y-auto overflow-x-hidden bg-white relative\">\r\n                {renderColumn(\"Hour\", hours, parts.hour, \"hour\", false)}\r\n                <div className=\"w-px bg-grey-100 my-4 shrink-0 mx-1\" />\r\n                {renderColumn(\"Min\", minutes, parts.minute, \"minute\", true)}\r\n                <div className=\"w-px bg-grey-100 my-4 shrink-0 mx-1\" />\r\n                {renderColumn(\"Period\", periods, parts.period, \"period\", true)}\r\n            </div>\r\n\r\n            {/* Summary Area */}\r\n            <div className=\"bg-grey-50 p-3 flex items-center justify-between border-t border-grey-100\">\r\n                <div className=\"flex flex-col\">\r\n                    <span className=\"text-[10px] text-grey-400 font-bold uppercase tracking-tight\">Selection</span>\r\n                    <span className=\"text-sm font-extrabold text-primaryx-600\">\r\n                        {parts.hour}:{parts.minute} {parts.period}\r\n                    </span>\r\n                </div>\r\n                {renderExtra && (\r\n                    <div className=\"text-[11px] font-bold text-grey-500 bg-white px-2.5 py-1.5 rounded-full border border-grey-200 shadow-sm animate-in fade-in zoom-in duration-300\">\r\n                        {renderExtra(getFinalTime24())}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default memo(TimeSelector);\r\n"],"names":[],"mappings":"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"}

package/dist/components/ui/Tooltip/index.d.ts

@@ -0,0 +1,12 @@
+import { default as React, ReactNode } from 'react';
+
+interface TooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    className?: string;
+    triggerClassName?: string;
+    disabled?: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ children, content, placement, className, triggerClassName, disabled, }: TooltipProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/ui/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import { default as React, ReactNode } from 'react';
+
+interface TooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    className?: string;
+    triggerClassName?: string;
+    disabled?: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ children, content, placement, className, triggerClassName, disabled, }: TooltipProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/ui/Tooltip.js

@@ -0,0 +1,136 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import { cn } from "../../lib/utils.js";
+const Tooltip = ({
+  children,
+  content,
+  placement = "top",
+  className,
+  triggerClassName,
+  disabled = true
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [coords, setCoords] = useState({
+    top: 0,
+    left: 0
+  });
+  const [actualPlacement, setActualPlacement] = useState(placement);
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const updatePosition = () => {
+    var _a;
+    if (!triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = ((_a = tooltipRef.current) == null ? void 0 : _a.getBoundingClientRect()) || {
+      width: 0,
+      height: 0
+    };
+    let top = 0;
+    let left = 0;
+    const gap = 8;
+    let targetPlacement = placement;
+    if (window.innerWidth < 768 && (placement === "left" || placement === "right")) {
+      if (triggerRect.top > tooltipRect.height + gap + 10) {
+        targetPlacement = "top";
+      } else {
+        targetPlacement = "bottom";
+      }
+    }
+    switch (targetPlacement) {
+      case "top":
+        top = triggerRect.top - tooltipRect.height - gap;
+        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        left = triggerRect.left - tooltipRect.width - gap;
+        break;
+      case "right":
+        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+        left = triggerRect.right + gap;
+        break;
+    }
+    setCoords({ top, left });
+    setActualPlacement(targetPlacement);
+  };
+  useEffect(() => {
+    if (isVisible) {
+      updatePosition();
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+    }
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isVisible]);
+  useEffect(() => {
+    if (isVisible) {
+      const timer = setTimeout(updatePosition, 0);
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, content, placement]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: cn("inline-block", triggerClassName),
+        onMouseEnter: () => setIsVisible(true),
+        onMouseLeave: () => setIsVisible(false),
+        children
+      }
+    ),
+    disabled && createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && content && /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          ref: tooltipRef,
+          initial: { opacity: 0, scale: 0.95 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.95 },
+          transition: { duration: 0.1 },
+          style: {
+            position: "fixed",
+            top: coords.top,
+            left: coords.left,
+            zIndex: 1e5
+            // Ensure it's on top of everything (even popovers)
+          },
+          className: cn(
+            "bg-[#1A1F2C] text-white text-center text-xs px-3 py-2 rounded-lg shadow-lg max-w-xs pointer-events-none",
+            // "pointer-events-none", // Optional: prevent tooltip from blocking clicks if it overlaps
+            className
+          ),
+          children: [
+            content,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute w-0 h-0 border-4 border-transparent",
+                  actualPlacement === "top" && "top-full left-1/2 -translate-x-1/2 border-t-[#1A1F2C]",
+                  actualPlacement === "bottom" && "bottom-full left-1/2 -translate-x-1/2 border-b-[#1A1F2C]",
+                  actualPlacement === "left" && "left-full top-1/2 -translate-y-1/2 border-l-[#1A1F2C]",
+                  actualPlacement === "right" && "right-full top-1/2 -translate-y-1/2 border-r-[#1A1F2C]"
+                )
+              }
+            )
+          ]
+        }
+      ) }),
+      document.body
+    )
+  ] });
+};
+const Tooltip$1 = memo(Tooltip);
+export {
+  Tooltip$1 as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/ui/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/ui/Tooltip.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, ReactNode, memo } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\nimport { AnimatePresence, motion } from \"framer-motion\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface TooltipProps {\r\n  children: ReactNode;\r\n  content: ReactNode;\r\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  className?: string; // For the tooltip content container\r\n  triggerClassName?: string; // For the trigger wrapper\r\n  disabled?: boolean;\r\n}\r\n\r\nconst Tooltip = ({\r\n  children,\r\n  content,\r\n  placement = \"top\",\r\n  className,\r\n  triggerClassName,\r\n  disabled = true,\r\n}: TooltipProps) => {\r\n  const [isVisible, setIsVisible] = useState(false);\r\n  const [coords, setCoords] = useState<{ top: number; left: number }>({\r\n    top: 0,\r\n    left: 0,\r\n  });\r\n  const [actualPlacement, setActualPlacement] = useState(placement);\r\n  const triggerRef = useRef<HTMLDivElement>(null);\r\n  const tooltipRef = useRef<HTMLDivElement>(null);\r\n\r\n  const updatePosition = () => {\r\n    if (!triggerRef.current) return;\r\n\r\n    const triggerRect = triggerRef.current.getBoundingClientRect();\r\n    const tooltipRect = tooltipRef.current?.getBoundingClientRect() || {\r\n      width: 0,\r\n      height: 0,\r\n    };\r\n\r\n    let top = 0;\r\n    let left = 0;\r\n    const gap = 8; // Distance between trigger and tooltip\r\n    let targetPlacement = placement;\r\n\r\n    // Responsive check\r\n    if (window.innerWidth < 768 && (placement === \"left\" || placement === \"right\")) {\r\n      // Check space above\r\n      if (triggerRect.top > tooltipRect.height + gap + 10) {\r\n        targetPlacement = \"top\";\r\n      } else {\r\n        targetPlacement = \"bottom\";\r\n      }\r\n    }\r\n\r\n    switch (targetPlacement) {\r\n      case \"top\":\r\n        top = triggerRect.top - tooltipRect.height - gap;\r\n        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\r\n        break;\r\n      case \"bottom\":\r\n        top = triggerRect.bottom + gap;\r\n        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\r\n        break;\r\n      case \"left\":\r\n        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\r\n        left = triggerRect.left - tooltipRect.width - gap;\r\n        break;\r\n      case \"right\":\r\n        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\r\n        left = triggerRect.right + gap;\r\n        break;\r\n    }\r\n\r\n    setCoords({ top, left });\r\n    setActualPlacement(targetPlacement);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (isVisible) {\r\n      updatePosition();\r\n      // Update position on scroll/resize\r\n      window.addEventListener(\"scroll\", updatePosition, true);\r\n      window.addEventListener(\"resize\", updatePosition);\r\n    }\r\n    return () => {\r\n      window.removeEventListener(\"scroll\", updatePosition, true);\r\n      window.removeEventListener(\"resize\", updatePosition);\r\n    };\r\n  }, [isVisible]);\r\n\r\n  // Recalculate when content or placement changes\r\n  useEffect(() => {\r\n    if (isVisible) {\r\n      // Small timeout to allow render\r\n      const timer = setTimeout(updatePosition, 0);\r\n      return () => clearTimeout(timer);\r\n    }\r\n  }, [isVisible, content, placement]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        ref={triggerRef}\r\n        className={cn(\"inline-block\", triggerClassName)}\r\n        onMouseEnter={() => setIsVisible(true)}\r\n        onMouseLeave={() => setIsVisible(false)}\r\n      >\r\n        {children}\r\n      </div>\r\n      {disabled && createPortal(\r\n        <AnimatePresence>\r\n          {isVisible && content && (\r\n            <motion.div\r\n              ref={tooltipRef}\r\n              initial={{ opacity: 0, scale: 0.95 }}\r\n              animate={{ opacity: 1, scale: 1 }}\r\n              exit={{ opacity: 0, scale: 0.95 }}\r\n              transition={{ duration: 0.1 }}\r\n              style={{\r\n                position: \"fixed\",\r\n                top: coords.top,\r\n                left: coords.left,\r\n                zIndex: 100000, // Ensure it's on top of everything (even popovers)\r\n              }}\r\n              className={cn(\r\n                \"bg-[#1A1F2C] text-white text-center text-xs px-3 py-2 rounded-lg shadow-lg max-w-xs pointer-events-none\",\r\n                // \"pointer-events-none\", // Optional: prevent tooltip from blocking clicks if it overlaps\r\n                className\r\n              )}\r\n            >\r\n              {content}\r\n              {/* Arrow */}\r\n              <div\r\n                className={cn(\r\n                  \"absolute w-0 h-0 border-4 border-transparent\",\r\n                  actualPlacement === \"top\" &&\r\n                  \"top-full left-1/2 -translate-x-1/2 border-t-[#1A1F2C]\",\r\n                  actualPlacement === \"bottom\" &&\r\n                  \"bottom-full left-1/2 -translate-x-1/2 border-b-[#1A1F2C]\",\r\n                  actualPlacement === \"left\" &&\r\n                  \"left-full top-1/2 -translate-y-1/2 border-l-[#1A1F2C]\",\r\n                  actualPlacement === \"right\" &&\r\n                  \"right-full top-1/2 -translate-y-1/2 border-r-[#1A1F2C]\"\r\n                )}\r\n              />\r\n            </motion.div>\r\n          )}\r\n        </AnimatePresence>,\r\n        document.body\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default memo(Tooltip);\r\n"],"names":[],"mappings":"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"}

package/dist/hooks/useDropdownPosition.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+
+type Position = 'top' | 'bottom';
+interface UseDropdownPositionOptions {
+    triggerRef: RefObject<HTMLElement | null>;
+    isOpen: boolean;
+    dropdownHeight?: number;
+    offset?: number;
+}
+export declare const useDropdownPosition: ({ triggerRef, isOpen, dropdownHeight, offset }: UseDropdownPositionOptions) => Position;
+export {};

package/dist/hooks/useFirebaseAuthState.d.ts

@@ -0,0 +1,6 @@
+import { User } from 'firebase/auth';
+
+export default function useFirebaseAuthState(): {
+    user: User;
+    isLoading: boolean;
+};

package/dist/hooks/useFirebaseAuthState.js

@@ -0,0 +1,23 @@
+import { auth } from "../services/initialize-firebase.js";
+import { onAuthStateChanged } from "firebase/auth";
+import { useState, useEffect } from "react";
+function useFirebaseAuthState() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [user, setUser] = useState(null);
+  useEffect(() => {
+    const unsub = onAuthStateChanged(auth, (authState) => {
+      if (authState) {
+        setUser(authState);
+      } else {
+        setUser(null);
+      }
+      setIsLoading(false);
+    });
+    return () => unsub();
+  }, []);
+  return { user, isLoading };
+}
+export {
+  useFirebaseAuthState as default
+};
+//# sourceMappingURL=useFirebaseAuthState.js.map