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

package/src/web/breadcrumb/breadcrumb.css

@@ -0,0 +1 @@
+.ttdk-breadcrumb{box-sizing:border-box;font-family:var(--ttdk-font-sans);align-items:center;max-width:100%;line-height:1.5;display:flex}.ttdk-breadcrumb[data-size=sm]{font-size:var(--custom-text-size,12px)}.ttdk-breadcrumb[data-size=sm] .ttdk-breadcrumb-list,.ttdk-breadcrumb[data-size=sm] .ttdk-breadcrumb-item{gap:var(--custom-gap,6px)}.ttdk-breadcrumb[data-size=sm] .ttdk-separator-icon{width:12px;height:12px}.ttdk-breadcrumb[data-size=sm] .ttdk-breadcrumb-icon{font-size:13px}.ttdk-breadcrumb[data-size=md]{font-size:var(--custom-text-size,14px)}.ttdk-breadcrumb[data-size=md] .ttdk-breadcrumb-list,.ttdk-breadcrumb[data-size=md] .ttdk-breadcrumb-item{gap:var(--custom-gap,8px)}.ttdk-breadcrumb[data-size=md] .ttdk-separator-icon{width:14px;height:14px}.ttdk-breadcrumb[data-size=md] .ttdk-breadcrumb-icon{font-size:15px}.ttdk-breadcrumb[data-size=lg]{font-size:var(--custom-text-size,16px)}.ttdk-breadcrumb[data-size=lg] .ttdk-breadcrumb-list,.ttdk-breadcrumb[data-size=lg] .ttdk-breadcrumb-item{gap:var(--custom-gap,10px)}.ttdk-breadcrumb[data-size=lg] .ttdk-separator-icon{width:16px;height:16px}.ttdk-breadcrumb[data-size=lg] .ttdk-breadcrumb-icon{font-size:17px}.ttdk-breadcrumb[data-size=lg] .ttdk-breadcrumb-ellipsis{height:24px;padding:0 8px;font-size:15px}.ttdk-breadcrumb-list{flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;display:flex}.ttdk-breadcrumb-item{align-items:center;display:inline-flex}.ttdk-breadcrumb-link{color:var(--custom-link-color,var(--ttdk-ui-color,var(--ttdk-text-icon-secondary)));cursor:pointer;font-family:inherit;font-weight:400;font-size:inherit;line-height:inherit;background:0 0;border:none;align-items:center;gap:4px;padding:0;text-decoration:none;transition:color .15s,opacity .15s;display:inline-flex}.ttdk-breadcrumb-link:hover:not(:disabled){color:var(--ttdk-text-icon-primary);text-underline-offset:2px;text-decoration:underline}.ttdk-breadcrumb-link:focus-visible{box-shadow:0 0 0 2px var(--ttdk-stroke-border-focus);border-radius:2px;outline:none}.ttdk-breadcrumb-link:disabled,.ttdk-breadcrumb-link[data-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.ttdk-breadcrumb-btn{user-select:none}.ttdk-breadcrumb-current{color:var(--custom-current-color,var(--ttdk-ui-color,var(--ttdk-text-icon-primary)));user-select:text;align-items:center;gap:4px;font-weight:600;display:inline-flex}.ttdk-breadcrumb-current[data-disabled=true]{opacity:.45}.ttdk-breadcrumb-separator{color:var(--ttdk-stroke-divider);user-select:none;justify-content:center;align-items:center;font-weight:400;display:inline-flex}.ttdk-separator-char{line-height:1}.ttdk-separator-icon{fill:currentColor;display:block;transform:rotate(270deg)}.ttdk-breadcrumb-label{vertical-align:middle;display:inline-block}.ttdk-breadcrumb-ellipsis{color:var(--ttdk-text-icon-primary);letter-spacing:1.5px;user-select:none;justify-content:center;align-items:center;font-weight:600;line-height:1;display:inline-flex}.ttdk-breadcrumb-slot{margin-left:12px}.dark .ttdk-breadcrumb-link,html.dark .ttdk-breadcrumb-link,[data-mode=dark] .ttdk-breadcrumb-link,[data-theme=dark] .ttdk-breadcrumb-link{color:var(--ttdk-text-icon-secondary)}.dark .ttdk-breadcrumb-link:hover:not(:disabled),html.dark .ttdk-breadcrumb-link:hover:not(:disabled),[data-mode=dark] .ttdk-breadcrumb-link:hover:not(:disabled),[data-theme=dark] .ttdk-breadcrumb-link:hover:not(:disabled),.dark .ttdk-breadcrumb-current,html.dark .ttdk-breadcrumb-current,[data-mode=dark] .ttdk-breadcrumb-current,[data-theme=dark] .ttdk-breadcrumb-current{color:var(--ttdk-text-icon-primary)}.dark .ttdk-breadcrumb-separator,html.dark .ttdk-breadcrumb-separator,[data-mode=dark] .ttdk-breadcrumb-separator,[data-theme=dark] .ttdk-breadcrumb-separator{color:var(--ttdk-stroke-divider)}.dark .ttdk-breadcrumb-ellipsis,html.dark .ttdk-breadcrumb-ellipsis,[data-mode=dark] .ttdk-breadcrumb-ellipsis,[data-theme=dark] .ttdk-breadcrumb-ellipsis{color:var(--ttdk-text-icon-primary)}

package/src/web/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,306 @@
+"use client";
+import * as React from "react";
+
+export interface BreadcrumbItem {
+  /**
+   * Label teks yang ditampilkan pada breadcrumb item.
+   */
+  label: string;
+
+  /**
+   * URL tautan navigasi tujuan (href / path).
+   */
+  href?: string;
+
+  /**
+   * Ikon atau emoji opsional di samping label teks.
+   */
+  icon?: any;
+
+  /**
+   * Menandai item ini secara eksplisit sebagai halaman saat ini (current page).
+   */
+  current?: boolean;
+
+  /**
+   * Menonaktifkan interaksi klik pada item ini.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandai item sebagai representasi ellipsis penyingkat item yang tersembunyi.
+   */
+  isEllipsis?: boolean;
+}
+export type BreadcrumbUiProps = UiProps;
+export type BreadcrumbSeparator = "chevron";
+export interface BreadcrumbProps {
+  /**
+   * Daftar item navigasi breadcrumb dari tingkat teratas hingga halaman saat ini.
+   */
+  items: BreadcrumbItem[];
+
+  /**
+   * Jenis karakter atau ikon pemisah antar item:
+   * - `'arrow'`: Ikon panah kanan `→`.
+   *
+   * @default 'arrow'
+   */
+  separator?: BreadcrumbSeparator;
+
+  /**
+   * Karakter atau string teks khusus untuk pemisah antarelemen.
+   */
+  customSeparator?: string;
+
+  /**
+   * Skala ukuran tampilan breadcrumb:
+   * - `'sm'`: Kompak (12px, gap 6px).
+   * - `'md'`: Standar (14px, gap 8px).
+   * - `'lg'`: Besar (16px, gap 12px).
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Batas maksimum panjang karakter label sebelum dipotong (truncate).
+   * @default 20
+   */
+  maxLabelLength?: number;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Style kustom untuk teks tautan breadcrumb / item non-aktif (UiProps).
+   */
+  textLinkStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks tautan breadcrumb / item non-aktif (Tailwind / class kustom).
+   */
+  textLinkClass?: string;
+
+  /**
+   * Style kustom untuk teks item aktif / halaman saat ini (UiProps).
+   */
+  textActiveStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks item aktif / halaman saat ini (Tailwind / class kustom).
+   */
+  textActiveClass?: string;
+
+  /**
+   * Style kustom untuk karakter atau ikon pemisah (UiProps).
+   */
+  separatorStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk karakter atau ikon pemisah (Tailwind / class kustom).
+   */
+  separatorClass?: string;
+
+  /**
+   * Handler event klik yang dipanggil saat suatu item breadcrumb diklik.
+   *
+   * @param item Data item yang diklik.
+   * @param index Indeks urutan item dalam array.
+   * @param event Objek synthetic DOM event.
+   */
+  onItemClick?: (item: BreadcrumbItem, index: number, event: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Slot konten tambahan di ujung kanan breadcrumb.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Breadcrumb untuk menampilkan hierarki navigasi lokasi halaman saat ini dengan dukungan penyingkatan (collapse ellipsis).
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Breadcrumb(props: BreadcrumbProps) {
+  function formatLabel(label: any) {
+    if (!label && label !== 0) return "";
+    const str = String(label);
+    const max = props.maxLabelLength !== undefined ? props.maxLabelLength : 20;
+    if (max > 0 && str.length > max) {
+      return `${str.slice(0, max)}...`;
+    }
+    return str;
+  }
+
+  function getVisibleItems() {
+    if (!props.items || props.items.length === 0) return [];
+    const total = props.items.length;
+    if (total <= 3) {
+      return props.items;
+    }
+    const before = Math.max(1, Math.min(3, total - 2));
+    const startItems = props.items.slice(0, before);
+    const endItems = props.items.slice(total - 1);
+    const ellipsisItem: BreadcrumbItem = {
+      label: "...",
+      isEllipsis: true,
+    };
+    return [...startItems, ellipsisItem, ...endItems];
+  }
+
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className={`ttdk-breadcrumb ${props.className || ""}`.trim()}
+      data-size={props.size || "md"}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <ol className="ttdk-breadcrumb-list">
+        {getVisibleItems()?.map((item, index) => (
+          <li className="ttdk-breadcrumb-item" key={index}>
+            {item.isEllipsis ? (
+              <span className="ttdk-breadcrumb-ellipsis" aria-hidden="true">
+                ···
+              </span>
+            ) : null}
+            {!item.isEllipsis &&
+            (item.current || index === getVisibleItems().length - 1) ? (
+              <span
+                aria-current="page"
+                className={`ttdk-breadcrumb-current ${
+                  props.textActiveClass || ""
+                }`.trim()}
+                data-disabled={item.disabled ? "true" : "false"}
+                style={{
+                  ...buildUiVars(props.textActiveStyle),
+                }}
+              >
+                {item.icon ? (
+                  <span className="ttdk-breadcrumb-icon">{item.icon}</span>
+                ) : null}
+                <span className="ttdk-breadcrumb-label" title={item.label}>
+                  {formatLabel(item.label)}
+                </span>
+              </span>
+            ) : null}
+            {!item.isEllipsis &&
+            !item.current &&
+            index !== getVisibleItems().length - 1 ? (
+              <>
+                {item.href ? (
+                  <a
+                    href={item.href}
+                    className={`ttdk-breadcrumb-link ${
+                      props.textLinkClass || ""
+                    }`.trim()}
+                    data-disabled={item.disabled ? "true" : "false"}
+                    title={item.label}
+                    style={{
+                      ...buildUiVars(props.textLinkStyle),
+                    }}
+                    onClick={(e) => {
+                      if (item.disabled) {
+                        e.preventDefault();
+                        return;
+                      }
+                      if (props.onItemClick) {
+                        props.onItemClick(item, index, e);
+                      }
+                    }}
+                  >
+                    {item.icon ? (
+                      <span className="ttdk-breadcrumb-icon">{item.icon}</span>
+                    ) : null}
+                    <span className="ttdk-breadcrumb-label">
+                      {formatLabel(item.label)}
+                    </span>
+                  </a>
+                ) : null}
+                {!item.href ? (
+                  <button
+                    type="button"
+                    className={`ttdk-breadcrumb-link ttdk-breadcrumb-btn ${
+                      props.textLinkClass || ""
+                    }`.trim()}
+                    data-disabled={item.disabled ? "true" : "false"}
+                    disabled={item.disabled}
+                    title={item.label}
+                    style={{
+                      ...buildUiVars(props.textLinkStyle),
+                    }}
+                    onClick={(e) => {
+                      if (props.onItemClick) {
+                        props.onItemClick(item, index, e);
+                      }
+                    }}
+                  >
+                    {item.icon ? (
+                      <span className="ttdk-breadcrumb-icon">{item.icon}</span>
+                    ) : null}
+                    <span className="ttdk-breadcrumb-label">
+                      {formatLabel(item.label)}
+                    </span>
+                  </button>
+                ) : null}
+              </>
+            ) : null}
+            {index !== getVisibleItems().length - 1 ? (
+              <span
+                aria-hidden="true"
+                className={`ttdk-breadcrumb-separator ${
+                  props.separatorClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiVars(props.separatorStyle),
+                }}
+              >
+                {props.customSeparator ? (
+                  <span className="ttdk-separator-char">
+                    {props.customSeparator}
+                  </span>
+                ) : null}
+                {!props.customSeparator ? (
+                  <svg
+                    className="ttdk-separator-icon"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 640 640"
+                  >
+                    <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z" />
+                  </svg>
+                ) : null}
+              </span>
+            ) : null}
+          </li>
+        ))}
+      </ol>
+      {props.children ? (
+        <div className="ttdk-breadcrumb-slot">
+          <>{props.children}</>
+        </div>
+      ) : null}
+    </nav>
+  );
+}
+
+export default Breadcrumb;
+
+export { Breadcrumb };

package/src/web/breadcrumb/index.ts

@@ -0,0 +1,3 @@
+export { default as Breadcrumb } from './breadcrumb';
+export { default } from './breadcrumb';
+export * from './breadcrumb'

package/src/web/breadcrumb/manifest.json

@@ -0,0 +1,225 @@
+{
+  "name": "@ttdk-design-system/breadcrumb",
+  "component": "Breadcrumb",
+  "folder": "breadcrumb",
+  "description": "Komponen Breadcrumb untuk menampilkan hierarki navigasi lokasi halaman saat ini dengan dukungan penyingkatan (collapse ellipsis).",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "breadcrumb.css",
+      "importPath": "web/breadcrumb/breadcrumb.css"
+    }
+  ],
+  "props": {
+    "items": {
+      "name": "items",
+      "type": "BreadcrumbItem[]",
+      "optional": false,
+      "default": null,
+      "description": "Daftar item navigasi breadcrumb dari tingkat teratas hingga halaman saat ini.",
+      "example": null,
+      "param": null
+    },
+    "separator": {
+      "name": "separator",
+      "type": "BreadcrumbSeparator",
+      "optional": true,
+      "default": "arrow",
+      "description": "Jenis karakter atau ikon pemisah antar item: - `'arrow'`: Ikon panah kanan `→`.",
+      "example": null,
+      "param": null
+    },
+    "customSeparator": {
+      "name": "customSeparator",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Karakter atau string teks khusus untuk pemisah antarelemen.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran tampilan breadcrumb: - `'sm'`: Kompak (12px, gap 6px). - `'md'`: Standar (14px, gap 8px). - `'lg'`: Besar (16px, gap 12px).",
+      "example": null,
+      "param": null
+    },
+    "maxLabelLength": {
+      "name": "maxLabelLength",
+      "type": "number",
+      "optional": true,
+      "default": "20",
+      "description": "Batas maksimum panjang karakter label sebelum dipotong (truncate).",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "textLinkStyle": {
+      "name": "textLinkStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks tautan breadcrumb / item non-aktif (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "textLinkClass": {
+      "name": "textLinkClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks tautan breadcrumb / item non-aktif (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "textActiveStyle": {
+      "name": "textActiveStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks item aktif / halaman saat ini (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "textActiveClass": {
+      "name": "textActiveClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks item aktif / halaman saat ini (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "separatorStyle": {
+      "name": "separatorStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk karakter atau ikon pemisah (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "separatorClass": {
+      "name": "separatorClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk karakter atau ikon pemisah (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "onItemClick": {
+      "name": "onItemClick",
+      "type": "(item: BreadcrumbItem, index: number, event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Handler event klik yang dipanggil saat suatu item breadcrumb diklik.",
+      "example": null,
+      "param": "event Objek synthetic DOM event."
+    },
+    "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": "Slot konten tambahan di ujung kanan breadcrumb.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "BreadcrumbItem": {
+      "label": {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Label teks yang ditampilkan pada breadcrumb item.",
+        "example": null,
+        "param": null
+      },
+      "href": {
+        "name": "href",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "URL tautan navigasi tujuan (href / path).",
+        "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
+      },
+      "current": {
+        "name": "current",
+        "type": "boolean",
+        "optional": true,
+        "default": null,
+        "description": "Menandai item ini secara eksplisit sebagai halaman saat ini (current page).",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menonaktifkan interaksi klik pada item ini.",
+        "example": null,
+        "param": null
+      },
+      "isEllipsis": {
+        "name": "isEllipsis",
+        "type": "boolean",
+        "optional": true,
+        "default": null,
+        "description": "Menandai item sebagai representasi ellipsis penyingkat item yang tersembunyi.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/button/AI_GUIDE.md

@@ -0,0 +1,121 @@
+# <Button /> — TTDK Component Reference
+
+TTDK Button component with multi-theme support.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/button/button.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Button from "@ttdk-design-system/library-react/web/button";
+
+// Vue 3
+import Button from "@ttdk-design-system/library-vue/web/button";
+
+// Svelte
+import Button from "@ttdk-design-system/library-svelte/web/button";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `style?` | `any` | `-` | Inline CSS style kustom. |
+| `variant?` | `| 'primary'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'neutral'
+  | 'disabled'` | `primary` | Varian warna semantik tombol: - `'primary'`: Teal utama. - `'info'`: Biru informasi. - `'warning'`: Kuning peringatan. - `'danger'`: Merah bahaya. - `'neutral'`: Abu-abu netral. - `'disabled'`: Tombol non-aktif. |
+| `appearance?` | `'solid' | 'soft' | 'outline' | 'link' | 'ghost'` | `solid` | Gaya tampilan visual tombol: - `'solid'`: Latar belakang warna solid pekat (default). - `'soft'`: Latar belakang warna transparan lembut. - `'outline'`: Garis tepi dengan latar belakang transparan. - `'link'`: Teks tautan tanpa border/latar, dengan garis bawah saat hover. - `'ghost'`: Transparan tanpa outline/border, dengan latar lembut saat hover. |
+| `type?` | `'button' | 'submit' | 'reset'` | `button` | Tipe tombol HTML native. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran tombol: - `'sm'`: 36px - `'md'`: 48px (standar) - `'lg'`: 56px |
+| `negative?` | `boolean` | `false` | Mode negatif — kontras tinggi di atas latar gelap. |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Radius sudut tombol. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar) - `'lg'`: 12px - `'full'`: 9999px (pill) |
+| `iconOnly?` | `boolean` | `false` | Mode tombol ikon persegi (aspek rasio 1:1). |
+| `block?` | `boolean` | `false` | Full-width — melebar 100% dari container. |
+| `loading?` | `boolean` | `false` | Tampilkan spinner & nonaktifkan tombol saat proses async. |
+| `disabled?` | `boolean` | `false` | Nonaktifkan tombol dari interaksi pengguna. |
+| `iconColor?` | `string` | `-` | Warna kustom untuk ikon di dalam tombol (misal: '#fff', '#0968F6'). |
+| `iconSize?` | `string` | `-` | Ukuran kustom untuk ikon di dalam tombol (misal: '16px', '20px'). |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual — seperti style object tapi dengan support pseudo-class. ```tsx <Button ui={{ background: '#7c3aed', color: 'white', borderRadius: '99px', hover: { background: '#6d28d9', transform: 'scale(1.02)', }, active: { opacity: '0.9', } }} /> ``` |
+| `onClick?` | `(event?: any) => void` | `-` | Event handler saat tombol diklik. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Konten tombol — teks, ikon, atau JSX. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Button from "@ttdk-design-system/library-react/web/button";
+import "@ttdk-design-system/library-react/web/button/button.css";
+
+export function Example() {
+  return (
+    <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+      <Button variant="primary" onClick={() => alert("Simpan data")}>
+        Simpan
+      </Button>
+      <Button variant="secondary">
+        Batal
+      </Button>
+      <Button variant="outline">
+        Ekspor CSV
+      </Button>
+      <Button variant="danger">
+        Hapus
+      </Button>
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Button from "@ttdk-design-system/library-vue/web/button";
+import "@ttdk-design-system/library-vue/web/button/button.css";
+</script>
+
+<template>
+  <div style="display: flex; gap: 10px; align-items: center;">
+    <Button variant="primary" @click="() => alert('Simpan data')">
+      Simpan
+    </Button>
+    <Button variant="secondary">
+      Batal
+    </Button>
+    <Button variant="outline">
+      Ekspor CSV
+    </Button>
+    <Button variant="danger">
+      Hapus
+    </Button>
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Button from "@ttdk-design-system/library-svelte/web/button";
+  import "@ttdk-design-system/library-svelte/web/button/button.css";
+</script>
+
+<div style="display: flex; gap: 10px; align-items: center;">
+  <Button variant="primary" on:click={() => alert('Simpan data')}>
+    Simpan
+  </Button>
+  <Button variant="secondary">
+    Batal
+  </Button>
+  <Button variant="outline">
+    Ekspor CSV
+  </Button>
+  <Button variant="danger">
+    Hapus
+  </Button>
+</div>
+```