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

package/src/web/text/text.vue.d.ts

@@ -0,0 +1,161 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, type UiProps } from "../../core/types";
+
+export type TextUiProps = UiProps;
+
+export type TextUiBaseProps = UiProps;
+
+export interface TextProps {
+  /**
+   * Tag elemen HTML semantik yang digunakan untuk me-render teks.
+   * - 'span': Inline span (default).
+   * - 'p': Paragraf teks.
+   * - 'div': Blok generik.
+   * - 'h1' s/d 'h6': Heading level 1 sampai 6.
+   * - 'label': Elemen label formulir.
+   * - 'small': Teks berukuran kecil / disclaimer.
+   * - 'strong': Teks tebal berpenekanan penting.
+   * - 'em': Teks berpenekanan miring.
+   * - 'code': Format kode inline monospace.
+   * - 'blockquote': Kutipan blok.
+   * - 'a': Tautan / link teks.
+   * 
+   * @default 'span'
+   */
+  as?:
+    | "span"
+    | "p"
+    | "div"
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "label"
+    | "small"
+    | "strong"
+    | "em"
+    | "code"
+    | "blockquote"
+    | "a";
+
+  /**
+   * Varian warna semantik teks (disesuaikan dengan Chip / Badge TTDK).
+   * - 'primary': Warna utama tema penekanan aksi (brand teal).
+   * - 'success': Warna status sukses (hijau).
+   * - 'info': Warna status informasi (biru).
+   * - 'warning': Warna status peringatan (kuning).
+   * - 'danger': Warna status bahaya / kesalahan (merah).
+   * - 'neutral': Warna teks dasar foreground (standar).
+   * 
+   * @default 'neutral'
+   */
+  variant?:
+    | "primary"
+    | "success"
+    | "info"
+    | "warning"
+    | "danger"
+    | "neutral";
+
+  /**
+   * Ukuran tipografi teks (xs s/d 6xl).
+   */
+  size?:
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl"
+    | "3xl"
+    | "4xl"
+    | "5xl"
+    | "6xl";
+
+  /**
+   * Ketebalan font teks.
+   */
+  weight?: "normal" | "medium" | "semibold" | "bold" | "extrabold";
+
+  /**
+   * Perataan horizontal teks.
+   */
+  align?: "left" | "center" | "right" | "justify";
+
+  /**
+   * Transformasi huruf kapital/kecil pada teks.
+   */
+  transform?: "uppercase" | "lowercase" | "capitalize" | "normal";
+
+  /**
+   * Memotong teks satu baris yang melebihi batas dengan elipsis (...).
+   */
+  truncate?: boolean;
+
+  /**
+   * Memotong teks beberapa baris dengan elipsis (...) sesuai jumlah baris.
+   */
+  lineClamp?: 1 | 2 | 3 | 4 | 5 | 6;
+
+  /**
+   * Mengubah gaya teks menjadi miring (italic).
+   */
+  italic?: boolean;
+
+  /**
+   * Menampilkan garis bawah pada teks (underline).
+   */
+  underline?: boolean;
+
+  /**
+   * Margin kustom pada elemen teks (misal: '0 0 16px 0', '8px', '1rem').
+   */
+  margin?: string;
+
+  /**
+   * Padding kustom pada elemen teks (misal: '8px 12px', '4px 8px').
+   */
+  padding?: string;
+
+  /**
+   * URL tujuan jika as='a'.
+   */
+  href?: string;
+
+  /**
+   * Target link jika as='a'.
+   */
+  target?: string;
+
+  /**
+   * Kustomisasi visual granular ala Nuxt UI (warna teks, ukuran font, ketebalan, line-height, margin, padding).
+   */
+  ui?: TextUiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Class CSS kustom (alias untuk Vue/HTML).
+   */
+  class?: string;
+
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+
+  /**
+   * Konten teks atau elemen anak di dalam komponen Text.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<TextProps>;
+export default component;

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 } from './textarea.vue';
+export { default as Textarea } from './textarea.vue';
+export * from './textarea.vue';