torch-glare 2.5.6 → 2.6.0

package/apps/lib/components/Breadcrumb.tsx

@@ -1,280 +0,0 @@
-"use client";
-
-import React, { forwardRef } from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-
-// ============================================================================
-// Breadcrumb Root
-// ============================================================================
-
-interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> {
-  theme?: Themes;
-  separator?: React.ReactNode;
-}
-
-const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ className, theme, ...props }, ref) => (
-    <nav
-      ref={ref}
-      aria-label="breadcrumb"
-      data-theme={theme}
-      className={cn("flex", className)}
-      {...props}
-    />
-  ),
-);
-Breadcrumb.displayName = "Breadcrumb";
-
-// ============================================================================
-// Breadcrumb List
-// ============================================================================
-
-const breadcrumbListStyles = cva(["flex flex-wrap items-center gap-1.5", "break-words"], {
-  variants: {
-    size: {
-      S: ["text-[12px]", "gap-1"],
-      M: ["text-[14px]", "gap-1.5"],
-      L: ["text-[16px]", "gap-2"],
-    },
-  },
-  defaultVariants: {
-    size: "M",
-  },
-});
-
-interface BreadcrumbListProps
-  extends React.ComponentPropsWithoutRef<"ol">, VariantProps<typeof breadcrumbListStyles> {
-  theme?: Themes;
-}
-
-const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
-  ({ className, size, theme, ...props }, ref) => (
-    <ol
-      ref={ref}
-      data-theme={theme}
-      className={cn(breadcrumbListStyles({ size }), className)}
-      {...props}
-    />
-  ),
-);
-BreadcrumbList.displayName = "BreadcrumbList";
-
-// ============================================================================
-// Breadcrumb Item
-// ============================================================================
-
-const BreadcrumbItem = forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
-  ({ className, ...props }, ref) => (
-    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
-  ),
-);
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-// ============================================================================
-// Breadcrumb Link
-// ============================================================================
-
-const breadcrumbLinkStyles = cva(
-  [
-    "inline-flex items-center",
-    "transition-colors duration-200 ease-in-out",
-    "font-medium",
-    "hover:underline",
-    "focus-visible:outline-none",
-    "focus-visible:ring-2",
-    "focus-visible:ring-border-presentation-state-focus",
-    "focus-visible:rounded-[2px]",
-  ],
-  {
-    variants: {
-      variant: {
-        PresentationStyle: [
-          "text-content-presentation-global-secondary",
-          "hover:text-content-presentation-global-primary",
-        ],
-        SystemStyle: [
-          "text-content-system-global-secondary",
-          "hover:text-content-system-global-primary",
-        ],
-      },
-    },
-    defaultVariants: {
-      variant: "PresentationStyle",
-    },
-  },
-);
-
-interface BreadcrumbLinkProps
-  extends React.ComponentPropsWithoutRef<"a">, VariantProps<typeof breadcrumbLinkStyles> {
-  asChild?: boolean;
-  theme?: Themes;
-}
-
-const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
-  ({ asChild, className, variant, theme, ...props }, ref) => {
-    const Comp = asChild ? Slot : "a";
-
-    return (
-      <Comp
-        ref={ref}
-        data-theme={theme}
-        className={cn(breadcrumbLinkStyles({ variant }), className)}
-        {...props}
-      />
-    );
-  },
-);
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-// ============================================================================
-// Breadcrumb Page (Current page - not a link)
-// ============================================================================
-
-const breadcrumbPageStyles = cva(["inline-flex items-center", "font-medium"], {
-  variants: {
-    variant: {
-      PresentationStyle: ["text-content-presentation-global-primary"],
-      SystemStyle: ["text-content-system-global-primary"],
-    },
-  },
-  defaultVariants: {
-    variant: "PresentationStyle",
-  },
-});
-
-interface BreadcrumbPageProps
-  extends React.ComponentPropsWithoutRef<"span">, VariantProps<typeof breadcrumbPageStyles> {
-  theme?: Themes;
-}
-
-const BreadcrumbPage = forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
-  ({ className, variant, theme, ...props }, ref) => (
-    <span
-      ref={ref}
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      data-theme={theme}
-      className={cn(breadcrumbPageStyles({ variant }), className)}
-      {...props}
-    />
-  ),
-);
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-// ============================================================================
-// Breadcrumb Separator
-// ============================================================================
-
-const breadcrumbSeparatorStyles = cva(["flex items-center justify-center", "[&_i]:text-[12px]"], {
-  variants: {
-    variant: {
-      PresentationStyle: ["text-content-presentation-global-secondary"],
-      SystemStyle: ["text-content-system-global-secondary"],
-    },
-  },
-  defaultVariants: {
-    variant: "PresentationStyle",
-  },
-});
-
-interface BreadcrumbSeparatorProps
-  extends React.ComponentPropsWithoutRef<"li">, VariantProps<typeof breadcrumbSeparatorStyles> {
-  theme?: Themes;
-}
-
-const BreadcrumbSeparator = forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(
-  ({ className, variant, theme, children, ...props }, ref) => (
-    <li
-      ref={ref}
-      role="presentation"
-      aria-hidden="true"
-      data-theme={theme}
-      className={cn(breadcrumbSeparatorStyles({ variant }), className)}
-      {...props}
-    >
-      {children ?? <i className="ri-arrow-right-s-line" />}
-    </li>
-  ),
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-// ============================================================================
-// Breadcrumb Ellipsis (For collapsed items)
-// ============================================================================
-
-const breadcrumbEllipsisStyles = cva(
-  [
-    "flex items-center justify-center",
-    "w-6 h-6",
-    "rounded-[4px]",
-    "cursor-pointer",
-    "transition-colors duration-200 ease-in-out",
-  ],
-  {
-    variants: {
-      variant: {
-        PresentationStyle: [
-          "text-content-presentation-global-secondary",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-        ],
-        SystemStyle: [
-          "text-content-system-global-secondary",
-          "hover:bg-background-system-action-secondary-hover",
-          "hover:text-content-system-action-secondary-hover",
-        ],
-      },
-    },
-    defaultVariants: {
-      variant: "PresentationStyle",
-    },
-  },
-);
-
-interface BreadcrumbEllipsisProps
-  extends React.ComponentPropsWithoutRef<"span">, VariantProps<typeof breadcrumbEllipsisStyles> {
-  theme?: Themes;
-}
-
-const BreadcrumbEllipsis = forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(
-  ({ className, variant, theme, ...props }, ref) => (
-    <span
-      ref={ref}
-      role="presentation"
-      aria-hidden="true"
-      data-theme={theme}
-      className={cn(breadcrumbEllipsisStyles({ variant }), className)}
-      {...props}
-    >
-      <i className="ri-more-line" />
-      <span className="sr-only">More</span>
-    </span>
-  ),
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
-
-// ============================================================================
-// Exports
-// ============================================================================
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};
-
-export {
-  breadcrumbListStyles,
-  breadcrumbLinkStyles,
-  breadcrumbPageStyles,
-  breadcrumbSeparatorStyles,
-  breadcrumbEllipsisStyles,
-};

package/apps/lib/components/Button.tsx

@@ -1,325 +0,0 @@
-import React, { ButtonHTMLAttributes, forwardRef } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
-import { cn } from "../utils/cn";
-import { ButtonVariant, Themes } from "../utils/types";
-
-interface Props
-  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-  is_loading?: boolean;
-  disabled?: boolean;
-  asChild?: boolean;
-  variant?: ButtonVariant;
-  as?: React.ElementType;
-  theme?: Themes;
-  containerClassName?: string;
-}
-export const Button = forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      is_loading = false,
-      variant,
-      size,
-      asChild,
-      as: Tag = "button",
-      buttonType,
-      className,
-      disabled,
-      type = "button",
-      theme,
-      children,
-      containerClassName,
-      ...props
-    },
-    ref,
-  ) => {
-    const Component = asChild ? Slot : Tag;
-
-    return (
-      <Component
-        {...props}
-        data-theme={theme}
-        disabled={disabled || is_loading}
-        aria-busy={is_loading || undefined}
-        ref={ref}
-        type={type}
-        className={cn(
-          buttonVariants({
-            variant,
-            size,
-            is_loading,
-            buttonType,
-            disabled,
-          }),
-          className,
-        )}
-      >
-        {asChild ? (
-          React.cloneElement(
-            children as React.ReactElement,
-            {},
-            <div
-              className={cn(
-                // LOCAL PATCH (Contact Center): logical, not physical. These were `mr`/`ml`/`pl`/`pr`,
-              // so under `dir="rtl"` a leading icon rendered on the right but kept its gap on
-              // its OUTER side — colliding with the label and drifting off the button edge.
-              // `me`/`ms`/`ps`/`pe` compile to the same values in LTR, so English is unchanged.
-              "flex items-center justify-center [&>:is(i,svg):first-child]:me-[3px] [&>:is(i,svg):last-child]:ms-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:ps-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pe-[6px]",
-                containerClassName,
-              )}
-            >
-              {(children as React.ReactElement<{ children?: React.ReactNode }>).props.children}
-              {is_loading && <LoadingIcon size={size} />}
-            </div>,
-          )
-        ) : (
-          <div
-            className={cn(
-              // LOCAL PATCH (Contact Center): logical, not physical. These were `mr`/`ml`/`pl`/`pr`,
-              // so under `dir="rtl"` a leading icon rendered on the right but kept its gap on
-              // its OUTER side — colliding with the label and drifting off the button edge.
-              // `me`/`ms`/`ps`/`pe` compile to the same values in LTR, so English is unchanged.
-              "flex items-center justify-center [&>:is(i,svg):first-child]:me-[3px] [&>:is(i,svg):last-child]:ms-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:ps-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pe-[6px]",
-              containerClassName,
-            )}
-          >
-            {children}
-            {is_loading && <LoadingIcon size={size} />}
-          </div>
-        )}
-      </Component>
-    );
-  },
-);
-
-Button.displayName = "Button";
-
-const loadingIconVariants = cva("animate-spin ", {
-  variants: {
-    size: {
-      S: "w-[12px] h-[12px]",
-      M: "w-[18px] h-[18px]",
-      L: "w-[20px] h-[20px]",
-      XL: "w-[20px] h-[20px]",
-    },
-  },
-  defaultVariants: {
-    size: "M",
-  },
-});
-
-export function LoadingIcon({
-  size,
-  className,
-}: {
-  size?: "S" | "M" | "L" | "XL" | null;
-  className?: string;
-}) {
-  return (
-    <svg
-      className={cn(loadingIconVariants({ size, className }))}
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role="status"
-      aria-label="Loading"
-    >
-      <path
-        d="M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6ZM2.25 6C2.25 8.07107 3.92893 9.75 6 9.75C8.07107 9.75 9.75 8.07107 9.75 6C9.75 3.92893 8.07107 2.25 6 2.25C3.92893 2.25 2.25 3.92893 2.25 6Z"
-        fill="#F4F4F4"
-      />
-      <path
-        d="M11 6C11 5.34339 10.8707 4.69321 10.6194 4.08658C10.3681 3.47995 9.99983 2.92876 9.53553 2.46447C9.07124 2.00017 8.52004 1.63188 7.91342 1.3806C7.30679 1.12933 6.65661 1 6 1V2.25C6.49246 2.25 6.98009 2.347 7.43506 2.53545C7.89003 2.72391 8.30343 3.00013 8.65165 3.34835C8.99987 3.69657 9.27609 4.10997 9.46455 4.56494C9.653 5.01991 9.75 5.50754 9.75 6H11Z"
-        fill="#0075FF"
-      />
-    </svg>
-  );
-}
-
-export const buttonVariants = 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",
-  {
-    variants: {
-      variant: {
-        // Sec variants: base = button-secondary, hover picks up fill color
-        PrimeStyle: [
-          "bg-background-presentation-button-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-button-hover",
-          "hover:text-content-presentation-global-hover",
-          "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
-        ],
-        BluSecStyle: [
-          "bg-background-presentation-button-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-button-fill-blue-primary",
-          "hover:text-content-presentation-global-hover",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-fill-blue-primary active:text-content-presentation-global-hover",
-        ],
-        YelSecStyle: [
-          "bg-background-presentation-button-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-button-fill-yellow-primary",
-          "hover:text-content-presentation-action-light-primary",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-fill-yellow-primary active:text-content-presentation-action-light-primary",
-        ],
-        RedSecStyle: [
-          "bg-background-presentation-button-secondary",
-          "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-button-fill-red-primary",
-          "hover:text-content-presentation-global-hover",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-fill-red-primary active:text-content-presentation-global-hover",
-        ],
-        BorderStyle: [
-          "text-content-presentation-action-light-primary",
-          "border border-border-presentation-action-disabled",
-          "bg-background-presentation-button-borderstyle",
-          "hover:bg-background-presentation-button-hover",
-          "hover:text-content-presentation-global-hover",
-          "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-hover",
-          "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
-        ],
-        // Cont variants: transparent base, hover shows button-contstyle-hover
-        PrimeContStyle: [
-          "text-content-presentation-action-light-primary",
-          "border-transparent bg-transparent",
-          "hover:bg-background-presentation-button-contstyle-hover",
-          "hover:text-content-presentation-action-light-primary",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-button-borderstyle",
-          "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-action-light-primary",
-        ],
-        BluContStyle: [
-          "text-content-presentation-action-light-primary",
-          "border-transparent bg-transparent",
-          "hover:bg-background-presentation-button-contstyle-hover",
-          "hover:text-content-presentation-global-information-hover",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-button-borderstyle",
-          "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-global-information-hover",
-        ],
-        RedContStyle: [
-          "text-content-presentation-action-light-primary",
-          "border-transparent bg-transparent",
-          "hover:bg-background-presentation-button-contstyle-hover",
-          "hover:text-content-presentation-global-negative-hover",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-button-borderstyle",
-          "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-global-negative-hover",
-        ],
-        // Col variants: filled solid color base, hover deepens to -secondary
-        PrimeColStyle: [
-          "bg-background-presentation-button-primary",
-          "text-content-presentation-global-hover",
-          "hover:bg-background-presentation-button-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-hover active:text-content-presentation-global-primary-inverse",
-        ],
-        BluColStyle: [
-          "bg-background-presentation-button-fill-blue-primary",
-          "text-content-presentation-action-dark-primary",
-          "hover:bg-background-presentation-button-fill-blue-secondary",
-          "hover:text-content-presentation-action-dark-primary",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-fill-blue-secondary active:text-content-presentation-action-dark-primary",
-        ],
-        RedColStyle: [
-          "bg-background-presentation-button-fill-red-primary",
-          "text-content-presentation-action-dark-primary",
-          "hover:bg-background-presentation-button-fill-red-secondary",
-          "hover:text-content-presentation-action-dark-primary",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-fill-red-secondary active:text-content-presentation-action-dark-primary",
-        ],
-        GreenColStyle: [
-          "bg-background-presentation-button-fill-green-primary",
-          "text-content-presentation-action-dark-primary",
-          "hover:bg-background-presentation-button-fill-green-secondary",
-          "hover:text-content-presentation-action-dark-primary",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-fill-green-secondary active:text-content-presentation-action-dark-primary",
-        ],
-        YelColStyle: [
-          "bg-background-presentation-button-fill-yellow-primary",
-          "text-content-presentation-global-primary",
-          "hover:bg-background-presentation-button-fill-yellow-secondary",
-          "hover:text-content-presentation-global-primary",
-          "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-button-fill-yellow-secondary active:text-content-presentation-global-primary",
-        ],
-      },
-      size: {
-        S: "h-[22px] py-[2px] px-[6px] typography-body-small-medium rounded-radius-sm [&_i]:text-[12px]",
-        M: "h-[28px] py-[2px] px-[14px] typography-body-large-medium rounded-radius-md [&_i]:text-[18px]",
-        L: "h-[34px] py-[5px] px-[22px] typography-body-large-medium rounded-radius-lg [&_i]:text-[20px]",
-        XL: "h-[40px] py-[8px] px-[30px] typography-headers-medium-medium rounded-radius-lg [&_i]:text-[22px]",
-      },
-      is_loading: {
-        true: "[&_i]:hidden",
-      },
-      disabled: {
-        true: "cursor-not-allowed",
-      },
-      buttonType: {
-        button: "",
-        icon: "",
-      },
-    },
-    defaultVariants: {
-      size: "M",
-      variant: "PrimeStyle",
-      buttonType: "button",
-    },
-    compoundVariants: [
-      {
-        is_loading: true,
-        className: [
-          "cursor-wait",
-          "bg-background-presentation-button-hover",
-          "text-content-presentation-global-hover",
-          "hover:bg-background-presentation-button-hover",
-          "hover:text-content-presentation-global-hover",
-          "focus:lg:border focus:lg:border-transparent",
-          "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
-        ],
-      },
-      {
-        disabled: true,
-        className: [
-          "cursor-not-allowed",
-          "pointer-events-none",
-          "bg-background-presentation-button-disabled",
-          "text-content-presentation-state-disabled",
-          "border-transparent",
-        ],
-      },
-      {
-        buttonType: "icon",
-        size: "S",
-        className: "w-[22px] h-[22px] p-0 leading-[0]",
-      },
-      {
-        buttonType: "icon",
-        size: "M",
-        className: "w-[28px] h-[28px] p-0 leading-[0]",
-      },
-      {
-        buttonType: "icon",
-        size: "L",
-        className: "w-[30px] h-[30px] p-0 leading-[0]",
-      },
-      {
-        buttonType: "icon",
-        size: "XL",
-        className: "w-[40px] h-[40px] p-0 leading-[0]",
-      },
-    ],
-  },
-);