torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/Input.tsx

@@ -1,130 +1,128 @@
-import React, { forwardRef, HTMLAttributes, InputHTMLAttributes } from 'react'
-import { cn } from '../utils/cn'
-import { cva } from 'class-variance-authority';
+import React, { forwardRef, HTMLAttributes, InputHTMLAttributes } from "react";
+import { cn } from "../utils/cn";
+import { cva } from "class-variance-authority";
 
 interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "size"> {
-    size?: 'S' | 'M';
-    variant?: 'PresentationStyle' | 'SystemStyle';
-    error?: boolean;
-    onTable?: boolean;
-    ref?: any
-    className?: string;
+  size?: "S" | "M";
+  variant?: "PresentationStyle" | "SystemStyle";
+  error?: boolean;
+  onTable?: boolean;
+  ref?: React.Ref<HTMLDivElement>;
+  className?: string;
 }
 
 export const Group = forwardRef<HTMLDivElement, InputGroupProps>(
-    ({ size = 'M', variant = "PresentationStyle", error = false, onTable = false, className, ...props }, ref) => {
-        return (
-            <div
-                className={cn(GroupStyles({ size, variant, error, onTable }), className)}
-                ref={ref}
-                {...props}>
-            </div>
-        )
-    }
+  (
+    {
+      size = "M",
+      variant = "PresentationStyle",
+      error = false,
+      onTable = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        className={cn(GroupStyles({ size, variant, error, onTable }), className)}
+        ref={ref}
+        {...props}
+      ></div>
+    );
+  },
 );
 
 Group.displayName = "Group";
 
 interface IconProps {
-    children: React.ReactNode;
-    className?: string;
+  children: React.ReactNode;
+  className?: string;
 }
 
 export const Icon = ({ children, className }: IconProps) => {
-    return (
-        <div
-            className={cn(
-                "flex items-center justify-center",
-                "transition-all duration-200 ease-in-out",
-                "leading-0 text-content-presentation-action-light-secondary",
-                className
-            )} data-role="icon">
-            {children}
-        </div>
-    );
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center",
+        "transition-all duration-200 ease-in-out",
+        "leading-0 text-content-presentation-action-light-secondary",
+        className,
+      )}
+      data-role="icon"
+    >
+      {children}
+    </div>
+  );
 };
 
-
 interface TrillingProps extends HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    className?: string;
+  children: React.ReactNode;
+  className?: string;
 }
 export const Trilling = ({ children, className, ...props }: TrillingProps) => {
-    return (
-        <div
-            {...props}
-            className={cn(
-                "flex items-center justify-center h-full gap-1 py-1",
-                className
-            )}
-        >
-            {children}
-        </div>
-    )
-}
-
-
-
-
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-    ({ className, ...props }, ref) => {
-        const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-            // Force scroll to the end
-            const input = e.target;
-            input.scrollLeft = input.scrollWidth;
-            // Call the original onFocus if it exists
-            if (props.onFocus) {
-                props.onFocus(e);
-            }
-        };
+  return (
+    <div {...props} className={cn("flex items-center justify-center h-full gap-1 py-1", className)}>
+      {children}
+    </div>
+  );
+};
 
-        const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
-            // Force scroll to the end
-            const input = e.target as HTMLInputElement;
-            input.scrollLeft = input.scrollWidth;
-            // Call the original onClick if it exists
-            if (props.onClick) {
-                props.onClick(e);
-            }
-        };
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {}
 
-        return (
-            <input
-                {...props}
-                autoComplete="off"
-                className={cn(
-                    // Base styles
-                    "typography-body-large-regular",
-                    "text-content-presentation-action-light-primary",
-                    "bg-transparent",
-                    "h-full",
-                    "px-[4px]",
-                    "flex-[1_1_0%]",
-                    "min-w-[30px]",
-                    "outline-none",
-                    "transition-all duration-200 ease-in-out",
-                    // Remove mask image completely when focused
-                    "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_85%,transparent_100%)]",
-                    "focus:[mask-image:none]",
-                    "rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_85%,transparent_100%)]",
-                    "focus:rtl:[mask-image:none]",
-                    "hover:placeholder:text-content-presentation-action-light-primary",
-                    className
-                )}
-                onFocus={handleFocus}
-                onClick={handleClick}
-                ref={ref}
-            />
-        );
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    // Force scroll to the end
+    const input = e.target;
+    input.scrollLeft = input.scrollWidth;
+    // Call the original onFocus if it exists
+    if (props.onFocus) {
+      props.onFocus(e);
     }
-);
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
+    // Force scroll to the end
+    const input = e.target as HTMLInputElement;
+    input.scrollLeft = input.scrollWidth;
+    // Call the original onClick if it exists
+    if (props.onClick) {
+      props.onClick(e);
+    }
+  };
+
+  return (
+    <input
+      {...props}
+      autoComplete="off"
+      className={cn(
+        // Base styles
+        "typography-body-large-regular",
+        "text-content-presentation-action-light-primary",
+        "bg-transparent",
+        "h-full",
+        "px-[4px]",
+        "flex-[1_1_0%]",
+        "min-w-[30px]",
+        "outline-none",
+        "transition-all duration-200 ease-in-out",
+        // Remove mask image completely when focused
+        "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_85%,transparent_100%)]",
+        "focus:[mask-image:none]",
+        "rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_85%,transparent_100%)]",
+        "focus:rtl:[mask-image:none]",
+        "hover:placeholder:text-content-presentation-action-light-primary",
+        className,
+      )}
+      onFocus={handleFocus}
+      onClick={handleClick}
+      ref={ref}
+    />
+  );
+});
 
 Input.displayName = "Input";
 
-
 /* // solution to fix autofill issue
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
@@ -135,73 +133,74 @@ input:-webkit-autofill:active {
 }
 */
 
-
 export const GroupStyles = cva(
-    [
-        "flex w-full min-w-0 px-1 justify-center items-center",
-        "typography-body-small-regular",
-        "border",
-        "transition-all duration-200 ease-in-out",
-        "hover:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
-        "[&_i]:leading-[0px] leading-[0px]",
-        '[&:has(input[disabled])]:!border-border-presentation-action-disabled',
-        '[&:has(input[disabled])]:!bg-background-presentation-action-disabled',
-        '[&:has(input[disabled])]:hover:border-border-presentation-action-disabled',
-        '[&:has(input[disabled])]:hover:bg-background-presentation-action-disabled',
-    ],
-    {
-        variants: {
-            variant: {
-                PresentationStyle: [
-                    "bg-background-presentation-form-field-primary",
-                    "border-border-presentation-action-primary",
-                    "hover:bg-background-presentation-form-field-hover",
-                    "hover:border-border-presentation-action-hover",
-                    "hover:text-content-presentation-action-light-primary",
-                    'focus-within:border-border-presentation-state-focus',
-                    'focus-within:bg-background-presentation-form-field-primary',
-                    'focus-within:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]',
-                    'focus-within:hover:border-border-presentation-state-focus',
-                    'focus-within:caret-border-presentation-state-focus',
-                    'focus-within:hover:caret-border-presentation-state-focus',
-                ],
-                SystemStyle: [
-                    "bg-black-alpha-20",
-                    "text-white",
-                    "border-[#2C2D2E]",
-                    "hover:border-[#9748FF]",
-                    "hover:bg-purple-alpha-10",
-                    'focus-within:border-border-presentation-state-focus',
-                    'focus-within:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]',
-                    'focus-within:hover:border-border-presentation-state-focus',
-                    'focus-within:caret-border-presentation-state-focus',
-                    'focus-within:hover:caret-border-presentation-state-focus',
-                    'focus-within:hover:bg-black-alpha-20',
-                    "[&_div[data-role='icon']]:focus-within:text-white",
-                    "[&_input]:placeholder:text-[#A0A0A0]",
-                    "[&_input]:hover:placeholder:text-[#A0A0A0]",
-                    "[&_input]:text-white"
-                ],
-            },
-            size: {
-                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: [
-                    "border-border-presentation-state-negative",
-                    "caret-border-presentation-state-negative",
-                    "hover:border-border-presentation-state-negative",
-                    "hover:caret-border-presentation-state-negative",
-                ],
-            },
-            onTable: {
-                true: [
-                    'border-transparent',
-                    'bg-transparent',
-                ],
-            },
-        },
-
-    }
-);
+  [
+    "flex w-full min-w-0 px-1 justify-center items-center",
+    "typography-body-small-regular",
+    "border",
+    "transition-all duration-200 ease-in-out",
+    "hover:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
+    "[&_i]:leading-[0px] leading-[0px]",
+    "[&:has(input[disabled])]:!border-border-presentation-action-disabled",
+    "[&:has(input[disabled])]:!bg-background-presentation-action-disabled",
+    "[&:has(input[disabled])]:hover:border-border-presentation-action-disabled",
+    "[&:has(input[disabled])]:hover:bg-background-presentation-action-disabled",
+  ],
+  {
+    variants: {
+      variant: {
+        PresentationStyle: [
+          "bg-background-presentation-form-field-primary",
+          "border-border-presentation-action-primary",
+          "hover:bg-background-presentation-form-field-hover",
+          "hover:border-border-presentation-action-hover",
+          "hover:text-content-presentation-action-light-primary",
+          "focus-within:border-border-presentation-state-focus",
+          "focus-within:bg-background-presentation-form-field-primary",
+          "focus-within:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
+          "focus-within:hover:border-border-presentation-state-focus",
+          "focus-within:caret-border-presentation-state-focus",
+          "focus-within:hover:caret-border-presentation-state-focus",
+        ],
+        SystemStyle: [
+          "bg-black-alpha-20",
+          "text-white",
+          "border-[#2C2D2E]",
+          "hover:border-[#9748FF]",
+          "hover:bg-purple-alpha-10",
+          "focus-within:border-border-presentation-state-focus",
+          "focus-within:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
+          "focus-within:hover:border-border-presentation-state-focus",
+          "focus-within:caret-border-presentation-state-focus",
+          "focus-within:hover:caret-border-presentation-state-focus",
+          "focus-within:hover:bg-black-alpha-20",
+          "[&_div[data-role='icon']]:focus-within:text-white",
+          "[&_input]:placeholder:text-[#A0A0A0]",
+          "[&_input]:hover:placeholder:text-[#A0A0A0]",
+          "[&_input]:text-white",
+        ],
+      },
+      size: {
+        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: [
+          "border-border-presentation-state-negative",
+          "caret-border-presentation-state-negative",
+          "hover:border-border-presentation-state-negative",
+          "hover:caret-border-presentation-state-negative",
+        ],
+      },
+      onTable: {
+        true: ["border-transparent", "bg-transparent"],
+      },
+    },
+  },
+);

package/apps/lib/components/InputField.tsx

@@ -1,12 +1,5 @@
 "use client";
-import {
-  forwardRef,
-  InputHTMLAttributes,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "../utils/cn";
 import { Tooltip, ToolTipSide } from "./Tooltip";
 import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
@@ -14,8 +7,7 @@ import { ActionButton } from "./ActionButton";
 import { Themes } from "../utils/types";
 import { Icon, Input, Group, Trilling } from "./Input";
 
-export interface Props
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
+export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
   size?: "S" | "M"; // this is used to change the size style of the component
   variant?: "SystemStyle" | "PresentationStyle";
   icon?: ReactNode; // to add left side icon if you pass it
@@ -24,10 +16,9 @@ export interface Props
   errorMessage?: string; // to show tooltip component when error_message not null
   onTable?: boolean; // to change the border style of the component when it is on table
   toolTipSide?: ToolTipSide;
-  theme?: Themes
+  theme?: Themes;
 }
 
-
 export const InputField = forwardRef<HTMLInputElement, Props>(
   (
     {
@@ -43,7 +34,7 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
       className,
       ...props
     },
-    forwardedRef
+    forwardedRef,
   ) => {
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const [PopoverWidth, setPopoverWidth] = useState(0);
@@ -78,58 +69,66 @@ export const InputField = forwardRef<HTMLInputElement, Props>(
               }}
               className={className}
             >
-              {icon && (
-                <Icon>
-                  {icon}
-                </Icon>
-              )}
+              {icon && <Icon>{icon}</Icon>}
               <Input
                 {...props}
                 onFocus={(e) => {
-                  setIsPopoverOpen(true)
-                  props.onFocus?.(e)
+                  setIsPopoverOpen(true);
+                  props.onFocus?.(e);
                 }}
                 onBlur={(e) => {
-                  setIsPopoverOpen(false)
-                  props.onBlur?.(e)
+                  setIsPopoverOpen(false);
+                  props.onBlur?.(e);
                 }}
                 ref={inputRef}
               />
 
-              <Trilling >
+              <Trilling>
                 {childrenSide}
                 {popoverChildren && (
-                  <PopoverActionButton size={size} variant={variant} isPopoverOpen={isPopoverOpen} disabled={props.disabled} />
+                  <PopoverActionButton
+                    size={size}
+                    variant={variant}
+                    isPopoverOpen={isPopoverOpen}
+                    disabled={props.disabled}
+                  />
                 )}
               </Trilling>
             </Group>
           </PopoverTrigger>
         </Tooltip>
 
-
-        {
-          (popoverChildren && !props.disabled) && (
-            <PopoverContent
-              theme={theme}
-              variant={variant}
-              onOpenAutoFocus={(e: any) => e.preventDefault()}
-              style={{ width: PopoverWidth }}
-              onClick={(e) => {
-                triggerRef.current?.click();
-              }}
-            >
-              {popoverChildren}
-            </PopoverContent>
-          )
-        }
-      </Popover >
+        {popoverChildren && !props.disabled && (
+          <PopoverContent
+            theme={theme}
+            variant={variant}
+            onOpenAutoFocus={(e: Event) => e.preventDefault()}
+            style={{ width: PopoverWidth }}
+            onClick={() => {
+              triggerRef.current?.click();
+            }}
+          >
+            {popoverChildren}
+          </PopoverContent>
+        )}
+      </Popover>
     );
-  }
+  },
 );
 
 InputField.displayName = "InputField";
 
-const PopoverActionButton = ({ size, variant, isPopoverOpen, disabled }: { size: "S" | "M", variant: "SystemStyle" | "PresentationStyle", isPopoverOpen: boolean, disabled?: boolean }) => {
+const PopoverActionButton = ({
+  size,
+  variant,
+  isPopoverOpen,
+  disabled,
+}: {
+  size: "S" | "M";
+  variant: "SystemStyle" | "PresentationStyle";
+  isPopoverOpen: boolean;
+  disabled?: boolean;
+}) => {
   return (
     <ActionButton disabled={disabled} size={size}>
       <i
@@ -138,10 +137,10 @@ const PopoverActionButton = ({ size, variant, isPopoverOpen, disabled }: { size:
           "transition-[transform,rotate]",
           "duration-200",
           "ease-in-out",
-          { "rotate-180": (isPopoverOpen && !disabled) },
+          { "rotate-180": isPopoverOpen && !disabled },
           { "!text-[16px]": size === "S" },
           { "!text-[26px]": size === "M" },
-          { "text-white": variant === "SystemStyle" }
+          { "text-white": variant === "SystemStyle" },
         )}
       />
     </ActionButton>