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

package/src/web/table/table-row.tsx

@@ -0,0 +1,69 @@
+"use client";
+import * as React from "react";
+
+export interface TableRowProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Menandai baris sebagai aktif / terpilih (selected).
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Efek hover saat kursor melayang di atas baris.
+   */
+  hoverable?: boolean;
+
+  /**
+   * Kustomisasi visual granular tr (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Fungsi callback saat baris diklik.
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Konten sel (TableCell atau TableHead).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen baris tabel `<tr>` (Compound TableRow).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function TableRow(props: TableRowProps) {
+  return (
+    <tr
+      className={`ttdk-table-row ${props.className || ""}`.trim()}
+      data-selected={props.selected ? "true" : "false"}
+      data-hoverable={props.hoverable !== false ? "true" : "false"}
+      onClick={(e) => {
+        if (props.onClick) {
+          props.onClick(e);
+        }
+      }}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </tr>
+  );
+}
+
+export default TableRow;

package/src/web/table/table.css

@@ -0,0 +1 @@
+.ttdk-table-wrapper{width:100%;font-family:var(--ttdk-font-sans);background:var(--ttdk-bg-card);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);--table-corner-radius:var(--ttdk-ui-border-radius,var(--ttdk-radius-sm,8px));border-radius:var(--table-corner-radius);box-shadow:var(--ttdk-shadow-sm);box-sizing:border-box;transition:background-color .2s,border-color .2s;position:relative;overflow:auto}.ttdk-table-wrapper[data-rounded=none]{--table-corner-radius:var(--ttdk-radius-none,0px)}.ttdk-table-wrapper[data-rounded=xs]{--table-corner-radius:var(--ttdk-radius-xs,6px)}.ttdk-table-wrapper[data-rounded=sm]{--table-corner-radius:var(--ttdk-radius-sm,8px)}.ttdk-table-wrapper[data-rounded=md]{--table-corner-radius:var(--ttdk-radius-md,12px)}.ttdk-table-wrapper[data-rounded=lg]{--table-corner-radius:var(--ttdk-radius-lg,16px)}.ttdk-table-wrapper[data-rounded=xl],.ttdk-table-wrapper[data-rounded=full]{--table-corner-radius:var(--ttdk-radius-xl,24px)}.ttdk-table-wrapper.rounded-none{--table-corner-radius:0px!important}.ttdk-table-wrapper.rounded-xs,.ttdk-table-wrapper.rounded-sm{--table-corner-radius:var(--ttdk-radius-xs,6px)!important}.ttdk-table-wrapper.rounded,.ttdk-table-wrapper.rounded-md{--table-corner-radius:var(--ttdk-radius-sm,8px)!important}.ttdk-table-wrapper.rounded-lg{--table-corner-radius:var(--ttdk-radius-md,12px)!important}.ttdk-table-wrapper.rounded-xl{--table-corner-radius:var(--ttdk-radius-lg,16px)!important}.ttdk-table-wrapper.rounded-2xl{--table-corner-radius:var(--ttdk-radius-xl,24px)!important}.ttdk-table-wrapper[data-shadow=none]{box-shadow:none}.ttdk-table-wrapper[data-shadow=sm]{box-shadow:var(--ttdk-shadow-sm)}.ttdk-table-wrapper[data-shadow=md]{box-shadow:var(--ttdk-shadow-md)}.ttdk-table-wrapper[data-shadow=lg]{box-shadow:var(--ttdk-shadow-lg)}.dark .ttdk-table-wrapper[data-shadow=none]{box-shadow:none}.dark .ttdk-table-wrapper[data-shadow=sm]{box-shadow:var(--ttdk-shadow-sm)}.dark .ttdk-table-wrapper[data-shadow=md]{box-shadow:var(--ttdk-shadow-md)}.dark .ttdk-table-wrapper[data-shadow=lg]{box-shadow:var(--ttdk-shadow-lg)}.ttdk-table-wrapper.shadow-none{box-shadow:none!important}.ttdk-table-wrapper.shadow-sm,.ttdk-table-wrapper.shadow{box-shadow:var(--ttdk-shadow-sm)!important}.ttdk-table-wrapper.shadow-md{box-shadow:var(--ttdk-shadow-md)!important}.ttdk-table-wrapper.shadow-lg,.ttdk-table-wrapper.shadow-xl{box-shadow:var(--ttdk-shadow-lg)!important}.dark .ttdk-table-wrapper{background:var(--ttdk-bg-card);border-color:var(--ttdk-stroke-subtle);box-shadow:var(--ttdk-shadow-sm)}.ttdk-table-loading-overlay{background:color-mix(in srgb, var(--ttdk-bg-card) 75%, transparent);z-index:10;backdrop-filter:blur(2px);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.dark .ttdk-table-loading-overlay{background:color-mix(in srgb, var(--ttdk-bg-card) 75%, transparent)}.ttdk-table-spinner{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;width:24px;height:24px;color:var(--ttdk-brand-default);animation:1.2s steps(12,end) infinite ttdk-table-spin}.ttdk-table-wrapper[data-size=sm] .ttdk-table-spinner,.ttdk-table-wrapper:has(.ttdk-table[data-size=sm]) .ttdk-table-spinner{width:18px;height:18px}.ttdk-table-wrapper[data-size=md] .ttdk-table-spinner,.ttdk-table-wrapper:has(.ttdk-table[data-size=md]) .ttdk-table-spinner{width:24px;height:24px}.ttdk-table-wrapper[data-size=lg] .ttdk-table-spinner,.ttdk-table-wrapper:has(.ttdk-table[data-size=lg]) .ttdk-table-spinner{width:32px;height:32px}@keyframes ttdk-table-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ttdk-table{caption-side:bottom;border-collapse:collapse;text-align:left;width:100%;font-size:13px;line-height:1.5}.ttdk-table-wrapper[data-variant=clean],.ttdk-table-wrapper:has(.ttdk-table[data-variant=clean]){box-shadow:none;background:0 0;border:none;border-radius:0}.dark .ttdk-table-wrapper[data-variant=clean],.dark .ttdk-table-wrapper:has(.ttdk-table[data-variant=clean]){box-shadow:none;background:0 0;border:none}.ttdk-table-wrapper[data-variant=clean] .ttdk-table-header,.ttdk-table-wrapper:has(.ttdk-table[data-variant=clean]) .ttdk-table-header,.dark .ttdk-table-wrapper[data-variant=clean] .ttdk-table-header,.dark .ttdk-table-wrapper:has(.ttdk-table[data-variant=clean]) .ttdk-table-header{background:0 0}.ttdk-table[data-variant=clean]{border:none}.ttdk-table[data-sticky-header=true] .ttdk-table-head,.ttdk-table-wrapper[data-sticky-header=true] .ttdk-table-head,.ttdk-table-wrapper:has(.ttdk-table[data-sticky-header=true]) .ttdk-table-head{z-index:10;background:var(--ttdk-bg-secondary-disabled);box-shadow:inset 0 -1px 0 var(--ttdk-stroke-subtle);position:sticky;top:0}.dark .ttdk-table[data-sticky-header=true] .ttdk-table-head,.dark .ttdk-table-wrapper[data-sticky-header=true] .ttdk-table-head,.dark .ttdk-table-wrapper:has(.ttdk-table[data-sticky-header=true]) .ttdk-table-head{background:var(--ttdk-bg-secondary-disabled);box-shadow:inset 0 -1px 0 var(--ttdk-stroke-subtle)}.ttdk-table-wrapper[data-variant=clean][data-sticky-header=true] .ttdk-table-head,.ttdk-table-wrapper[data-variant=clean]:has(.ttdk-table[data-sticky-header=true]) .ttdk-table-head,.ttdk-table[data-variant=clean][data-sticky-header=true] .ttdk-table-head,.dark .ttdk-table-wrapper[data-variant=clean][data-sticky-header=true] .ttdk-table-head,.dark .ttdk-table-wrapper[data-variant=clean]:has(.ttdk-table[data-sticky-header=true]) .ttdk-table-head,.dark .ttdk-table[data-variant=clean][data-sticky-header=true] .ttdk-table-head{background:var(--ttdk-bg-card);box-shadow:inset 0 -1px 0 var(--ttdk-stroke-subtle)}.ttdk-table[data-size=sm] th,.ttdk-table[data-size=sm] td{padding:8px 12px;font-size:12px}.ttdk-table[data-size=md] th,.ttdk-table[data-size=md] td{padding:14px 16px;font-size:13px}.ttdk-table[data-size=lg] th,.ttdk-table[data-size=lg] td{padding:18px 20px;font-size:14px}.ttdk-table-header{background:var(--ttdk-bg-secondary-disabled);border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle)}.dark .ttdk-table-header{background:var(--ttdk-bg-secondary-disabled);border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-table-head{height:44px;color:var(--ttdk-text-icon-secondary);letter-spacing:.2px;vertical-align:middle;border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);white-space:nowrap;user-select:none;padding:12px 16px;font-size:12px;font-weight:600;transition:background-color .15s,color .15s}.dark .ttdk-table-head{color:var(--ttdk-text-icon-secondary);border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-table-head[data-sortable=true]{cursor:pointer}.ttdk-table-head[data-sortable=true]:hover,.dark .ttdk-table-head[data-sortable=true]:hover{background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary)}.ttdk-th-inner{align-items:center;gap:6px;display:inline-flex}.ttdk-table-body{border-bottom:0}.ttdk-table-row{border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);transition:background-color .15s}.dark .ttdk-table-row{border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-table-row:last-child{border-bottom:none}.ttdk-table[data-hoverable=true] .ttdk-table-row:hover,.ttdk-table-row[data-hoverable=true]:hover,.dark .ttdk-table[data-hoverable=true] .ttdk-table-row:hover,.dark .ttdk-table-row[data-hoverable=true]:hover,.ttdk-table[data-variant=striped] .ttdk-table-body .ttdk-table-row:nth-child(2n),.dark .ttdk-table[data-variant=striped] .ttdk-table-body .ttdk-table-row:nth-child(2n){background:var(--ttdk-bg-secondary-disabled)}.ttdk-table-row[data-selected=true]{background:var(--ttdk-bg-status-info-subtle)!important}.dark .ttdk-table-row[data-selected=true]{background:var(--ttdk-color-blue-900)!important}.ttdk-table-cell{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));vertical-align:middle;padding:14px 16px}.dark .ttdk-table-cell{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-table-footer{background:var(--ttdk-bg-secondary-disabled);border-top:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));font-weight:500}.dark .ttdk-table-footer{background:var(--ttdk-bg-secondary-disabled);border-top-color:var(--ttdk-stroke-subtle);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-table-caption{color:var(--ttdk-text-icon-secondary);text-align:center;margin-top:12px;padding:0 16px 12px;font-size:12px}.dark .ttdk-table-caption{color:var(--ttdk-text-icon-secondary)}.ttdk-table-empty-wrapper{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:56px 24px;display:flex}.ttdk-table-empty-title{color:var(--ttdk-text-icon-primary);margin:0;font-size:14px;font-weight:700}.dark .ttdk-table-empty-title{color:var(--ttdk-text-icon-primary)}.ttdk-table-empty-desc{color:var(--ttdk-text-icon-secondary);margin:4px 0 0;font-size:12px}.dark .ttdk-table-empty-desc{color:var(--ttdk-text-icon-secondary)}.ttdk-table-empty-action{color:var(--ttdk-brand-default);cursor:pointer;border-radius:var(--ttdk-radius-input-sm);background:0 0;border:none;margin-top:12px;padding:4px 8px;font-size:13px;font-weight:600;transition:color .15s}.ttdk-table-empty-action:hover{text-decoration:underline}.dark .ttdk-table-empty-action{color:var(--ttdk-brand-default)}.ttdk-cell-title-group{flex-direction:column;gap:2px;display:flex}.ttdk-cell-main-title{color:var(--ttdk-text-icon-primary);font-size:13px;font-weight:600}.dark .ttdk-cell-main-title{color:var(--ttdk-text-icon-primary)}.ttdk-cell-subtitle{color:var(--ttdk-text-icon-secondary);font-size:11px}.dark .ttdk-cell-subtitle{color:var(--ttdk-text-icon-secondary)}.ttdk-format-badges{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.ttdk-format-tag{border-radius:var(--ttdk-radius-input-sm);background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);padding:2px 6px;font-size:11px;font-weight:600}.dark .ttdk-format-tag{background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary)}.ttdk-view-count{color:var(--ttdk-text-icon-secondary);align-items:center;gap:6px;font-size:12px;display:flex}.dark .ttdk-view-count{color:var(--ttdk-text-icon-secondary)}.ttdk-btn-fav{border-radius:var(--ttdk-radius-xs);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);width:32px;height:32px;color:var(--ttdk-text-icon-secondary);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}.ttdk-btn-fav:hover{background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-strong)}.dark .ttdk-btn-fav{border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-secondary)}.dark .ttdk-btn-fav:hover{background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary)}.ttdk-btn-fav.active{background:var(--ttdk-brand-default);border-color:var(--ttdk-brand-default);color:var(--ttdk-color-neutral-white)}

package/src/web/table/table.tsx

@@ -0,0 +1,305 @@
+import * as React from "react";
+
+export type TableUiProps = UiProps;
+export interface TableProps {
+  /**
+   * Varian tampilan visual tabel.
+   * - `'default'`: Tampilan standar dengan latar bersih dan bingkai kartu.
+   * - `'striped'`: Tampilan selang-seling (zebra).
+   * - `'clean'`: Tampilan minimalis tanpa border luar dan tanpa shadow.
+   * @default 'default'
+   */
+  variant?: "default" | "striped" | "clean";
+
+  /**
+   * Kerapatan / ukuran tinggi baris tabel.
+   * - `'sm'`: Kompak (padat).
+   * - `'md'`: Standar.
+   * - `'lg'`: Lega.
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Sudut kelengkungan radius tabel.
+   * - Preset: `'none'` | `'xs'` | `'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'`
+   * - Nilai custom: `'12px'`, `'1rem'`, atau angka `12`
+   * @default 'sm'
+   */
+  rounded?:
+    | "none"
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "full"
+    | (string & {})
+    | number;
+
+  /**
+   * Bayangan elevasi kontainer tabel.
+   * - Preset: `'none'` | `'sm'` | `'md'` | `'lg'`
+   * - Nilai custom: CSS box-shadow string (contoh: `'0 4px 20px rgba(0,0,0,0.1)'`)
+   * @default 'sm'
+   */
+  shadow?: "none" | "sm" | "md" | "lg" | (string & {});
+
+  /**
+   * Lebar minimum elemen table di dalam wrapper untuk menjaga susunan kolom dan memicu horizontal scroll.
+   * Contoh: `700`, `'700px'`, `'max-content'`
+   */
+  minWidth?: string | number;
+
+  /**
+   * Ketinggian maksimum kontainer tabel untuk memicu scroll vertikal internal (sangat direkomendasikan saat stickyHeader aktif).
+   * Contoh: `280`, `'280px'`, `'50vh'`
+   */
+  maxHeight?: string | number;
+
+  /**
+   * Efek hover saat kursor melayang di atas baris tabel.
+   * @default true
+   */
+  hoverable?: boolean;
+
+  /**
+   * Membuat header tabel menempel di atas (sticky) saat konten di-scroll.
+   * @default false
+   */
+  stickyHeader?: boolean;
+
+  /**
+   * Menampilkan spinner loading overlay di atas tabel.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Teks caption aksesibilitas untuk tabel (dirender sebagai elemen `<caption>`).
+   */
+  caption?: string;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Kustomisasi visual granular root kontainer wrapper (.ttdk-table-wrapper) melalui UiProps.
+   */
+  ui?: UiProps;
+
+  /**
+   * Style kustom untuk elemen table (table.ttdk-table) melalui UiProps.
+   */
+  tableStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen table (table.ttdk-table).
+   */
+  tableClass?: string;
+
+  /**
+   * Class CSS kustom untuk kontainer wrapper luar.
+   */
+  className?: string;
+
+  /**
+   * Konten anak (TableHeader, TableBody, TableFooter, TableCaption).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen kontainer utama tabel (Compound Table ala Shadcn UI).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Table(props: TableProps) {
+  return (
+    <div
+      className={`ttdk-table-wrapper ${props.className || ""}`.trim()}
+      data-loading={props.loading ? "true" : undefined}
+      data-variant={props.variant || "default"}
+      data-size={props.size || "md"}
+      data-sticky-header={props.stickyHeader ? "true" : undefined}
+      data-rounded={
+        props.rounded &&
+        ["none", "xs", "sm", "md", "lg", "xl", "full"].includes(
+          props.rounded as string
+        )
+          ? props.rounded
+          : undefined
+      }
+      data-shadow={
+        props.shadow &&
+        ["none", "sm", "md", "lg"].includes(props.shadow as string)
+          ? props.shadow
+          : undefined
+      }
+      style={{
+        ...(props.maxHeight
+          ? {
+              maxHeight:
+                typeof props.maxHeight === "number"
+                  ? `${props.maxHeight}px`
+                  : props.maxHeight,
+            }
+          : {}),
+        ...(typeof props.rounded === "number"
+          ? {
+              "--table-corner-radius": `${props.rounded}px`,
+            }
+          : props.rounded &&
+            !["none", "xs", "sm", "md", "lg", "xl", "full"].includes(
+              props.rounded as string
+            )
+          ? {
+              "--table-corner-radius": props.rounded,
+            }
+          : {}),
+        ...(props.shadow &&
+        !["none", "sm", "md", "lg"].includes(props.shadow as string)
+          ? {
+              boxShadow: props.shadow,
+            }
+          : {}),
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      {props.loading ? (
+        <div className="ttdk-table-loading-overlay" aria-hidden="true">
+          <svg className="ttdk-table-spinner" viewBox="0 0 24 24">
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.175"
+              transform="rotate(0 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.25"
+              transform="rotate(30 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.325"
+              transform="rotate(60 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.4"
+              transform="rotate(90 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.475"
+              transform="rotate(120 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.55"
+              transform="rotate(150 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.625"
+              transform="rotate(180 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.7"
+              transform="rotate(210 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.775"
+              transform="rotate(240 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.85"
+              transform="rotate(270 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="0.925"
+              transform="rotate(300 12 12)"
+            />
+            <line
+              x1="12"
+              y1="2.5"
+              x2="12"
+              y2="6.5"
+              opacity="1"
+              transform="rotate(330 12 12)"
+            />
+          </svg>
+        </div>
+      ) : null}
+      <table
+        className={`ttdk-table ${props.tableClass || ""}`.trim()}
+        data-variant={props.variant || "default"}
+        data-size={props.size || "md"}
+        data-hoverable={props.hoverable !== false ? "true" : "false"}
+        data-sticky-header={props.stickyHeader ? "true" : undefined}
+        style={{
+          ...(props.minWidth
+            ? {
+                minWidth:
+                  typeof props.minWidth === "number"
+                    ? `${props.minWidth}px`
+                    : props.minWidth,
+              }
+            : {}),
+          ...buildUiVars(props.tableStyle),
+        }}
+      >
+        {props.caption ? (
+          <caption className="ttdk-table-caption">{props.caption}</caption>
+        ) : null}
+        <>{props.children}</>
+      </table>
+    </div>
+  );
+}
+
+export default Table;
+
+export { Table };

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,3 @@
+export { default as Tabs } from './tabs';
+export { default } from './tabs';
+export * from './tabs'