torch-glare 1.0.1

package/lib/components/AlertDialog.tsx

@@ -0,0 +1,211 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "../utils/cn"
+import { buttonVariants } from "./Button"
+import { ButtonVariant } from "@/utils/types"
+import { cva } from "class-variance-authority"
+
+const StatusTextStyle = cva("", {
+    variants: {
+        variant: {
+            default: "[&_strong]:text-content-presentation-global-primary  [&_[data-description]]:text-content-presentation-global-primary",
+            info: "[&_strong]:text-content-presentation-state-information  [&_[data-description]]:text-content-presentation-state-information",
+            success: "[&_strong]:text-content-presentation-state-success [&_[data-description]]:text-content-presentation-state-success",
+            warning: "[&_strong]:text-content-presentation-state-warning  [&_[data-description]]:text-content-presentation-state-warning",
+            error: "[&_strong]:text-content-presentation-state-negative  [&_[data-description]]:text-content-presentation-state-negative",
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Overlay
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+        variant?: "info" | "success" | "warning" | "error" | "default"
+    }
+>(({ className, variant = "default", ...props }, ref) => (
+    <AlertDialogPortal>
+        <AlertDialogOverlay />
+        <AlertDialogPrimitive.Content
+            ref={ref}
+            className={cn(StatusTextStyle({ variant }),
+                "text-content-presentation-global-primary max-w-[800px] !m-1 sm:m-0",
+                "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-2 border bg-background-presentation-body-overlay-primary p-2 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+                "rounded-[16px] border-2 border-border-presentation-global-primary",
+                className
+            )}
+            {...props}
+        />
+    </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex justify-between space-x-2 text-left",
+            className
+        )}
+        {...props}
+    />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Title
+        ref={ref}
+        className={cn("typography-display-medium-semibold", className)}
+        {...props}
+    />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogLabel = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
+        title: string
+    }
+>(({ className, title, ...props }, ref) => {
+    const words = title.split(' ');
+    const firstWord = words[0];
+    const restOfTitle = words.slice(1).join(' ');
+
+    return (
+        <AlertDialogPrimitive.Title
+            ref={ref}
+            className={cn("text-lg font-semibold", className)}
+            {...props}
+        >
+            <p >
+                <strong >{firstWord}</strong>
+                {restOfTitle.length > 0 && ' ' + restOfTitle}
+            </p>
+        </AlertDialogPrimitive.Title>
+    )
+})
+AlertDialogLabel.displayName = "AlertDialogLabel"
+
+const AlertDialogDescription = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Description
+        data-description=""
+        ref={ref}
+        className={cn("bg-background-presentation-form-base border border-border-presentation-global-primary p-2 rounded-[8px]"
+            , "p-[12px_8px_12px_8px] sm:p-[24px_48px_48px_48px] typography-body-large-medium",
+            className)}
+
+        {...props}
+    >
+        {props.children}
+    </AlertDialogPrimitive.Description>
+))
+AlertDialogDescription.displayName =
+    AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Action>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+        size?: "M" | "S" | "L" | "XL"
+        variant?: ButtonVariant
+        buttonType?: "button" | "icon"
+    }
+>(({ className,
+    size = "M",
+    variant = "BorderStyle",
+    buttonType = "button",
+    ...props }, ref) => (
+    <AlertDialogPrimitive.Action
+        ref={ref}
+        className={cn(buttonVariants({ variant: variant, size: size, buttonType: buttonType }), className)}
+        {...props}
+    />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+    React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
+        size?: "M" | "S" | "L" | "XL"
+        variant?: ButtonVariant
+        buttonType?: "button" | "icon"
+    }
+>(({ className,
+    size = "M",
+    variant = "RedSecStyle",
+    buttonType = "icon",
+    ...props }, ref) => (
+    <AlertDialogPrimitive.Cancel
+        ref={ref}
+        className={cn(
+            buttonVariants({ variant: variant, size: size, buttonType: buttonType }),
+            "",
+            className
+        )}
+        {...props}
+    />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+    AlertDialog,
+    AlertDialogPortal,
+    AlertDialogOverlay,
+    AlertDialogTrigger,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogFooter,
+    AlertDialogTitle,
+    AlertDialogLabel,
+    AlertDialogDescription,
+    AlertDialogAction,
+    AlertDialogCancel,
+}

package/lib/components/Badge.tsx

@@ -0,0 +1,116 @@
+import { ReactNode, HTMLAttributes } from "react";
+import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+export const badgeBase = cva(
+  [
+    "px-[6px]",
+    "[&_p]:text-content-presentation-action-light-primary",
+    "[&_i]:!leading-0",
+    "flex",
+    "justify-center",
+    "items-center",
+    "border",
+    "rounded-[6px]",
+    "transition-all",
+    "duration-300",
+    "ease-in-out",
+    "w-fit",
+    "cursor-pointer",
+    "[&_i]:leading-0",
+  ],
+  {
+    variants: {
+      size: {
+        XS: "h-[18px] [&_i]:text-[12px] [&_p]:typography-body-small-medium",
+        S: "h-[22px] [&_i]:text-[12px] [&_p]:typography-body-small-medium",
+        M: "h-[26px] [&_i]:text-[16px] [&_p]:typography-body-medium-medium",
+      },
+      variant: {
+        highlight: ["h-[20px] [&_i]:text-[12px] [&_p]:typography-body-small-medium",
+          "bg-background-presentation-badge-gray border-transparent px-[3px]"
+        ],
+        green: "border-border-presentation-badge-green bg-background-presentation-badge-green [&_i]:text-content-presentation-badge-green",
+        greenLight: "border-border-presentation-badge-green-light bg-background-presentation-badge-green-light [&_i]:text-content-presentation-badge-green-light",
+        cocktailGreen: "border-border-presentation-badge-cocktail-green bg-background-presentation-badge-cocktail-green [&_i]:text-content-presentation-badge-cocktail-green",
+        yellow: "border-border-presentation-badge-yellow bg-background-presentation-badge-yellow [&_i]:text-content-presentation-badge-yellow",
+        redOrange: "border-border-presentation-badge-red-orange bg-background-presentation-badge-red-orange [&_i]:text-content-presentation-badge-red-orange",
+        redLight: "border-border-presentation-badge-red bg-background-presentation-badge-red [&_i]:text-content-presentation-badge-red",
+        rose: "border-border-presentation-badge-rose bg-background-presentation-badge-rose [&_i]:text-content-presentation-badge-rose",
+        purple: "border-border-presentation-badge-purple bg-background-presentation-badge-purple [&_i]:text-content-presentation-badge-purple",
+        bluePurple: "border-border-presentation-badge-blue-purple bg-background-presentation-badge-blue-purple [&_i]:text-content-presentation-badge-blue-purple",
+        blue: "border-border-presentation-badge-blue bg-background-presentation-badge-blue [&_i]:text-content-presentation-badge-blue",
+        navy: "border-border-presentation-badge-navy bg-background-presentation-badge-navy [&_i]:text-content-presentation-badge-navy",
+        gray: "border-border-presentation-badge-gray bg-background-presentation-badge-gray [&_i]:text-content-presentation-badge-gray",
+      },
+    },
+    defaultVariants: {
+      size: "S",
+      variant: "green",
+    },
+  }
+);
+
+interface BadgeProps extends HTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof badgeBase> {
+  label?: string;
+  onUnselect?: () => void;
+  isSelected?: boolean;
+  badgeIcon?: ReactNode;
+  className?: string;
+  theme?: Themes
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  label,
+  onUnselect,
+  isSelected,
+  badgeIcon,
+  theme,
+  size = "S",
+  variant = "green",
+  className,
+  ...props
+}) => {
+  return (
+    <span
+      {...props}
+      data-theme={theme}
+      className={cn(
+        badgeBase({ size, variant }),
+        {
+          "cursor-default": isSelected,
+        },
+        className
+      )}
+    >
+      <div className={"flex justify-center items-center"}>
+        {!badgeIcon ? (
+          <i className={cn("ri-circle-fill !text-[8px]", { "hidden": variant === "highlight" })}></i>
+        ) : (
+          badgeIcon
+        )}
+      </div>
+
+      <p className="px-[3px] whitespace-nowrap">{label}</p>
+      {isSelected && (
+        <button
+          onClick={onUnselect}
+          className="rounded-[2px] flex justify-center items-center cursor-pointer"
+          tabIndex={0}
+          role="button"
+          aria-label="Remove badge"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              onUnselect?.();
+            }
+          }}
+        >
+          <i className="ri-close-line !text-content-presentation-action-light-primary"></i>
+        </button>
+      )}
+    </span>
+  );
+};

package/lib/components/BadgeField.tsx

@@ -0,0 +1,192 @@
+"use client";
+import {
+  forwardRef,
+  InputHTMLAttributes,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../utils/cn";
+import { Tooltip, ToolTipSide } from "./Tooltip";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+import { Themes } from "../utils/types";
+import { Icon, Input, Group, Trilling } from "./Input";
+
+export interface Props
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
+  size?: "XS" | "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
+  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
+  toolTipSide?: ToolTipSide;
+  badgesChildren?: ReactNode;
+  label?: string;
+  required?: boolean;
+  theme?: Themes
+  actionButton?: ReactNode
+}
+
+
+export const BadgeField = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      size = "M",
+      label,
+      required,
+      icon,
+      popoverChildren,
+      errorMessage,
+      onTable,
+      variant = "PresentationStyle",
+      toolTipSide,
+      className,
+      badgesChildren,
+      actionButton,
+      theme,
+      children,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const sectionRef = useRef<HTMLDivElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(null);
+    const [dropDownListWidth, setDropDownListWidth] = useState(0);
+
+    useInitialLoad({
+      forwardedRef,
+      inputRef,
+      sectionRef,
+      popoverRef,
+      setIsPopoverOpen,
+    });
+
+    return (
+      <Popover open={isPopoverOpen}>
+        <Tooltip
+          toolTipSide={toolTipSide}
+          open={errorMessage !== undefined}
+          text={errorMessage}
+        >
+          <PopoverTrigger asChild>
+            <Group
+              error={errorMessage !== undefined}
+              onTable={onTable}
+              data-theme={theme}
+              variant={variant}
+              size={size === "XS" ? "S" : size}
+              ref={sectionRef}
+              onFocus={(e: any) => {
+                setDropDownListWidth(e.currentTarget.offsetWidth);
+                setIsPopoverOpen(true);
+              }}
+              className={cn("flex gap-1 flex-row w-full relative p-1 flex-nowrap overflow-hidden justify-end h-fit items-center",
+                {
+                  "flex-wrap justify-start": isPopoverOpen,
+                },
+                className
+              )}
+            >
+              {icon && (
+                <Icon  >
+                  {icon}
+                </Icon>
+              )}
+
+              {badgesChildren}
+
+              <Input
+                {...props}
+                onFocus={() => setIsPopoverOpen(true)}
+                ref={inputRef}
+                className={cn(
+                  "min-w-[100px] w-full", // Added w-full to Input
+                  {
+                    "!h-[18px]": size === "XS",
+                    "!h-[22px]": size === "S",
+                    "!h-[24px]": size === "M",
+                  }
+                )}
+              />
+              {
+                actionButton && (
+                  <Trilling className="py-0" > {/* Keep the ActionButton right aligned */}
+                    {actionButton}
+                  </Trilling>
+                )
+              }
+            </Group>
+          </PopoverTrigger>
+        </Tooltip>
+
+        {popoverChildren && (
+          <PopoverContent
+            data-theme={theme}
+            ref={popoverRef}
+            style={{ width: dropDownListWidth }}
+            onOpenAutoFocus={(e: any) => e.preventDefault()}
+            variant={variant}
+          >
+            {popoverChildren}
+          </PopoverContent>
+        )}
+      </Popover>
+    );
+  }
+);
+BadgeField.displayName = "BadgeField";
+
+
+const useInitialLoad = ({
+  forwardedRef,
+  inputRef,
+  sectionRef,
+  popoverRef,
+  setIsPopoverOpen,
+}: {
+  forwardedRef: React.Ref<HTMLInputElement> | ((instance: HTMLInputElement | null) => void);
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  sectionRef: React.RefObject<HTMLDivElement | null>;
+  popoverRef: React.RefObject<HTMLDivElement | null>;
+  setIsPopoverOpen: (value: boolean) => void;
+}) => {
+
+  // set the reference
+  useEffect(() => {
+    if (!forwardedRef) return;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(inputRef.current);
+    } else {
+      forwardedRef.current = inputRef.current;
+    }
+  }, [forwardedRef, inputRef]);
+
+
+  // detect click outside
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        sectionRef.current &&
+        !sectionRef.current.contains(event.target as Node) &&
+        !popoverRef.current?.contains(event.target as Node)
+      ) {
+        setIsPopoverOpen(false);
+      } else {
+        setIsPopoverOpen(true);
+        inputRef.current?.focus();
+      }
+    };
+
+    document.addEventListener("mousedown", handleOutsideClick);
+    document.addEventListener("pointerdown", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("pointerdown", handleOutsideClick);
+    };
+  }, [sectionRef, popoverRef, setIsPopoverOpen, inputRef]);
+};