torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/Timeline.tsx

@@ -1,263 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-
-// ─── Timeline Root ───────────────────────────────────────────────────────────
-
-const timelineStyles = cva(["flex gap-0"], {
-  variants: {
-    orientation: {
-      vertical: "flex-col",
-      horizontal: "flex-row items-start",
-    },
-  },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-});
-
-interface TimelineProps
-  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof timelineStyles> {
-  theme?: Themes;
-}
-
-const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
-  ({ className, orientation, theme, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-theme={theme}
-      data-orientation={orientation ?? "vertical"}
-      className={cn(timelineStyles({ orientation }), className)}
-      {...props}
-    />
-  ),
-);
-Timeline.displayName = "Timeline";
-
-// ─── Timeline Item ───────────────────────────────────────────────────────────
-
-const timelineItemStyles = cva(["flex group/item"], {
-  variants: {
-    orientation: {
-      vertical: "flex-row gap-3",
-      horizontal: "flex-col items-center gap-3",
-    },
-  },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-});
-
-interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
-  orientation?: "vertical" | "horizontal";
-}
-
-const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(
-  ({ className, orientation = "vertical", ...props }, ref) => (
-    <div
-      ref={ref}
-      data-orientation={orientation}
-      className={cn(timelineItemStyles({ orientation }), className)}
-      {...props}
-    />
-  ),
-);
-TimelineItem.displayName = "TimelineItem";
-
-// ─── Timeline Indicator ──────────────────────────────────────────────────────
-
-const indicatorStyles = cva(
-  [
-    "flex items-center justify-center shrink-0 rounded-full",
-    "border",
-    "transition-all duration-200 ease-in-out",
-    "[&_i]:leading-none [&_i]:flex [&_i]:items-center [&_i]:justify-center",
-  ],
-  {
-    variants: {
-      variant: {
-        default: [
-          "bg-background-presentation-action-secondary",
-          "border-border-presentation-action-primary",
-          "text-content-presentation-action-light-primary",
-        ],
-        active: [
-          "bg-background-presentation-state-information-primary",
-          "border-border-presentation-state-focus",
-          "text-content-presentation-state-information",
-        ],
-        completed: [
-          "bg-background-presentation-state-success-primary",
-          "border-border-presentation-state-success",
-          "text-content-presentation-state-success",
-        ],
-        error: [
-          "bg-background-presentation-state-negative-primary",
-          "border-border-presentation-state-negative",
-          "text-content-presentation-state-negative",
-        ],
-        warning: [
-          "bg-background-presentation-state-warning-primary",
-          "border-border-presentation-state-warning",
-          "text-content-presentation-state-warning",
-        ],
-      },
-      size: {
-        S: "w-[22px] h-[22px] [&_i]:text-[12px]",
-        M: "w-[28px] h-[28px] [&_i]:text-[14px]",
-        L: "w-[34px] h-[34px] [&_i]:text-[16px]",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "M",
-    },
-  },
-);
-
-interface TimelineIndicatorProps
-  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof indicatorStyles> {
-  icon?: ReactNode;
-}
-
-const TimelineIndicator = forwardRef<HTMLDivElement, TimelineIndicatorProps>(
-  ({ className, variant, size, icon, children, ...props }, ref) => {
-    const renderContent = () => {
-      if (icon) return icon;
-      if (children) return children;
-      if (variant === "completed") return <i className="ri-check-line" />;
-      if (variant === "error") return <i className="ri-close-line" />;
-      if (variant === "warning") return <i className="ri-alert-line" />;
-      return <span className="block w-[6px] h-[6px] rounded-full bg-current" />;
-    };
-
-    return (
-      <div ref={ref} className={cn(indicatorStyles({ variant, size }), className)} {...props}>
-        {renderContent()}
-      </div>
-    );
-  },
-);
-TimelineIndicator.displayName = "TimelineIndicator";
-
-// ─── Timeline Separator (the connecting line) ────────────────────────────────
-
-const separatorStyles = cva(
-  ["bg-border-presentation-global-primary", "transition-all duration-200 ease-in-out"],
-  {
-    variants: {
-      orientation: {
-        vertical: "w-[1px] flex-1 min-h-[24px] mx-auto",
-        horizontal: "h-[1px] flex-1 min-w-[24px] my-auto",
-      },
-      active: {
-        true: "bg-border-presentation-state-focus",
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-      active: false,
-    },
-  },
-);
-
-interface TimelineSeparatorProps
-  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof separatorStyles> {}
-
-const TimelineSeparator = forwardRef<HTMLDivElement, TimelineSeparatorProps>(
-  ({ className, orientation = "vertical", active, ...props }, ref) => (
-    <div ref={ref} className={cn(separatorStyles({ orientation, active }), className)} {...props} />
-  ),
-);
-TimelineSeparator.displayName = "TimelineSeparator";
-
-// ─── Timeline Connector (indicator + line container) ─────────────────────────
-
-interface TimelineConnectorProps extends HTMLAttributes<HTMLDivElement> {
-  orientation?: "vertical" | "horizontal";
-}
-
-const TimelineConnector = forwardRef<HTMLDivElement, TimelineConnectorProps>(
-  ({ className, orientation = "vertical", children, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "flex items-center",
-        orientation === "vertical" ? "flex-col" : "flex-row",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  ),
-);
-TimelineConnector.displayName = "TimelineConnector";
-
-// ─── Timeline Content ────────────────────────────────────────────────────────
-
-interface TimelineContentProps extends HTMLAttributes<HTMLDivElement> {}
-
-const TimelineContent = forwardRef<HTMLDivElement, TimelineContentProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("flex flex-col gap-1 pb-6 pt-[2px]", "group-last/item:pb-0", className)}
-      {...props}
-    />
-  ),
-);
-TimelineContent.displayName = "TimelineContent";
-
-// ─── Timeline Heading ────────────────────────────────────────────────────────
-
-interface TimelineHeadingProps extends HTMLAttributes<HTMLDivElement> {}
-
-const TimelineHeading = forwardRef<HTMLDivElement, TimelineHeadingProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "typography-body-medium-medium text-content-presentation-global-primary",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-TimelineHeading.displayName = "TimelineHeading";
-
-// ─── Timeline Description ────────────────────────────────────────────────────
-
-interface TimelineDescriptionProps extends HTMLAttributes<HTMLDivElement> {}
-
-const TimelineDescription = forwardRef<HTMLDivElement, TimelineDescriptionProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "typography-body-small-regular text-content-presentation-global-secondary",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-TimelineDescription.displayName = "TimelineDescription";
-
-// ─── Exports ─────────────────────────────────────────────────────────────────
-
-export {
-  Timeline,
-  TimelineItem,
-  TimelineIndicator,
-  TimelineSeparator,
-  TimelineConnector,
-  TimelineContent,
-  TimelineHeading,
-  TimelineDescription,
-  timelineStyles,
-  indicatorStyles,
-  separatorStyles,
-};

package/apps/lib/components/Toast.tsx

@@ -1,87 +0,0 @@
-import React from "react";
-import { Toaster as ToasterComponent, toast } from "react-hot-toast";
-
-const Toaster = ({
-  position = "top-left",
-  reverseOrder = false,
-  gutter = 8,
-  containerClassName = "",
-  containerStyle = {},
-  toastOptions = {},
-  ...props
-}: React.ComponentPropsWithoutRef<typeof ToasterComponent>) => {
-  return (
-    <ToasterComponent
-      position={position}
-      reverseOrder={reverseOrder}
-      gutter={gutter}
-      containerClassName={containerClassName}
-      containerStyle={containerStyle}
-      {...props}
-      toastOptions={{
-        // Define default options
-        className: "",
-        duration: 8000,
-        removeDelay: 1000,
-        style: {
-          background: "var(--background-presentation-state-information-secondary)",
-          color: "var(--content-presentation-global-primary)",
-          borderRadius: "16px",
-        },
-
-        // Default options for specific types
-        success: {
-          duration: 3000,
-          style: {
-            background: "var(--background-presentation-state-success-secondary)",
-            color: "var(--content-presentation-global-primary)",
-            borderRadius: "16px",
-          },
-          iconTheme: {
-            primary: "var(--background-presentation-state-success-primary)",
-            secondary: "var(--background-presentation-state-success-secondary)",
-          },
-        },
-        error: {
-          duration: 5000,
-          style: {
-            background: "var(--background-presentation-state-negative-secondary)",
-            color: "var(--content-presentation-global-primary)",
-            borderRadius: "16px",
-          },
-          iconTheme: {
-            primary: "var(--background-presentation-state-negative-primary)",
-            secondary: "var(--background-presentation-state-negative-secondary)",
-          },
-        },
-        loading: {
-          duration: 4000,
-          style: {
-            background: "var(--background-presentation-state-warning-secondary)",
-            color: "var(--content-presentation-global-primary)",
-            borderRadius: "16px",
-          },
-          iconTheme: {
-            primary: "var(--background-presentation-state-warning-primary)",
-            secondary: "var(--background-presentation-state-warning-secondary)",
-          },
-        },
-        blank: {
-          duration: 4000,
-          style: {
-            background: "var(--background-presentation-state-information-secondary)",
-            color: "var(--content-presentation-global-primary)",
-            borderRadius: "16px",
-          },
-          iconTheme: {
-            primary: "var(--background-presentation-state-information-primary)",
-            secondary: "var(--background-presentation-state-information-secondary)",
-          },
-        },
-        ...toastOptions,
-      }}
-    />
-  );
-};
-
-export { Toaster, toast };

package/apps/lib/components/Toggle.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../utils/cn";
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
-
-const toggleVariants = cva(
-  [
-    "flex items-center whitespace-nowrap justify-center  transition-[background,color] duration-200 ease-in-out border border-transparent outline-none leading-none [&-i]:!leading-none",
-    "disabled:cursor-not-allowed disabled:pointer-events-none disabled:bg-background-presentation-action-disabled disabled:text-content-presentation-state-disabled disabled:border-transparent",
-    "",
-  ],
-  {
-    variants: {
-      variant: {
-        // fucus styles for medium screens and above
-        PrimeStyle: [
-          "bg-background-presentation-action-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus", // Focus style only for medium screens and above
-          "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
-          "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        BlueSecStyle: [
-          "bg-background-presentation-action-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-state-information-primary",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-state-information-primary active:text-content-presentation-global-primary-inverse",
-          "data-[state=on]:bg-background-presentation-state-information-primary data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        YelSecStyle: [
-          "bg-background-presentation-action-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-state-warning-primary",
-          "hover:text-content-presentation-action-light-primary",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-state-warning-primary active:text-content-presentation-action-light-primary",
-          "data-[state=on]:bg-background-presentation-state-warning-primary data-[state=on]:text-content-presentation-action-light-primary",
-        ],
-        RedSecStyle: [
-          "bg-background-presentation-action-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-state-negative-primary active:text-content-presentation-global-primary-inverse",
-          "data-[state=on]:bg-background-presentation-state-negative-primary data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        BorderStyle: [
-          "text-content-presentation-action-light-primary",
-          "border border-border-presentation-action-disabled",
-          "bg-background-presentation-action-borderstyle",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:text-content-presentation-action-light-primary",
-          "focus:hover:lg:text-content-presentation-global-primary-inverse",
-          "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
-          "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        PrimeContStyle: [
-          "text-content-presentation-action-light-primary",
-          "border-transparent bg-transparent",
-          "hover:bg-background-presentation-action-contstyle-hover",
-          "hover:text-content-presentation-action-light-primary",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-action-borderstyle",
-          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-light-primary",
-          "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-light-primary",
-        ],
-        BlueContStyle: [
-          "text-content-presentation-action-light-primary",
-          "border-transparent bg-transparent",
-          "hover:bg-background-presentation-action-contstyle-hover",
-          "hover:text-content-presentation-action-information-hover",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-action-borderstyle",
-          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-information-hover",
-          "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-information-hover",
-        ],
-        RedContStyle: [
-          "text-content-presentation-action-light-primary",
-          "border-transparent bg-transparent",
-          "hover:bg-background-presentation-action-contstyle-hover",
-          "hover:text-content-presentation-action-negative-hover",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-action-borderstyle",
-          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-negative-hover",
-          "data-[state=on]:bg-background-presentation-action-contstyle-hover data-[state=on]:text-content-presentation-action-negative-hover",
-        ],
-      },
-      size: {
-        S: "h-[22px] w-[22px]  typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
-        M: "h-[28px] w-[28px]  typography-body-large-medium rounded-[4px] [&_i]:text-[18px]",
-        L: "h-[34px] w-[34px]  typography-body-large-medium rounded-[6px] [&_i]:text-[20px]",
-        XL: "h-[40px] w-[40px]  typography-headers-medium-medium rounded-[6px] [&_i]:text-[22px]",
-      },
-    },
-    defaultVariants: {
-      size: "M",
-      variant: "PrimeStyle",
-    },
-  },
-);

package/apps/lib/components/ToggleButton.tsx

@@ -1,140 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-
-// ============================================================================
-// ToggleButton Styles
-// ============================================================================
-
-const toggleButtonStyles = cva(
-  [
-    "inline-flex items-center justify-center",
-    "whitespace-nowrap",
-    "transition-all duration-200 ease-in-out",
-    "border border-transparent",
-    "outline-none",
-    "disabled:cursor-not-allowed",
-    "disabled:pointer-events-none",
-    "disabled:bg-background-presentation-action-disabled",
-    "disabled:text-content-presentation-state-disabled",
-  ],
-  {
-    variants: {
-      variant: {
-        PrimeStyle: [
-          "bg-background-presentation-action-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
-          "data-[state=on]:bg-background-presentation-action-hover",
-          "data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        BlueSecStyle: [
-          "bg-background-presentation-action-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-state-information-primary",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
-          "data-[state=on]:bg-background-presentation-state-information-primary",
-          "data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        BorderStyle: [
-          "bg-background-presentation-action-borderstyle",
-          "text-content-presentation-action-light-primary",
-          "border-border-presentation-action-disabled",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
-          "data-[state=on]:bg-background-presentation-action-hover",
-          "data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        PrimeContStyle: [
-          "bg-transparent",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-action-contstyle-hover",
-          "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
-          "data-[state=on]:bg-background-presentation-action-contstyle-hover",
-        ],
-        SystemStyle: [
-          "bg-black-alpha-20",
-          "text-white",
-          "border-[#2C2D2E]",
-          "hover:bg-white/10",
-          "focus-visible:ring-2 focus-visible:ring-white/50",
-          "data-[state=on]:bg-white/20",
-        ],
-      },
-      size: {
-        S: "h-[22px] px-[8px] typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
-        M: "h-[28px] px-[12px] typography-body-large-medium rounded-[4px] [&_i]:text-[18px]",
-        L: "h-[34px] px-[16px] typography-body-large-medium rounded-[6px] [&_i]:text-[20px]",
-        XL: "h-[40px] px-[20px] typography-headers-medium-medium rounded-[6px] [&_i]:text-[22px]",
-      },
-      buttonType: {
-        default: "",
-        icon: "",
-      },
-    },
-    defaultVariants: {
-      variant: "PrimeStyle",
-      size: "M",
-      buttonType: "default",
-    },
-    compoundVariants: [
-      {
-        buttonType: "icon",
-        size: "S",
-        className: "w-[22px] px-0",
-      },
-      {
-        buttonType: "icon",
-        size: "M",
-        className: "w-[28px] px-0",
-      },
-      {
-        buttonType: "icon",
-        size: "L",
-        className: "w-[34px] px-0",
-      },
-      {
-        buttonType: "icon",
-        size: "XL",
-        className: "w-[40px] px-0",
-      },
-    ],
-  },
-);
-
-// ============================================================================
-// ToggleButton Component
-// ============================================================================
-
-type ToggleButtonProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleButtonStyles> & {
-    theme?: Themes;
-  };
-
-const ToggleButton = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  ToggleButtonProps
->(({ className, variant, size, buttonType, theme, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    data-theme={theme}
-    className={cn(toggleButtonStyles({ variant, size, buttonType }), className)}
-    {...props}
-  />
-));
-ToggleButton.displayName = "ToggleButton";
-
-// ============================================================================
-// Exports
-// ============================================================================
-
-export { ToggleButton, toggleButtonStyles };
-export type { ToggleButtonProps };