torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/InnerLabelField.tsx

@@ -1,154 +0,0 @@
-"use client";
-
-import { forwardRef, InputHTMLAttributes, ReactNode, useState } from "react";
-import { InputField } from "./InputField";
-import { ToolTipSide } from "./Tooltip";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-
-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
-  childrenSide?: ReactNode; // to add action button to the end of the input
-  popoverChildren?: ReactNode; // to add drop down list if you pass it
-  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
-  label?: string; // to show label
-  required?: boolean; // to show required icon
-  toolTipSide?: ToolTipSide;
-  theme?: Themes;
-}
-
-export const InnerLabelField = forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      size = "M",
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      icon, // excluded from ...props spread (icon is overridden below)
-      childrenSide,
-      popoverChildren,
-      errorMessage,
-      onTable,
-      variant,
-      className,
-      label,
-      theme,
-      required,
-      toolTipSide,
-      ...props
-    },
-    ref,
-  ) => {
-    const [focus, setFocus] = useState(false);
-    const [isEmpty, setIsEmpty] = useState(!props.value);
-
-    return (
-      <InputField
-        {...props}
-        theme={theme}
-        onFocus={(e) => {
-          setFocus(true);
-          props.onFocus?.(e);
-        }}
-        onBlur={(e) => {
-          setFocus(false);
-          props.onBlur?.(e);
-        }}
-        onChange={(e) => {
-          setIsEmpty(!e.target.value);
-          props.onChange?.(e);
-        }}
-        className={cn(className, "group")}
-        ref={ref}
-        toolTipSide={toolTipSide}
-        size={size}
-        variant={variant}
-        childrenSide={childrenSide}
-        popoverChildren={popoverChildren}
-        errorMessage={errorMessage}
-        onTable={onTable}
-        icon={
-          <Label
-            focus={focus}
-            isEmpty={isEmpty}
-            label={label}
-            required={required}
-            disabled={props.disabled}
-            error={!errorMessage}
-          />
-        }
-      />
-    );
-  },
-);
-
-InnerLabelField.displayName = "InnerLabelField";
-
-const Label = ({
-  focus,
-  isEmpty,
-  label,
-  required,
-  disabled,
-  error,
-}: {
-  focus: boolean;
-  isEmpty: boolean;
-  label?: string;
-  required?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-}) => {
-  return (
-    <section className="flex items-center">
-      <section
-        className={cn([
-          "px-[3px]",
-          "typography-labels-small-regular",
-          "text-content-presentation-global-secondary",
-          "flex",
-          "items-center",
-        ])}
-      >
-        <p
-          className={cn(
-            "transition-all !leading-none",
-            "duration-300",
-            "ease-in-out",
-            "group-hover:text-content-presentation-global-primary group-hover:typography-body-small-regular",
-            { "text-content-presentation-global-primary typography-body-small-regular": isEmpty },
-            {
-              "text-content-presentation-global-primary typography-body-small-regular":
-                focus && isEmpty,
-            },
-            {
-              "text-content-presentation-global-primary typography-body-small-regular":
-                error && isEmpty,
-            },
-            {
-              "text-content-presentation-global-primary typography-body-small-regular":
-                disabled && isEmpty,
-            },
-          )}
-        >
-          {label}
-        </p>
-        {required && <p className="text-content-presentation-state-negative">*</p>}
-      </section>
-      <span
-        className={cn(
-          "w-[1px]",
-          "h-[12px]",
-          "bg-border-presentation-action-labelless-divider ",
-          "transition-all",
-          "duration-300",
-          "ease-in-out",
-          "rounded-full",
-          "group-hover:bg-border-presentation-action-hover",
-          "group-hover:h-[22px]",
-        )}
-      />
-    </section>
-  );
-};

package/apps/lib/components/Input.tsx

@@ -1,224 +0,0 @@
-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?: 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>
-    );
-  },
-);
-
-Group.displayName = "Group";
-
-interface IconProps {
-  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>
-  );
-};
-
-interface TrillingProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  className?: string;
-}
-export const Trilling = ({ children, className, ...props }: TrillingProps) => {
-  return (
-    // `ps-1` mirrors the inner side of Figma's `EndField-Container` (`p-[4px]`), keeping the field's
-    // text clear of the end button instead of running straight into it.
-    //
-    // Logical, not physical: this slot flips to the left edge in RTL, so a `pl-1` would put the
-    // padding on the outside — measured as 0px of clearance and the button 8px from the edge
-    // instead of 4px. `padding-inline-start` follows the slot.
-    <div
-      {...props}
-      className={cn("flex items-center justify-center h-full gap-1 py-1 ps-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);
-    }
-  };
-
-  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,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  -webkit-transition: "color 1000s ease-out, background-color 1000s ease-out";
-  -webkit-transition-delay: 1000s;
-}
-*/
-
-export const GroupStyles = cva(
-  [
-    // 3px, not 4: Figma's `EndField-Container` is `p-[4px]` and its stroke sits *inside* that
-    // padding, so the end button lands 4px from the field's outer edge. CSS `border-box` adds the
-    // 1px border on top of the padding, so 4px here would render 5px. 1 + 3 = 4.
-    "flex w-full min-w-0 px-[3px] 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",
-        ],
-      },
-      // Radius per Figma's `radius/*` collection: S is `radius/lg` (8px) and M is `radius/xl`
-      // (12px) — a deliberate jump, not consecutive steps. This `Group` is the shared field root,
-      // so it is also what gives `InputField` and `InnerLabelField` their corners.
-      size: {
-        S: [
-          "h-[30px] min-h-[30px]",
-          "rounded-radius-lg [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]",
-        ],
-        M: [
-          "h-[40px] min-h-[40px]",
-          "rounded-radius-xl [&_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",
-        ],
-      },
-      // Transparent border/background so the control blends into a table cell. The hover and
-      // focus shadows are deliberately left alone — a cell control lifts exactly like any
-      // other field.
-      onTable: {
-        true: ["border-transparent", "bg-transparent"],
-      },
-    },
-  },
-);

package/apps/lib/components/InputField.tsx

@@ -1,147 +0,0 @@
-"use client";
-import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from "react";
-import { cn } from "../utils/cn";
-import { ToolTipSide } from "./Tooltip";
-import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
-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"> {
-  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
-  childrenSide?: ReactNode; // to add action button to the end of the input
-  popoverChildren?: ReactNode; // to add drop down list if you pass it
-  /** Marks the field invalid: any non-undefined value turns on the negative border. */
-  errorMessage?: string;
-  onTable?: boolean; // to change the border style of the component when it is on table
-  /**
-   * @deprecated Ignored. The error tooltip was removed — an invalid field is shown by its negative
-   * border alone. Kept so existing call sites keep compiling; it will go in a future major.
-   */
-  toolTipSide?: ToolTipSide;
-  theme?: Themes;
-}
-
-export const InputField = forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      size = "M",
-      icon,
-      childrenSide,
-      popoverChildren,
-      errorMessage,
-      onTable,
-      variant = "PresentationStyle",
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op, destructured to keep it out of the {...props} spread
-      toolTipSide,
-      theme,
-      className,
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const [PopoverWidth, setPopoverWidth] = useState(0);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const triggerRef = useRef<HTMLButtonElement>(null);
-
-    useEffect(() => {
-      if (!forwardedRef) return;
-      if (typeof forwardedRef === "function") forwardedRef(inputRef.current);
-      else forwardedRef.current = inputRef.current;
-    }, [forwardedRef]);
-    // TODO: make the user input visible when input is focused
-    return (
-      <Popover onOpenChange={setIsPopoverOpen}>
-        <PopoverTrigger ref={triggerRef} asChild>
-          <Group
-            error={errorMessage !== undefined}
-            onTable={onTable}
-            size={size}
-            variant={variant}
-            data-theme={theme}
-            onFocus={(e) => {
-              setPopoverWidth(e.currentTarget.offsetWidth);
-              setIsPopoverOpen(!isPopoverOpen);
-              inputRef.current?.focus();
-            }}
-            className={className}
-          >
-            {icon && <Icon>{icon}</Icon>}
-            <Input
-              {...props}
-              onFocus={(e) => {
-                setIsPopoverOpen(true);
-                props.onFocus?.(e);
-              }}
-              onBlur={(e) => {
-                setIsPopoverOpen(false);
-                props.onBlur?.(e);
-              }}
-              ref={inputRef}
-            />
-
-            <Trilling>
-              {childrenSide}
-              {popoverChildren && (
-                <PopoverActionButton
-                  size={size}
-                  variant={variant}
-                  isPopoverOpen={isPopoverOpen}
-                  disabled={props.disabled}
-                />
-              )}
-            </Trilling>
-          </Group>
-        </PopoverTrigger>
-
-        {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;
-}) => {
-  return (
-    <ActionButton disabled={disabled} size={size}>
-      <i
-        className={cn(
-          "ri-arrow-down-s-line",
-          "transition-[transform,rotate]",
-          "duration-200",
-          "ease-in-out",
-          { "rotate-180": isPopoverOpen && !disabled },
-          { "!text-[16px]": size === "S" },
-          { "!text-[26px]": size === "M" },
-          { "text-white": variant === "SystemStyle" },
-        )}
-      />
-    </ActionButton>
-  );
-};

package/apps/lib/components/InputOTP.tsx

@@ -1,84 +0,0 @@
-"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>
->(({ 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";
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <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 }
->(({ index, className, ...props }, ref) => {
-  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>
-      )}
-    </div>
-  );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-const InputOTPSeparator = React.forwardRef<
-  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";
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };