torch-glare 1.0.2

package/lib/components/InnerLabelField.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { forwardRef, InputHTMLAttributes, ReactNode, useState } from "react";
+import { InputField } from "./InputField";
+import { ToolTipSide } from "./Tooltip";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+interface Props
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
+  size?: "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
+  childrenSide?: ReactNode; // to add action button to the end of the input
+  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
+  label?: string; // to show label
+  required?: boolean; // to show required icon
+  toolTipSide?: ToolTipSide;
+  theme?: Themes
+}
+
+export const InnerLabelField = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      size = "S",
+      icon,
+      childrenSide,
+      popoverChildren,
+      errorMessage,
+      onTable,
+      variant,
+      className,
+      label,
+      theme,
+      required,
+      toolTipSide,
+      ...props
+    },
+    ref
+  ) => {
+    const [focus, setFocus] = useState(false);
+    const [isEmpty, setIsEmpty] = useState(!props.value);
+
+    return (
+      <InputField
+        {...props}
+        theme={theme}
+        onFocus={(e) => {
+          setFocus(true);
+          props.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setFocus(false);
+          props.onBlur?.(e);
+        }}
+        onChange={(e) => {
+          setIsEmpty(!e.target.value);
+          props.onChange?.(e);
+        }}
+        className={cn(className, "group")}
+        ref={ref}
+        toolTipSide={toolTipSide}
+        size={size}
+        variant={variant}
+        childrenSide={childrenSide}
+        popoverChildren={popoverChildren}
+        errorMessage={errorMessage}
+        onTable={onTable}
+        icon={
+          <Label
+            focus={focus}
+            isEmpty={isEmpty}
+            label={label}
+            required={required}
+            disabled={props.disabled}
+            error={!errorMessage}
+          />
+        }
+      />
+    );
+  }
+);
+
+InnerLabelField.displayName = "LabelLessInput"
+
+
+// TODO: Active label when input is empty
+// TODO: Active on Hover
+// TODO: Active on Focus when input is empty
+// TODO: Active on Disabled when input is empty
+// TODO: Active on Error when input is empty
+
+const Label = ({
+
+  focus,
+  isEmpty,
+  label,
+  required,
+  disabled,
+  error,
+}: {
+  focus: boolean;
+  isEmpty: boolean;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+}) => {
+  return (
+    <section className="flex items-center">
+      <section
+        className={cn([
+          "px-[3px]",
+          "typography-labels-small-regular",
+          "text-content-presentation-global-secondary",
+          "flex",
+          "items-center",
+        ])}
+      >
+        <p
+          className={cn(
+            "transition-all",
+            "duration-300",
+            "ease-in-out",
+            "group-hover:text-content-presentation-global-primary group-hover:typography-body-small-regular",
+            { "text-content-presentation-global-primary typography-body-small-regular": isEmpty },
+            { "text-content-presentation-global-primary typography-body-small-regular": focus && isEmpty },
+            { "text-content-presentation-global-primary typography-body-small-regular": error && isEmpty },
+            { "text-content-presentation-global-primary typography-body-small-regular": disabled && isEmpty },
+          )}
+        >
+          {label}
+        </p>
+        {required && (
+          <p className="text-content-presentation-state-negative">*</p>
+        )}
+      </section>
+      <span
+        className={cn(
+          "w-[1px]",
+          "h-[12px]",
+          "bg-border-presentation-action-primary ",
+          "transition-all",
+          "duration-300",
+          "ease-in-out",
+          "rounded-full",
+          "group-hover:bg-border-presentation-action-hover",
+          "group-hover:h-[22px]",
+        )}
+      />
+    </section>
+  );
+};

package/lib/components/Input.tsx

@@ -0,0 +1,179 @@
+import React, { forwardRef, HTMLAttributes, InputHTMLAttributes } from 'react'
+import { cn } from '../utils/cn'
+import { cva } from 'class-variance-authority';
+
+export const GroupStyles = cva(
+    [
+        "flex w-full min-w-0 px-1 justify-center items-center",
+        "typography-body-small-regular",
+        "border",
+        "transition-all duration-200 ease-in-out",
+        "hover:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]",
+        "[&_i]:leading-[0px] leading-[0px]",
+        '[&:has(input[disabled="true"])]:!border-border-presentation-action-disabled',
+        '[&:has(input[disabled="true"])]:!bg-background-presentation-action-disabled',
+        '[&:has(input[disabled="true"])]:hover:border-border-presentation-action-disabled',
+        '[&:has(input[disabled="true"])]:hover:bg-background-presentation-action-disabled',
+    ],
+    {
+        variants: {
+            variant: {
+                PresentationStyle: [
+                    "bg-background-presentation-form-field-primary",
+                    "border-border-presentation-action-primary",
+                    "hover:bg-background-presentation-form-field-hover",
+                    "hover:border-border-presentation-action-hover",
+                    "hover:text-content-presentation-action-light-primary",
+                    'focus-within:border-border-presentation-state-focus',
+                    'focus-within:bg-background-presentation-form-field-primary',
+                    'focus-within:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]',
+                    'focus-within:hover:border-border-presentation-state-focus',
+                    'focus-within:caret-border-presentation-state-focus',
+                    'focus-within:hover:caret-border-presentation-state-focus',
+                ],
+                SystemStyle: [
+                    "bg-black-alpha-20",
+                    "text-white",
+                    "border-[#2C2D2E]",
+                    "hover:border-[#9748FF]",
+                    "hover:bg-purple-alpha-10",
+                    'focus-within:border-border-presentation-state-focus',
+                    'focus-within:shadow-[0px_1px_6px_0px_rgba(0,0,0,0.30)]',
+                    'focus-within:hover:border-border-presentation-state-focus',
+                    'focus-within:caret-border-presentation-state-focus',
+                    'focus-within:hover:caret-border-presentation-state-focus',
+                    'focus-within:hover:bg-black-alpha-20',
+                    "[&_div[data-role='icon']]:focus-within:text-white",
+                    "[&_input]:placeholder:text-[#A0A0A0]",
+                    "[&_input]:hover:placeholder:text-[#A0A0A0]",
+                    "[&_input]:text-white"
+                ],
+            },
+            size: {
+                S: ["h-[30px]", "rounded-[6px] [&_input]:h-[30px] [&_div[data-role='icon']]:text-[16px]"],
+                M: ["h-[40px]", "rounded-[8px] [&_input]:h-[40px] [&_div[data-role='icon']]:text-[18px] [&_div[data-role='icon']]:px-[2px]"],
+            },
+            error: {
+                true: [
+                    "border-border-presentation-state-negative",
+                    "caret-border-presentation-state-negative",
+                    "hover:border-border-presentation-state-negative",
+                    "hover:caret-border-presentation-state-negative",
+                ],
+            },
+            onTable: {
+                true: [
+                    'border-transparent',
+                    'bg-transparent',
+                    'h-[26px]',
+                ],
+            },
+        },
+
+    }
+);
+
+interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "size"> {
+    size?: 'S' | 'M';
+    variant?: 'PresentationStyle' | 'SystemStyle';
+    error?: boolean;
+    onTable?: boolean;
+    ref?: any
+    className?: string;
+}
+
+export const Group = ({ size = 'M', variant = "PresentationStyle", error = false, onTable = false, ref, className, ...props }: InputGroupProps) => {
+    return (
+        <div
+            className={cn(GroupStyles({ size, variant, error, onTable }), className)}
+            ref={ref}
+            {...props}>
+        </div>
+    )
+}
+
+
+
+interface IconProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const Icon = ({ children, className }: IconProps) => {
+    return (
+        <div
+            className={cn(
+                "flex items-center justify-center",
+                "transition-all duration-200 ease-in-out",
+                "leading-0 text-content-presentation-action-light-secondary",
+                className
+            )} data-role="icon">
+            {children}
+        </div>
+    );
+};
+
+
+interface TrillingProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export const Trilling = ({ children, className }: TrillingProps) => {
+    return (
+        <div
+            className={cn(
+                "flex items-center justify-center h-full gap-1 py-1",
+                className
+            )}
+        >
+            {children}
+        </div>
+    )
+}
+
+
+
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <input
+                {...props}
+                autoComplete="off"
+                className={cn(
+                    // Base styles
+                    "typography-body-small-regular",
+                    "text-content-presentation-action-light-primary",
+                    "bg-transparent",
+                    "h-full",
+                    "px-[4px]",
+                    "flex-[1_1_0%]",
+                    "min-w-[30px]",
+                    "outline-none",
+                    "transition-all duration-200 ease-in-out",
+                    "[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%)]",
+                    "hover:placeholder:text-content-presentation-action-light-primary",
+                    className
+                )}
+                ref={ref}
+            />
+        );
+    }
+);
+
+Input.displayName = "Input";
+
+
+/* // solution to fix autofill issue
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-transition: "color 1000s ease-out, background-color 1000s ease-out";
+  -webkit-transition-delay: 1000s;
+}
+*/

package/lib/components/InputField.tsx

@@ -0,0 +1,147 @@
+"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 { ActionButton } from "./ActionButton";
+import { Themes } from "../utils/types";
+import { Icon, Input, Group, Trilling } from "./Input";
+
+export interface Props
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
+  size?: "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
+  childrenSide?: ReactNode; // to add action button to the end of the input
+  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;
+  theme?: Themes
+}
+
+
+export const InputField = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      size = "M",
+      icon,
+      childrenSide,
+      popoverChildren,
+      errorMessage,
+      onTable,
+      variant = "PresentationStyle",
+      toolTipSide,
+      theme,
+      className,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [PopoverWidth, setPopoverWidth] = useState(0);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      if (!forwardedRef) return;
+      if (typeof forwardedRef === "function") forwardedRef(inputRef.current);
+      else forwardedRef.current = inputRef.current;
+    }, [forwardedRef]);
+    // TODO: make the user input visible when input is focused
+    return (
+      <Popover open={isPopoverOpen}>
+        <Tooltip
+          theme={theme}
+          toolTipSide={toolTipSide}
+          open={errorMessage !== undefined}
+          text={errorMessage}
+        >
+          <PopoverTrigger asChild>
+            <div>
+              <Group
+                error={errorMessage !== undefined}
+                onTable={onTable}
+                size={size}
+                variant={variant}
+                data-theme={theme}
+                onFocus={(e) => {
+                  setPopoverWidth(e.currentTarget.offsetWidth);
+                  setIsPopoverOpen(!isPopoverOpen);
+                  inputRef.current?.focus();
+                }}
+                className={className}
+              >
+                {icon && (
+                  <Icon>
+                    {icon}
+                  </Icon>
+                )}
+                <Input
+                  {...props}
+                  onFocus={(e) => {
+                    setIsPopoverOpen(true)
+                    props.onFocus?.(e)
+                  }}
+                  onBlur={(e) => {
+                    setIsPopoverOpen(false)
+                    props.onBlur?.(e)
+                  }}
+                  ref={inputRef}
+                />
+
+                <Trilling >
+                  {childrenSide}
+                  {popoverChildren && (
+                    <PopoverActionButton size={size} variant={variant} isPopoverOpen={isPopoverOpen} />
+                  )}
+                </Trilling>
+              </Group>
+            </div>
+          </PopoverTrigger>
+        </Tooltip>
+
+
+        {
+          popoverChildren && (
+            <PopoverContent
+              theme={theme}
+              variant={variant}
+              onOpenAutoFocus={(e: any) => e.preventDefault()}
+              style={{ width: PopoverWidth }}
+            >
+              {popoverChildren}
+            </PopoverContent>
+          )
+        }
+      </Popover >
+    );
+  }
+);
+
+InputField.displayName = "InputField";
+
+const PopoverActionButton = ({ size, variant, isPopoverOpen }: { size: "S" | "M", variant: "SystemStyle" | "PresentationStyle", isPopoverOpen: boolean }) => {
+  return (
+    <ActionButton size={size}>
+      <i
+        className={cn(
+          "ri-arrow-down-s-line",
+          "transition-[transform,rotate]",
+          "duration-200",
+          "ease-in-out",
+          { "rotate-180": isPopoverOpen },
+          { "!text-[16px]": size === "S" },
+          { "!text-[26px]": size === "M" },
+          { "text-white": variant === "SystemStyle" }
+        )}
+      />
+    </ActionButton>
+  );
+};

package/lib/components/Label.tsx

@@ -0,0 +1,107 @@
+import { LabelHTMLAttributes, ReactNode } from "react";
+import React from "react";
+import { cn } from "../utils/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Themes } from "../utils/types";
+
+const labelComponentVariants = cva("flex", {
+  variants: {
+    directions: {
+      vertical: "flex-col justify-start items-start",
+      horizontal: "flex-row justify-start items-center gap-1",
+    },
+  },
+  defaultVariants: {
+    directions: "horizontal",
+  },
+});
+
+interface Props
+  extends LabelHTMLAttributes<HTMLDivElement>,
+  VariantProps<typeof labelComponentVariants> {
+  label?: ReactNode; // main label
+  requiredLabel?: ReactNode; // normal text with required style
+  secondaryLabel?: ReactNode; // normal text with secondary style
+  as?: React.ElementType;
+  asChild?: boolean;
+  size?: "S" | "M" | "L";
+  variant?: "SystemStyle" | "PresentationStyle";
+  theme?: Themes
+}
+
+export const Label = React.forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      label,
+      secondaryLabel,
+      requiredLabel,
+      size = "M",
+      directions,
+      className,
+      variant = "PresentationStyle",
+      theme,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    return (
+      <div
+        data-theme={theme}
+        className={cn(labelComponentVariants({ directions }), className)} // Merge generated and custom classNames
+        ref={forwardedRef}
+        {...props}
+      >
+        {label && (
+          <p
+            className={cn(
+              "text-start",
+              {
+                "typography-body-small-regular": size === "S",
+                "typography-body-medium-regular": size === "M",
+                "typography-body-large-regular": size === "L",
+              },
+              {
+                "text-content-presentation-global-primary":
+                  variant === "PresentationStyle",
+                "text-[#E5E5E5]": variant === "SystemStyle",
+              }
+            )}
+          >
+            {label}
+          </p>
+        )}
+        {secondaryLabel && (
+          <p
+            className={cn(
+              "text-content-presentation-global-secondary text-start",
+              {
+                "typography-labels-small-regular": size === "S",
+                "typography-labels-medium-regular": size === "M",
+                "typography-body-small-regular": size === "L",
+              }
+            )}
+          >
+            {secondaryLabel}
+          </p>
+        )}
+        {requiredLabel && (
+          <p
+            className={cn(
+              "text-content-presentation-state-negative text-start",
+              {
+                "typography-labels-small-medium": size === "S",
+                "typography-labels-medium-medium": size === "M",
+                "typography-body-small-medium": size === "L",
+              }
+            )}
+          >
+            {requiredLabel}
+          </p>
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+Label.displayName = "Label";

package/lib/components/LabelField.tsx

@@ -0,0 +1,75 @@
+import { InputHTMLAttributes, ReactNode, forwardRef } from "react";
+import { InputField } from "./InputField";
+import { cn } from "../utils/cn";
+import { Label } from "./Label";
+import { ToolTipSide } from "./Tooltip";
+import { Themes } from "../utils/types";
+
+export interface Props
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
+  size?: "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
+  childrenSide?: ReactNode; // to add action button to the end of the input
+  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
+  label?: ReactNode; // main label
+  requiredLabel?: ReactNode; // normal text with required style
+  secondaryLabel?: ReactNode; // normal text with secondary style
+  labelDirections?: "vertical" | "horizontal"; // to change the direction of the label
+  toolTipSide?: ToolTipSide;
+  theme?: Themes
+}
+
+export const LabelField = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      label,
+      requiredLabel,
+      secondaryLabel,
+      size,
+      variant,
+      theme,
+      icon,
+      childrenSide,
+      popoverChildren,
+      errorMessage,
+      onTable,
+      className,
+      labelDirections,
+      toolTipSide,
+
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <section data-theme={theme} className={cn("flex flex-col gap-1 flex-1 w-full", className)}>
+        <Label
+          label={label}
+          requiredLabel={requiredLabel}
+          secondaryLabel={secondaryLabel}
+          directions={labelDirections}
+          variant={variant}
+        />
+        <InputField
+          {...props}
+          theme={theme}
+          className={className}
+          ref={ref}
+          size={size}
+          icon={icon}
+          toolTipSide={toolTipSide}
+          variant={variant}
+          childrenSide={childrenSide}
+          popoverChildren={popoverChildren}
+          errorMessage={errorMessage}
+          onTable={onTable}
+        />
+      </section>
+    );
+  }
+);
+
+LabelField.displayName = "LabelField";