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

package/src/web/text/AI_GUIDE.md

@@ -0,0 +1,129 @@
+# <Text /> — TTDK Component Reference
+
+TTDK Text component with multi-theme support.
+
+## 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/text/text.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Text from "@ttdk-design-system/library-react/web/text";
+
+// Vue 3
+import Text from "@ttdk-design-system/library-vue/web/text";
+
+// Svelte
+import Text from "@ttdk-design-system/library-svelte/web/text";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `as?` | `| 'span'
+  | 'p'
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'small'
+  | 'strong'
+  | 'em'
+  | 'code'
+  | 'blockquote'
+  | 'a'` | `span` | 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. |
+| `variant?` | `| 'primary'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'neutral'` | `neutral` | 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). |
+| `size?` | `'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'` | `-` | Ukuran tipografi teks yang memengaruhi font-size dan line-height. - `'xs'`: 12px (line-height: 16px) - `'sm'`: 14px (line-height: 20px) - `'md'`: 16px (line-height: 24px) - `'lg'`: 18px (line-height: 28px) - `'xl'`: 20px (line-height: 28px) - `'2xl'`: 24px (line-height: 32px) - `'3xl'`: 30px (line-height: 36px) - `'4xl'`: 36px (line-height: 40px) - `'5xl'`: 48px (line-height: 1.1) - `'6xl'`: 60px (line-height: 1.05) |
+| `weight?` | `'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold'` | `-` | Ketebalan font teks. - `'normal'`: 400 - `'medium'`: 500 - `'semibold'`: 600 - `'bold'`: 700 - `'extrabold'`: 800 |
+| `align?` | `'left' | 'center' | 'right' | 'justify'` | `-` | Perataan horizontal teks. - `'left'`: Rata kiri. - `'center'`: Rata tengah. - `'right'`: Rata kanan. - `'justify'`: Rata kiri-kanan. |
+| `transform?` | `'uppercase' | 'lowercase' | 'capitalize' | 'normal'` | `-` | Transformasi huruf kapital/kecil pada teks. - `'uppercase'`: SEMUA HURUF BESAR. - `'lowercase'`: semua huruf kecil. - `'capitalize'`: Huruf Pertama Besar Setiap Kata. - `'normal'`: Normal sesuai aslinya. |
+| `truncate?` | `boolean` | `false` | Memotong teks satu baris yang melebihi batas dengan elipsis (...). |
+| `lineClamp?` | `'1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6` | `-` | Memotong teks multi-baris pada jumlah baris tertentu menggunakan CSS line-clamp. |
+| `noWrap?` | `boolean` | `false` | Mencegah teks dari wrapping (white-space: nowrap). |
+| `italic?` | `boolean` | `false` | Menampilkan teks dalam gaya miring (italic). |
+| `underline?` | `boolean` | `false` | Menampilkan garis bawah pada teks (underline). |
+| `margin?` | `string` | `-` | Margin kustom pada elemen teks (misal: '0 0 16px 0', '8px', '1rem'). |
+| `padding?` | `string` | `-` | Padding kustom pada elemen teks (misal: '8px 12px', '4px 8px'). |
+| `href?` | `string` | `-` | URL tujuan jika `as="a"`. |
+| `target?` | `string` | `-` | Target link jika `as="a"`. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular ala Nuxt UI / Universal UI System (UiProps). |
+| `children?` | `any` | `-` | Konten teks atau elemen anak di dalam komponen Text. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Text from "@ttdk-design-system/library-react/web/text";
+import "@ttdk-design-system/library-react/web/text/text.css";
+
+export function Example() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <Text as="h1" size="3xl" weight="bold">
+        Judul Halaman Utama
+      </Text>
+      <Text as="p" size="md" variant="neutral">
+        Paragraf deskripsi dengan ukuran standar dan warna netral.
+      </Text>
+      <Text as="small" variant="neutral">
+        Terakhir diperbarui pada 04 September 2026.
+      </Text>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Text from "@ttdk-design-system/library-vue/web/text";
+import "@ttdk-design-system/library-vue/web/text/text.css";
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <Text as="h1" size="3xl" weight="bold">
+      Judul Halaman Utama
+    </Text>
+    <Text as="p" size="md" variant="neutral">
+      Paragraf deskripsi dengan ukuran standar dan warna netral.
+    </Text>
+    <Text as="small" variant="neutral">
+      Terakhir diperbarui pada 04 September 2026.
+    </Text>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Text from "@ttdk-design-system/library-svelte/web/text";
+  import "@ttdk-design-system/library-svelte/web/text/text.css";
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 8px;">
+  <Text as="h1" size="3xl" weight="bold">
+    Judul Halaman Utama
+  </Text>
+  <Text as="p" size="md" variant="neutral">
+    Paragraf deskripsi dengan ukuran standar dan warna netral.
+  </Text>
+  <Text as="small" variant="neutral">
+    Terakhir diperbarui pada 04 September 2026.
+  </Text>
+</div>
+```

package/src/web/text/index.ts

@@ -0,0 +1,3 @@
+export { default as Text } from './text';
+export { default } from "./text";
+export type { TextProps, TextUiProps } from "./text"

package/src/web/text/manifest.json

@@ -0,0 +1,195 @@
+{
+  "name": "@ttdk-design-system/text",
+  "component": "Text",
+  "folder": "text",
+  "description": "TTDK Text component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "text.css",
+      "importPath": "web/text/text.css"
+    }
+  ],
+  "props": {
+    "as": {
+      "name": "as",
+      "type": "| 'span'\n  | 'p'\n  | 'div'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'label'\n  | 'small'\n  | 'strong'\n  | 'em'\n  | 'code'\n  | 'blockquote'\n  | 'a'",
+      "optional": true,
+      "default": "span",
+      "description": "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.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'primary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'neutral'",
+      "optional": true,
+      "default": "neutral",
+      "description": "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).",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'",
+      "optional": true,
+      "default": null,
+      "description": "Ukuran tipografi teks yang memengaruhi font-size dan line-height. - `'xs'`: 12px (line-height: 16px) - `'sm'`: 14px (line-height: 20px) - `'md'`: 16px (line-height: 24px) - `'lg'`: 18px (line-height: 28px) - `'xl'`: 20px (line-height: 28px) - `'2xl'`: 24px (line-height: 32px) - `'3xl'`: 30px (line-height: 36px) - `'4xl'`: 36px (line-height: 40px) - `'5xl'`: 48px (line-height: 1.1) - `'6xl'`: 60px (line-height: 1.05)",
+      "example": null,
+      "param": null
+    },
+    "weight": {
+      "name": "weight",
+      "type": "'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold'",
+      "optional": true,
+      "default": null,
+      "description": "Ketebalan font teks. - `'normal'`: 400 - `'medium'`: 500 - `'semibold'`: 600 - `'bold'`: 700 - `'extrabold'`: 800",
+      "example": null,
+      "param": null
+    },
+    "align": {
+      "name": "align",
+      "type": "'left' | 'center' | 'right' | 'justify'",
+      "optional": true,
+      "default": null,
+      "description": "Perataan horizontal teks. - `'left'`: Rata kiri. - `'center'`: Rata tengah. - `'right'`: Rata kanan. - `'justify'`: Rata kiri-kanan.",
+      "example": null,
+      "param": null
+    },
+    "transform": {
+      "name": "transform",
+      "type": "'uppercase' | 'lowercase' | 'capitalize' | 'normal'",
+      "optional": true,
+      "default": null,
+      "description": "Transformasi huruf kapital/kecil pada teks. - `'uppercase'`: SEMUA HURUF BESAR. - `'lowercase'`: semua huruf kecil. - `'capitalize'`: Huruf Pertama Besar Setiap Kata. - `'normal'`: Normal sesuai aslinya.",
+      "example": null,
+      "param": null
+    },
+    "truncate": {
+      "name": "truncate",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Memotong teks satu baris yang melebihi batas dengan elipsis (...).",
+      "example": null,
+      "param": null
+    },
+    "lineClamp": {
+      "name": "lineClamp",
+      "type": "'1' | '2' | '3' | '4' | '5' | '6' | 1 | 2 | 3 | 4 | 5 | 6",
+      "optional": true,
+      "default": null,
+      "description": "Memotong teks multi-baris pada jumlah baris tertentu menggunakan CSS line-clamp.",
+      "example": null,
+      "param": null
+    },
+    "noWrap": {
+      "name": "noWrap",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mencegah teks dari wrapping (white-space: nowrap).",
+      "example": null,
+      "param": null
+    },
+    "italic": {
+      "name": "italic",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan teks dalam gaya miring (italic).",
+      "example": null,
+      "param": null
+    },
+    "underline": {
+      "name": "underline",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan garis bawah pada teks (underline).",
+      "example": null,
+      "param": null
+    },
+    "margin": {
+      "name": "margin",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Margin kustom pada elemen teks (misal: '0 0 16px 0', '8px', '1rem').",
+      "example": null,
+      "param": null
+    },
+    "padding": {
+      "name": "padding",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Padding kustom pada elemen teks (misal: '8px 12px', '4px 8px').",
+      "example": null,
+      "param": null
+    },
+    "href": {
+      "name": "href",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "URL tujuan jika `as=\"a\"`.",
+      "example": null,
+      "param": null
+    },
+    "target": {
+      "name": "target",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Target link jika `as=\"a\"`.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "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 ala Nuxt UI / Universal UI System (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten teks atau elemen anak di dalam komponen Text.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/text/text.css

@@ -0,0 +1 @@
+:root{--ttdk-text-font-sans:var(--ttdk-font-sans);--ttdk-text-font-mono:var(--ttdk-font-mono);--ttdk-color-text-default:var(--ttdk-text-icon-primary);--ttdk-color-text-muted:var(--ttdk-text-icon-secondary);--ttdk-color-text-primary:var(--ttdk-brand-default);--ttdk-color-text-secondary:var(--ttdk-text-icon-secondary);--ttdk-color-text-accent:var(--ttdk-text-icon-status-info);--ttdk-color-text-danger:var(--ttdk-text-icon-status-error);--ttdk-color-text-success:var(--ttdk-text-icon-status-success);--ttdk-color-text-warning:var(--ttdk-text-icon-status-warning);--ttdk-color-text-info:var(--ttdk-text-icon-status-info);--ttdk-code-bg:var(--ttdk-bg-secondary-disabled);--ttdk-code-border:var(--ttdk-stroke-subtle);--ttdk-blockquote-border:var(--ttdk-stroke-divider)}.dark,:root.dark{--ttdk-color-text-default:var(--ttdk-text-icon-primary);--ttdk-color-text-muted:var(--ttdk-text-icon-secondary);--ttdk-color-text-primary:var(--ttdk-brand-default);--ttdk-color-text-secondary:var(--ttdk-text-icon-secondary);--ttdk-color-text-accent:var(--ttdk-text-icon-status-info);--ttdk-color-text-danger:var(--ttdk-text-icon-status-error);--ttdk-color-text-success:var(--ttdk-text-icon-status-success);--ttdk-color-text-warning:var(--ttdk-text-icon-status-warning);--ttdk-color-text-info:var(--ttdk-text-icon-status-info);--ttdk-code-bg:var(--ttdk-bg-secondary-disabled);--ttdk-code-border:var(--ttdk-stroke-subtle);--ttdk-blockquote-border:var(--ttdk-stroke-divider)}.ttdk-text{font-family:var(--ttdk-text-font-sans);color:var(--ttdk-ui-color,var(--ttdk-color-text-default));box-sizing:border-box;margin:0;padding:0;font-size:16px;font-weight:400;line-height:24px;transition:color .15s}h1.ttdk-text{letter-spacing:-.02em;font-size:36px;font-weight:700;line-height:40px}h2.ttdk-text{letter-spacing:-.015em;font-size:30px;font-weight:600;line-height:36px}h3.ttdk-text{letter-spacing:-.01em;font-size:24px;font-weight:600;line-height:32px}h4.ttdk-text{font-size:20px;font-weight:600;line-height:28px}h5.ttdk-text{font-size:18px;font-weight:500;line-height:28px}h6.ttdk-text{font-size:16px;font-weight:500;line-height:24px}p.ttdk-text{font-size:16px;line-height:24px}small.ttdk-text{color:var(--ttdk-color-text-muted);font-size:12px;line-height:16px}label.ttdk-text{font-size:14px;font-weight:500;line-height:20px}strong.ttdk-text{font-weight:700}.ttdk-text[data-variant=neutral]{color:var(--ttdk-color-text-default)}.ttdk-text[data-variant=primary]{color:var(--ttdk-color-text-primary)}.ttdk-text[data-variant=success]{color:var(--ttdk-color-text-success)}.ttdk-text[data-variant=info]{color:var(--ttdk-color-text-info)}.ttdk-text[data-variant=warning]{color:var(--ttdk-color-text-warning)}.ttdk-text[data-variant=danger]{color:var(--ttdk-color-text-danger)}.ttdk-text[data-variant=muted],.ttdk-text[data-variant=secondary]{color:var(--ttdk-color-text-secondary)}.ttdk-text[data-variant=accent]{color:var(--ttdk-color-text-accent)}.ttdk-text[data-size=xs]{font-size:12px;line-height:16px}.ttdk-text[data-size=sm]{font-size:14px;line-height:20px}.ttdk-text[data-size=md]{font-size:16px;line-height:24px}.ttdk-text[data-size=lg]{font-size:18px;line-height:28px}.ttdk-text[data-size=xl]{font-size:20px;line-height:28px}.ttdk-text[data-size="2xl"]{font-size:24px;line-height:32px}.ttdk-text[data-size="3xl"]{font-size:30px;line-height:36px}.ttdk-text[data-size="4xl"]{letter-spacing:-.02em;font-size:36px;line-height:40px}.ttdk-text[data-size="5xl"]{letter-spacing:-.025em;font-size:48px;line-height:1.1}.ttdk-text[data-size="6xl"]{letter-spacing:-.03em;font-size:60px;line-height:1.05}.ttdk-text[data-weight=normal]{font-weight:400}.ttdk-text[data-weight=medium]{font-weight:500}.ttdk-text[data-weight=semibold]{font-weight:600}.ttdk-text[data-weight=bold]{font-weight:700}.ttdk-text[data-weight=extrabold]{font-weight:800}.ttdk-text[data-align=left]{text-align:left}.ttdk-text[data-align=center]{text-align:center}.ttdk-text[data-align=right]{text-align:right}.ttdk-text[data-align=justify]{text-align:justify}.ttdk-text[data-transform=uppercase]{text-transform:uppercase}.ttdk-text[data-transform=lowercase]{text-transform:lowercase}.ttdk-text[data-transform=capitalize]{text-transform:capitalize}.ttdk-text[data-transform=normal]{text-transform:none}.ttdk-text[data-italic=true]{font-style:italic}.ttdk-text[data-underline=true]{text-underline-offset:3px;text-decoration:underline}.ttdk-text[data-truncate=true]{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.ttdk-text[data-line-clamp="1"]{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ttdk-text[data-line-clamp="2"]{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ttdk-text[data-line-clamp="3"]{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ttdk-text[data-line-clamp="4"]{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ttdk-text[data-line-clamp="5"]{-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ttdk-text[data-line-clamp="6"]{-webkit-line-clamp:6;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}code.ttdk-text{font-family:var(--ttdk-text-font-mono);background-color:var(--ttdk-code-bg);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-code-border);border-radius:var(--ttdk-radius-input-sm);padding:2px 6px;font-size:.875em}blockquote.ttdk-text{border-left:var(--ttdk-stroke-width-thick) solid var(--ttdk-blockquote-border);padding-left:var(--ttdk-spacing-md);color:var(--ttdk-color-text-muted);font-style:italic}a.ttdk-text{color:var(--ttdk-color-text-accent);text-underline-offset:3px;cursor:pointer;text-decoration:underline}a.ttdk-text:hover{opacity:.85}