pf-common-components 1.0.0

package/src/ui/DateCalendar.js

@@ -0,0 +1,47 @@
+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 { DayPicker } from "react-day-picker";
+import { cn } from "../lib/utils";
+import dayjs from "dayjs";
+import { buttonVariants } from "./button";
+function DateCalendar(_a) {
+    var { className, classNames, showOutsideDays = true, count, captionLayout, fromDate, toDate } = _a, props = __rest(_a, ["className", "classNames", "showOutsideDays", "count", "captionLayout", "fromDate", "toDate"]);
+    return (_jsx(DayPicker, Object.assign({ weekStartsOn: 1, formatters: {
+            formatWeekdayName: (date, options) => {
+                return dayjs(date).format("ddd");
+            },
+        }, disabled: {
+            before: fromDate,
+            after: toDate,
+        }, showOutsideDays: showOutsideDays, className: cn("", className), 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 pt-2 relative items-center", caption_label: "text-md font-medium", nav: "space-x-2 flex items-center", nav_button: cn(buttonVariants({ variant: "outline" }), "h-8 w-8 p-2 border border-[1px] border-grey-light-hover"), nav_button_previous: "absolute left-2 !text-grey1", nav_button_next: "absolute right-3 !text-grey1", table: "w-full border-collapse ", head_row: "flex capitalize w-full gap-[12px] mx-[6px] text-sm", head_cell: "text-muted-foreground !rounded-full w-10 font-normal text-sm", row: "flex w-full ", cell: "h-10 w-10 text-center m-[6px] !rounded-full text-lg  relative [&:has([aria-selected].day-range-end)]:rounded-full [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-full last:[&:has([aria-selected])]:rounded-full hover:rounded-full focus-within:relative focus-within:z-20", day: cn(buttonVariants({ variant: "ghost" }), "h-10 w-10 p-0 font-normal aria-selected:opacity-100  hover:rounded-full "), day_range_end: "day-range-end", day_selected: "aria-selected:bg-primary text-white !rounded-full hover:bg-primary focus:bg-primary focus:text-white hover:text-white", day_today: "bg-accent text-accent-foreground !rounded-full", day_outside: "day-outside text-muted-foreground opacity-50 aria-selected:!bg-primary aria-selected:text-primary-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: {
+            CaptionLabel: (_a) => {
+                var props = __rest(_a, []);
+                // Extract the month from the props
+                const { displayMonth } = props;
+                const month = dayjs(displayMonth).format("MMMM");
+                const year = displayMonth.getFullYear();
+                return (_jsxs("div", Object.assign({ className: "flex flex-col items-center gap-1 font-semibold" }, { children: [_jsx("div", Object.assign({ className: "text-[20px] capitalize" }, { children: month })), _jsx("div", Object.assign({ className: "text-[12px] text-[#999999]" }, { children: year }))] })));
+            },
+            DayContent: (_a) => {
+                var { date } = _a, dayprops = __rest(_a, ["date"]);
+                const isSelected = props.selected instanceof Date &&
+                    date.getDate() === props.selected.getDate() &&
+                    date.getMonth() === props.selected.getMonth() &&
+                    date.getFullYear() === props.selected.getFullYear();
+                const showCount = count !== undefined;
+                return (_jsxs("div", { children: [date === null || date === void 0 ? void 0 : date.getDate(), isSelected && showCount && (_jsx("div", Object.assign({ className: "absolute right-[-4px] top-[-4px] flex h-5 w-5 items-center justify-center rounded-full bg-[#FF6D6D] text-xs text-white" }, { children: count })))] }));
+            },
+        } }, props)));
+}
+DateCalendar.displayName = "Calendar";
+export { DateCalendar };

package/src/ui/DateCalendar.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../lib/utils";
+import dayjs from "dayjs";
+import { buttonVariants } from "./button";
+
+export type DateCalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function DateCalendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  count,
+  captionLayout,
+  fromDate,
+  toDate,
+  ...props
+}: DateCalendarProps & { count?: number }) {
+  return (
+    <DayPicker
+      weekStartsOn={1}
+      formatters={{
+        formatWeekdayName: (date, options) => {
+          return dayjs(date).format("ddd");
+        },
+      }}
+      disabled={{
+        before: fromDate as Date,
+        after: toDate as Date,
+      }}
+      showOutsideDays={showOutsideDays}
+      className={cn("", className)}
+      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 pt-2 relative items-center",
+        caption_label: "text-md font-medium",
+        nav: "space-x-2 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-8 w-8 p-2 border border-[1px] border-grey-light-hover"
+        ),
+        nav_button_previous: "absolute left-2 !text-grey1",
+        nav_button_next: "absolute right-3 !text-grey1",
+        table: "w-full border-collapse ",
+        head_row: "flex capitalize w-full gap-[12px] mx-[6px] text-sm",
+        head_cell:
+          "text-muted-foreground !rounded-full w-10 font-normal text-sm",
+        row: "flex w-full ",
+        cell: "h-10 w-10 text-center m-[6px] !rounded-full text-lg  relative [&:has([aria-selected].day-range-end)]:rounded-full [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-full last:[&:has([aria-selected])]:rounded-full hover:rounded-full focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-10 w-10 p-0 font-normal aria-selected:opacity-100  hover:rounded-full "
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "aria-selected:bg-primary text-white !rounded-full hover:bg-primary focus:bg-primary focus:text-white hover:text-white",
+        day_today: "bg-accent text-accent-foreground !rounded-full",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:!bg-primary aria-selected:text-primary-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={{
+        CaptionLabel: ({ ...props }) => {
+          // Extract the month from the props
+          const { displayMonth } = props;
+
+          const month = dayjs(displayMonth).format("MMMM");
+
+          const year = displayMonth.getFullYear();
+
+          return (
+            <div className="flex flex-col items-center gap-1 font-semibold">
+              <div className="text-[20px] capitalize">{month}</div>
+              <div className="text-[12px] text-[#999999]">{year}</div>
+            </div>
+          );
+        },
+        DayContent: ({ date, ...dayprops }) => {
+          const isSelected =
+            props.selected instanceof Date &&
+            date.getDate() === props.selected.getDate() &&
+            date.getMonth() === props.selected.getMonth() &&
+            date.getFullYear() === props.selected.getFullYear();
+
+          const showCount = count !== undefined;
+          return (
+            <div>
+              {date?.getDate()}
+              {isSelected && showCount && (
+                <div className="absolute right-[-4px] top-[-4px] flex h-5 w-5 items-center justify-center rounded-full bg-[#FF6D6D] text-xs text-white">
+                  {count}
+                </div>
+              )}
+            </div>
+          );
+        },
+      }}
+      {...props}
+    />
+  );
+}
+DateCalendar.displayName = "Calendar";
+
+export { DateCalendar };

package/src/ui/DateField.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CalenderIcon from "../../public/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/src/ui/DateField.tsx

@@ -0,0 +1,142 @@
+import CalenderIcon from "../assets/CalenderIcon";
+import { format } from "date-fns";
+import { useEffect, useRef, 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";
+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;
+
+  // Enable or disable the date picker
+
+  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 const DateField = ({
+  value,
+  onChange,
+  placeholder,
+  className,
+  disabled,
+  fromDate,
+  toDate,
+  error = false,
+  formatType = "DD MMM, YYYY",
+  onBlur,
+  onFocus,
+}: DateFieldProps) => {
+  // 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: any) => {
+    if (value) onChange(value);
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          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}
+        >
+          <CalenderIcon color="#666666" className="mr-2 h-4 w-4" />
+
+          {/* Render the formatted date if date is selected, otherwise render the placeholder */}
+          {value ? (
+            <div className="capitalize">
+              {value && dayjs(value).format(formatType)}
+            </div>
+          ) : (
+            <span>{placeholder ? placeholder : "Pick a date"}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[320px] rounded-3xl p-0">
+        <DateRangePicker
+          mode="single"
+          selected={value}
+          onSelect={(val: any) => {
+            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}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/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 "../../public/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/src/ui/DateOfBirthSelector.tsx

@@ -0,0 +1,114 @@
+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,
+}: {
+  onChange: any;
+  value: any;
+  onBlur?: any;
+  onFocus?: any;
+  error?: any;
+  className?: string;
+  placeholder?: string;
+  fromDate: Date;
+  toDate: Date;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation("common");
+  const [date, setDate] = React.useState<Date | undefined>(value);
+  const [calendarOpen, setCalendarOpen] = React.useState(false);
+
+  const thisYear = new Date().getFullYear(); //present year
+
+  const handleDateChange = (newDate: Date | undefined) => {
+    setDate(newDate);
+
+    if (newDate) onChange(format(newDate, "yyyy/MM/dd"));
+    else onChange("");
+    setCalendarOpen(false);
+  };
+  React.useEffect(() => {
+    setDate(value ? new Date(value) : value);
+  }, [value]);
+
+  return (
+    <Popover
+      open={disabled ? false : calendarOpen}
+      onOpenChange={setCalendarOpen}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          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}
+        >
+          <div
+            className={`flex w-full flex-col ${
+              date ? "text-[#333333]" : "text-[#999999]"
+            }`}
+          >
+            {/* <span className={`${date ? "text-primary" : "text-secondary"}`}>
+              {date ? format(date, "dd MMM yyyy") : t("dateOfBirth")}
+            </span> */}
+            {date ? format(date, "dd-MM-yyyy") : placeholder}
+            {/* {date ? date : placeholder} */}
+          </div>
+          <div>
+            <CalenderIcon color="#666666" className="mr-2 h-4 w-4" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="center"
+        className="h-auto w-[270px] rounded-[21px] border-[#D7D7D7] p-0"
+      >
+        <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} // Shows the selected date in the calendar
+          showOutsideDays={false} // Whether need to show the days not present in the month
+          weekStartsOn={1} // Sequence of days in a week starts from monday
+          onSelect={handleDateChange} // Selected date is set to the date after selected from the calendar
+          fromDate={fromDate} //The earliest day to start the month navigation.
+          toDate={toDate} //The latest day to end the month navigation.
+          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}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/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 };