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

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)}