@neoptocom/neopto-ui 1.2.1 → 1.3.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React2 = require('react');
+var React3 = require('react');
 var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
@@ -22,7 +22,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -107,9 +107,9 @@ function BackgroundBlur({
   zIndex = 40,
   className = ""
 }) {
-  const [shouldRender, setShouldRender] = React2.useState(false);
-  const [isVisible, setIsVisible] = React2.useState(false);
-  React2.useEffect(() => {
+  const [shouldRender, setShouldRender] = React3.useState(false);
+  const [isVisible, setIsVisible] = React3.useState(false);
+  React3.useEffect(() => {
     if (open) {
       setShouldRender(true);
       requestAnimationFrame(() => {
@@ -264,7 +264,7 @@ function Card({
     }
   );
 }
-var Input = React2__namespace.forwardRef(
+var Input = React3__namespace.forwardRef(
   ({ className, disabled, variant = "default", ...props }, ref) => {
     const isInline = variant === "inline";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -275,7 +275,7 @@ var Input = React2__namespace.forwardRef(
         className: [
           "w-full bg-transparent outline-none transition-colors",
           isInline ? "" : "h-12 px-4 rounded-full",
-          "text-sm placeholder:text-[var(--muted-fg)]",
+          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
           !isInline && "border",
           disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
             "text-[var(--muted-fg)]",
@@ -292,8 +292,36 @@ var Input = React2__namespace.forwardRef(
   }
 );
 Input.displayName = "Input";
+var Textarea = React3__namespace.forwardRef(
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isInline = variant === "inline";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref,
+        disabled,
+        className: [
+          "w-full bg-transparent outline-none transition-colors resize-y",
+          isInline ? "" : "min-h-[96px] px-4 py-3 rounded-3xl",
+          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
+          !isInline && "border",
+          disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
+            "text-[var(--muted-fg)]",
+            isInline ? "" : "border-[var(--muted-fg)]",
+            isInline ? "" : "hover:border-[var(--border)]",
+            "focus:text-[var(--fg)]",
+            isInline ? "" : "focus:border-[var(--color-brand)]"
+          ].join(" "),
+          className
+        ].join(" "),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 function useIsomorphicLayoutEffect(effect, deps) {
-  const useEffectHook = typeof window !== "undefined" ? React2__namespace.useLayoutEffect : React2__namespace.useEffect;
+  const useEffectHook = typeof window !== "undefined" ? React3__namespace.useLayoutEffect : React3__namespace.useEffect;
   useEffectHook(effect, deps);
 }
 function Modal({
@@ -305,9 +333,9 @@ function Modal({
   zIndex = 50,
   showDecorations = true
 }) {
-  const [mounted, setMounted] = React2__namespace.useState(false);
-  const [isDark, setIsDark] = React2__namespace.useState(false);
-  React2__namespace.useEffect(() => {
+  const [mounted, setMounted] = React3__namespace.useState(false);
+  const [isDark, setIsDark] = React3__namespace.useState(false);
+  React3__namespace.useEffect(() => {
     const checkDarkMode = () => {
       const hasDarkClass = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.querySelector(".dark") !== null;
       setIsDark(hasDarkClass);
@@ -330,7 +358,7 @@ function Modal({
       document.body.style.overflow = original;
     };
   }, [open]);
-  React2__namespace.useEffect(() => {
+  React3__namespace.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -453,9 +481,9 @@ function Avatar({
   style,
   ...props
 }) {
-  const [imgError, setImgError] = React2.useState(false);
-  const initials = React2.useMemo(() => getInitials(name), [name]);
-  const computedStyle = React2.useMemo(() => {
+  const [imgError, setImgError] = React3.useState(false);
+  const initials = React3.useMemo(() => getInitials(name), [name]);
+  const computedStyle = React3.useMemo(() => {
     const s = { ...style };
     if (color) s.backgroundColor = color;
     return s;
@@ -490,7 +518,7 @@ function AvatarGroup({
   overlapPx = 8,
   withRings = true
 }) {
-  const avatars = React2__namespace.Children.toArray(children);
+  const avatars = React3__namespace.Children.toArray(children);
   const displayAvatars = typeof max === "number" ? avatars.slice(0, max) : avatars;
   const extraCount = typeof max === "number" && avatars.length > max ? avatars.length - max : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["flex items-center", className].filter(Boolean).join(" "), children: [
@@ -591,7 +619,7 @@ function getIconButtonClasses(variant = "ghost", size = "md", className) {
   };
   return [base, variants[variant], sizes[size], className].filter(Boolean).join(" ");
 }
-var IconButton = React2__namespace.forwardRef(
+var IconButton = React3__namespace.forwardRef(
   ({
     variant,
     size,
@@ -638,25 +666,25 @@ function Autocomplete({
   id,
   ...props
 }) {
-  const inputId = id ?? React2.useId();
+  const inputId = id ?? React3.useId();
   const listboxId = `${inputId}-listbox`;
-  const [searchQuery, setSearchQuery] = React2.useState("");
-  const [open, setOpen] = React2.useState(false);
-  const [activeIndex, setActiveIndex] = React2.useState(-1);
-  const rootRef = React2.useRef(null);
-  const listRef = React2.useRef(null);
-  const normalizedOptions = React2.useMemo(() => {
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [open, setOpen] = React3.useState(false);
+  const [activeIndex, setActiveIndex] = React3.useState(-1);
+  const rootRef = React3.useRef(null);
+  const listRef = React3.useRef(null);
+  const normalizedOptions = React3.useMemo(() => {
     if (Array.isArray(options) && typeof options[0] === "string") {
       return options.map((str) => ({ label: str, value: str }));
     }
     return options;
   }, [options]);
-  const filtered = React2.useMemo(() => {
+  const filtered = React3.useMemo(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return normalizedOptions;
     return normalizedOptions.filter((o) => o.label.toLowerCase().includes(q));
   }, [normalizedOptions, searchQuery]);
-  const anyOptionHasImage = React2.useMemo(
+  const anyOptionHasImage = React3.useMemo(
     () => normalizedOptions.some((o) => !!o.image),
     [normalizedOptions]
   );
@@ -848,27 +876,27 @@ function Search({
   children,
   ...props
 }) {
-  const inputId = id ?? React2.useId();
+  const inputId = id ?? React3.useId();
   const listboxId = `${inputId}-listbox`;
-  const [searchQuery, setSearchQuery] = React2.useState("");
-  const [open, setOpen] = React2.useState(false);
-  const [activeIndex, setActiveIndex] = React2.useState(-1);
-  const [filtersExpanded, setFiltersExpanded] = React2.useState(false);
-  const rootRef = React2.useRef(null);
-  const listRef = React2.useRef(null);
-  const searchTimeoutRef = React2.useRef(null);
-  const normalizedOptions = React2.useMemo(() => {
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [open, setOpen] = React3.useState(false);
+  const [activeIndex, setActiveIndex] = React3.useState(-1);
+  const [filtersExpanded, setFiltersExpanded] = React3.useState(false);
+  const rootRef = React3.useRef(null);
+  const listRef = React3.useRef(null);
+  const searchTimeoutRef = React3.useRef(null);
+  const normalizedOptions = React3.useMemo(() => {
     if (Array.isArray(options) && typeof options[0] === "string") {
       return options.map((str) => ({ label: str, value: str }));
     }
     return options;
   }, [options]);
-  React2.useMemo(
+  React3.useMemo(
     () => normalizedOptions.some((o) => !!o.image),
     [normalizedOptions]
   );
   const displayValue = selectedOption != null ? typeof selectedOption === "string" ? selectedOption : selectedOption.label : searchQuery;
-  const debouncedSearch = React2.useCallback(
+  const debouncedSearch = React3.useCallback(
     (query) => {
       if (searchTimeoutRef.current) {
         clearTimeout(searchTimeoutRef.current);
@@ -937,7 +965,7 @@ function Search({
     const el = list.children[idx];
     el?.scrollIntoView({ block: "nearest" });
   }
-  React2__namespace.useEffect(() => {
+  React3__namespace.useEffect(() => {
     return () => {
       if (searchTimeoutRef.current) {
         clearTimeout(searchTimeoutRef.current);
@@ -1044,7 +1072,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
     className
   ].filter(Boolean).join(" ");
 }
-var Button = React2__namespace.forwardRef(
+var Button = React3__namespace.forwardRef(
   ({ variant, size, fullWidth, className, children, icon, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1105,8 +1133,8 @@ function Counter({
   className = "",
   ...props
 }) {
-  const [count, setCount] = React2__namespace.useState(value);
-  React2__namespace.useEffect(() => {
+  const [count, setCount] = React3__namespace.useState(value);
+  React3__namespace.useEffect(() => {
     setCount(value);
   }, [value]);
   const handleIncrement = () => {
@@ -1149,7 +1177,7 @@ function Counter({
   ] });
 }
 var AnimatedBgCircle = ({ colors, delay = 0 }) => {
-  const uniqueId = React2.useMemo(() => Math.random().toString(36).substr(2, 9), []);
+  const uniqueId = React3.useMemo(() => Math.random().toString(36).substr(2, 9), []);
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 64 64", fill: "none", className: "h-full transition-all duration-500 ease-in-out w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
           @keyframes colorCycle-${uniqueId} {
@@ -1181,7 +1209,7 @@ var AnimatedBgCircle = ({ colors, delay = 0 }) => {
 };
 var AnimatedBgCircle_default = AnimatedBgCircle;
 var AnimatedBgRectangle = ({ colors, delay = 0 }) => {
-  const uniqueId = React2.useMemo(() => Math.random().toString(36).substr(2, 9), []);
+  const uniqueId = React3.useMemo(() => Math.random().toString(36).substr(2, 9), []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
@@ -1229,14 +1257,14 @@ var AgentButton = ({
   logoAlt = "Agent",
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"]
 }) => {
-  const [showText, setShowText] = React2.useState(false);
-  const [delayedHasNotification, setDelayedHasNotification] = React2.useState(false);
-  const [isMounted, setIsMounted] = React2.useState(false);
-  React2.useEffect(() => {
+  const [showText, setShowText] = React3.useState(false);
+  const [delayedHasNotification, setDelayedHasNotification] = React3.useState(false);
+  const [isMounted, setIsMounted] = React3.useState(false);
+  React3.useEffect(() => {
     const timer = setTimeout(() => setIsMounted(true), 250);
     return () => clearTimeout(timer);
   }, []);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (hasNotification) {
       const textTimer = setTimeout(() => setShowText(true), 500);
       setDelayedHasNotification(true);
@@ -1327,7 +1355,7 @@ var AgentButton = ({
   );
 };
 var AgentButton_default = AgentButton;
-var MessageBubble = React2__namespace.forwardRef(
+var MessageBubble = React3__namespace.forwardRef(
   ({ direction, color, children, className, ...props }, ref) => {
     const borderRadiusClass = direction === "left" ? "[border-radius:16px_16px_16px_2px]" : direction === "right" ? "[border-radius:16px_16px_2px_16px]" : "rounded-2xl";
     const backgroundColor = color || "var(--muted)";
@@ -1372,5 +1400,6 @@ exports.Modal = Modal;
 exports.Search = Search;
 exports.Separator = Separator;
 exports.Skeleton = Skeleton;
+exports.Textarea = Textarea;
 exports.Typo = Typo;
 exports.assets = assets_exports;

package/dist/index.d.cts

@@ -67,6 +67,15 @@ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttribu
     variant?: "default" | "inline";
 } & React.RefAttributes<HTMLInputElement>>;
 
+type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
+    /** Textarea visual variant */
+    variant?: "default" | "inline";
+};
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
+    /** Textarea visual variant */
+    variant?: "default" | "inline";
+} & React.RefAttributes<HTMLTextAreaElement>>;
+
 type ModalProps = {
     /** Whether the modal is open */
     open: boolean;
@@ -322,4 +331,4 @@ type SeparatorProps = {
 };
 declare function Separator({ className }: SeparatorProps): react_jsx_runtime.JSX.Element;
 
-export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, MessageBubble, type MessageBubbleProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, MessageBubble, type MessageBubbleProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Textarea, type TextareaProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.d.ts

@@ -67,6 +67,15 @@ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttribu
     variant?: "default" | "inline";
 } & React.RefAttributes<HTMLInputElement>>;
 
+type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
+    /** Textarea visual variant */
+    variant?: "default" | "inline";
+};
+declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
+    /** Textarea visual variant */
+    variant?: "default" | "inline";
+} & React.RefAttributes<HTMLTextAreaElement>>;
+
 type ModalProps = {
     /** Whether the modal is open */
     open: boolean;
@@ -322,4 +331,4 @@ type SeparatorProps = {
 };
 declare function Separator({ className }: SeparatorProps): react_jsx_runtime.JSX.Element;
 
-export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, MessageBubble, type MessageBubbleProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, MessageBubble, type MessageBubbleProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Textarea, type TextareaProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React2 from 'react';
+import * as React3 from 'react';
 import { useState, useEffect, useMemo, useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -243,7 +243,7 @@ function Card({
     }
   );
 }
-var Input = React2.forwardRef(
+var Input = React3.forwardRef(
   ({ className, disabled, variant = "default", ...props }, ref) => {
     const isInline = variant === "inline";
     return /* @__PURE__ */ jsx(
@@ -254,7 +254,7 @@ var Input = React2.forwardRef(
         className: [
           "w-full bg-transparent outline-none transition-colors",
           isInline ? "" : "h-12 px-4 rounded-full",
-          "text-sm placeholder:text-[var(--muted-fg)]",
+          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
           !isInline && "border",
           disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
             "text-[var(--muted-fg)]",
@@ -271,8 +271,36 @@ var Input = React2.forwardRef(
   }
 );
 Input.displayName = "Input";
+var Textarea = React3.forwardRef(
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isInline = variant === "inline";
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        disabled,
+        className: [
+          "w-full bg-transparent outline-none transition-colors resize-y",
+          isInline ? "" : "min-h-[96px] px-4 py-3 rounded-3xl",
+          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
+          !isInline && "border",
+          disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
+            "text-[var(--muted-fg)]",
+            isInline ? "" : "border-[var(--muted-fg)]",
+            isInline ? "" : "hover:border-[var(--border)]",
+            "focus:text-[var(--fg)]",
+            isInline ? "" : "focus:border-[var(--color-brand)]"
+          ].join(" "),
+          className
+        ].join(" "),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 function useIsomorphicLayoutEffect(effect, deps) {
-  const useEffectHook = typeof window !== "undefined" ? React2.useLayoutEffect : React2.useEffect;
+  const useEffectHook = typeof window !== "undefined" ? React3.useLayoutEffect : React3.useEffect;
   useEffectHook(effect, deps);
 }
 function Modal({
@@ -284,9 +312,9 @@ function Modal({
   zIndex = 50,
   showDecorations = true
 }) {
-  const [mounted, setMounted] = React2.useState(false);
-  const [isDark, setIsDark] = React2.useState(false);
-  React2.useEffect(() => {
+  const [mounted, setMounted] = React3.useState(false);
+  const [isDark, setIsDark] = React3.useState(false);
+  React3.useEffect(() => {
     const checkDarkMode = () => {
       const hasDarkClass = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.querySelector(".dark") !== null;
       setIsDark(hasDarkClass);
@@ -309,7 +337,7 @@ function Modal({
       document.body.style.overflow = original;
     };
   }, [open]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -469,7 +497,7 @@ function AvatarGroup({
   overlapPx = 8,
   withRings = true
 }) {
-  const avatars = React2.Children.toArray(children);
+  const avatars = React3.Children.toArray(children);
   const displayAvatars = typeof max === "number" ? avatars.slice(0, max) : avatars;
   const extraCount = typeof max === "number" && avatars.length > max ? avatars.length - max : 0;
   return /* @__PURE__ */ jsxs("div", { className: ["flex items-center", className].filter(Boolean).join(" "), children: [
@@ -570,7 +598,7 @@ function getIconButtonClasses(variant = "ghost", size = "md", className) {
   };
   return [base, variants[variant], sizes[size], className].filter(Boolean).join(" ");
 }
-var IconButton = React2.forwardRef(
+var IconButton = React3.forwardRef(
   ({
     variant,
     size,
@@ -916,7 +944,7 @@ function Search({
     const el = list.children[idx];
     el?.scrollIntoView({ block: "nearest" });
   }
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     return () => {
       if (searchTimeoutRef.current) {
         clearTimeout(searchTimeoutRef.current);
@@ -1023,7 +1051,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
     className
   ].filter(Boolean).join(" ");
 }
-var Button = React2.forwardRef(
+var Button = React3.forwardRef(
   ({ variant, size, fullWidth, className, children, icon, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -1084,8 +1112,8 @@ function Counter({
   className = "",
   ...props
 }) {
-  const [count, setCount] = React2.useState(value);
-  React2.useEffect(() => {
+  const [count, setCount] = React3.useState(value);
+  React3.useEffect(() => {
     setCount(value);
   }, [value]);
   const handleIncrement = () => {
@@ -1306,7 +1334,7 @@ var AgentButton = ({
   );
 };
 var AgentButton_default = AgentButton;
-var MessageBubble = React2.forwardRef(
+var MessageBubble = React3.forwardRef(
   ({ direction, color, children, className, ...props }, ref) => {
     const borderRadiusClass = direction === "left" ? "[border-radius:16px_16px_16px_2px]" : direction === "right" ? "[border-radius:16px_16px_2px_16px]" : "rounded-2xl";
     const backgroundColor = color || "var(--muted)";
@@ -1331,4 +1359,4 @@ function Separator({ className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: `w-full my-1.5 h-px bg-[var(--border)] ${className}` });
 }
 
-export { AgentButton_default as AgentButton, AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, Card, Chip, Counter, Icon, IconButton, Input, MessageBubble, Modal, Search, Separator, Skeleton, Typo, assets_exports as assets };
+export { AgentButton_default as AgentButton, AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, Card, Chip, Counter, Icon, IconButton, Input, MessageBubble, Modal, Search, Separator, Skeleton, Textarea, Typo, assets_exports as assets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/Input.tsx

@@ -16,7 +16,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         className={[
           "w-full bg-transparent outline-none transition-colors",
           isInline ? "" : "h-12 px-4 rounded-full",
-          "text-sm placeholder:text-[var(--muted-fg)]",
+          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
           !isInline && "border",
           disabled
             ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]")

package/src/components/Textarea.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
+  /** Textarea visual variant */
+  variant?: "default" | "inline";
+};
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isInline = variant === "inline";
+    
+    return (
+      <textarea
+        ref={ref}
+        disabled={disabled}
+        className={[
+          "w-full bg-transparent outline-none transition-colors resize-y",
+          isInline ? "" : "min-h-[96px] px-4 py-3 rounded-3xl",
+          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
+          !isInline && "border",
+          disabled
+            ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]")
+            : [
+                "text-[var(--muted-fg)]",
+                isInline ? "" : "border-[var(--muted-fg)]",
+                isInline ? "" : "hover:border-[var(--border)]",
+                "focus:text-[var(--fg)]",
+                isInline ? "" : "focus:border-[var(--color-brand)]"
+              ].join(" "),
+          className
+        ].join(" ")}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+

package/src/index.ts

@@ -6,6 +6,7 @@ export { AppBackground } from "./components/AppBackground";
 export { BackgroundBlur } from "./components/BackgroundBlur";
 export { Card } from "./components/Card";
 export * from "./components/Input";
+export * from "./components/Textarea";
 export * from "./components/Modal";
 export { default as Typo } from "./components/Typo";
 export { default as Avatar } from "./components/Avatar";
@@ -27,6 +28,7 @@ export type { AppBackgroundProps } from "./components/AppBackground";
 export type { BackgroundBlurProps } from "./components/BackgroundBlur";
 export type { CardProps } from "./components/Card";
 export type { InputProps } from "./components/Input";
+export type { TextareaProps } from "./components/Textarea";
 export type { ModalProps } from "./components/Modal";
 export type { TypoProps, TypoVariant, TypoWeight } from "./components/Typo";
 export type { AvatarProps } from "./components/Avatar";

package/src/stories/Textarea.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "../components/Textarea";
+
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Textarea",
+  component: Textarea,
+  parameters: {
+    layout: "padded",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Textarea placeholder="Enter your message..." />
+      <Textarea placeholder="With default value..." defaultValue="This is some default text that spans multiple lines and shows how the textarea handles content." />
+    </div>
+  ),
+};
+
+export const Inline: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Textarea variant="inline" placeholder="Inline textarea" />
+      <Textarea variant="inline" placeholder="Inline with value" defaultValue="Inline textarea with some content" />
+      <Textarea variant="inline" placeholder="Disabled inline" disabled />
+    </div>
+  )
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <div>
+        <label className="block text-sm font-medium mb-2">Default</label>
+        <Textarea placeholder="Type something..." />
+      </div>
+      <div>
+        <label className="block text-sm font-medium mb-2">With Value</label>
+        <Textarea defaultValue="This textarea has some content already filled in." />
+      </div>
+      <div>
+        <label className="block text-sm font-medium mb-2">Disabled</label>
+        <Textarea placeholder="Disabled textarea" disabled />
+      </div>
+      <div>
+        <label className="block text-sm font-medium mb-2">Disabled with Value</label>
+        <Textarea defaultValue="Disabled with content" disabled />
+      </div>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <div>
+        <label className="block text-sm font-medium mb-2">Small (3 rows)</label>
+        <Textarea placeholder="Small textarea..." rows={3} />
+      </div>
+      <div>
+        <label className="block text-sm font-medium mb-2">Medium (5 rows)</label>
+        <Textarea placeholder="Medium textarea..." rows={5} />
+      </div>
+      <div>
+        <label className="block text-sm font-medium mb-2">Large (8 rows)</label>
+        <Textarea placeholder="Large textarea..." rows={8} />
+      </div>
+    </div>
+  ),
+};
+
+export const WithCustomStyling: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Textarea 
+        placeholder="Custom height..." 
+        style={{ minHeight: "200px" }}
+      />
+      <Textarea 
+        placeholder="Fixed height (no resize)..." 
+        className="resize-none"
+        rows={4}
+      />
+    </div>
+  ),
+};
+