torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/InputOTP.tsx

@@ -1,85 +1,84 @@
-"use client"
-
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { cn } from "../utils/cn"
+"use client";
 
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cn } from "../utils/cn";
 
 const InputOTP = React.forwardRef<
-    React.ElementRef<typeof OTPInput>,
-    React.ComponentPropsWithoutRef<typeof OTPInput>
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
 >(({ className, containerClassName, ...props }, ref) => (
-    <OTPInput
-        ref={ref}
-        containerClassName={cn(
-            "flex items-center gap-2 has-[:disabled]:opacity-50",
-            containerClassName
-        )}
-        className={cn("disabled:cursor-not-allowed", className)}
-        {...props}
-    />
-))
-InputOTP.displayName = "InputOTP"
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName,
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
 
 const InputOTPGroup = React.forwardRef<
-    React.ElementRef<"div">,
-    React.ComponentPropsWithoutRef<"div">
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
 
 const InputOTPSlot = React.forwardRef<
-    React.ElementRef<"div">,
-    React.ComponentPropsWithoutRef<"div"> & { index: number }
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
-    const inputOTPContext = React.useContext(OTPInputContext)
-    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
-    return (
-        <div
-            ref={ref}
-            data-slot="input-otp-slot"
-            data-active={isActive}
-            className={cn(
-                "relative mx-1 flex items-center justify-center text-content-presentation-global-primary",
-                "min-w-[40px] h-[40px]", // Size M by default
-                "border rounded-[8px]",
-                "transition-all duration-200 ease-in-out",
-                "bg-background-presentation-form-field-primary",
-                "border-border-presentation-action-primary",
-                "hover:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
-                "hover:bg-background-presentation-form-field-hover",
-                "hover:border-border-presentation-action-hover",
-                // Active/Focus styles
-                "data-[active=true]:border-border-presentation-state-focus",
-                "data-[active=true]:bg-background-presentation-form-field-primary",
-                "data-[active=true]:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
-                // Typography
-                "typography-body-small-regular",
-                className
-            )}
-            {...props}
-        >
-            {char}
-            {hasFakeCaret && (
-                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                    <div className="animate-caret-blink bg-border-presentation-state-focus h-4 w-px duration-1000" />
-                </div>
-            )}
+  return (
+    <div
+      ref={ref}
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "relative mx-1 flex items-center justify-center text-content-presentation-global-primary",
+        "min-w-[40px] h-[40px]", // Size M by default
+        "border rounded-[8px]",
+        "transition-all duration-200 ease-in-out",
+        "bg-background-presentation-form-field-primary",
+        "border-border-presentation-action-primary",
+        "hover:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
+        "hover:bg-background-presentation-form-field-hover",
+        "hover:border-border-presentation-action-hover",
+        // Active/Focus styles
+        "data-[active=true]:border-border-presentation-state-focus",
+        "data-[active=true]:bg-background-presentation-form-field-primary",
+        "data-[active=true]:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
+        // Typography
+        "typography-body-small-regular",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-border-presentation-state-focus h-4 w-px duration-1000" />
         </div>
-    )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
 
 const InputOTPSeparator = React.forwardRef<
-    React.ElementRef<"div">,
-    React.ComponentPropsWithoutRef<"div">
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
-    <div ref={ref} role="separator" {...props}>
-        <i className="ri-subtract-line text-border-presentation-global-primary"></i>
-    </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
+  <div ref={ref} role="separator" {...props}>
+    <i className="ri-subtract-line text-border-presentation-global-primary"></i>
+  </div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/apps/lib/components/Label.tsx

@@ -17,8 +17,7 @@ const labelComponentVariants = cva("flex", {
 });
 
 interface Props
-  extends LabelHTMLAttributes<HTMLLabelElement>,
-  VariantProps<typeof labelComponentVariants> {
+  extends LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelComponentVariants> {
   label?: ReactNode; // main label
   requiredLabel?: ReactNode; // normal text with required style
   secondaryLabel?: ReactNode; // normal text with secondary style
@@ -26,10 +25,10 @@ interface Props
   asChild?: boolean;
   size?: "S" | "M" | "L";
   variant?: "SystemStyle" | "PresentationStyle";
-  theme?: Themes
+  theme?: Themes;
   labelsClassName?: string;
   labelDirections?: "vertical" | "horizontal";
-  childrenDirections?: "vertical" | "horizontal"
+  childrenDirections?: "vertical" | "horizontal";
   reverseChildren?: boolean;
 }
 
@@ -48,79 +47,83 @@ export const Label = React.forwardRef<HTMLLabelElement, Props>(
       labelsClassName,
       variant = "PresentationStyle",
       theme,
-      asChild,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      asChild, // excluded from ...props spread
       as: Tag = "label",
       ...props
     },
-    forwardedRef
+    forwardedRef,
   ) => {
-
     const Component = Tag;
 
+    // When there's no label text at all, skip the label container entirely so its
+    // sibling `gap-[8px]` doesn't leave an empty gap above the children (e.g. a
+    // label-less Textarea/Input should sit flush).
+    const hasLabelContent = Boolean(label || secondaryLabel || requiredLabel);
+
     return (
       <Component
         data-theme={theme}
         ref={forwardedRef}
-        className={cn("flex flex-0 w-fit [&_p]:!leading-none gap-[8px]", {
-          "flex-col justify-start items-start": childrenDirections === "vertical",
-          "flex-row justify-start items-center": childrenDirections === "horizontal",
-          "flex-row-reverse": reverseChildren && childrenDirections === "horizontal",
-          "flex-col-reverse": reverseChildren && childrenDirections === "vertical",
-        }, className)}
+        className={cn(
+          "flex flex-0 w-fit [&_p]:!leading-none gap-[8px]",
+          {
+            "flex-col justify-start items-start": childrenDirections === "vertical",
+            "flex-row justify-start items-center": childrenDirections === "horizontal",
+            "flex-row-reverse": reverseChildren && childrenDirections === "horizontal",
+            "flex-col-reverse": reverseChildren && childrenDirections === "vertical",
+          },
+          className,
+        )}
         {...props}
       >
-        <div className={cn(labelComponentVariants({ labelDirections }), labelsClassName)} >
-          {label && (
-            <p
-              className={cn(
-                "text-start",
-                {
-                  "typography-body-small-regular": size === "S",
-                  "typography-body-medium-regular": size === "M",
-                  "typography-body-large-regular": size === "L",
-                },
-                {
-                  "text-content-presentation-global-primary":
-                    variant === "PresentationStyle",
-                  "text-[#E5E5E5]": variant === "SystemStyle",
-                }
-              )}
-            >
-              {label}
-            </p>
-          )}
-          {secondaryLabel && (
-            <p
-              className={cn(
-                "text-content-presentation-global-secondary text-start",
-                {
+        {hasLabelContent && (
+          <div className={cn(labelComponentVariants({ labelDirections }), labelsClassName)}>
+            {label && (
+              <p
+                className={cn(
+                  "text-start",
+                  {
+                    "typography-body-small-regular": size === "S",
+                    "typography-body-medium-regular": size === "M",
+                    "typography-body-large-regular": size === "L",
+                  },
+                  {
+                    "text-content-presentation-global-primary": variant === "PresentationStyle",
+                    "text-[#E5E5E5]": variant === "SystemStyle",
+                  },
+                )}
+              >
+                {label}
+              </p>
+            )}
+            {secondaryLabel && (
+              <p
+                className={cn("text-content-presentation-global-secondary text-start", {
                   "typography-labels-small-regular": size === "S",
                   "typography-labels-medium-regular": size === "M",
                   "typography-body-small-regular": size === "L",
-                }
-              )}
-            >
-              {secondaryLabel}
-            </p>
-          )}
-          {requiredLabel && (
-            <p
-              className={cn(
-                "text-content-presentation-state-negative text-start",
-                {
+                })}
+              >
+                {secondaryLabel}
+              </p>
+            )}
+            {requiredLabel && (
+              <p
+                className={cn("text-content-presentation-state-negative text-start", {
                   "typography-labels-small-medium": size === "S",
                   "typography-labels-medium-medium": size === "M",
                   "typography-body-small-medium": size === "L",
-                }
-              )}
-            >
-              {requiredLabel}
-            </p>
-          )}
-        </div>
+                })}
+              >
+                {requiredLabel}
+              </p>
+            )}
+          </div>
+        )}
         {children}
-      </Component >
+      </Component>
     );
-  }
+  },
 );
 Label.displayName = "Label";

package/apps/lib/components/LabelField.tsx

@@ -4,8 +4,7 @@ import { Label } from "./Label";
 import { ToolTipSide } from "./Tooltip";
 import { Themes } from "../utils/types";
 
-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
@@ -19,7 +18,7 @@ export interface Props
   labelDirections?: "vertical" | "horizontal"; // to change the direction of the label
   childrenDirections?: "vertical" | "horizontal"; // to change the direction of the children
   toolTipSide?: ToolTipSide;
-  theme?: Themes
+  theme?: Themes;
 }
 
 export const LabelField = forwardRef<HTMLInputElement, Props>(
@@ -43,7 +42,7 @@ export const LabelField = forwardRef<HTMLInputElement, Props>(
 
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <Label
@@ -71,7 +70,7 @@ export const LabelField = forwardRef<HTMLInputElement, Props>(
         />
       </Label>
     );
-  }
+  },
 );
 
 LabelField.displayName = "LabelField";

package/apps/lib/components/LabeledCheckBox.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { forwardRef } from "react";
 import { Label } from "./Label";
 import { Themes } from "../utils/types";
@@ -10,23 +10,26 @@ interface Props extends Omit<React.ComponentProps<typeof Checkbox>, "size"> {
   secondaryLabel?: string;
   requiredLabel?: string;
   size?: "S" | "M" | "L";
-  theme?: Themes
+  theme?: Themes;
 }
 
 export const LabeledCheckBox = forwardRef<HTMLButtonElement, Props>(
   (
     {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
       id,
       label,
       secondaryLabel,
       requiredLabel,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
       type = "checkbox",
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
       theme,
       className,
       size = "M",
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <Label
@@ -39,17 +42,10 @@ export const LabeledCheckBox = forwardRef<HTMLButtonElement, Props>(
         className={cn(className)}
         reverseChildren
       >
-        <Checkbox
-          {...props}
-          size={size === "L" ? "M" : size}
-          ref={ref}
-        />
+        <Checkbox {...props} size={size === "L" ? "M" : size} ref={ref} />
       </Label>
-
-
     );
-  }
+  },
 );
 
 LabeledCheckBox.displayName = "LabeledCheckBox";
-

package/apps/lib/components/LabeledRadio.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { forwardRef } from "react";
 import { Label } from "./Label";
 import { Radio } from "./Radio";
@@ -20,13 +20,15 @@ export const LabeledRadio = forwardRef<HTMLButtonElement, Props>(
       secondaryLabel,
       requiredLabel,
       size = "M",
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
       type = "radio",
       className,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
       name,
       id,
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <Label
@@ -40,10 +42,10 @@ export const LabeledRadio = forwardRef<HTMLButtonElement, Props>(
         id={id}
         reverseChildren
       >
-        <Radio id={id}  {...props} data-theme={theme} ref={ref} />
+        <Radio id={id} {...props} data-theme={theme} ref={ref} />
       </Label>
     );
-  }
+  },
 );
 
-LabeledRadio.displayName = "LabeledRadio";
+LabeledRadio.displayName = "LabeledRadio";

package/apps/lib/components/LinkButton.tsx

@@ -55,9 +55,7 @@ export const LinkButton: React.FC<Props> = ({
         className,
       )}
     >
-      <div className="px-[3px] whitespace-nowrap break-keep">
-        {props.children}
-      </div>
+      <div className="px-[3px] whitespace-nowrap break-keep">{props.children}</div>
       <div
         className={cn(
           "rounded-[4px] overflow-hidden",
@@ -83,12 +81,7 @@ export const LinkButton: React.FC<Props> = ({
 };
 
 const Arrow = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 10 10"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
+  <svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M1.81582 1.58451L3.2807 0.119629L9.12479 0.875203L9.88037 6.71929L8.41549 8.18417L7.78584 3.31409L3.35267 7.74727L2.25272 6.64733L6.6859 2.21415L1.81582 1.58451Z"
       fill="#F9F9F9"

package/apps/lib/components/LoginButton.tsx

@@ -27,14 +27,13 @@ const buttonVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   isLoading?: boolean;
-  theme?: Themes
+  theme?: Themes;
 }
 
 export function LoginButton({
@@ -46,11 +45,7 @@ export function LoginButton({
 }: ButtonProps) {
   return (
     <button data-theme={theme} {...props} className={cn(buttonVariants({ variant, className }))}>
-      {isLoading ? (
-        <LoadingIcon className="w-[20px] h-[20px]" />
-      ) : (
-        props.children
-      )}
+      {isLoading ? <LoadingIcon className="w-[20px] h-[20px]" /> : props.children}
     </button>
   );
 }

package/apps/lib/components/PasswordLevel.tsx

@@ -4,7 +4,7 @@ import { HTMLAttributes, useEffect, useState } from "react";
 
 interface PassCheckProps extends HTMLAttributes<HTMLDivElement> {
   value: string; // The password value to check
-  theme?: Themes
+  theme?: Themes;
 }
 
 export function PasswordLevel({ theme, value, className, ...props }: PassCheckProps) {
@@ -26,7 +26,7 @@ export function PasswordLevel({ theme, value, className, ...props }: PassCheckPr
       {...props}
       className={cn(
         "bg-background-system-body-secondary rounded-[4px] border border-solid border-border-system-global-primary p-[4px] grid grid-cols-3 gap-[4px] w-full ",
-        className
+        className,
       )}
     >
       <div
@@ -34,7 +34,7 @@ export function PasswordLevel({ theme, value, className, ...props }: PassCheckPr
           "h-[4px] rounded-[8px] transition-all duration-300 ease-in-out bg-border-system-global-secondary",
           {
             "bg-border-presentation-state-negative": level >= 1,
-          }
+          },
         )}
       />
       <div
@@ -42,7 +42,7 @@ export function PasswordLevel({ theme, value, className, ...props }: PassCheckPr
           "h-[4px] rounded-[8px] transition-all duration-300 ease-in-out bg-border-system-global-secondary",
           {
             "bg-border-presentation-state-warning": level >= 2,
-          }
+          },
         )}
       />
       <div
@@ -50,7 +50,7 @@ export function PasswordLevel({ theme, value, className, ...props }: PassCheckPr
           "h-[4px] rounded-[8px] transition-all duration-300 ease-in-out bg-border-system-global-secondary",
           {
             "bg-border-presentation-state-success": level >= 3,
-          }
+          },
         )}
       />
     </div>