pf-common-components 1.0.0

package/dist/ui/DateField.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+interface DateFieldProps {
+    /**
+     * The selected date to be displayed in the calendar.
+     */
+    value?: Date;
+    /**
+     * Function to set the selected date.
+     * @param value - The date to set as the selected date.
+     */
+    onChange: (value: Date) => void;
+    /**
+     * Placeholder text to display when no date is selected.
+     */
+    placeholder?: string;
+    /**
+     * className to change stylings of the calendar.
+     */
+    className?: string;
+    disabled?: boolean;
+    fromDate?: Date;
+    toDate?: Date;
+    /**
+     * This is to define the format to be displayed in input when we select the date
+     */
+    formatType?: string;
+    /**
+     * If error is true, then make border will be red
+     */
+    error?: boolean;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+}
+export declare const DateField: ({ value, onChange, placeholder, className, disabled, fromDate, toDate, error, formatType, onBlur, onFocus, }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/DateField.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CalenderIcon from "../assets/CalenderIcon";
+import { useState } from "react";
+import { cn } from "../lib/utils";
+import { Button, buttonVariants } from "./button";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import dayjs from "dayjs";
+import { DateRangePicker } from "./DateRangePicker";
+export const DateField = ({ value, onChange, placeholder, className, disabled, fromDate, toDate, error = false, formatType = "DD MMM, YYYY", onBlur, onFocus, }) => {
+    // State to manage the visibility of the popover
+    const [isOpen, setIsOpen] = useState(false);
+    const fromYear = fromDate ? fromDate.getFullYear() : 1900;
+    const toYear = toDate ? toDate.getFullYear() : 2030;
+    /**
+     * Function to handle the selected date
+     */
+    const handleSelectDate = (value) => {
+        if (value)
+            onChange(value);
+        setIsOpen(false);
+    };
+    return (_jsxs(Popover, Object.assign({ open: isOpen, onOpenChange: setIsOpen }, { children: [_jsx(PopoverTrigger, Object.assign({ asChild: true }, { children: _jsxs(Button, Object.assign({ variant: "outline", className: cn(`flex flex-row justify-start gap-2 px-3`, error && "border border-red", className, value ? "text-grey" : "font-normal text-grey2"), onClick: () => setIsOpen(!isOpen), disabled: disabled ? true : false, onBlur: onBlur, onFocus: onFocus }, { children: [_jsx(CalenderIcon, { color: "#666666", className: "mr-2 h-4 w-4" }), value ? (_jsx("div", Object.assign({ className: "capitalize" }, { children: value && dayjs(value).format(formatType) }))) : (_jsx("span", { children: placeholder ? placeholder : "Pick a date" }))] })) })), _jsx(PopoverContent, Object.assign({ className: "w-[320px] rounded-3xl p-0" }, { children: _jsx(DateRangePicker, { mode: "single", selected: value, onSelect: (val) => {
+                        handleSelectDate(val);
+                    }, captionLayout: "dropdown-buttons", fromYear: fromYear, toYear: toYear, fromDate: fromDate, toDate: toDate, yearMonthDropdownClassName: "!w-[80px]", classNames: {
+                        month: "border-none border border-stroke min-w-[320px] rounded-3xl",
+                        cell: "h-10 w-10 text-center rounded-full text-xs p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-primary [&:has([aria-selected])]:bg-primary-light first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 flex justify-center items-center",
+                        day: cn(buttonVariants({ variant: "ghost" }), "h-10 w-10 text-xs px-2 !rounded-full text-grey font-semibold aria-selected:opacity-100"),
+                        head_cell: "text-grey2 rounded-md w-10 font-normal text-xs",
+                        head_row: "flex capitalize text-grey2 items-center justify-center text-xs h-[44px]",
+                        nav_button: cn(buttonVariants({ variant: "outline" }), "h-8 w-8 p-2 border border-grey-light-hover"),
+                        table: "w-full border-collapse space-y-2 min-h-[250px]",
+                    }, disabled: (date) => {
+                        const isAfterDisableDate = toDate ? date > toDate : false;
+                        const isBeforeEnableDate = fromDate ? date < fromDate : false;
+                        return isAfterDisableDate || isBeforeEnableDate;
+                    }, defaultMonth: value }) }))] })));
+};

package/dist/ui/DateOfBirthSelector.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This is the function of complete date picker,Which contains a button and a calendar
+ * @returns complete date picker
+ */
+export declare function DateOfBirthSelector({ onChange, value, onBlur, onFocus, error, className, placeholder, fromDate, toDate, disabled, }: {
+    onChange: any;
+    value: any;
+    onBlur?: any;
+    onFocus?: any;
+    error?: any;
+    className?: string;
+    placeholder?: string;
+    fromDate: Date;
+    toDate: Date;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/DateOfBirthSelector.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { useTranslation } from "next-i18next";
+import CalenderIcon from "../assets/CalenderIcon";
+import * as React from "react";
+import { Button } from "./button";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "../lib/utils";
+import { Calendar } from "./DobCalendar";
+/**
+ * This is the function of complete date picker,Which contains a button and a calendar
+ * @returns complete date picker
+ */
+export function DateOfBirthSelector({ onChange, value, onBlur, onFocus, error, className, placeholder, fromDate, toDate, disabled, }) {
+    const { t } = useTranslation("common");
+    const [date, setDate] = React.useState(value);
+    const [calendarOpen, setCalendarOpen] = React.useState(false);
+    const thisYear = new Date().getFullYear(); //present year
+    const handleDateChange = (newDate) => {
+        setDate(newDate);
+        if (newDate)
+            onChange(format(newDate, "yyyy/MM/dd"));
+        else
+            onChange("");
+        setCalendarOpen(false);
+    };
+    React.useEffect(() => {
+        setDate(value ? new Date(value) : value);
+    }, [value]);
+    return (_jsxs(Popover, Object.assign({ open: disabled ? false : calendarOpen, onOpenChange: setCalendarOpen }, { children: [_jsx(PopoverTrigger, Object.assign({ asChild: true }, { children: _jsxs(Button, Object.assign({ className: cn("border border-input bg-[white] text-left font-normal sm:h-[40px] sm:w-full", className, error && "border-[#FF6D6D]", disabled && "cursor-not-allowed"), onBlur: onBlur, onFocus: onFocus }, { children: [_jsx("div", Object.assign({ className: `flex w-full flex-col ${date ? "text-[#333333]" : "text-[#999999]"}` }, { children: date ? format(date, "dd-MM-yyyy") : placeholder })), _jsx("div", { children: _jsx(CalenderIcon, { color: "#666666", className: "mr-2 h-4 w-4" }) })] })) })), _jsx(PopoverContent, Object.assign({ align: "center", className: "h-auto w-[270px] rounded-[21px] border-[#D7D7D7] p-0" }, { children: _jsx(Calendar, { mode: "single" // Here single mode represents that we can pick a single date from calendar
+                    , captionLayout: "dropdown-buttons" //The calendar contains both dropdowns of months, years and previous, next buttons
+                    , selected: date, showOutsideDays: false, weekStartsOn: 1, onSelect: handleDateChange, fromDate: fromDate, toDate: toDate, disabled: (date) => {
+                        const todayDate = new Date();
+                        todayDate.setHours(0, 0, 0, 0);
+                        const selectDate = new Date(date);
+                        return fromDate && toDate
+                            ? false
+                            : fromDate
+                                ? selectDate < todayDate
+                                : selectDate > todayDate;
+                    }, defaultMonth: date }) }))] })));
+}

package/dist/ui/DateRangePicker.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export type ExtendedCalendarProps = React.ComponentProps<typeof DayPicker> & {
+    yearMonthDropdownClassName?: React.ReactNode;
+};
+declare function DateRangePicker({ className, classNames, showOutsideDays, yearMonthDropdownClassName, ...props }: ExtendedCalendarProps): import("react/jsx-runtime").JSX.Element;
+export { DateRangePicker };

package/dist/ui/DateRangePicker.js

@@ -0,0 +1,73 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./select";
+import { useState } from "react";
+import dayjs from "dayjs";
+import * as loc from "date-fns/locale";
+function DateRangePicker(_a) {
+    var { className, classNames, showOutsideDays = false, yearMonthDropdownClassName } = _a, props = __rest(_a, ["className", "classNames", "showOutsideDays", "yearMonthDropdownClassName"]);
+    const handleCalendarChange = (_value, _e) => {
+        const _event = {
+            target: {
+                value: String(_value),
+            },
+        };
+        _e(_event);
+    };
+    const languageCode = 'en';
+    const locale = languageCode === "en"
+        ? loc["enUS"]
+        : Object.values(loc).find((language) => language.code === languageCode);
+    return (_jsx(DayPicker, Object.assign({ locale: locale, formatters: {
+            formatWeekdayName: (date, options) => {
+                return dayjs(date).format("ddd");
+            },
+        }, showOutsideDays: showOutsideDays, className: cn("", className), classNames: Object.assign({ months: "flex flex-col justify-center sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4 border border-stroke min-w-[374px] rounded-3xl", caption: "flex flex-row relative items-center border-b border-grey-light-hover h-[60px]", caption_dropdowns: "flex flex-row-reverse justify-center gap-2 grow dropdowns", nav: "space-x-1 flex items-center", nav_button: cn(buttonVariants({ variant: "outline" }), "h-8 w-8 p-2 border border-grey-light-hover"), nav_button_previous: "absolute left-5 !text-grey1 w-6 h-6", nav_button_next: "absolute right-5 !text-grey1 w-6 h-6", table: "w-full border-collapse space-y-2 min-h-[284px]", head_row: "flex capitalize gap-6 text-grey2 items-center justify-center text-xs h-[44px]", head_cell: "text-grey2 rounded-md w-6 font-normal text-xs", row: "flex flex-row w-full px-4", cell: "h-11 w-12 text-center text-xs p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-primary [&:has([aria-selected])]:bg-primary-light first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 flex justify-center items-center", day: cn(buttonVariants({ variant: "ghost" }), "h-11 w-12  text-xs !rounded-full text-grey font-semibold aria-selected:opacity-100"), day_range_end: "day-range-end", day_selected: "aria-selected:bg-primary text-white hover:bg-primary focus:bg-primary focus:text-white hover:text-white", day_today: "bg-primary-light text-accent-foreground", day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-primary aria-selected:text-muted-foreground aria-selected:opacity-30", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-primary-light aria-selected:text-accent-foreground", day_hidden: "invisible" }, classNames), components: {
+            // IconLeft: ({ ...props }) => <ChevronLeft className="h-5 !w-6" />,
+            // IconRight: ({ ...props }) => <ChevronRight className="h-5 !w-6" />,
+            Dropdown: (_a) => {
+                var props = __rest(_a, []);
+                const [selectedValue, setSelectedValue] = useState(props.value);
+                const handleValueChange = (value) => {
+                    setSelectedValue(value);
+                    if (props.onChange) {
+                        handleCalendarChange(value, props.onChange);
+                    }
+                };
+                const selectedYearOrMOnth = (props === null || props === void 0 ? void 0 : props.name) == "months"
+                    ? dayjs()
+                        .month(props.value)
+                        .format("MMM")
+                    : props === null || props === void 0 ? void 0 : props.caption;
+                return (_jsx("div", Object.assign({ className: "dropdowns-dob" }, { children: _jsxs(Select, Object.assign({}, props, { onValueChange: (value) => {
+                            handleValueChange(value);
+                        }, value: selectedValue !== null && selectedValue !== void 0 ? selectedValue : props.value }, { children: [_jsx(SelectTrigger, Object.assign({ className: cn(`${yearMonthDropdownClassName} h-10 w-[105px] rounded-xl font-medium capitalize [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex`) }, { children: _jsx(SelectValue, Object.assign({ placeholder: selectedYearOrMOnth, className: "capitalize" }, { children: selectedYearOrMOnth })) })), _jsx(SelectContent, Object.assign({ className: "max-h-[269px] min-w-[109px] p-1" }, { children: _jsx("div", Object.assign({ className: "scrollbar max-h-[var(--radix-popper-available-height);] overflow-y-auto capitalize" }, { children: props.children &&
+                                        React.Children.map(props.children, (child) => {
+                                            var _a, _b, _c;
+                                            return (_jsx(SelectItem, Object.assign({ value: (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value, className: cn({
+                                                    "bg-[#7677F4]/10 capitalize text-[#7677F4] hover:!bg-[#7677F4]/10": selectedValue ===
+                                                        ((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.value),
+                                                }) }, { children: (_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.children })));
+                                        }) })) }))] })) })));
+            },
+            CaptionLabel: () => {
+                return null;
+            },
+        } }, props)));
+}
+export { DateRangePicker };

package/dist/ui/DobCalendar.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { DayPicker, DropdownProps } from "react-day-picker";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+/**
+ * This is the function,contains a select dropdowns of list of months and year, a previous and next buttons
+ * @param showOutsideDays boolean which represents whether to show outside month days or not
+ * @param formatters  represents format of displaying the week days
+ * @param classnames represents the stylings of complete calendar
+ * @param components we can add extra components if needed into the calender
+ * @returns the calender to select the date with month and year dropdowns
+ */
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export declare const YearsAndMonthsDropdown: ({ value, onChange, children, ...props }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export { Calendar };

package/dist/ui/DobCalendar.js

@@ -0,0 +1,86 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import dayjs from "dayjs";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import { DayPicker, } from "react-day-picker";
+import { buttonVariants } from "./button";
+import * as loc from "date-fns/locale";
+import { Select, SelectContent, SelectItem, SelectItems, SelectTrigger, SelectValue, } from "./select";
+import { cn } from "../lib/utils";
+/**
+ * This is the function,contains a select dropdowns of list of months and year, a previous and next buttons
+ * @param showOutsideDays boolean which represents whether to show outside month days or not
+ * @param formatters  represents format of displaying the week days
+ * @param classnames represents the stylings of complete calendar
+ * @param components we can add extra components if needed into the calender
+ * @returns the calender to select the date with month and year dropdowns
+ */
+function Calendar(_a) {
+    var { className, classNames, showOutsideDays = true } = _a, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
+    const languageCode = 'en';
+    const localeObject = languageCode === "en"
+        ? loc["enUS"]
+        : Object.values(loc).find((language) => language.code === languageCode);
+    const formatWeekdayName = (date) => {
+        return dayjs(date).format("ddd").charAt(0);
+    };
+    const handleDayKeyDown = (day, modifiers, event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            const customEvent = new MouseEvent("click", {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            });
+            const dayElement = event.target;
+            dayElement.dispatchEvent(customEvent);
+        }
+    };
+    return (_jsx(DayPicker, Object.assign({ locale: localeObject, showOutsideDays: showOutsideDays, className: cn("p-3", className), formatters: { formatWeekdayName }, classNames: Object.assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center relative items-center", caption_label: "hidden", caption_dropdowns: "flex justify-center gap-2", nav: "space-x-1 flex items-center", nav_button: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-100 !size-[30px] border rounded-[10px]"), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", table: "w-full border-collapse space-y-1", head_row: "flex w-1 gap-[25px] px-3 ", head_cell: "text-foreground rounded-full w-9 font-semibold text-sm", cell: "h-9 w-9 text-center text-sm !rounded-full p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100 hover:bg-accent disabled:bg-transparent rounded-full"), day_selected: "!bg-primary !rounded-full !size-[33px] text-white hover:!bg-primary", day_today: "bg-accent text-accent-foreground !rounded-full !size-[33px] " }, classNames), components: {
+            Dropdown: (_a) => {
+                var { value, onChange, children } = _a, props = __rest(_a, ["value", "onChange", "children"]);
+                return (_jsx(YearsAndMonthsDropdown, Object.assign({}, props, { value: value, onChange: onChange }, { children: children })));
+            },
+            IconLeft: () => _jsx(ChevronLeft, { className: "size-4 text-foreground" }),
+            IconRight: () => _jsx(ChevronRight, { className: "size-4 text-foreground" }),
+        }, onDayKeyDown: handleDayKeyDown }, props)));
+}
+Calendar.displayName = "Calendar";
+export const YearsAndMonthsDropdown = (_a) => {
+    var _b, _c, _d, _e;
+    var { value, onChange, children } = _a, props = __rest(_a, ["value", "onChange", "children"]);
+    const selectClasses = classNames("pr-1.5 h-[30px] text-sm font-semibold focus:border-transparent focus:bg-primary/10 focus:text-primary outline-none border-secondary/20 text-foreground", {
+        "rounded-l-[10px] rounded-r-none": (props === null || props === void 0 ? void 0 : props.name) === "months",
+    }, { "rounded-l-none rounded-r-[10px]": (props === null || props === void 0 ? void 0 : props.name) === "years" });
+    const options = React.Children.toArray(children);
+    const selected = options.find((child) => child.props.value === value);
+    const handleChange = (value) => {
+        const changeEvent = {
+            target: { value },
+        };
+        onChange === null || onChange === void 0 ? void 0 : onChange(changeEvent);
+    };
+    return (_jsx("div", Object.assign({ className: "border-1 rounded-lg border" }, { children: _jsxs(Select, Object.assign({ value: value === null || value === void 0 ? void 0 : value.toString(), onValueChange: (value) => {
+                handleChange(value);
+            } }, { children: [_jsx(SelectTrigger, Object.assign({ className: selectClasses }, { children: _jsx(SelectValue, { children: props.name === "months"
+                            ? (_c = (_b = selected === null || selected === void 0 ? void 0 : selected.props) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.toString().substring(0, 3)
+                            : (_e = (_d = selected === null || selected === void 0 ? void 0 : selected.props) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e.toString() }) })), _jsx(SelectContent, Object.assign({ position: "popper", className: "scrollbar max-h-[400px] max-h-[var(--radix-popper-available-height);] overflow-y-auto capitalize" }, { children: _jsx(SelectItems, { children: options.map((option, id) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx(SelectItem, Object.assign({ value: (_b = (_a = option.props.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "" }, { children: props.name === "months"
+                                    ? (_c = option.props.children) === null || _c === void 0 ? void 0 : _c.toString().substring(0, 3)
+                                    : (_d = option.props.children) === null || _d === void 0 ? void 0 : _d.toString() }), `${option.props.value}-${id}`));
+                        }) }) }))] })) })));
+};
+export { Calendar };

package/dist/ui/Formfield.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { ZodSchema } from "zod";
+interface FormProps {
+    children: ReactNode;
+    onSubmit: (data: any) => void;
+    defaultValues?: Record<string, any>;
+    schema?: ZodSchema<any, any, any>;
+    mode?: "all" | "onBlur" | "onChange" | "onSubmit" | "onTouched" | undefined;
+    useFormMethodsRef?: React.MutableRefObject<any>;
+}
+declare const Form: React.FC<FormProps>;
+export default Form;

package/dist/ui/Formfield.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
+const Form = (_a) => {
+    var { children, onSubmit, schema = z.object({}), defaultValues, mode = "all", useFormMethodsRef } = _a, props = __rest(_a, ["children", "onSubmit", "schema", "defaultValues", "mode", "useFormMethodsRef"]);
+    const methods = useForm({
+        resolver: zodResolver(schema),
+        mode: mode,
+        defaultValues,
+    });
+    if (useFormMethodsRef)
+        useFormMethodsRef.current = methods;
+    const { handleSubmit, watch } = methods;
+    useEffect(() => {
+        watch();
+    }, [watch]);
+    const checkKeyDown = (e) => {
+        if (e.key === "Enter")
+            e.preventDefault();
+    };
+    return (_jsx(FormProvider, Object.assign({}, methods, { children: _jsx("form", Object.assign({ onSubmit: onSubmit != undefined ? handleSubmit(onSubmit) : () => { }, onKeyDown: (e) => checkKeyDown(e) }, props, { children: children })) })));
+};
+export default Form;

package/dist/ui/GetScrollAlert.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface GetScrollTypesAlertProps {
+    id: string;
+    children?: React.ReactNode;
+    onBottom: () => void;
+    onTop?: () => void;
+}
+declare const GetScrollTypesAlert: React.FC<GetScrollTypesAlertProps>;
+export default GetScrollTypesAlert;

package/dist/ui/GetScrollAlert.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { debounce } from "lodash";
+import { useEffect, useState } from "react";
+const GetScrollTypesAlert = ({ id, children, onBottom, onTop, }) => {
+    const [onBottomReach, setOnBottomReach] = useState(false);
+    const [onTopReach, setOnTopReach] = useState(false);
+    const handleScroll = debounce(() => {
+        let scrollContainer = document.getElementById(id);
+        const scrollDifferenceTop = Math.abs((scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) || 0);
+        const scrollDifferenceBottom = Math.abs(((scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) || 0) -
+            ((scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) || 0) -
+            ((scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight) || 0));
+        if (scrollDifferenceBottom <= 2) {
+            onBottom();
+            setOnBottomReach(true);
+        }
+        else if (onTop && scrollDifferenceTop <= 2) {
+            onTop();
+            setOnTopReach(true);
+        }
+    }, 100); // Adjust the debounce delay as needed
+    useEffect(() => {
+        let scrollContainer = document.getElementById(id);
+        if (scrollContainer) {
+            scrollContainer.addEventListener("scroll", handleScroll);
+        }
+        return () => {
+            setOnBottomReach(false);
+            setOnTopReach(false);
+            if (scrollContainer) {
+                scrollContainer.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [onBottomReach, onTopReach, id, handleScroll]);
+    return _jsx("div", { children: children });
+};
+export default GetScrollTypesAlert;

package/dist/ui/RadioGroupContext/RadioGroupContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface RadioGroupContextType {
+    value?: string;
+    disabled?: boolean;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextType | undefined>;
+export declare const useRadioGroupContext: () => RadioGroupContextType;
+export {};

package/dist/ui/RadioGroupContext/RadioGroupContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+// Create the context
+export const RadioGroupContext = createContext(undefined);
+// Custom hook to use the context
+export const useRadioGroupContext = () => {
+    const context = useContext(RadioGroupContext);
+    if (context === undefined) {
+        throw new Error("useRadioGroupContext must be used within a MyProvider");
+    }
+    return context;
+};

package/dist/ui/SelectCommand.d.ts

@@ -0,0 +1,69 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+declare const MVPSelect: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverProps & {
+    value?: any;
+    onChange?: ((value: string) => void) | undefined;
+    isFiltering?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    defaultOptions?: any;
+    secured?: boolean | undefined;
+    showSeparator?: boolean | undefined;
+} & React.RefAttributes<never>>;
+declare const MVPSelectTrigger: React.ForwardRefExoticComponent<{
+    placeholder: string;
+    error?: boolean | undefined;
+    disable?: boolean | undefined;
+    className?: string | undefined;
+    crossIcon?: boolean | undefined;
+    /**
+     * endIcon is optional Field, so that any one can send the component whatever they want to show beside the cross icon
+     */
+    endIcon?: React.ReactNode;
+} & Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const MVPSelectContent: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & {
+    label?: string | undefined;
+    shouldFilter?: boolean | undefined;
+    filter?: ((value: string, search: string) => number) | undefined;
+    defaultValue?: string | undefined;
+    value?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    loop?: boolean | undefined;
+    vimBindings?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MVPSelectLoading: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & {
+    progress?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MVPSelectInput: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & {
+    onValueChange?: ((val: string) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+declare const MVPSelectItems: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    onBottomReached?: (() => void) | undefined;
+    minLenToSearch?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const MVPSelectEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MVPSelectSeparator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & {
+    alwaysRender?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MVPSelectItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean | undefined;
+    onSelect?: ((value: string) => void) | undefined;
+    value?: string | undefined;
+    forceMount?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    label: string;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CommandShortcut, MVPSelect, MVPSelectContent, MVPSelectEmpty, MVPSelectInput, MVPSelectItem, MVPSelectItems, MVPSelectLoading, MVPSelectSeparator, MVPSelectTrigger, };