torch-glare 1.0.1

package/lib/components/LabeledCheckBox.tsx

@@ -0,0 +1,65 @@
+'use client';
+import { InputHTMLAttributes, forwardRef, useState } from "react";
+import { Label } from "./Label";
+import { cn } from "../utils/cn";
+import { cva } from "class-variance-authority";
+import { Themes } from "../utils/types";
+import { Checkbox } from "./Checkbox";
+
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label: string;
+  id: string;
+  secondaryLabel?: string;
+  requiredLabel?: string;
+  directions?: "vertical" | "horizontal";
+  size?: "S" | "M" | "L";
+  theme?: Themes
+}
+
+export const LabeledCheckBox = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      id,
+      label,
+      secondaryLabel,
+      requiredLabel,
+      type = "checkbox",
+      directions,
+      theme,
+      className,
+      size = "M",
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <label
+        htmlFor={id}
+        data-theme={theme}
+        className={cn("flex items-center gap-1  group", className)}
+      >
+        <Checkbox
+          {...props}
+          id={id}
+          disabled={props.disabled}
+          type={type}
+          size={size}
+          ref={ref}
+        >
+          <Label
+            className="leading-none"
+            htmlFor={id}
+            label={label}
+            secondaryLabel={secondaryLabel}
+            requiredLabel={requiredLabel}
+            size={size}
+            directions={directions}
+          />
+        </Checkbox>
+      </label>
+    );
+  }
+);
+
+LabeledCheckBox.displayName = "LabeledCheckBox";
+

package/lib/components/LabeledRadio.tsx

@@ -0,0 +1,45 @@
+'use client'
+import { InputHTMLAttributes, forwardRef } from "react";
+import { Label } from "./Label";
+import { Radio } from "./Radio";
+
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  secondaryLabel?: string;
+  requiredLabel?: string;
+  size?: "S" | "M" | "L";
+  directions?: "vertical" | "horizontal";
+  theme?: "dark" | "light" | "default";
+}
+
+export const LabeledRadio = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      label,
+      theme,
+      secondaryLabel,
+      requiredLabel,
+      size = "M",
+      type = "radio",
+      directions,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Radio {...props} data-theme={theme} checked={props.checked} size={size} ref={ref} >
+        <Label
+          htmlFor={props.id}
+          label={label}
+          secondaryLabel={secondaryLabel}
+          requiredLabel={requiredLabel}
+          size={size}
+          directions={directions}
+        />
+      </Radio>
+    );
+  }
+);
+
+LabeledRadio.displayName = "LabeledRadio";

package/lib/components/LinkButton.tsx

@@ -0,0 +1,90 @@
+import React, { AnchorHTMLAttributes, SVGProps } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+// 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-action-link",
+    "hover:bg-background-presentation-action-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 AnchorHTMLAttributes<HTMLAnchorElement> {
+  size?: "S" | "M"; // this props will change the button style size see on figma design file
+  theme?: Themes
+}
+
+export const LinkButton: React.FC<Props> = ({ theme, size = "S", className, ...props }) => {
+  return (
+    <a
+      {...props}
+      data-theme={theme}
+      className={cn(
+        linkButtonStyles({
+          size: size,
+        }),
+        className
+      )}
+    >
+      <p className="px-[3px]">{props.children}</p>
+      <div
+        className={cn(
+          "rounded-[4px]",
+          "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",
+          "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("rtl:rotate-[260deg]", {
+            "group-hover:w-[14px] group-hover:h-[14px]": size === "S",
+            "group-hover:w-[16px] group-hover:h-[16px]": size === "M",
+          })}
+        />
+      </div>
+    </a>
+  );
+};
+
+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/lib/components/LoginButton.tsx

@@ -0,0 +1,56 @@
+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/lib/components/PasswordLevel.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+}

package/lib/components/Popover.tsx

@@ -0,0 +1,274 @@
+'use client'
+import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import React, { useEffect, useRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Slot } from "@radix-ui/react-slot";
+import { Themes } from "../utils/types";
+
+interface LocalPopOverProps extends VariantProps<typeof dropdownMenuStyles> {
+  variant?: "SystemStyle" | "PresentationStyle";
+  className?: string;
+  overlayBlur?: boolean;
+}
+
+const dropdownMenuStyles = cva(
+  [
+    "p-1 max-h-[200px] z-[1000]",
+    "rounded-[8px]",
+    "border",
+    "min-w-[240px]",
+    "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",
+    "scrollbar-hide",
+    "overflow-x-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        SystemStyle: [
+          "border-border-system-global-secondary",
+          "bg-background-system-body-primary",
+          "shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)]",
+        ],
+        PresentationStyle: [
+          "border-border-presentation-global-primary",
+          "bg-background-presentation-form-base",
+          "shadow-[0px_0px_10px_0px_rgba(0,0,0,0.4),0px_4px_4px_0px_rgba(0,0,0,0.2)]",
+        ],
+      },
+      overlayBlur: {
+        true: ["h-fit"],
+      },
+      defaultVariants: {
+        variant: "PresentationStyle",
+      },
+    },
+  }
+);
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
+    className?: string
+  }
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "z-[20] transition-all duration-300 data-[state=open]:z-[49]",
+      className
+    )}
+    {...props}
+  />
+));
+
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+  LocalPopOverProps & {
+    theme?: Themes
+  }
+>(
+  (
+    {
+      className,
+      align = "center",
+      sideOffset = 4,
+      variant = "SystemStyle",
+      overlayBlur = false,
+      theme,
+      ...props
+    },
+    ref
+  ) => (
+    <PopoverPrimitive.Portal>
+      {overlayBlur ? (
+        <div className="relative z-[42]" data-theme={theme}>
+          <div className="fixed top-0 left-0 flex h-full w-full items-center flex-shrink-0 bg-[rgba(16,7,25,0.32)] backdrop-blur-[8px] transition-all duration-300"></div>
+          <PopoverPrimitive.Content
+            ref={ref}
+            align={align}
+            sideOffset={sideOffset}
+            className={cn(
+              dropdownMenuStyles({ variant, overlayBlur }),
+              className
+            )}
+            {...props}
+          />
+        </div>
+      ) : (
+        <PopoverPrimitive.Content
+          data-theme={theme}
+          ref={ref}
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            dropdownMenuStyles({ variant, overlayBlur }),
+            className
+          )}
+          {...props}
+        />
+      )}
+    </PopoverPrimitive.Portal>
+  )
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// Define the Props interface with a generic type parameter
+interface Props<T extends React.ElementType = "li">
+  extends React.HTMLAttributes<HTMLElement>,
+  VariantProps<typeof PopoverItemStyles> {
+  asChild?: boolean;
+  as?: T; // The `as` prop can be any valid HTML element or React component
+}
+
+// Define the PopoverItem component with a generic type parameter
+const PopoverItem = <T extends React.ElementType = "li">({
+  variant = "SystemStyle",
+  size = "M",
+  asChild,
+  className,
+  children,
+  active,
+  as = "li" as T, // Default to "li" if `as` is not provided
+  ...props
+}: Props<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof Props<T>>) => {
+  const Component = asChild ? Slot : as;
+  const ref = useRef<HTMLLIElement>(null);
+
+  // Scroll to the selected item when the dropdown is opened
+  useEffect(() => {
+    if (active && ref.current) {
+      ref.current.scrollIntoView({ behavior: "auto", block: "center" });
+    }
+  }, [active]);
+
+  return (
+    <Component
+      {...(props as React.ComponentPropsWithoutRef<T>)} // Spread the props dynamically
+      className={cn(
+        PopoverItemStyles({
+          variant,
+          size,
+          active,
+        }),
+        className
+      )}
+      /// <reference path="" />
+      ref={ref}
+    >
+      {children}
+    </Component>
+  );
+};
+
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverItem };
+
+export const PopoverItemStyles = 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: {
+        Default: [
+          "text-content-presentation-action-light-primary",
+          "bg-background-presentation-action-dropdown-primary",
+          "hover:bg-background-presentation-action-hover",
+          "hover:text-content-presentation-action-hover",
+          "focus:bg-background-presentation-action-selected",
+          "focus:text-content-presentation-action-light-primary",
+          "active:border-border-presentation-action-disabled",
+          "active:bg-background-presentation-action-selected",
+          "active:text-content-presentation-action-light-primary",
+          "active:border-border-presentation-action-disabled",
+          "disabled:text-content-presentation-state-disabled",
+          "disabled:bg-white-00",
+        ],
+        Warning: [
+          "bg-background-presentation-action-dropdown-primary",
+          "text-content-presentation-state-information",
+          "hover:bg-background-presentation-state-information-primary",
+          "hover:text-content-presentation-action-hover",
+        ],
+        Negative: [
+          "bg-background-presentation-action-dropdown-primary",
+          "text-content-presentation-state-negative",
+          "hover:bg-background-presentation-state-negative-primary",
+          "hover:!text-content-presentation-action-hover",
+          "focus:text-content-presentation-state-negative",
+          "active:text-content-presentation-state-negative",
+        ],
+        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-Selected",
+          "focus:border-transparent",
+          "active:border-transparent",
+          "active:bg-background-System-Action-Primary-Selected",
+          "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",
+        ],
+      },
+
+      active: {
+        true: [
+          "bg-background-presentation-action-selected",
+          "text-content-presentation-action-light-primary",
+        ],
+      },
+
+      defaultVariants: {
+        variant: "Default",
+        size: "M",
+        active: false,
+        disabled: false,
+      },
+    },
+    compoundVariants: [
+      {
+        active: true,
+        variant: "Warning",
+        className: ["text-content-presentation-state-negative"],
+      },
+    ],
+  }
+);

package/lib/components/ProfileMenu.tsx

@@ -0,0 +1,90 @@
+import { HTMLAttributes, ReactNode, useEffect, useState } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+
+// Define the base styles and variants using `cva`
+export const profileItemStyles = cva(
+    "flex items-center justify-between group w-full p-[6px] outline-none rounded-[8px] fucus:bg-background-system-action-primary-selected active:bg-background-system-action-primary-selected transition-all ease-in-out duration-150",
+    {
+        variants: {
+            selected: {
+                true: "bg-background-system-action-primary-selected",
+            }
+        },
+    }
+);
+
+interface ProfileItemProps extends HTMLAttributes<HTMLButtonElement> {
+    label: ReactNode;
+    selected?: boolean
+    icon?: string;
+    theme?: "dark" | "light" | "default";
+    popoverChildren?: ReactNode
+    overlayBlur?: boolean
+}
+
+export const ProfileMenu: React.FC<ProfileItemProps> = ({
+    label,
+    selected,
+    icon,
+    theme,
+    className,
+    popoverChildren,
+    overlayBlur,
+    ...props
+}) => {
+
+    const [isOpen, setIsOpen] = useState(selected);
+    const [dropdownWidth, setDropdownWidth] = useState(0);
+
+    useEffect(() => {
+        setIsOpen(selected);
+    }, [selected])
+    return (
+        <Popover onOpenChange={(open) => setIsOpen(open)} >
+            <PopoverTrigger asChild>
+                <button
+                    {...props}
+                    data-theme={theme}
+                    className={cn(
+                        profileItemStyles({ selected }),
+                        className
+                    )}
+                    onPointerDown={(e: any) => {
+                        props.onPointerDown && props.onPointerDown(e);
+                        setDropdownWidth(e.currentTarget.offsetWidth);
+                    }}
+                >
+                    <div className="flex items-center gap-2">
+                        <div className="flex items-center">
+                            <span className="h-[28px] w-[2px] bg-transparent group-hover:bg-[#9748FF] group-hover:mr-[6px] transition-all ease-in-out duration-150"></span>
+                            <img className="w-[28px] h-[28px] rounded-full object-cover" src={icon} alt="" />
+                        </div>
+
+                        <p
+                            className={cn(
+                                "typography-body-medium-medium text-content-system-global-primary",
+                            )}
+                        >
+                            {label}
+                        </p>
+                    </div>
+
+
+                    <i className={cn("ri-arrow-down-s-line text-[18px] text-content-system-global-primary group-hover:text-[#9748FF] transition-all ease-in-out duration-150", { "rotate-180": isOpen && popoverChildren })}></i>
+                </button>
+            </PopoverTrigger>
+            {
+                popoverChildren &&
+                <PopoverContent
+                    overlayBlur={overlayBlur}
+                    style={{ width: `${dropdownWidth}px` }}
+                    theme={theme}>
+                    {popoverChildren}
+                </PopoverContent>
+            }
+        </Popover>
+    );
+};
+