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

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

@@ -0,0 +1,60 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildResponsiveVars, type ResponsiveBreakpoints } from "../../core/types";
+
+export interface TabItem {
+  label: string;
+  value: string;
+  icon?: any;
+  badge?: string | number;
+  disabled?: boolean;
+  content?: any;
+}
+
+export interface TabsUiBaseProps {
+  activeColor?: string;
+  indicatorColor?: string;
+  inactiveColor?: string;
+  bg?: string;
+  borderColor?: string;
+  textSize?: string;
+  fontSize?: string;
+  padding?: string;
+  gap?: string;
+}
+
+export interface TabsUiProps extends TabsUiBaseProps, ResponsiveBreakpoints<TabsUiBaseProps> {
+  sm?: Partial<TabsUiBaseProps>;
+  lt_sm?: Partial<TabsUiBaseProps>;
+  md?: Partial<TabsUiBaseProps>;
+  lt_md?: Partial<TabsUiBaseProps>;
+  lg?: Partial<TabsUiBaseProps>;
+  lt_lg?: Partial<TabsUiBaseProps>;
+  xl?: Partial<TabsUiBaseProps>;
+  lt_xl?: Partial<TabsUiBaseProps>;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  modelValue?: string;
+  value?: string;
+  defaultValue?: string;
+  orientation?: "horizontal" | "vertical";
+  variant?: "line" | "pills";
+  size?: "sm" | "md" | "lg";
+  fitted?: boolean;
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  ui?: TabsUiProps;
+  className?: string;
+  class?: string;
+  onChange?: (value: string) => void;
+  children?: any;
+}
+
+declare const component: DefineComponent<TabsProps, {}, {}, {}, {}, {}, {}, {
+  (e: "update:modelValue", value: string): void;
+  (e: "update:value", value: string): void;
+  (e: "change", value: string): void;
+}>;
+export default component;

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,2 @@
+export { default } from "./text.vue";
+export type { TextProps, TextUiProps, TextUiBaseProps } from "./text.vue";

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}

package/src/web/text/text.vue

@@ -0,0 +1,195 @@
+<template>
+  <component
+    :is="asTag"
+    :class="['ttdk-text', className, $attrs.class]"
+    :data-variant="resolvedVariant"
+    :data-size="size"
+    :data-weight="weight === 'bold' ? 'bold' : weight"
+    :data-align="align"
+    :data-transform="transform"
+    :data-truncate="truncate"
+    :data-line-clamp="lineClamp"
+    :data-italic="italic || as === 'em' || as === 'blockquote'"
+    :data-underline="underline"
+    :href="as === 'a' ? href : undefined"
+    :target="as === 'a' ? target : undefined"
+    :style="{
+      ...(margin ? { margin: margin } : {}),
+      ...(padding ? { padding: padding } : {}),
+      ...buildUiVars(ui),
+      ...(typeof style === 'object' ? style : {}),
+    }"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } 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;
+}
+
+const props = defineProps<TextProps>();
+
+const asTag = computed(() => {
+  return props.as || "span";
+});
+
+const resolvedVariant = computed(() => {
+  if (props.variant) return props.variant;
+  if (props.as === "a") return "info";
+  return "neutral";
+});
+</script>