@teamix-evo/ui 0.1.1 → 0.3.0

package/src/components/tag/tag.tsx

@@ -4,20 +4,136 @@ import { X } from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
+// ─── Preset palette (categorical / decorative) ─────────────────────────────
+//
+// 与 ADR 0021 的 semantic `color` 正交：palette 是**装饰色**，用于纯类别区分
+// （博客标签 / 项目分类等），不承载状态语义。取色对齐 OpenTrek 视觉调性，
+// 以 HSL 形式声明便于派生 bg / border / text 三档（实色 + 透明度）。
+//
+// OpenTrek tokens 尚未提供多彩调色板（v0.6 前的已知缺口，见 packages/ui/AGENTS.md §B）；
+// palette 通过 inline style 注入而非 className，custom 任意 CSS 值同路径。
+// 待 tokens 包补 `--palette-blue` 等令牌后，本块替换为 `var(--palette-X)` 即可。
+/* eslint-disable teamix-evo/no-color-literal -- multi-color palette is the v0.6 token gap; constants here are the bridge until OpenTrek ships --palette-* tokens. Same precedent as color-picker default / watermark canvas fallback. */
+const TAG_PALETTE_PRESETS = {
+  blue: 'hsl(217 91% 60%)',
+  cyan: 'hsl(187 85% 43%)',
+  green: 'hsl(142 71% 45%)',
+  orange: 'hsl(25 95% 53%)',
+  purple: 'hsl(271 76% 53%)',
+  red: 'hsl(0 84% 60%)',
+  magenta: 'hsl(322 81% 53%)',
+  lime: 'hsl(78 76% 38%)',
+  gold: 'hsl(45 93% 47%)',
+} as const;
+/* eslint-enable teamix-evo/no-color-literal */
+
+export type TagPalettePreset = keyof typeof TAG_PALETTE_PRESETS;
+
+interface PaletteStyle {
+  backgroundColor: string;
+  borderColor: string;
+  color: string;
+}
+
+function resolvePaletteStyle(palette: string): PaletteStyle {
+  const base =
+    (TAG_PALETTE_PRESETS as Record<string, string>)[palette] ?? palette;
+  return {
+    backgroundColor: `color-mix(in srgb, ${base} 12%, transparent)`,
+    borderColor: `color-mix(in srgb, ${base} 35%, transparent)`,
+    color: base,
+  };
+}
+
 const tagVariants = cva(
-  'inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors',
+  'inline-flex items-center gap-1 border border-border font-medium transition-colors',
   {
     variants: {
+      variant: {
+        solid: '',
+        outline: 'bg-transparent',
+        ghost: 'border-transparent bg-transparent',
+      },
       color: {
-        default: 'border-border bg-muted text-foreground',
-        primary: 'border-primary/30 bg-primary/10 text-primary',
-        success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
-        warning: 'border-amber-200 bg-amber-50 text-amber-700',
-        error: 'border-destructive/30 bg-destructive/10 text-destructive',
-        info: 'border-blue-200 bg-blue-50 text-blue-700',
+        default: '',
+        primary: '',
+        success: '',
+        warning: '',
+        destructive: '',
+      },
+      size: {
+        sm: 'h-5 px-1.5 text-xs',
+        md: 'h-6 px-2 text-xs',
       },
     },
-    defaultVariants: { color: 'default' },
+    compoundVariants: [
+      // ── solid (filled background) ──
+      {
+        variant: 'solid',
+        color: 'default',
+        className: 'border-border bg-muted text-foreground',
+      },
+      {
+        variant: 'solid',
+        color: 'primary',
+        className: 'border-primary/30 bg-primary/10 text-primary',
+      },
+      {
+        variant: 'solid',
+        color: 'success',
+        className:
+          'border-success-border/30 bg-success-subtle text-success',
+      },
+      {
+        variant: 'solid',
+        color: 'warning',
+        className:
+          'border-warning-border/30 bg-warning-subtle text-warning',
+      },
+      {
+        variant: 'solid',
+        color: 'destructive',
+        className:
+          'border-destructive/30 bg-destructive/10 text-destructive',
+      },
+      // ── outline (border + text) ──
+      {
+        variant: 'outline',
+        color: 'default',
+        className: 'border-border text-foreground',
+      },
+      {
+        variant: 'outline',
+        color: 'primary',
+        className: 'border-primary text-primary',
+      },
+      {
+        variant: 'outline',
+        color: 'success',
+        className: 'border-success text-success',
+      },
+      {
+        variant: 'outline',
+        color: 'warning',
+        className: 'border-warning text-warning',
+      },
+      {
+        variant: 'outline',
+        color: 'destructive',
+        className: 'border-destructive text-destructive',
+      },
+      // ── ghost (text only) ──
+      { variant: 'ghost', color: 'default', className: 'text-foreground' },
+      { variant: 'ghost', color: 'primary', className: 'text-primary' },
+      { variant: 'ghost', color: 'success', className: 'text-success' },
+      { variant: 'ghost', color: 'warning', className: 'text-warning' },
+      {
+        variant: 'ghost',
+        color: 'destructive',
+        className: 'text-destructive',
+      },
+    ],
+    defaultVariants: { variant: 'solid', color: 'default', size: 'md' },
   },
 );
 
@@ -25,34 +141,104 @@ export interface TagProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,
     VariantProps<typeof tagVariants> {
   /**
-   * 语义颜色(antd `color` 并集) — 与 Badge 不同,Tag 偏向**用户可关闭的标签**(关键词 / 分类),Badge 偏向状态徽标。
+   * 形态轴(对齐 [ADR 0021](../../../../docs/adr/0021-semantic-color-api-unification.md)):
+   * `solid` 实色背景 / `outline` 仅描边 / `ghost` 仅文字。
+   * @default "solid"
+   */
+  variant?: 'solid' | 'outline' | 'ghost';
+  /**
+   * 语义色 — 与组件状态绑定的调色板,5 档(填充背景类省略 `muted`,信息色用 `primary`,
+   * 不收 `info` — 见 ADR 0021)。装饰性类别区分请用 `palette`。
    * @default "default"
    */
-  color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';
+  /**
+   * 尺寸:`sm` 高 20px(更紧凑) / `md` 高 24px(默认)。
+   * @default "md"
+   */
+  size?: 'sm' | 'md';
+  /**
+   * **分类色 / 装饰色** — 与 `color`(语义色) 正交,用于纯装饰的类别区分(博客标签 / 项目分类 / ...)。
+   *
+   * 接受 9 种预设色 `'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'magenta' | 'lime' | 'gold'`
+   * 或任意 CSS 颜色值(如 `'#FF5733'` / `'hsl(280 80% 60%)'` / `'var(--brand)'`)。
+   *
+   * `palette` 存在时会**覆盖** `color` 的语义配色(派生 bg / border / text 三档),
+   * 但仍受 `variant` 控制形态:`solid` 12% bg + 35% border、`outline` 仅 solid 描边、`ghost` 仅文字。
+   *
+   * 装饰类别走 `palette`;状态语义走 `color`。两者同传时 `palette` 优先(因为它是显式装饰意图)。
+   */
+  palette?: TagPalettePreset | (string & {});
+  /**
+   * 标签文字左侧图标插槽(antd `icon` 并集)。推荐传 `lucide-react` icon。
+   * 与 `closable` 的关闭按钮不冲突 — icon 在左,X 在右。
+   */
+  icon?: React.ReactNode;
   /**
    * 显示关闭按钮(antd `closable` 并集)。
    * @default false
    */
   closable?: boolean;
   /**
-   * 关闭回调。
+   * 关闭回调 — `closable` 触发时调用。建议父组件维护数组并在此回调中移除当前项。
    */
   onClose?: () => void;
 }
 
 const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
   (
-    { color, closable = false, onClose, className, children, ...props },
+    {
+      variant,
+      color,
+      size,
+      palette,
+      icon,
+      closable = false,
+      onClose,
+      className,
+      style,
+      children,
+      ...props
+    },
     ref,
   ) => {
     const [open, setOpen] = React.useState(true);
     if (!open) return null;
+
+    // 始终用 token --radius-tag 注入 borderRadius(OpenTrek 组件级圆角)
+    const composedStyle: React.CSSProperties = {
+      borderRadius: 'var(--radius-tag)',
+    };
+
+    // palette 路径:覆盖 cva 的颜色 className(inline style 优先级 > utility class)
+    if (palette) {
+      const ps = resolvePaletteStyle(palette);
+      composedStyle.color = ps.color;
+      if (variant === undefined || variant === 'solid') {
+        composedStyle.backgroundColor = ps.backgroundColor;
+        composedStyle.borderColor = ps.borderColor;
+      } else if (variant === 'outline') {
+        // outline 用实色描边,识别度更高(palette 装饰场景下更直观)
+        composedStyle.borderColor = ps.color;
+      }
+      // ghost: cva 已 transparent,只覆盖 text color
+    }
+
     return (
       <span
         ref={ref}
-        className={cn(tagVariants({ color }), className)}
+        className={cn(tagVariants({ variant, color, size }), className)}
+        style={{ ...composedStyle, ...style }}
         {...props}
       >
+        {icon ? (
+          <span
+            aria-hidden="true"
+            className="inline-flex shrink-0 items-center [&_svg]:size-3"
+          >
+            {icon}
+          </span>
+        ) : null}
         {children}
         {closable ? (
           <button
@@ -62,7 +248,7 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
               setOpen(false);
               onClose?.();
             }}
-            className="rounded-sm opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="-mr-0.5 inline-flex shrink-0 cursor-pointer rounded-sm opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           >
             <X className="size-3" />
           </button>
@@ -86,7 +272,7 @@ export interface CheckableTagProps
 }
 
 const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>(
-  ({ checked, onChange, disabled, className, children, ...props }, ref) => (
+  ({ checked, onChange, disabled, className, style, children, ...props }, ref) => (
     <span
       ref={ref}
       role="checkbox"
@@ -102,12 +288,13 @@ const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>(
           onChange?.(!checked);
         }
       }}
+      style={{ borderRadius: 'var(--radius-tag)', ...style }}
       className={cn(
-        'inline-flex cursor-pointer items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors',
+        'inline-flex h-6 cursor-pointer items-center gap-1 border border-border px-2 text-xs font-medium transition-colors',
         'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
         checked
           ? 'border-primary bg-primary text-primary-foreground hover:bg-primary/90'
-          : 'border-border bg-muted text-foreground hover:bg-accent',
+          : 'bg-muted text-foreground hover:bg-accent',
         disabled && 'cursor-not-allowed opacity-50',
         className,
       )}
@@ -131,7 +318,10 @@ export interface CheckableTagGroupOption {
 }
 
 export interface CheckableTagGroupProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  extends Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    'onChange' | 'defaultValue'
+  > {
   /** 候选项数组。 */
   options: CheckableTagGroupOption[];
   /** 受控选中 value 集合。 */
@@ -144,13 +334,18 @@ export interface CheckableTagGroupProps
   disabled?: boolean;
 }
 
-const CheckableTagGroup = React.forwardRef<HTMLDivElement, CheckableTagGroupProps>(
+const CheckableTagGroup = React.forwardRef<
+  HTMLDivElement,
+  CheckableTagGroupProps
+>(
   (
     { options, value, defaultValue, onChange, disabled, className, ...props },
     ref,
   ) => {
     const isControlled = value !== undefined;
-    const [internal, setInternal] = React.useState<string[]>(defaultValue ?? []);
+    const [internal, setInternal] = React.useState<string[]>(
+      defaultValue ?? [],
+    );
     const current = isControlled ? value! : internal;
 
     const toggle = (v: string, next: boolean) => {
@@ -182,4 +377,10 @@ const CheckableTagGroup = React.forwardRef<HTMLDivElement, CheckableTagGroupProp
 );
 CheckableTagGroup.displayName = 'CheckableTagGroup';
 
-export { Tag, CheckableTag, CheckableTagGroup, tagVariants };
+export {
+  Tag,
+  CheckableTag,
+  CheckableTagGroup,
+  tagVariants,
+  TAG_PALETTE_PRESETS,
+};

package/src/components/textarea/textarea.meta.md

@@ -2,25 +2,29 @@
 id: textarea
 name: Textarea
 type: component
-category: form
-since: 0.1.0
-package: "@teamix-evo/ui"
+category: data-entry
+since: 0.2.0
+package: '@teamix-evo/ui'
+displayName: 多行文本框
 ---
 
-# Textarea
+# Textarea 多行文本框
 
-多行文本输入 — shadcn 简洁基底 + antd 的 `autoSize / showCount`。
+多行文本输入 — shadcn 简洁基底 + antd `Input.TextArea` 的 `autoSize` / `showCount` 并集。从 v0.2 起作为**独立 entry**,与 [`Input`](../input/input.meta.md) 拆开(对齐 shadcn 2025-10 拆分粒度)。
+
+`size` 三档字号与 Input 对齐(高度由 `rows` / `autoSize` 决定,**不受 size 影响**)。
 
 ## When to use
 
 - 多行内容输入(评论 / 反馈 / 描述 / 备注)
-- 配 `autoSize` 给"动态高度"输入
+- 配 `autoSize={{ minRows, maxRows }}` 给"动态高度"输入
 - 配 `showCount + maxLength` 控制长度
 
 ## When NOT to use
 
-- 单行 → `Input`
-- 富文本编辑 → 用 Tiptap / Lexical 等编辑器(超出本组件库范围)
+- 单行文本 → `Input`
+- 输入 + 发送按钮(聊天框 / 评论框)→ `InputGroup` + `InputGroupTextarea` + `InputGroupAddon variant="button"`
+- @提及输入 → `Mentions`
 
 ## Props
 
@@ -31,6 +35,8 @@ package: "@teamix-evo/ui"
 | --- | --- | --- | --- | --- |
 | `autoSize` | `boolean \| { minRows?: number; maxRows?: number }` | `false` | – | 自动高度。`true` 时无上下限;传 `{ minRows, maxRows }` 时受限。 实现:监听 input 事件,把 textarea 设为 auto 后再读 scrollHeight。 |
 | `showCount` | `boolean` | `false` | – | 显示字符计数(antd `showCount` 并集);需配合 `maxLength`。 |
+| `size` | `'sm' \| 'md' \| 'lg'` | `"md"` | – | 字号档位,与 `Input` 三档对齐:`sm`(text-xs) / `md`(text-xs,默认) / `lg`(text-sm)。 高度由 `rows` / `autoSize` 决定,不受 size 影响。 |
+| `error` | `boolean` | `false` | – | 错误态(快捷开关),会同时设置 `aria-invalid`,渲染 destructive 边框 / ring。 |
 | `value` | `string` | – | – | 受控值。 |
 | `defaultValue` | `string` | – | – | uncontrolled 初始值。 |
 | `rows` | `number` | `3` | – | 行数(autoSize 关闭时生效)。 |
@@ -38,8 +44,6 @@ package: "@teamix-evo/ui"
 
 ## 依赖
 
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
 <!-- auto:deps:begin -->
 ### 同库依赖
 
@@ -54,14 +58,16 @@ package: "@teamix-evo/ui"
 _无 — 本组件不依赖任何 npm 包。_
 <!-- auto:deps:end -->
 
-> 透传所有 `<textarea>` 原生属性(`name` / `placeholder` / `disabled` / `onChange` / ...)。
+> 透传所有 `<textarea>` 原生属性(`name` / `id` / `placeholder` / `aria-*` / `onChange` / ...)。
 
 ## AI 生成纪律
 
-- **`autoSize` 替代 `rows`**:autoSize 启用后 rows 被忽略;两者不要同时传
-- **autoSize 配 `maxRows` 防止失控**:不限的 autoSize 在长内容下会撑爆容器,推荐 `{ minRows: 3, maxRows: 8 }`
-- **`showCount` 必须配 `maxLength`**:无 maxLength 时 showCount 不显示
-- **粘贴长内容时 ResizeObserver**:autoSize 用 effect 监听 value 触发,粘贴大文本会自动调整;无需业务侧介入
+- **`autoSize` 替代 `rows`** —— autoSize 启用后 rows 被忽略,两者不要同时传
+- **autoSize 配 `maxRows` 防止失控** —— 不限的 autoSize 在长内容下会撑爆容器,推荐 `{ minRows: 3, maxRows: 8 }`
+- **`showCount` 必须配 `maxLength`** —— 无 maxLength 时 showCount 不显示
+- **粘贴长内容时 effect 监听 value 自动 resize** —— 无需业务侧介入
+- **错误态走 `error` prop** —— 自动反映 `aria-invalid="true"`,**不要**手动拼 `border-destructive`
+- **不要硬编码颜色** —— `bg-background` / `border-input` / `placeholder:text-muted-foreground` 都是 design token
 
 ## Examples
 
@@ -71,13 +77,23 @@ import { Textarea } from '@/components/ui/textarea';
 // 基础
 <Textarea placeholder="留下你的反馈..." />
 
-// 自动高度
+// 自动高度(推荐配 maxRows)
 <Textarea autoSize={{ minRows: 3, maxRows: 8 }} placeholder="..." />
 
 // 字数统计
 <Textarea showCount maxLength={500} placeholder="不超过 500 字" />
 
-// 受控
-const [v, setV] = React.useState('');
-<Textarea value={v} onChange={(e) => setV(e.target.value)} />
+// 错误态
+<Textarea error defaultValue="非法内容" />
 ```
+
+## Migration · 从旧 `@/components/input/input` 迁移
+
+v0.2 起 Textarea 拆为独立 entry,import 路径变化:
+
+```diff
+- import { Textarea } from '@/components/input/input';
++ import { Textarea } from '@/components/textarea/textarea';
+```
+
+CLI 命令:`teamix-evo ui add textarea`(单独安装,不再需要先装 input)。组件 API 完全保持不变。

package/src/components/textarea/textarea.stories.tsx

@@ -1,34 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
 import { Textarea } from './textarea';
 
 const meta: Meta<typeof Textarea> = {
-  title: '表单与输入 · Form/Textarea',
+  title: '数据录入 · Data Entry/Textarea',
   component: Textarea,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '多行文本输入 — 用于输入多行文本信息。shadcn `Textarea` 原子 + antd `Input.TextArea` 的并集能力：支持 `autoSize`（传 `{ minRows, maxRows }` 随内容自适应高度）、`showCount` 发表字数计数、`maxLength` 限制。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/design`，无 mock。',
+          'Textarea 多行文本框 —— shadcn 简洁基底 + antd `Input.TextArea` 的 `autoSize` / `showCount` 并集。`size` 三档字号与 Input 对齐(高度由 `rows` / `autoSize` 决定,**不受 size 影响**)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
   argTypes: {
+    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
     rows: { control: 'number' },
-    maxLength: { control: 'number' },
     showCount: { control: 'boolean' },
+    error: { control: 'boolean' },
     disabled: { control: 'boolean' },
     placeholder: { control: 'text' },
+    maxLength: { control: 'number' },
   },
   args: {
+    size: 'md',
     rows: 3,
-    placeholder: '请输入...',
     showCount: false,
+    error: false,
     disabled: false,
+    placeholder: '请输入...',
   },
   decorators: [
     (Story) => (
-      <div className="w-80">
+      <div className="w-96">
         <Story />
       </div>
     ),
@@ -40,6 +45,7 @@ type Story = StoryObj<typeof Textarea>;
 
 export const Playground: Story = {};
 
+/** 自动高度 —— `autoSize={{ minRows, maxRows }}` 让高度随内容生长,粘贴大段文本不撑爆容器。 */
 export const AutoSize: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
@@ -50,6 +56,7 @@ export const AutoSize: Story = {
   ),
 };
 
+/** 字数统计 —— `showCount` 必须配 `maxLength`,缺一不显示。 */
 export const ShowCount: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
@@ -57,6 +64,25 @@ export const ShowCount: Story = {
   ),
 };
 
+/** 三档字号 —— 高度仍由 rows 决定,只有字号变化(text-xs / text-xs / text-sm)。 */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Textarea size="sm" placeholder="Small (text-xs)" />
+      <Textarea size="md" placeholder="Medium (text-xs)" />
+      <Textarea size="lg" placeholder="Large (text-sm)" />
+    </div>
+  ),
+};
+
+/** 错误态 —— `error` 自动设置 `aria-invalid="true"` + destructive 边框 / ring。 */
+export const Error: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <Textarea error defaultValue="非法内容" />,
+};
+
+/** 禁用态。 */
 export const Disabled: Story = {
   parameters: { controls: { disable: true } },
   render: () => <Textarea disabled defaultValue="这是只读的内容,不可编辑。" />,

package/src/components/textarea/textarea.tsx

@@ -2,8 +2,16 @@ import * as React from 'react';
 
 import { cn } from '@/utils/cn';
 
+// ─── Textarea ───────────────────────────────────────────────────────────────
+//
+// 多行文本输入。高度由 `rows` / `autoSize` 决定,`size` 仅控制字号档位与 Input 一致。
+// 与 Input 拆分独立 entry(对齐 shadcn 2025-10 拆分粒度)。
+
 export interface TextareaProps
-  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'rows'> {
+  extends Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'rows' | 'size'
+  > {
   /**
    * 自动高度。`true` 时无上下限;传 `{ minRows, maxRows }` 时受限。
    * 实现:监听 input 事件,把 textarea 设为 auto 后再读 scrollHeight。
@@ -15,6 +23,17 @@ export interface TextareaProps
    * @default false
    */
   showCount?: boolean;
+  /**
+   * 字号档位,与 `Input` 三档对齐:`sm`(text-xs) / `md`(text-xs,默认) / `lg`(text-sm)。
+   * 高度由 `rows` / `autoSize` 决定,不受 size 影响。
+   * @default "md"
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * 错误态(快捷开关),会同时设置 `aria-invalid`,渲染 destructive 边框 / ring。
+   * @default false
+   */
+  error?: boolean;
   /** 受控值。 */
   value?: string;
   /** uncontrolled 初始值。 */
@@ -29,19 +48,23 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       className,
       autoSize = false,
       showCount = false,
+      size = 'md',
+      error = false,
       value,
       defaultValue,
       rows = 3,
       onChange,
       maxLength,
+      'aria-invalid': ariaInvalidProp,
       ...props
     },
     ref,
   ) => {
+    const ariaInvalid = ariaInvalidProp ?? (error ? true : undefined);
+    const sizeClass =
+      size === 'sm' ? 'text-xs' : size === 'lg' ? 'text-sm' : 'text-xs';
     const isControlled = value !== undefined;
-    const [internal, setInternal] = React.useState<string>(
-      defaultValue ?? '',
-    );
+    const [internal, setInternal] = React.useState<string>(defaultValue ?? '');
     const current = isControlled ? value : internal;
 
     const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
@@ -62,8 +85,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       el.style.height = 'auto';
       const next = el.scrollHeight;
       const opts = typeof autoSize === 'object' ? autoSize : {};
-      const minH =
-        (opts.minRows ?? 0) * lineHeight + padTop + padBottom;
+      const minH = (opts.minRows ?? 0) * lineHeight + padTop + padBottom;
       const maxH = opts.maxRows
         ? opts.maxRows * lineHeight + padTop + padBottom
         : Number.POSITIVE_INFINITY;
@@ -85,10 +107,12 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         value={isControlled ? value : undefined}
         defaultValue={!isControlled ? defaultValue : undefined}
         maxLength={maxLength}
+        aria-invalid={ariaInvalid}
         onChange={handleChange}
         className={cn(
-          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          autoSize ? 'resize-none' : 'min-h-[80px]',
+          'flex w-full rounded-md border border-input bg-background px-3 py-2 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive',
+          sizeClass,
+          autoSize ? 'resize-none' : 'min-h-textarea',
           className,
         )}
         {...props}
@@ -97,7 +121,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     if (showCount && maxLength) {
       return (
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           {textarea}
           <div className="text-right text-xs text-muted-foreground tabular-nums">
             {current?.length ?? 0} / {maxLength}