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

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>
+```

package/src/web/button/button.css

@@ -0,0 +1 @@
+.ttdk-button{box-sizing:border-box;font-family:var(--ttdk-font-sans);font-weight:var(--ttdk-ui-font-weight,600);font-size:var(--ttdk-ui-font-size,inherit);cursor:pointer;user-select:none;white-space:nowrap;vertical-align:middle;transition:var(--ttdk-ui-transition,background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease, opacity .1s ease);border-style:solid;border-width:var(--ttdk-ui-border-width,1px);border-color:var(--ttdk-ui-border-color,transparent);border-radius:var(--ttdk-ui-border-radius,initial);outline:var(--ttdk-ui-outline,none);padding:var(--ttdk-ui-padding,initial);height:var(--ttdk-ui-height,initial);min-height:var(--ttdk-ui-min-height,initial);width:var(--ttdk-ui-width,initial);min-width:var(--ttdk-ui-min-width,initial);box-shadow:var(--ttdk-ui-box-shadow,none);opacity:var(--ttdk-ui-opacity,1);filter:var(--ttdk-ui-filter,none);transform:var(--ttdk-ui-transform,none);justify-content:center;align-items:center;gap:8px;text-decoration:none;display:inline-flex;&:hover:not(:disabled)[style*=--ttdk-ui-hover-background]{background:var(--ttdk-ui-hover-background)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-color]{color:var(--ttdk-ui-hover-color)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-border-color]{border-color:var(--ttdk-ui-hover-border-color)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-transform]{transform:var(--ttdk-ui-hover-transform)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-opacity]{opacity:var(--ttdk-ui-hover-opacity)!important}&:hover:not(:disabled)[style*=--ttdk-ui-hover-box-shadow]{box-shadow:var(--ttdk-ui-hover-box-shadow)!important}&:active:not(:disabled)[style*=--ttdk-ui-active-background]{background:var(--ttdk-ui-active-background)!important}&:active:not(:disabled)[style*=--ttdk-ui-active-color]{color:var(--ttdk-ui-active-color)!important}&:active:not(:disabled)[style*=--ttdk-ui-active-transform]{transform:var(--ttdk-ui-active-transform)!important}&:active:not(:disabled)[style*=--ttdk-ui-active-opacity]{opacity:var(--ttdk-ui-active-opacity)!important}&:focus-visible[style*=--ttdk-ui-focus-outline]{outline:var(--ttdk-ui-focus-outline)!important}&:focus-visible[style*=--ttdk-ui-focus-box-shadow]{box-shadow:var(--ttdk-ui-focus-box-shadow)!important}& svg,& .ttdk-icon{color:var(--ttdk-ui-icon-color,currentColor);width:var(--ttdk-ui-icon-size,1em);height:var(--ttdk-ui-icon-size,1em)}&[data-appearance=solid][data-variant=primary],&[data-variant=primary]:not([data-appearance]){background-color:var(--ttdk-brand-default);color:var(--ttdk-color-white);border-color:var(--ttdk-brand-default);&:hover:not(:disabled){background-color:var(--ttdk-brand-strong);border-color:var(--ttdk-brand-strong);color:var(--ttdk-color-white)}}&[data-appearance=solid][data-variant=info],&[data-variant=info]:not([data-appearance]){background-color:var(--ttdk-bg-status-info);color:var(--ttdk-color-white);border-color:var(--ttdk-bg-status-info);&:hover:not(:disabled){background-color:var(--ttdk-bg-status-info-strong);border-color:var(--ttdk-bg-status-info-strong);color:var(--ttdk-color-white)}}&[data-appearance=solid][data-variant=warning],&[data-variant=warning]:not([data-appearance]){background-color:var(--ttdk-bg-status-warning);color:var(--ttdk-color-black);border-color:var(--ttdk-bg-status-warning);&:hover:not(:disabled){background-color:var(--ttdk-bg-status-warning-strong);border-color:var(--ttdk-bg-status-warning-strong);color:var(--ttdk-color-white)}}&[data-appearance=solid][data-variant=danger],&[data-variant=danger]:not([data-appearance]){background-color:var(--ttdk-bg-status-error);color:var(--ttdk-color-white);border-color:var(--ttdk-bg-status-error);&:hover:not(:disabled){background-color:var(--ttdk-bg-status-error-strong);border-color:var(--ttdk-bg-status-error-strong);color:var(--ttdk-color-white)}}&[data-appearance=solid][data-variant=neutral],&[data-variant=neutral]:not([data-appearance]){background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){background-color:var(--ttdk-stroke-divider);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}}&[data-appearance=solid][data-variant=disabled],&[data-variant=disabled]:not([data-appearance]){background-color:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important}&[data-appearance=soft][data-variant=primary]{background-color:var(--ttdk-brand-subtle);border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);&:hover:not(:disabled){background-color:var(--ttdk-color-brand-green-100);border-color:var(--ttdk-brand-strong);color:var(--ttdk-brand-strong)}}&[data-appearance=soft][data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info);&:hover:not(:disabled){border-color:var(--ttdk-text-icon-status-info-strong);color:var(--ttdk-text-icon-status-info-strong);background-color:#2196f333}}&[data-appearance=soft][data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning);&:hover:not(:disabled){border-color:var(--ttdk-text-icon-status-warning-strong);color:var(--ttdk-text-icon-status-warning-strong);background-color:#fb8c0033}}&[data-appearance=soft][data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error);&:hover:not(:disabled){border-color:var(--ttdk-text-icon-status-error-strong);color:var(--ttdk-text-icon-status-error-strong);background-color:#d0021b33}}&[data-appearance=soft][data-variant=neutral]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){background-color:var(--ttdk-stroke-divider);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}}&[data-appearance=soft][data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important}&[data-appearance=outline][data-variant=primary]{border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-brand-subtle);border-color:var(--ttdk-brand-strong);color:var(--ttdk-brand-strong)}}&[data-appearance=outline][data-variant=info]{border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-text-icon-status-info-strong);color:var(--ttdk-text-icon-status-info-strong)}}&[data-appearance=outline][data-variant=warning]{border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-text-icon-status-warning-strong);color:var(--ttdk-text-icon-status-warning-strong)}}&[data-appearance=outline][data-variant=danger]{border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-text-icon-status-error-strong);color:var(--ttdk-text-icon-status-error-strong)}}&[data-appearance=outline][data-variant=neutral]{border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary);background-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}}&[data-appearance=outline][data-variant=disabled]{border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;background-color:#0000!important}&[data-appearance=link][data-variant=primary]{color:var(--ttdk-brand-default);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-brand-strong);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=info]{color:var(--ttdk-text-icon-status-info);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-info-strong);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=warning]{color:var(--ttdk-text-icon-status-warning);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-warning-strong);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=danger]{color:var(--ttdk-text-icon-status-error);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-error-strong);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=neutral]{color:var(--ttdk-text-icon-primary);text-underline-offset:4px;background-color:#0000;border-color:#0000;text-decoration:none;&:hover:not(:disabled){color:var(--ttdk-text-icon-secondary);background-color:#0000;text-decoration:underline}}&[data-appearance=link][data-variant=disabled]{color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;background-color:#0000!important;border-color:#0000!important;text-decoration:none!important}&[data-appearance=ghost][data-variant=primary]{color:var(--ttdk-brand-default);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-brand-subtle);color:var(--ttdk-brand-strong);border-color:#0000}&:active:not(:disabled){background-color:var(--ttdk-color-brand-green-100);color:var(--ttdk-brand-strong);border-color:#0000}}&[data-appearance=ghost][data-variant=info]{color:var(--ttdk-text-icon-status-info);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-info-subtle);color:var(--ttdk-text-icon-status-info-strong);border-color:#0000}&:active:not(:disabled){color:var(--ttdk-text-icon-status-info-strong);background-color:#2196f333;border-color:#0000}}&[data-appearance=ghost][data-variant=warning]{color:var(--ttdk-text-icon-status-warning);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-warning-subtle);color:var(--ttdk-text-icon-status-warning-strong);border-color:#0000}&:active:not(:disabled){color:var(--ttdk-text-icon-status-warning-strong);background-color:#fb8c0033;border-color:#0000}}&[data-appearance=ghost][data-variant=danger]{color:var(--ttdk-text-icon-status-error);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-status-error-subtle);color:var(--ttdk-text-icon-status-error-strong);border-color:#0000}&:active:not(:disabled){color:var(--ttdk-text-icon-status-error-strong);background-color:#d0021b33;border-color:#0000}}&[data-appearance=ghost][data-variant=neutral]{color:var(--ttdk-text-icon-primary);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary);border-color:#0000}&:active:not(:disabled){background-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary);border-color:#0000}}&[data-appearance=ghost][data-variant=disabled]{color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;background-color:#0000!important;border-color:#0000!important}&[data-size=small],&[data-size=sm]{border-radius:var(--ttdk-radius-xs,6px);gap:6px;height:36px;padding:0 12px;font-size:12px;line-height:16px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:16px;height:16px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,16px)!important;height:var(--ttdk-ui-icon-size,16px)!important}}&[data-size=medium],&[data-size=md]{border-radius:var(--ttdk-radius-sm,8px);gap:8px;height:48px;padding:0 16px;font-size:16px;line-height:24px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:20px;height:20px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,20px)!important;height:var(--ttdk-ui-icon-size,20px)!important}}&[data-size=large],&[data-size=lg]{border-radius:var(--ttdk-radius-sm,8px);gap:8px;height:56px;padding:0 20px;font-size:18px;line-height:26px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:24px;height:24px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,24px)!important;height:var(--ttdk-ui-icon-size,24px)!important}}&[data-size=xs]{border-radius:var(--ttdk-radius-xs,4px);gap:4px;height:28px;padding:0 8px;font-size:11px;line-height:16px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:14px;height:14px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,14px)!important;height:var(--ttdk-ui-icon-size,14px)!important}}&[data-size=xl]{border-radius:var(--ttdk-radius-sm,8px);gap:8px;height:48px;padding:0 16px;font-size:16px;line-height:24px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:20px;height:20px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,20px)!important;height:var(--ttdk-ui-icon-size,20px)!important}}&[data-size="2xl"]{border-radius:var(--ttdk-radius-sm,8px);gap:10px;height:56px;padding:0 24px;font-size:18px;line-height:26px;&>svg,&>span:not(.ttdk-button-spinner)>svg{width:24px;height:24px}& .ttdk-button-spinner,& .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,24px)!important;height:var(--ttdk-ui-icon-size,24px)!important}}&[data-icon-only=true]{aspect-ratio:1;justify-content:center;padding:0}&[data-block=true]{width:100%}&[data-underline=none],&[data-appearance=link][data-underline=none]{text-decoration:none!important;&:hover:not(:disabled){text-decoration:none!important}}&[data-underline=always]{text-decoration:underline!important}&>svg,&>span:not(.ttdk-button-spinner)>svg{pointer-events:none;flex-shrink:0}& .ttdk-button-spinner{width:var(--ttdk-ui-icon-size,20px);height:var(--ttdk-ui-icon-size,20px);flex-shrink:0;justify-content:center;align-items:center;line-height:1;animation:1.2s steps(12,end) infinite ttdk-button-spin;display:inline-flex}& .ttdk-button-spinner svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;display:block;width:100%!important;height:100%!important}&[data-size=xs] .ttdk-button-spinner,&[data-size=xs] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,14px)!important;height:var(--ttdk-ui-icon-size,14px)!important}&[data-size=small] .ttdk-button-spinner,&[data-size=sm] .ttdk-button-spinner,&[data-size=small] .ttdk-button-spinner svg,&[data-size=sm] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,16px)!important;height:var(--ttdk-ui-icon-size,16px)!important}&[data-size=medium] .ttdk-button-spinner,&[data-size=md] .ttdk-button-spinner,&[data-size=medium] .ttdk-button-spinner svg,&[data-size=md] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,20px)!important;height:var(--ttdk-ui-icon-size,20px)!important}&[data-size=large] .ttdk-button-spinner,&[data-size=lg] .ttdk-button-spinner,&[data-size=large] .ttdk-button-spinner svg,&[data-size=lg] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,24px)!important;height:var(--ttdk-ui-icon-size,24px)!important}&[data-size=xl] .ttdk-button-spinner,&[data-size=xl] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,20px)!important;height:var(--ttdk-ui-icon-size,20px)!important}&[data-size="2xl"] .ttdk-button-spinner,&[data-size="2xl"] .ttdk-button-spinner svg{width:var(--ttdk-ui-icon-size,24px)!important;height:var(--ttdk-ui-icon-size,24px)!important}&:active:not(:disabled){scale:.98}&:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--ttdk-brand-default) 30%, transparent);outline:none}&[data-variant=danger]:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--ttdk-bg-status-error) 30%, transparent)}&:disabled:not([data-loading=true]),&[disabled]:not([data-loading=true]),&[data-disabled=true]:not([data-loading=true]){pointer-events:none;background-color:var(--ttdk-bg-secondary-disabled)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;box-shadow:none!important;border-color:#0000!important}&[data-loading=true]{pointer-events:none;cursor:wait!important}&[data-loading=true][data-icon-only=true]>:not(.ttdk-button-spinner){display:none}}.ttdk-button[data-rounded=none]{border-radius:0}.ttdk-button[data-rounded=sm]{border-radius:4px}.ttdk-button[data-rounded=md]{border-radius:6px}.ttdk-button[data-rounded=lg]{border-radius:8px}.ttdk-button[data-rounded=full]{border-radius:9999px}.dark .ttdk-button,html.dark .ttdk-button,[data-mode=dark] .ttdk-button,[data-theme=dark] .ttdk-button{&[data-appearance=solid][data-variant=neutral],&[data-variant=neutral]:not([data-appearance]){background-color:var(--ttdk-bg-stay-black);border-color:var(--ttdk-bg-stay-black);color:var(--ttdk-text-icon-stay-white);&:hover:not(:disabled){color:var(--ttdk-text-icon-stay-white);background-color:#2f2f2f;border-color:#2f2f2f}}&[data-appearance=soft][data-variant=neutral]{background-color:var(--ttdk-color-neutral-900);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){background-color:var(--ttdk-color-neutral-800);border-color:var(--ttdk-stroke-stay-white);color:var(--ttdk-text-icon-primary)}}&[data-appearance=outline][data-variant=neutral]{background-color:var(--ttdk-bg-stay-black);border-color:var(--ttdk-stroke-stay-white);color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){color:var(--ttdk-text-icon-primary);background-color:#ffffff14}}&[data-appearance=link][data-variant=neutral]{color:var(--ttdk-text-icon-primary);&:hover:not(:disabled){color:var(--ttdk-text-icon-stay-white)}}&[data-appearance=soft][data-variant=primary]{background-color:var(--ttdk-brand-subtle-dark);border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);&:hover:not(:disabled){border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);background-color:#16b3ac40}}&[data-appearance=outline][data-variant=primary]{border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default);background-color:#0000;&:hover:not(:disabled){background-color:#16b3ac26}}&[data-appearance=soft][data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info);&:hover:not(:disabled){background-color:#2196f340}}&[data-appearance=soft][data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning);&:hover:not(:disabled){background-color:#fb8c0040}}&[data-appearance=soft][data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error);&:hover:not(:disabled){background-color:#d0021b40}}&[data-appearance=ghost][data-variant=primary]{color:var(--ttdk-brand-default);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-brand-subtle-dark);color:var(--ttdk-brand-default);border-color:#0000}}&[data-appearance=ghost][data-variant=neutral]{color:var(--ttdk-text-icon-primary);background-color:#0000;border-color:#0000;&:hover:not(:disabled){background-color:var(--ttdk-color-neutral-800);color:var(--ttdk-text-icon-primary);border-color:#0000}}&[data-appearance=ghost][data-variant=info]{color:var(--ttdk-text-icon-status-info);background-color:#0000;border-color:#0000;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-info);background-color:#2196f340;border-color:#0000}}&[data-appearance=ghost][data-variant=warning]{color:var(--ttdk-text-icon-status-warning);background-color:#0000;border-color:#0000;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-warning);background-color:#fb8c0040;border-color:#0000}}&[data-appearance=ghost][data-variant=danger]{color:var(--ttdk-text-icon-status-error);background-color:#0000;border-color:#0000;&:hover:not(:disabled){color:var(--ttdk-text-icon-status-error);background-color:#d0021b40;border-color:#0000}}&[data-appearance=solid][data-variant=primary],&[data-variant=primary]:not([data-appearance]),&[data-appearance=solid][data-variant=info],&[data-variant=info]:not([data-appearance]),&[data-appearance=solid][data-variant=danger],&[data-variant=danger]:not([data-appearance]){color:#fff;&:hover:not(:disabled){color:#fff}}&[data-appearance=solid][data-variant=warning],&[data-variant=warning]:not([data-appearance]){color:var(--ttdk-color-black);&:hover:not(:disabled){color:var(--ttdk-color-black)}}&[data-appearance=solid][data-variant=warning]:hover:not(:disabled),&[data-variant=warning]:not([data-appearance]):hover:not(:disabled){background-color:var(--ttdk-bg-status-warning-strong)}&[data-appearance=solid][data-variant=info]:hover:not(:disabled),&[data-variant=info]:not([data-appearance]):hover:not(:disabled){background-color:var(--ttdk-bg-status-info-strong)}&[data-appearance=solid][data-variant=danger]:hover:not(:disabled),&[data-variant=danger]:not([data-appearance]):hover:not(:disabled){background-color:var(--ttdk-bg-status-error-strong)}&:disabled:not([data-loading=true]),&[disabled]:not([data-loading=true]),&[data-disabled=true]:not([data-loading=true]),&[data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled)!important;color:var(--ttdk-text-icon-disabled)!important;border-color:#0000!important}}[data-sonner-toasters]{font-family:var(--ttdk-font-sans);-webkit-font-smoothing:antialiased}@keyframes ttdk-button-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/src/web/button/button.vue

@@ -0,0 +1,283 @@
+<template>
+  <button
+    :class="`ttdk-button ${className || ''}`.trim()"
+    :type="type || 'button'"
+    :data-variant="variant || 'primary'"
+    :data-appearance="appearance || 'solid'"
+    :data-size="size || 'md'"
+    :data-negative="negative ? 'true' : undefined"
+    :data-rounded="rounded"
+    :data-icon-only="iconOnly"
+    :data-block="block ? 'true' : undefined"
+    :data-loading="loading ? 'true' : undefined"
+    :disabled="disabled || variant === 'disabled' || loading"
+    :style="{
+      ...buildUiVars(ui),
+      ...(iconColor
+        ? {
+            '--ttdk-ui-icon-color': iconColor,
+          }
+        : {}),
+      ...(iconSize
+        ? {
+            '--ttdk-ui-icon-size': iconSize,
+          }
+        : {}),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+    @click="
+      async (event) => {
+        onClick?.(event);
+      }
+    "
+  >
+    <template v-if="loading">
+      <span class="ttdk-button-spinner" aria-hidden="true"
+        ><svg 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
+      ></span>
+    </template>
+
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type ButtonUiProps = UiProps;
+export interface ButtonProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+
+  /**
+   * Varian warna semantik tombol:
+   * - `'primary'`: Teal utama.
+   * - `'info'`: Biru informasi.
+   * - `'warning'`: Kuning peringatan.
+   * - `'danger'`: Merah bahaya.
+   * - `'neutral'`: Abu-abu netral.
+   * - `'disabled'`: Tombol non-aktif.
+   *
+   * @default 'primary'
+   */
+  variant?: "primary" | "info" | "warning" | "danger" | "neutral" | "disabled";
+
+  /**
+   * 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.
+   *
+   * @default 'solid'
+   */
+  appearance?: "solid" | "soft" | "outline" | "link" | "ghost";
+
+  /**
+   * Tipe tombol HTML native.
+   * @default 'button'
+   */
+  type?: "button" | "submit" | "reset";
+
+  /**
+   * Skala ukuran tombol:
+   * - `'sm'`: 36px
+   * - `'md'`: 48px (standar)
+   * - `'lg'`: 56px
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Mode negatif — kontras tinggi di atas latar gelap.
+   * @default false
+   */
+  negative?: boolean;
+
+  /**
+   * Radius sudut tombol.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (pill)
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Mode tombol ikon persegi (aspek rasio 1:1).
+   * @default false
+   */
+  iconOnly?: boolean;
+
+  /**
+   * Full-width — melebar 100% dari container.
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Tampilkan spinner & nonaktifkan tombol saat proses async.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Nonaktifkan tombol dari interaksi pengguna.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Warna kustom untuk ikon di dalam tombol (misal: '#fff', '#0968F6').
+   */
+  iconColor?: string;
+
+  /**
+   * Ukuran kustom untuk ikon di dalam tombol (misal: '16px', '20px').
+   */
+  iconSize?: string;
+
+  /**
+   * Kustomisasi visual — seperti style object tapi dengan support pseudo-class.
+   *
+   * @example
+   * ```tsx
+   * <Button
+   *   ui={{
+   *     background: '#7c3aed',
+   *     color: 'white',
+   *     borderRadius: '99px',
+   *     hover: {
+   *       background: '#6d28d9',
+   *       transform: 'scale(1.02)',
+   *     },
+   *     active: {
+   *       opacity: '0.9',
+   *     }
+   *   }}
+   * />
+   * ```
+   */
+  ui?: UiProps;
+
+  /**
+   * Event handler saat tombol diklik.
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten tombol — teks, ikon, atau JSX.
+   */
+  children?: any;
+}
+
+const props = defineProps<ButtonProps>();
+</script>

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

@@ -0,0 +1,147 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type ButtonUiProps = UiProps;
+
+export interface ButtonProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: any;
+
+  /**
+   * Varian warna semantik tombol:
+   * - `'primary'`: Teal utama.
+   * - `'info'`: Biru informasi.
+   * - `'warning'`: Kuning peringatan.
+   * - `'danger'`: Merah bahaya.
+   * - `'neutral'`: Abu-abu netral.
+   * - `'disabled'`: Tombol non-aktif.
+   *
+   * @default 'primary'
+   */
+  variant?: "primary" | "info" | "warning" | "danger" | "neutral" | "disabled";
+
+  /**
+   * 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.
+   *
+   * @default 'solid'
+   */
+  appearance?: "solid" | "soft" | "outline" | "link" | "ghost";
+
+  /**
+   * Tipe tombol HTML native.
+   * @default 'button'
+   */
+  type?: "button" | "submit" | "reset";
+
+  /**
+   * Skala ukuran tombol:
+   * - `'sm'`: 36px
+   * - `'md'`: 48px (standar)
+   * - `'lg'`: 56px
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Mode negatif — kontras tinggi di atas latar gelap.
+   * @default false
+   */
+  negative?: boolean;
+
+  /**
+   * Radius sudut tombol.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (pill)
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Mode tombol ikon persegi (aspek rasio 1:1).
+   * @default false
+   */
+  iconOnly?: boolean;
+
+  /**
+   * Full-width — melebar 100% dari container.
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Tampilkan spinner & nonaktifkan tombol saat proses async.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Nonaktifkan tombol dari interaksi pengguna.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Warna kustom untuk ikon di dalam tombol (misal: '#fff', '#0968F6').
+   */
+  iconColor?: string;
+
+  /**
+   * Ukuran kustom untuk ikon di dalam tombol (misal: '16px', '20px').
+   */
+  iconSize?: string;
+
+  /**
+   * Kustomisasi visual — seperti style object tapi dengan support pseudo-class.
+   *
+   * @example
+   * ```tsx
+   * <Button
+   *   ui={{
+   *     background: '#7c3aed',
+   *     color: 'white',
+   *     borderRadius: '99px',
+   *     hover: {
+   *       background: '#6d28d9',
+   *       transform: 'scale(1.02)',
+   *     },
+   *     active: {
+   *       opacity: '0.9',
+   *     }
+   *   }}
+   * />
+   * ```
+   */
+  ui?: UiProps;
+
+  /**
+   * Event handler saat tombol diklik.
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten tombol — teks, ikon, atau JSX.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<ButtonProps>;
+export default component;

package/src/web/button/index.ts

@@ -0,0 +1,3 @@
+export { default } from './button.vue';
+export { default as Button } from './button.vue';
+export * from './button.vue';