@rovula/ui 0.0.74 → 0.0.75

package/dist/cjs/types/components/TextArea/TextArea.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+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 declare const TextArea: React.ForwardRefExoticComponent<{
+    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"> & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/cjs/types/components/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "@/index";
+declare const meta: Meta<typeof TextArea>;
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+export declare const Default: Story;
+export declare const ErrorState: Story;
+export declare const HelperText: Story;
+export declare const Disabled: Story;

package/dist/cjs/types/components/TextArea/TextArea.styles.d.ts

@@ -0,0 +1,27 @@
+export declare const textareaVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "none" | "normal" | "full" | null | undefined;
+    variant?: "outline" | "flat" | "underline" | null | undefined;
+    fullwidth?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    hasClearIcon?: boolean | null | undefined;
+    isFloatingLabel?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const labelVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    isFloatingLabel?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const clearIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const clearIconVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const helperTextVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/cjs/types/index.d.ts

@@ -2,6 +2,7 @@ import "./theme/global.css";
 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";
@@ -37,6 +38,7 @@ export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 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/dist/components/TextArea/TextArea.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 const TextArea = forwardRef((_a, ref) => {
+    var { 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 } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "labelClassName", "className"]);
+    const textareaRef = useRef(null);
+    const _id = id || `textarea-${label !== null && label !== void 0 ? label : ""}`;
+    useImperativeHandle(ref, () => textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current);
+    // 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,
+    });
+    return (_jsxs("div", { className: containerClassName, children: [_jsxs("div", { className: "relative", children: [_jsx("textarea", Object.assign({}, props, { id: _id, ref: textareaRef, disabled: disabled, placeholder: isFloatingLabel ? " " : props.placeholder, className: cn(textareaClassName, className) })), hasClearIcon && (_jsx("div", { className: clearIconWrapperVariant({ size }), style: {
+                            display: keepCloseIconOnValue && props.value ? "flex" : undefined,
+                        }, children: _jsx(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: "" } });
+                                    }
+                                    textareaRef.current.focus();
+                                }
+                            } }) })), label && (_jsxs("label", { htmlFor: _id, className: cn(textareaLabelVariant({
+                            size,
+                            disabled,
+                            error,
+                            isFloatingLabel,
+                        }), labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                                    "text-input-disable-text": disabled,
+                                }), children: "*" }))] }))] }), (errorMessage || helperText) && (_jsx("span", { className: textareaHelperTextVariant({ size, disabled, error }), children: errorMessage || helperText }))] }));
+});
+export default TextArea;

package/dist/components/TextArea/TextArea.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextArea } from "@/index";
+const meta = {
+    title: "Components/TextArea",
+    component: TextArea,
+    parameters: {
+        layout: "fullscreen",
+    },
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex h-screen w-full bg-base-bg2", children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        size: {
+            control: { type: "radio" },
+            options: ["sm", "md", "lg"],
+        },
+        rounded: {
+            control: { type: "radio" },
+            options: ["none", "normal", "full"],
+        },
+        variant: {
+            control: { type: "radio" },
+            options: ["flat", "outline", "underline"],
+        },
+        isFloatingLabel: { control: "boolean" },
+        fullwidth: { control: "boolean" },
+        disabled: { control: "boolean" },
+        error: { control: "boolean" },
+        required: { control: "boolean" },
+    },
+    args: {
+        label: "Description",
+        placeholder: "Type here...",
+        size: "md",
+        rounded: "normal",
+        variant: "outline",
+        isFloatingLabel: true,
+        fullwidth: true,
+        disabled: false,
+        error: false,
+        required: true,
+        hasClearIcon: true,
+        rows: 2,
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const ErrorState = {
+    args: {
+        error: true,
+        errorMessage: "This field is required",
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const HelperText = {
+    args: {
+        helperText: "You can write up to 500 characters.",
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+        value: "Disabled text area",
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};

package/dist/components/TextArea/TextArea.styles.js

@@ -0,0 +1,207 @@
+import { cva } from "class-variance-authority";
+export const textareaVariant = cva([
+    "peer block w-full bg-transparent outline-none placeholder:text-transparent resize-y ui-scrollbar",
+    "text-input-filled-text caret-primary",
+], {
+    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-md",
+            full: "rounded-full",
+        },
+        variant: {
+            flat: "",
+            outline: [
+                "ring-1 ring-inset ring-input-default-stroke",
+                "hover:ring-input-active-stroke",
+                "focus:ring-1 focus:ring-inset focus:ring-input-active-stroke",
+            ],
+            underline: "border-b-2 border-input-default-stroke transition-colors hover:border-input-active-stroke focus:border-input-stroke",
+        },
+        fullwidth: {
+            true: "w-full",
+        },
+        disabled: {
+            true: [
+                "bg-input-disable-bg text-input-disable-text ring-input-disable-stroke placeholder:text-input-disable-text",
+                "hover:ring-input-disable-stroke",
+                "cursor-not-allowed",
+            ],
+        },
+        error: {
+            true: "ring-input-error focus:ring-input-error",
+        },
+        hasClearIcon: {
+            true: "",
+        },
+        isFloatingLabel: {
+            true: "",
+            false: "placeholder:text-input-placeholder",
+        },
+    },
+    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,
+        isFloatingLabel: true,
+    },
+});
+export const labelVariant = cva([
+    "absolute block duration-450 transition-all px-[2px] text-input-default-text",
+    "peer-focus:text-input-filled-text peer-focus:bg-input-label-bg",
+], {
+    variants: {
+        size: {
+            sm: [],
+            md: [],
+            lg: [],
+        },
+        disabled: {
+            true: "text-input-default-text placeholder:text-input-default-text",
+        },
+        error: {
+            true: "ring-error",
+        },
+        isFloatingLabel: {
+            false: "hidden peer-placeholder-shown:block peer-focus:bg-transparent",
+        },
+    },
+    compoundVariants: [
+        // floating = true
+        {
+            isFloatingLabel: true,
+            size: "sm",
+            className: [
+                "left-3 -top-1.5 typography-label2 bg-input-label-bg",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label2",
+            ],
+        },
+        {
+            isFloatingLabel: true,
+            size: "md",
+            className: [
+                "left-3 -top-1.5 typography-label1 bg-input-label-bg",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
+            ],
+        },
+        {
+            isFloatingLabel: true,
+            size: "lg",
+            className: [
+                "left-4 -top-1.5 typography-label1 bg-input-label-bg",
+                "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
+            ],
+        },
+        // --------------
+        // floating = false
+        {
+            isFloatingLabel: false,
+            size: "sm",
+            className: [
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            size: "md",
+            className: [
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            size: "lg",
+            className: [
+                "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+            ],
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        disabled: false,
+        error: false,
+        isFloatingLabel: true,
+    },
+});
+export const clearIconWrapperVariant = cva([
+    "absolute inset-y-0 right-0 items-start justify-center hidden peer-focus:flex",
+], {
+    variants: {
+        size: {
+            sm: "mr-2 pt-2",
+            md: "mr-3 pt-2",
+            lg: "mr-4 pt-4",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+export const clearIconVariant = cva([
+    "cursor-pointer z-50 fill-input-active-stroke hover:fill-input-default-text",
+], {
+    variants: {
+        size: {
+            sm: "size-3",
+            md: "size-4",
+            lg: "size-5",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+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-disable-text",
+        },
+        error: {
+            true: "text-input-error",
+            false: "text-input-filled-text",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        disabled: false,
+        error: false,
+    },
+});

package/dist/esm/bundle.css

@@ -1041,6 +1041,9 @@ input[type=number] {
 .cursor-default{
   cursor: default;
 }
+.cursor-not-allowed{
+  cursor: not-allowed;
+}
 .cursor-pointer{
   cursor: pointer;
 }
@@ -1052,6 +1055,9 @@ input[type=number] {
      -moz-user-select: none;
           user-select: none;
 }
+.resize-y{
+  resize: vertical;
+}
 .resize{
   resize: both;
 }
@@ -3062,6 +3068,12 @@ input[type=number] {
 .pr-xxl{
   padding-right: var(--spacing-spacing-xxl);
 }
+.pt-2{
+  padding-top: 0.5rem;
+}
+.pt-4{
+  padding-top: 1rem;
+}
 .text-left{
   text-align: left;
 }
@@ -3806,6 +3818,24 @@ input[type=number] {
   line-height: var(--button-button-ms-line-height, 22px);
   font-weight: var(--button-button-ms-weight, 700);
 }
+.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; */
+  }
 .placeholder\:text-input-default-text::-moz-placeholder{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);