@rovula/ui 0.0.73 → 0.0.75

package/dist/esm/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/esm/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/esm/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/esm/types/components/Tree/Tree.stories.d.ts

@@ -16,3 +16,4 @@ export declare const Leaf: StoryObj<typeof Tree>;
 export declare const HideCheckboxMode: StoryObj<typeof Tree>;
 export declare const RadioMode: StoryObj<typeof Tree>;
 export declare const CheckAll: StoryObj<typeof Tree>;
+export declare const LongText: StoryObj<typeof Tree>;

package/dist/esm/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/index.d.ts

@@ -99,6 +99,43 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     renderEndIcon?: () => ReactNode;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
+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__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
+declare const TextArea: React__default.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__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React__default.RefAttributes<HTMLTextAreaElement>>;
+
 type TextProps = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "small6" | "small7" | "small8" | "small9" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
@@ -772,4 +809,4 @@ declare function usePrevious<T>(value: T): T | undefined;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };

package/dist/index.js

@@ -4,6 +4,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";

package/dist/src/theme/global.css

@@ -2770,6 +2770,10 @@ input[type=number] {
   min-width: fit-content;
 }
 
+.max-w-\[300px\] {
+  max-width: 300px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -2835,6 +2839,10 @@ input[type=number] {
   cursor: default;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -2849,6 +2857,10 @@ input[type=number] {
           user-select: none;
 }
 
+.resize-y {
+  resize: vertical;
+}
+
 .resize {
   resize: both;
 }
@@ -3064,6 +3076,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -5391,6 +5407,14 @@ input[type=number] {
   padding-right: var(--spacing-spacing-xxl);
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -6312,6 +6336,28 @@ input[type=number] {
   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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.73",
+  "version": "0.0.75",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea, type TextAreaProps } from "@/index";
+
+const meta: Meta<typeof TextArea> = {
+  title: "Components/TextArea",
+  component: TextArea,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex h-screen w-full bg-base-bg2">
+        <Story />
+      </div>
+    ),
+  ],
+  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,
+  } satisfies Partial<TextAreaProps>,
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextArea id="1" {...props} size="lg" />
+        <TextArea id="2" {...props} size="md" />
+        <TextArea id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    error: true,
+    errorMessage: "This field is required",
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextArea id="1" {...props} size="lg" />
+        <TextArea id="2" {...props} size="md" />
+        <TextArea id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const HelperText: Story = {
+  args: {
+    helperText: "You can write up to 500 characters.",
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextArea id="1" {...props} size="lg" />
+        <TextArea id="2" {...props} size="md" />
+        <TextArea id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: "Disabled text area",
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <TextArea id="1" {...props} size="lg" />
+        <TextArea id="2" {...props} size="md" />
+        <TextArea id="3" {...props} size="sm" />
+      </div>
+    );
+  },
+};

package/src/components/TextArea/TextArea.styles.ts

@@ -0,0 +1,228 @@
+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,
+    },
+  }
+);