@ttdk-design-system/library-react 0.0.0-stage → 1.0.0

package/src/web/textarea/AI_GUIDE.md

@@ -0,0 +1,141 @@
+# <Textarea /> — TTDK Component Reference
+
+Komponen Textarea TTDK sesuai spesifikasi Anatomy Desain: 1. Field title (14px Semibold, #141313) 2. (Opsional) label (12px Regular, #9698A2) 3. Border radius 8px 4. Field content (14px Regular, #141313, placeholder #9698A2) 5. Additional information / Helper text (12px Regular, #3C4245)
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/textarea/textarea.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Textarea from "@ttdk-design-system/library-react/web/textarea";
+
+// Vue 3
+import Textarea from "@ttdk-design-system/library-vue/web/textarea";
+
+// Svelte
+import Textarea from "@ttdk-design-system/library-svelte/web/textarea";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label?` | `string` | `-` | Teks label judul field yang ditampilkan di atas textarea (14px Semibold, #141313). |
+| `labelStyle?` | `UiProps` | `-` | Style kustom untuk elemen label judul field (UiProps). |
+| `labelClass?` | `string` | `-` | Class CSS kustom untuk elemen label judul field. |
+| `wrapperStyle?` | `UiProps` | `-` | Style kustom untuk elemen kontainer textarea wrapper (UiProps). |
+| `wrapperClass?` | `string` | `-` | Class CSS kustom untuk elemen kontainer textarea wrapper. |
+| `textareaStyle?` | `UiProps` | `-` | Style kustom untuk elemen textarea control HTML (UiProps). |
+| `textareaClass?` | `string` | `-` | Class CSS kustom untuk elemen textarea control HTML. |
+| `errorMessageStyle?` | `UiProps` | `-` | Style kustom untuk elemen pesan error validasi (UiProps). |
+| `errorMessageClass?` | `string` | `-` | Class CSS kustom untuk elemen pesan error validasi. |
+| `helperTextStyle?` | `UiProps` | `-` | Style kustom untuk elemen helper text (UiProps). |
+| `helperTextClass?` | `string` | `-` | Class CSS kustom untuk elemen helper text. |
+| `charCountStyle?` | `UiProps` | `-` | Style kustom untuk elemen penghitung karakter (UiProps). |
+| `charCountClass?` | `string` | `-` | Class CSS kustom untuk elemen penghitung karakter. |
+| `optional?` | `boolean` | `-` | Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2). |
+| `optionalText?` | `string` | `(Opsional)` | Kustomisasi teks keterangan opsional. |
+| `placeholder?` | `string` | `-` | Nilai teks placeholder saat textarea kosong (#9698A2). |
+| `value?` | `string` | `-` | Nilai terkontrol (controlled value) pada textarea. |
+| `defaultValue?` | `string` | `-` | Nilai awal tidak terkontrol (uncontrolled initial value). |
+| `rows?` | `number` | `4` | Jumlah baris default yang ditampilkan. |
+| `name?` | `string` | `-` | Nama form field HTML untuk integrasi formulir. |
+| `id?` | `string` | `-` | Identifier unik elemen textarea. |
+| `resize?` | `'none' | 'vertical' | 'horizontal' | 'both'` | `vertical` | Kontrol orientasi resize oleh pengguna. - `'none'`: Tidak dapat di-resize - `'vertical'`: Hanya dapat di-resize vertikal (standar) - `'horizontal'`: Hanya dapat di-resize horizontal - `'both'`: Bebas di-resize kedua arah |
+| `error?` | `boolean` | `false` | Status apakah textarea sedang dalam kondisi error / tidak valid. |
+| `errorMessage?` | `string` | `-` | Pesan teks penjelasan kesalahan validasi di bawah field. |
+| `helperText?` | `string` | `-` | Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245). |
+| `helperTextPosition?` | `'top' | 'bottom'` | `-` | Posisi teks helper |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran textarea. - `'sm'`: Padding rapat - `'md'`: Standar - `'lg'`: Padding lapang |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Bentuk sudut kelengkungan textarea. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 16px |
+| `block?` | `boolean` | `false` | Menjadikan lebar field textarea memenuhi kontainer penuh (full-width 100%). |
+| `disabled?` | `boolean` | `false` | Status apakah field dinonaktifkan (disabled). |
+| `readOnly?` | `boolean` | `false` | Status apakah field bersifat hanya-baca (readonly). |
+| `required?` | `boolean` | `false` | Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *). |
+| `autoComplete?` | `string` | `-` | Konfigurasi atribut autocomplete HTML. |
+| `maxLength?` | `number` | `-` | Batas maksimum panjang karakter. |
+| `minLength?` | `number` | `-` | Batas minimum panjang karakter. |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root / form-item (UiProps). |
+| `onChange?` | `(event: any) => void` | `-` | Callback event saat nilai textarea berubah. |
+| `onInput?` | `(event: any) => void` | `-` | Callback event saat pengguna mengetik (input event). |
+| `onBlur?` | `(event: any) => void` | `-` | Callback event saat textarea kehilangan fokus (blur). |
+| `onFocus?` | `(event: any) => void` | `-` | Callback event saat textarea mendapatkan fokus. |
+| `inputRef?` | `any` | `-` | Ref instance elemen textarea HTML untuk akses kontrol DOM langsung (focus, blur, select). |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `onKeyDown?` | `(event: any) => void` | `-` | Callback event tombol keyboard ditekan. |
+| `onKeyUp?` | `(event: any) => void` | `-` | Callback event tombol keyboard dilepaskan. |
+| `showCount?` | `boolean` | `false` | Menampilkan penghitung karakter di bawah textarea (format: `x / maxLength`). Memerlukan prop `maxLength` untuk berfungsi. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Textarea from "@ttdk-design-system/library-react/web/textarea";
+import "@ttdk-design-system/library-react/web/textarea/textarea.css";
+
+export function Example() {
+  const [notes, setNotes] = useState("");
+
+  return (
+    <div style={{ maxWidth: '500px' }}>
+      <Textarea
+        label="Catatan Diagnosa Medis"
+        placeholder="Tuliskan catatan rekam medis atau diagnosa pasien..."
+        rows={4}
+        value={notes}
+        helperText="Maksimal 1000 karakter."
+        onChange={(e) => setNotes(e.target.value)}
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Textarea from "@ttdk-design-system/library-vue/web/textarea";
+import "@ttdk-design-system/library-vue/web/textarea/textarea.css";
+
+const notes = ref("");
+</script>
+
+<template>
+  <div style="max-width: 500px;">
+    <Textarea
+      label="Catatan Diagnosa Medis"
+      placeholder="Tuliskan catatan rekam medis atau diagnosa pasien..."
+      :rows="4"
+      :value="notes"
+      helper-text="Maksimal 1000 karakter."
+      @input="(e: any) => (notes = e.target.value)"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Textarea from "@ttdk-design-system/library-svelte/web/textarea";
+  import "@ttdk-design-system/library-svelte/web/textarea/textarea.css";
+
+  let notes = "";
+</script>
+
+<div style="max-width: 500px;">
+  <Textarea
+    label="Catatan Diagnosa Medis"
+    placeholder="Tuliskan catatan rekam medis atau diagnosa pasien..."
+    rows={4}
+    value={notes}
+    helperText="Maksimal 1000 karakter."
+    on:input={(e) => (notes = e.target.value)}
+  />
+</div>
+```

package/src/web/textarea/index.ts

@@ -0,0 +1,3 @@
+export { default as Textarea } from './textarea';
+export { default } from './textarea';
+export type { TextareaProps, TextareaUiProps } from './textarea'

package/src/web/textarea/manifest.json

@@ -0,0 +1,438 @@
+{
+  "name": "@ttdk-design-system/textarea",
+  "component": "Textarea",
+  "folder": "textarea",
+  "description": "Komponen Textarea TTDK sesuai spesifikasi Anatomy Desain: 1. Field title (14px Semibold, #141313) 2. (Opsional) label (12px Regular, #9698A2) 3. Border radius 8px 4. Field content (14px Regular, #141313, placeholder #9698A2) 5. Additional information / Helper text (12px Regular, #3C4245)",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "textarea.css",
+      "importPath": "web/textarea/textarea.css"
+    }
+  ],
+  "props": {
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label judul field yang ditampilkan di atas textarea (14px Semibold, #141313).",
+      "example": null,
+      "param": null
+    },
+    "labelStyle": {
+      "name": "labelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen label judul field (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "labelClass": {
+      "name": "labelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen label judul field.",
+      "example": null,
+      "param": null
+    },
+    "wrapperStyle": {
+      "name": "wrapperStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen kontainer textarea wrapper (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "wrapperClass": {
+      "name": "wrapperClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen kontainer textarea wrapper.",
+      "example": null,
+      "param": null
+    },
+    "textareaStyle": {
+      "name": "textareaStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen textarea control HTML (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "textareaClass": {
+      "name": "textareaClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen textarea control HTML.",
+      "example": null,
+      "param": null
+    },
+    "errorMessageStyle": {
+      "name": "errorMessageStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen pesan error validasi (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "errorMessageClass": {
+      "name": "errorMessageClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen pesan error validasi.",
+      "example": null,
+      "param": null
+    },
+    "helperTextStyle": {
+      "name": "helperTextStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen helper text (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "helperTextClass": {
+      "name": "helperTextClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen helper text.",
+      "example": null,
+      "param": null
+    },
+    "charCountStyle": {
+      "name": "charCountStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen penghitung karakter (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "charCountClass": {
+      "name": "charCountClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen penghitung karakter.",
+      "example": null,
+      "param": null
+    },
+    "optional": {
+      "name": "optional",
+      "type": "boolean",
+      "optional": true,
+      "default": null,
+      "description": "Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).",
+      "example": null,
+      "param": null
+    },
+    "optionalText": {
+      "name": "optionalText",
+      "type": "string",
+      "optional": true,
+      "default": "(Opsional)",
+      "description": "Kustomisasi teks keterangan opsional.",
+      "example": null,
+      "param": null
+    },
+    "placeholder": {
+      "name": "placeholder",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai teks placeholder saat textarea kosong (#9698A2).",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai terkontrol (controlled value) pada textarea.",
+      "example": null,
+      "param": null
+    },
+    "defaultValue": {
+      "name": "defaultValue",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai awal tidak terkontrol (uncontrolled initial value).",
+      "example": null,
+      "param": null
+    },
+    "rows": {
+      "name": "rows",
+      "type": "number",
+      "optional": true,
+      "default": "4",
+      "description": "Jumlah baris default yang ditampilkan.",
+      "example": null,
+      "param": null
+    },
+    "name": {
+      "name": "name",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nama form field HTML untuk integrasi formulir.",
+      "example": null,
+      "param": null
+    },
+    "id": {
+      "name": "id",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Identifier unik elemen textarea.",
+      "example": null,
+      "param": null
+    },
+    "resize": {
+      "name": "resize",
+      "type": "'none' | 'vertical' | 'horizontal' | 'both'",
+      "optional": true,
+      "default": "vertical",
+      "description": "Kontrol orientasi resize oleh pengguna. - `'none'`: Tidak dapat di-resize - `'vertical'`: Hanya dapat di-resize vertikal (standar) - `'horizontal'`: Hanya dapat di-resize horizontal - `'both'`: Bebas di-resize kedua arah",
+      "example": null,
+      "param": null
+    },
+    "error": {
+      "name": "error",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah textarea sedang dalam kondisi error / tidak valid.",
+      "example": null,
+      "param": null
+    },
+    "errorMessage": {
+      "name": "errorMessage",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Pesan teks penjelasan kesalahan validasi di bawah field.",
+      "example": null,
+      "param": null
+    },
+    "helperText": {
+      "name": "helperText",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).",
+      "example": null,
+      "param": null
+    },
+    "helperTextPosition": {
+      "name": "helperTextPosition",
+      "type": "'top' | 'bottom'",
+      "optional": true,
+      "default": null,
+      "description": "Posisi teks helper",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran textarea. - `'sm'`: Padding rapat - `'md'`: Standar - `'lg'`: Padding lapang",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Bentuk sudut kelengkungan textarea. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 16px",
+      "example": null,
+      "param": null
+    },
+    "block": {
+      "name": "block",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan lebar field textarea memenuhi kontainer penuh (full-width 100%).",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah field dinonaktifkan (disabled).",
+      "example": null,
+      "param": null
+    },
+    "readOnly": {
+      "name": "readOnly",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah field bersifat hanya-baca (readonly).",
+      "example": null,
+      "param": null
+    },
+    "required": {
+      "name": "required",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).",
+      "example": null,
+      "param": null
+    },
+    "autoComplete": {
+      "name": "autoComplete",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Konfigurasi atribut autocomplete HTML.",
+      "example": null,
+      "param": null
+    },
+    "maxLength": {
+      "name": "maxLength",
+      "type": "number",
+      "optional": true,
+      "default": null,
+      "description": "Batas maksimum panjang karakter.",
+      "example": null,
+      "param": null
+    },
+    "minLength": {
+      "name": "minLength",
+      "type": "number",
+      "optional": true,
+      "default": null,
+      "description": "Batas minimum panjang karakter.",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root / form-item (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat nilai textarea berubah.",
+      "example": null,
+      "param": null
+    },
+    "onInput": {
+      "name": "onInput",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat pengguna mengetik (input event).",
+      "example": null,
+      "param": null
+    },
+    "onBlur": {
+      "name": "onBlur",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat textarea kehilangan fokus (blur).",
+      "example": null,
+      "param": null
+    },
+    "onFocus": {
+      "name": "onFocus",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat textarea mendapatkan fokus.",
+      "example": null,
+      "param": null
+    },
+    "inputRef": {
+      "name": "inputRef",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ref instance elemen textarea HTML untuk akses kontrol DOM langsung (focus, blur, select).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "onKeyDown": {
+      "name": "onKeyDown",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event tombol keyboard ditekan.",
+      "example": null,
+      "param": null
+    },
+    "onKeyUp": {
+      "name": "onKeyUp",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event tombol keyboard dilepaskan.",
+      "example": null,
+      "param": null
+    },
+    "showCount": {
+      "name": "showCount",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan penghitung karakter di bawah textarea (format: `x / maxLength`). Memerlukan prop `maxLength` untuk berfungsi.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/textarea/textarea.css

@@ -0,0 +1 @@
+.ttdk-form-item{gap:var(--ttdk-spacing-xxs);box-sizing:border-box;width:100%;font-family:var(--ttdk-font-sans);flex-direction:column;display:flex}.ttdk-form-item[data-block=true]{width:100%}.ttdk-form-label{font-size:var(--ttdk-font-size-14);font-weight:var(--ttdk-font-weight-semibold);line-height:var(--ttdk-font-size-20);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));align-items:center;gap:var(--ttdk-spacing-xxs);user-select:none;display:flex}.dark .ttdk-form-label{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-form-required{color:var(--ttdk-stroke-status-error);font-weight:var(--ttdk-font-weight-bold)}.dark .ttdk-form-required{color:var(--ttdk-stroke-status-error)}.ttdk-form-optional{font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-regular);line-height:var(--ttdk-font-size-18);color:var(--ttdk-text-icon-disabled);margin-left:var(--ttdk-spacing-none)}.dark .ttdk-form-optional{color:var(--ttdk-text-icon-disabled)}.ttdk-textarea-wrapper{background:var(--ttdk-bg-base-primary);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);border-radius:var(--ttdk-radius-input-lg);box-sizing:border-box;width:100%;height:112px;min-height:48px;font-family:var(--ttdk-font-sans);transition:border-color .15s,box-shadow .15s,background-color .15s;display:flex;position:relative;overflow:hidden}.dark .ttdk-textarea-wrapper{background:var(--ttdk-bg-base-primary);border-color:var(--ttdk-stroke-subtle)}.ttdk-textarea-wrapper[data-filled=true],.dark .ttdk-textarea-wrapper[data-filled=true]{border-color:var(--ttdk-stroke-strong)}.ttdk-textarea-wrapper:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-border-focus) 15%, transparent);border-color:var(--ttdk-stroke-border-focus)!important}.dark .ttdk-textarea-wrapper:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-border-focus) 25%, transparent);border-color:var(--ttdk-stroke-border-focus)!important}.ttdk-textarea-wrapper[data-error=true]{border-color:var(--ttdk-stroke-status-error)!important}.ttdk-textarea-wrapper[data-error=true]:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--ttdk-stroke-status-error) 15%, transparent);border-color:var(--ttdk-stroke-status-error)!important}.dark .ttdk-textarea-wrapper[data-error=true]{border-color:var(--ttdk-stroke-status-error)!important}.ttdk-form-item[data-error=true] .ttdk-form-label,.dark .ttdk-form-item[data-error=true] .ttdk-form-label{color:var(--ttdk-text-icon-status-error)!important}.ttdk-textarea-wrapper[data-disabled=true],.ttdk-form-item[data-disabled=true] .ttdk-textarea-wrapper{cursor:not-allowed;opacity:.85;background:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important}.dark .ttdk-textarea-wrapper[data-disabled=true],.dark .ttdk-form-item[data-disabled=true] .ttdk-textarea-wrapper{opacity:.75;background:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important}.ttdk-textarea-control{width:100%;height:100%;padding:var(--ttdk-spacing-sm) var(--ttdk-spacing-md);font-size:var(--ttdk-font-size-14);font-weight:var(--ttdk-font-weight-regular);line-height:var(--ttdk-line-height-body);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));box-sizing:border-box;font-family:var(--ttdk-font-sans);background:0 0;border:none;outline:none;transition:color .15s}.dark .ttdk-textarea-control{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-textarea-control::placeholder{color:var(--ttdk-text-icon-disabled);opacity:1}.dark .ttdk-textarea-control::placeholder{color:var(--ttdk-text-icon-disabled)}.ttdk-textarea-control:disabled{cursor:not-allowed;color:var(--ttdk-text-icon-disabled)}.dark .ttdk-textarea-control:disabled{color:var(--ttdk-text-icon-disabled)}.ttdk-textarea-wrapper[data-size=sm]{height:80px}.ttdk-textarea-wrapper[data-size=sm] .ttdk-textarea-control{padding:var(--ttdk-spacing-xs) var(--ttdk-spacing-sm);font-size:var(--ttdk-font-size-12)}.ttdk-textarea-wrapper[data-size=md]{height:112px}.ttdk-textarea-wrapper[data-size=md] .ttdk-textarea-control{padding:var(--ttdk-spacing-sm) var(--ttdk-spacing-md);font-size:var(--ttdk-font-size-14)}.ttdk-textarea-wrapper[data-size=lg]{height:144px}.ttdk-textarea-wrapper[data-size=lg] .ttdk-textarea-control{padding:var(--ttdk-spacing-md) var(--ttdk-spacing-lg);font-size:var(--ttdk-font-size-16)}.ttdk-textarea-wrapper[data-rounded=none]{border-radius:var(--ttdk-radius-input-none)}.ttdk-textarea-wrapper[data-rounded=xs]{border-radius:var(--ttdk-radius-input-xs)}.ttdk-textarea-wrapper[data-rounded=sm]{border-radius:var(--ttdk-radius-input-sm)}.ttdk-textarea-wrapper[data-rounded=md]{border-radius:var(--ttdk-radius-input-lg)}.ttdk-textarea-wrapper[data-rounded=lg]{border-radius:var(--ttdk-radius-input-xl)}.ttdk-textarea-wrapper[data-rounded=full]{border-radius:var(--ttdk-radius-input-2xl)}.ttdk-form-helper-text{font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-regular);color:var(--ttdk-text-icon-secondary);line-height:var(--ttdk-font-size-18);min-height:var(--ttdk-font-size-18);font-family:var(--ttdk-font-sans)}.dark .ttdk-form-helper-text{color:var(--ttdk-text-icon-secondary)}.ttdk-form-error-msg{align-items:center;gap:var(--ttdk-spacing-xxs);font-size:var(--ttdk-font-size-12);color:var(--ttdk-text-icon-status-error);font-weight:var(--ttdk-font-weight-medium);line-height:var(--ttdk-font-size-18);min-height:var(--ttdk-font-size-18);font-family:var(--ttdk-font-sans);display:flex}.dark .ttdk-form-error-msg{color:var(--ttdk-text-icon-status-error)}.ttdk-form-error-icon{width:var(--ttdk-font-size-14);height:var(--ttdk-font-size-14);flex-shrink:0}.ttdk-form-error-icon path{fill-rule:evenodd;clip-rule:evenodd}.ttdk-form-footer{justify-content:space-between;align-items:start;gap:var(--ttdk-spacing-xxs) var(--ttdk-spacing-sm);box-sizing:border-box;flex-wrap:wrap-reverse;width:100%;display:flex}.ttdk-form-footer-message{gap:var(--ttdk-spacing-xxs);flex-direction:column;flex:180px;min-width:0;display:flex}.ttdk-form-char-count{font-size:var(--ttdk-font-size-12);font-weight:var(--ttdk-font-weight-regular);color:var(--ttdk-text-icon-disabled);text-align:right;font-family:var(--ttdk-font-sans);line-height:var(--ttdk-font-size-18);white-space:nowrap;flex-shrink:0;margin-left:auto}.dark .ttdk-form-char-count{color:var(--ttdk-text-icon-disabled)}