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

package/src/web/avatar/AI_GUIDE.md

@@ -0,0 +1,118 @@
+# <Avatar /> — TTDK Component Reference
+
+Komponen Avatar untuk menampilkan foto profil, inisial nama, atau ikon pengguna.
+
+## 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/avatar/avatar.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Avatar from "@ttdk-design-system/library-react/web/avatar";
+
+// Vue 3
+import Avatar from "@ttdk-design-system/library-vue/web/avatar";
+
+// Svelte
+import Avatar from "@ttdk-design-system/library-svelte/web/avatar";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `src?` | `string` | `-` | URL gambar profil avatar. Jika kosong atau gagal dimuat, tampilan otomatis beralih ke `initials` atau ikon pengguna bawaan. |
+| `alt?` | `string` | `-` | Teks alternatif (alt) untuk elemen gambar avatar. |
+| `initials?` | `string` | `-` | Teks inisial pengguna yang ditampilkan di dalam lingkaran avatar (misal: "NA", "SR"). Ditampilkan apabila `src` tidak tersedia atau gagal dimuat. |
+| `size?` | `'xs' | 'sm' | 'md' | 'lg' | 'xl'` | `md` | Skala ukuran avatar: - `'xs'`: Lingkaran 28px. - `'sm'`: Lingkaran 32px. - `'md'`: Lingkaran 40px (standar). - `'lg'`: Lingkaran 48px. - `'xl'`: Lingkaran 56px. |
+| `variant?` | `'info' | 'primary' | 'success' | 'warning' | 'danger' | 'neutral'` | `info` | Varian warna semantik untuk latar & teks/ikon fallback avatar: - `'info'`: Biru informasi sesuai standar profil (default). - `'primary'`: Brand Teal utama. - `'success'`: Hijau sukses. - `'warning'`: Kuning / amber peringatan. - `'danger'`: Merah bahaya. - `'neutral'`: Abu-abu netral. |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `full` | Sudut kelengkungan lingkaran avatar: - `'full'`: Lingkaran penuh 9999px (default). - `'lg'`: Radius membulat 12px. - `'md'`: Radius sedang 8px. - `'sm'`: Radius halus 4px. - `'none'`: Persegi tajam 0px. |
+| `status?` | `'online' | 'offline' | 'verified'` | `-` | Indikator status kehadiran atau verifikasi di pojok kanan bawah lingkaran avatar: - `'online'`: Titik hijau status aktif. - `'offline'`: Titik abu-abu status luring. - `'verified'`: Lencana perisai biru terverifikasi. |
+| `icon?` | `any` | `-` | Ikon kustom untuk menggantikan ikon pengguna bawaan saat `src` dan `initials` tidak diisi. |
+| `iconColor?` | `string` | `-` | Warna kustom untuk ikon di dalam avatar. |
+| `interactive?` | `boolean` | `false` | Menjadikan komponen avatar interaktif (memiliki efek hover & fokus keyboard). |
+| `disabled?` | `boolean` | `false` | Menonaktifkan interaksi klik pada avatar. |
+| `onClick?` | `(event?: any) => void` | `-` | Event handler saat komponen avatar diklik. |
+| `onImageError?` | `(event?: any) => void` | `-` | Event handler saat gambar `src` gagal dimuat. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular pada elemen root melalui style-like object (+ support pseudo-class: hover, active). |
+| `style?` | `any` | `-` | Inline CSS style object native pada elemen root. |
+| `imageStyle?` | `UiProps` | `-` | Style kustom untuk elemen gambar `<img>` di dalam avatar (UiProps). |
+| `imageClass?` | `string` | `-` | Class CSS kustom untuk elemen gambar `<img>`. |
+| `className?` | `string` | `-` | Class CSS kustom pada elemen root. |
+| `children?` | `any` | `-` | Slot konten tambahan atau pengganti ikon di dalam avatar. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Avatar from "@ttdk-design-system/library-react/web/avatar";
+import "@ttdk-design-system/library-react/web/avatar/avatar.css";
+
+export function Example() {
+  return (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Avatar
+        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&h=160&fit=crop&crop=faces"
+        alt="Olivia"
+        size="md"
+      />
+      <Avatar
+        size="md"
+      />
+      <Avatar
+        initials="NA"
+        size="md"
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Avatar from "@ttdk-design-system/library-vue/web/avatar";
+import "@ttdk-design-system/library-vue/web/avatar/avatar.css";
+</script>
+
+<template>
+  <div style="display: flex; gap: 16px; align-items: center;">
+    <Avatar
+      src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&h=160&fit=crop&crop=faces"
+      alt="Olivia"
+      size="md"
+    />
+    <Avatar
+      size="md"
+    />
+    <Avatar
+      initials="NA"
+      size="md"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Avatar from "@ttdk-design-system/library-svelte/web/avatar";
+  import "@ttdk-design-system/library-svelte/web/avatar/avatar.css";
+</script>
+
+<div style="display: flex; gap: 16px; align-items: center;">
+  <Avatar
+    src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&h=160&fit=crop&crop=faces"
+    alt="Olivia"
+    size="md"
+  />
+  <Avatar
+    size="md"
+  />
+  <Avatar
+    initials="NA"
+    size="md"
+  />
+</div>
+```

package/src/web/avatar/avatar.css

@@ -0,0 +1 @@
+.ttdk-avatar{border-radius:var(--ttdk-radius-full,9999px);background-color:var(--ttdk-color-blue-100,#ecf3fe);width:40px;height:40px;color:var(--ttdk-text-icon-status-info,#0968f6);font-family:var(--ttdk-font-sans,"Manrope", sans-serif);box-sizing:border-box;user-select:none;vertical-align:middle;flex-shrink:0;justify-content:center;align-items:center;line-height:1;transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative;overflow:visible}.ttdk-avatar[data-interactive=true]{cursor:pointer}.ttdk-avatar[data-interactive=true]:hover{opacity:.9}.ttdk-avatar[data-interactive=true]:focus-visible{outline:2px solid var(--ttdk-stroke-border-focus,#16b3ac);outline-offset:2px}.ttdk-avatar[data-disabled=true]{opacity:.55;cursor:not-allowed;pointer-events:none}.ttdk-avatar-image{object-fit:cover;border-radius:inherit;width:100%;height:100%;display:block}.ttdk-avatar-initials{font-weight:var(--ttdk-font-weight-medium,500);letter-spacing:.01em;text-transform:uppercase;color:inherit;justify-content:center;align-items:center;line-height:1;display:inline-flex}.ttdk-avatar-icon{color:var(--ttdk-ui-icon-color,var(--ttdk-text-icon-primary,#141313));justify-content:center;align-items:center;line-height:0;display:inline-flex}.ttdk-avatar-icon:before{content:"";background-color:currentColor;width:20px;height:20px;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.ttdk-avatar-icon:not(:empty):before{display:none}.ttdk-avatar-icon svg{stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;fill:none;width:20px;height:20px}.ttdk-avatar[data-size=xs]{width:24px;height:24px;font-size:10px}.ttdk-avatar[data-size=xs] .ttdk-avatar-icon:before,.ttdk-avatar[data-size=xs] .ttdk-avatar-icon svg{width:14px;height:14px}.ttdk-avatar[data-size=sm]{width:32px;height:32px;font-size:14px}.ttdk-avatar[data-size=sm] .ttdk-avatar-icon:before,.ttdk-avatar[data-size=sm] .ttdk-avatar-icon svg{width:16px;height:16px}.ttdk-avatar[data-size=md]{width:40px;height:40px;font-size:16px}.ttdk-avatar[data-size=md] .ttdk-avatar-icon:before,.ttdk-avatar[data-size=md] .ttdk-avatar-icon svg{width:20px;height:20px}.ttdk-avatar[data-size=lg]{width:48px;height:48px;font-size:18px}.ttdk-avatar[data-size=lg] .ttdk-avatar-icon:before,.ttdk-avatar[data-size=lg] .ttdk-avatar-icon svg{width:24px;height:24px}.ttdk-avatar[data-size=xl]{width:56px;height:56px;font-size:20px}.ttdk-avatar[data-size=xl] .ttdk-avatar-icon:before,.ttdk-avatar[data-size=xl] .ttdk-avatar-icon svg{width:28px;height:28px}.ttdk-avatar[data-rounded=full]{border-radius:var(--ttdk-radius-full,9999px)}.ttdk-avatar[data-rounded=lg]{border-radius:var(--ttdk-radius-md,12px)}.ttdk-avatar[data-rounded=md]{border-radius:var(--ttdk-radius-sm,8px)}.ttdk-avatar[data-rounded=sm]{border-radius:var(--ttdk-radius-xs,6px)}.ttdk-avatar[data-rounded=none]{border-radius:var(--ttdk-radius-none,0px)}.ttdk-avatar[data-variant=info]{background-color:var(--ttdk-color-blue-100,#ecf3fe);color:var(--ttdk-text-icon-status-info,#0968f6)}.ttdk-avatar[data-variant=primary]{background-color:var(--ttdk-brand-subtle,#e1fbfa);color:var(--ttdk-brand-default,#16b3ac)}.ttdk-avatar[data-variant=success]{background-color:var(--ttdk-bg-status-success-subtle,#e0fae0);color:var(--ttdk-text-icon-status-success,#3cc14e)}.ttdk-avatar[data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle,#fff8d5);color:var(--ttdk-text-icon-status-warning,#ff8806)}.ttdk-avatar[data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle,#ffe0e0);color:var(--ttdk-text-icon-status-error,#f02d2d)}.ttdk-avatar[data-variant=neutral]{background-color:var(--ttdk-bg-secondary-disabled,#f1f2f3);color:var(--ttdk-text-icon-primary,#141313)}.dark .ttdk-avatar,[data-theme=dark] .ttdk-avatar{color:var(--ttdk-text-icon-primary,#fff)}.dark .ttdk-avatar-icon,[data-theme=dark] .ttdk-avatar-icon{color:var(--ttdk-ui-icon-color,var(--ttdk-text-icon-primary,#fff))}.dark .ttdk-avatar[data-variant=info],[data-theme=dark] .ttdk-avatar[data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle,#002a69);color:var(--ttdk-text-icon-status-info,#84b4fb)}.dark .ttdk-avatar[data-variant=primary],[data-theme=dark] .ttdk-avatar[data-variant=primary]{background-color:var(--ttdk-brand-subtle-dark,#062f2d);color:var(--ttdk-brand-default,#16b3ac)}.dark .ttdk-avatar[data-variant=success],[data-theme=dark] .ttdk-avatar[data-variant=success]{background-color:var(--ttdk-bg-status-success-subtle,#1b561a);color:var(--ttdk-text-icon-status-success,#a6f0a5)}.dark .ttdk-avatar[data-variant=warning],[data-theme=dark] .ttdk-avatar[data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle,#553b06);color:var(--ttdk-text-icon-status-warning,#ffe58a)}.dark .ttdk-avatar[data-variant=danger],[data-theme=dark] .ttdk-avatar[data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle,#570303);color:var(--ttdk-text-icon-status-error,#ffa0a0)}.dark .ttdk-avatar[data-variant=neutral],[data-theme=dark] .ttdk-avatar[data-variant=neutral]{background-color:var(--ttdk-bg-secondary-disabled,#313336);color:var(--ttdk-text-icon-primary,#fff)}.ttdk-avatar-status{border:1.5px solid var(--ttdk-bg-base-primary,#fff);box-sizing:border-box;background-color:var(--ttdk-bg-status-success,#3cc14e);border-radius:9999px;position:absolute;bottom:0;right:0}.dark .ttdk-avatar-status,[data-theme=dark] .ttdk-avatar-status{border-color:var(--ttdk-bg-base-primary,#141313)}.ttdk-avatar[data-size=xs] .ttdk-avatar-status{border-width:1px;width:6px;height:6px}.ttdk-avatar[data-size=sm] .ttdk-avatar-status{border-width:1.5px;width:8px;height:8px}.ttdk-avatar[data-size=md] .ttdk-avatar-status{border-width:1.5px;width:10px;height:10px}.ttdk-avatar[data-size=lg] .ttdk-avatar-status{border-width:2px;width:12px;height:12px}.ttdk-avatar[data-size=xl] .ttdk-avatar-status{border-width:2px;width:14px;height:14px}.ttdk-avatar-status[data-status=online]{background-color:var(--ttdk-bg-status-success,#3cc14e)}.ttdk-avatar-status[data-status=offline]{background-color:var(--ttdk-color-neutral-400,#969ba2)}.ttdk-avatar-status[data-status=verified]{background-color:#0000;background-image:url(data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2227%22%20viewBox%3D%220%200%2025%2027%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cuse%20xlink%3Ahref%3D%22%23stroke0_696_8896%22%20fill%3D%22%231E81E8%22%2F%3E%3Cmask%20id%3D%22stroke1_696_8896%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-0.577322%22%20y%3D%22-1.33077%22%20width%3D%2226.4905%22%20height%3D%2229.1467%22%20fill%3D%22black%22%3E%3Crect%20fill%3D%22white%22%20x%3D%22-0.577322%22%20y%3D%22-1.33077%22%20width%3D%2226.4905%22%20height%3D%2229.1467%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23stroke0_696_8896%22%2F%3E%3C%2Fmask%3E%3Cpath%20d%3D%22M23.1264%204.39673L24.094%204.14968L23.8502%203.21882L22.9113%203.41901L23.1264%204.39673ZM12.5952%201.23272L13.1994%200.440062L12.6235%205.7958e-05L12.0282%200.405408L12.5952%201.23272ZM1.87074%203.81179L2.13074%202.84824L1.2209%202.59744L0.922051%203.48837L1.87074%203.81179ZM11.7726%2025.626L11.3952%2026.5493L11.7485%2026.6955L12.108%2026.5701L11.7726%2025.626ZM23.1264%204.39673L22.9113%203.41901C20.7297%203.88421%2018.3403%203.19906%2016.4009%202.30664C15.4476%201.868%2014.6401%201.39645%2014.0714%201.03467C13.7878%200.854194%2013.5653%200.702137%2013.4157%200.596732C13.341%200.54406%2013.2846%200.503128%2013.2481%200.476231C13.2298%200.462785%2013.2165%200.452855%2013.2083%200.446729C13.2042%200.443666%2013.2014%200.441555%2013.1999%200.440431C13.1992%200.439869%2013.1988%200.439555%2013.1987%200.439492C13.1986%200.43946%2013.1987%200.439492%2013.1988%200.439586C13.1989%200.439634%2013.199%200.439753%2013.1991%200.439776C13.1992%200.439911%2013.1994%200.440062%2012.5952%201.23272C11.991%202.02539%2011.9913%202.02557%2011.9915%202.02577C11.9917%202.02586%2011.9919%202.02607%2011.9922%202.02625C11.9926%202.0266%2011.9932%202.02702%2011.9938%202.0275C11.9951%202.02846%2011.9967%202.02967%2011.9986%202.03114C12.0025%202.03407%2012.0077%202.03801%2012.0142%202.04292C12.0273%202.05273%2012.0457%202.06642%2012.0692%202.08369C12.1161%202.11822%2012.1836%202.16711%2012.27%202.228C12.4427%202.34972%2012.6917%202.51975%2013.005%202.71912C13.6304%203.11702%2014.519%203.6362%2015.5741%204.12171C17.6514%205.07759%2020.5276%205.97444%2023.3414%205.37444L23.1264%204.39673ZM12.5952%201.23272C12.0282%200.405408%2012.0284%200.405271%2012.0286%200.405149C12.0286%200.405128%2012.0288%200.40502%2012.0288%200.404979C12.0289%200.404895%2012.029%200.40487%2012.0289%200.404904C12.0288%200.404972%2012.0284%200.405275%2012.0276%200.405807C12.026%200.406871%2012.0231%200.408855%2012.0188%200.411723C12.0102%200.417459%2011.9962%200.42673%2011.9771%200.439256C11.9388%200.464314%2011.8798%200.502364%2011.8018%200.551183C11.6458%200.648876%2011.414%200.789355%2011.1192%200.954928C10.5285%201.28684%209.69205%201.71554%208.71167%202.10263C6.71599%202.8906%204.2845%203.44196%202.13074%202.84824L1.87074%203.81179L1.61074%204.77533C4.39472%205.54277%207.32548%204.80459%209.45761%203.96274C10.5411%203.53492%2011.46%203.06365%2012.1086%202.6993C12.4335%202.51675%2012.6923%202.36003%2012.872%202.24756C12.9619%202.1913%2013.0321%202.14602%2013.081%202.11403C13.1055%202.09803%2013.1246%202.08534%2013.1382%202.07625C13.145%202.0717%2013.1504%202.06806%2013.1545%202.06534C13.1565%202.06399%2013.1581%202.06286%2013.1594%202.06198C13.1601%202.06154%2013.1606%202.06115%2013.1611%202.06083C13.1614%202.06067%2013.1617%202.06047%2013.1618%202.06039C13.162%202.06021%2013.1623%202.06004%2012.5952%201.23272ZM1.87074%203.81179C0.922051%203.48837%200.921877%203.48889%200.921684%203.48947C0.921593%203.48974%200.92138%203.49037%200.921199%203.49092C0.920836%203.49201%200.920395%203.49333%200.919878%203.4949C0.918842%203.49802%200.9175%203.5021%200.915863%203.50711C0.912588%203.51713%200.908135%203.5309%200.9026%203.54832C0.891531%203.58316%200.876135%203.63262%200.857201%203.69594C0.819341%203.82255%200.767288%204.00472%200.707393%204.23635C0.587677%204.6993%200.436175%205.36153%200.30413%206.17379C0.0407089%207.79419%20-0.148984%2010.0341%200.158825%2012.4906C0.780892%2017.455%203.44239%2023.2589%2011.3952%2026.5493L11.7726%2025.626L12.15%2024.7028C4.98209%2021.7372%202.69267%2016.634%202.14399%2012.2553C1.86642%2010.0401%202.0364%207.99952%202.27899%206.50725C2.39995%205.76317%202.53804%205.16104%202.64466%204.74871C2.69794%204.54269%202.74324%204.3845%202.77445%204.28014C2.79005%204.22798%202.80211%204.18931%202.80987%204.1649C2.81374%204.15269%202.81655%204.14405%202.81817%204.13907C2.81899%204.13658%202.81951%204.135%202.81972%204.13435C2.81983%204.13403%202.81986%204.13394%202.81981%204.13408C2.81979%204.13415%202.81969%204.13443%202.81968%204.13447C2.81957%204.13481%202.81943%204.13521%201.87074%203.81179ZM11.7726%2025.626L12.108%2026.5701C20.2456%2023.7309%2023.2865%2018.0972%2024.2432%2013.1809C24.7168%2010.7469%2024.6802%208.50039%2024.5277%206.8672C24.4513%206.04866%2024.3453%205.37876%2024.2574%204.90953C24.2134%204.67477%2024.1738%204.48981%2024.1447%204.36111C24.1301%204.29674%2024.1181%204.24641%2024.1094%204.21091C24.105%204.19316%2024.1015%204.17912%2024.0989%204.16888C24.0976%204.16376%2024.0966%204.1596%2024.0957%204.15639C24.0953%204.15479%2024.095%204.15343%2024.0947%204.15231C24.0945%204.15175%2024.0944%204.15109%2024.0943%204.15081C24.0941%204.15022%2024.094%204.14968%2023.1264%204.39673C22.1587%204.64378%2022.1586%204.64336%2022.1585%204.64301C22.1585%204.64297%2022.1584%204.64267%2022.1584%204.64259C22.1584%204.64244%2022.1584%204.64252%2022.1585%204.64284C22.1586%204.64347%2022.159%204.64505%2022.1597%204.64755C22.1609%204.65257%2022.1631%204.6613%2022.1662%204.67365C22.1722%204.69836%2022.1816%204.73753%2022.1936%204.79037C22.2175%204.89609%2022.2519%205.05633%2022.2909%205.26477C22.3691%205.68194%2022.4658%206.2904%2022.5357%207.03968C22.6759%208.54213%2022.7068%2010.5891%2022.2792%2012.7866C21.4334%2017.1332%2018.7974%2022.1141%2011.4372%2024.682L11.7726%2025.626Z%22%20fill%3D%22white%22%20mask%3D%22url\(%23stroke1_696_8896\)%22%2F%3E%3Cpath%20d%3D%22M12.7982%2018.6179C16.1989%2018.4641%2018.8078%2015.7456%2018.6252%2012.5461C18.4427%209.34656%2015.5378%206.87751%2012.137%207.03132C8.73627%207.18513%206.1274%209.90355%206.30996%2013.1031C6.49252%2016.3026%209.39739%2018.7717%2012.7982%2018.6179Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M11.7845%2016.0567L11.7782%2016.057C11.5591%2016.0653%2011.3451%2015.988%2011.1848%2015.843L8.33674%2013.2645C8.00913%2012.9681%207.99235%2012.4747%208.29919%2012.1629C8.60578%2011.8509%209.11979%2011.8384%209.44741%2012.135L11.6853%2014.1612L15.3696%2010.194C15.6671%209.87369%2016.1805%209.84733%2016.5165%2010.1349C16.8524%2010.4228%2016.8838%2010.9152%2016.5865%2011.2355L12.3486%2015.799C12.2046%2015.9543%2012.0014%2016.0469%2011.7845%2016.0567%22%20fill%3D%22%231E81E8%22%2F%3E%3Cdefs%3E%3Cpath%20id%3D%22stroke0_696_8896%22%20d%3D%22M23.1264%204.39673C18.1309%205.46192%2012.5952%201.23272%2012.5952%201.23272C12.5952%201.23272%206.80847%205.17294%201.87074%203.81179C1.87074%203.81179%20-3.34811%2019.3701%2011.7726%2025.626C27.2704%2020.219%2023.1264%204.39673%2023.1264%204.39673Z%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fdefs%3E%3C%2Fsvg%3E);background-position:50%;background-repeat:no-repeat;background-size:contain;border:none;border-radius:0}.ttdk-avatar[data-size=xs] .ttdk-avatar-status[data-status=verified]{width:8px;height:8.5px}.ttdk-avatar[data-size=sm] .ttdk-avatar-status[data-status=verified]{width:12px;height:12.75px}.ttdk-avatar[data-size=md] .ttdk-avatar-status[data-status=verified]{width:16px;height:17px}.ttdk-avatar[data-size=lg] .ttdk-avatar-status[data-status=verified]{width:20px;height:21.25px}.ttdk-avatar[data-size=xl] .ttdk-avatar-status[data-status=verified]{width:24px;height:25.5px}

package/src/web/avatar/avatar.vue

@@ -0,0 +1,217 @@
+<template>
+  <span
+    :class="`ttdk-avatar ${className || ''}`.trim()"
+    :data-size="size || 'md'"
+    :data-variant="variant || 'info'"
+    :data-rounded="rounded || 'full'"
+    :data-mode="
+      src && !hasImageError ? 'image' : initials ? 'initials' : 'icon'
+    "
+    :data-interactive="Boolean(interactive || onClick) ? 'true' : 'false'"
+    :data-disabled="disabled ? 'true' : 'false'"
+    :role="interactive || onClick ? 'button' : undefined"
+    :tabIndex="disabled ? -1 : interactive || onClick ? 0 : undefined"
+    :aria-disabled="disabled ? 'true' : undefined"
+    :style="{
+      ...buildUiVars(ui),
+      ...(iconColor
+        ? {
+            '--ttdk-ui-icon-color': iconColor,
+          }
+        : {}),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+    @click="async (event) => handleClick(event)"
+    @keydown="async (event) => handleKeyDown(event)"
+  >
+    <template v-if="src && !hasImageError">
+      <img
+        :class="`ttdk-avatar-image ${imageClass || ''}`.trim()"
+        :src="src"
+        :alt="alt || initials || 'Avatar'"
+        :style="{
+          ...buildUiVars(imageStyle),
+        }"
+        @error="async (event) => handleImgError(event)"
+      />
+    </template>
+
+    <template v-if="(!src || hasImageError) && initials">
+      <span class="ttdk-avatar-initials">{{ initials }}</span>
+    </template>
+
+    <template v-if="(!src || hasImageError) && !initials">
+      <template v-if="icon">
+        <span class="ttdk-avatar-icon">{{ icon }}</span>
+      </template>
+
+      <template v-if="!icon">
+        <span class="ttdk-avatar-icon" aria-hidden="true"><slot /></span>
+      </template>
+    </template>
+
+    <template v-if="status">
+      <span
+        class="ttdk-avatar-status"
+        :data-status="status"
+        :aria-label="status"
+      ></span>
+    </template>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type AvatarUiProps = UiProps;
+export interface AvatarProps {
+  /**
+   * URL gambar profil avatar.
+   * Jika kosong atau gagal dimuat, tampilan otomatis beralih ke `initials` atau ikon pengguna bawaan.
+   */
+  src?: string;
+
+  /**
+   * Teks alternatif (alt) untuk elemen gambar avatar.
+   */
+  alt?: string;
+
+  /**
+   * Teks inisial pengguna yang ditampilkan di dalam lingkaran avatar (misal: "NA", "SR").
+   * Ditampilkan apabila `src` tidak tersedia atau gagal dimuat.
+   */
+  initials?: string;
+
+  /**
+   * Skala ukuran avatar:
+   * - `'xs'`: Lingkaran 28px.
+   * - `'sm'`: Lingkaran 32px.
+   * - `'md'`: Lingkaran 40px (standar).
+   * - `'lg'`: Lingkaran 48px.
+   * - `'xl'`: Lingkaran 56px.
+   *
+   * @default 'md'
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Varian warna semantik untuk latar & teks/ikon fallback avatar:
+   * - `'info'`: Biru informasi sesuai standar profil (default).
+   * - `'primary'`: Brand Teal utama.
+   * - `'success'`: Hijau sukses.
+   * - `'warning'`: Kuning / amber peringatan.
+   * - `'danger'`: Merah bahaya.
+   * - `'neutral'`: Abu-abu netral.
+   *
+   * @default 'info'
+   */
+  variant?: "info" | "primary" | "success" | "warning" | "danger" | "neutral";
+
+  /**
+   * Sudut kelengkungan lingkaran avatar:
+   * - `'full'`: Lingkaran penuh 9999px (default).
+   * - `'lg'`: Radius membulat 12px.
+   * - `'md'`: Radius sedang 8px.
+   * - `'sm'`: Radius halus 4px.
+   * - `'none'`: Persegi tajam 0px.
+   *
+   * @default 'full'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Indikator status kehadiran atau verifikasi di pojok kanan bawah lingkaran avatar:
+   * - `'online'`: Titik hijau status aktif.
+   * - `'offline'`: Titik abu-abu status luring.
+   * - `'verified'`: Lencana perisai biru terverifikasi.
+   */
+  status?: "online" | "offline" | "verified";
+
+  /**
+   * Ikon kustom untuk menggantikan ikon pengguna bawaan saat `src` dan `initials` tidak diisi.
+   */
+  icon?: any;
+
+  /**
+   * Warna kustom untuk ikon di dalam avatar.
+   */
+  iconColor?: string;
+
+  /**
+   * Menjadikan komponen avatar interaktif (memiliki efek hover & fokus keyboard).
+   * @default false
+   */
+  interactive?: boolean;
+
+  /**
+   * Menonaktifkan interaksi klik pada avatar.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Event handler saat komponen avatar diklik.
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Event handler saat gambar `src` gagal dimuat.
+   */
+  onImageError?: (event?: any) => void;
+
+  /**
+   * Kustomisasi visual granular pada elemen root melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native pada elemen root.
+   */
+  style?: any;
+
+  /**
+   * Style kustom untuk elemen gambar `<img>` di dalam avatar (UiProps).
+   */
+  imageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen gambar `<img>`.
+   */
+  imageClass?: string;
+
+  /**
+   * Class CSS kustom pada elemen root.
+   */
+  className?: string;
+
+  /**
+   * Slot konten tambahan atau pengganti ikon di dalam avatar.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Avatar untuk menampilkan foto profil, inisial nama, atau ikon pengguna.
+ */
+
+const props = defineProps<AvatarProps>();
+const hasImageError = ref(false);
+
+function handleImgError(event: any) {
+  hasImageError.value = true;
+  props.onImageError?.(event);
+}
+function handleClick(event: any) {
+  if (props.disabled) return;
+  props.onClick?.(event);
+}
+function handleKeyDown(event: any) {
+  if (props.disabled) return;
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    props.onClick?.(event);
+  }
+}
+</script>

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

@@ -0,0 +1,135 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type AvatarUiProps = UiProps;
+
+export interface AvatarProps {
+  /**
+   * URL gambar profil avatar.
+   * Jika kosong atau gagal dimuat, tampilan otomatis beralih ke `initials` atau ikon pengguna bawaan.
+   */
+  src?: string;
+
+  /**
+   * Teks alternatif (alt) untuk elemen gambar avatar.
+   */
+  alt?: string;
+
+  /**
+   * Teks inisial pengguna yang ditampilkan di dalam lingkaran avatar (misal: "NA", "SR").
+   * Ditampilkan apabila `src` tidak tersedia atau gagal dimuat.
+   */
+  initials?: string;
+
+  /**
+   * Skala ukuran avatar:
+   * - `'xs'`: Lingkaran 28px.
+   * - `'sm'`: Lingkaran 32px.
+   * - `'md'`: Lingkaran 40px (standar).
+   * - `'lg'`: Lingkaran 48px.
+   * - `'xl'`: Lingkaran 56px.
+   *
+   * @default 'md'
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Varian warna semantik untuk latar & teks/ikon fallback avatar:
+   * - `'info'`: Biru informasi sesuai standar profil (default).
+   * - `'primary'`: Brand Teal utama.
+   * - `'success'`: Hijau sukses.
+   * - `'warning'`: Kuning / amber peringatan.
+   * - `'danger'`: Merah bahaya.
+   * - `'neutral'`: Abu-abu netral.
+   *
+   * @default 'info'
+   */
+  variant?: "info" | "primary" | "success" | "warning" | "danger" | "neutral";
+
+  /**
+   * Sudut kelengkungan lingkaran avatar:
+   * - `'full'`: Lingkaran penuh 9999px (default).
+   * - `'lg'`: Radius membulat 12px.
+   * - `'md'`: Radius sedang 8px.
+   * - `'sm'`: Radius halus 4px.
+   * - `'none'`: Persegi tajam 0px.
+   *
+   * @default 'full'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Indikator status kehadiran atau verifikasi di pojok kanan bawah lingkaran avatar:
+   * - `'online'`: Titik hijau status aktif.
+   * - `'offline'`: Titik abu-abu status luring.
+   * - `'verified'`: Lencana perisai biru terverifikasi.
+   */
+  status?: "online" | "offline" | "verified";
+
+  /**
+   * Ikon kustom untuk menggantikan ikon pengguna bawaan saat `src` dan `initials` tidak diisi.
+   */
+  icon?: any;
+
+  /**
+   * Warna kustom untuk ikon di dalam avatar.
+   */
+  iconColor?: string;
+
+  /**
+   * Menjadikan komponen avatar interaktif (memiliki efek hover & fokus keyboard).
+   * @default false
+   */
+  interactive?: boolean;
+
+  /**
+   * Menonaktifkan interaksi klik pada avatar.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Event handler saat komponen avatar diklik.
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Event handler saat gambar `src` gagal dimuat.
+   */
+  onImageError?: (event?: any) => void;
+
+  /**
+   * Kustomisasi visual granular pada elemen root melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native pada elemen root.
+   */
+  style?: any;
+
+  /**
+   * Style kustom untuk elemen gambar `<img>` di dalam avatar (UiProps).
+   */
+  imageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen gambar `<img>`.
+   */
+  imageClass?: string;
+
+  /**
+   * Class CSS kustom pada elemen root.
+   */
+  className?: string;
+
+  /**
+   * Slot konten tambahan atau pengganti ikon di dalam avatar.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<AvatarProps>;
+export default component;

package/src/web/avatar/index.ts

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