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

package/dist/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/dist/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/dist/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/dist/web/button/button.svelte

@@ -0,0 +1,154 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let type = void 0;
+export let variant = void 0;
+export let appearance = void 0;
+export let size = void 0;
+export let negative = void 0;
+export let rounded = void 0;
+export let iconOnly = void 0;
+export let block = void 0;
+export let loading = void 0;
+export let disabled = void 0;
+export let ui = void 0;
+export let iconColor = void 0;
+export let iconSize = void 0;
+const dispatch = createEventDispatcher();
+export let onClick = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<button
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    ...(iconColor
+      ? {
+          "--ttdk-ui-icon-color": iconColor,
+        }
+      : {}),
+    ...(iconSize
+      ? {
+          "--ttdk-ui-icon-size": iconSize,
+        }
+      : {}),
+    })}
+  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}
+  on:click={(event) => {
+    onClick?.(event);
+    dispatch("click", event);
+  }}
+>
+  {#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
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.25"
+          transform="rotate(30 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.325"
+          transform="rotate(60 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.4"
+          transform="rotate(90 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.475"
+          transform="rotate(120 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.55"
+          transform="rotate(150 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.625"
+          transform="rotate(180 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.7"
+          transform="rotate(210 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.775"
+          transform="rotate(240 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.85"
+          transform="rotate(270 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="0.925"
+          transform="rotate(300 12 12)"
+        /><line
+          x1="12"
+          y1="2.5"
+          x2="12"
+          y2="6.5"
+          opacity="1"
+          transform="rotate(330 12 12)"
+        /></svg
+      ></span
+    >
+  {/if}<slot /></button
+>