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

package/src/web/tabs/AI_GUIDE.md

@@ -0,0 +1,150 @@
+# <Tabs /> — TTDK Component Reference
+
+Komponen Tabs untuk navigasi multi-panel dengan orientasi Horizontal & Vertikal, varian Line, Pills, dan Enclosed.
+
+## 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/tabs/tabs.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Tabs from "@ttdk-design-system/library-react/web/tabs";
+
+// Vue 3
+import Tabs from "@ttdk-design-system/library-vue/web/tabs";
+
+// Svelte
+import Tabs from "@ttdk-design-system/library-svelte/web/tabs";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `TabItem[]` | `-` | Daftar tab items yang akan dirender. |
+| `value?` | `string` | `-` | Nilai tab yang sedang aktif (v-model / controlled value). |
+| `defaultValue?` | `string` | `-` | Nilai tab default saat pertama kali dirender (uncontrolled initial value). |
+| `orientation?` | `'horizontal' | 'vertical'` | `horizontal` | Orientasi tata letak tab. - `'horizontal'`: Tab berjejer ke samping dengan garis indikator di bawah (standar). - `'vertical'`: Tab berjejer ke bawah dalam kolom dengan garis indikator di samping. |
+| `variant?` | `'line' | 'pills'` | `line` | Varian visual tampilan tab. - `'line'`: Garis indikator bawah/samping minimalis elegan (sesuai desain TTDK). - `'pills'`: Bentuk kapsul/tombol latar belakang penuh ala Shadcn / Nuxt UI. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Ukuran proporsional tab (tinggi, padding, ukuran font). - `'sm'`: Kecil (12px font, compact padding). - `'md'`: Standar (14px font, regular padding). - `'lg'`: Besar (16px font, spacious padding). |
+| `fitted?` | `boolean` | `false` | Membuat lebar setiap tab mengisi rata seluruh ruang container (full width / equal width). |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Sudut kelengkungan (khusus untuk varian 'pills'). - `'none'`: Sudut 0px. - `'sm'`: Sudut 4px. - `'md'`: Sudut 6px. - `'lg'`: Sudut 8px. - `'full'`: Sudut 9999px. |
+| `lazy?` | `boolean` | `false` | Hanya me-render konten panel tab saat tab tersebut aktif (lazy rendering). Berguna untuk menghemat performa saat tab memiliki konten berat. |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root container (UiProps). |
+| `listStyle?` | `UiProps` | `-` | Style kustom untuk container tab list (UiProps). |
+| `listClass?` | `string` | `-` | Class CSS kustom untuk container tab list. |
+| `tabStyle?` | `UiProps` | `-` | Style kustom untuk tombol tab item (UiProps). |
+| `tabClass?` | `string` | `-` | Class CSS kustom untuk tombol tab item. |
+| `activeTabStyle?` | `UiProps` | `-` | Style kustom untuk tombol tab item saat aktif (UiProps). |
+| `activeTabClass?` | `string` | `-` | Class CSS kustom untuk tombol tab item saat aktif. |
+| `indicatorStyle?` | `UiProps` | `-` | Style kustom untuk garis indikator tab (UiProps). |
+| `indicatorClass?` | `string` | `-` | Class CSS kustom untuk garis indikator tab. |
+| `badgeStyle?` | `UiProps` | `-` | Style kustom untuk badge tab (UiProps). |
+| `badgeClass?` | `string` | `-` | Class CSS kustom untuk badge tab. |
+| `panelStyle?` | `UiProps` | `-` | Style kustom untuk panel konten tab (UiProps). |
+| `panelClass?` | `string` | `-` | Class CSS kustom untuk panel konten tab. |
+| `onChange?` | `(value: string) => void` | `-` | Callback event saat pengguna mengganti tab aktif. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Konten kustom atau slot anak. |
+
+### Sub-interface: `TabItem`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Label teks yang ditampilkan pada tab item. |
+| `value` | `string` | `-` | Identifier unik / nilai aktif untuk tab ini. |
+| `icon?` | `any` | `-` | Ikon atau emoji opsional di samping label teks. |
+| `badge?` | `string | number` | `-` | Badge teks atau counter angka opsional (misal: '12', 'Baru'). |
+| `disabled?` | `boolean` | `false` | Menonaktifkan tab item dari interaksi klik. |
+| `content?` | `any` | `-` | Konten tab opsional jika ingin menggunakan panel terintegrasi. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Tabs from "@ttdk-design-system/library-react/web/tabs";
+import "@ttdk-design-system/library-react/web/tabs/tabs.css";
+
+export function Example() {
+  const [activeTab, setActiveTab] = useState("overview");
+
+  const tabItems = [
+    { label: "Ringkasan", value: "overview", badge: 4 },
+    { label: "Data Pasien", value: "patients" },
+    { label: "Integrasi API", value: "api" },
+    { label: "Pengaturan", value: "settings", disabled: true }
+  ];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Tabs
+        items={tabItems}
+        value={activeTab}
+        variant="line"
+        onChange={(val) => setActiveTab(val)}
+      />
+      <div>Konten aktif tab: {activeTab}</div>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Tabs from "@ttdk-design-system/library-vue/web/tabs";
+import "@ttdk-design-system/library-vue/web/tabs/tabs.css";
+
+const activeTab = ref("overview");
+
+const tabItems = [
+  { label: "Ringkasan", value: "overview", badge: 4 },
+  { label: "Data Pasien", value: "patients" },
+  { label: "Integrasi API", value: "api" },
+  { label: "Pengaturan", value: "settings", disabled: true }
+];
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <Tabs
+      :items="tabItems"
+      :value="activeTab"
+      variant="line"
+      @change="(val: string) => (activeTab = val)"
+    />
+    <div>Konten aktif tab: {{ activeTab }}</div>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Tabs from "@ttdk-design-system/library-svelte/web/tabs";
+  import "@ttdk-design-system/library-svelte/web/tabs/tabs.css";
+
+  let activeTab = "overview";
+
+  const tabItems = [
+    { label: "Ringkasan", value: "overview", badge: 4 },
+    { label: "Data Pasien", value: "patients" },
+    { label: "Integrasi API", value: "api" },
+    { label: "Pengaturan", value: "settings", disabled: true }
+  ];
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px;">
+  <Tabs
+    items={tabItems}
+    value={activeTab}
+    variant="line"
+    on:change={(e) => (activeTab = e.detail)}
+  />
+  <div>Konten aktif tab: {activeTab}</div>
+</div>
+```

package/src/web/tabs/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./tabs.vue";
+export type { TabItem, TabsProps, TabsUiProps } from "./tabs.vue";

package/src/web/tabs/manifest.json

@@ -0,0 +1,315 @@
+{
+  "name": "@ttdk-design-system/tabs",
+  "component": "Tabs",
+  "folder": "tabs",
+  "description": "Komponen Tabs untuk navigasi multi-panel dengan orientasi Horizontal & Vertikal, varian Line, Pills, dan Enclosed.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "tabs.css",
+      "importPath": "web/tabs/tabs.css"
+    }
+  ],
+  "props": {
+    "items": {
+      "name": "items",
+      "type": "TabItem[]",
+      "optional": false,
+      "default": null,
+      "description": "Daftar tab items yang akan dirender.",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai tab yang sedang aktif (v-model / controlled value).",
+      "example": null,
+      "param": null
+    },
+    "defaultValue": {
+      "name": "defaultValue",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nilai tab default saat pertama kali dirender (uncontrolled initial value).",
+      "example": null,
+      "param": null
+    },
+    "orientation": {
+      "name": "orientation",
+      "type": "'horizontal' | 'vertical'",
+      "optional": true,
+      "default": "horizontal",
+      "description": "Orientasi tata letak tab. - `'horizontal'`: Tab berjejer ke samping dengan garis indikator di bawah (standar). - `'vertical'`: Tab berjejer ke bawah dalam kolom dengan garis indikator di samping.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "'line' | 'pills'",
+      "optional": true,
+      "default": "line",
+      "description": "Varian visual tampilan tab. - `'line'`: Garis indikator bawah/samping minimalis elegan (sesuai desain TTDK). - `'pills'`: Bentuk kapsul/tombol latar belakang penuh ala Shadcn / Nuxt UI.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Ukuran proporsional tab (tinggi, padding, ukuran font). - `'sm'`: Kecil (12px font, compact padding). - `'md'`: Standar (14px font, regular padding). - `'lg'`: Besar (16px font, spacious padding).",
+      "example": null,
+      "param": null
+    },
+    "fitted": {
+      "name": "fitted",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuat lebar setiap tab mengisi rata seluruh ruang container (full width / equal width).",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Sudut kelengkungan (khusus untuk varian 'pills'). - `'none'`: Sudut 0px. - `'sm'`: Sudut 4px. - `'md'`: Sudut 6px. - `'lg'`: Sudut 8px. - `'full'`: Sudut 9999px.",
+      "example": null,
+      "param": null
+    },
+    "lazy": {
+      "name": "lazy",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Hanya me-render konten panel tab saat tab tersebut aktif (lazy rendering). Berguna untuk menghemat performa saat tab memiliki konten berat.",
+      "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 container (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "listStyle": {
+      "name": "listStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk container tab list (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "listClass": {
+      "name": "listClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk container tab list.",
+      "example": null,
+      "param": null
+    },
+    "tabStyle": {
+      "name": "tabStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tab item (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "tabClass": {
+      "name": "tabClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tab item.",
+      "example": null,
+      "param": null
+    },
+    "activeTabStyle": {
+      "name": "activeTabStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tab item saat aktif (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "activeTabClass": {
+      "name": "activeTabClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tab item saat aktif.",
+      "example": null,
+      "param": null
+    },
+    "indicatorStyle": {
+      "name": "indicatorStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk garis indikator tab (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "indicatorClass": {
+      "name": "indicatorClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk garis indikator tab.",
+      "example": null,
+      "param": null
+    },
+    "badgeStyle": {
+      "name": "badgeStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk badge tab (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "badgeClass": {
+      "name": "badgeClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk badge tab.",
+      "example": null,
+      "param": null
+    },
+    "panelStyle": {
+      "name": "panelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk panel konten tab (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "panelClass": {
+      "name": "panelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk panel konten tab.",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(value: string) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat pengguna mengganti tab aktif.",
+      "example": null,
+      "param": "value Nilai/identifier tab yang dipilih."
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom atau slot anak.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "TabItem": {
+      "label": {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Label teks yang ditampilkan pada tab item.",
+        "example": null,
+        "param": null
+      },
+      "value": {
+        "name": "value",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Identifier unik / nilai aktif untuk tab ini.",
+        "example": null,
+        "param": null
+      },
+      "icon": {
+        "name": "icon",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon atau emoji opsional di samping label teks.",
+        "example": null,
+        "param": null
+      },
+      "badge": {
+        "name": "badge",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Badge teks atau counter angka opsional (misal: '12', 'Baru').",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menonaktifkan tab item dari interaksi klik.",
+        "example": null,
+        "param": null
+      },
+      "content": {
+        "name": "content",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Konten tab opsional jika ingin menggunakan panel terintegrasi.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/tabs/tabs.css

@@ -0,0 +1 @@
+.ttdk-tabs{--tab-radius:var(--ttdk-radius-input-md);box-sizing:border-box;font-family:var(--ttdk-font-sans);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));width:100%;min-width:0;max-width:100%;display:flex;&[data-orientation=horizontal]{flex-direction:column;width:100%;min-width:0;max-width:100%;& .ttdk-tabs-list{box-sizing:border-box;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-direction:row;align-items:center;width:100%;min-width:0;max-width:100%;display:flex;overflow:auto hidden;&::-webkit-scrollbar{display:none}}}&[data-orientation=vertical]{align-items:stretch;gap:var(--ttdk-spacing-md);flex-direction:row;width:100%;min-width:0;max-width:100%;& .ttdk-tabs-list{flex-direction:column;flex-shrink:0;min-width:180px;max-width:260px;display:flex;@media (width<=640px){min-width:120px;max-width:160px}}& .ttdk-tabs-panels{flex:1;min-width:0}}&[data-fitted=true][data-orientation=horizontal]{& .ttdk-tabs-list{width:100%}& .ttdk-tab-item{text-align:center;flex:1;justify-content:center}}&[data-size=sm]{font-size:var(--ttdk-font-size-12);& .ttdk-tab-item{font-size:var(--ttdk-font-size-12);gap:6px}&[data-variant=line][data-orientation=horizontal] .ttdk-tab-item{gap:6px;padding:8px 2px}&[data-variant=line][data-orientation=vertical] .ttdk-tab-item{padding:8px 12px}&[data-variant=pills] .ttdk-tab-item{font-size:var(--ttdk-font-size-12);padding:5px 10px}& .ttdk-tab-icon{font-size:var(--ttdk-font-size-14)}}&[data-size=md]{font-size:var(--ttdk-font-size-14);& .ttdk-tab-item{font-size:var(--ttdk-font-size-14);gap:var(--ttdk-spacing-xs)}&[data-variant=line][data-orientation=horizontal] .ttdk-tab-item{padding:12px 4px}&[data-variant=line][data-orientation=vertical] .ttdk-tab-item{padding:10px 14px}&[data-variant=pills] .ttdk-tab-item{padding:6px 14px;font-size:13px}& .ttdk-tab-icon{font-size:var(--ttdk-font-size-16)}}&[data-size=lg]{font-size:var(--ttdk-font-size-16);& .ttdk-tab-item{font-size:var(--ttdk-font-size-16);gap:10px}&[data-variant=line][data-orientation=horizontal] .ttdk-tab-item{padding:14px 6px}&[data-variant=line][data-orientation=vertical] .ttdk-tab-item{padding:12px 16px}&[data-variant=pills] .ttdk-tab-item{font-size:var(--ttdk-font-size-14);padding:8px 18px}& .ttdk-tab-icon{font-size:var(--ttdk-font-size-18)}}&[data-rounded=none]{--tab-radius:var(--ttdk-radius-none)}&[data-rounded=sm]{--tab-radius:var(--ttdk-radius-input-sm)}&[data-rounded=md]{--tab-radius:var(--ttdk-radius-input-md)}&[data-rounded=lg]{--tab-radius:var(--ttdk-radius-input-lg)}&[data-rounded=full]{--tab-radius:var(--ttdk-radius-full)}}.ttdk-tab-item{font-family:inherit;font-weight:var(--ttdk-font-weight-medium);color:var(--ttdk-ui-color,var(--ttdk-text-icon-secondary));cursor:pointer;white-space:nowrap;user-select:none;background:0 0;border:none;outline:none;flex-shrink:0;justify-content:flex-start;align-items:center;transition:color .15s,background-color .15s,border-color .15s;display:inline-flex;position:relative;&:hover:not(:disabled){color:var(--ttdk-text-icon-primary)}&:focus-visible{box-shadow:0 0 0 2px color-mix(in oklab, var(--ttdk-brand-default) 40%, transparent);border-radius:var(--ttdk-radius-input-sm)}&[data-state=active]{color:var(--ttdk-brand-default);font-weight:var(--ttdk-font-weight-semibold)}&:disabled,&[data-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}}.ttdk-tab-icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ttdk-tab-label{display:inline-block}.ttdk-tab-badge{font-size:11px;font-weight:var(--ttdk-font-weight-semibold);border-radius:var(--ttdk-radius-full);background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-secondary);justify-content:center;align-items:center;padding:1px 6px;line-height:1.2;transition:all .15s;display:inline-flex}.ttdk-tab-item[data-state=active] .ttdk-tab-badge{background:color-mix(in oklab, var(--ttdk-brand-default) 15%, transparent);color:var(--ttdk-brand-default)}.ttdk-tabs[data-variant=line]{&[data-orientation=horizontal]{& .ttdk-tabs-list{border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);gap:var(--ttdk-spacing-lg)}& .ttdk-tab-indicator{background-color:var(--ttdk-brand-default);border-radius:var(--ttdk-radius-input-xs) var(--ttdk-radius-input-xs) 0 0;height:2px;animation:.2s ease-in-out ttdkTabFadeIn;position:absolute;bottom:-1px;left:0;right:0}}&[data-orientation=vertical]{& .ttdk-tabs-list{border-right:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);gap:var(--ttdk-spacing-xxs);padding-right:var(--ttdk-spacing-xxs)}& .ttdk-tab-item{border-radius:var(--tab-radius);&[data-state=active]{background:color-mix(in oklab, var(--ttdk-brand-default) 8%, transparent)}}& .ttdk-tab-indicator{background-color:var(--ttdk-brand-default);border-radius:var(--ttdk-radius-input-xs);width:2px;animation:.2s ease-in-out ttdkTabFadeIn;position:absolute;top:4px;bottom:4px;right:-5px}}}.ttdk-tabs[data-variant=pills]{width:100%;min-width:0;max-width:100%;& .ttdk-tabs-list{box-sizing:border-box;background:var(--ttdk-bg-secondary-disabled);width:100%;min-width:0;max-width:100%;padding:var(--ttdk-spacing-xxs);border-radius:var(--tab-radius);gap:var(--ttdk-spacing-xxs)}& .ttdk-tab-item{border-radius:var(--tab-radius);color:var(--ttdk-text-icon-secondary);&:hover:not(:disabled){color:var(--ttdk-text-icon-primary)}&[data-state=active]{background:var(--ttdk-bg-card);color:var(--ttdk-text-icon-primary);box-shadow:var(--ttdk-shadow-sm)}}}.ttdk-tabs-panels{width:100%}.ttdk-tab-panel{padding:var(--ttdk-spacing-md) 0;color:var(--ttdk-text-icon-primary);animation:.2s ease-in-out ttdkTabFadeIn}@keyframes ttdkTabFadeIn{0%{opacity:0}to{opacity:1}}

package/src/web/tabs/tabs.vue

@@ -0,0 +1,164 @@
+<template>
+  <div
+    :class="['ttdk-tabs', className, $attrs.class]"
+    :data-orientation="orientation || 'horizontal'"
+    :data-variant="variant || 'line'"
+    :data-size="size || 'md'"
+    :data-fitted="fitted ? 'true' : 'false'"
+    :data-rounded="rounded || 'md'"
+    :style="{
+      ...buildResponsiveVars(ui, {
+        activeColor: '--ttdk-ui-tabs-active-color',
+        indicatorColor: '--ttdk-ui-tabs-indicator-color',
+        inactiveColor: '--ttdk-ui-tabs-inactive-color',
+        bg: '--ttdk-ui-tabs-bg',
+        borderColor: '--ttdk-ui-tabs-border-color',
+        textSize: '--ttdk-ui-tabs-font-size',
+        fontSize: '--ttdk-ui-tabs-font-size',
+        padding: '--ttdk-ui-tabs-padding',
+        gap: '--ttdk-ui-tabs-gap',
+      }),
+    }"
+  >
+    <div
+      class="ttdk-tabs-list"
+      role="tablist"
+      :aria-orientation="orientation || 'horizontal'"
+    >
+      <template :key="item.value" v-for="item in items">
+        <button
+          type="button"
+          role="tab"
+          class="ttdk-tab-item"
+          :data-state="getCurrentActive() === item.value ? 'active' : 'inactive'"
+          :data-disabled="item.disabled ? 'true' : 'false'"
+          :disabled="item.disabled"
+          :aria-selected="getCurrentActive() === item.value"
+          @click="handleTabClick(item.value, item.disabled)"
+        >
+          <template v-if="item.icon">
+            <span class="ttdk-tab-icon">{{ item.icon }}</span>
+          </template>
+
+          <span class="ttdk-tab-label">{{ item.label }}</span>
+          <template v-if="item.badge !== undefined && item.badge !== null">
+            <span class="ttdk-tab-badge">{{ item.badge }}</span>
+          </template>
+
+          <template
+            v-if="
+              getCurrentActive() === item.value &&
+              (!variant || variant === 'line')
+            "
+          >
+            <span class="ttdk-tab-indicator"></span>
+          </template>
+        </button>
+      </template>
+    </div>
+    <div class="ttdk-tabs-panels">
+      <template v-if="getActiveItem() && getActiveItem()?.content">
+        <div class="ttdk-tab-panel" role="tabpanel">
+          {{ getActiveItem()?.content }}
+        </div>
+      </template>
+
+      <template v-if="$slots.default">
+        <div class="ttdk-tab-children"><slot /></div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } 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;
+}
+
+const props = defineProps<TabsProps>();
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+  (e: "update:value", value: string): void;
+  (e: "change", value: string): void;
+}>();
+
+const internalActive = ref(
+  props.modelValue ||
+    props.value ||
+    props.defaultValue ||
+    (props.items && props.items[0]?.value) ||
+    ""
+);
+
+function getCurrentActive() {
+  if (props.modelValue !== undefined) return props.modelValue;
+  if (props.value !== undefined) return props.value;
+  return internalActive.value;
+}
+
+function handleTabClick(itemValue: string, disabled?: boolean) {
+  if (disabled) return;
+  internalActive.value = itemValue;
+  emit("update:modelValue", itemValue);
+  emit("update:value", itemValue);
+  emit("change", itemValue);
+  if (props.onChange) {
+    props.onChange(itemValue);
+  }
+}
+
+function getActiveItem() {
+  const current = getCurrentActive();
+  return props.items
+    ? props.items.find((item: any) => item.value === current)
+    : null;
+}
+</script>