@crestbase/web-shared-ui 1.0.0 → 1.0.2

package/dist/components/core/CalendarExtended.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef } from "react";
+import Calendar from "./Calendar";
+const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+export default function CalendarExtended({ selectionGranularity = "day", allowRange = false, startYear, endYear, selectedMonths = [], onMonthSelectionChange, onMonthRangeChange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight = 560, enableYearTransition: _enableYearTransition = true, selectedDates = [], onDateSelect, bookedDates, maxSelections, }) {
+    // Derive year bounds
+    const currentYear = new Date().getFullYear();
+    const DEFAULT_START_YEAR = 1900;
+    const DEFAULT_END_YEAR = disableFutureMonths ? currentYear : currentYear + 50;
+    const fromYear = startYear ?? minSelectableMonth?.year ?? DEFAULT_START_YEAR;
+    const toYear = endYear ?? maxSelectableMonth?.year ?? DEFAULT_END_YEAR;
+    // Internal range state if consumer enables range
+    const [rangeStart, setRangeStart] = useState(null);
+    const [rangeEnd, setRangeEnd] = useState(null);
+    // Accessibility: grid id for aria-controls
+    const gridIdRef = useRef(`calendar-extended-grid-${Math.random().toString(36).slice(2)}`);
+    const allMonths = useMemo(() => {
+        const list = [];
+        for (let y = fromYear; y <= toYear; y++) {
+            for (let m = 0; m < 12; m++) {
+                list.push({ year: y, month: m });
+            }
+        }
+        return list;
+    }, [fromYear, toYear]);
+    const yearsList = useMemo(() => {
+        return Array.from({ length: toYear - fromYear + 1 }, (_, i) => fromYear + i);
+    }, [fromYear, toYear]);
+    const isSelected = (y, m) => selectedMonths.some((sel) => sel.year === y && sel.month === m);
+    const isInRange = (y, m) => {
+        if (!rangeStart || !rangeEnd)
+            return false;
+        const startKey = rangeStart.year * 12 + rangeStart.month;
+        const endKey = rangeEnd.year * 12 + rangeEnd.month;
+        const currentKey = y * 12 + m;
+        const [minKey, maxKey] = startKey <= endKey ? [startKey, endKey] : [endKey, startKey];
+        return currentKey >= minKey && currentKey <= maxKey;
+    };
+    const isMonthDisabled = (y, m) => {
+        const key = y * 12 + m;
+        const minKey = minSelectableMonth
+            ? minSelectableMonth.year * 12 + minSelectableMonth.month
+            : null;
+        const maxKey = maxSelectableMonth
+            ? maxSelectableMonth.year * 12 + maxSelectableMonth.month
+            : null;
+        const today = new Date();
+        const currentKey = today.getFullYear() * 12 + today.getMonth();
+        const futureDisabled = disableFutureMonths ? key > currentKey : false;
+        return ((minKey !== null && key < minKey) ||
+            (maxKey !== null && key > maxKey) ||
+            futureDisabled);
+    };
+    const handleMonthClick = (y, m) => {
+        const clicked = { year: y, month: m };
+        // Respect disabled constraints
+        if (isMonthDisabled(y, m)) {
+            return;
+        }
+        if (allowRange) {
+            if (!rangeStart) {
+                setRangeStart(clicked);
+                setRangeEnd(null);
+                onMonthRangeChange?.({ start: clicked, end: clicked });
+                return;
+            }
+            // If start exists but end not set, set end
+            if (!rangeEnd) {
+                setRangeEnd(clicked);
+                onMonthRangeChange?.({ start: rangeStart, end: clicked });
+                return;
+            }
+            // Reset range on third click
+            setRangeStart(clicked);
+            setRangeEnd(null);
+            onMonthRangeChange?.({ start: clicked, end: clicked });
+            return;
+        }
+        // Single-month selection mode
+        const exists = isSelected(y, m);
+        let next = selectedMonths;
+        if (exists) {
+            next = selectedMonths.filter((sel) => !(sel.year === y && sel.month === m));
+        }
+        else {
+            next = [...selectedMonths, clicked];
+        }
+        onMonthSelectionChange?.(next);
+    };
+    // Show all years within computed bounds, even if all months are disabled
+    const visibleYears = yearsList;
+    const renderYearCard = (y) => {
+        const yearLabelId = `year-label-${y}-${gridIdRef.current}`;
+        return (_jsxs("div", { className: "p-4 transition-all duration-300 ease-out", "aria-labelledby": yearLabelId, children: [_jsx("div", { id: yearLabelId, className: "text-xs font-semibold mb-3", children: y }), _jsx("div", { role: "grid", "aria-label": `Months of ${y}`, className: "grid grid-cols-3 sm:grid-cols-4 gap-2", children: monthNames.map((name, m) => {
+                        const selected = isSelected(y, m);
+                        const inRange = isInRange(y, m);
+                        const disabled = isMonthDisabled(y, m);
+                        const isStart = !!rangeStart && rangeStart.year === y && rangeStart.month === m;
+                        const isEnd = !!rangeEnd && rangeEnd.year === y && rangeEnd.month === m;
+                        const isCurrent = (() => {
+                            const d = new Date();
+                            return d.getFullYear() === y && d.getMonth() === m;
+                        })();
+                        const isSinglePreRange = allowRange && !!rangeStart && !rangeEnd && isStart;
+                        const baseClasses = "text-[10px] p-2 cursor-pointer rounded-lg transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primaryblue/60";
+                        const stateClasses = disabled
+                            ? "opacity-50 cursor-not-allowed bg-gray-50 text-gray-400"
+                            : isStart && isEnd
+                                ? "bg-primaryblue/20 border-primaryblue text-white"
+                                : isStart
+                                    ? "bg-primaryblue/20 text-primaryblue ring-2 ring-primaryblue"
+                                    : isEnd
+                                        ? "bg-primaryblue/20 text-primaryblue ring-2 ring-primaryblue/70"
+                                        : inRange
+                                            ? "bg-primaryblue/10 text-primaryblue"
+                                            : isSinglePreRange || selected
+                                                ? "bg-primaryblue/5 text-primaryblue"
+                                                : "bg-gray-100 hover:bg-gray-50";
+                        const ariaSelected = selected || inRange || isStart || isEnd || isSinglePreRange;
+                        return (_jsx("button", { type: "button", role: "gridcell", "aria-pressed": ariaSelected, "aria-disabled": disabled, "aria-selected": ariaSelected, "aria-current": isCurrent ? "date" : undefined, disabled: disabled, tabIndex: disabled ? -1 : 0, onClick: () => handleMonthClick(y, m), className: `${baseClasses} ${stateClasses}`, "aria-label": `${name} ${y}`, children: name }, `${y}-${m}`));
+                    }) })] }, y));
+    };
+    if (selectionGranularity === "month") {
+        const containerStyle = {
+            maxHeight: containerHeight,
+            overflowY: "auto",
+        };
+        // Scroll mode only: show all years in a single-column, scrollable grid
+        return (_jsx("div", { id: gridIdRef.current, className: `grid grid-cols-1 md:grid-cols-1 xl:grid-cols-1`, style: containerStyle, role: "grid", "aria-label": "Years grid", children: visibleYears.map((y) => renderYearCard(y)) }));
+    }
+    // Default: day selection using existing Calendar (backward-compatible)
+    return (_jsx(Calendar, { selectedDates: selectedDates, onDateSelect: onDateSelect ?? (() => { }), bookedDates: bookedDates, maxSelections: maxSelections }));
+}

package/dist/components/core/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface CheckboxProps {
+    checked: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+}
+declare const _default: (props: CheckboxProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/Checkbox.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Checkbox = ({ checked, onChange, label, name, required = false, disabled = false, error, className = "", }) => {
+    return (_jsxs("div", { className: `w-full text-sm ${className}`, children: [label && (_jsx("label", { htmlFor: name, className: "block mb-2 text-xs text-gray-500", children: label })), _jsx("div", { className: "relative", children: _jsxs("div", { className: "w-full p-0 px-3 h-13.5 sm:h-auto sm:p-3 border border-gray-200 rounded-xl bg-gray-50 focus-within:border-gray-300 focus-within:bg-white flex items-center justify-between", children: [_jsx("span", { className: "text-base sm:text-xs text-gray-400", children: checked ? "Yes" : "No" }), _jsxs("label", { className: "relative cursor-pointer", children: [_jsx("input", { id: name, name: name, type: "checkbox", required: required, disabled: disabled, checked: checked, onChange: onChange, className: "sr-only", autoComplete: "off" }), _jsx("div", { className: [
+                                        "w-6 h-6 rounded-lg border flex items-center justify-center transition-colors",
+                                        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+                                        checked ? "bg-black border-black" : "bg-white border-gray-300",
+                                    ].join(" "), children: checked && (_jsx("svg", { className: "w-3.5 h-3.5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 6L9 17l-5-5" }) })) })] })] }) }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error })] }));
+};
+export default Checkbox;

package/dist/components/core/CustomDropdown.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface DropdownOption {
+    value: string;
+    label?: string;
+}
+export interface CustomDropdownProps {
+    label?: string;
+    placeholder?: string;
+    options: DropdownOption[];
+    value?: string;
+    onChange: (value: string) => void;
+    error?: string;
+    className?: string;
+    labelClass?: string;
+    minimal?: boolean;
+    disabled?: boolean;
+}
+declare const _default: (props: CustomDropdownProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/CustomDropdown.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDownIcon, X } from "lucide-react";
+const CustomDropdown = ({ label, placeholder = "Select an option", options, value, onChange, error, className = "", labelClass = "", minimal, disabled = false, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const selectedOption = options.find((option) => option.value === value);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    const handleOptionClick = (optionValue) => {
+        if (disabled)
+            return;
+        onChange(optionValue);
+        setIsOpen(false);
+    };
+    const handleClear = (e) => {
+        if (disabled)
+            return;
+        e.stopPropagation();
+        onChange("");
+        setIsOpen(false);
+    };
+    return (_jsxs("div", { className: `w-full ${minimal ? "text-[11px]" : "text-base sm:text-xs"} ${className}`, ref: dropdownRef, children: [label && (_jsx("label", { className: `${labelClass} block mb-2 text-[10px] text-gray-500`, children: label })), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `${minimal
+                            ? "flex gap-1 items-center"
+                            : "w-full p-0 px-4 sm:p-4 rounded-xl bg-gray-50 border outline-none text-left flex items-center justify-between h-13.5 sm:h-auto"} ${error ? "border-red-500" : "border-gray-200"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`, children: [_jsx("span", { className: `${selectedOption ? "text-gray-900" : "text-gray-400"}`, children: selectedOption ? selectedOption.label : placeholder }), !disabled && (_jsx(ChevronDownIcon, { className: `w-4 h-4 text-gray-800 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }))] }), isOpen && !disabled && (_jsx("div", { className: "absolute z-50 min-w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-y-auto", children: options.map((option) => (_jsxs("div", { className: `flex items-center justify-between hover:bg-gray-50 transition-colors ${value === option.value
+                                ? "bg-blue-50 text-blue-600"
+                                : "text-gray-900"} first:rounded-t-xl last:rounded-b-xl`, children: [_jsx("button", { type: "button", onClick: () => handleOptionClick(option.value), className: "flex-1 text-left text-nowrap px-4 py-3", children: option.label }), value === option.value && (_jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 hover:bg-gray-100 rounded-full transition-colors ml-2", children: _jsx(X, { className: "w-3 h-3 text-gray-400 hover:text-gray-600" }) }))] }, option.value))) }))] }), error && _jsx("p", { className: "mt-1 text-red-500", children: error })] }));
+};
+CustomDropdown.displayName = "CustomDropdown";
+export default CustomDropdown;

package/dist/components/core/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    allowBackdropClose?: boolean;
+    blurClass?: string;
+    containerClassName?: string;
+    className?: string;
+}
+declare const _default: (props: ModalProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/Modal.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Modal = ({ isOpen, onClose, children, allowBackdropClose = true, blurClass = "backdrop-blur-xs", containerClassName = "z-50 mx-auto w-full flex justify-center items-start text-black", className = "py-12", }) => {
+    if (!isOpen)
+        return null;
+    return (_jsxs("div", { className: `fixed inset-0 z-[80] flex items-start justify-center ${className}`, children: [_jsx("button", { className: `absolute inset-0 bg-black/70 ${blurClass}`, onClick: allowBackdropClose ? onClose : undefined }), _jsx("div", { role: "dialog", className: containerClassName, onClick: (e) => {
+                    if (e.target === e.currentTarget && allowBackdropClose) {
+                        onClose();
+                    }
+                }, children: children })] }));
+};
+export default Modal;

package/dist/components/core/NumberInput.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "type"> {
+    label?: string;
+    error?: string;
+    className?: string;
+    onIncrement?: () => void;
+    onDecrement?: () => void;
+}
+declare const _default: (props: NumberInputProps & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/core/NumberInput.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+const NumberInput = forwardRef(({ label, name, placeholder, required = false, error, disabled = false, autoFocus = false, className = "", value, onChange, onIncrement, onDecrement, ...props }, ref) => {
+    const handleIncrement = () => {
+        if (onIncrement) {
+            onIncrement();
+        }
+        else if (onChange) {
+            const currentValue = Number(value) || 0;
+            const event = {
+                target: { value: String(currentValue + 1) },
+            };
+            onChange(event);
+        }
+    };
+    const handleDecrement = () => {
+        if (onDecrement) {
+            onDecrement();
+        }
+        else if (onChange) {
+            const currentValue = Number(value) || 0;
+            const newValue = Math.max(0, currentValue - 1);
+            const event = {
+                target: { value: String(newValue) },
+            };
+            onChange(event);
+        }
+    };
+    return (_jsxs("div", { className: `w-full text-sm ${className}`, children: [label && (_jsx("label", { htmlFor: name, className: "block mb-2 text-xs text-gray-500", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", { ref: ref, id: name, name: name, type: "number", placeholder: placeholder, required: required, disabled: disabled, autoFocus: autoFocus, value: value, onChange: onChange, autoComplete: "off", className: `w-full text-base sm:text-xs h-13.5 sm:h-auto p-0 px-4 sm:p-4 border border-gray-200 rounded-xl bg-gray-50 focus:border-gray-300 focus:bg-white outline-none pr-12 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${error ? "border-red-500" : "border-gray-200"} text-black`, ...props }), _jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex flex-col", children: [_jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled, className: "text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed p-0.5", children: _jsx(ChevronUpIcon, { className: "w-3 h-3" }) }), _jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled, className: "text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed p-0.5", children: _jsx(ChevronDownIcon, { className: "w-3 h-3" }) })] })] }), error && _jsx("p", { className: "mt-1 text-xs text-red-500", children: error })] }));
+});
+NumberInput.displayName = "NumberInput";
+export default NumberInput;

package/dist/components/core/NumberInputWithCommas.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { InputProps } from "./input";
+export interface NumberInputWithCommasProps extends Omit<InputProps, "type" | "onChange"> {
+    onChange: (value: string) => void;
+    value?: string;
+}
+declare const _default: (props: NumberInputWithCommasProps & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/core/NumberInputWithCommas.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { formatNumberWithCommas, getCleanNumber } from "../../utils";
+const NumberInputWithCommas = forwardRef(({ label, name, placeholder, required = false, error, disabled = false, autoFocus = false, className = "", hideLabel = false, value = "", onChange, ...props }, ref) => {
+    const [displayValue, setDisplayValue] = useState(formatNumberWithCommas(value));
+    const handleInputChange = (e) => {
+        const inputValue = e.target.value;
+        const formatted = formatNumberWithCommas(inputValue);
+        setDisplayValue(formatted);
+        onChange(getCleanNumber(formatted));
+    };
+    useEffect(() => {
+        setDisplayValue(formatNumberWithCommas(value));
+    }, [value]);
+    return (_jsxs("div", { className: `w-full text-sm ${className}`, children: [label && !hideLabel && (_jsx("label", { htmlFor: name, className: "block mb-2 text-xs text-gray-500", children: label })), _jsx("div", { className: "relative", children: _jsxs("div", { className: "relative flex items-center", children: [_jsx("span", { className: "absolute left-5 mt-0.5/2 sm:left-4 top-1/2 transform -translate-y-1/2 text-xs text-gray-600 pointer-events-none", children: "\u20A6" }), _jsx("input", { ref: ref, id: name, name: name, type: "text", inputMode: "numeric", placeholder: placeholder, required: required, disabled: disabled, autoFocus: autoFocus, value: displayValue, onChange: handleInputChange, autoComplete: "off", className: `w-full text-base sm:text-xs h-13.5 sm:-h-auto p-0 px-4 sm:p-4 pl-8 sm:pl-7 border border-gray-200 rounded-xl bg-gray-50 focus:border-gray-300 focus:bg-white outline-none placeholder-gray-400 ${error ? "border-red-500" : "border-gray-200"} text-black`, ...props })] }) }), error && _jsx("p", { className: "mt-1 text-xs text-red-500", children: error })] }));
+});
+NumberInputWithCommas.displayName = "NumberInputWithCommas";
+export default NumberInputWithCommas;

package/dist/components/core/OptionsDropdown.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+export interface OptionItem {
+    id: string;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export interface OptionsDropdownProps {
+    options: OptionItem[];
+    trigger?: ReactNode;
+    listClassName?: string;
+    optionClassName?: string;
+    containerClassName?: string;
+    disabled?: boolean;
+}
+declare const _default: (props: OptionsDropdownProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/OptionsDropdown.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreVertical } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+const OptionsDropdown = ({ options, trigger, listClassName = "", optionClassName = "", containerClassName = "", disabled = false, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleToggle = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleOptionClick = (option) => {
+        if (!option.disabled) {
+            option.onClick();
+            setIsOpen(false);
+        }
+    };
+    const defaultTrigger = (_jsx("button", { className: "p-2 hover:bg-gray-100 rounded-full transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer", onClick: handleToggle, disabled: disabled, type: "button", children: _jsx(MoreVertical, { className: "size-5" }) }));
+    return (_jsxs("div", { className: `relative inline-flex items-center ${containerClassName}`, ref: dropdownRef, children: [_jsx("div", { onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleToggle();
+                }, className: "cursor-pointer", children: trigger || defaultTrigger }), isOpen && (_jsx("div", { className: `${listClassName} absolute right-0 top-full mt-2 bg-white border border-gray-100 rounded-xl divide-y divide-gray-100 shadow-lg z-50 min-w-48 overflow-hidden`, children: options.map((option) => (_jsx("button", { onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleOptionClick(option);
+                    }, disabled: option.disabled, className: `w-full text-left px-3 py-2.5 cursor-pointer text-xs text-gray-500 hover:text-black hover:bg-gray-100 transition-colors duration-200 ${optionClassName}`, children: option.label }, option.id))) }))] }));
+};
+export default OptionsDropdown;

package/dist/components/core/OtpInput.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface OtpInputProps {
+    length?: number;
+    onOtpChange: (otp: string) => void;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+}
+declare const _default: (props: OtpInputProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/OtpInput.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+const OtpInput = ({ length = 6, onOtpChange, label = "Enter OTP", size = "md" }) => {
+    const [otp, setOtp] = useState(new Array(length).fill(""));
+    const inputRefs = useRef(new Array(length).fill(null));
+    const getSizeClasses = (s) => {
+        switch (s) {
+            case "sm":
+                return "size-10 md:size-12 sm:text-lg";
+            case "md":
+                return "size-14 md:size-16 sm:text-xl";
+            case "lg":
+                return "size-16 md:size-20 sm:text-2xl";
+            default:
+                return "size-14 md:size-16 sm:text-xl";
+        }
+    };
+    const handleOtpChange = (index, value) => {
+        if (value.length <= 1 && /^\d*$/.test(value)) {
+            const newOtp = [...otp];
+            newOtp[index] = value;
+            setOtp(newOtp);
+            onOtpChange(newOtp.join(""));
+            if (value && index < length - 1) {
+                inputRefs.current[index + 1]?.focus();
+            }
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        if (e.key === "Backspace" && !otp[index] && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData("text");
+        const pastedOtp = pastedData.replace(/\D/g, "").slice(0, length);
+        if (pastedOtp.length > 0) {
+            const newOtp = new Array(length).fill("");
+            for (let i = 0; i < pastedOtp.length && i < length; i++) {
+                newOtp[i] = pastedOtp[i];
+            }
+            setOtp(newOtp);
+            onOtpChange(newOtp.join(""));
+            const nextEmptyIndex = Math.min(pastedOtp.length, length - 1);
+            inputRefs.current[nextEmptyIndex]?.focus();
+        }
+    };
+    return (_jsxs("div", { children: [_jsx("label", { className: "block mb-1 font-medium text-xs text-gray-500", children: label }), _jsx("div", { className: "flex gap-2 md:gap-4 mb-4", children: otp.map((digit, index) => (_jsx("input", { ref: (el) => {
+                        inputRefs.current[index] = el;
+                    }, id: `otp-${index}`, type: "text", inputMode: "numeric", pattern: "[0-9]*", value: digit, onChange: (e) => handleOtpChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, className: `${getSizeClasses(size)} text-center font-semibold border border-gray-300 rounded-xl focus:border-primaryblue focus:outline-none bg-gray-50 text-base text-black`, maxLength: 1, autoComplete: "off" }, index))) })] }));
+};
+export default OtpInput;

package/dist/components/core/PreviewArea.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface ExistingFile {
+    name: string;
+    url: string;
+    _id: string;
+    id: string;
+}
+interface PreviewAreaProps {
+    allPreviewUrls: string[];
+    currentFiles: File[];
+    currentExistingFiles: ExistingFile[];
+    currentPreviewUrls: string[];
+    uploadedFiles: string[];
+    onRemoveFile: (index: number) => void;
+    isVideoFile: (file: ExistingFile | File) => boolean;
+}
+declare const PreviewArea: React.FC<PreviewAreaProps>;
+export default PreviewArea;

package/dist/components/core/PreviewArea.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PreviewArea = ({ allPreviewUrls, currentFiles, currentExistingFiles, currentPreviewUrls, uploadedFiles, onRemoveFile, isVideoFile, }) => {
+    if (allPreviewUrls.length === 0)
+        return null;
+    const renderSinglePreview = () => {
+        const isNewFile = currentFiles.length > 0;
+        const file = isNewFile ? currentFiles[0] : currentExistingFiles[0];
+        const isVideo = isVideoFile(file);
+        const url = isNewFile ? currentPreviewUrls[0] : allPreviewUrls[0];
+        return (_jsxs("div", { className: "w-full h-full relative group", children: [isVideo ? (_jsx("video", { src: url, className: "w-full h-full object-cover", controls: true, muted: true })) : (_jsx("img", { src: url, alt: isNewFile ? "Preview" : "File preview", className: "w-full h-full object-cover" })), _jsx("button", { type: "button", onClick: (e) => {
+                        e.stopPropagation();
+                        onRemoveFile(0);
+                    }, className: "absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold transition-colors opacity-0 hover:opacity-100 group-hover:opacity-100", children: "\u00D7" }), isVideo && (_jsx("div", { className: "absolute top-2 left-2 text-white text-xs bg-black bg-opacity-50 px-2 py-1 rounded", children: "Video" }))] }));
+    };
+    const renderGridPreview = () => {
+        return (_jsx("div", { className: "p-4 h-full", children: _jsx("div", { className: "grid grid-cols-2 gap-3 h-full overflow-y-auto", children: allPreviewUrls.map((url, index) => {
+                    const isNewFile = currentFiles.length > 0;
+                    const file = isNewFile ? currentFiles[index] : currentExistingFiles[index];
+                    const isVideo = isVideoFile(file);
+                    const fileName = isNewFile ? file?.name || "" : file.name;
+                    const isUploaded = isNewFile && uploadedFiles?.includes(fileName);
+                    return (_jsxs("div", { className: "relative group", children: [isVideo ? (_jsx("video", { src: url, className: "w-full h-20 object-cover rounded-lg border border-gray-200", controls: true, muted: true })) : (_jsx("img", { src: url, alt: `Preview ${index + 1}`, className: "w-full h-20 object-cover rounded-lg border border-gray-200" })), isUploaded && (_jsx("div", { className: "absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded", children: "Uploaded" })), _jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onRemoveFile(index);
+                                }, className: "absolute top-1 right-1 bg-red-500 hover:bg-red-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold transition-colors opacity-0 group-hover:opacity-100", children: "\u00D7" }), _jsx("div", { className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all rounded-lg flex items-center justify-center", children: isVideo && (_jsx("div", { className: "text-white text-xs bg-black bg-opacity-50 px-2 py-1 rounded", children: "Video" })) })] }, index));
+                }) }) }));
+    };
+    return (_jsx("div", { className: "flex-1", children: _jsx("div", { className: "h-25  sm:h-[220px] min-h-[160px] border border-gray-200 rounded-xl bg-white overflow-hidden", children: allPreviewUrls.length === 1 ? renderSinglePreview() : renderGridPreview() }) }));
+};
+export default PreviewArea;

package/dist/components/core/SelectionList.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface SelectionOption {
+    id: string;
+    title: string;
+    subtitle?: string;
+    icon?: React.ReactNode;
+}
+export interface SelectionListProps {
+    label?: string;
+    options: SelectionOption[];
+    selectedValue: string;
+    onSelectionChange: (value: string) => void;
+    className?: string;
+}
+declare const _default: (props: SelectionListProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/SelectionList.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RadioIcon = ({ selected }) => (_jsx("span", { className: `ml-4 size-4 flex rounded-full border-1 p-[2.5px] ${selected ? "border-blue-500" : "border-gray-300 bg-gray-50"}`, children: selected ? (_jsx("span", { className: "block size-full rounded-full bg-blue-500" })) : null }));
+const SelectionList = ({ label, options, selectedValue, onSelectionChange, className = "", }) => {
+    return (_jsx("div", { className: `space-y-6 ${className}`, children: _jsxs("div", { className: "", children: [label && (_jsx("div", { className: "p-2 pt-0 rounded-full text-xs text-gray-500", children: _jsx("div", { children: label }) })), _jsx("div", { className: "space-y-3", children: options.map((option) => (_jsxs("label", { className: `relative flex items-center p-4 border rounded-xl cursor-pointer transition-colors ${selectedValue === option.id
+                            ? "border-blue-500 bg-blue-50"
+                            : "border-gray-200 bg-gray-50 hover:bg-gray-100"}`, onClick: () => onSelectionChange(option.id), children: [_jsx("input", { type: "radio", value: option.id, checked: selectedValue === option.id, onChange: () => onSelectionChange(option.id), className: "absolute opacity-0 w-full h-full cursor-pointer" }), _jsxs("div", { className: "flex items-center gap-3 flex-1", children: [option.icon && (_jsx("span", { className: "inline-block p-2 bg-blue-100 rounded-full", children: option.icon })), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "font-semibold text-sm text-gray-900", children: option.title }), option.subtitle && (_jsx("p", { className: "text-[11px] text-gray-500", children: option.subtitle }))] }), _jsx(RadioIcon, { selected: selectedValue === option.id })] })] }, option.id))) })] }) }));
+};
+export default SelectionList;

package/dist/components/core/SquareCheckbox.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface SquareCheckboxProps {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const _default: (props: SquareCheckboxProps) => React.JSX.Element;
+export default _default;

package/dist/components/core/SquareCheckbox.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SquareCheckbox = ({ label, checked, onChange, disabled = false, className, }) => {
+    return (_jsx("div", { className: `inline-flex items-center gap-2 select-none ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className ?? ""}`, children: _jsxs("label", { className: "relative inline-flex items-center gap-2", children: [_jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked), className: "sr-only", autoComplete: "off" }), _jsx("div", { className: `w-10 h-10 rounded-lg border flex items-center justify-center transition-colors ${checked ? "bg-black border-black" : "bg-gray-50 border-gray-300"}`, children: checked && (_jsx("svg", { className: "w-4.5 h-4.5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 6L9 17l-5-5" }) })) }), _jsx("span", { className: "text-xs text-gray-700", children: label })] }) }));
+};
+export default SquareCheckbox;

package/dist/components/core/TabNavigation.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+interface Tab {
+    id: string;
+    label: string;
+}
+interface TabNavigationProps {
+    tabs: Tab[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+    selectedFiles: Record<string, File[]>;
+    existingFilesByTab: Record<string, {
+        name: string;
+        url: string;
+        _id: string;
+        id: string;
+    }[]>;
+}
+declare const TabNavigation: React.FC<TabNavigationProps>;
+export default TabNavigation;

package/dist/components/core/TabNavigation.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabNavigation = ({ tabs, activeTab, onTabChange, selectedFiles, existingFilesByTab, }) => {
+    return (_jsx("div", { className: "flex gap-4 mb-4 overflow-x-auto scrollbar-hide pb-2", children: tabs.map((tab) => (_jsxs("button", { type: "button", onClick: () => onTabChange(tab.id), className: `px-3 py-1 text-[11px] rounded-lg transition-colors cursor-pointer flex items-center flex-shrink-0 whitespace-nowrap ${activeTab === tab.id
+                ? "bg-blue-600 text-white"
+                : "bg-blue-50 text-blue-600 hover:bg-blue-200"} ${(selectedFiles[tab.id]?.length > 0 || existingFilesByTab[tab.id]?.length > 0) &&
+                activeTab === tab.id
+                ? "ring-2 ring-blue-300"
+                : ""}`, children: [tab.label, (selectedFiles[tab.id]?.length > 0 || existingFilesByTab[tab.id]?.length > 0) && (_jsx("span", { className: `ml-2 text-xs ${activeTab === tab.id ? "bg-white" : "bg-primaryblue"} size-1.5 rounded-full inline-block` }))] }, tab.id))) }));
+};
+export default TabNavigation;

package/dist/components/core/Textarea.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className"> {
+    label?: string;
+    error?: string;
+    className?: string;
+}
+declare const _default: (props: TextareaProps & {
+    ref?: React.Ref<HTMLTextAreaElement>;
+}) => React.JSX.Element;
+export default _default;