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

package/src/web/sonner/AI_GUIDE.md

@@ -0,0 +1,98 @@
+# <Sonner /> — TTDK Component Reference
+
+Komponen Sonner / Toaster untuk sistem notifikasi toast mengambang yang ringkas, kaya warna, dan responsif.
+
+## 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/sonner/sonner.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Sonner from "@ttdk-design-system/library-react/web/sonner";
+
+// Vue 3
+import Sonner from "@ttdk-design-system/library-vue/web/sonner";
+
+// Svelte
+import Sonner from "@ttdk-design-system/library-svelte/web/sonner";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `position?` | `'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'` | `bottom-right` | Posisi penempatan toast pada layar. - `'top-left'`, `'top-center'`, `'top-right'` - `'bottom-left'`, `'bottom-center'`, `'bottom-right'` |
+| `richColors?` | `boolean` | `true` | Menampilkan warna semantik kaya (*rich colors*) untuk jenis status (sukses hijau, error merah, info biru, warning kuning). |
+| `closeButton?` | `boolean` | `true` | Menampilkan tombol silang penutup (*close button*) pada setiap kartu toast. |
+| `theme?` | `'light' | 'dark' | 'system'` | `light` | Menentukan tema visual kontainer toast (`'light'`, `'dark'`, atau `'system'`). |
+| `expand?` | `boolean` | `false` | Membuka semua tumpukan toast secara melebar (*expanded*) secara default saat muncul. |
+| `duration?` | `number` | `4000` | Durasi tampilan toast dalam milidetik sebelum otomatis menghilang. |
+| `visibleToasts?` | `number` | `3` | Jumlah maksimum kartu toast yang terlihat bertumpuk secara bersamaan di layar. |
+| `gap?` | `number` | `14` | Jarak vertikal antar kartu toast dalam piksel. |
+| `offset?` | `number` | `24` | Jarak offset tepi layar dalam piksel. |
+| `mobileOffset?` | `number` | `16` | Jarak offset pada perangkat seluler / mobile dalam piksel. |
+| `dir?` | `'ltr' | 'rtl'` | `ltr` | Arah teks layout tata letak (`'ltr'` atau `'rtl'`). |
+| `className?` | `string` | `-` | Kelas CSS kustom tambahan untuk wadah toaster. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Sonner from "@ttdk-design-system/library-react/web/sonner";
+import "@ttdk-design-system/library-react/web/sonner/sonner.css";
+import toast from "sonner-js";
+
+export function Example() {
+  return (
+    <div>
+      <Sonner position="bottom-right" richColors />
+      <button onClick={() => toast.success("Data pasien berhasil disimpan!")}>
+        Tampilkan Toast Sukses
+      </button>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Sonner from "@ttdk-design-system/library-vue/web/sonner";
+import "@ttdk-design-system/library-vue/web/sonner/sonner.css";
+import toast from "sonner-js";
+
+const showToast = () => {
+  toast.success("Data pasien berhasil disimpan!");
+};
+</script>
+
+<template>
+  <div>
+    <Sonner position="bottom-right" :rich-colors="true" />
+    <button @click="showToast">
+      Tampilkan Toast Sukses
+    </button>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Sonner from "@ttdk-design-system/library-svelte/web/sonner";
+  import "@ttdk-design-system/library-svelte/web/sonner/sonner.css";
+  import toast from "sonner-js";
+
+  const showToast = () => {
+    toast.success("Data pasien berhasil disimpan!");
+  };
+</script>
+
+<div>
+  <Sonner position="bottom-right" richColors={true} />
+  <button on:click={showToast}>
+    Tampilkan Toast Sukses
+  </button>
+</div>
+```

package/src/web/sonner/index.ts

@@ -0,0 +1,114 @@
+import sonnerJsToast from 'sonner-js';
+import SonnerComponent from './sonner';
+
+export interface ToastAction {
+  label: string;
+  onClick: (event: MouseEvent) => void;
+  cancel?: boolean;
+}
+
+export interface ToastOptions {
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+  closeButton?: boolean;
+  richColors?: boolean;
+  duration?: number;
+  invert?: boolean;
+  description?: string;
+  action?: ToastAction;
+  onDismiss?: (toast?: any) => void;
+  onAutoClose?: (toast?: any) => void;
+  [key: string]: any;
+}
+
+export interface ToastPromiseOptions<T = any> {
+  loading?: string;
+  success?: string | ((data: T) => string);
+  error?: string | ((err: any) => string);
+  description?: string | ((data: any) => string);
+  finally?: () => void | Promise<void>;
+}
+
+export interface ToastInterface {
+  (message: string, options?: ToastOptions): string | number;
+  /**
+   * Compatibility property for Vue template unref / Volar __VLS_withDotValue closure.
+   */
+  readonly value: ToastInterface;
+  message: (message: string, options?: ToastOptions) => string | number;
+  success: (message: string, options?: ToastOptions) => string | number;
+  error: (message: string, options?: ToastOptions) => string | number;
+  danger: (message: string, options?: ToastOptions) => string | number;
+  info: (message: string, options?: ToastOptions) => string | number;
+  warning: (message: string, options?: ToastOptions) => string | number;
+  loading: (message: string, options?: ToastOptions) => string | number;
+  dismiss: (id?: number | string, exitTime?: number) => void;
+  promise: <T = any>(promise: Promise<T> | (() => Promise<T>), data?: ToastPromiseOptions<T>) => void;
+  config: (userConfig: any) => void;
+}
+
+function getRawToast(): any {
+  const t = sonnerJsToast as any;
+  if (t && typeof t.default === 'function') {
+    return t.default;
+  }
+  if (typeof t === 'function') {
+    return t;
+  }
+  return t?.default || t;
+}
+
+const toastFunction = (message: string, options?: ToastOptions) => {
+  const raw = getRawToast();
+  return typeof raw === 'function' ? raw(message, options) : undefined;
+};
+
+export const toast: ToastInterface = Object.assign(toastFunction, {
+  message: (message: string, options?: ToastOptions) => {
+    const raw = getRawToast();
+    return raw?.message ? raw.message(message, options) : raw?.(message, options);
+  },
+  success: (message: string, options?: ToastOptions) => getRawToast()?.success?.(message, options),
+  error: (message: string, options?: ToastOptions) => getRawToast()?.error?.(message, options),
+  danger: (message: string, options?: ToastOptions) => {
+    const raw = getRawToast();
+    return (raw?.danger || raw?.error)?.(message, options);
+  },
+  info: (message: string, options?: ToastOptions) => getRawToast()?.info?.(message, options),
+  warning: (message: string, options?: ToastOptions) => getRawToast()?.warning?.(message, options),
+  loading: (message: string, options?: ToastOptions) => getRawToast()?.loading?.(message, options),
+  dismiss: (id?: number | string, exitTime?: number) => getRawToast()?.dismiss?.(id, exitTime),
+  promise: <T = any>(promise: Promise<T> | (() => Promise<T>), data?: ToastPromiseOptions<T>) => getRawToast()?.promise?.(promise, data),
+  config: (userConfig: any) => getRawToast()?.config?.(userConfig),
+}) as ToastInterface;
+
+try {
+  Object.defineProperty(toast, 'value', {
+    get() {
+      return toast;
+    },
+    enumerable: true,
+    configurable: true,
+  });
+} catch (_) {}
+
+if (typeof window !== 'undefined') {
+  try {
+    const raw = getRawToast();
+    if (raw && typeof raw.config === 'function') {
+      raw.config({
+        toastOptions: {
+          position: 'bottom-right',
+          closeButton: true,
+          richColors: true,
+          duration: 4000,
+        },
+      });
+    }
+  } catch (e) {
+    // Abaikan jika dieksekusi di lingkungan SSR / non-DOM
+  }
+}
+
+export { SonnerComponent as Sonner, SonnerComponent as Toaster };
+export default SonnerComponent;
+export type { SonnerProps, SonnerPosition, SonnerTheme } from './sonner';

package/src/web/sonner/manifest.json

@@ -0,0 +1,132 @@
+{
+  "name": "@ttdk-design-system/sonner",
+  "component": "Sonner",
+  "folder": "sonner",
+  "description": "Komponen Sonner / Toaster untuk sistem notifikasi toast mengambang yang ringkas, kaya warna, dan responsif.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "sonner.css",
+      "importPath": "web/sonner/sonner.css"
+    }
+  ],
+  "props": {
+    "position": {
+      "name": "position",
+      "type": "'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'",
+      "optional": true,
+      "default": "bottom-right",
+      "description": "Posisi penempatan toast pada layar. - `'top-left'`, `'top-center'`, `'top-right'` - `'bottom-left'`, `'bottom-center'`, `'bottom-right'`",
+      "example": null,
+      "param": null
+    },
+    "richColors": {
+      "name": "richColors",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan warna semantik kaya (*rich colors*) untuk jenis status (sukses hijau, error merah, info biru, warning kuning).",
+      "example": null,
+      "param": null
+    },
+    "closeButton": {
+      "name": "closeButton",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan tombol silang penutup (*close button*) pada setiap kartu toast.",
+      "example": null,
+      "param": null
+    },
+    "theme": {
+      "name": "theme",
+      "type": "'light' | 'dark' | 'system'",
+      "optional": true,
+      "default": "light",
+      "description": "Menentukan tema visual kontainer toast (`'light'`, `'dark'`, atau `'system'`).",
+      "example": null,
+      "param": null
+    },
+    "expand": {
+      "name": "expand",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuka semua tumpukan toast secara melebar (*expanded*) secara default saat muncul.",
+      "example": null,
+      "param": null
+    },
+    "duration": {
+      "name": "duration",
+      "type": "number",
+      "optional": true,
+      "default": "4000",
+      "description": "Durasi tampilan toast dalam milidetik sebelum otomatis menghilang.",
+      "example": null,
+      "param": null
+    },
+    "visibleToasts": {
+      "name": "visibleToasts",
+      "type": "number",
+      "optional": true,
+      "default": "3",
+      "description": "Jumlah maksimum kartu toast yang terlihat bertumpuk secara bersamaan di layar.",
+      "example": null,
+      "param": null
+    },
+    "gap": {
+      "name": "gap",
+      "type": "number",
+      "optional": true,
+      "default": "14",
+      "description": "Jarak vertikal antar kartu toast dalam piksel.",
+      "example": null,
+      "param": null
+    },
+    "offset": {
+      "name": "offset",
+      "type": "number",
+      "optional": true,
+      "default": "24",
+      "description": "Jarak offset tepi layar dalam piksel.",
+      "example": null,
+      "param": null
+    },
+    "mobileOffset": {
+      "name": "mobileOffset",
+      "type": "number",
+      "optional": true,
+      "default": "16",
+      "description": "Jarak offset pada perangkat seluler / mobile dalam piksel.",
+      "example": null,
+      "param": null
+    },
+    "dir": {
+      "name": "dir",
+      "type": "'ltr' | 'rtl'",
+      "optional": true,
+      "default": "ltr",
+      "description": "Arah teks layout tata letak (`'ltr'` atau `'rtl'`).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Kelas CSS kustom tambahan untuk wadah toaster.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/sonner/sonner.css

@@ -0,0 +1 @@
+[data-sonner-toasters]{font-family:var(--ttdk-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-sonner-toaster]{--width:360px;--border-radius:10px;--gap:12px;--offset:24px;--mobile-offset:16px;z-index:999999}[data-sonner-toaster][data-sonner-theme=light],:root:not(.dark) [data-sonner-toaster]{--normal-bg:var(--ttdk-bg-card);--normal-border:var(--ttdk-stroke-subtle);--normal-text:var(--ttdk-text-icon-primary);--normal-text2:var(--ttdk-text-icon-secondary);--normal-cancel-bg:var(--ttdk-bg-secondary-disabled);--success-bg:var(--ttdk-bg-status-success-subtle);--success-border:var(--ttdk-stroke-status-success);--success-text:var(--ttdk-text-icon-status-success);--info-bg:var(--ttdk-bg-status-info-subtle);--info-border:var(--ttdk-stroke-status-info);--info-text:var(--ttdk-text-icon-status-info);--warning-bg:var(--ttdk-bg-status-warning-subtle);--warning-border:var(--ttdk-stroke-status-warning);--warning-text:var(--ttdk-text-icon-status-warning);--error-bg:var(--ttdk-bg-status-error-subtle);--error-border:var(--ttdk-stroke-status-error);--error-text:var(--ttdk-text-icon-status-error)}[data-sonner-toaster][data-sonner-theme=dark],.dark [data-sonner-toaster]{--normal-bg:var(--ttdk-bg-card);--normal-border:var(--ttdk-stroke-subtle);--normal-text:var(--ttdk-text-icon-primary);--normal-text2:var(--ttdk-text-icon-secondary);--normal-cancel-bg:var(--ttdk-bg-secondary-disabled);--success-bg:var(--ttdk-color-green-900);--success-border:var(--ttdk-color-green-700);--success-text:var(--ttdk-color-green-300);--info-bg:var(--ttdk-color-blue-900);--info-border:var(--ttdk-color-blue-700);--info-text:var(--ttdk-color-blue-300);--warning-bg:var(--ttdk-color-orange-900);--warning-border:var(--ttdk-color-orange-700);--warning-text:var(--ttdk-color-orange-300);--error-bg:var(--ttdk-color-red-900);--error-border:var(--ttdk-color-red-700);--error-text:var(--ttdk-color-red-300)}[data-sonner-toast]{border-radius:var(--border-radius);border:1px solid var(--normal-border);background-color:var(--normal-bg);color:var(--normal-text);box-shadow:var(--ttdk-shadow-lg);gap:10px;padding:14px 16px;font-size:13px;line-height:1.4;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s cubic-bezier(.16,1,.3,1),height .3s}.dark [data-sonner-toast]{box-shadow:var(--ttdk-shadow-lg)}[data-sonner-toast] [data-content]{flex-direction:column;gap:3px;display:flex}[data-sonner-toast] [data-title]{color:inherit;letter-spacing:-.01em;font-size:13px;font-weight:600}[data-sonner-toast] [data-description]{color:var(--normal-text2);font-size:12px;font-weight:400;line-height:1.4}[data-sonner-toast] [data-button]{background:var(--normal-text);height:28px;color:var(--normal-bg);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0 10px;font-family:inherit;font-size:12px;font-weight:600;transition:opacity .15s,transform .1s;display:inline-flex}[data-sonner-toast] [data-button]:hover{opacity:.9}[data-sonner-toast] [data-button]:active{transform:scale(.97)}[data-sonner-toast] [data-button][data-cancel]{background:var(--normal-cancel-bg);color:var(--normal-text)}[data-sonner-toast] [data-close-button=true]{background:var(--normal-bg);border:1px solid var(--normal-border);width:20px;height:20px;color:var(--normal-text2);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex}[data-sonner-toast] [data-close-button=true]:hover{background:var(--normal-cancel-bg);color:var(--normal-text)}[data-sonner-toast][data-rich-colors][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-sonner-toast][data-rich-colors][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-sonner-toast][data-rich-colors][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-sonner-toast][data-rich-colors][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}

package/src/web/sonner/sonner.tsx

@@ -0,0 +1,177 @@
+"use client";
+import * as React from "react";
+import { useEffect } from "react";
+
+export type SonnerPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+export type SonnerTheme = "light" | "dark" | "system";
+export interface SonnerProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Posisi penempatan toast pada layar.
+   * - `'top-left'`, `'top-center'`, `'top-right'`
+   * - `'bottom-left'`, `'bottom-center'`, `'bottom-right'`
+   *
+   * @default 'bottom-right'
+   */
+  position?:
+    | "top-left"
+    | "top-center"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-center"
+    | "bottom-right";
+
+  /**
+   * Menampilkan warna semantik kaya (*rich colors*) untuk jenis status (sukses hijau, error merah, info biru, warning kuning).
+   *
+   * @default true
+   */
+  richColors?: boolean;
+
+  /**
+   * Menampilkan tombol silang penutup (*close button*) pada setiap kartu toast.
+   *
+   * @default true
+   */
+  closeButton?: boolean;
+
+  /**
+   * Menentukan tema visual kontainer toast (`'light'`, `'dark'`, atau `'system'`).
+   *
+   * @default 'light'
+   */
+  theme?: "light" | "dark" | "system";
+
+  /**
+   * Membuka semua tumpukan toast secara melebar (*expanded*) secara default saat muncul.
+   *
+   * @default false
+   */
+  expand?: boolean;
+
+  /**
+   * Durasi tampilan toast dalam milidetik sebelum otomatis menghilang.
+   *
+   * @default 4000
+   */
+  duration?: number;
+
+  /**
+   * Jumlah maksimum kartu toast yang terlihat bertumpuk secara bersamaan di layar.
+   *
+   * @default 3
+   */
+  visibleToasts?: number;
+
+  /**
+   * Jarak vertikal antar kartu toast dalam piksel.
+   *
+   * @default 14
+   */
+  gap?: number;
+
+  /**
+   * Jarak offset tepi layar dalam piksel.
+   *
+   * @default 24
+   */
+  offset?: number;
+
+  /**
+   * Jarak offset pada perangkat seluler / mobile dalam piksel.
+   *
+   * @default 16
+   */
+  mobileOffset?: number;
+
+  /**
+   * Arah teks layout tata letak (`'ltr'` atau `'rtl'`).
+   *
+   * @default 'ltr'
+   */
+  dir?: "ltr" | "rtl";
+
+  /**
+   * Kelas CSS kustom tambahan untuk wadah toaster.
+   */
+  className?: string;
+}
+
+/**
+ * Komponen Sonner / Toaster untuk sistem notifikasi toast mengambang yang ringkas, kaya warna, dan responsif.
+ */
+
+import toast from "sonner-js";
+
+function Sonner(props: SonnerProps) {
+  useEffect(() => {
+    toast.config({
+      theme: props.theme === "dark" ? "dark" : "light",
+      expand: props.expand ?? false,
+      visibleToasts: props.visibleToasts ?? 3,
+      gap: props.gap ?? 14,
+      offset: props.offset ?? 24,
+      mobileOffset: props.mobileOffset ?? 16,
+      dir: props.dir ?? "ltr",
+      toastOptions: {
+        position: props.position ?? "bottom-right",
+        closeButton: props.closeButton ?? true,
+        richColors: props.richColors ?? true,
+        duration: props.duration ?? 4000,
+      },
+    });
+  }, []);
+  useEffect(() => {
+    toast.config({
+      theme: props.theme === "dark" ? "dark" : "light",
+      expand: props.expand ?? false,
+      visibleToasts: props.visibleToasts ?? 3,
+      gap: props.gap ?? 14,
+      offset: props.offset ?? 24,
+      mobileOffset: props.mobileOffset ?? 16,
+      dir: props.dir ?? "ltr",
+      toastOptions: {
+        position: props.position ?? "bottom-right",
+        closeButton: props.closeButton ?? true,
+        richColors: props.richColors ?? true,
+        duration: props.duration ?? 4000,
+      },
+    });
+  }, [
+    props.position,
+    props.richColors,
+    props.closeButton,
+    props.theme,
+    props.expand,
+    props.duration,
+    props.visibleToasts,
+    props.gap,
+    props.offset,
+    props.mobileOffset,
+    props.dir,
+  ]);
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`ttdk-sonner-wrapper ${props.className || ""}`}
+      style={{
+        display: "none",
+              ...props.style,
+      }}
+    />
+  );
+}
+
+export default Sonner;
+
+export { Sonner };

package/src/web/table/AI_GUIDE.md

@@ -0,0 +1,145 @@
+# <Table /> — TTDK Component Reference
+
+Komponen kontainer utama tabel (Compound Table ala Shadcn UI).
+
+## 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/table/table.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Table from "@ttdk-design-system/library-react/web/table";
+
+// Vue 3
+import Table from "@ttdk-design-system/library-vue/web/table";
+
+// Svelte
+import Table from "@ttdk-design-system/library-svelte/web/table";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `variant?` | `'default' | 'striped' | 'clean'` | `default` | 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. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Kerapatan / ukuran tinggi baris tabel. - `'sm'`: Kompak (padat). - `'md'`: Standar. - `'lg'`: Lega. |
+| `rounded?` | `'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {}) | number` | `sm` | Sudut kelengkungan radius tabel. - Preset: `'none'` | `'xs'` | `'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'` - Nilai custom: `'12px'`, `'1rem'`, atau angka `12` |
+| `shadow?` | `'none' | 'sm' | 'md' | 'lg' | (string & {})` | `sm` | 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)'`) |
+| `minWidth?` | `string | number` | `-` | Lebar minimum elemen table di dalam wrapper untuk menjaga susunan kolom dan memicu horizontal scroll. Contoh: `700`, `'700px'`, `'max-content'` |
+| `maxHeight?` | `string | number` | `-` | Ketinggian maksimum kontainer tabel untuk memicu scroll vertikal internal (sangat direkomendasikan saat stickyHeader aktif). Contoh: `280`, `'280px'`, `'50vh'` |
+| `hoverable?` | `boolean` | `true` | Efek hover saat kursor melayang di atas baris tabel. |
+| `stickyHeader?` | `boolean` | `false` | Membuat header tabel menempel di atas (sticky) saat konten di-scroll. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner loading overlay di atas tabel. |
+| `caption?` | `string` | `-` | Teks caption aksesibilitas untuk tabel (dirender sebagai elemen `<caption>`). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer wrapper (.ttdk-table-wrapper) melalui UiProps. |
+| `tableStyle?` | `UiProps` | `-` | Style kustom untuk elemen table (table.ttdk-table) melalui UiProps. |
+| `tableClass?` | `string` | `-` | Class CSS kustom untuk elemen table (table.ttdk-table). |
+| `className?` | `string` | `-` | Class CSS kustom untuk kontainer wrapper luar. |
+| `children?` | `any` | `-` | Konten anak (TableHeader, TableBody, TableFooter, TableCaption). |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Table from "@ttdk-design-system/library-react/table";
+import "@ttdk-design-system/library-react/table/table.css";
+
+export function Example() {
+  return (
+    <Table variant="striped" size="md">
+      <thead>
+        <tr>
+          <th>Kode Faskes</th>
+          <th>Nama Fasilitas</th>
+          <th>Jenis</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>P320101</td>
+          <td>Puskesmas Cibinong</td>
+          <td>Puskesmas</td>
+          <td>Aktif</td>
+        </tr>
+        <tr>
+          <td>RS320102</td>
+          <td>RSUD Ciawi</td>
+          <td>Rumah Sakit</td>
+          <td>Aktif</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Table from "@ttdk-design-system/library-vue/table";
+import "@ttdk-design-system/library-vue/table/table.css";
+</script>
+
+<template>
+  <Table variant="striped" size="md">
+    <thead>
+      <tr>
+        <th>Kode Faskes</th>
+        <th>Nama Fasilitas</th>
+        <th>Jenis</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>P320101</td>
+        <td>Puskesmas Cibinong</td>
+        <td>Puskesmas</td>
+        <td>Aktif</td>
+      </tr>
+      <tr>
+        <td>RS320102</td>
+        <td>RSUD Ciawi</td>
+        <td>Rumah Sakit</td>
+        <td>Aktif</td>
+      </tr>
+    </tbody>
+  </Table>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Table from "@ttdk-design-system/library-svelte/table";
+  import "@ttdk-design-system/library-svelte/table/table.css";
+</script>
+
+<Table variant="striped" size="md">
+  <thead>
+    <tr>
+      <th>Kode Faskes</th>
+      <th>Nama Fasilitas</th>
+      <th>Jenis</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>P320101</td>
+      <td>Puskesmas Cibinong</td>
+      <td>Puskesmas</td>
+      <td>Aktif</td>
+    </tr>
+    <tr>
+      <td>RS320102</td>
+      <td>RSUD Ciawi</td>
+      <td>Rumah Sakit</td>
+      <td>Aktif</td>
+    </tr>
+  </tbody>
+</Table>
+```