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

package/dist/web/avatar/avatar.svelte.d.ts

@@ -0,0 +1,147 @@
+import { SvelteComponent } from "svelte";
+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;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        onImageError?: AvatarProps["onImageError"];
+        disabled?: AvatarProps["disabled"];
+        onClick?: AvatarProps["onClick"];
+        className?: AvatarProps["className"];
+        size?: AvatarProps["size"];
+        variant?: AvatarProps["variant"];
+        rounded?: AvatarProps["rounded"];
+        src?: AvatarProps["src"];
+        initials?: AvatarProps["initials"];
+        interactive?: AvatarProps["interactive"];
+        ui?: AvatarProps["ui"];
+        iconColor?: AvatarProps["iconColor"];
+        imageClass?: AvatarProps["imageClass"];
+        alt?: AvatarProps["alt"];
+        imageStyle?: AvatarProps["imageStyle"];
+        icon?: AvatarProps["icon"];
+        status?: AvatarProps["status"];
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type AvatarProps_ = typeof __propDef.props;
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponent<AvatarProps_, AvatarEvents, AvatarSlots> {
+}
+export {};

package/dist/web/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './avatar.svelte';
+export { default as Avatar } from './avatar.svelte';

package/dist/web/avatar/index.js

@@ -0,0 +1,2 @@
+export { default } from './avatar.svelte';
+export { default as Avatar } from './avatar.svelte';

package/dist/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/dist/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/dist/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}

package/dist/web/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let variant = void 0;
+export let appearance = void 0;
+export let size = void 0;
+export let rounded = void 0;
+export let ui = void 0;
+export let dot = void 0;
+export let dotClass = void 0;
+export let dotStyle = void 0;
+export let dotColor = void 0;
+export let label = 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>
+
+<span
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-badge ${className || ""}`.trim()}
+  data-variant={variant || "primary"}
+  data-appearance={appearance || "soft"}
+  data-size={size || "md"}
+  data-rounded={rounded || "full"}
+>
+  {#if dot}
+    <span
+      style={stringifyStyles({
+        ...buildUiVars(dotStyle),
+        ...(dotColor
+          ? {
+              backgroundColor: dotColor,
+            }
+          : {}),
+      })}
+      class={`ttdk-badge-dot ${dotClass || ""}`.trim()}
+    />
+  {/if}<slot />{label}</span
+>

package/dist/web/badge/badge.svelte.d.ts

@@ -0,0 +1,111 @@
+import { SvelteComponent } from "svelte";
+export type BadgeUiProps = UiProps;
+export interface BadgeProps {
+    /**
+     * Teks label yang ditampilkan di dalam badge (misal: "CSV", "Publik", "Aktif").
+     */
+    label?: string;
+    /**
+     * 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).
+     *
+     * @default 'primary'
+     */
+    variant?: "primary" | "success" | "info" | "warning" | "danger" | "neutral" | "disabled";
+    /**
+     * 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.
+     *
+     * @default 'soft'
+     */
+    appearance?: "soft" | "solid" | "outline";
+    /**
+     * Skala ukuran badge:
+     * - `'sm'`: Kecil (tinggi 28px, font 12px).
+     * - `'md'`: Sedang (tinggi 32px, font 13px, standar).
+     * - `'lg'`: Besar (tinggi 38px, font 15px).
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * 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).
+     *
+     * @default 'full'
+     */
+    rounded?: "none" | "sm" | "md" | "lg" | "full";
+    /**
+     * Menampilkan titik indikator status (dot) di sisi kiri teks badge.
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Warna kustom untuk titik indikator status (dot).
+     */
+    dotColor?: string;
+    /**
+     * Style kustom untuk titik indikator status (UiProps / style object + pseudo support).
+     */
+    dotStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk titik indikator status.
+     */
+    dotClass?: string;
+    /**
+     * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+     */
+    ui?: UiProps;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten kustom atau ikon yang disisipkan ke dalam badge.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: BadgeProps["className"];
+        variant?: BadgeProps["variant"];
+        appearance?: BadgeProps["appearance"];
+        size?: BadgeProps["size"];
+        rounded?: BadgeProps["rounded"];
+        ui?: BadgeProps["ui"];
+        dot?: BadgeProps["dot"];
+        dotClass?: BadgeProps["dotClass"];
+        dotStyle?: BadgeProps["dotStyle"];
+        dotColor?: BadgeProps["dotColor"];
+        label?: BadgeProps["label"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type BadgeProps_ = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponent<BadgeProps_, BadgeEvents, BadgeSlots> {
+}
+export {};

package/dist/web/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './badge.svelte';
+export { default as Badge } from './badge.svelte';

package/dist/web/badge/index.js

@@ -0,0 +1,2 @@
+export { default } from './badge.svelte';
+export { default as Badge } from './badge.svelte';