@rovula/ui 0.0.5 → 0.0.6

package/src/components/TextInput/TextInput.styles.ts

@@ -0,0 +1,177 @@
+import { cva } from "class-variance-authority";
+
+export const inputVariant = cva(
+  [
+    "border-0 outline-none",
+    "p-1 flex",
+    "peer text-black placeholder:text-transparent",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-2 px-3 typography-small1",
+        md: "py-2 px-3 typography-subtitile4",
+        lg: "p-4 typography-subtitile1",
+      },
+      rounded: {
+        none: "rounded-none",
+        normal: "rounded-xl",
+        full: "rounded-full",
+      },
+      variant: {
+        flat: "",
+        outline:
+          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-2 focus:ring-inset focus:ring-input-active",
+        underline:
+          "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+      },
+      fullwidth: {
+        true: "w-full",
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+      },
+      error: {
+        true: "ring-error",
+      },
+      hasClearIcon: {
+        true: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "underline",
+        className: "rounded-none",
+      },
+      {
+        hasClearIcon: true,
+        size: "sm",
+        class: "focus:pe-6",
+      },
+      {
+        hasClearIcon: true,
+        size: "md",
+        class: "focus:pe-8",
+      },
+      {
+        hasClearIcon: true,
+        size: "lg",
+        class: "focus:pe-10",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "outline",
+      rounded: "normal",
+      fullwidth: false,
+      disabled: false,
+      error: false,
+      hasClearIcon: false,
+    },
+  }
+);
+
+export const labelVariant = cva(
+  [
+    "absolute block transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "left-3 top-2 typography-small1 peer-focus:-top-1.5 peer-focus:typography-label2",
+          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label2",
+        ],
+        md: [
+          "left-3 top-2 typography-subtitile4 peer-focus:-top-1.5 peer-focus:typography-label1",
+          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+        ],
+        lg: [
+          "left-4 top-4 typography-subtitile1 peer-focus:-top-1.5 peer-focus:typography-label1",
+          "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+        ],
+      },
+      disabled: {
+        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+      },
+      error: {
+        true: "ring-error",
+      },
+      isFloating: {
+        true: "-top-1.5 typography-label1 bg-input-label-background",
+      },
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        isFloating: true,
+        class: "-top-1.5 typography-label2 bg-input-label-background",
+      },
+    ],
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      error: false,
+      isFloating: false,
+    },
+  }
+);
+
+export const helperTextVariant = cva(
+  ["text-small1 flex flex-row items-center gap-1"],
+  {
+    variants: {
+      size: {
+        sm: "mt-1",
+        md: "mt-[6px]",
+        lg: "mt-[6px]",
+      },
+      disabled: {
+        true: "text-input-text-disabled",
+      },
+      error: {
+        true: "text-error",
+        false: "text-input-text",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      error: false,
+    },
+  }
+);
+
+export const iconWrapperVariant = cva(
+  [
+    "absolute inset-y-0 right-0 items-center justify-center hidden peer-focus:flex",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "mr-2",
+        md: "mr-3",
+        lg: "mr-4",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export const iconVariant = cva(
+  ["cursor-pointer z-50 fill-input-stroke-active hover:fill-input-text"],
+  {
+    variants: {
+      size: {
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,119 @@
+import React, { FC, forwardRef, useImperativeHandle, useRef } from "react";
+import {
+  helperTextVariant,
+  iconVariant,
+  iconWrapperVariant,
+  inputVariant,
+  labelVariant,
+} from "./TextInput.styles";
+import { twMerge } from "tailwind-merge";
+import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
+
+type InputProps = {
+  id?: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "normal" | "full";
+  variant?: "flat" | "outline" | "underline";
+  type?: React.HTMLInputTypeAttribute;
+  helperText?: string;
+  errorMessage?: string;
+  fullwidth?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  required?: boolean;
+  hasClearIcon?: boolean;
+  className?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+
+const TextInput: FC<InputProps> = forwardRef(
+  (
+    {
+      id,
+      label,
+      size = "md",
+      rounded = "normal",
+      variant = "outline",
+      type = "text",
+      helperText,
+      errorMessage,
+      fullwidth = false,
+      disabled = false,
+      error = false,
+      required = true,
+      hasClearIcon = true,
+      ...props
+    },
+    ref
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const _id = id || `${type}-${label}-input`;
+    const inputClassname = inputVariant({
+      size,
+      rounded,
+      variant,
+      fullwidth,
+      disabled,
+      error,
+      hasClearIcon,
+    });
+    const labelClassname = labelVariant({
+      size,
+      disabled,
+      error,
+      isFloating: !!props.value ?? false,
+    });
+    const helperTextClassname = helperTextVariant({ size, error, disabled });
+    const iconWrapperClassname = iconWrapperVariant({ size });
+    const iconClassname = iconVariant({ size });
+
+    useImperativeHandle(ref, () => ({
+      clearInput: handleClearInput,
+    }));
+
+    const handleClearInput = () => {
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    };
+
+    return (
+      <div className={`flex flex-col ${fullwidth ? "w-full" : ""}`}>
+        <div className="relative">
+          <input
+            {...props}
+            ref={inputRef}
+            type={type}
+            id={_id}
+            disabled={disabled}
+            className={twMerge(inputClassname, props.className)}
+          />
+          {hasClearIcon && (
+            <div className={iconWrapperClassname}>
+              <XCircleIcon
+                type="button"
+                className={iconClassname}
+                onMouseDown={handleClearInput}
+              />
+            </div>
+          )}
+          <label htmlFor={_id} className={labelClassname}>
+            {label} {required && <span className="text-error">*</span>}
+          </label>
+        </div>
+        {(errorMessage || helperText) && (
+          <span className={helperTextClassname}>
+            <ExclamationCircleIcon
+              width={16}
+              height={16}
+              className={error ? "fill-error" : ""}
+            />{" "}
+            {errorMessage || helperText}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+export default TextInput;

package/src/theme/global.css

@@ -128,9 +128,22 @@
     --error-default: var(--error-100);
     --error-foreground: var(--white);
 
-
+    /* Button */
     --btn-rounded-sm: 10px;
     --btn-rounded-md: 12px;
     --btn-rounded-lg: 16px;
+
+    /* Input */
+    --input-default-text-color: 164 169 178;
+    --input-default-stroke-color: 231 231 231;
+
+    --input-active-text-color: 29 30 39;
+    --input-active-stroke-color: 208 208 208;
+  
+    --input-disabled-text-color: 196 199 205;
+    --input-disabled-stroke-color: 239 239 239;
+    --input-disabled-background-color: 247 247 247;
+    
+    --input-label-background-color: 249 251 255;
   }
-}
+}

package/src/theme/presets/colors.js

@@ -1,8 +1,11 @@
+const { DEFAULTS } = require("@rollup/plugin-node-resolve");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
     extend: {
       colors: {
+        // Palette colors
         themes: {
           50: "rgb(var(--themes-50) / <alpha-value>)",
           100: "rgb(var(--themes-100) / <alpha-value>)",
@@ -134,6 +137,29 @@ module.exports = {
           DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
           foreground: "rgb(var(--error-foreground) / <alpha-value>)",
         },
+        // Component color
+        input: {
+          text: {
+            DEFAULT: "rgb(var(--input-default-text-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-text-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-text-color) / <alpha-value>)",
+          },
+          stroke: {
+            DEFAULT: "rgb(var(--input-default-stroke-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-stroke-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-stroke-color) / <alpha-value>)",
+          },
+          background: {
+            DEFAULT: "transparent",
+            active: "transparent",
+            disabled:
+              "rgb(var(--input-disabled-background-color) / <alpha-value>)",
+          },
+          label: {
+            background:
+              "rgb(var(--input-label-background-color) / <alpha-value>)",
+          },
+        },
       },
     },
   },