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

package/src/web/alert/alert.tsx

@@ -0,0 +1,318 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+
+export type AlertUiProps = UiProps;
+export interface AlertProps {
+  /**
+   * Inline CSS style kustom.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Judul utama alert.
+   */
+  title?: string;
+
+  /**
+   * Deskripsi atau pesan teks penjelasan alert.
+   */
+  description?: string;
+
+  /**
+   * Varian warna semantik alert:
+   * - `'neutral'`: Netral (border hitam/putih, background base).
+   * - `'info'`: Biru informasi (#2196F3).
+   * - `'success'`: Hijau konfirmasi keberhasilan (#04B761).
+   * - `'warning'`: Kuning / amber peringatan (#F88000).
+   * - `'danger'`: Merah kesalahan / bahaya (#D0021B).
+   *
+   * @default 'neutral'
+   */
+  variant?: "neutral" | "info" | "success" | "warning" | "danger";
+
+  /**
+   * Gaya tampilan visual alert:
+   * - `'soft'`: Latar belakang warna transparan lembut (standar).
+   * - `'solid'`: Latar belakang warna solid pekat dengan teks putih.
+   * - `'outline'`: Garis tepi dengan latar belakang transparan.
+   * - `'subtle'`: Latar belakang abu netral dengan aksen border tipis.
+   *
+   * @default 'soft'
+   */
+  appearance?: "soft" | "solid" | "outline" | "subtle";
+
+  /**
+   * Sudut kelengkungan alert:
+   * - `'none'`: Sudut tajam 0px.
+   * - `'sm'`: Radius halus 4px.
+   * - `'md'`: Radius sedang 8px (standar).
+   * - `'lg'`: Radius melengkung 12px.
+   * - `'full'`: Lingkaran penuh 9999px.
+   *
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Ikon SVG kustom yang menggantikan ikon bawaan, atau boolean untuk menampilkan/menyembunyikan ikon.
+   * @default true
+   */
+  icon?: any;
+
+  /**
+   * Warna ikon kustom secara langsung.
+   */
+  iconColor?: string;
+
+  /**
+   * Ukuran ikon kustom secara langsung (misal: '20px', '1.5rem').
+   */
+  iconSize?: string;
+
+  /**
+   * Menyembunyikan ikon pada alert.
+   * @default false
+   */
+  hideIcon?: boolean;
+
+  /**
+   * Menampilkan tombol tutup (silang) untuk menutup alert secara interaktif.
+   * @default false
+   */
+  closable?: boolean;
+
+  /**
+   * Callback saat tombol tutup diklik.
+   */
+  onClose?: (event: any) => void;
+
+  /**
+   * Membuat alert memenuhi lebar kontainer (100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Style kustom untuk judul alert (UiProps / style object + pseudo support).
+   */
+  titleStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk judul alert.
+   */
+  titleClass?: string;
+
+  /**
+   * Style kustom untuk deskripsi alert (UiProps / style object + pseudo support).
+   */
+  descStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk deskripsi alert.
+   */
+  descClass?: string;
+
+  /**
+   * Style kustom untuk ikon alert (UiProps / style object + pseudo support).
+   */
+  iconStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk ikon alert.
+   */
+  iconClass?: string;
+
+  /**
+   * Style kustom untuk tombol tutup alert (UiProps / style object + pseudo support).
+   */
+  closableStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tutup alert.
+   */
+  closableClass?: string;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom tambahan di dalam alert.
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Alert untuk menampilkan pesan umpan balik kontekstual statis, instruksi peringatan, atau status penting pada halaman.
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Alert(props: AlertProps) {
+  const [isVisible, setIsVisible] = useState(() => true);
+
+  function handleDismiss(event: any) {
+    setIsVisible(false);
+    if (props.onClose) {
+      props.onClose(event);
+    }
+  }
+
+  return (
+    <>
+      {isVisible ? (
+        <>
+          <div
+            role="alert"
+            className={`ttdk-alert ${props.className || ""}`.trim()}
+            data-variant={props.variant || "neutral"}
+            data-appearance={props.appearance || "soft"}
+            data-rounded={props.rounded || "md"}
+            data-block={props.block ? "true" : "false"}
+            style={{
+              ...buildUiVars(props.ui),
+              ...(props.iconColor
+                ? {
+                    "--ttdk-ui-icon-color": props.iconColor,
+                  }
+                : {}),
+              ...(props.iconSize
+                ? {
+                    "--ttdk-ui-icon-size": props.iconSize,
+                  }
+                : {}),
+              ...((props as any)["style"] || {}),
+              ...props.style,
+            }}
+          >
+            {!props.hideIcon && props.icon !== false ? (
+              <div
+                className={`ttdk-alert-icon-wrapper ${
+                  props.iconClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiVars(props.iconStyle),
+                }}
+              >
+                {props.icon && typeof props.icon !== "boolean" ? (
+                  <span className="ttdk-alert-icon">{props.icon}</span>
+                ) : null}
+                {!props.icon || props.icon === true ? (
+                  <>
+                    {props.variant === "success" ? (
+                      <svg
+                        className="ttdk-alert-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                      >
+                        <circle cx="12" cy="12" r="10" />
+                        <polyline points="9 12 11 14 15 10" />
+                      </svg>
+                    ) : null}
+                    {props.variant === "warning" ? (
+                      <svg
+                        className="ttdk-alert-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>
+                    ) : null}
+                    {props.variant === "danger" ? (
+                      <svg
+                        className="ttdk-alert-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>
+                    ) : null}
+                    {props.variant === "info" ? (
+                      <svg
+                        className="ttdk-alert-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>
+                    ) : null}
+                    {!props.variant || props.variant === "neutral" ? (
+                      <svg
+                        className="ttdk-alert-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>
+                    ) : null}
+                  </>
+                ) : null}
+              </div>
+            ) : null}
+            <div className="ttdk-alert-content">
+              {props.title ? (
+                <div
+                  className={`ttdk-alert-title ${
+                    props.titleClass || ""
+                  }`.trim()}
+                  style={{
+                    ...buildUiVars(props.titleStyle),
+                  }}
+                >
+                  {props.title}
+                </div>
+              ) : null}
+              {props.description ? (
+                <div
+                  className={`ttdk-alert-description ${
+                    props.descClass || ""
+                  }`.trim()}
+                  style={{
+                    ...buildUiVars(props.descStyle),
+                  }}
+                >
+                  {props.description}
+                </div>
+              ) : null}
+              <>{props.children}</>
+            </div>
+            {props.closable ? (
+              <button
+                type="button"
+                aria-label="Tutup notifikasi"
+                className={`ttdk-alert-close-btn ${
+                  props.closableClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiVars(props.closableStyle),
+                }}
+                onClick={(event) => handleDismiss(event)}
+              >
+                <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>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default Alert;
+
+export { Alert };

package/src/web/alert/index.ts

@@ -0,0 +1,3 @@
+export { default as Alert } from './alert';
+export { default } from './alert';
+export type { AlertProps, AlertUiProps } from './alert'

package/src/web/alert/manifest.json

@@ -0,0 +1,240 @@
+{
+  "name": "@ttdk-design-system/alert",
+  "component": "Alert",
+  "folder": "alert",
+  "description": "Komponen Alert untuk menampilkan pesan umpan balik kontekstual statis, instruksi peringatan, atau status penting pada halaman.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "alert.css",
+      "importPath": "web/alert/alert.css"
+    }
+  ],
+  "props": {
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style kustom.",
+      "example": null,
+      "param": null
+    },
+    "title": {
+      "name": "title",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Judul utama alert.",
+      "example": null,
+      "param": null
+    },
+    "description": {
+      "name": "description",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Deskripsi atau pesan teks penjelasan alert.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'",
+      "optional": true,
+      "default": "neutral",
+      "description": "Varian warna semantik alert: - `'neutral'`: Netral (border hitam/putih, background base). - `'info'`: Biru informasi (#2196F3). - `'success'`: Hijau konfirmasi keberhasilan (#04B761). - `'warning'`: Kuning / amber peringatan (#F88000). - `'danger'`: Merah kesalahan / bahaya (#D0021B).",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'soft' | 'solid' | 'outline' | 'subtle'",
+      "optional": true,
+      "default": "soft",
+      "description": "Gaya tampilan visual alert: - `'soft'`: Latar belakang warna transparan lembut (standar). - `'solid'`: Latar belakang warna solid pekat dengan teks putih. - `'outline'`: Garis tepi dengan latar belakang transparan. - `'subtle'`: Latar belakang abu netral dengan aksen border tipis.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Sudut kelengkungan alert: - `'none'`: Sudut tajam 0px. - `'sm'`: Radius halus 4px. - `'md'`: Radius sedang 8px (standar). - `'lg'`: Radius melengkung 12px. - `'full'`: Lingkaran penuh 9999px.",
+      "example": null,
+      "param": null
+    },
+    "icon": {
+      "name": "icon",
+      "type": "any",
+      "optional": true,
+      "default": "true",
+      "description": "Ikon SVG kustom yang menggantikan ikon bawaan, atau boolean untuk menampilkan/menyembunyikan ikon.",
+      "example": null,
+      "param": null
+    },
+    "iconColor": {
+      "name": "iconColor",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Warna ikon kustom secara langsung.",
+      "example": null,
+      "param": null
+    },
+    "iconSize": {
+      "name": "iconSize",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Ukuran ikon kustom secara langsung (misal: '20px', '1.5rem').",
+      "example": null,
+      "param": null
+    },
+    "hideIcon": {
+      "name": "hideIcon",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menyembunyikan ikon pada alert.",
+      "example": null,
+      "param": null
+    },
+    "closable": {
+      "name": "closable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol tutup (silang) untuk menutup alert secara interaktif.",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "(event: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback saat tombol tutup diklik.",
+      "example": null,
+      "param": null
+    },
+    "block": {
+      "name": "block",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Membuat alert memenuhi lebar kontainer (100%).",
+      "example": null,
+      "param": null
+    },
+    "titleStyle": {
+      "name": "titleStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk judul alert (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "titleClass": {
+      "name": "titleClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk judul alert.",
+      "example": null,
+      "param": null
+    },
+    "descStyle": {
+      "name": "descStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk deskripsi alert (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "descClass": {
+      "name": "descClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk deskripsi alert.",
+      "example": null,
+      "param": null
+    },
+    "iconStyle": {
+      "name": "iconStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk ikon alert (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "iconClass": {
+      "name": "iconClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk ikon alert.",
+      "example": null,
+      "param": null
+    },
+    "closableStyle": {
+      "name": "closableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tutup alert (UiProps / style object + pseudo support).",
+      "example": null,
+      "param": null
+    },
+    "closableClass": {
+      "name": "closableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tutup alert.",
+      "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
+    },
+    "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 tambahan di dalam alert.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/avatar/AI_GUIDE.md

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