torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/Label.tsx

@@ -1,129 +0,0 @@
-import { LabelHTMLAttributes, ReactNode } from "react";
-import React from "react";
-import { cn } from "../utils/cn";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Themes } from "../utils/types";
-
-const labelComponentVariants = cva("flex", {
-  variants: {
-    labelDirections: {
-      vertical: "flex-col justify-start items-start gap-1",
-      horizontal: "flex-row justify-start items-center gap-1",
-    },
-  },
-  defaultVariants: {
-    labelDirections: "horizontal",
-  },
-});
-
-interface Props
-  extends LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelComponentVariants> {
-  label?: ReactNode; // main label
-  requiredLabel?: ReactNode; // normal text with required style
-  secondaryLabel?: ReactNode; // normal text with secondary style
-  as?: React.ElementType;
-  asChild?: boolean;
-  size?: "S" | "M" | "L";
-  variant?: "SystemStyle" | "PresentationStyle";
-  theme?: Themes;
-  labelsClassName?: string;
-  labelDirections?: "vertical" | "horizontal";
-  childrenDirections?: "vertical" | "horizontal";
-  reverseChildren?: boolean;
-}
-
-export const Label = React.forwardRef<HTMLLabelElement, Props>(
-  (
-    {
-      children,
-      label,
-      secondaryLabel,
-      requiredLabel,
-      size = "M",
-      labelDirections = "horizontal",
-      childrenDirections = "vertical",
-      reverseChildren = false,
-      className,
-      labelsClassName,
-      variant = "PresentationStyle",
-      theme,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      asChild, // excluded from ...props spread
-      as: Tag = "label",
-      ...props
-    },
-    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,
-        )}
-        {...props}
-      >
-        {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", {
-                  "typography-labels-small-medium": size === "S",
-                  "typography-labels-medium-medium": size === "M",
-                  "typography-body-small-medium": size === "L",
-                })}
-              >
-                {requiredLabel}
-              </p>
-            )}
-          </div>
-        )}
-        {children}
-      </Component>
-    );
-  },
-);
-Label.displayName = "Label";

package/apps/lib/components/LabelField.tsx

@@ -1,76 +0,0 @@
-import { InputHTMLAttributes, ReactNode, forwardRef } from "react";
-import { InputField } from "./InputField";
-import { Label } from "./Label";
-import { ToolTipSide } from "./Tooltip";
-import { Themes } from "../utils/types";
-
-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
-  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?: ReactNode; // main label
-  requiredLabel?: ReactNode; // normal text with required style
-  secondaryLabel?: ReactNode; // normal text with secondary style
-  labelDirections?: "vertical" | "horizontal"; // to change the direction of the label
-  childrenDirections?: "vertical" | "horizontal"; // to change the direction of the children
-  toolTipSide?: ToolTipSide;
-  theme?: Themes;
-}
-
-export const LabelField = forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      label,
-      requiredLabel,
-      secondaryLabel,
-      size,
-      variant,
-      theme,
-      icon,
-      childrenSide,
-      popoverChildren,
-      errorMessage,
-      onTable,
-      className,
-      labelDirections,
-      childrenDirections,
-      toolTipSide,
-
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <Label
-        data-theme={theme}
-        label={label}
-        requiredLabel={requiredLabel}
-        secondaryLabel={secondaryLabel}
-        labelDirections={labelDirections}
-        childrenDirections={childrenDirections}
-        variant={variant}
-        className={className}
-      >
-        <InputField
-          {...props}
-          theme={theme}
-          ref={ref}
-          size={size}
-          icon={icon}
-          toolTipSide={toolTipSide}
-          variant={variant}
-          childrenSide={childrenSide}
-          popoverChildren={popoverChildren}
-          errorMessage={errorMessage}
-          onTable={onTable}
-        />
-      </Label>
-    );
-  },
-);
-
-LabelField.displayName = "LabelField";

package/apps/lib/components/LabeledCheckBox.tsx

@@ -1,51 +0,0 @@
-"use client";
-import { forwardRef } from "react";
-import { Label } from "./Label";
-import { Themes } from "../utils/types";
-import { Checkbox } from "./Checkbox";
-import { cn } from "../utils/cn";
-interface Props extends Omit<React.ComponentProps<typeof Checkbox>, "size"> {
-  label: string;
-  id: string;
-  secondaryLabel?: string;
-  requiredLabel?: string;
-  size?: "S" | "M" | "L";
-  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,
-  ) => {
-    return (
-      <Label
-        label={label}
-        labelDirections="horizontal"
-        childrenDirections="horizontal"
-        secondaryLabel={secondaryLabel}
-        requiredLabel={requiredLabel}
-        size={size}
-        className={cn(className)}
-        reverseChildren
-      >
-        <Checkbox {...props} size={size === "L" ? "M" : size} ref={ref} />
-      </Label>
-    );
-  },
-);
-
-LabeledCheckBox.displayName = "LabeledCheckBox";

package/apps/lib/components/LabeledRadio.tsx

@@ -1,51 +0,0 @@
-"use client";
-import { forwardRef } from "react";
-import { Label } from "./Label";
-import { Radio } from "./Radio";
-import { cn } from "../utils/cn";
-interface Props extends Omit<React.ComponentProps<typeof Radio>, "size"> {
-  label?: string;
-  secondaryLabel?: string;
-  requiredLabel?: string;
-  size?: "S" | "M" | "L";
-  theme?: "dark" | "light" | "default";
-  name?: string;
-}
-
-export const LabeledRadio = forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      label,
-      theme,
-      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,
-  ) => {
-    return (
-      <Label
-        label={label}
-        secondaryLabel={secondaryLabel}
-        requiredLabel={requiredLabel}
-        size={size === "L" ? "M" : size}
-        labelDirections="horizontal"
-        childrenDirections="horizontal"
-        className={cn(className)}
-        id={id}
-        reverseChildren
-      >
-        <Radio id={id} {...props} data-theme={theme} ref={ref} />
-      </Label>
-    );
-  },
-);
-
-LabeledRadio.displayName = "LabeledRadio";

package/apps/lib/components/LinkButton.tsx

@@ -1,94 +0,0 @@
-import React, { HTMLAttributes, SVGProps } from "react";
-import { cva } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-import { Slot } from "@radix-ui/react-slot";
-
-// Link button base styles
-export const linkButtonStyles = cva(
-  [
-    "bg-background-presentation-action-link-primary w-fit",
-    "flex items-center justify-center",
-    "rounded-[6px]",
-    "p-[2px]",
-    "text-content-presentation-global-link",
-    "hover:bg-background-presentation-button-link-hover hover:px-[2px]",
-    "transition-all duration-250 ease-in-out",
-    "group", // Add group class here
-  ],
-  {
-    variants: {
-      size: {
-        S: "h-[24px] typography-body-small-semibold",
-        M: "h-[26px] typography-body-medium-semibold",
-      },
-    },
-    defaultVariants: {
-      size: "S",
-    },
-  },
-);
-
-interface Props extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
-  size?: "S" | "M"; // this props will change the button style size see on figma design file
-  theme?: Themes;
-  asChild?: boolean;
-  href?: string;
-}
-
-export const LinkButton: React.FC<Props> = ({
-  theme,
-  className,
-  size = "S",
-  asChild,
-  ...props
-}) => {
-  const Component = asChild ? Slot : props.href ? "a" : "span";
-  return (
-    <Component
-      {...props}
-      data-theme={theme}
-      className={cn(
-        linkButtonStyles({
-          size: size,
-        }),
-        className,
-      )}
-    >
-      <div className="px-[3px] whitespace-nowrap break-keep">{props.children}</div>
-      <div
-        className={cn(
-          "rounded-[4px] overflow-hidden",
-          "bg-background-presentation-state-information-primary",
-          "transition-all duration-[100] ease-in-out",
-          "h-0 w-0 p-0",
-          "opacity-0 group-hover:opacity-100 group-hover:p-[3px]",
-          {
-            "group-hover:w-[20px] group-hover:h-[20px]": size === "S",
-            "group-hover:w-[22px] group-hover:h-[22px]": size === "M",
-          },
-        )}
-      >
-        <Arrow
-          className={cn("w-0 h-0 rtl:rotate-[260deg]", {
-            "group-hover:w-[14px] group-hover:h-[14px]": size === "S",
-            "group-hover:w-[16px] group-hover:h-[16px]": size === "M",
-          })}
-        />
-      </div>
-    </Component>
-  );
-};
-
-const Arrow = (props: SVGProps<SVGSVGElement>) => (
-  <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"
-    />
-    <path
-      d="M0.325211 8.57478L1.48169 7.4183L2.58164 8.51824L1.42515 9.67472L0.325211 8.57478Z"
-      fill="#F9F9F9"
-    />
-  </svg>
-);

package/apps/lib/components/LoginButton.tsx

@@ -1,51 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn"; // Assuming you have a `cn` utility
-import { ButtonHTMLAttributes } from "react";
-import { LoadingIcon } from "./Button";
-import { Themes } from "../utils/types";
-
-const buttonVariants = cva(
-  "w-full h-[42px] rounded-[8px] typography-body-large-regular flex justify-center items-center transition-all duration-250 ease-in-out border",
-  {
-    variants: {
-      variant: {
-        default: [
-          "bg-background-system-body-primary",
-          "text-content-system-global-primary",
-          "border-border-system-global-primary",
-          "hover:border-[#9748FF]",
-        ],
-        noBg: [
-          "bg-transparent",
-          "border-border-system-global-primary",
-          "text-content-system-global-primary",
-          "hover:border-[#9748FF]",
-          "no-underline",
-        ],
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  isLoading?: boolean;
-  theme?: Themes;
-}
-
-export function LoginButton({
-  variant = "default",
-  className,
-  isLoading,
-  theme,
-  ...props
-}: ButtonProps) {
-  return (
-    <button data-theme={theme} {...props} className={cn(buttonVariants({ variant, className }))}>
-      {isLoading ? <LoadingIcon className="w-[20px] h-[20px]" /> : props.children}
-    </button>
-  );
-}

package/apps/lib/components/PasswordLevel.tsx

@@ -1,58 +0,0 @@
-import { Themes } from "../utils/types";
-import { cn } from "../utils/cn"; // Assuming you have a `cn` utility
-import { HTMLAttributes, useEffect, useState } from "react";
-
-interface PassCheckProps extends HTMLAttributes<HTMLDivElement> {
-  value: string; // The password value to check
-  theme?: Themes;
-}
-
-export function PasswordLevel({ theme, value, className, ...props }: PassCheckProps) {
-  const [level, setLevel] = useState<number>(0);
-
-  useEffect(() => {
-    const symbolRegex = /[!@#$%^&*(),.?":{}|<>]/;
-    const uppercaseRegex = /[A-Z]/;
-    let passwordLev = 0;
-    if (value.length >= 6) passwordLev++;
-    if (symbolRegex.test(value)) passwordLev++;
-    if (uppercaseRegex.test(value)) passwordLev++;
-    setLevel(passwordLev);
-  }, [value]);
-
-  return (
-    <div
-      data-theme={theme}
-      {...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,
-      )}
-    >
-      <div
-        className={cn(
-          "h-[4px] rounded-[8px] transition-all duration-300 ease-in-out bg-border-system-global-secondary",
-          {
-            "bg-border-presentation-state-negative": level >= 1,
-          },
-        )}
-      />
-      <div
-        className={cn(
-          "h-[4px] rounded-[8px] transition-all duration-300 ease-in-out bg-border-system-global-secondary",
-          {
-            "bg-border-presentation-state-warning": level >= 2,
-          },
-        )}
-      />
-      <div
-        className={cn(
-          "h-[4px] rounded-[8px] transition-all duration-300 ease-in-out bg-border-system-global-secondary",
-          {
-            "bg-border-presentation-state-success": level >= 3,
-          },
-        )}
-      />
-    </div>
-  );
-}