torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/Select.tsx

@@ -16,11 +16,11 @@ const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
-  VariantProps<typeof PopoverTriggerStyles> & {
-    errors?: string;
-    icon?: string
-    theme?: Themes
-  }
+    VariantProps<typeof PopoverTriggerStyles> & {
+      errors?: string;
+      icon?: string;
+      theme?: Themes;
+    }
 >(
   (
     {
@@ -33,7 +33,7 @@ const SelectTrigger = React.forwardRef<
       icon,
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <Tooltip toolTipSide={"top"} open={errors !== undefined} text={errors}>
@@ -46,23 +46,25 @@ const SelectTrigger = React.forwardRef<
               variant,
               error: errors !== undefined,
             }),
-            className
+            className,
           )}
           {...props}
         >
-          <p className={cn({
-            "[&_span]:text-[#A0A0A0]": !props.value
-          })}>{children}</p>
+          <p
+            className={cn({
+              "[&_span]:text-[#A0A0A0]": !props.value,
+            })}
+          >
+            {children}
+          </p>
 
           <Button
             as={"span"}
             buttonType="icon"
-            className={cn(
-              [
-                "group-aria-expanded:bg-background-presentation-action-hover",
-                "group-aria-expanded:text-white",
-              ]
-            )}
+            className={cn([
+              "group-aria-expanded:bg-background-presentation-action-hover",
+              "group-aria-expanded:text-white",
+            ])}
           >
             <i
               className={cn(
@@ -71,14 +73,14 @@ const SelectTrigger = React.forwardRef<
                 { "!text-[16px]": size === "M" },
                 { "!text-[18px]": size === "L" },
                 { "!text-[26px]": size === "XL" },
-                { icon: icon }
+                { icon: icon },
               )}
             />
           </Button>
         </SelectPrimitive.Trigger>
       </Tooltip>
     );
-  }
+  },
 );
 SelectTrigger.displayName = "SelectTrigger";
 
@@ -88,10 +90,7 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1 ",
-      className
-    )}
+    className={cn("flex cursor-default items-center justify-center py-1 ", className)}
     {...props}
   >
     <i
@@ -108,10 +107,7 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
     <i
@@ -125,20 +121,13 @@ SelectScrollDownButton.displayName = "SelectScrollDownButton";
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
-  VariantProps<typeof SelectContentStyles> & {
-    theme?: Themes
-  }
+    VariantProps<typeof SelectContentStyles> & {
+      theme?: Themes;
+    }
 >(
   (
-    {
-      className,
-      children,
-      variant = "PresentationStyle",
-      position = "popper",
-      theme,
-      ...props
-    },
-    ref
+    { className, children, variant = "PresentationStyle", position = "popper", theme, ...props },
+    ref,
   ) => (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
@@ -151,7 +140,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  )
+  ),
 );
 SelectContent.displayName = "SelectContent";
 
@@ -170,28 +159,23 @@ SelectLabel.displayName = "SelectLabel";
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> &
-  VariantProps<typeof SelectItemStyles>
->(
-  (
-    { className, children, size = "M", variant = "Default", active, ...props },
-    ref
-  ) => (
-    <SelectPrimitive.Item
-      ref={ref}
-      className={cn(
-        SelectItemStyles({
-          variant,
-          active,
-          size,
-        }),
-        className
-      )}
-      {...props}
-    >
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-);
+    VariantProps<typeof SelectItemStyles>
+>(({ className, children, size = "M", variant = "Default", active, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      SelectItemStyles({
+        variant,
+        active,
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  >
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
 
 SelectItem.displayName = "SelectItem";
 
@@ -220,7 +204,6 @@ export {
   SelectScrollDownButton,
 };
 
-
 // NOTE: radix select as DropDownButton
 
 const SelectContentStyles = cva(
@@ -257,7 +240,7 @@ const SelectContentStyles = cva(
         variant: "PresentationStyle",
       },
     },
-  }
+  },
 );
 
 const SelectItemStyles = cva(
@@ -277,7 +260,6 @@ const SelectItemStyles = cva(
     "transition-all",
     "ease-in-out",
     "duration-300",
-
   ],
   {
     variants: {
@@ -326,10 +308,7 @@ const SelectItemStyles = cva(
       },
 
       disabled: {
-        true: [
-          "text-content-presentation-state-disabled",
-          "bg-white-00",
-        ],
+        true: ["text-content-presentation-state-disabled", "bg-white-00"],
       },
 
       active: {
@@ -353,7 +332,7 @@ const SelectItemStyles = cva(
         className: ["text-content-presentation-state-negative"],
       },
     ],
-  }
+  },
 );
 
 const PopoverTriggerStyles = cva(
@@ -398,15 +377,9 @@ const PopoverTriggerStyles = cva(
         ],
       },
       size: {
-        S: [
-          "[&_span]:h-[22px] [&_span]:w-[22px] [&_p]:typography-body-small-medium",
-        ],
-        M: [
-          "[&_span]:h-[26px] [&_span]:w-[26px] [&_p]:typography-body-medium-medium",
-        ],
-        L: [
-          "[&_span]:h-[28px] [&_span]:w-[28px] [&_p]:typography-body-large-medium",
-        ],
+        S: ["[&_span]:h-[22px] [&_span]:w-[22px] [&_p]:typography-body-small-medium"],
+        M: ["[&_span]:h-[26px] [&_span]:w-[26px] [&_p]:typography-body-medium-medium"],
+        L: ["[&_span]:h-[28px] [&_span]:w-[28px] [&_p]:typography-body-large-medium"],
         XL: [
           "h-[40px] p-[4px] rounded-[6px] [&_span]:h-[32px] [&_span]:w-[32px] [&_p]:typography-body-large-regular [&_p]:px-[4px]",
         ],
@@ -415,5 +388,5 @@ const PopoverTriggerStyles = cva(
     defaultVariants: {
       size: "M",
     },
-  }
-);
+  },
+);

package/apps/lib/components/SimpleSelect.tsx

@@ -4,213 +4,222 @@ import { cva } from "class-variance-authority";
 import { HTMLAttributes, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
 
 interface SimpleSelectDropDownProps {
-    className?: string;
-    children: ReactNode;
-    onClick?: () => void;
+  className?: string;
+  children: ReactNode;
+  onClick?: () => void;
 }
 
 const SimpleSelectDropDown = ({ className, children, onClick }: SimpleSelectDropDownProps) => {
-    return (
-        <div className={cn("absolute min-w-[100px] z-[20] top-[27px] left-0", dropdownMenuStyles({ variant: "SystemStyle" }), className)} onClick={onClick}>
-            {children}
-        </div>
-    );
+  return (
+    <div
+      className={cn(
+        "absolute min-w-[100px] z-[20] top-[27px] left-0",
+        dropdownMenuStyles({ variant: "SystemStyle" }),
+        className,
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
 };
 
-interface SimpleSelectItemProps
-    extends HTMLAttributes<HTMLLIElement> {
-    selected?: boolean
+interface SimpleSelectItemProps extends HTMLAttributes<HTMLLIElement> {
+  selected?: boolean;
 }
 
 const SimpleSelectItem = ({ selected, ...props }: SimpleSelectItemProps) => {
+  const ref = useRef<HTMLLIElement>(null);
 
-    const ref = useRef<HTMLLIElement>(null);
-
-    // Scroll to the selected item when the dropdown is opened
-    useEffect(() => {
-        if (selected && ref.current) {
-            ref.current.scrollIntoView({ behavior: "auto", block: "center" });
-        }
-    }, [selected]);
-
-    return (
-        <li {...props} ref={ref} className={cn(" whitespace-nowrap z-[9999]", MenuItemStyles({ variant: "SystemStyle", selected: selected, size: "S" }))}>
-            {props.children}
-        </li>
-    )
-}
+  // Scroll to the selected item when the dropdown is opened
+  useEffect(() => {
+    if (selected && ref.current) {
+      ref.current.scrollIntoView({ behavior: "auto", block: "center" });
+    }
+  }, [selected]);
+
+  return (
+    <li
+      {...props}
+      ref={ref}
+      className={cn(
+        " whitespace-nowrap z-[9999]",
+        MenuItemStyles({ variant: "SystemStyle", selected: selected, size: "S" }),
+      )}
+    >
+      {props.children}
+    </li>
+  );
+};
 
-interface SimpleSelectValueProps
-    extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    inputClassName?: string;
-    onChange?: (value: string) => void;
-    defaultOpen?: boolean;
-    className?: string;
+interface SimpleSelectValueProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+  inputClassName?: string;
+  onChange?: (value: string) => void;
+  defaultOpen?: boolean;
+  className?: string;
 }
 
 const SimpleSelectValue = ({
-    inputClassName,
-    children,
-    onChange,
-    defaultOpen = false,
-    className,
-    ...props
+  inputClassName,
+  children,
+  onChange,
+  defaultOpen = false,
+  className,
+  ...props
 }: SimpleSelectValueProps) => {
-    const [active, setActive] = useState(defaultOpen);
-    const sectionRef = useClickOutside(() => setActive(false), () => setActive(true));
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (onChange) {
-            onChange(e.target.value);
-        }
-    };
-
-    return (
-        <div
-            ref={sectionRef as any}
-            className={cn([
-                "relative flex justify-between items-center",
-                "bg-black-alpha-20",
-                "text-white",
-                "border-[#2C2D2E]",
-                active ? "border-[#9748FF] bg-purple-alpha-10" : "",
-                "hover:border-[#9748FF]",
-                "hover:bg-purple-alpha-10",
-                "typography-body-small-regular leading-0",
-                "border",
-                "transition-all duration-200 ease-in-out",
-                "h-[26px]",
-                "w-fit",
-                "rounded-[6px]",
-                "outline-none",
-                "pl-[8px]",
-                className,
-            ])}>
-            <input
-                {...props}
-                onChange={handleInputChange}
-                className={cn([
-                    "bg-transparent",
-                    "text-content-system-global-primary",
-                    "h-[24px]",
-                    "border-none",
-                    "outline-none",
-                    "typography-body-small-regular leading-0",
-                ], inputClassName)}
-            />
-            <button
-                type="button"
-                className="flex items-center"
-            >
-                <i className={cn("ri-arrow-down-s-fill text-[12px] text-[#9748FF] px-1", {
-                    "transform rotate-180": active
-                })}></i>
-            </button>
-            {children && active && (
-                <SimpleSelectDropDown onClick={() => setActive(false)}>
-                    {children}
-                </SimpleSelectDropDown>
-            )}
-        </div>
-    );
+  const [active, setActive] = useState(defaultOpen);
+  const sectionRef = useClickOutside<HTMLDivElement>(
+    () => setActive(false),
+    () => setActive(true),
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+
+  return (
+    <div
+      ref={sectionRef}
+      className={cn([
+        "relative flex justify-between items-center",
+        "bg-black-alpha-20",
+        "text-white",
+        "border-[#2C2D2E]",
+        active ? "border-[#9748FF] bg-purple-alpha-10" : "",
+        "hover:border-[#9748FF]",
+        "hover:bg-purple-alpha-10",
+        "typography-body-small-regular leading-0",
+        "border",
+        "transition-all duration-200 ease-in-out",
+        "h-[26px]",
+        "w-fit",
+        "rounded-[6px]",
+        "outline-none",
+        "pl-[8px]",
+        className,
+      ])}
+    >
+      <input
+        {...props}
+        onChange={handleInputChange}
+        className={cn(
+          [
+            "bg-transparent",
+            "text-content-system-global-primary",
+            "h-[24px]",
+            "border-none",
+            "outline-none",
+            "typography-body-small-regular leading-0",
+          ],
+          inputClassName,
+        )}
+      />
+      <button type="button" className="flex items-center">
+        <i
+          className={cn("ri-arrow-down-s-fill text-[12px] text-[#9748FF] px-1", {
+            "transform rotate-180": active,
+          })}
+        ></i>
+      </button>
+      {children && active && (
+        <SimpleSelectDropDown onClick={() => setActive(false)}>{children}</SimpleSelectDropDown>
+      )}
+    </div>
+  );
 };
 
 export { SimpleSelectValue, SimpleSelectItem, SimpleSelectDropDown };
 
 export const MenuItemStyles = cva(
-    [
-        "text-content-presentation-action-light-primary",
-        "outline-none",
-        "border",
-        "border-transparent",
-        "flex",
-        "gap-[8px]",
-        "items-center",
-        "justify-start",
-        "text-overflow",
-        "overflow-hidden",
-        "px-[12px]",
-        "rounded-[4px]",
-        "transition-all",
-        "ease-in-out",
-        "duration-300",
-    ],
-    {
-        variants: {
-            variant: {
-                SystemStyle: [
-                    "bg-background-system-body-primary",
-                    "text-content-system-global-primary",
-                    "hover:!bg-background-system-action-secondary-hover",
-                    "hover:!text-content-system-action-primary-hover",
-                    "hover:!border-border-system-action-primary-hover",
-                    "focus:bg-background-system-action-primary-hover",
-                    "focus:border-transparent",
-                    "active:border-transparent",
-                    "active:bg-background-system-action-primary-hover",
-                    "disabled:bg-background-system-body-secondary",
-                    "disabled:text-content-system-global-disabled",
-                ],
-            },
-            size: {
-                S: ["typography-body-small-regular", "h-[24px]"],
-                M: ["typography-body-medium-regular", "h-[32px]"],
-            },
-
-            disabled: {
-                true: [
-                    "text-content-presentation-state-disabled",
-                    "bg-white-00",
-                ],
-            },
-
-            selected: {
-                true: [
-                    "bg-background-presentation-action-selected",
-                    "text-content-presentation-action-light-primary",
-                ],
-            },
-
-            defaultVariants: {
-                variant: "Default",
-                size: "M",
-                active: false,
-                disabled: false,
-            },
-        }
-    }
+  [
+    "text-content-presentation-action-light-primary",
+    "outline-none",
+    "border",
+    "border-transparent",
+    "flex",
+    "gap-[8px]",
+    "items-center",
+    "justify-start",
+    "text-overflow",
+    "overflow-hidden",
+    "px-[12px]",
+    "rounded-[4px]",
+    "transition-all",
+    "ease-in-out",
+    "duration-300",
+  ],
+  {
+    variants: {
+      variant: {
+        SystemStyle: [
+          "bg-background-system-body-primary",
+          "text-content-system-global-primary",
+          "hover:!bg-background-system-action-secondary-hover",
+          "hover:!text-content-system-action-primary-hover",
+          "hover:!border-border-system-action-primary-hover",
+          "focus:bg-background-system-action-primary-hover",
+          "focus:border-transparent",
+          "active:border-transparent",
+          "active:bg-background-system-action-primary-hover",
+          "disabled:bg-background-system-body-secondary",
+          "disabled:text-content-system-global-disabled",
+        ],
+      },
+      size: {
+        S: ["typography-body-small-regular", "h-[24px]"],
+        M: ["typography-body-medium-regular", "h-[32px]"],
+      },
+
+      disabled: {
+        true: ["text-content-presentation-state-disabled", "bg-white-00"],
+      },
+
+      selected: {
+        true: [
+          "bg-background-presentation-action-selected",
+          "text-content-presentation-action-light-primary",
+        ],
+      },
+
+      defaultVariants: {
+        variant: "Default",
+        size: "M",
+        active: false,
+        disabled: false,
+      },
+    },
+  },
 );
 
 export const dropdownMenuStyles = cva(
-    [
-        "p-1",
-        "rounded-[8px]",
-        "border",
-        "max-h-[200px]",
-        "outline-none",
-        "overflow-scroll",
-        "data-[state=open]:animate-in",
-        "data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0",
-        "data-[state=open]:fade-in-0",
-        "overflow-x-hidden",
-        "scrollbar-hide",
-    ],
-    {
-        variants: {
-            variant: {
-                SystemStyle: [
-                    "border-border-system-global-secondary",
-                    "bg-background-system-body-primary",
-                    "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
-                ]
-            },
-            defaultVariants: {
-                variant: "SystemStyle",
-            },
-        },
-    }
+  [
+    "p-1",
+    "rounded-[8px]",
+    "border",
+    "max-h-[200px]",
+    "outline-none",
+    "overflow-scroll",
+    "data-[state=open]:animate-in",
+    "data-[state=closed]:animate-out",
+    "data-[state=closed]:fade-out-0",
+    "data-[state=open]:fade-in-0",
+    "overflow-x-hidden",
+    "scrollbar-hide",
+  ],
+  {
+    variants: {
+      variant: {
+        SystemStyle: [
+          "border-border-system-global-secondary",
+          "bg-background-system-body-primary",
+          "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
+        ],
+      },
+      defaultVariants: {
+        variant: "SystemStyle",
+      },
+    },
+  },
 );
-
-
-