torch-glare 1.0.2

package/lib/components/Table.tsx

@@ -0,0 +1,395 @@
+'use client'
+import * as React from "react";
+import { cn } from "../utils/cn";
+import { cva, VariantProps } from "class-variance-authority";
+import { useRef } from "react";
+import { Button } from "./Button";
+import { Checkbox } from "./Checkbox";
+import { useResize } from "../hooks/useResize";
+
+const tableHeadVariants = cva(
+  [
+    "text-content-presentation-global-primary",
+    "px-[8px]",
+    "w-full",
+    "flex",
+    "items-center",
+    "justify-center",
+    "text-start",
+    "bg-transparent",
+    "hover:bg-background-presentation-action-hover",
+    "hover:text-content-presentation-action-hover",
+    "transition-[background-color,color]",
+    "duration-200",
+    "rounded-[3px]",
+  ],
+  {
+    variants: {
+      size: {
+        S: "h-[20px] min-w-[20px] typography-body-small-semibold",
+        M: "h-[32px] min-w-[32px] typography-body-medium-semibold",
+      },
+      disabled: {
+        true: [
+          "bg-background-presentation-table-row-disabled",
+          "cursor-not-allowed",
+          "hover:bg-background-presentation-table-row-disabled",
+          "hover:text-content-presentation-global-primary",
+        ],
+      },
+      isDummy: {
+        true: [
+          "hover:bg-transparent",
+          "hover:text-content-presentation-global-primary",
+        ],
+      },
+      defaultVariants: {
+        size: "M",
+      },
+    },
+  }
+);
+
+type TableHeadVariantsProps = VariantProps<typeof tableHeadVariants>;
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement> & {
+    theme?: "dark" | "light" | "default";
+  }
+>(({ className, theme, ...props }, ref) => (
+  <table
+    data-theme={theme}
+    ref={ref}
+    className={cn("overflow-hidden w-auto [border-collapse:separate] border-spacing-0", className)}
+    {...props}
+
+  >
+    {props.children}
+  </table>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn(
+      "shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]",
+      className
+    )}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={className} {...props}>
+    {props.children}
+  </tbody>
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn(className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    state?: "delete" | "update" | "add" | "selected" | "open";
+  }
+>(({ className, state = "", ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn([
+      "[&_button]:hover:opacity-100 hover:bg-background-presentation-table-row-hover transition-colors",
+      {
+        "bg-background-presentation-table-row-negative border-border-presentation-badge-red":
+          state === "delete",
+      },
+      {
+        "bg-background-presentation-table-row-information border-border-presentation-badge-navy":
+          state === "update",
+      },
+      {
+        "bg-background-presentation-table-row-success border-border-presentation-badge-green":
+          state === "add",
+      },
+      {
+        "bg-background-presentation-table-row-selected border-t border-[2px] border-border-presentation-table-selected":
+          state === "selected",
+      },
+      {
+        "bg-background-presentation-table-row-hover border-t border-[2px] border-border-presentation-table-dropdown":
+          state === "open",
+      },
+    ], className)}
+    {...props}
+  >
+    {props.children}
+  </tr>
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement> &
+  TableHeadVariantsProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    sortType?: "asc" | "desc" | undefined;
+    onSort?: () => void;
+    isDummy?: boolean;
+  }
+>(
+  (
+    { className, size = "M", disabled, sortType, onSort, isDummy, ...props },
+    forwardedRef
+  ) => {
+    const headRef = useRef<any>(null);
+    const { width, handleStartResize } = useResize(headRef);
+
+    // Combine refs using useEffect
+    React.useEffect(() => {
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") forwardedRef(headRef.current);
+      else forwardedRef.current = headRef.current;
+    }, [forwardedRef]);
+
+    return (
+      <th
+        ref={headRef}
+        className={cn(
+          "relative py-[2px] px-[2px] border-b-[2px]  border-border-presentation-table-header",
+        )}
+      >
+        <div
+          {...props}
+          className={cn(
+            tableHeadVariants({ size, disabled, isDummy }),
+            { "min-w-[200px]": !isDummy },
+            className
+          )}
+        >
+          <div
+            style={{ width: `${width}px` }}
+            className={cn("flex items-center justify-between flex-1", {
+              "justify-center": isDummy,
+            })}
+          >
+            {props.children}
+            {isDummy || !onSort ? null : <SortButton onSort={onSort} sortType={sortType} />}
+          </div>
+        </div>
+        {!isDummy && (
+          <button className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary">
+            <ResizeIcon
+              onMouseDown={handleStartResize}
+              onTouchStart={handleStartResize}
+            />
+          </button>
+        )}
+
+      </th>
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement> & {
+    isDummy?: boolean;
+    childrenClassName?: string;
+    className?: string;
+  }
+>(({ className, childrenClassName, isDummy, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      [
+        "h-[40px] text-content-presentation-action-light-primary",
+        "typography-body-small-regular relative",
+        "border-r  border-b border-border-presentation-table-header px-1 rtl:border-l rtl:border-r-0",
+        "break-all",
+      ],
+      { "border-x-0": isDummy },
+      className
+    )}
+    {...props}
+  >
+    <div
+      className={cn(
+        "flex justify-start items-center gap-1 w-[200px] min-w-full overflow-hidden",
+        "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_75%,transparent_100%)]",
+        "rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_75%,transparent_100%)]",
+        { "w-auto justify-center": isDummy }, childrenClassName)}
+    >
+      {props.children}
+    </div>
+  </td>
+));
+TableCell.displayName = "TableCell";
+
+const TableCheckbox = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement> & {
+    id: string;
+  }
+>(({ className, id, ...props }, ref) => {
+  return (
+    <div className={cn(["flex items-center justify-center"], className)}>
+      <Checkbox {...props} ref={ref} size="S" />
+    </div>
+  );
+});
+TableCheckbox.displayName = "TableCheckbox";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+const TableFooterButton = React.forwardRef<
+  HTMLButtonElement,
+  React.PropsWithChildren<{
+    className?: string;
+  }>
+>(({ children, className, ...props }, ref) => {
+  return (
+    <TableRow
+      className={cn(
+        "h-[40px] overflow-hidden",
+        className
+      )}
+    >
+      <TableCell
+        className={
+          "border-t-2 border-b-2 border-transparent hover:border-border-presentation-table-action-hover  hover:bg-background-presentation-table-acton-hover"}
+        colSpan={100}
+      >
+        <button
+          ref={ref}
+          {...props}
+          className={cn(
+            "overflow-hidden w-full flex items-center justify-start gap-2 typography-body-medium-semibold [&_i]:text-[20px]",
+            className
+          )}
+        >{children}</button>
+      </TableCell>
+    </TableRow>
+  );
+});
+TableFooterButton.displayName = "TableFooterButton";
+
+
+const SubTableButton = ({
+  isActive,
+  className,
+  dummy,
+}: {
+  isActive?: boolean;
+  className?: string;
+  dummy?: boolean;
+}) => {
+  return (
+    <Button
+      className={cn(
+        "transition-opacity duration-200 opacity-0  border-none bg-transparent focus:bg-background-presentation-state-information-primary active:bg-background-presentation-state-information-primary",
+        {
+          "hover:bg-transparent hover:text-black focus:bg-transparent focus:text-black active:bg-transparent active:text-black":
+            dummy,
+        },
+        className
+      )}
+      variant={"PrimeStyle"}
+      buttonType={"icon"}
+    >
+      <i
+        className={cn(
+          "ri-arrow-right-s-line",
+          "rtl:rotate-180",
+          "transition-transform duration-200",
+          { "rotate-90": isActive }
+        )}
+      ></i>
+    </Button>
+  );
+};
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  TableCheckbox,
+  SubTableButton,
+  TableFooterButton,
+};
+
+const ResizeIcon = (props: any) => {
+  return (
+    <svg
+      {...props}
+      className="z-50 cursor-col-resize absolute top-[50%] right-[50%] translate-x-[50%] translate-y-[-50%] opacity-0 hover:opacity-100 transition-opacity duration-200"
+      width="8"
+      height="32"
+      viewBox="0 0 8 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect {...props} y="5" width="8" height="30" rx="3" fill="#3391FF" />
+      <circle {...props} cx="2.75" cy="15.5" r="0.75" fill="#F9F9F9" />
+      <circle {...props} cx="5.25" cy="15.5" r="0.75" fill="#F9F9F9" />
+      <circle {...props} cx="2.75" cy="18.5" r="0.75" fill="#F9F9F9" />
+      <circle {...props} cx="5.25" cy="18.5" r="0.75" fill="#F9F9F9" />
+      <circle {...props} cx="2.75" cy="21.5" r="0.75" fill="#F9F9F9" />
+      <circle {...props} cx="5.25" cy="21.5" r="0.75" fill="#F9F9F9" />
+      <circle {...props} cx="2.75" cy="24.5" r="0.75" fill="#F9F9F9" />
+      <circle {...props} cx="5.25" cy="24.5" r="0.75" fill="#F9F9F9" />
+    </svg>
+  );
+};
+
+const SortButton = ({
+  onSort,
+  sortType,
+}: {
+  onSort?: () => void;
+  sortType?: "asc" | "desc" | undefined;
+}) => {
+  return (
+    <button
+      className={cn("cursor-pointer text-[16px] z-10")}
+      onPointerDown={onSort}
+    >
+      {sortType === "asc" ? (
+        <i className="ri-arrow-up-line text-border-presentation-state-focus" />
+      ) : sortType === "desc" ? (
+        <i className="ri-arrow-down-line text-border-presentation-state-focus" />
+      ) : (
+        <i className="ri-arrow-up-down-line text-content-presentation-global-secondary" />
+      )}
+    </button>
+  );
+};

package/lib/components/Textarea.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { cn } from "../utils/cn";
+import { Label } from "./Label";
+import { cva, VariantProps } from "class-variance-authority";
+
+// Define the styles for the textarea using cva
+const textareaStyles = cva(
+  [
+    "w-full",
+    "border",
+    "rounded-[4px]",
+    "px-[8px]",
+    "py-[12px]",
+    "outline-none",
+    "typography-body-small-regular",
+    "!min-h-[36px]",
+    "transition-[border,background-color,color,caret-color,box-shadow]",
+    "ease-in-out",
+    "duration-150",
+    "text-content-presentation-action-light-primary",
+    "caret-border-presentation-state-focus",
+    "border-border-presentation-action-primary",
+    "bg-background-presentation-form-field-primary",
+    "hover:border-border-presentation-action-hover",
+    "hover:bg-background-presentation-form-field-hover",
+    "focus:border-border-presentation-state-focus",
+    "hover:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
+    "disabled:border-border-presentation-action-disabled",
+    "disabled:bg-background-presentation-action-disabled",
+    "disabled:text-border-presentation-action-disabled",
+    "disabled:cursor-not-allowed",
+    "disabled:placeholder-border-presentation-action-disabled",
+  ],
+  {
+    variants: {
+      state: {
+        negative: [
+          "border-border-presentation-state-negative",
+          "caret-border-presentation-state-negative",
+          "hover:border-border-presentation-state-negative",
+          "focus:border-border-presentation-state-negative",
+        ],
+      },
+    },
+    defaultVariants: {},
+  }
+);
+
+// Define the prop types for the Textarea component
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  VariantProps<typeof textareaStyles> {
+  label?: string; // Optional label text
+  requiredLabel?: string; // Text for required field indicator
+  secondaryLabel?: string; // Additional label text
+  direction?: "row" | "column";
+  theme?: "dark" | "light" | "default";
+}
+
+// Textarea component definition
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      className,
+      state, // Default state for textarea
+      label,
+      requiredLabel,
+      secondaryLabel,
+      direction = "row",
+      theme,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        data-theme={theme}
+        className={cn(
+          "flex gap-[4px]",
+          {
+            "flex-col": direction === "column",
+            "flex-row items-start gap-[10px]": direction === "row",
+          },
+          className
+        )}
+      >
+        <Label
+          label={label}
+          requiredLabel={requiredLabel}
+          secondaryLabel={secondaryLabel}
+          directions={direction === "row" ? "vertical" : "horizontal"}
+          className={cn({
+            "pt-[9px]": direction === "row",
+          })}
+          size={"M"}
+        />
+        <textarea
+          className={cn(textareaStyles({ state }), className)}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/lib/components/Tooltip.tsx

@@ -0,0 +1,111 @@
+import { cva, VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import React from "react";
+
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const ToolTipRoot = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+const TooltipArrow = TooltipPrimitive.Arrow
+export type ToolTipSide = "top" | "right" | "bottom" | "left";
+
+export enum ContentAlign {
+  START = "start",
+  CENTER = "center",
+  END = "end",
+}
+
+const tooltipStyles = cva("typography-body-medium-regular rounded-[4px] p-1", {
+  variants: {
+    variant: {
+      primary: "bg-background-system-body-tertiary text-content-system-global-primary",
+      highlight: "bg-gradient-to-r from-wavy-navy-900 to-wavy-navy-800 text-white"
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+  },
+});
+
+interface TooltipProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+  VariantProps<typeof tooltipStyles> {
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+  toolTipSide?: ToolTipSide;
+  contentAlign?: ContentAlign;
+  avoidCollisions?: boolean;
+  tip?: boolean;
+  delay?: number;
+  disabled?: boolean;
+  text: ReactNode;
+  theme?: Themes
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  open,
+  text,
+  theme = "dark",
+  onOpenChange,
+  toolTipSide,
+  contentAlign = ContentAlign.CENTER,
+  avoidCollisions = true,
+  delay = 400,
+  tip = true,
+  variant,
+  className,
+  ...props
+}) => {
+  return (
+    <TooltipProvider>
+      <ToolTipRoot delayDuration={delay} {...(typeof open !== "undefined" && { open })} {...(onOpenChange && { onOpenChange })}>
+        <TooltipTrigger aria-label="Open tooltip" asChild>
+          {children}
+        </TooltipTrigger>
+
+        <TooltipContent
+          data-theme={theme}
+          sideOffset={2}
+          side={toolTipSide}
+          align={contentAlign}
+          avoidCollisions={avoidCollisions}
+          className={cn(tooltipStyles({ variant, className }))}
+          {...props}
+        >
+          {text}
+          {tip && <TooltipArrow className={cn("fill-background-system-body-tertiary", {
+            "fill-wavy-navy-900": variant === "highlight"
+          })} />}
+        </TooltipContent>
+      </ToolTipRoot>
+    </TooltipProvider>
+  );
+};
+
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow, ToolTipRoot }

package/lib/components/TransparentLabel.tsx

@@ -0,0 +1,72 @@
+import { cn } from "../utils/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import { HTMLAttributes } from "react";
+
+export const TransparentLabelStyles = cva(
+    "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_85%,transparent_100%)] rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_85%,transparent_100%)]",
+    {
+        variants: {
+            size: {
+                "display-large-bold": "typography-display-large-bold",
+                "display-large-semibold": "typography-display-large-semibold",
+                "display-large-medium": "typography-display-large-medium",
+                "display-large-regular": "typography-display-large-regular",
+                "display-medium-bold": "typography-display-medium-bold",
+                "display-medium-semibold": "typography-display-medium-semibold",
+                "display-medium-medium": "typography-display-medium-medium",
+                "display-medium-regular": "typography-display-medium-regular",
+                "display-small-bold": "typography-display-small-bold",
+                "display-small-semibold": "typography-display-small-semibold",
+                "display-small-medium": "typography-display-small-medium",
+                "display-small-regular": "typography-display-small-regular",
+                "headers-large-bold": "typography-headers-large-bold",
+                "headers-large-semibold": "typography-headers-large-semibold",
+                "headers-large-medium": "typography-headers-large-medium",
+                "headers-large-regular": "typography-headers-large-regular",
+                "headers-medium-bold": "typography-headers-medium-bold",
+                "headers-medium-semibold": "typography-headers-medium-semibold",
+                "headers-medium-medium": "typography-headers-medium-medium",
+                "headers-medium-regular": "typography-headers-medium-regular",
+                "headers-small-bold": "typography-headers-small-bold",
+                "headers-small-semibold": "typography-headers-small-semibold",
+                "headers-small-medium": "typography-headers-small-medium",
+                "headers-small-regular": "typography-headers-small-regular",
+                "body-large-bold": "typography-body-large-bold",
+                "body-large-semibold": "typography-body-large-semibold",
+                "body-large-medium": "typography-body-large-medium",
+                "body-large-regular": "typography-body-large-regular",
+                "body-medium-bold": "typography-body-medium-bold",
+                "body-medium-semibold": "typography-body-medium-semibold",
+                "body-medium-medium": "typography-body-medium-medium",
+                "body-medium-regular": "typography-body-medium-regular",
+                "body-small-bold": "typography-body-small-bold",
+                "body-small-semibold": "typography-body-small-semibold",
+                "body-small-medium": "typography-body-small-medium",
+                "body-small-regular": "typography-body-small-regular",
+                "labels-large-bold": "typography-labels-large-bold",
+                "labels-large-semibold": "typography-labels-large-semibold",
+                "labels-large-medium": "typography-labels-large-medium",
+                "labels-large-regular": "typography-labels-large-regular",
+                "labels-medium-bold": "typography-labels-medium-bold",
+                "labels-medium-semibold": "typography-labels-medium-semibold",
+                "labels-medium-medium": "typography-labels-medium-medium",
+                "labels-medium-regular": "typography-labels-medium-regular",
+                "labels-small-bold": "typography-labels-small-bold",
+                "labels-small-semibold": "typography-labels-small-semibold",
+                "labels-small-medium": "typography-labels-small-medium",
+                "labels-small-regular": "typography-labels-small-regular",
+            },
+        },
+        defaultVariants: {
+            size: "body-medium-regular",
+        }
+    }
+);
+
+interface Props extends HTMLAttributes<HTMLParagraphElement>, VariantProps<typeof TransparentLabelStyles> { }
+
+export const TransparentLabel = ({ size, className, ...props }: Props) => {
+    return (
+        <p {...props} className={cn(TransparentLabelStyles({ size }), className)}></p>
+    );
+};