torch-glare 1.0.2

package/lib/components/DropdownMenu.tsx

@@ -0,0 +1,399 @@
+import { cva, VariantProps } from "class-variance-authority";
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+export const MenuItemStyles = 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"],
+      },
+    ],
+  }
+);
+export const dropdownMenuStyles = cva(
+  [
+    "p-1",
+    "rounded-[8px]",
+    "border",
+    "max-h-[200px]",
+    "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",
+    "overflow-x-hidden",
+    "scrollbar-hide",
+  ],
+  {
+    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)]",
+        ],
+      },
+      defaultVariants: {
+        variant: "PresentationStyle",
+      },
+    },
+  }
+);
+
+interface DropdownMenuProps {
+  variant?: "SystemStyle" | "PresentationStyle";
+  className?: string;
+  theme?: Themes
+}
+
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
+  DropdownMenuProps
+>(
+  (
+    { theme, className, sideOffset = 4, variant = "PresentationStyle", ...props },
+    ref
+  ) => (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-theme={theme}
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(dropdownMenuStyles({ variant }), className)}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+);
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  } & VariantProps<typeof MenuItemStyles>
+>(
+  (
+    {
+      className,
+      inset,
+      children,
+      variant = "Default",
+      size = "M",
+      disabled,
+      ...props
+    },
+    ref
+  ) => (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        MenuItemStyles({ variant, size, disabled }),
+        "justify-between",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <i className="ri-arrow-right-s-line text-[16px]"></i>
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+);
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    variant?: "SystemStyle" | "PresentationStyle";
+  }
+>(({ className, variant = "PresentationStyle", ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(dropdownMenuStyles({ variant }), className)}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  } & VariantProps<typeof MenuItemStyles>
+>(
+  (
+    {
+      className,
+      inset,
+      variant = "Default",
+      size = "M",
+      disabled,
+      active,
+      ...props
+    },
+    ref
+  ) => (
+    <DropdownMenuPrimitive.Item
+      {...props}
+      ref={ref}
+      className={cn(
+        MenuItemStyles({ variant, size, disabled, active }),
+        className
+      )}
+    />
+  )
+);
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> &
+  VariantProps<typeof MenuItemStyles>
+>(
+  (
+    {
+      className,
+      children,
+      checked,
+      variant = "Default",
+      size = "M",
+      disabled,
+      ...props
+    },
+    ref
+  ) => (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        MenuItemStyles({ variant, size, disabled }),
+        "relative pl-8",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <i className="ri-radio-button-fill text-white text-[16px]"></i>
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+);
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> &
+  VariantProps<typeof MenuItemStyles>
+>(
+  (
+    {
+      className,
+      children,
+      variant = "Default",
+      size = "M",
+      disabled,
+      ...props
+    },
+    ref
+  ) => (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        MenuItemStyles({ variant, size, disabled }),
+        "relative pl-8",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <i className="h-2 w-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+);
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "text-content-presentation-state-disabled typography-body-medium-regular px-[12px] h-[32px] flex justify-start items-center",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn(
+      "mx-[8px] my-[4px] border-b border-b-border-presentation-action-disabled flex-1",
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuRadioGroup,
+  DropdownMenuSubContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuItem,
+};

package/lib/components/FieldHint.tsx

@@ -0,0 +1,76 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+export const glareFieldAlert = cva(
+  "flex relative justify-start items-center rounded-[4px] min-h-26px w-fit pr-1 rtl:pl-1 rtl:pr-0 [&>section]:text-white",
+  {
+    variants: {
+      state: {
+        info: "bg-background-presentation-state-information-secondary [&>section]:bg-background-presentation-state-information-primary [&>section]:text-background-presentation-state-information-secondary",
+        warning:
+          "bg-background-presentation-state-warning-secondary [&>section]:bg-background-presentation-state-warning-primary [&>section]:text-background-presentation-state-warning-secondary",
+        error:
+          "bg-background-presentation-state-negative-secondary [&>section]:bg-background-presentation-state-negative-primary [&>section]:text-background-presentation-state-negative-secondary",
+        success:
+          "bg-background-presentation-state-success-secondary [&>section]:bg-background-presentation-state-success-primary [&>section]:text-background-presentation-state-success-secondary",
+      },
+    },
+    defaultVariants: {
+      state: "info",
+    },
+  }
+);
+
+type FieldAlertVariant = "success" | "error" | "warning" | "info";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  label: ReactNode;
+  state?: FieldAlertVariant;
+  icon?: ReactNode;
+  theme?: Themes
+}
+
+export const FieldHint: React.FC<Props> = ({
+  label,
+  state,
+  theme,
+  icon,
+  className,
+  ...props
+}) => {
+  return (
+    <section
+      {...props}
+      data-theme={theme}
+      className={cn(
+        glareFieldAlert({
+          state,
+        }),
+        className
+      )}
+    >
+      <section className="flex items-center justify-center min-w-[26px] min-h-[26px] h-full rounded-[4px] text-[18px]">
+        {icon ? (
+          icon
+        ) : state === "error" ? (
+          <i className="ri-alert-fill"></i>
+        ) : state === "success" ? (
+          <i className="ri-checkbox-circle-fill"></i>
+        ) : (
+          <i className="ri-error-warning-fill"></i>
+        )}
+      </section>
+      <p
+        className={
+          "p-1 word-break-all text-content-presentation-global-primary text-wrap text-start whitespace-pre-wrap text-sm"
+        }
+      >
+        {label}
+      </p>
+    </section>
+  );
+};
+
+export default FieldHint;

package/lib/components/ImageAttachment.tsx

@@ -0,0 +1,180 @@
+import { forwardRef, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+import { Button } from "./Button";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogCancel } from "./AlertDialog";
+
+const dropZoneStyles = cva(
+  [
+    "w-full min-w-[200px] h-[65px] flex flex-col rounded-lg border-dashed !border-2 transition-all duration-300 ease-in-out ",
+    "!border-border-presentation-action-borderstyle bg-background-presentation-badge-gray",
+    "hover:border-border-presentation-action-borderstyle  hover:bg-background-presentation-badge-gray",
+  ],
+  {
+    variants: {
+      active: {
+        true: "bg-background-presentation-action-hovercontstyle border-border-presentation-badge-gray",
+      },
+    },
+  }
+);
+
+interface Props extends InputHTMLAttributes<HTMLInputElement | HTMLDivElement> {
+  isDropAreaActive?: boolean;
+  mainLabel: string;
+  secondaryLabel: string;
+  theme?: Themes
+  expandLabel: ReactNode
+  children?: ReactNode
+  getRootProps?: () => any
+}
+
+const ImageAttachment = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      isDropAreaActive,
+      mainLabel,
+      theme,
+      secondaryLabel,
+      className,
+      getRootProps,
+      children,
+      ...props
+    }: Props,
+    ref
+  ) => {
+    return (
+      <section className="flex items-center justify-center w-full gap-1">
+        {children}
+        <Button
+          {...getRootProps?.()}
+          theme={theme}
+          as="label"
+          id={props.id}
+          variant="PrimeContStyle"
+          className={cn(dropZoneStyles({ active: isDropAreaActive }), className)}
+        >
+          <h1 className="text-content-presentation-action-light-primary typography-body-large-medium">
+            {mainLabel}
+          </h1>
+          <p className="text-content-presentation-action-light-secondary typography-body-small-medium">
+            {secondaryLabel}
+          </p>
+          <input ref={ref} {...props} type="file" hidden />
+        </Button>
+      </section>
+
+    );
+  }
+);
+
+ImageAttachment.displayName = "ImageAttachment"
+
+export {
+  ImageAttachment,
+  ExpandableImage,
+  AttachmentImagePreview
+}
+
+
+interface ExpandableImageProps extends HTMLAttributes<HTMLDivElement> {
+  previewSrc: any
+  expandLabel: ReactNode
+  placeholderLabel?: string
+  theme?: Themes
+}
+
+const ExpandableImage = ({ theme, previewSrc, expandLabel, placeholderLabel = "Upload Image", className, ...props }: ExpandableImageProps) => {
+  return (
+    <section data-theme={theme} className={cn("flex items-center justify-center w-[65px] h-[65px] rounded-md relative overflow-hidden border-none  group", className)}>
+      {previewSrc ? <SelectedImg src={previewSrc} /> : <PlaceHolder label={placeholderLabel} />}
+
+      {
+        previewSrc && (
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <button
+                className='flex w-full h-full justify-center items-center flex-col absolute z-10 opacity-0 bg-black/50 transition-all duration-250 ease-in-out hover:opacity-100'
+              >
+                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M15.5 3.5L17.8 5.8L14.91 8.67L16.33 10.09L19.2 7.2L21.5 9.5V3.5H15.5ZM3.5 9.5L5.8 7.2L8.67 10.09L10.09 8.67L7.2 5.8L9.5 3.5H3.5V9.5ZM9.5 21.5L7.2 19.2L10.09 16.33L8.67 14.91L5.8 17.8L3.5 15.5V21.5H9.5ZM21.5 15.5L19.2 17.8L16.33 14.91L14.91 16.33L17.8 19.2L15.5 21.5H21.5V15.5Z" fill="#F9F9F9" />
+                </svg>
+                <p className='text-content-presentation-action-hover typography-labels-small-regular max-w-[50px] break-words m-0'>
+                  {expandLabel}
+                </p>
+              </button>
+            </AlertDialogTrigger>
+            <AlertDialogContent className="w-fit bg-transparent border-none">
+              {props.children}
+            </AlertDialogContent>
+          </AlertDialog>
+        )
+      }
+    </section>
+  );
+}
+
+
+function PlaceHolder({ label }: any) {
+  return (
+    <section className={cn([
+      'w-full h-full gap-[2px] flex flex-col justify-center items-center px-1',
+      ' rounded-lg border-2 border-dashed',
+      ' border-border-presentation-badge-blue-purple',
+      ' bg-background-presentation-badge-blue-purple',
+      ' transition-all duration-300 ease-in-out',
+      ' hover:bg-background-presentation-badge-gray hover:border-border-presentation-badge-gray']
+    )}>
+      <i className="ri-attachment-line text-content-presentation-badge-blue-purple group-hover:text-[#797C7F] text-[24px] h-[24px]"></i>
+      <p className='text-content-presentation-badge-blue-purple typography-labels-small-regular group-hover:text-[#797C7F] px-1 py-[2px] text-center'>{label}</p>
+    </section>
+  )
+}
+
+
+
+function SelectedImg({ src }: any) {
+  return (
+    <section className='bg-white rounded-md border  border-border-presentation-global-primary'>
+      <img src={src} className='w-full h-full object-cover object-center' />
+    </section>
+  )
+}
+
+
+interface AttachmentImagePreviewProps extends HTMLAttributes<HTMLDivElement> {
+  src: any;
+  header?: ReactNode;
+  theme?: Themes
+}
+
+function AttachmentImagePreview({ theme, src, header, className, ...props }: AttachmentImagePreviewProps) {
+  return (
+    <section
+      {...props}
+      data-theme={theme}
+      className={cn(
+        " overflow-hidden flex flex-col items-center justify-center w-80 p-2 gap-2 rounded-md border shadow-md border-border-presentation-global-primary bg-background-presentation-form-base",
+        className
+      )}
+    >
+      <section className="flex items-center justify-between w-full m-0">
+        <p className="m-0 text-content-presentation-global-primary typography-display-medium-semibold">
+          {header}
+        </p>
+        <AlertDialogCancel asChild>
+          <Button theme={theme} size="M" buttonType="icon">
+            <i className="ri-close-line text-[16px]"></i>
+          </Button>
+        </AlertDialogCancel>
+      </section>
+
+      <img className="w-full object-cover object-center rounded-md  border shadow-md border-border-presentation-global-primary" src={src} />
+
+      <section className="flex items-center justify-end w-full gap-2">
+        {props.children}
+      </section>
+    </section>
+  );
+}