torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/Popover.tsx

@@ -1,312 +0,0 @@
-"use client";
-import { cva, VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import React, { cloneElement, isValidElement, 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 popoverStyles> {
-  variant?: "SystemStyle" | "PresentationStyle";
-  className?: string;
-  overlayBlur?: boolean;
-}
-
-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 = "PresentationStyle",
-      overlayBlur = false,
-      theme,
-      children,
-      ...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(popoverStyles({ variant, overlayBlur }), className)}
-            {...props}
-          >
-            {children}
-          </PopoverPrimitive.Content>
-        </div>
-      ) : (
-        <PopoverPrimitive.Content
-          data-theme={theme}
-          ref={ref}
-          align={align}
-          sideOffset={sideOffset}
-          className={cn(popoverStyles({ variant, overlayBlur }), className)}
-          {...props}
-        >
-          {children}
-        </PopoverPrimitive.Content>
-      )}
-    </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 = "Default",
-  size = "M",
-  asChild,
-  className,
-  children,
-  active,
-  as = "button" 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]);
-
-  const itemClassName = cn(PopoverItemStyles({ variant, size, active }), className);
-
-  // The styles are a two-layer chip (see `PopoverItemStyles`): this element is the container and
-  // the inner div is the row that lights up, which every `[&>div]:` rule targets. It therefore has
-  // to exist in both branches.
-  if (asChild && isValidElement(children)) {
-    // Slot merges the item's props onto the consumer's element (e.g. a Link), so the row div has to
-    // be injected as that element's child — wrapping the Link instead would move the class onto the
-    // wrapper and leave the anchor nested inside the item rather than being it.
-    const child = children as React.ReactElement<{ children?: React.ReactNode }>;
-    return (
-      <Slot className={itemClassName} ref={ref as React.Ref<HTMLElement>}>
-        {cloneElement(child, {}, <div>{child.props.children}</div>)}
-      </Slot>
-    );
-  }
-
-  return (
-    <Component
-      {...(props as React.ComponentPropsWithoutRef<T>)} // Spread the props dynamically
-      className={itemClassName}
-      ref={ref}
-    >
-      <div>{children}</div>
-    </Component>
-  );
-};
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverItem };
-
-
-const PopoverItemStyles = cva(
-  // `MenuItemStyles` (ContextMenu/DropdownMenu) minus its grey wrapper fill: same 2px gutter, same
-  // inner `<div>` that lights up on hover/focus, but the row itself stays transparent on the panel.
-  // `PopoverItem` always renders that inner div, including through `asChild`.
-  [
-    "text-content-presentation-global-primary-light typography-body-medium-regular",
-    "outline-none",
-    "border",
-    "border-transparent",
-    "flex w-full",
-    "shrink-0", // keep full row height so the popover scrolls instead of squishing
-    "items-center",
-    "justify-start",
-    "text-overflow",
-    "overflow-hidden",
-    "p-[2px]",
-    "transition-all",
-    // No `bg-[rgba(184,192,204,0.36)]` here, unlike the menu's item: a popover row sits directly on
-    // the panel with no grey container behind it. Everything else is the menu's rule set.
-    "ease-in-out",
-    "duration-300",
-    "[&>div]:flex",
-    "[&>div]:px-[12px]",
-    "[&>div]:py-[4px]",
-    "[&>div]:gap-2",
-    "[&>div]:w-full",
-    "[&>div]:rounded-[8px]",
-    "[&>div]:items-center",
-    "group",
-  ],
-  {
-    variants: {
-      variant: {
-        // The menu marks its keyboard highlight with Radix's `data-highlighted` and its disabled
-        // rows with `data-disabled`; a PopoverItem is a plain <button>, so those become `:focus`
-        // and `:disabled` here. Everything else is the menu's rule set verbatim.
-        Default: [
-          "text-content-presentation-global-primary-light",
-          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
-          "[&>div]:hover:text-black-1000",
-          "[&:focus>div]:bg-white-alpha-75",
-          "[&:focus>div]:text-black-1000",
-          "[&:disabled>div]:text-content-presentation-global-primary-light",
-          "[&:disabled>div]:opacity-50",
-          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
-          "[&:disabled>div]:hover:bg-transparent",
-          "[&:disabled>div]:hover:shadow-none",
-        ],
-        Warning: [
-          "text-blue-sparkle-200",
-          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
-          "[&>div]:hover:text-blue-sparkle-700",
-          "[&:focus>div]:bg-white-alpha-75",
-          "[&:focus>div]:text-blue-sparkle-700",
-          "[&:disabled>div]:text-content-presentation-global-primary-light",
-          "[&:disabled>div]:opacity-50",
-          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
-          "[&:disabled>div]:hover:bg-transparent",
-          "[&:disabled>div]:hover:shadow-none",
-        ],
-        Negative: [
-          "text-medium-red-200",
-          "[&>div]:hover:bg-white-50 [&>div]:hover:shadow-[0_0_16px_0_rgba(0,0,0,0.36)]",
-          "[&>div]:hover:text-medium-red-600",
-          "[&:focus>div]:bg-white-alpha-75",
-          "[&:focus>div]:text-medium-red-600",
-          "[&:disabled>div]:text-content-presentation-global-primary-light",
-          "[&:disabled>div]:opacity-50",
-          "[&:disabled>div]:hover:text-content-presentation-global-primary-light",
-          "[&:disabled>div]:hover:bg-transparent",
-          "[&:disabled>div]:hover:shadow-none",
-        ],
-        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-secondary-hover",
-          "focus:text-content-system-action-primary-hover",
-          "focus:border-border-system-action-primary-hover",
-          "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",
-        ],
-      },
-    },
-    // Same misplacement as `popoverStyles` — a sibling of `variants`, not one of them.
-    defaultVariants: {
-      variant: "Default",
-      size: "M",
-      active: false,
-      disabled: false,
-    },
-    compoundVariants: [
-      {
-        active: true,
-        variant: "Warning",
-        className: ["text-content-presentation-state-negative"],
-      },
-    ],
-  },
-);
-
-const popoverStyles = cva(
-  [
-    // Cap at 200px but never exceed the room Radix actually has after collision handling, so a
-    // popover opened near a screen edge shrinks and scrolls instead of being cut off. Consumers that
-    // supply their own inner scroller override this with an inline `maxHeight`, which beats the class.
-    "p-1 max-h-[min(200px,var(--radix-popover-content-available-height,100vh))] z-[1000] shrink-0",
-    "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)]",
-        ],
-        // Figma `Dropdown-Menu-1.0` (1735:159246) — the same surface `menuContentStyles` renders,
-        // so a popover and a dropdown menu are indistinguishable panels.
-        PresentationStyle: [
-          // `border-0`, not `border-transparent`: the base sets `border`, and with `border-box`
-          // that 1px sits on top of the 4px padding, making the panel 2px wider than the design.
-          "border-0",
-          "rounded-[14px]",
-          "backdrop-blur-[21px]",
-          // The design's fill is a raw `rgba(61,64,69,0.72)` with no Figma variable behind it, so it
-          // is spelled out exactly as DropdownMenu/ContextMenu already spell it. It has to be
-          // translucent: over the previous opaque `form-base` the backdrop-blur painted nothing.
-          "bg-[rgba(61,64,69,0.72)]",
-          "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
-        ],
-      },
-      overlayBlur: {
-        true: ["h-fit"],
-      },
-    },
-    // Was nested inside `variants`, where cva reads it as a variant group called
-    // "defaultVariants" and no default is ever applied.
-    defaultVariants: {
-      variant: "PresentationStyle",
-    },
-  },
-);

package/apps/lib/components/ProfileMenu.tsx

@@ -1,85 +0,0 @@
-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: React.PointerEvent<HTMLButtonElement>) => {
-            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>
-  );
-};

package/apps/lib/components/Radio.tsx

@@ -1,59 +0,0 @@
-"use client";
-import { cn } from "../utils/cn";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root className={cn("grid gap-0.5", className)} {...props} ref={ref} />
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const Radio = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
-    size?: "S" | "M";
-  }
->(({ className, size = "S", ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(glareRadioStyles({ size }), className)}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="bg-white rounded-full flex items-center justify-center shrink-0">
-        <i className="ri-record-circle-fill text-background-presentation-state-information-primary leading-none shrink-0"></i>
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-Radio.displayName = "Radio";
-
-export { RadioGroup, Radio };
-
-const glareRadioStyles = cva(
-  [
-    "rounded-full shadow focus:outline-none flex items-center justify-center shrink-0",
-    "border border-border-presentation-action-checkbox-primary",
-    "bg-background-presentation-action-borderstyle",
-    "transition-[background,border-color,background-color] duration-200",
-    "hover:bg-blue-sparkle-alpha-15 hover:border-border-presentation-state-focus",
-    "checked:border-background-presentation-state-information-primary checked:hover:bg-white checked:bg-white",
-    "disabled:bg-background-presentation-action-disabled disabled:border-border-presentation-global-primary",
-    "disabled:cursor-not-allowed",
-    "data-[state=checked]:!border-none",
-  ],
-  {
-    variants: {
-      size: {
-        S: ["w-[12px]", "h-[12px] [&_i]:text-[10px] [&_i]:scale-[1.5]"],
-        M: ["w-[24px]", "h-[24px] [&_i]:text-[20px] [&_i]:scale-[1.47]"],
-      },
-    },
-  },
-);

package/apps/lib/components/RadioCard.tsx

@@ -1,50 +0,0 @@
-import { forwardRef, ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { Radio } from "./Radio";
-import { Card, CardContent, CardDescription, CardHeader } from "./Card";
-
-interface Props extends Omit<React.ComponentProps<typeof Radio>, "size" | "value"> {
-  headerLabel?: ReactNode;
-  id: string;
-  description?: ReactNode;
-  disabled?: boolean;
-  children?: ReactNode;
-  theme?: "dark" | "light" | "default";
-  value: string;
-}
-
-export const RadioCard = forwardRef<HTMLInputElement, Props>(
-  ({ headerLabel, description, disabled, className, id, children, theme, value, ...props }) => {
-    return (
-      <Card
-        data-theme={theme}
-        htmlFor={id}
-        as="label"
-        // The whole card is the radio's label — an interactive target, so it keeps the hover.
-        variant="clickable"
-        className={cn(
-          "relative [&>button]:data-[state=checked]:!border-none",
-          '[&:has(button[data-state="checked"])]:border-border-presentation-state-focus',
-          // Disabled state
-          disabled && "!bg-background-presentation-action-disabled",
-          disabled && "cursor-not-allowed",
-          disabled && "hover:border-border-presentation-global-primary",
-          className,
-        )}
-      >
-        <section className={"absolute top-0 left-0 w-full p-[10px] flex justify-end"}>
-          <Radio {...props} value={value} size="M" id={id} disabled={disabled} />
-        </section>
-
-        <CardHeader>{headerLabel}</CardHeader>
-
-        <CardContent>
-          {description && <CardDescription>{description}</CardDescription>}
-          {children}
-        </CardContent>
-      </Card>
-    );
-  },
-);
-
-RadioCard.displayName = "RadioCard";

package/apps/lib/components/ScrollArea.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-
-import { cn } from "../utils/cn";
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn(
-      [
-        "relative overflow-hidden",
-        "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)]",
-      ],
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };

package/apps/lib/components/SearchField.tsx

@@ -1,62 +0,0 @@
-import { forwardRef, ReactNode } from "react";
-import { Props, InputField } from "./InputField";
-
-interface SearchProps extends Props {
-  Searchplaceholder?: ReactNode;
-  secondaryPlaceholder?: ReactNode;
-  childrenSide?: ReactNode;
-}
-// Use InputField types in the SearchInput component
-export const SearchField = forwardRef<HTMLInputElement, SearchProps>(
-  ({ Searchplaceholder, secondaryPlaceholder, childrenSide, ...props }, forwardedRef) => {
-    return (
-      <div className="mb-[10px] w-full h-fit justify-center items-center rounded-[12px] p-[3px] bg-[rgba(106,112,144,0.60)] shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] backdrop-blur-[21px]">
-        <InputField
-          {...props}
-          ref={forwardedRef}
-          type="text"
-          variant="SystemStyle"
-          size="M"
-          className="h-[54px] rounded-[9px] p-[15px] border-border-system-global-primary bg-[rgba(0,0,0,0.60)]"
-          icon={
-            <SearchInputPlaceholder
-              value={props.value}
-              secondaryPlaceholder={secondaryPlaceholder}
-              Searchplaceholder={Searchplaceholder}
-            />
-          }
-          childrenSide={childrenSide}
-        />
-      </div>
-    );
-  },
-);
-
-SearchField.displayName = " SearchField"; // Set displayName for debugging
-
-function SearchInputPlaceholder({
-  Searchplaceholder,
-  secondaryPlaceholder,
-  value,
-}: {
-  Searchplaceholder?: ReactNode;
-  secondaryPlaceholder?: ReactNode;
-  value?: string | number | readonly string[];
-}) {
-  return (
-    <div className="flex gap-[10px] justify-center items-center ">
-      <i className="ri-search-2-line text-[24px] text-[#E5E5E5]"></i>
-
-      {value == "" ? (
-        <div className="flex gap-[5px] justify-center items-center ">
-          <p className="text-content-system-global-primary  typography-headers-medium-regular leading-none opacity-[0.8]">
-            {Searchplaceholder}
-          </p>
-          <p className="text-content-system-global-primary  typography-body-medium-medium leading-none opacity-30 mix-blend-luminosity mt-[2px]">
-            {secondaryPlaceholder}
-          </p>
-        </div>
-      ) : null}
-    </div>
-  );
-}