torch-glare 2.3.0 → 2.4.1

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,10 +14,7 @@ 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}
@@ -31,37 +27,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>
+  );
+}

package/apps/lib/components/SearchableSelect.tsx

@@ -91,7 +91,7 @@ const menuContentStyles = cva(
       },
     },
     defaultVariants: { variant: "PresentationStyle" },
-  }
+  },
 );
 
 export function SearchableSelect({
@@ -123,10 +123,7 @@ export function SearchableSelect({
 
   const groupRef = useClickOutside<HTMLDivElement>((e) => {
     const target = e?.target as Node;
-    if (
-      !groupRef.current?.contains(target) &&
-      !popoverContentRef.current?.contains(target)
-    ) {
+    if (!groupRef.current?.contains(target) && !popoverContentRef.current?.contains(target)) {
       setOpen(false);
     }
   });
@@ -168,7 +165,7 @@ export function SearchableSelect({
   };
 
   // Solid value: search text while typing, otherwise the selected label.
-  const displayValue = searching ? search : selectedOption?.label ?? "";
+  const displayValue = searching ? search : (selectedOption?.label ?? "");
 
   return (
     <Popover open={open}>
@@ -222,13 +219,13 @@ export function SearchableSelect({
             }}
             className={cn(
               "shrink-0 h-[32px] w-[32px] rounded-[4px]",
-              open && "bg-background-presentation-action-hover text-white"
+              open && "bg-background-presentation-action-hover text-white",
             )}
           >
             <i
               className={cn(
-                "ri-arrow-down-s-line text-[16px] transition-all duration-100 ease-in-out",
-                open && "rotate-180"
+                "ri-arrow-down-s-line text-[20px] transition-all duration-100 ease-in-out",
+                open && "rotate-180",
               )}
             />
           </Button>
@@ -251,54 +248,51 @@ export function SearchableSelect({
         <div
           ref={scrollRef}
           onScroll={handleScroll}
-          className="overflow-y-auto overflow-x-hidden scrollbar-hide"
+          className="overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide"
           style={{ maxHeight: maxVisibleItems * ROW_HEIGHT }}
         >
-        {filteredOptions.length > 0 && (
-          // Boxed group container — matches the DropdownMenu's auto-grouped look.
-          <div className="flex flex-col gap-[1px] rounded-[10px] overflow-hidden">
-            {filteredOptions.map((option) => {
-              const isSelected = option.value === value;
-              return (
-                // Same structure as DropdownMenuItem: MenuItemStyles on the
-                // element + a single inner <div> the styles target via [&>div].
-                <button
-                  type="button"
-                  key={option.value}
-                  onClick={() => handleSelect(option)}
-                  data-highlighted={isSelected ? "" : undefined}
-                  className={cn(
-                    MenuItemStyles({ variant: "Default", size: "M" }),
-                    "shrink-0" // keep full row height; the list scrolls instead of squishing
-                  )}
-                >
-                  <div>
-                    {option.icon}
-                    <span className="flex-1 text-start">{option.label}</span>
-                    {isSelected && (
-                      <i className="ri-check-line text-[16px] shrink-0" />
+          {filteredOptions.length > 0 && (
+            // Boxed group container — matches the DropdownMenu's auto-grouped look.
+            <div className="flex flex-col gap-[1px] rounded-[10px] overflow-hidden">
+              {filteredOptions.map((option) => {
+                const isSelected = option.value === value;
+                return (
+                  // Same structure as DropdownMenuItem: MenuItemStyles on the
+                  // element + a single inner <div> the styles target via [&>div].
+                  <button
+                    type="button"
+                    key={option.value}
+                    onClick={() => handleSelect(option)}
+                    data-highlighted={isSelected ? "" : undefined}
+                    className={cn(
+                      MenuItemStyles({ variant: "Default", size: "M" }),
+                      "shrink-0", // keep full row height; the list scrolls instead of squishing
                     )}
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-        )}
-
-        {/* Empty state — only when nothing is loading. */}
-        {filteredOptions.length === 0 && !loading && (
-          <div className="px-3 py-2 typography-body-small-regular text-white-alpha-75">
-            No results found
-          </div>
-        )}
+                  >
+                    <div>
+                      {option.icon}
+                      <span className="flex-1 text-start">{option.label}</span>
+                      {isSelected && <i className="ri-check-line text-[16px] shrink-0" />}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
 
-        {/* Loading row (initial load or fetching the next page). */}
-        {loading && (
-          <div className="flex items-center justify-center py-2">
-            <LoadingIcon size="M" />
-          </div>
-        )}
+          {/* Empty state — only when nothing is loading. */}
+          {filteredOptions.length === 0 && !loading && (
+            <div className="px-3 py-2 typography-body-small-regular text-white-alpha-75">
+              No results found
+            </div>
+          )}
 
+          {/* Loading row (initial load or fetching the next page). */}
+          {loading && (
+            <div className="flex items-center justify-center py-2">
+              <LoadingIcon size="M" />
+            </div>
+          )}
         </div>
       </PopoverContent>
     </Popover>