torch-glare 1.1.4 → 1.1.6

package/lib/components/BadgeField.tsx

@@ -3,6 +3,7 @@ import {
   forwardRef,
   InputHTMLAttributes,
   ReactNode,
+  useEffect,
   useRef,
   useState,
 } from "react";
@@ -15,7 +16,6 @@ import { useClickOutside } from "../hooks/useClickOutside";
 import { Badge } from "./Badge";
 import { Tag, useTagSelection } from "../hooks/useTagSelection";
 
-
 interface Props
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
   size?: "XS" | "S" | "M"; // this is used to change the size style of the component
@@ -26,13 +26,12 @@ interface Props
   toolTipSide?: ToolTipSide;
   label?: string;
   required?: boolean;
-  theme?: Themes
-  actionButton?: ReactNode
-  tags: Tag[]
-  onValueChange?: (tags: Tag[]) => void
+  theme?: Themes;
+  actionButton?: ReactNode;
+  tags: Tag[];
+  onValueChange?: (tags: Tag[]) => void;
 }
 
-
 export const BadgeField = forwardRef<HTMLInputElement, Props>(
   (
     {
@@ -48,7 +47,6 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       actionButton,
       theme,
       tags,
-      onValueChange,
       children,
       ...props
     },
@@ -62,7 +60,8 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       if (
         !inputGroupRef?.current?.contains(e?.target as Node) &&
         !popoverContentRef?.current?.contains(e?.target as Node)
-      ) setIsPopoverOpen(false);
+      )
+        setIsPopoverOpen(false);
       else setIsPopoverOpen(true);
     });
 
@@ -79,7 +78,16 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       focusedPopoverIndex,
       isPopoverOpen,
       setIsPopoverOpen,
-    } = useTagSelection({ Tags: tags, onTagsChange: onValueChange, inputRef });
+      searchTags
+    } = useTagSelection({
+      Tags: tags,
+      onTagsChange: (e) => props.onChange?.({
+        target: {
+          value: e
+        }
+      } as any),
+      inputRef
+    });
 
     return (
       <Popover open={isPopoverOpen}>
@@ -88,8 +96,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
           open={errorMessage !== undefined}
           text={errorMessage}
         >
-          <PopoverTrigger asChild
-          >
+          <PopoverTrigger asChild>
             <Group
               error={errorMessage !== undefined}
               onTable={onTable}
@@ -102,44 +109,42 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
               onFocus={(e: any) => {
                 setDropDownListWidth(e.currentTarget.offsetWidth);
               }}
-              className={cn("flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end h-fit items-center",
+              className={cn(
+                "flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end  items-center",
                 {
                   "flex-wrap justify-start": isPopoverOpen,
+                  "h-fit": isPopoverOpen,
                 },
                 className
               )}
             >
-              {icon && (
-                <Icon  >
-                  {icon}
-                </Icon>
-              )}
+              {icon && <Icon>{icon}</Icon>}
 
-              {
-                selectedTagsStack.map((tag, index) => (
-                  <Badge
-                    key={tag.id}
-                    size={size}
-                    variant={tag.variant as any}
-                    label={tag.name}
-                    isSelected={true}
-                    onUnselect={() => handleUnselectTag(tag.id)}
-                    className={focusedTagIndex === index ? "ring-2 ring-blue-500" : ""}
-                    tabIndex={focusedTagIndex === index ? 0 : -1}
-                  />
-                ))
-              }
+              {selectedTagsStack.map((tag, index) => (
+                <Badge
+                  key={tag.id}
+                  size={size}
+                  variant={tag.variant as any}
+                  label={tag.name}
+                  isSelected={true}
+                  onUnselect={() => handleUnselectTag(tag.id)}
+                  className={
+                    focusedTagIndex === index ? "ring-2 ring-blue-500" : ""
+                  }
+                  tabIndex={focusedTagIndex === index ? 0 : -1}
+                />
+              ))}
 
               <Input
                 {...props}
+                value={searchTags}
                 onChange={(e) => {
-                  props.onChange?.(e)
-                  filterTagsBySearch(e.target.value)
+                  filterTagsBySearch(e.target.value);
                 }}
                 onFocus={(e) => {
-                  props.onFocus?.(e)
+                  props.onFocus?.(e);
                   setFocusedTagIndex(null);
-                  setIsPopoverOpen(true)
+                  setIsPopoverOpen(true);
                 }}
                 ref={inputRef}
                 className={cn(
@@ -151,13 +156,12 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
                   }
                 )}
               />
-              {
-                actionButton && (
-                  <Trilling className="py-0" > {/* Keep the ActionButton right aligned */}
-                    {actionButton}
-                  </Trilling>
-                )
-              }
+              {actionButton && (
+                <Trilling className="py-0">
+                  {/* Keep the ActionButton right aligned */}
+                  {actionButton}
+                </Trilling>
+              )}
             </Group>
           </PopoverTrigger>
         </Tooltip>
@@ -178,13 +182,16 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
                   variant={tag.variant as any}
                   label={tag.name}
                   onClick={() => handleSelectTag(tag.id)}
-                  className={`outline-none  ${focusedPopoverIndex === index ? "ring-2 ring-blue-500" : ""} ${index !== 0 ? "mt-1" : ""}`}
+                  className={`outline-none  ${focusedPopoverIndex === index ? "ring-2 ring-blue-500" : ""
+                    } ${index !== 0 ? "mt-1" : ""}`}
                   tabIndex={focusedPopoverIndex === index ? 0 : -1}
                 />
               ))
             ) : (
               <div className="text-sm text-gray-500 py-1 px-2">
-                {tags.length === 0 ? "All tags selected" : "No matching tags found"}
+                {tags.length === 0
+                  ? "All tags selected"
+                  : "No matching tags found"}
               </div>
             )}
           </>

package/lib/components/{Calender.tsx → Calendar.tsx}

@@ -9,7 +9,7 @@ import { SimpleSelectValue, SimpleSelectItem } from "./SimpleSelect";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
-const Calender = ({
+const Calendar = ({
   className,
   classNames,
   captionLayout = "dropdown",
@@ -86,8 +86,8 @@ const Calender = ({
         range_start: `rounded-l-[8px] bg-background-system-action-secondary-hover`,
         range_end: `rounded-r-[8px] bg-background-system-action-secondary-hover`,
         range_middle: `bg-background-system-action-secondary-hover [&_button]:!border-none [&_button]:!bg-transparent`,
-        weekdays: `text-content-presentation-global-highlight-darkback text-[12px]`,
-        week_number: `text-content-presentation-global-highlight-darkback text-[12px] px-1`,
+        weekdays: `text-content-presentation-global-primary text-[12px]`,
+        week_number: `text-content-presentation-global-primary text-[12px] px-1`,
         month_caption: `flex items-center justify-center`,
         caption_label: `text-content-presentation-global-primary text-[14px] pt-[2px]`,
         months: `flex items-end justify-center gap-4 flex-wrap`,
@@ -97,6 +97,6 @@ const Calender = ({
     />
   )
 }
-Calender.displayName = "Calender"
+Calendar.displayName = "Calendar"
 
-export { Calender }
+export { Calendar }

package/lib/components/DatePicker.tsx

@@ -1,15 +1,28 @@
-import React, { useState, forwardRef, ForwardedRef, HTMLAttributes, useEffect, cloneElement, isValidElement } from 'react';
-import { Popover, PopoverContent, PopoverTrigger } from './Popover';
-import { Calender } from './Calender';
-import { Input, Trilling } from './Input';
-import { ActionButton } from './ActionButton';
-import { Group } from './Input'; import { DateRange } from 'react-day-picker';
-import Picker, { PickerValue } from 'torch-react-mobile-picker';
+import React, {
+    useState,
+    forwardRef,
+    ForwardedRef,
+    HTMLAttributes,
+    useEffect,
+    cloneElement,
+    isValidElement,
+} from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+import { Calendar } from "./Calendar";
+import { Input, Trilling } from "./Input";
+import { ActionButton } from "./ActionButton";
+import { Group } from "./Input";
+import { DateRange } from "react-day-picker";
+import Picker, { PickerValue } from "torch-react-mobile-picker";
 
-import { applyTimeToDateValue, formatDateValueToString, TimePickerValue } from '../utils/dateFormat';
-import { InputField } from './InputField';
+import {
+    applyTimeToDateValue,
+    formatDateValueToString,
+    TimePickerValue,
+} from "../utils/dateFormat";
+import { InputField } from "./InputField";
 
-export type CalendarProps = React.ComponentProps<typeof Calender>
+export type CalendarProps = React.ComponentProps<typeof Calendar>;
 
 interface DatePickerProps extends HTMLAttributes<HTMLInputElement> {
     mode?: "single" | "multiple" | "range";
@@ -22,75 +35,91 @@ interface DatePickerProps extends HTMLAttributes<HTMLInputElement> {
     dateFormat?: string;
     calendarProps?: CalendarProps;
     timePicker?: boolean;
+    value?: any;
 }
 
-export const DatePicker = forwardRef(({
-    size = "M",
-    min,
-    max,
-    selected,
-    mode = "single",
-    onChange,
-    showWeekNumber = false,
-    captionLayout = "dropdown",
-    dateFormat = "yyyy/MM/dd",
-    calendarProps,
-    timePicker = false,
-    children,
-    ...props
-}: DatePickerProps, ref: ForwardedRef<HTMLInputElement>) => {
+export const DatePicker = forwardRef(
+    (
+        {
+            size = "M",
+            min,
+            max,
+            mode = "single",
+            onChange,
+            showWeekNumber = false,
+            captionLayout = "dropdown",
+            dateFormat = "yyyy/MM/dd",
+            calendarProps,
+            timePicker = false,
+            children,
+            value = new Date(),
+            ...props
+        }: DatePickerProps,
+        ref: ForwardedRef<HTMLInputElement>
+    ) => {
+        const initialDate =
+            mode == "multiple"
+                ? [value]
+                : mode == "range"
+                    ? { from: value, to: value }
+                    : value;
+        const [date, setDate] = useState<Date[] | Date | DateRange | undefined>(initialDate);
+        const [pickerValue, setPickerValue] = useState<TimePickerValue>({
+            hour: (date instanceof Date ? date.getHours() : 12).toString(),
+            minute: (date instanceof Date ? date.getMinutes() : 0)
+                .toString()
+                .padStart(2, "0"),
+            time: date instanceof Date && date.getHours() < 12 ? "AM" : "PM",
+        });
+        const [isOpen, setIsOpen] = useState(false);
 
-    const fallbackDate = mode == "multiple" ? [new Date()] : mode == "range" ? { from: new Date(), to: new Date() } : new Date();
-    const [date, setDate] = useState<Date[] | Date | DateRange | undefined>(selected || fallbackDate);
-    const [pickerValue, setPickerValue] = useState<TimePickerValue>({
-        hour: "12",
-        minute: "00",
-        time: "AM"
-    });
-    const [isOpen, setIsOpen] = useState(false);
+        // Call the onChange function when the date or picker value changes
+        useEffect(() => {
+            onChange?.({
+                target: {
+                    value: date,
+                },
+            } as any);
+        }, [date, pickerValue]);
 
-    // Call the onChange function when the date or picker value changes
-    useEffect(() => {
-        onChange?.({
-            target: {
-                value: date
-            }
-        } as any);
-    }, [date, pickerValue]);
-
-    // Disable body scroll when popover is open
-    useEffect(() => {
-        if (isOpen) {
-            // Save the current overflow style
-            const originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
+        // Disable body scroll when popover is open
+        useEffect(() => {
+            if (isOpen) {
+                // Save the current overflow style
+                const originalOverflow = document.body.style.overflow;
+                document.body.style.overflow = "hidden";
 
-            // Cleanup function to restore original overflow style
-            return () => {
-                document.body.style.overflow = originalOverflow;
-            };
-        }
-    }, [isOpen]);
-    const formattedValue = formatDateValueToString(date, pickerValue, dateFormat);
+                // Cleanup function to restore original overflow style
+                return () => {
+                    document.body.style.overflow = originalOverflow;
+                };
+            }
+        }, [isOpen]);
+        const formattedValue = formatDateValueToString(
+            date,
+            pickerValue,
+            dateFormat
+        );
 
-    return (
-        <Popover onOpenChange={setIsOpen}>
-            <PopoverTrigger asChild  >
-                {/* Clone the children element and pass the formatted value to the input element */}
-                {
-                    isValidElement(children) ?
+        return (
+            <Popover onOpenChange={setIsOpen}>
+                <PopoverTrigger asChild>
+                    {/* Clone the children element and pass the formatted value to the input element */}
+                    {isValidElement(children) ? (
                         cloneElement(children as React.ReactElement<HTMLInputElement>, {
-                            value: (children as React.ReactElement<HTMLInputElement>).props.value ?? formattedValue,
+                            value:
+                                (children as React.ReactElement<HTMLInputElement>).props
+                                    .value ?? formattedValue,
                             type: "input",
-                            readOnly: true
+                            readOnly: true,
                         })
-                        :
+                    ) : (
                         /* If the children is not a valid element, Show the default input */
                         <InputField
                             readOnly
                             type="input"
                             childrenSide={
-                                <ActionButton type='button' size={"M"}>
+                                <ActionButton type="button" size={"M"}>
                                     <i className="ri-calendar-event-fill"></i>
                                 </ActionButton>
                             }
@@ -98,39 +127,41 @@ export const DatePicker = forwardRef(({
                             value={formattedValue}
                             ref={ref}
                         />
-                }
-            </PopoverTrigger >
-            <PopoverContent data-theme="dark" className='!h-fit max-h-[fit-content] p-0 border-none rounded-[12px] flex flex-col sm:flex-row'>
-                <Calender
-                    {...calendarProps}
-                    captionLayout={captionLayout}
-                    showWeekNumber={showWeekNumber}
-                    mode={mode as any}
-                    selected={date as any}
-                    onSelect={(e: any) => {
-                        setDate(applyTimeToDateValue(e, pickerValue));
-                    }}
-                    min={mode != "single" ? min : undefined}
-                    max={mode != "single" ? max : undefined}
-                />
-                {timePicker && (
-                    <TimePicker
-                        value={pickerValue}
-                        onChange={(value: TimePickerValue) => {
-                            setPickerValue(value);
-                            setDate(applyTimeToDateValue(date, value));
+                    )}
+                </PopoverTrigger>
+                <PopoverContent
+                    data-theme="dark"
+                    className="!h-fit max-h-[fit-content] p-0 border-none rounded-[12px] flex flex-col sm:flex-row "
+                >
+                    <Calendar
+                        {...calendarProps}
+                        captionLayout={captionLayout}
+                        showWeekNumber={showWeekNumber}
+                        mode={mode as any}
+                        selected={date as any}
+                        onSelect={(e: any) => {
+                            setDate(applyTimeToDateValue(e, pickerValue));
                         }}
+                        min={mode != "single" ? min : undefined}
+                        max={mode != "single" ? max : undefined}
                     />
-                )}
-            </PopoverContent>
-        </Popover>
-    )
-});
+                    {timePicker && (
+                        <TimePicker
+                            value={pickerValue}
+                            onChange={(value: TimePickerValue) => {
+                                setPickerValue(value);
+                                setDate(applyTimeToDateValue(date, value));
+                            }}
+                        />
+                    )}
+                </PopoverContent>
+            </Popover>
+        );
+    }
+);
 
 DatePicker.displayName = "DatePicker";
 
-
-
 interface TimePickerProps {
     value: TimePickerValue;
     onChange: (value: TimePickerValue) => void;
@@ -138,7 +169,7 @@ interface TimePickerProps {
 
 const TimePicker = ({ value, onChange }: TimePickerProps) => {
     return (
-        <div className='relative w-full sm:w-[189px]'>
+        <div className="relative w-full sm:w-[189px]" data-theme="dark">
             <Picker
                 className="flex-1"
                 selectContainerClassName="bg-background-system-body-tertiary z-[-1] rounded-[8px]"
@@ -148,11 +179,18 @@ const TimePicker = ({ value, onChange }: TimePickerProps) => {
                 }}
                 wheelMode="normal"
             >
-                <span className='absolute left-0 top-1/2 -translate-y-1/2 w-full h-[20px] flex justify-center items-center text-white text-[30px] pr-[55px] pb-[5px]' >:</span>
+                <span className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-[20px] flex justify-center items-center text-white text-[30px] pr-[55px] pb-[5px]">
+                    :
+                </span>
                 <Picker.Column name="hour">
                     {Array.from({ length: 12 }, (_, i) => i + 1).map((hour) => (
                         <Picker.Item key={hour + "hour"} value={hour}>
-                            <div className="typography-display-small-semibold flex gap-1 whitespace-nowrap text-content-presentation-global-primary pl-[25px]"> <p className='text-content-presentation-global-primary'>{hour}</p></div>
+                            <div className="typography-display-small-semibold flex gap-1 whitespace-nowrap text-content-presentation-global-primary pl-[25px]">
+                                {" "}
+                                <p className="text-content-presentation-global-primary">
+                                    {hour}
+                                </p>
+                            </div>
                         </Picker.Item>
                     ))}
                 </Picker.Column>
@@ -160,7 +198,7 @@ const TimePicker = ({ value, onChange }: TimePickerProps) => {
                     {Array.from({ length: 60 }, (_, i) => i).map((minute) => (
                         <Picker.Item key={minute + "minute"} value={minute}>
                             <div className="typography-display-small-semibold text-content-presentation-global-primary">
-                                {minute.toString().padStart(2, '0')}
+                                {minute.toString().padStart(2, "0")}
                             </div>
                         </Picker.Item>
                     ))}
@@ -168,11 +206,13 @@ const TimePicker = ({ value, onChange }: TimePickerProps) => {
                 <Picker.Column name="time">
                     {["AM", "PM"].map((time) => (
                         <Picker.Item key={time + "time"} value={time}>
-                            <div className="typography-display-small-semibold text-content-presentation-global-primary pr-[30px]">{time}</div>
+                            <div className="typography-display-small-semibold text-content-presentation-global-primary pr-[30px]">
+                                {time}
+                            </div>
                         </Picker.Item>
                     ))}
                 </Picker.Column>
             </Picker>
         </div>
-    )
-}
+    );
+};

package/lib/components/Input.tsx

@@ -183,8 +183,8 @@ export const GroupStyles = cva(
                 ],
             },
             size: {
-                S: ["h-[30px]", "rounded-[6px] [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]"],
-                M: ["h-[40px]", "rounded-[8px] [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]"],
+                S: ["h-[30px] min-h-[30px]", "rounded-[6px] [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]"],
+                M: ["h-[40px] min-h-[40px]", "rounded-[8px] [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]"],
             },
             error: {
                 true: [

package/lib/components/SimpleSelect.tsx

@@ -91,7 +91,7 @@ const SimpleSelectValue = ({
                 onChange={handleInputChange}
                 className={cn([
                     "bg-transparent",
-                    "text-white",
+                    "text-content-system-global-primary",
                     "h-[24px]",
                     "border-none",
                     "outline-none",

package/lib/components/SlideDatePicker.tsx

@@ -1,187 +1,187 @@
-import { cloneElement, ComponentProps, forwardRef, isValidElement, useState, useEffect } from 'react';
-import { getDaysInMonth } from 'date-fns';
-import Picker from 'torch-react-mobile-picker';
-import { Popover, PopoverContent, PopoverTrigger } from './Popover';
-import { InputField } from './InputField';
-import { ActionButton } from './ActionButton';
-import { formatDateValueToString } from '@/utils/dateFormat';
-
-function getDayArray(year: number, month: number): string[] {
-  const dayCount = getDaysInMonth(new Date(year, month - 1));
-  return Array.from({ length: dayCount }, (_, i) => String(i + 1).padStart(2, '0'));
-}
-
-interface SlideDatePickerProps extends Omit<ComponentProps<typeof InputField>, 'onChange'> {
-  onChange?: (e: any) => void;
-  theme?: "dark" | "light" | "default";
-  dateFormat?: string;
-}
-
-type SlideVlaues = {
-  year: string,
-  month: string,
-  day: string,
-  hour?: string,
-  minute?: string,
-  time?: string
-}
-
-export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps>((
-  {
-    theme = "dark",
-    onChange,
-    dateFormat = "yyyy/MM/dd",
-    children,
-    ...props
-  }, forwardedRef) => {
-
-  const today = new Date();
-  const defaultPickerValue = {
-    year: String(today.getFullYear()),
-    month: String(today.getMonth() + 1).padStart(2, '0'),
-    day: String(today.getDate()).padStart(2, '0'),
-    hour: "00",
-    minute: "00",
-    time: "AM"
-  };
-
-  const [pickerValue, setPickerValue] = useState<SlideVlaues>(defaultPickerValue);
-  const [date, setDate] = useState<Date>(new Date());
-  const [isOpen, setIsOpen] = useState(false);
-  const currentYear = new Date().getFullYear();
-  const years = Array.from({ length: 200 }, (_, i) => `${currentYear - 100 + i}`);
-  const months = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, ''));
-  const days = getDayArray(Number(pickerValue.year), Number(pickerValue.month));
-  const monthsNames = [
-    "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December",
-  ];
-
-  const handlePickerChange = (newValue: SlideVlaues, key: string) => {
-    let { year, month, day, hour, minute, time } = newValue;
-
-    if (key === 'year' || key === 'month') {
-      const newDayArray = getDayArray(Number(year), Number(month));
-      day = newDayArray.includes(day as string) ? day : newDayArray[newDayArray.length - 1];
-    }
-
-    const updatedValue = { year, month, day, hour, minute, time };
-    setPickerValue(updatedValue);
-
-    // Create a Date object from the updated value
-    const newDate = new Date(
-      Number(updatedValue.year),
-      Number(updatedValue.month) - 1, // Month is 0-indexed in JavaScript Date
-      Number(updatedValue.day)
-    );
-    setDate(newDate);
-
-    // Call the onChange callback with the Date object
-    if (onChange) {
-      onChange({
-        target: {
-          value: newDate
-        }
-      } as any);
-    }
-  };
-
-  const formattedValue = formatDateValueToString(date, {
-    hour: pickerValue.hour ?? defaultPickerValue.hour,
-    minute: pickerValue.minute ?? defaultPickerValue.minute,
-    time: pickerValue.time ?? defaultPickerValue.time
-  }, dateFormat);
-
-  // Disable body scroll when popover is open
-  useEffect(() => {
-    if (isOpen) {
-      // Save the current overflow style
-      const originalOverflow = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
-
-      // Cleanup function to restore original overflow style
-      return () => {
-        document.body.style.overflow = originalOverflow;
-      };
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (onChange) {
-      onChange({
-        target: {
-          value: date
-        }
-      } as any);
-    }
-  }, [formattedValue]);
-
-  return (
-    <Popover onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild data-theme={theme} className='w-full flex-1' >
-        {
-          isValidElement(children) ?
-            cloneElement(children as React.ReactElement<HTMLInputElement>, {
-              value: (children as React.ReactElement<HTMLInputElement>).props.value ?? formattedValue,
-              type: "input",
-              readOnly: true
-            })
-            :
-            /* If the children is not a valid element, Show the default input */
-            <InputField
-              readOnly
-              type="input"
-              childrenSide={
-                <ActionButton type='button' size={"M"}>
-                  <i className="ri-calendar-event-fill"></i>
-                </ActionButton>
-              }
-              {...props}
-              value={formattedValue}
-              ref={forwardedRef}
-            />
-        }
-      </PopoverTrigger>
-      <PopoverContent data-theme={theme} dir="ltr" variant={props.variant} className="overflow-hidden w-[285px] flex justify-center items-center p-[6px] pt-[30px]">
-        <div className="flex justify-evenly items-center w-full absolute top-0 py-[6px]">
-          <p className="text-content-system-global-secondary typography-headers-medium-regular">Year</p>
-          <div className="flex justify-center items-center self-center">
-            <span className="h-[13px] w-[1px] bg-border-system-global-secondary rounded-[3px]"></span>
-            <p className="text-content-system-global-secondary typography-headers-medium-regular px-[18px]">Month</p>
-            <span className="h-[13px] w-[1px] bg-border-system-global-secondary rounded-[3px]"></span>
-          </div>
-          <p className="text-content-system-global-secondary typography-headers-medium-regular">Day</p>
-        </div>
-        <Picker
-          className="flex-1"
-          selectContainerClassName="bg-background-system-body-tertiary z-[-1] rounded-[8px]"
-          value={pickerValue}
-          onChange={handlePickerChange}
-          wheelMode="natural"
-        >
-          <Picker.Column name="year" >
-            {years.map((year) => (
-              <Picker.Item key={year} value={year}>
-                <div className="typography-display-small-semibold text-content-presentation-action-light-primary">{year}</div>
-              </Picker.Item>
-            ))}
-          </Picker.Column>
-          <Picker.Column name="month">
-            {months.map((month, i) => (
-              <Picker.Item key={month} value={month}>
-                <div className="typography-display-small-semibold flex gap-1 whitespace-nowrap text-content-presentation-action-light-primary"> <p className='text-content-presentation-action-light-secondary'>{monthsNames[i].substring(0, 3)} - </p>{month}</div>
-              </Picker.Item>
-            ))}
-          </Picker.Column>
-          <Picker.Column name="day">
-            {days.map((day) => (
-              <Picker.Item key={day} value={day}>
-                <div className="typography-display-small-semibold text-content-presentation-action-light-primary">{day}</div>
-              </Picker.Item>
-            ))}
-          </Picker.Column>
-        </Picker>
-      </PopoverContent>
-    </Popover>
-  );
-});
+import { cloneElement, ComponentProps, forwardRef, isValidElement, useState, useEffect } from 'react';
+import { getDaysInMonth } from 'date-fns';
+import Picker from 'torch-react-mobile-picker';
+import { Popover, PopoverContent, PopoverTrigger } from './Popover';
+import { InputField } from './InputField';
+import { ActionButton } from './ActionButton';
+import { formatDateValueToString } from '@/utils/dateFormat';
+
+function getDayArray(year: number, month: number): string[] {
+  const dayCount = getDaysInMonth(new Date(year, month - 1));
+  return Array.from({ length: dayCount }, (_, i) => String(i + 1).padStart(2, '0'));
+}
+
+interface SlideDatePickerProps extends Omit<ComponentProps<typeof InputField>, 'onChange'> {
+  onChange?: (e: any) => void;
+  theme?: "dark" | "light" | "default";
+  dateFormat?: string;
+}
+
+type SlideVlaues = {
+  year: string,
+  month: string,
+  day: string,
+  hour?: string,
+  minute?: string,
+  time?: string
+}
+
+export const SlideDatePicker = forwardRef<HTMLInputElement, SlideDatePickerProps>((
+  {
+    theme = "dark",
+    onChange,
+    dateFormat = "yyyy/MM/dd",
+    children,
+    ...props
+  }, forwardedRef) => {
+
+  const today = new Date();
+  const defaultPickerValue = {
+    year: String(today.getFullYear()),
+    month: String(today.getMonth() + 1).padStart(2, '0'),
+    day: String(today.getDate()).padStart(2, '0'),
+    hour: "00",
+    minute: "00",
+    time: "AM"
+  };
+
+  const [pickerValue, setPickerValue] = useState<SlideVlaues>(defaultPickerValue);
+  const [date, setDate] = useState<Date>(new Date());
+  const [isOpen, setIsOpen] = useState(false);
+  const currentYear = new Date().getFullYear();
+  const years = Array.from({ length: 200 }, (_, i) => `${currentYear - 100 + i}`);
+  const months = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, ''));
+  const days = getDayArray(Number(pickerValue.year), Number(pickerValue.month));
+  const monthsNames = [
+    "January", "February", "March", "April", "May", "June",
+    "July", "August", "September", "October", "November", "December",
+  ];
+
+  const handlePickerChange = (newValue: SlideVlaues, key: string) => {
+    let { year, month, day, hour, minute, time } = newValue;
+
+    if (key === 'year' || key === 'month') {
+      const newDayArray = getDayArray(Number(year), Number(month));
+      day = newDayArray.includes(day as string) ? day : newDayArray[newDayArray.length - 1];
+    }
+
+    const updatedValue = { year, month, day, hour, minute, time };
+    setPickerValue(updatedValue);
+
+    // Create a Date object from the updated value
+    const newDate = new Date(
+      Number(updatedValue.year),
+      Number(updatedValue.month) - 1, // Month is 0-indexed in JavaScript Date
+      Number(updatedValue.day)
+    );
+    setDate(newDate);
+
+    // Call the onChange callback with the Date object
+    if (onChange) {
+      onChange({
+        target: {
+          value: newDate
+        }
+      } as any);
+    }
+  };
+
+  const formattedValue = formatDateValueToString(date, {
+    hour: pickerValue.hour ?? defaultPickerValue.hour,
+    minute: pickerValue.minute ?? defaultPickerValue.minute,
+    time: pickerValue.time ?? defaultPickerValue.time
+  }, dateFormat);
+
+  // Disable body scroll when popover is open
+  useEffect(() => {
+    if (isOpen) {
+      // Save the current overflow style
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+
+      // Cleanup function to restore original overflow style
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange({
+        target: {
+          value: date
+        }
+      } as any);
+    }
+  }, [formattedValue]);
+
+  return (
+    <Popover onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild data-theme={theme} className='w-full flex-1' >
+        {
+          isValidElement(children) ?
+            cloneElement(children as React.ReactElement<HTMLInputElement>, {
+              value: (children as React.ReactElement<HTMLInputElement>).props.value ?? formattedValue,
+              type: "input",
+              readOnly: true
+            })
+            :
+            /* If the children is not a valid element, Show the default input */
+            <InputField
+              readOnly
+              type="input"
+              childrenSide={
+                <ActionButton type='button' size={"M"}>
+                  <i className="ri-calendar-event-fill"></i>
+                </ActionButton>
+              }
+              {...props}
+              value={formattedValue}
+              ref={forwardedRef}
+            />
+        }
+      </PopoverTrigger>
+      <PopoverContent data-theme={theme} dir="ltr" variant={props.variant} className="overflow-hidden w-[285px] flex justify-center items-center p-[6px] pt-[30px]">
+        <div className="flex justify-evenly items-center w-full absolute top-0 py-[6px]">
+          <p className="text-content-system-global-secondary typography-headers-medium-regular">Year</p>
+          <div className="flex justify-center items-center self-center">
+            <span className="h-[13px] w-[1px] bg-border-system-global-secondary rounded-[3px]"></span>
+            <p className="text-content-system-global-secondary typography-headers-medium-regular px-[18px]">Month</p>
+            <span className="h-[13px] w-[1px] bg-border-system-global-secondary rounded-[3px]"></span>
+          </div>
+          <p className="text-content-system-global-secondary typography-headers-medium-regular">Day</p>
+        </div>
+        <Picker
+          className="flex-1"
+          selectContainerClassName="bg-background-system-body-tertiary z-[-1] rounded-[8px]"
+          value={pickerValue}
+          onChange={handlePickerChange}
+          wheelMode="natural"
+        >
+          <Picker.Column name="year" >
+            {years.map((year) => (
+              <Picker.Item key={year} value={year}>
+                <div className="typography-display-small-semibold text-content-presentation-action-light-primary">{year}</div>
+              </Picker.Item>
+            ))}
+          </Picker.Column>
+          <Picker.Column name="month">
+            {months.map((month, i) => (
+              <Picker.Item key={month} value={month}>
+                <div className="typography-display-small-semibold flex gap-1 whitespace-nowrap text-content-presentation-action-light-primary"> <p className='text-content-presentation-action-light-secondary'>{monthsNames[i].substring(0, 3)} - </p>{month}</div>
+              </Picker.Item>
+            ))}
+          </Picker.Column>
+          <Picker.Column name="day">
+            {days.map((day) => (
+              <Picker.Item key={day} value={day}>
+                <div className="typography-display-small-semibold text-content-presentation-action-light-primary">{day}</div>
+              </Picker.Item>
+            ))}
+          </Picker.Column>
+        </Picker>
+      </PopoverContent>
+    </Popover>
+  );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "license": "MIT",
   "files": [