torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/Skeleton.tsx

@@ -1,15 +1,12 @@
-import { cn } from "../utils/cn"
+import { cn } from "../utils/cn";
 
-function Skeleton({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-    return (
-        <div
-            className={cn("animate-pulse rounded-md bg-border-presentation-global-primary", className)}
-            {...props}
-        />
-    )
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-border-presentation-global-primary", className)}
+      {...props}
+    />
+  );
 }
 
-export { Skeleton }
+export { Skeleton };

package/apps/lib/components/SlideDatePicker.tsx

@@ -1,193 +1,242 @@
-import { cloneElement, ComponentProps, forwardRef, isValidElement, useState, useEffect, useRef } 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';
+import {
+  cloneElement,
+  ComponentProps,
+  forwardRef,
+  isValidElement,
+  useState,
+  useEffect,
+  useRef,
+} 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'));
+  return Array.from({ length: dayCount }, (_, i) => String(i + 1).padStart(2, "0"));
 }
 
-interface SlideDatePickerProps extends Omit<ComponentProps<typeof InputField>, 'onChange'> {
-  onChange?: (e: any) => void;
+interface SlideDatePickerProps extends Omit<
+  ComponentProps<typeof InputField>,
+  "onChange" | "value"
+> {
+  onChange?: (e: { target: { value: Date } }) => void;
   theme?: "dark" | "light" | "default";
   dateFormat?: string;
-  value?: any;
+  value?: Date;
 }
 
 type SlideValues = {
-  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,
-    value = new Date(),
-    ...props
-  }, forwardedRef) => {
-
-  const today = value
-  const defaultPickerValue = {
-    year: String(today.getFullYear()),
-    month: String(today.getMonth() + 1),
-    day: String(today.getDate()),
-    hour: String(today.getHours()),
-    minute: String(today.getMinutes()),
-    time: today.getHours() < 12 ? "AM" : "PM"
-  };
-
-  const [pickerValue, setPickerValue] = useState<SlideValues>(defaultPickerValue);
-  const [date, setDate] = useState<Date>(value);
-  const [isOpen, setIsOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-
-  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: SlideValues, 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)
+  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, value = new Date(), ...props },
+    forwardedRef,
+  ) => {
+    const today = value;
+    const defaultPickerValue = {
+      year: String(today.getFullYear()),
+      month: String(today.getMonth() + 1),
+      day: String(today.getDate()),
+      hour: String(today.getHours()),
+      minute: String(today.getMinutes()),
+      time: today.getHours() < 12 ? "AM" : "PM",
+    };
+
+    const [pickerValue, setPickerValue] = useState<SlideValues>(defaultPickerValue);
+    const [date, setDate] = useState<Date>(value);
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+
+    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: SlideValues, key: string) => {
+      const { year, month, hour, minute, time } = newValue;
+      let { day } = 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,
+          },
+        });
+      }
+    };
+
+    const formattedValue = formatDateValueToString(
+      date,
+      {
+        hour: pickerValue.hour ?? defaultPickerValue.hour,
+        minute: pickerValue.minute ?? defaultPickerValue.minute,
+        time: pickerValue.time ?? defaultPickerValue.time,
+      },
+      dateFormat,
     );
-    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 ref={triggerRef} asChild data-theme={theme} className='w-full flex-1' >
-        {
-          isValidElement(children) ?
+
+    // 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,
+          },
+        });
+      }
+    }, [formattedValue]);
+
+    return (
+      <Popover onOpenChange={setIsOpen}>
+        <PopoverTrigger ref={triggerRef} 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,
+              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"
               {...props}
               childrenSide={
-                <ActionButton type='button' size={"M"} onClick={() => {
-                  triggerRef.current?.click();
-                }}>
+                <ActionButton
+                  type="button"
+                  size={"M"}
+                  onClick={() => {
+                    triggerRef.current?.click();
+                  }}
+                >
                   <i className="ri-calendar-event-fill"></i>
                 </ActionButton>
               }
               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"
+          )}
+        </PopoverTrigger>
+        <PopoverContent
+          data-theme={theme}
+          dir="ltr"
+          variant={props.variant}
+          className="overflow-hidden w-[285px] flex justify-center items-center p-[6px] pt-[30px]"
         >
-          <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>
-  );
-});
+          <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>
+    );
+  },
+);
+
+SlideDatePicker.displayName = "SlideDatePicker";

package/apps/lib/components/SpinLoading.tsx

@@ -48,7 +48,7 @@ export function SpinLoading({ className, theme = "light", size = "M", ...props }
       />
       <section
         className={cn(
-          "absolute flex justify-center items-center top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          "absolute flex justify-center items-center top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
         )}
       >
         {props.children}
@@ -57,9 +57,6 @@ export function SpinLoading({ className, theme = "light", size = "M", ...props }
   );
 }
 
-
-
-
 const DarkRingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
   <svg
     {...props}
@@ -71,18 +68,8 @@ const DarkRingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
     textRendering="geometricPrecision"
   >
     <defs>
-      <filter
-        id="e7Ze8cPfGzd3-filter"
-        x="-150%"
-        width="400%"
-        y="-150%"
-        height="400%"
-      >
-        <feGaussianBlur
-          id="e7Ze8cPfGzd3-filter-blur-0"
-          stdDeviation="4,4"
-          result="result"
-        />
+      <filter id="e7Ze8cPfGzd3-filter" x="-150%" width="400%" y="-150%" height="400%">
+        <feGaussianBlur id="e7Ze8cPfGzd3-filter-blur-0" stdDeviation="4,4" result="result" />
       </filter>
       <linearGradient
         id="e7Ze8cPfGzd4-fill"
@@ -94,25 +81,11 @@ const DarkRingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
         gradientUnits="userSpaceOnUse"
         gradientTransform="translate(0 0)"
       >
-        <stop
-          id="e7Ze8cPfGzd4-fill-0"
-          offset="0%"
-          stopColor="rgba(83,23,255,0)"
-        />
+        <stop id="e7Ze8cPfGzd4-fill-0" offset="0%" stopColor="rgba(83,23,255,0)" />
         <stop id="e7Ze8cPfGzd4-fill-1" offset="100%" stopColor="#b900d8" />
       </linearGradient>
-      <filter
-        id="e7Ze8cPfGzd5-filter"
-        x="-150%"
-        width="400%"
-        y="-150%"
-        height="400%"
-      >
-        <feGaussianBlur
-          id="e7Ze8cPfGzd5-filter-blur-0"
-          stdDeviation="8,8"
-          result="result"
-        />
+      <filter id="e7Ze8cPfGzd5-filter" x="-150%" width="400%" y="-150%" height="400%">
+        <feGaussianBlur id="e7Ze8cPfGzd5-filter-blur-0" stdDeviation="8,8" result="result" />
       </filter>
       <linearGradient
         id="e7Ze8cPfGzd6-fill"
@@ -124,11 +97,7 @@ const DarkRingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
         gradientUnits="userSpaceOnUse"
         gradientTransform="translate(0 0)"
       >
-        <stop
-          id="e7Ze8cPfGzd6-fill-0"
-          offset="0%"
-          stopColor="rgba(83,23,255,0)"
-        />
+        <stop id="e7Ze8cPfGzd6-fill-0" offset="0%" stopColor="rgba(83,23,255,0)" />
         <stop id="e7Ze8cPfGzd6-fill-1" offset="100%" stopColor="#b900d8" />
       </linearGradient>
       <linearGradient
@@ -141,11 +110,7 @@ const DarkRingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
         gradientUnits="userSpaceOnUse"
         gradientTransform="translate(0 0)"
       >
-        <stop
-          id="e7Ze8cPfGzd7-fill-0"
-          offset="0%"
-          stopColor="rgba(83,23,255,0.3)"
-        />
+        <stop id="e7Ze8cPfGzd7-fill-0" offset="0%" stopColor="rgba(83,23,255,0.3)" />
         <stop id="e7Ze8cPfGzd7-fill-1" offset="100%" stopColor="#e75cff" />
       </linearGradient>
     </defs>
@@ -174,14 +139,33 @@ const DarkRingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
   </svg>
 );
 
-
-
 const RingLoadingIcon = (props: HTMLAttributes<HTMLOrSVGElement>) => (
-  <svg {...props} width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M200 100C200 155.228 155.228 200 100 200C44.7715 200 0 155.228 0 100C0 44.7715 44.7715 0 100 0C155.228 0 200 44.7715 200 100ZM5 100C5 152.467 47.5329 195 100 195C152.467 195 195 152.467 195 100C195 47.5329 152.467 5 100 5C47.5329 5 5 47.5329 5 100Z" fill="black" fillOpacity="0.1" />
-    <path d="M197.5 100C198.881 100 200.003 98.8805 199.969 97.5002C199.662 85.22 197.094 73.0938 192.388 61.7317C187.362 49.5991 179.997 38.5752 170.711 29.2893C161.425 20.0035 150.401 12.6375 138.268 7.61205C126.906 2.90567 114.78 0.338305 102.5 0.031247C101.119 -0.00326585 100 1.11929 100 2.5C100 3.88071 101.12 4.99656 102.5 5.03289C114.123 5.33884 125.599 7.77635 136.355 12.2314C147.881 17.0056 158.354 24.0033 167.175 32.8249C175.997 41.6464 182.994 52.1191 187.769 63.6451C192.224 74.4006 194.661 85.8767 194.967 97.5002C195.003 98.8805 196.119 100 197.5 100Z" fill="url(#paint0_linear_10856_138364)" />
+  <svg
+    {...props}
+    width="200"
+    height="200"
+    viewBox="0 0 200 200"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M200 100C200 155.228 155.228 200 100 200C44.7715 200 0 155.228 0 100C0 44.7715 44.7715 0 100 0C155.228 0 200 44.7715 200 100ZM5 100C5 152.467 47.5329 195 100 195C152.467 195 195 152.467 195 100C195 47.5329 152.467 5 100 5C47.5329 5 5 47.5329 5 100Z"
+      fill="black"
+      fillOpacity="0.1"
+    />
+    <path
+      d="M197.5 100C198.881 100 200.003 98.8805 199.969 97.5002C199.662 85.22 197.094 73.0938 192.388 61.7317C187.362 49.5991 179.997 38.5752 170.711 29.2893C161.425 20.0035 150.401 12.6375 138.268 7.61205C126.906 2.90567 114.78 0.338305 102.5 0.031247C101.119 -0.00326585 100 1.11929 100 2.5C100 3.88071 101.12 4.99656 102.5 5.03289C114.123 5.33884 125.599 7.77635 136.355 12.2314C147.881 17.0056 158.354 24.0033 167.175 32.8249C175.997 41.6464 182.994 52.1191 187.769 63.6451C192.224 74.4006 194.661 85.8767 194.967 97.5002C195.003 98.8805 196.119 100 197.5 100Z"
+      fill="url(#paint0_linear_10856_138364)"
+    />
     <defs>
-      <linearGradient id="paint0_linear_10856_138364" x1="3.4045" y1="-9.09091" x2="225.705" y2="19.8973" gradientUnits="userSpaceOnUse">
+      <linearGradient
+        id="paint0_linear_10856_138364"
+        x1="3.4045"
+        y1="-9.09091"
+        x2="225.705"
+        y2="19.8973"
+        gradientUnits="userSpaceOnUse"
+      >
         <stop stopColor="#D500F9" />
         <stop offset="1" stopColor="#5317FF" />
       </linearGradient>