torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/Popover.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { cva, VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import React, { useEffect, useRef } from "react";
@@ -12,21 +12,17 @@ interface LocalPopOverProps extends VariantProps<typeof popoverStyles> {
   overlayBlur?: boolean;
 }
 
-
 const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
-    className?: string
+    className?: string;
   }
 >(({ className, ...props }, ref) => (
   <PopoverPrimitive.Trigger
     ref={ref}
-    className={cn(
-      "z-[20] transition-all duration-300 data-[state=open]:z-[49]",
-      className
-    )}
+    className={cn("z-[20] transition-all duration-300 data-[state=open]:z-[49]", className)}
     {...props}
   />
 ));
@@ -36,9 +32,9 @@ PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
-  LocalPopOverProps & {
-    theme?: Themes
-  }
+    LocalPopOverProps & {
+      theme?: Themes;
+    }
 >(
   (
     {
@@ -50,7 +46,7 @@ const PopoverContent = React.forwardRef<
       theme,
       ...props
     },
-    ref
+    ref,
   ) => (
     <PopoverPrimitive.Portal>
       {overlayBlur ? (
@@ -60,10 +56,7 @@ const PopoverContent = React.forwardRef<
             ref={ref}
             align={align}
             sideOffset={sideOffset}
-            className={cn(
-              popoverStyles({ variant, overlayBlur }),
-              className
-            )}
+            className={cn(popoverStyles({ variant, overlayBlur }), className)}
             {...props}
           />
         </div>
@@ -73,22 +66,18 @@ const PopoverContent = React.forwardRef<
           ref={ref}
           align={align}
           sideOffset={sideOffset}
-          className={cn(
-            popoverStyles({ variant, overlayBlur }),
-            className
-          )}
+          className={cn(popoverStyles({ variant, overlayBlur }), className)}
           {...props}
         />
       )}
     </PopoverPrimitive.Portal>
-  )
+  ),
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // Define the Props interface with a generic type parameter
 interface Props<T extends React.ElementType = "li">
-  extends React.HTMLAttributes<HTMLElement>,
-  VariantProps<typeof PopoverItemStyles> {
+  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof PopoverItemStyles> {
   asChild?: boolean;
   as?: T; // The `as` prop can be any valid HTML element or React component
 }
@@ -123,7 +112,7 @@ const PopoverItem = <T extends React.ElementType = "li">({
           size,
           active,
         }),
-        className
+        className,
       )}
       /// <reference path="" />
       ref={ref}
@@ -133,11 +122,8 @@ const PopoverItem = <T extends React.ElementType = "li">({
   );
 };
 
-
 export { Popover, PopoverTrigger, PopoverContent, PopoverItem };
 
-
-
 const PopoverItemStyles = cva(
   [
     "text-content-presentation-action-light-primary",
@@ -155,7 +141,6 @@ const PopoverItemStyles = cva(
     "transition-all",
     "ease-in-out",
     "duration-300",
-
   ],
   {
     variants: {
@@ -204,10 +189,7 @@ const PopoverItemStyles = cva(
       },
 
       disabled: {
-        true: [
-          "text-content-presentation-state-disabled",
-          "bg-white-00",
-        ],
+        true: ["text-content-presentation-state-disabled", "bg-white-00"],
       },
 
       active: {
@@ -231,7 +213,7 @@ const PopoverItemStyles = cva(
         className: ["text-content-presentation-state-negative"],
       },
     ],
-  }
+  },
 );
 
 const popoverStyles = cva(
@@ -270,5 +252,5 @@ const popoverStyles = cva(
         variant: "PresentationStyle",
       },
     },
-  }
+  },
 );

package/apps/lib/components/ProfileMenu.tsx

@@ -5,86 +5,81 @@ import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
 
 // Define the base styles and variants using `cva`
 export const profileItemStyles = cva(
-    "flex items-center justify-between group w-full p-[6px] outline-none rounded-[8px] fucus:bg-background-system-action-primary-selected active:bg-background-system-action-primary-selected transition-all ease-in-out duration-150",
-    {
-        variants: {
-            selected: {
-                true: "bg-background-system-action-primary-selected",
-            }
-        },
-    }
+  "flex items-center justify-between group w-full p-[6px] outline-none rounded-[8px] fucus:bg-background-system-action-primary-selected active:bg-background-system-action-primary-selected transition-all ease-in-out duration-150",
+  {
+    variants: {
+      selected: {
+        true: "bg-background-system-action-primary-selected",
+      },
+    },
+  },
 );
 
 interface ProfileItemProps extends HTMLAttributes<HTMLButtonElement> {
-    label: ReactNode;
-    selected?: boolean
-    icon?: string;
-    theme?: "dark" | "light" | "default";
-    popoverChildren?: ReactNode
-    overlayBlur?: boolean
+  label: ReactNode;
+  selected?: boolean;
+  icon?: string;
+  theme?: "dark" | "light" | "default";
+  popoverChildren?: ReactNode;
+  overlayBlur?: boolean;
 }
 
 export const ProfileMenu: React.FC<ProfileItemProps> = ({
-    label,
-    selected,
-    icon,
-    theme,
-    className,
-    popoverChildren,
-    overlayBlur,
-    ...props
+  label,
+  selected,
+  icon,
+  theme,
+  className,
+  popoverChildren,
+  overlayBlur,
+  ...props
 }) => {
+  const [isOpen, setIsOpen] = useState(selected);
+  const [dropdownWidth, setDropdownWidth] = useState(0);
 
-    const [isOpen, setIsOpen] = useState(selected);
-    const [dropdownWidth, setDropdownWidth] = useState(0);
+  useEffect(() => {
+    setIsOpen(selected);
+  }, [selected]);
+  return (
+    <Popover onOpenChange={(open) => setIsOpen(open)}>
+      <PopoverTrigger asChild>
+        <button
+          {...props}
+          data-theme={theme}
+          className={cn(profileItemStyles({ selected }), className)}
+          onPointerDown={(e: React.PointerEvent<HTMLButtonElement>) => {
+            props.onPointerDown && props.onPointerDown(e);
+            setDropdownWidth(e.currentTarget.offsetWidth);
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <div className="flex items-center">
+              <span className="h-[28px] w-[2px] bg-transparent group-hover:bg-[#9748FF] group-hover:mr-[6px] transition-all ease-in-out duration-150"></span>
+              <img className="w-[28px] h-[28px] rounded-full object-cover" src={icon} alt="" />
+            </div>
 
-    useEffect(() => {
-        setIsOpen(selected);
-    }, [selected])
-    return (
-        <Popover onOpenChange={(open) => setIsOpen(open)} >
-            <PopoverTrigger asChild>
-                <button
-                    {...props}
-                    data-theme={theme}
-                    className={cn(
-                        profileItemStyles({ selected }),
-                        className
-                    )}
-                    onPointerDown={(e: any) => {
-                        props.onPointerDown && props.onPointerDown(e);
-                        setDropdownWidth(e.currentTarget.offsetWidth);
-                    }}
-                >
-                    <div className="flex items-center gap-2">
-                        <div className="flex items-center">
-                            <span className="h-[28px] w-[2px] bg-transparent group-hover:bg-[#9748FF] group-hover:mr-[6px] transition-all ease-in-out duration-150"></span>
-                            <img className="w-[28px] h-[28px] rounded-full object-cover" src={icon} alt="" />
-                        </div>
+            <p className={cn("typography-body-medium-medium text-content-system-global-primary")}>
+              {label}
+            </p>
+          </div>
 
-                        <p
-                            className={cn(
-                                "typography-body-medium-medium text-content-system-global-primary",
-                            )}
-                        >
-                            {label}
-                        </p>
-                    </div>
-
-
-                    <i className={cn("ri-arrow-down-s-line text-[18px] text-content-system-global-primary group-hover:text-[#9748FF] transition-all ease-in-out duration-150", { "rotate-180": isOpen && popoverChildren })}></i>
-                </button>
-            </PopoverTrigger>
-            {
-                popoverChildren &&
-                <PopoverContent
-                    overlayBlur={overlayBlur}
-                    style={{ width: `${dropdownWidth}px` }}
-                    theme={theme}>
-                    {popoverChildren}
-                </PopoverContent>
-            }
-        </Popover>
-    );
+          <i
+            className={cn(
+              "ri-arrow-down-s-line text-[18px] text-content-system-global-primary group-hover:text-[#9748FF] transition-all ease-in-out duration-150",
+              { "rotate-180": isOpen && popoverChildren },
+            )}
+          ></i>
+        </button>
+      </PopoverTrigger>
+      {popoverChildren && (
+        <PopoverContent
+          overlayBlur={overlayBlur}
+          style={{ width: `${dropdownWidth}px` }}
+          theme={theme}
+        >
+          {popoverChildren}
+        </PopoverContent>
+      )}
+    </Popover>
+  );
 };
-

package/apps/lib/components/Radio.tsx

@@ -9,11 +9,7 @@ const RadioGroup = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
   return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-0.5", className)}
-      {...props}
-      ref={ref}
-    />
+    <RadioGroupPrimitive.Root className={cn("grid gap-0.5", className)} {...props} ref={ref} />
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;

package/apps/lib/components/RadioCard.tsx

@@ -3,7 +3,6 @@ import { cn } from "../utils/cn";
 import { Radio } from "./Radio";
 import { Card, CardContent, CardDescription, CardHeader } from "./Card";
 
-
 interface Props extends Omit<React.ComponentProps<typeof Radio>, "size" | "value"> {
   headerLabel?: ReactNode;
   id: string;
@@ -15,15 +14,14 @@ interface Props extends Omit<React.ComponentProps<typeof Radio>, "size" | "value
 }
 
 export const RadioCard = forwardRef<HTMLInputElement, Props>(
-  (
-    { headerLabel, description, disabled, className, id, children, theme, value, ...props },
-    ref
-  ) => {
+  ({ headerLabel, description, disabled, className, id, children, theme, value, ...props }) => {
     return (
       <Card
         data-theme={theme}
         htmlFor={id}
         as="label"
+        // The whole card is the radio's label — an interactive target, so it keeps the hover.
+        variant="clickable"
         className={cn(
           "relative [&>button]:data-[state=checked]:!border-none",
           '[&:has(button[data-state="checked"])]:border-border-presentation-state-focus',
@@ -31,37 +29,22 @@ export const RadioCard = forwardRef<HTMLInputElement, Props>(
           disabled && "!bg-background-presentation-action-disabled",
           disabled && "cursor-not-allowed",
           disabled && "hover:border-border-presentation-global-primary",
-          className
+          className,
         )}
       >
-        <section
-          className={"absolute top-0 left-0 w-full p-[10px] flex justify-end"}
-        >
-          <Radio
-            {...props}
-            value={value}
-            size="M"
-            id={id}
-            disabled={disabled}
-          />
+        <section className={"absolute top-0 left-0 w-full p-[10px] flex justify-end"}>
+          <Radio {...props} value={value} size="M" id={id} disabled={disabled} />
         </section>
 
-        <CardHeader >
-          {headerLabel}
-        </CardHeader>
+        <CardHeader>{headerLabel}</CardHeader>
 
-        <CardContent >
-          {description && (
-            <CardDescription >
-              {description}
-            </CardDescription>
-          )}
+        <CardContent>
+          {description && <CardDescription>{description}</CardDescription>}
           {children}
         </CardContent>
       </Card>
     );
-  }
+  },
 );
 
-
-RadioCard.displayName = "RadioCard"
+RadioCard.displayName = "RadioCard";

package/apps/lib/components/ScrollArea.tsx

@@ -1,52 +1,54 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "../utils/cn"
+import { cn } from "../utils/cn";
 
 const ScrollArea = React.forwardRef<
-    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-    <ScrollAreaPrimitive.Root
-        ref={ref}
-        className={cn(["relative overflow-hidden",
-            "border-border-presentation-global-primary",
-            "bg-background-presentation-form-base",
-            "shadow-[0px_0px_10px_0px_rgba(0,0,0,0.4),0px_4px_4px_0px_rgba(0,0,0,0.2)]",
-        ], className)}
-        {...props}
-    >
-        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-            {children}
-        </ScrollAreaPrimitive.Viewport>
-        <ScrollBar />
-        <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn(
+      [
+        "relative overflow-hidden",
+        "border-border-presentation-global-primary",
+        "bg-background-presentation-form-base",
+        "shadow-[0px_0px_10px_0px_rgba(0,0,0,0.4),0px_4px_4px_0px_rgba(0,0,0,0.2)]",
+      ],
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
-    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-        ref={ref}
-        orientation={orientation}
-        className={cn(
-            "flex touch-none select-none transition-colors",
-            orientation === "vertical" &&
-            "h-full w-2.5 border-l border-l-transparent p-[1px]",
-            orientation === "horizontal" &&
-            "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-            className
-        )}
-        {...props}
-    >
-        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };

package/apps/lib/components/SearchField.tsx

@@ -2,51 +2,61 @@ import { forwardRef, ReactNode } from "react";
 import { Props, InputField } from "./InputField";
 
 interface SearchProps extends Props {
-    Searchplaceholder?: ReactNode
-    secondaryPlaceholder?: ReactNode
-    childrenSide?: ReactNode
+  Searchplaceholder?: ReactNode;
+  secondaryPlaceholder?: ReactNode;
+  childrenSide?: ReactNode;
 }
 // Use InputField types in the SearchInput component
 export const SearchField = forwardRef<HTMLInputElement, SearchProps>(
-    ({ Searchplaceholder, secondaryPlaceholder, childrenSide, ...props }, forwardedRef) => {
-        return (
-            <div className="mb-[10px] w-full h-fit justify-center items-center rounded-[12px] p-[3px] bg-[rgba(106,112,144,0.60)] shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] backdrop-blur-[21px]">
-                <InputField
-                    {...props}
-                    ref={forwardedRef}
-                    type="text"
-                    variant="SystemStyle"
-                    size="M"
-                    className="h-[54px] rounded-[9px] p-[15px] border-border-system-global-primary bg-[rgba(0,0,0,0.60)]"
-                    icon={
-                        <SearchInputPlaceholder value={props.value} secondaryPlaceholder={secondaryPlaceholder} Searchplaceholder={Searchplaceholder} />
-                    }
-                    childrenSide={
-                        childrenSide
-                    }
-                />
-            </div>
-        );
-    }
+  ({ Searchplaceholder, secondaryPlaceholder, childrenSide, ...props }, forwardedRef) => {
+    return (
+      <div className="mb-[10px] w-full h-fit justify-center items-center rounded-[12px] p-[3px] bg-[rgba(106,112,144,0.60)] shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] backdrop-blur-[21px]">
+        <InputField
+          {...props}
+          ref={forwardedRef}
+          type="text"
+          variant="SystemStyle"
+          size="M"
+          className="h-[54px] rounded-[9px] p-[15px] border-border-system-global-primary bg-[rgba(0,0,0,0.60)]"
+          icon={
+            <SearchInputPlaceholder
+              value={props.value}
+              secondaryPlaceholder={secondaryPlaceholder}
+              Searchplaceholder={Searchplaceholder}
+            />
+          }
+          childrenSide={childrenSide}
+        />
+      </div>
+    );
+  },
 );
 
 SearchField.displayName = " SearchField"; // Set displayName for debugging
 
+function SearchInputPlaceholder({
+  Searchplaceholder,
+  secondaryPlaceholder,
+  value,
+}: {
+  Searchplaceholder?: ReactNode;
+  secondaryPlaceholder?: ReactNode;
+  value?: string | number | readonly string[];
+}) {
+  return (
+    <div className="flex gap-[10px] justify-center items-center ">
+      <i className="ri-search-2-line text-[24px] text-[#E5E5E5]"></i>
 
-function SearchInputPlaceholder({ Searchplaceholder, secondaryPlaceholder, value }: { Searchplaceholder?: ReactNode, secondaryPlaceholder?: ReactNode, value: any }) {
-    return (
-        <div className="flex gap-[10px] justify-center items-center ">
-            <i className="ri-search-2-line text-[24px] text-[#E5E5E5]"></i>
-
-            {
-                value == "" ? (
-                    <div className="flex gap-[5px] justify-center items-center ">
-                        <p className="text-content-system-global-primary  typography-headers-medium-regular leading-none opacity-[0.8]">{Searchplaceholder}</p>
-                        <p className="text-content-system-global-primary  typography-body-medium-medium leading-none opacity-30 mix-blend-luminosity mt-[2px]">{secondaryPlaceholder}</p>
-                    </div>
-                ) : null
-            }
-
+      {value == "" ? (
+        <div className="flex gap-[5px] justify-center items-center ">
+          <p className="text-content-system-global-primary  typography-headers-medium-regular leading-none opacity-[0.8]">
+            {Searchplaceholder}
+          </p>
+          <p className="text-content-system-global-primary  typography-body-medium-medium leading-none opacity-30 mix-blend-luminosity mt-[2px]">
+            {secondaryPlaceholder}
+          </p>
         </div>
-    )
-}
+      ) : null}
+    </div>
+  );
+}