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

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

@@ -0,0 +1,70 @@
+<template>
+  <tr
+    :class="`ttdk-table-row ${className || ''}`.trim()"
+    :data-selected="selected ? 'true' : 'false'"
+    :data-hoverable="hoverable !== false ? 'true' : 'false'"
+    @click="
+      async (e) => {
+        if (onClick) {
+          onClick(e);
+        }
+      }
+    "
+    :style="{
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <slot />
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableRowProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * 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).
+ */
+
+const props = withDefaults(defineProps<TableRowProps>(), {
+  hoverable: true,
+  selected: false,
+});
+</script>

package/src/web/table/table-row.vue.d.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface TableRowProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+  /**
+   * 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;
+}
+
+declare const component: DefineComponent<TableRowProps>;
+export default component;

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.vue

@@ -0,0 +1,298 @@
+<template>
+  <div
+    :class="`ttdk-table-wrapper ${className || ''}`.trim()"
+    :data-loading="loading ? 'true' : undefined"
+    :data-variant="variant || 'default'"
+    :data-size="size || 'md'"
+    :data-sticky-header="stickyHeader ? 'true' : undefined"
+    :data-rounded="
+      rounded &&
+      ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'full'].includes(rounded)
+        ? rounded
+        : undefined
+    "
+    :data-shadow="
+      shadow && ['none', 'sm', 'md', 'lg'].includes(shadow) ? shadow : undefined
+    "
+    :style="{
+      ...(maxHeight
+        ? {
+            maxHeight:
+              typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+          }
+        : {}),
+      ...(typeof rounded === 'number'
+        ? {
+            '--table-corner-radius': `${rounded}px`,
+          }
+        : rounded &&
+          !['none', 'xs', 'sm', 'md', 'lg', 'xl', 'full'].includes(rounded)
+        ? {
+            '--table-corner-radius': rounded,
+          }
+        : {}),
+      ...(shadow && !['none', 'sm', 'md', 'lg'].includes(shadow)
+        ? {
+            boxShadow: shadow,
+          }
+        : {}),
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <template v-if="loading">
+      <div class="ttdk-table-loading-overlay" aria-hidden="true">
+        <svg class="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>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.25"
+            transform="rotate(30 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.325"
+            transform="rotate(60 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.4"
+            transform="rotate(90 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.475"
+            transform="rotate(120 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.55"
+            transform="rotate(150 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.625"
+            transform="rotate(180 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.7"
+            transform="rotate(210 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.775"
+            transform="rotate(240 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.85"
+            transform="rotate(270 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="0.925"
+            transform="rotate(300 12 12)"
+          ></line>
+          <line
+            x1="12"
+            y1="2.5"
+            x2="12"
+            y2="6.5"
+            opacity="1"
+            transform="rotate(330 12 12)"
+          ></line>
+        </svg>
+      </div>
+    </template>
+
+    <table
+      :class="`ttdk-table ${tableClass || ''}`.trim()"
+      :data-variant="variant || 'default'"
+      :data-size="size || 'md'"
+      :data-hoverable="hoverable !== false ? 'true' : 'false'"
+      :data-sticky-header="stickyHeader ? 'true' : undefined"
+      :style="{
+        ...(minWidth
+          ? {
+              minWidth:
+                typeof minWidth === 'number' ? `${minWidth}px` : minWidth,
+            }
+          : {}),
+        ...buildUiVars(tableStyle),
+      }"
+    >
+      <template v-if="caption">
+        <caption class="ttdk-table-caption">
+          {{
+            caption
+          }}
+        </caption>
+      </template>
+
+      <slot />
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+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?: any;
+
+  /**
+   * 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).
+ */
+
+const props = withDefaults(defineProps<TableProps>(), {
+  variant: "default",
+  size: "md",
+  hoverable: true,
+});
+</script>

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

@@ -0,0 +1,119 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+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?: any;
+
+  /**
+   * 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;
+}
+
+declare const component: DefineComponent<TableProps>;
+export default component;