pf-common-components 1.0.0

package/src/ui/DateRangePicker.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-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 { useEffect, useState } from "react";
+import dayjs from "dayjs";
+import * as loc from "date-fns/locale";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+export type ExtendedCalendarProps = React.ComponentProps<typeof DayPicker> & {
+  yearMonthDropdownClassName?: React.ReactNode; // Add customField prop
+};
+
+function DateRangePicker({
+  className,
+  classNames,
+  showOutsideDays = false,
+  yearMonthDropdownClassName,
+  ...props
+}: ExtendedCalendarProps) {
+  const handleCalendarChange = (
+    _value: string | number,
+    _e: React.ChangeEventHandler<HTMLSelectElement>
+  ) => {
+    const _event = {
+      target: {
+        value: String(_value),
+      },
+    } as React.ChangeEvent<HTMLSelectElement>;
+    _e(_event);
+  };
+
+  const languageCode = 'en'
+
+  const locale =
+    languageCode === "en"
+      ? loc["enUS"]
+      : Object.values(loc).find((language) => language.code === languageCode);
+
+  return (
+    <DayPicker
+      locale={locale}
+      formatters={{
+        formatWeekdayName: (date, options) => {
+          return dayjs(date).format("ddd");
+        },
+      }}
+      showOutsideDays={showOutsideDays}
+      className={cn("", className)}
+      classNames={{
+        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: ({ ...props }) => {
+          const [selectedValue, setSelectedValue] = useState<string | null>(
+            props.value as string
+          );
+
+          const handleValueChange = (value: string) => {
+            setSelectedValue(value);
+            if (props.onChange) {
+              handleCalendarChange(value, props.onChange);
+            }
+          };
+
+          const selectedYearOrMOnth =
+            props?.name == "months"
+              ? dayjs()
+                  .month(props.value as number)
+                  .format("MMM")
+              : props?.caption;
+
+          return (
+            <div className="dropdowns-dob">
+              <Select
+                {...props}
+                onValueChange={(value) => {
+                  handleValueChange(value as string);
+                }}
+                value={selectedValue ?? (props.value as string)}
+              >
+                <SelectTrigger
+                  className={cn(
+                    `${yearMonthDropdownClassName} h-10 w-[105px] rounded-xl font-medium capitalize [.is-between_&]:hidden [.is-end_&]:hidden [.is-start.is-end_&]:flex`
+                  )}
+                >
+                  <SelectValue
+                    placeholder={selectedYearOrMOnth}
+                    className="capitalize"
+                  >
+                    {selectedYearOrMOnth}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent className="max-h-[269px] min-w-[109px] p-1">
+                  <div className="scrollbar max-h-[var(--radix-popper-available-height);] overflow-y-auto capitalize">
+                    {props.children &&
+                      React.Children.map(props.children, (child) => (
+                        <SelectItem
+                          value={
+                            (child as React.ReactElement<any>)?.props?.value
+                          }
+                          className={cn({
+                            "bg-[#7677F4]/10 capitalize text-[#7677F4] hover:!bg-[#7677F4]/10":
+                              selectedValue ===
+                              (child as React.ReactElement<any>)?.props?.value,
+                          })}
+                        >
+                          {(child as React.ReactElement<any>)?.props?.children}
+                        </SelectItem>
+                      ))}
+                  </div>
+                </SelectContent>
+              </Select>
+            </div>
+          );
+        },
+        CaptionLabel: () => {
+          return null;
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+export { DateRangePicker };

package/src/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/src/ui/DobCalendar.tsx

@@ -0,0 +1,172 @@
+import classNames from "classnames";
+import dayjs from "dayjs";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import {
+  DayKeyboardEventHandler,
+  DayPicker,
+  DropdownProps,
+} 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";
+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
+ */
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  const languageCode = 'en';
+  const localeObject =
+      languageCode === "en"
+        ? loc["enUS"]
+        : Object.values(loc).find((language) => language.code === languageCode);
+  
+  const formatWeekdayName = (date: Date) => {
+    return dayjs(date).format("ddd").charAt(0);
+  };
+
+  const handleDayKeyDown: DayKeyboardEventHandler = (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 as HTMLElement;
+      dayElement.dispatchEvent(customEvent);
+    }
+  };
+
+  return (
+    <DayPicker
+      locale={localeObject}
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      formatters={{ formatWeekdayName }}
+      classNames={{
+        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: ({ value, onChange, children, ...props }) => (
+          <YearsAndMonthsDropdown {...props} value={value} onChange={onChange}>
+            {children}
+          </YearsAndMonthsDropdown>
+        ),
+        IconLeft: () => <ChevronLeft className="size-4 text-foreground" />,
+        IconRight: () => <ChevronRight className="size-4 text-foreground" />,
+      }}
+      onDayKeyDown={handleDayKeyDown}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export const YearsAndMonthsDropdown = ({
+  value,
+  onChange,
+  children,
+  ...props
+}: DropdownProps) => {
+  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?.name === "months",
+    },
+    { "rounded-l-none rounded-r-[10px]": props?.name === "years" }
+  );
+
+  const options = React.Children.toArray(children) as React.ReactElement<
+    React.HTMLProps<HTMLOptionElement>
+  >[];
+  const selected = options.find((child) => child.props.value === value);
+
+  const handleChange = (value: string) => {
+    const changeEvent = {
+      target: { value },
+    } as React.ChangeEvent<HTMLSelectElement>;
+    onChange?.(changeEvent);
+  };
+
+  return (
+    <div className="border-1 rounded-lg border">
+      <Select
+        value={value?.toString()}
+        onValueChange={(value: unknown) => {
+          handleChange(value as string);
+        }}
+      >
+        <SelectTrigger className={selectClasses}>
+          <SelectValue>
+            {props.name === "months"
+              ? selected?.props?.children?.toString().substring(0, 3)
+              : selected?.props?.children?.toString()}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent
+          position="popper"
+          className="scrollbar max-h-[400px] max-h-[var(--radix-popper-available-height);] overflow-y-auto capitalize"
+        >
+          <SelectItems>
+            {options.map((option, id: number) => (
+              <SelectItem
+                key={`${option.props.value}-${id}`}
+                value={option.props.value?.toString() ?? ""}
+              >
+                {props.name === "months"
+                  ? option.props.children?.toString().substring(0, 3)
+                  : option.props.children?.toString()}
+              </SelectItem>
+            ))}
+          </SelectItems>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+export { Calendar };

package/src/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/src/ui/Formfield.tsx

@@ -0,0 +1,55 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ReactNode, useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { z, 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>;
+}
+
+const Form: React.FC<FormProps> = ({
+  children,
+  onSubmit,
+  schema = z.object({}),
+  defaultValues,
+  mode = "all",
+  useFormMethodsRef,
+  ...props
+}) => {
+  const methods = useForm({
+    resolver: zodResolver(schema),
+    mode: mode,
+    defaultValues,
+  });
+
+  if (useFormMethodsRef) useFormMethodsRef.current = methods;
+
+  const { handleSubmit, watch } = methods;
+
+  useEffect(() => {
+    watch();
+  }, [watch]);
+
+  const checkKeyDown = (e: any) => {
+    if (e.key === "Enter") e.preventDefault();
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form
+        onSubmit={onSubmit != undefined ? handleSubmit(onSubmit) : () => {}}
+        onKeyDown={(e) => checkKeyDown(e)}
+        {...props}
+      >
+        {children}
+      </form>
+    </FormProvider>
+  );
+};
+
+export default Form;

package/src/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/src/ui/GetScrollAlert.tsx

@@ -0,0 +1,59 @@
+import { debounce } from "lodash";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+
+interface GetScrollTypesAlertProps {
+  id: string;
+  children?: React.ReactNode;
+  onBottom: () => void;
+  onTop?: () => void;
+}
+
+const GetScrollTypesAlert: React.FC<GetScrollTypesAlertProps> = ({
+  id,
+  children,
+  onBottom,
+  onTop,
+}) => {
+  const [onBottomReach, setOnBottomReach] = useState<boolean>(false);
+  const [onTopReach, setOnTopReach] = useState<boolean>(false);
+
+  const handleScroll = debounce(() => {
+    let scrollContainer = document.getElementById(id);
+
+    const scrollDifferenceTop = Math.abs(scrollContainer?.scrollTop || 0);
+    const scrollDifferenceBottom = Math.abs(
+      (scrollContainer?.scrollHeight || 0) -
+        (scrollContainer?.scrollTop || 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 <div>{children}</div>;
+};
+
+export default GetScrollTypesAlert;
+
+

package/src/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/src/ui/RadioGroupContext/RadioGroupContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+
+// Define the type of the context value
+interface RadioGroupContextType {
+  value?: string;
+  disabled?: boolean;
+}
+
+// Create the context
+export const RadioGroupContext = createContext<
+  RadioGroupContextType | undefined
+>(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;
+};