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

package/dist/web/badge/manifest.json

@@ -0,0 +1,141 @@
+{
+  "name": "@ttdk-design-system/badge",
+  "component": "Badge",
+  "folder": "badge",
+  "description": "TTDK Badge component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "badge.css",
+      "importPath": "web/badge/badge.css"
+    }
+  ],
+  "props": {
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label yang ditampilkan di dalam badge (misal: \"CSV\", \"Publik\", \"Aktif\").",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'primary'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'danger'\n  | 'neutral'\n  | 'disabled'",
+      "optional": true,
+      "default": "primary",
+      "description": "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).",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'soft' | 'solid' | 'outline'",
+      "optional": true,
+      "default": "soft",
+      "description": "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.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran badge: - `'sm'`: Kecil (tinggi 28px, font 12px). - `'md'`: Sedang (tinggi 32px, font 13px, standar). - `'lg'`: Besar (tinggi 38px, font 15px).",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "full",
+      "description": "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).",
+      "example": null,
+      "param": null
+    },
+    "dot": {
+      "name": "dot",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan titik indikator status (dot) di sisi kiri teks badge.",
+      "example": null,
+      "param": null
+    },
+    "dotColor": {
+      "name": "dotColor",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Warna kustom untuk titik indikator status (dot).",
+      "example": null,
+      "param": null
+    },
+    "dotStyle": {
+      "name": "dotStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk titik indikator status (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "dotClass": {
+      "name": "dotClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk titik indikator status.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom atau ikon yang disisipkan ke dalam badge.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/dist/web/banner/AI_GUIDE.md

@@ -0,0 +1,130 @@
+# <Banner /> — TTDK Component Reference
+
+Komponen Banner untuk header halaman portal, pengumuman penting, atau judul kategori katalog data dengan desain visual bersih dan elegan.
+
+## 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/banner/banner.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Banner from "@ttdk-design-system/library-react/web/banner";
+
+// Vue 3
+import Banner from "@ttdk-design-system/library-vue/web/banner";
+
+// Svelte
+import Banner from "@ttdk-design-system/library-svelte/web/banner";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `title?` | `string` | `-` | Judul utama banner yang ditampilkan dengan tipografi tegas (misal: "Katalog Dataset Publik"). |
+| `description?` | `string` | `-` | Deskripsi atau pesan teks penjelasan tambahan di bawah judul. |
+| `variant?` | `| 'primary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger'` | `primary` | Varian warna semantik tema banner: - `'primary'`: Brand Teal utama (#16B3AC). - `'success'`: Hijau konfirmasi keberhasilan. - `'info'`: Biru informasi. - `'warning'`: Kuning / amber peringatan. - `'danger'`: Merah kesalahan / bahaya. |
+| `appearance?` | `'gradient' | 'subtle' | 'solid' | 'outline' | 'flat'` | `gradient` | Gaya tampilan visual latar belakang banner. - `'gradient'`: Latar belakang gradasi halus elegan (standar sesuai desain katalog). - `'subtle'`: Latar belakang warna lembut transparan. - `'solid'`: Latar belakang warna pekat penuh dengan teks kontras tinggi. - `'outline'`: Garis tepi minimalis tanpa latar belakang gradasi. - `'flat'`: Latar polos solid netral. |
+| `size?` | `'sm' | 'md' | 'lg' | 'xl'` | `md` | Skala ukuran tinggi dan padding ruang dalam banner. - `'sm'`: Kompak (padding 10px 16px, judul 14px). - `'md'`: Standar (padding 14px 20px, judul 16px). - `'lg'`: Besar / Page Header (padding 18px 24px, judul 18px). - `'xl'`: Ekstra Besar / Hero Banner (padding 24px 32px, judul 22px). |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Bentuk sudut kelengkungan container banner. - `'none'`: Sudut siku 0px. - `'sm'`: Sudut 4px. - `'md'`: Sudut 8px (standar). - `'lg'`: Sudut 12px. - `'full'`: Sudut kapsul 9999px. |
+| `icon?` | `boolean | any` | `false` | Menampilkan ikon indikator status semantik (boolean) atau elemen ikon kustom. |
+| `customIcon?` | `any` | `-` | Elemen ikon SVG kustom untuk menggantikan ikon bawaan banner. |
+| `iconColor?` | `string` | `-` | Warna kustom untuk ikon banner secara langsung. |
+| `iconSize?` | `string` | `-` | Ukuran kustom untuk ikon banner secara langsung. |
+| `iconStyle?` | `UiProps` | `-` | Style kustom untuk ikon banner (UiProps). |
+| `iconClass?` | `string` | `-` | Class CSS kustom untuk ikon banner. |
+| `titleStyle?` | `UiProps` | `-` | Style kustom untuk judul banner (UiProps). |
+| `titleClass?` | `string` | `-` | Class CSS kustom untuk judul banner. |
+| `descStyle?` | `UiProps` | `-` | Style kustom untuk deskripsi banner (UiProps). |
+| `descClass?` | `string` | `-` | Class CSS kustom untuk deskripsi banner. |
+| `closable?` | `boolean` | `false` | Menampilkan tombol silang (x) untuk menutup atau menyembunyikan banner. |
+| `closableStyle?` | `UiProps` | `-` | Style kustom untuk tombol tutup banner (UiProps). |
+| `closableClass?` | `string` | `-` | Class CSS kustom untuk tombol tutup banner. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `children?` | `any` | `-` | Konten kustom tambahan / isi banner (children slot). |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `onClose?` | `(event?: any) => void` | `-` | Event callback saat tombol tutup diklik. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Banner from "@ttdk-design-system/library-react/web/banner";
+import "@ttdk-design-system/library-react/web/banner/banner.css";
+
+export function Example() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Banner
+        title="Katalog Dataset Kesehatan Nasional"
+        description="Jelajahi dan unduh data agregat fasilitas kesehatan terstandardisasi."
+        variant="default"
+        appearance="gradient"
+        icon
+      />
+      <Banner
+        title="Pemeliharaan Sistem Terjadwal"
+        description="Layanan integrasi API akan mengalami pemeliharaan pada pukul 23:00 WIB."
+        variant="warning"
+        closable
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Banner from "@ttdk-design-system/library-vue/web/banner";
+import "@ttdk-design-system/library-vue/web/banner/banner.css";
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <Banner
+      title="Katalog Dataset Kesehatan Nasional"
+      description="Jelajahi dan unduh data agregat fasilitas kesehatan terstandardisasi."
+      variant="default"
+      appearance="gradient"
+      :icon="true"
+    />
+    <Banner
+      title="Pemeliharaan Sistem Terjadwal"
+      description="Layanan integrasi API akan mengalami pemeliharaan pada pukul 23:00 WIB."
+      variant="warning"
+      :closable="true"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Banner from "@ttdk-design-system/library-svelte/web/banner";
+  import "@ttdk-design-system/library-svelte/web/banner/banner.css";
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px;">
+  <Banner
+    title="Katalog Dataset Kesehatan Nasional"
+    description="Jelajahi dan unduh data agregat fasilitas kesehatan terstandardisasi."
+    variant="default"
+    appearance="gradient"
+    icon={true}
+  />
+  <Banner
+    title="Pemeliharaan Sistem Terjadwal"
+    description="Layanan integrasi API akan mengalami pemeliharaan pada pukul 23:00 WIB."
+    variant="warning"
+    closable={true}
+  />
+</div>
+```

package/dist/web/banner/banner.css

@@ -0,0 +1 @@
+.ttdk-banner{box-sizing:border-box;width:100%;font-family:var(--ttdk-font-sans);border:1px solid #0000;justify-content:space-between;align-items:center;gap:16px;line-height:1.5;transition:background .2s,border-color .2s,box-shadow .2s,color .2s;display:flex;position:relative;overflow:hidden}.ttdk-banner[data-rounded=none]{border-radius:var(--ttdk-radius-none,0px)}.ttdk-banner[data-rounded=sm]{border-radius:var(--ttdk-radius-xs,4px)}.ttdk-banner[data-rounded=md]{border-radius:var(--ttdk-radius-sm,8px)}.ttdk-banner[data-rounded=lg]{border-radius:var(--ttdk-radius-md,12px)}.ttdk-banner[data-rounded=full]{border-radius:var(--ttdk-radius-full,9999px)}.ttdk-banner[data-size=sm]{padding:10px 16px;font-size:13px}.ttdk-banner[data-size=sm] .ttdk-banner-title{font-size:14px}.ttdk-banner[data-size=sm] .ttdk-banner-desc{font-size:12px}.ttdk-banner[data-size=md]{padding:14px 20px;font-size:14px}.ttdk-banner[data-size=md] .ttdk-banner-title{font-size:16px}.ttdk-banner[data-size=md] .ttdk-banner-desc{font-size:13px}.ttdk-banner[data-size=lg]{padding:18px 24px;font-size:15px}.ttdk-banner[data-size=lg] .ttdk-banner-title{font-size:18px}.ttdk-banner[data-size=lg] .ttdk-banner-desc{font-size:14px}.ttdk-banner[data-size=xl]{padding:24px 32px;font-size:16px}.ttdk-banner[data-size=xl] .ttdk-banner-title{font-size:22px}.ttdk-banner[data-size=xl] .ttdk-banner-desc{font-size:15px}.ttdk-banner-main{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.ttdk-banner-icon-wrapper{color:inherit;flex-shrink:0;justify-content:center;align-items:center;display:flex}.ttdk-banner-icon{stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}.ttdk-banner-icon>svg{width:100%;height:100%;display:block}.ttdk-banner-text-group{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.ttdk-banner-title{letter-spacing:-.015em;color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary,#1f2022));font-weight:700;line-height:1.35}.ttdk-banner-desc{color:var(--ttdk-ui-color,var(--ttdk-text-icon-secondary,#62686f));font-weight:400;line-height:1.45}.ttdk-banner-actions{flex-shrink:0;align-items:center;gap:10px;display:flex}.ttdk-banner-close-btn{width:28px;height:28px;color:inherit;opacity:.7;cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:opacity .15s,background-color .15s;display:flex}.ttdk-banner-close-btn svg{stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px}.ttdk-banner-close-btn:hover{opacity:1;background-color:#0000000f}.ttdk-banner[data-appearance=gradient]{border-color:#0000}.ttdk-banner[data-appearance=gradient][data-variant=info]{background:linear-gradient(133.41deg, var(--ttdk-bg-status-info-subtle) 15.99%, var(--ttdk-bg-base-primary) 91.99%);color:var(--ttdk-text-icon-status-info);border-color:#0000}.ttdk-banner[data-appearance=gradient][data-variant=warning]{background:linear-gradient(133.41deg, var(--ttdk-bg-status-warning-subtle) 15.99%, var(--ttdk-bg-base-primary) 91.99%);color:var(--ttdk-text-icon-status-warning);border-color:#0000}.ttdk-banner[data-appearance=gradient][data-variant=danger]{background:linear-gradient(133.41deg, var(--ttdk-bg-status-error-subtle) 15.99%, var(--ttdk-bg-base-primary) 91.99%);color:var(--ttdk-text-icon-status-error);border-color:#0000}.ttdk-banner[data-appearance=gradient][data-variant=success]{background:linear-gradient(133.41deg, var(--ttdk-bg-status-success-subtle) 15.99%, var(--ttdk-bg-base-primary) 91.99%);color:var(--ttdk-text-icon-status-success);border-color:#0000}.ttdk-banner[data-appearance=gradient][data-variant=primary]{background:linear-gradient(133.41deg, var(--ttdk-brand-subtle) 15.99%, var(--ttdk-bg-base-primary) 91.99%);color:var(--ttdk-brand-default);border-color:#0000}.ttdk-banner[data-appearance=subtle][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-banner[data-appearance=subtle][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-banner[data-appearance=subtle][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-banner[data-appearance=subtle][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-banner[data-appearance=subtle][data-variant=primary]{background-color:var(--ttdk-brand-subtle);border-color:var(--ttdk-stroke-border-focus);color:var(--ttdk-brand-default)}.ttdk-banner[data-appearance=solid],.ttdk-banner[data-appearance=solid] .ttdk-banner-title{color:var(--ttdk-color-neutral-white,#fff)}.ttdk-banner[data-appearance=solid] .ttdk-banner-desc{color:#ffffffe6}.ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn:hover{background-color:#fff3}.ttdk-banner[data-appearance=solid][data-variant=info]{background-color:var(--ttdk-bg-status-info);border-color:var(--ttdk-bg-status-info)}.ttdk-banner[data-appearance=solid][data-variant=warning]{background-color:var(--ttdk-bg-status-warning);border-color:var(--ttdk-bg-status-warning)}.ttdk-banner[data-appearance=solid][data-variant=danger]{background-color:var(--ttdk-bg-status-error);border-color:var(--ttdk-bg-status-error)}.ttdk-banner[data-appearance=solid][data-variant=success]{background-color:var(--ttdk-bg-status-success);border-color:var(--ttdk-bg-status-success)}.ttdk-banner[data-appearance=solid][data-variant=primary]{background-color:var(--ttdk-brand-default);border-color:var(--ttdk-brand-default)}.ttdk-banner[data-appearance=outline]{background-color:#0000}.ttdk-banner[data-appearance=outline][data-variant=info]{border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info)}.ttdk-banner[data-appearance=outline][data-variant=warning]{border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning)}.ttdk-banner[data-appearance=outline][data-variant=danger]{border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error)}.ttdk-banner[data-appearance=outline][data-variant=success]{border-color:var(--ttdk-stroke-status-success);color:var(--ttdk-text-icon-status-success)}.ttdk-banner[data-appearance=outline][data-variant=primary]{border-color:var(--ttdk-stroke-border-focus);color:var(--ttdk-brand-default)}.ttdk-banner[data-appearance=flat]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle)}.dark .ttdk-banner,:root.dark .ttdk-banner,html.dark .ttdk-banner,[data-theme=dark] .ttdk-banner{border-color:var(--ttdk-stroke-subtle)}.dark .ttdk-banner .ttdk-banner-title,:root.dark .ttdk-banner .ttdk-banner-title,html.dark .ttdk-banner .ttdk-banner-title,[data-theme=dark] .ttdk-banner .ttdk-banner-title{color:var(--ttdk-text-icon-primary)}.dark .ttdk-banner .ttdk-banner-desc,:root.dark .ttdk-banner .ttdk-banner-desc,html.dark .ttdk-banner .ttdk-banner-desc,[data-theme=dark] .ttdk-banner .ttdk-banner-desc,.dark .ttdk-banner .ttdk-banner-close-btn,:root.dark .ttdk-banner .ttdk-banner-close-btn,html.dark .ttdk-banner .ttdk-banner-close-btn,[data-theme=dark] .ttdk-banner .ttdk-banner-close-btn{color:var(--ttdk-text-icon-secondary)}.dark .ttdk-banner .ttdk-banner-close-btn:hover,:root.dark .ttdk-banner .ttdk-banner-close-btn:hover,html.dark .ttdk-banner .ttdk-banner-close-btn:hover,[data-theme=dark] .ttdk-banner .ttdk-banner-close-btn:hover{color:var(--ttdk-text-icon-primary);background-color:#ffffff1a}.dark .ttdk-banner[data-appearance=gradient][data-variant=primary],:root.dark .ttdk-banner[data-appearance=gradient][data-variant=primary],html.dark .ttdk-banner[data-appearance=gradient][data-variant=primary],[data-theme=dark] .ttdk-banner[data-appearance=gradient][data-variant=primary]{background:linear-gradient(133.41deg, #16b3ac38 15.99%, var(--ttdk-bg-card) 91.99%);color:var(--ttdk-brand-default);border:1px solid #16b3ac59}.dark .ttdk-banner[data-appearance=gradient][data-variant=info],:root.dark .ttdk-banner[data-appearance=gradient][data-variant=info],html.dark .ttdk-banner[data-appearance=gradient][data-variant=info],[data-theme=dark] .ttdk-banner[data-appearance=gradient][data-variant=info]{background:linear-gradient(133.41deg, #2196f338 15.99%, var(--ttdk-bg-card) 91.99%);color:var(--ttdk-text-icon-status-info);border:1px solid #2196f359}.dark .ttdk-banner[data-appearance=gradient][data-variant=success],:root.dark .ttdk-banner[data-appearance=gradient][data-variant=success],html.dark .ttdk-banner[data-appearance=gradient][data-variant=success],[data-theme=dark] .ttdk-banner[data-appearance=gradient][data-variant=success]{background:linear-gradient(133.41deg, #047b5d38 15.99%, var(--ttdk-bg-card) 91.99%);color:var(--ttdk-text-icon-status-success);border:1px solid #8cc2b459}.dark .ttdk-banner[data-appearance=gradient][data-variant=warning],:root.dark .ttdk-banner[data-appearance=gradient][data-variant=warning],html.dark .ttdk-banner[data-appearance=gradient][data-variant=warning],[data-theme=dark] .ttdk-banner[data-appearance=gradient][data-variant=warning]{background:linear-gradient(133.41deg, #fb8c0038 15.99%, var(--ttdk-bg-card) 91.99%);color:var(--ttdk-text-icon-status-warning);border:1px solid #fdca8a59}.dark .ttdk-banner[data-appearance=gradient][data-variant=danger],:root.dark .ttdk-banner[data-appearance=gradient][data-variant=danger],html.dark .ttdk-banner[data-appearance=gradient][data-variant=danger],[data-theme=dark] .ttdk-banner[data-appearance=gradient][data-variant=danger]{background:linear-gradient(133.41deg, #c50a2438 15.99%, var(--ttdk-bg-card) 91.99%);color:var(--ttdk-text-icon-status-error);border:1px solid #c50a2459}.dark .ttdk-banner[data-appearance=subtle][data-variant=primary],:root.dark .ttdk-banner[data-appearance=subtle][data-variant=primary],html.dark .ttdk-banner[data-appearance=subtle][data-variant=primary],[data-theme=dark] .ttdk-banner[data-appearance=subtle][data-variant=primary]{background-color:var(--ttdk-brand-subtle-dark);border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default)}.dark .ttdk-banner[data-appearance=subtle][data-variant=info],:root.dark .ttdk-banner[data-appearance=subtle][data-variant=info],html.dark .ttdk-banner[data-appearance=subtle][data-variant=info],[data-theme=dark] .ttdk-banner[data-appearance=subtle][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)}.dark .ttdk-banner[data-appearance=subtle][data-variant=success],:root.dark .ttdk-banner[data-appearance=subtle][data-variant=success],html.dark .ttdk-banner[data-appearance=subtle][data-variant=success],[data-theme=dark] .ttdk-banner[data-appearance=subtle][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)}.dark .ttdk-banner[data-appearance=subtle][data-variant=warning],:root.dark .ttdk-banner[data-appearance=subtle][data-variant=warning],html.dark .ttdk-banner[data-appearance=subtle][data-variant=warning],[data-theme=dark] .ttdk-banner[data-appearance=subtle][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)}.dark .ttdk-banner[data-appearance=subtle][data-variant=danger],:root.dark .ttdk-banner[data-appearance=subtle][data-variant=danger],html.dark .ttdk-banner[data-appearance=subtle][data-variant=danger],[data-theme=dark] .ttdk-banner[data-appearance=subtle][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)}.dark .ttdk-banner[data-appearance=solid],:root.dark .ttdk-banner[data-appearance=solid],html.dark .ttdk-banner[data-appearance=solid],[data-theme=dark] .ttdk-banner[data-appearance=solid],.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-title,:root.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-title,html.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-title,[data-theme=dark] .ttdk-banner[data-appearance=solid] .ttdk-banner-title{color:var(--ttdk-color-neutral-white,#fff)}.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-desc,:root.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-desc,html.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-desc,[data-theme=dark] .ttdk-banner[data-appearance=solid] .ttdk-banner-desc{color:#ffffffe6}.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn,:root.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn,html.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn,[data-theme=dark] .ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn{color:var(--ttdk-color-neutral-white,#fff)}.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn:hover,:root.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn:hover,html.dark .ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn:hover,[data-theme=dark] .ttdk-banner[data-appearance=solid] .ttdk-banner-close-btn:hover{color:var(--ttdk-color-neutral-white,#fff);background-color:#fff3}.dark .ttdk-banner[data-appearance=outline],:root.dark .ttdk-banner[data-appearance=outline],html.dark .ttdk-banner[data-appearance=outline],[data-theme=dark] .ttdk-banner[data-appearance=outline]{background-color:#0000}.dark .ttdk-banner[data-appearance=outline][data-variant=primary],:root.dark .ttdk-banner[data-appearance=outline][data-variant=primary],html.dark .ttdk-banner[data-appearance=outline][data-variant=primary],[data-theme=dark] .ttdk-banner[data-appearance=outline][data-variant=primary]{border-color:var(--ttdk-stroke-border-focus);color:var(--ttdk-brand-default)}.dark .ttdk-banner[data-appearance=outline][data-variant=info],:root.dark .ttdk-banner[data-appearance=outline][data-variant=info],html.dark .ttdk-banner[data-appearance=outline][data-variant=info],[data-theme=dark] .ttdk-banner[data-appearance=outline][data-variant=info]{border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info)}.dark .ttdk-banner[data-appearance=outline][data-variant=success],:root.dark .ttdk-banner[data-appearance=outline][data-variant=success],html.dark .ttdk-banner[data-appearance=outline][data-variant=success],[data-theme=dark] .ttdk-banner[data-appearance=outline][data-variant=success]{border-color:var(--ttdk-stroke-status-success);color:var(--ttdk-text-icon-status-success)}.dark .ttdk-banner[data-appearance=outline][data-variant=warning],:root.dark .ttdk-banner[data-appearance=outline][data-variant=warning],html.dark .ttdk-banner[data-appearance=outline][data-variant=warning],[data-theme=dark] .ttdk-banner[data-appearance=outline][data-variant=warning]{border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning)}.dark .ttdk-banner[data-appearance=outline][data-variant=danger],:root.dark .ttdk-banner[data-appearance=outline][data-variant=danger],html.dark .ttdk-banner[data-appearance=outline][data-variant=danger],[data-theme=dark] .ttdk-banner[data-appearance=outline][data-variant=danger]{border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error)}.dark .ttdk-banner[data-appearance=flat],:root.dark .ttdk-banner[data-appearance=flat],html.dark .ttdk-banner[data-appearance=flat],[data-theme=dark] .ttdk-banner[data-appearance=flat]{background-color:var(--ttdk-bg-card);border-color:var(--ttdk-stroke-subtle)}

package/dist/web/banner/banner.svelte

@@ -0,0 +1,180 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let onClose = void 0;
+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 title = void 0;
+export let ui = void 0;
+export let iconColor = void 0;
+export let iconSize = void 0;
+export let customIcon = void 0;
+export let icon = void 0;
+export let iconClass = void 0;
+export let iconStyle = void 0;
+export let titleClass = void 0;
+export let titleStyle = void 0;
+export let description = void 0;
+export let descClass = void 0;
+export let descStyle = void 0;
+export let closable = void 0;
+export let closableClass = void 0;
+export let closableStyle = 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;
+}
+function handleDismiss(event) {
+  isVisible = false;
+  if (onClose) {
+    onClose(event);
+  }
+}
+let isVisible = true;
+</script>
+
+{#if isVisible}
+  <div
+    style={stringifyStyles({
+      ...buildUiVars(ui),
+      ...(iconColor
+        ? {
+            "--ttdk-ui-icon-color": iconColor,
+          }
+        : {}),
+      ...(iconSize
+        ? {
+            "--ttdk-ui-icon-size": iconSize,
+          }
+        : {}),
+    })}
+    role="region"
+    class={`ttdk-banner ${className || ""}`.trim()}
+    data-variant={variant || "primary"}
+    data-appearance={appearance || "gradient"}
+    data-size={size || "md"}
+    data-rounded={rounded || "md"}
+    aria-label={title || "Banner"}
+  >
+    <div class="ttdk-banner-main">
+      {#if customIcon || (icon && icon !== false)}
+        <div
+          style={stringifyStyles({
+            ...buildUiVars(iconStyle),
+          })}
+          class={`ttdk-banner-icon-wrapper ${iconClass || ""}`.trim()}
+        >
+          {#if customIcon || (icon && typeof icon !== "boolean")}
+            <span class="ttdk-banner-icon">{customIcon || icon}</span>
+          {/if}
+          {#if !customIcon && icon === true}
+            {#if !variant || variant === "primary"}
+              <svg class="ttdk-banner-icon" viewBox="0 0 24 24" fill="none"
+                ><path
+                  d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+                /></svg
+              >
+            {/if}
+
+            {#if variant === "info"}
+              <svg class="ttdk-banner-icon" viewBox="0 0 24 24" fill="none"
+                ><circle cx="12" cy="12" r="10" /><line
+                  x1="12"
+                  y1="16"
+                  x2="12"
+                  y2="12"
+                /><line x1="12" y1="8" x2="12.01" y2="8" /></svg
+              >
+            {/if}
+
+            {#if variant === "success"}
+              <svg class="ttdk-banner-icon" viewBox="0 0 24 24" fill="none"
+                ><circle cx="12" cy="12" r="10" /><polyline
+                  points="9 12 11 14 15 10"
+                /></svg
+              >
+            {/if}
+
+            {#if variant === "warning"}
+              <svg class="ttdk-banner-icon" viewBox="0 0 24 24" fill="none"
+                ><path
+                  d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"
+                /><line x1="12" y1="9" x2="12" y2="13" /><line
+                  x1="12"
+                  y1="17"
+                  x2="12.01"
+                  y2="17"
+                /></svg
+              >
+            {/if}
+
+            {#if variant === "danger"}
+              <svg class="ttdk-banner-icon" viewBox="0 0 24 24" fill="none"
+                ><circle cx="12" cy="12" r="10" /><line
+                  x1="12"
+                  y1="8"
+                  x2="12"
+                  y2="12"
+                /><line x1="12" y1="16" x2="12.01" y2="16" /></svg
+              >
+            {/if}
+          {/if}
+        </div>
+      {/if}
+      <div class="ttdk-banner-text-group">
+        {#if title}
+          <div
+            style={stringifyStyles({
+              ...buildUiVars(titleStyle),
+            })}
+            class={`ttdk-banner-title ${titleClass || ""}`.trim()}
+          >
+            {title}
+          </div>
+        {/if}
+        {#if description}
+          <div
+            style={stringifyStyles({
+              ...buildUiVars(descStyle),
+            })}
+            class={`ttdk-banner-desc ${descClass || ""}`.trim()}
+          >
+            {description}
+          </div>
+        {/if}<slot />
+      </div>
+    </div>
+    {#if closable}
+      <div class="ttdk-banner-actions">
+        <button
+          style={stringifyStyles({
+            ...buildUiVars(closableStyle),
+          })}
+          type="button"
+          aria-label="Tutup banner"
+          class={`ttdk-banner-close-btn ${closableClass || ""}`.trim()}
+          on:click={(e) => {
+            handleDismiss(e);
+          }}
+          ><svg viewBox="0 0 24 24" fill="none"
+            ><line x1="18" y1="6" x2="6" y2="18" /><line
+              x1="6"
+              y1="6"
+              x2="18"
+              y2="18"
+            /></svg
+          ></button
+        >
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,172 @@
+import { SvelteComponent } from "svelte";
+export type BannerUiProps = UiProps;
+export interface BannerProps {
+    /**
+     * Judul utama banner yang ditampilkan dengan tipografi tegas (misal: "Katalog Dataset Publik").
+     */
+    title?: string;
+    /**
+     * Deskripsi atau pesan teks penjelasan tambahan di bawah judul.
+     */
+    description?: string;
+    /**
+     * Varian warna semantik tema banner:
+     * - `'primary'`: Brand Teal utama (#16B3AC).
+     * - `'success'`: Hijau konfirmasi keberhasilan.
+     * - `'info'`: Biru informasi.
+     * - `'warning'`: Kuning / amber peringatan.
+     * - `'danger'`: Merah kesalahan / bahaya.
+     *
+     * @default 'primary'
+     */
+    variant?: "primary" | "success" | "info" | "warning" | "danger";
+    /**
+     * Gaya tampilan visual latar belakang banner.
+     * - `'gradient'`: Latar belakang gradasi halus elegan (standar sesuai desain katalog).
+     * - `'subtle'`: Latar belakang warna lembut transparan.
+     * - `'solid'`: Latar belakang warna pekat penuh dengan teks kontras tinggi.
+     * - `'outline'`: Garis tepi minimalis tanpa latar belakang gradasi.
+     * - `'flat'`: Latar polos solid netral.
+     *
+     * @default 'gradient'
+     */
+    appearance?: "gradient" | "subtle" | "solid" | "outline" | "flat";
+    /**
+     * Skala ukuran tinggi dan padding ruang dalam banner.
+     * - `'sm'`: Kompak (padding 10px 16px, judul 14px).
+     * - `'md'`: Standar (padding 14px 20px, judul 16px).
+     * - `'lg'`: Besar / Page Header (padding 18px 24px, judul 18px).
+     * - `'xl'`: Ekstra Besar / Hero Banner (padding 24px 32px, judul 22px).
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * Bentuk sudut kelengkungan container banner.
+     * - `'none'`: Sudut siku 0px.
+     * - `'sm'`: Sudut 4px.
+     * - `'md'`: Sudut 8px (standar).
+     * - `'lg'`: Sudut 12px.
+     * - `'full'`: Sudut kapsul 9999px.
+     *
+     * @default 'md'
+     */
+    rounded?: "none" | "sm" | "md" | "lg" | "full";
+    /**
+     * Menampilkan ikon indikator status semantik (boolean) atau elemen ikon kustom.
+     *
+     * @default false
+     */
+    icon?: boolean | any;
+    /**
+     * Elemen ikon SVG kustom untuk menggantikan ikon bawaan banner.
+     */
+    customIcon?: any;
+    /**
+     * Warna kustom untuk ikon banner secara langsung.
+     */
+    iconColor?: string;
+    /**
+     * Ukuran kustom untuk ikon banner secara langsung.
+     */
+    iconSize?: string;
+    /**
+     * Style kustom untuk ikon banner (UiProps).
+     */
+    iconStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk ikon banner.
+     */
+    iconClass?: string;
+    /**
+     * Style kustom untuk judul banner (UiProps).
+     */
+    titleStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk judul banner.
+     */
+    titleClass?: string;
+    /**
+     * Style kustom untuk deskripsi banner (UiProps).
+     */
+    descStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk deskripsi banner.
+     */
+    descClass?: string;
+    /**
+     * Menampilkan tombol silang (x) untuk menutup atau menyembunyikan banner.
+     *
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * Style kustom untuk tombol tutup banner (UiProps).
+     */
+    closableStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk tombol tutup banner.
+     */
+    closableClass?: string;
+    /**
+     * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+     */
+    ui?: UiProps;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Konten kustom tambahan / isi banner (children slot).
+     */
+    children?: any;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Event callback saat tombol tutup diklik.
+     */
+    onClose?: (event?: any) => void;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        onClose?: BannerProps["onClose"];
+        className?: BannerProps["className"];
+        variant?: BannerProps["variant"];
+        appearance?: BannerProps["appearance"];
+        size?: BannerProps["size"];
+        rounded?: BannerProps["rounded"];
+        title?: BannerProps["title"];
+        ui?: BannerProps["ui"];
+        iconColor?: BannerProps["iconColor"];
+        iconSize?: BannerProps["iconSize"];
+        customIcon?: BannerProps["customIcon"];
+        icon?: BannerProps["icon"];
+        iconClass?: BannerProps["iconClass"];
+        iconStyle?: BannerProps["iconStyle"];
+        titleClass?: BannerProps["titleClass"];
+        titleStyle?: BannerProps["titleStyle"];
+        description?: BannerProps["description"];
+        descClass?: BannerProps["descClass"];
+        descStyle?: BannerProps["descStyle"];
+        closable?: BannerProps["closable"];
+        closableClass?: BannerProps["closableClass"];
+        closableStyle?: BannerProps["closableStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type BannerProps_ = typeof __propDef.props;
+export type BannerEvents = typeof __propDef.events;
+export type BannerSlots = typeof __propDef.slots;
+export default class Banner extends SvelteComponent<BannerProps_, BannerEvents, BannerSlots> {
+}
+export {};

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

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

package/dist/web/banner/index.js

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