feat: add component textarea

Author: Ohh-889

packages/ui/package.json

@@ -11,9 +11,7 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "pnpm run pgk:prod && pnpm run build:components && pnpm run registry",
     "build:components": "tsdown",
@@ -47,6 +45,7 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@soybean-react-ui/tailwind-plugin": "workspace:*",
     "clsx": "2.1.1",
     "cmdk": "^1.1.1",

packages/ui/src/components/textarea/Textarea.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { type ChangeEvent, forwardRef } from 'react';
+
+import TextareaContent from './TextareaContent';
+import TextareaCount from './TextareaCount';
+import TextareaRoot from './TextareaRoot';
+import type { TextareaProps } from './types';
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
+  const {
+    classNames,
+    countGraphemes,
+    countRender,
+    defaultValue,
+    maxLength,
+    onChange,
+    onTextChange,
+    showCount,
+    size,
+    value,
+    ...rest
+  } = props;
+
+  const [_value, setValue] = useControllableState({
+    caller: 'textarea',
+    defaultProp: defaultValue,
+    onChange: onTextChange,
+    prop: value
+  });
+
+  function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
+    setValue(e.target.value);
+    onChange?.(e);
+  }
+
+  return (
+    <TextareaRoot
+      className={classNames?.root}
+      size={size}
+    >
+      <TextareaContent
+        className={classNames?.content}
+        maxLength={maxLength}
+        ref={ref}
+        size={size}
+        value={_value}
+        onChange={handleChange}
+        {...rest}
+      />
+
+      {showCount && (
+        <TextareaCount
+          className={classNames?.count}
+          countGraphemes={countGraphemes}
+          maxLength={maxLength}
+          size={size}
+          value={_value}
+        >
+          {countRender}
+        </TextareaCount>
+      )}
+    </TextareaRoot>
+  );
+});
+
+Textarea.displayName = 'Textarea';
+
+export default Textarea;

packages/ui/src/components/textarea/TextareaContent.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { textareaVariants } from './textarea-variants';
+import type { TextareaContentProps } from './types';
+
+const TextareaContent = forwardRef<HTMLTextAreaElement, TextareaContentProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { content } = textareaVariants({ size });
+
+  const mergedCls = cn(content(), className);
+
+  return (
+    <textarea
+      className={mergedCls}
+      data-size={size}
+      data-slot="textarea"
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+TextareaContent.displayName = 'TextareaContent';
+
+export default TextareaContent;

packages/ui/src/components/textarea/TextareaCount.tsx

@@ -0,0 +1,44 @@
+import { cn } from '@/lib/utils';
+
+import { textareaVariants } from './textarea-variants';
+import type { TextareaCountProps } from './types';
+
+const TextareaCount = (props: TextareaCountProps) => {
+  const { children, className, countGraphemes, maxLength, size, value, ...rest } = props;
+
+  const { count } = textareaVariants({ size });
+
+  const mergedCls = cn(count(), className);
+
+  const getCount = () => {
+    if (!value) {
+      return 0;
+    }
+
+    return countGraphemes?.(value) || String(value).length;
+  };
+
+  const countWithMaxLength = () => {
+    const _count = getCount();
+    if (maxLength) {
+      return `${_count} / ${maxLength}`;
+    }
+
+    return String(_count);
+  };
+
+  const text = countWithMaxLength();
+
+  return (
+    <div
+      {...rest}
+      className={mergedCls}
+      data-size={size}
+      data-slot="textarea-count"
+    >
+      {children?.(text) || text}
+    </div>
+  );
+};
+
+export default TextareaCount;

packages/ui/src/components/textarea/TextareaRoot.tsx

@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+
+import { textareaVariants } from './textarea-variants';
+import type { TextareaRootProps } from './types';
+
+const TextareaRoot = (props: TextareaRootProps) => {
+  const { className, size, ...rest } = props;
+
+  const { root } = textareaVariants({ size });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <div
+      {...rest}
+      className={mergedCls}
+      data-size={size}
+      data-slot="textarea-root"
+    />
+  );
+};
+
+export default TextareaRoot;

packages/ui/src/components/textarea/index.ts

@@ -0,0 +1,7 @@
+export { default as Textarea } from './Textarea';
+
+export { default as TextareaContent } from './TextareaContent';
+export { default as TextareaCount } from './TextareaCount';
+export { default as TextareaRoot } from './TextareaRoot';
+
+export * from './types';

packages/ui/src/components/textarea/textarea-variants.ts

@@ -0,0 +1,47 @@
+import { tv } from 'tailwind-variants';
+
+export const textareaVariants = tv({
+  defaultVariants: {
+    resize: 'vertical',
+    size: 'md'
+  },
+  slots: {
+    content: [
+      `flex w-full rounded-md border border-solid border-input bg-background`,
+      `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary`,
+      `disabled:cursor-not-allowed disabled:opacity-50`
+    ],
+    count: 'absolute z-2 leading-none text-muted-foreground',
+    root: 'relative'
+  },
+  variants: {
+    size: {
+      '2xl': {
+        content: 'min-h-12 px-4 py-2 text-xl',
+        count: 'text-xl right-4 bottom-3.5'
+      },
+      lg: {
+        content: 'min-h-9 px-2.5 py-1 text-base',
+        count: 'text-base right-3 bottom-2.5'
+      },
+      md: {
+        content: 'min-h-8 px-2 py-1 text-sm',
+        count: 'text-sm right-2.5 bottom-2'
+      },
+      sm: {
+        content: 'min-h-7 px-1.75 py-1 text-xs',
+        count: 'text-xs right-2 bottom-1.75'
+      },
+      xl: {
+        content: 'min-h-10 px-3 py-1 text-lg',
+        count: 'text-lg right-3.5 bottom-3'
+      },
+      xs: {
+        content: 'min-h-6 px-1.5 py-1 text-2xs',
+        count: 'text-2xs right-1.75 bottom-1.5'
+      }
+    }
+  }
+});
+
+export type TextareaSlots = keyof typeof textareaVariants.slots;

packages/ui/src/components/textarea/types.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+import type { BaseComponentProps, ClassValue } from '@/types/other';
+
+import type { TextareaSlots } from './textarea-variants';
+
+export interface TextareaContentProps extends BaseComponentProps<'textarea'> {}
+
+export type TextareaClassNames = Partial<Record<TextareaSlots, ClassValue>>;
+
+export interface TextareaCountProps
+  extends Omit<BaseComponentProps<'div'>, 'children'>,
+    Pick<TextareaContentProps, 'maxLength' | 'value'> {
+  children?: (count: string) => ReactNode;
+  countGraphemes?: (input: TextareaContentProps['value']) => number;
+}
+
+export interface TextareaRootProps extends BaseComponentProps<'div'> {}
+
+export interface TextareaProps extends TextareaContentProps, Pick<TextareaCountProps, 'countGraphemes'> {
+  classNames?: TextareaClassNames;
+  countRender?: (count: string) => ReactNode;
+  onTextChange?: (value: TextareaContentProps['value']) => void;
+  showCount?: boolean;
+}

packages/ui/src/index.ts

@@ -62,6 +62,8 @@ export * from './components/switch';
 
 export * from './components/tabs';
 
+export * from './components/textarea';
+
 export * from './components/toggle';
 
 export * from './components/toggle-group';

playground/package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "embla-carousel-autoplay": "8.6.0",
+    "grapheme-splitter": "^1.0.4",
     "lucide-react": "0.525.0",
     "next": "15.3.4",
     "next-themes": "0.4.6",