@rovula/ui 0.0.74 → 0.0.76

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,150 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { cn } from "@/utils/cn";
+import {
+  textareaVariant,
+  labelVariant as textareaLabelVariant,
+  helperTextVariant as textareaHelperTextVariant,
+  clearIconWrapperVariant,
+  clearIconVariant,
+} from "./TextArea.styles";
+import { XCircleIcon } from "@heroicons/react/16/solid";
+
+export type TextAreaProps = {
+  id?: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "normal" | "full";
+  variant?: "flat" | "outline" | "underline";
+  helperText?: string;
+  errorMessage?: string;
+  fullwidth?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  required?: boolean;
+  isFloatingLabel?: boolean;
+  keepCloseIconOnValue?: boolean;
+  hasClearIcon?: boolean;
+  labelClassName?: string;
+  className?: string;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      id,
+      label,
+      size = "md",
+      rounded = "normal",
+      variant = "outline",
+      helperText,
+      errorMessage,
+      fullwidth = true,
+      disabled = false,
+      error = false,
+      required = true,
+      isFloatingLabel = true,
+      keepCloseIconOnValue = false,
+      hasClearIcon = true,
+      labelClassName,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const _id = id || `textarea-${label ?? ""}`;
+
+    useImperativeHandle(ref, () => textareaRef?.current as HTMLTextAreaElement);
+
+    // Reuse TextInput visual language via utility classes to stay consistent
+    const containerClassName = useMemo(
+      () => `inline-flex flex-col ${fullwidth ? "w-full" : ""}`,
+      [fullwidth]
+    );
+
+    const textareaClassName = textareaVariant({
+      size,
+      rounded,
+      variant,
+      fullwidth,
+      disabled,
+      error,
+      hasClearIcon,
+      isFloatingLabel,
+    } as any);
+
+    return (
+      <div className={containerClassName}>
+        <div className="relative">
+          <textarea
+            {...props}
+            id={_id}
+            ref={textareaRef}
+            disabled={disabled}
+            placeholder={isFloatingLabel ? " " : props.placeholder}
+            className={cn(textareaClassName, className)}
+          />
+          {hasClearIcon && (
+            <div
+              className={clearIconWrapperVariant({ size })}
+              style={{
+                display:
+                  keepCloseIconOnValue && props.value ? "flex" : undefined,
+              }}
+            >
+              <XCircleIcon
+                type="button"
+                className={clearIconVariant({ size })}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  if (textareaRef.current) {
+                    const prev = textareaRef.current.value;
+                    textareaRef.current.value = "";
+                    if (props.onChange && prev !== "") {
+                      props.onChange({ target: { value: "" } } as any);
+                    }
+                    textareaRef.current.focus();
+                  }
+                }}
+              />
+            </div>
+          )}
+          {label && (
+            <label
+              htmlFor={_id}
+              className={cn(
+                textareaLabelVariant({
+                  size,
+                  disabled,
+                  error,
+                  isFloatingLabel,
+                }),
+                labelClassName
+              )}
+            >
+              {label}{" "}
+              {required && (
+                <span
+                  className={cn("text-error", {
+                    "text-input-disable-text": disabled,
+                  })}
+                >
+                  *
+                </span>
+              )}
+            </label>
+          )}
+        </div>
+        {(errorMessage || helperText) && (
+          <span
+            className={textareaHelperTextVariant({ size, disabled, error })}
+          >
+            {errorMessage || helperText}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+export default TextArea;

package/src/index.ts

@@ -5,6 +5,7 @@ import "./icons/iconConfig";
 
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
@@ -46,6 +47,7 @@ export * from "./components/RadioGroup/RadioGroup";
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps } from "./components/Navbar/Navbar";
 export type { AvatarProps } from "./components/Avatar/Avatar";

package/src/theme/global.css

@@ -28,3 +28,29 @@
     -moz-appearance: textfield;
   }
 }
+
+@layer utilities {
+
+  .ui-scrollbar::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+    background: rgba(0, 0, 0, 0.08);
+  }
+  
+  .ui-scrollbar::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: rgba(121, 141, 150, 0.48);
+    width: 6px;
+  }
+  
+  .ui-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(251, 252, 253, 0.48);
+    cursor: pointer;
+  }
+
+  .ui-scrollbar::-webkit-scrollbar-corner {
+    display: none;
+    /* background: transparent; */
+  }
+
+}