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

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.tsx

@@ -0,0 +1,233 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+
+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?: React.CSSProperties;
+
+  /**
+   * 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.
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Avatar(props: AvatarProps) {
+  const [hasImageError, setHasImageError] = useState(() => false);
+
+  function handleImgError(event: any) {
+    setHasImageError(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);
+    }
+  }
+
+  return (
+    <span
+      className={`ttdk-avatar ${props.className || ""}`.trim()}
+      data-size={props.size || "md"}
+      data-variant={props.variant || "info"}
+      data-rounded={props.rounded || "full"}
+      data-mode={
+        props.src && !hasImageError
+          ? "image"
+          : props.initials
+          ? "initials"
+          : "icon"
+      }
+      data-interactive={
+        Boolean(props.interactive || props.onClick) ? "true" : "false"
+      }
+      data-disabled={props.disabled ? "true" : "false"}
+      role={props.interactive || props.onClick ? "button" : undefined}
+      tabIndex={
+        props.disabled ? -1 : props.interactive || props.onClick ? 0 : undefined
+      }
+      aria-disabled={props.disabled ? "true" : undefined}
+      style={{
+        ...buildUiVars(props.ui),
+        ...(props.iconColor
+          ? {
+              "--ttdk-ui-icon-color": props.iconColor,
+            }
+          : {}),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+      onClick={(event) => handleClick(event)}
+      onKeyDown={(event) => handleKeyDown(event)}
+    >
+      {props.src && !hasImageError ? (
+        <img
+          className={`ttdk-avatar-image ${props.imageClass || ""}`.trim()}
+          src={props.src}
+          alt={props.alt || props.initials || "Avatar"}
+          style={{
+            ...buildUiVars(props.imageStyle),
+          }}
+          onError={(event) => handleImgError(event)}
+        />
+      ) : null}
+      {(!props.src || hasImageError) && props.initials ? (
+        <span className="ttdk-avatar-initials">{props.initials}</span>
+      ) : null}
+      {(!props.src || hasImageError) && !props.initials ? (
+        <>
+          {props.icon ? (
+            <span className="ttdk-avatar-icon">{props.icon}</span>
+          ) : null}
+          {!props.icon ? (
+            <span className="ttdk-avatar-icon" aria-hidden="true">
+              <>{props.children}</>
+            </span>
+          ) : null}
+        </>
+      ) : null}
+      {props.status ? (
+        <span
+          className="ttdk-avatar-status"
+          data-status={props.status}
+          aria-label={props.status}
+        />
+      ) : null}
+    </span>
+  );
+}
+
+export default Avatar;
+
+export { Avatar };

package/src/web/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './avatar';
+export { default } from './avatar';
+export type { AvatarProps, AvatarUiProps } from './avatar'

package/src/web/avatar/manifest.json

@@ -0,0 +1,195 @@
+{
+  "name": "@ttdk-design-system/avatar",
+  "component": "Avatar",
+  "folder": "avatar",
+  "description": "Komponen Avatar untuk menampilkan foto profil, inisial nama, atau ikon pengguna.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "avatar.css",
+      "importPath": "web/avatar/avatar.css"
+    }
+  ],
+  "props": {
+    "src": {
+      "name": "src",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "URL gambar profil avatar. Jika kosong atau gagal dimuat, tampilan otomatis beralih ke `initials` atau ikon pengguna bawaan.",
+      "example": null,
+      "param": null
+    },
+    "alt": {
+      "name": "alt",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks alternatif (alt) untuk elemen gambar avatar.",
+      "example": null,
+      "param": null
+    },
+    "initials": {
+      "name": "initials",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks inisial pengguna yang ditampilkan di dalam lingkaran avatar (misal: \"NA\", \"SR\"). Ditampilkan apabila `src` tidak tersedia atau gagal dimuat.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran avatar: - `'xs'`: Lingkaran 28px. - `'sm'`: Lingkaran 32px. - `'md'`: Lingkaran 40px (standar). - `'lg'`: Lingkaran 48px. - `'xl'`: Lingkaran 56px.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "'info' | 'primary' | 'success' | 'warning' | 'danger' | 'neutral'",
+      "optional": true,
+      "default": "info",
+      "description": "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.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "full",
+      "description": "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.",
+      "example": null,
+      "param": null
+    },
+    "status": {
+      "name": "status",
+      "type": "'online' | 'offline' | 'verified'",
+      "optional": true,
+      "default": null,
+      "description": "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.",
+      "example": null,
+      "param": null
+    },
+    "icon": {
+      "name": "icon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom untuk menggantikan ikon pengguna bawaan saat `src` dan `initials` tidak diisi.",
+      "example": null,
+      "param": null
+    },
+    "iconColor": {
+      "name": "iconColor",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Warna kustom untuk ikon di dalam avatar.",
+      "example": null,
+      "param": null
+    },
+    "interactive": {
+      "name": "interactive",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan komponen avatar interaktif (memiliki efek hover & fokus keyboard).",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan interaksi klik pada avatar.",
+      "example": null,
+      "param": null
+    },
+    "onClick": {
+      "name": "onClick",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler saat komponen avatar diklik.",
+      "example": null,
+      "param": null
+    },
+    "onImageError": {
+      "name": "onImageError",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler saat gambar `src` gagal dimuat.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular pada elemen root 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 pada elemen root.",
+      "example": null,
+      "param": null
+    },
+    "imageStyle": {
+      "name": "imageStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen gambar `<img>` di dalam avatar (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "imageClass": {
+      "name": "imageClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen gambar `<img>`.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom pada elemen root.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Slot konten tambahan atau pengganti ikon di dalam avatar.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/badge/AI_GUIDE.md

@@ -0,0 +1,94 @@
+# <Badge /> — TTDK Component Reference
+
+TTDK Badge 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/badge/badge.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Badge from "@ttdk-design-system/library-react/web/badge";
+
+// Vue 3
+import Badge from "@ttdk-design-system/library-vue/web/badge";
+
+// Svelte
+import Badge from "@ttdk-design-system/library-svelte/web/badge";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label?` | `string` | `-` | Teks label yang ditampilkan di dalam badge (misal: "CSV", "Publik", "Aktif"). |
+| `variant?` | `| 'primary'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'neutral'
+  | 'disabled'` | `primary` | Varian warna semantik tema badge: - `'primary'`: Brand Teal utama (#00B5AD). - `'success'`: Sukses hijau (#04B761). - `'info'`: Biru informasi (#2196F3). - `'warning'`: Peringatan kuning / amber (#F88000). - `'danger'`: Bahaya / merah (#D0021B). |
+| `appearance?` | `'soft' | 'solid' | 'outline'` | `soft` | Gaya visual tampilan badge: - `'soft'`: Latar belakang lembut transparan dengan teks berwarna (default). - `'solid'`: Latar belakang pekat solid dengan teks kontras putih/gelap. - `'outline'`: Garis tepi tipis dengan latar belakang transparan. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran badge: - `'sm'`: Kecil (tinggi 28px, font 12px). - `'md'`: Sedang (tinggi 32px, font 13px, standar). - `'lg'`: Besar (tinggi 38px, font 15px). |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `full` | Sudut kelengkungan badge: - `'none'`: Sudut tajam kotak (0px). - `'sm'`: Radius halus (4px). - `'md'`: Radius sedang (6px). - `'lg'`: Radius membulat (8px). - `'full'`: Pill-shaped membulat penuh (9999px, default). |
+| `dot?` | `boolean` | `false` | Menampilkan titik indikator status (dot) di sisi kiri teks badge. |
+| `dotColor?` | `string` | `-` | Warna kustom untuk titik indikator status (dot). |
+| `dotStyle?` | `UiProps` | `-` | Style kustom untuk titik indikator status (UiProps / style object + pseudo support). |
+| `dotClass?` | `string` | `-` | Class CSS kustom untuk titik indikator status. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Konten kustom atau ikon yang disisipkan ke dalam badge. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Badge from "@ttdk-design-system/library-react/web/badge";
+import "@ttdk-design-system/library-react/web/badge/badge.css";
+
+export function Example() {
+  return (
+    <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+      <Badge variant="default" label="Publik" />
+      <Badge variant="success" dot label="Aktif" />
+      <Badge variant="warning" appearance="solid" label="Dalam Review" />
+      <Badge variant="danger" appearance="outline" label="Gagal" />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Badge from "@ttdk-design-system/library-vue/web/badge";
+import "@ttdk-design-system/library-vue/web/badge/badge.css";
+</script>
+
+<template>
+  <div style="display: flex; gap: 8px; align-items: center;">
+    <Badge variant="default" label="Publik" />
+    <Badge variant="success" :dot="true" label="Aktif" />
+    <Badge variant="warning" appearance="solid" label="Dalam Review" />
+    <Badge variant="danger" appearance="outline" label="Gagal" />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Badge from "@ttdk-design-system/library-svelte/web/badge";
+  import "@ttdk-design-system/library-svelte/web/badge/badge.css";
+</script>
+
+<div style="display: flex; gap: 8px; align-items: center;">
+  <Badge variant="default" label="Publik" />
+  <Badge variant="success" dot={true} label="Aktif" />
+  <Badge variant="warning" appearance="solid" label="Dalam Review" />
+  <Badge variant="danger" appearance="outline" label="Gagal" />
+</div>
+```

package/src/web/badge/badge.css

@@ -0,0 +1 @@
+.ttdk-badge{font-family:var(--ttdk-font-sans);font-weight:var(--ttdk-font-weight-medium,500);letter-spacing:.15px;box-sizing:border-box;user-select:none;white-space:nowrap;vertical-align:middle;border-radius:var(--ttdk-radius-full,9999px);border-style:solid;border-width:.8px;justify-content:center;align-items:center;gap:6px;line-height:100%;text-decoration:none;transition:all .15s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative}.ttdk-badge[data-size=xs]{min-width:45px;height:24px;padding:0 var(--ttdk-spacing-xs);border-width:.8px;font-size:11px}.ttdk-badge[data-size=sm]{min-width:55px;height:28px;font-size:var(--ttdk-font-size-12);letter-spacing:.15px;border-width:.8px;padding:0 10px;font-weight:500;line-height:1}.ttdk-badge[data-size=md]{letter-spacing:.15px;border-width:.8px;min-width:60px;height:32px;padding:0 14px;font-size:13px;font-weight:500;line-height:1}.ttdk-badge[data-size=lg]{letter-spacing:.15px;border-width:1px;min-width:60px;height:38px;padding:0 18px;font-size:15px;font-weight:500;line-height:1}.ttdk-badge[data-rounded=full]{border-radius:var(--ttdk-radius-full,9999px)}.ttdk-badge[data-rounded=lg]{border-radius:var(--ttdk-radius-md,12px)}.ttdk-badge[data-rounded=md]{border-radius:var(--ttdk-radius-sm,8px)}.ttdk-badge[data-rounded=sm]{border-radius:var(--ttdk-radius-xs,4px)}.ttdk-badge[data-rounded=none]{border-radius:var(--ttdk-radius-none,0px)}.ttdk-badge[data-appearance=soft][data-variant=primary]{background-color:var(--ttdk-brand-subtle);border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default)}.ttdk-badge[data-appearance=soft][data-variant=success]{background-color:var(--ttdk-bg-status-success-subtle);border-color:var(--ttdk-stroke-status-success);color:var(--ttdk-text-icon-status-success)}.ttdk-badge[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)}.ttdk-badge[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)}.ttdk-badge[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)}.ttdk-badge[data-variant=neutral],.ttdk-badge[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)}.ttdk-badge[data-variant=disable],.ttdk-badge[data-variant=disabled],.ttdk-badge[data-appearance=soft][data-variant=disable],.ttdk-badge[data-appearance=soft][data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled)}.ttdk-badge[data-appearance=solid][data-variant=primary]{background-color:var(--ttdk-brand-default);border-color:var(--ttdk-brand-default);color:var(--ttdk-color-white)}.ttdk-badge[data-appearance=solid][data-variant=success]{background-color:var(--ttdk-bg-status-success);border-color:var(--ttdk-bg-status-success);color:var(--ttdk-color-white)}.ttdk-badge[data-appearance=solid][data-variant=info]{background-color:var(--ttdk-bg-status-info);border-color:var(--ttdk-bg-status-info);color:var(--ttdk-color-white)}.ttdk-badge[data-appearance=solid][data-variant=warning]{background-color:var(--ttdk-bg-status-warning);border-color:var(--ttdk-bg-status-warning);color:var(--ttdk-color-black)}.ttdk-badge[data-appearance=solid][data-variant=danger]{background-color:var(--ttdk-bg-status-error);border-color:var(--ttdk-bg-status-error);color:var(--ttdk-color-white)}.ttdk-badge[data-appearance=solid][data-variant=neutral]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary)}.ttdk-badge[data-appearance=solid][data-variant=disable],.ttdk-badge[data-appearance=solid][data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled)}.ttdk-badge[data-appearance=outline]{background-color:#0000}.ttdk-badge[data-appearance=outline][data-variant=primary]{border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default)}.ttdk-badge[data-appearance=outline][data-variant=success]{border-color:var(--ttdk-stroke-status-success);color:var(--ttdk-text-icon-status-success)}.ttdk-badge[data-appearance=outline][data-variant=info]{border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info)}.ttdk-badge[data-appearance=outline][data-variant=warning]{border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning)}.ttdk-badge[data-appearance=outline][data-variant=danger]{border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error)}.ttdk-badge[data-appearance=outline][data-variant=neutral]{border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary)}.ttdk-badge[data-appearance=outline][data-variant=disable],.ttdk-badge[data-appearance=outline][data-variant=disabled]{border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled)}.dark .ttdk-badge[data-appearance=soft][data-variant=primary],[data-theme=dark] .ttdk-badge[data-appearance=soft][data-variant=primary]{background-color:var(--ttdk-brand-subtle-dark);border-color:var(--ttdk-brand-default)}.dark .ttdk-badge[data-appearance=soft][data-variant=success],[data-theme=dark] .ttdk-badge[data-appearance=soft][data-variant=success]{background-color:var(--ttdk-bg-status-success-subtle);border-color:var(--ttdk-stroke-status-success)}.dark .ttdk-badge[data-appearance=soft][data-variant=info],[data-theme=dark] .ttdk-badge[data-appearance=soft][data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-stroke-status-info)}.dark .ttdk-badge[data-appearance=soft][data-variant=warning],[data-theme=dark] .ttdk-badge[data-appearance=soft][data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-stroke-status-warning)}.dark .ttdk-badge[data-appearance=soft][data-variant=danger],[data-theme=dark] .ttdk-badge[data-appearance=soft][data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-stroke-status-error)}.dark .ttdk-badge[data-appearance=solid][data-variant=neutral],[data-theme=dark] .ttdk-badge[data-appearance=solid][data-variant=neutral]{background-color:var(--ttdk-bg-stay-black);border-color:var(--ttdk-bg-stay-black);color:var(--ttdk-text-icon-stay-white)}.dark .ttdk-badge[data-appearance=soft][data-variant=neutral],[data-theme=dark] .ttdk-badge[data-appearance=soft][data-variant=neutral],.dark .ttdk-badge[data-variant=neutral],[data-theme=dark] .ttdk-badge[data-variant=neutral]{background-color:var(--ttdk-color-neutral-900);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}.dark .ttdk-badge[data-appearance=outline][data-variant=neutral],[data-theme=dark] .ttdk-badge[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)}.dark .ttdk-badge[data-appearance=soft][data-variant=disable],[data-theme=dark] .ttdk-badge[data-appearance=soft][data-variant=disable],.dark .ttdk-badge[data-appearance=soft][data-variant=disabled],[data-theme=dark] .ttdk-badge[data-appearance=soft][data-variant=disabled],.dark .ttdk-badge[data-variant=disable],[data-theme=dark] .ttdk-badge[data-variant=disable],.dark .ttdk-badge[data-variant=disabled],[data-theme=dark] .ttdk-badge[data-variant=disabled],.dark .ttdk-badge[data-appearance=solid][data-variant=disable],[data-theme=dark] .ttdk-badge[data-appearance=solid][data-variant=disable],.dark .ttdk-badge[data-appearance=solid][data-variant=disabled],[data-theme=dark] .ttdk-badge[data-appearance=solid][data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled)}.dark .ttdk-badge[data-appearance=outline][data-variant=disable],[data-theme=dark] .ttdk-badge[data-appearance=outline][data-variant=disable],.dark .ttdk-badge[data-appearance=outline][data-variant=disabled],[data-theme=dark] .ttdk-badge[data-appearance=outline][data-variant=disabled]{border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled);background-color:#0000}.ttdk-badge-dot{background-color:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.ttdk-badge[data-size=xs] .ttdk-badge-dot{width:4px;height:4px}.ttdk-badge[data-size=lg] .ttdk-badge-dot{width:8px;height:8px}