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

package/src/web/chip/AI_GUIDE.md

@@ -0,0 +1,186 @@
+# <Chip /> — TTDK Component Reference
+
+TTDK Chip 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/chip/chip.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Chip from "@ttdk-design-system/library-react/web/chip";
+
+// Vue 3
+import Chip from "@ttdk-design-system/library-vue/web/chip";
+
+// Svelte
+import Chip from "@ttdk-design-system/library-svelte/web/chip";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label?` | `string` | `-` | Teks label yang ditampilkan pada chip. |
+| `selected?` | `boolean` | `false` | Status apakah chip sedang dalam kondisi terpilih (selected). |
+| `variant?` | `| 'primary'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'neutral'
+  | 'disabled'` | `primary` | Varian warna semantik tema chip: - `'primary'`: Brand Teal utama (#00B5AD). - `'success'`: Sukses hijau (#04B761). - `'info'`: Biru informasi (#2196F3). - `'warning'`: Peringatan kuning / amber (#F88000). - `'danger'`: Bahaya / merah (#D0021B). - `'neutral'`: Netral abu-abu. - `'disabled'`: Status nonaktif (disabled). |
+| `appearance?` | `'soft' | 'solid' | 'outline'` | `soft` | Tipe tampilan visual chip: - `'soft'`: Background warna transparan lembut (default). - `'solid'`: Background warna solid pekat. - `'outline'`: Border tipis dengan background transparan. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran chip: - `'sm'`: Tinggi 28px, font 12px. - `'md'`: Tinggi 32px, font 13px (standar). - `'lg'`: Tinggi 38px, font 15px. |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `full` | Bentuk sudut kelengkungan: - `'full'`: Bentuk kapsul / pill 9999px (default). - `'none'`: Persegi lancip 0px. - `'sm'`: Sudut melengkung halus 4px. - `'md'`: Sudut melengkung sedang 6px. - `'lg'`: Sudut melengkung besar 8px. |
+| `closable?` | `boolean` | `false` | Menampilkan tombol silang (x) untuk menghapus / menutup chip. |
+| `disabled?` | `boolean` | `false` | Menonaktifkan interaksi klik pada chip. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `labelStyle?` | `UiProps` | `-` | Style kustom untuk teks label chip (UiProps). |
+| `labelClass?` | `string` | `-` | Class CSS kustom untuk teks label chip (Tailwind / class kustom). |
+| `closableStyle?` | `UiProps` | `-` | Style kustom untuk tombol tutup chip (UiProps). |
+| `closableClass?` | `string` | `-` | Class CSS kustom untuk tombol tutup chip (Tailwind / class kustom). |
+| `onClick?` | `(event?: any) => void` | `-` | Event handler saat chip diklik (toggle select atau trigger aksi). |
+| `onClose?` | `(event?: any) => void` | `-` | Event handler saat tombol close (x) diklik. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Konten kustom / icon kustom yang disisipkan di dalam chip. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Chip from "@ttdk-design-system/library-react/web/chip";
+import "@ttdk-design-system/library-react/web/chip/chip.css";
+
+export function Example() {
+  const [selected, setSelected] = useState<string[]>(['puskesmas']);
+
+  const toggle = (val: string) => {
+    setSelected((prev) =>
+      prev.includes(val) ? prev.filter((i) => i !== val) : [...prev, val]
+    );
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+      <Chip
+        label="Puskesmas"
+        variant="action"
+        selected={selected.includes('puskesmas')}
+        onClick={() => toggle('puskesmas')}
+      />
+      <Chip
+        label="Rumah Sakit"
+        variant="action"
+        selected={selected.includes('rs')}
+        onClick={() => toggle('rs')}
+      />
+      <Chip
+        label="Klinik"
+        variant="action"
+        selected={selected.includes('klinik')}
+        onClick={() => toggle('klinik')}
+      />
+      <Chip
+        label="Laboratorium"
+        closable
+        onClose={() => alert('Chip dihapus')}
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Chip from "@ttdk-design-system/library-vue/web/chip";
+import "@ttdk-design-system/library-vue/web/chip/chip.css";
+
+const selected = ref(['puskesmas']);
+
+const toggle = (val: string) => {
+  if (selected.value.includes(val)) {
+    selected.value = selected.value.filter((i) => i !== val);
+  } else {
+    selected.value.push(val);
+  }
+};
+</script>
+
+<template>
+  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+    <Chip
+      label="Puskesmas"
+      variant="action"
+      :selected="selected.includes('puskesmas')"
+      @click="() => toggle('puskesmas')"
+    />
+    <Chip
+      label="Rumah Sakit"
+      variant="action"
+      :selected="selected.includes('rs')"
+      @click="() => toggle('rs')"
+    />
+    <Chip
+      label="Klinik"
+      variant="action"
+      :selected="selected.includes('klinik')"
+      @click="() => toggle('klinik')"
+    />
+    <Chip
+      label="Laboratorium"
+      :closable="true"
+      @close="() => alert('Chip dihapus')"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Chip from "@ttdk-design-system/library-svelte/web/chip";
+  import "@ttdk-design-system/library-svelte/web/chip/chip.css";
+
+  let selected = ['puskesmas'];
+
+  const toggle = (val: string) => {
+    if (selected.includes(val)) {
+      selected = selected.filter((i) => i !== val);
+    } else {
+      selected = [...selected, val];
+    }
+  };
+</script>
+
+<div style="display: flex; gap: 8px; flex-wrap: wrap;">
+  <Chip
+    label="Puskesmas"
+    variant="action"
+    selected={selected.includes('puskesmas')}
+    on:click={() => toggle('puskesmas')}
+  />
+  <Chip
+    label="Rumah Sakit"
+    variant="action"
+    selected={selected.includes('rs')}
+    on:click={() => toggle('rs')}
+  />
+  <Chip
+    label="Klinik"
+    variant="action"
+    selected={selected.includes('klinik')}
+    on:click={() => toggle('klinik')}
+  />
+  <Chip
+    label="Laboratorium"
+    closable={true}
+    on:close={() => alert('Chip dihapus')}
+  />
+</div>
+```

package/src/web/chip/chip.css

@@ -0,0 +1 @@
+.ttdk-chip{font-family:var(--ttdk-font-sans);font-weight:var(--ttdk-font-weight-medium);line-height:var(--ttdk-line-height-tight);letter-spacing:.15px;box-sizing:border-box;user-select:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:var(--ttdk-bg-base-primary);border:1px solid var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary);border-radius:var(--ttdk-radius-full);outline:none;justify-content:center;align-items:center;text-decoration:none;transition:all .15s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative}.ttdk-chip:focus-visible{box-shadow:0 0 0 2px var(--ttdk-stroke-border-focus)}.ttdk-chip:hover:not([data-disabled=true]):not([data-selected=true]){border-color:var(--ttdk-stroke-border-focus);color:var(--ttdk-text-icon-primary)}.ttdk-chip:active:not([data-disabled=true]){transform:scale(.97)}.ttdk-chip[data-disabled=true],.ttdk-chip[data-variant=disabled],.ttdk-chip[data-variant=disable]{opacity:.75;background-color:var(--ttdk-bg-secondary-disabled)!important;border-color:var(--ttdk-stroke-subtle)!important;color:var(--ttdk-text-icon-disabled)!important;cursor:not-allowed!important;pointer-events:none!important}.ttdk-chip[data-size=xs]{height:24px;padding:0 var(--ttdk-spacing-xs);gap:var(--ttdk-spacing-xxs);font-size:11px}.ttdk-chip[data-size=sm]{height:28px;font-size:var(--ttdk-font-size-12);gap:5px;padding:0 10px}.ttdk-chip[data-size=md]{gap:6px;height:32px;padding:0 14px;font-size:13px}.ttdk-chip[data-size=lg]{gap:var(--ttdk-spacing-xs);height:38px;padding:0 18px;font-size:15px}.ttdk-chip[data-rounded=full]{border-radius:var(--ttdk-radius-full)}.ttdk-chip[data-rounded=lg]{border-radius:var(--ttdk-radius-md)}.ttdk-chip[data-rounded=md]{border-radius:var(--ttdk-radius-sm)}.ttdk-chip[data-rounded=sm]{border-radius:var(--ttdk-radius-xs)}.ttdk-chip[data-rounded=none]{border-radius:var(--ttdk-radius-none)}.ttdk-chip[data-selected=false]{background-color:var(--ttdk-bg-base-primary);border:1px solid var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary)}.ttdk-chip[data-selected=false]:hover:not([data-disabled=true]):not([data-variant=disabled]){border-color:var(--ttdk-stroke-border-focus);color:var(--ttdk-text-icon-primary)}.ttdk-chip[data-appearance=soft][data-variant=primary]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-selected=true][data-variant=primary]{background-color:var(--ttdk-brand-subtle);border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default)}.ttdk-chip[data-appearance=soft][data-variant=success]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-selected=true][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-chip[data-appearance=soft][data-variant=info]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-selected=true][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-chip[data-appearance=soft][data-variant=warning]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-selected=true][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-chip[data-appearance=soft][data-variant=danger]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-selected=true][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-chip[data-variant=neutral]:not([data-selected=false]),.ttdk-chip[data-variant=base]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-variant=neutral]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-variant=base]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-selected=true][data-variant=neutral],.ttdk-chip[data-appearance=soft][data-selected=true][data-variant=base]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary)}.ttdk-chip[data-variant=disable]:not([data-selected=false]),.ttdk-chip[data-variant=disabled]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-variant=disable]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-variant=disabled]:not([data-selected=false]),.ttdk-chip[data-appearance=soft][data-selected=true][data-variant=disable],.ttdk-chip[data-appearance=soft][data-selected=true][data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled)}.ttdk-chip[data-appearance=solid][data-variant=primary]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=primary]{background-color:var(--ttdk-brand-default);border-color:var(--ttdk-brand-default);color:var(--ttdk-color-white)}.ttdk-chip[data-appearance=solid][data-variant=success]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=success]{background-color:var(--ttdk-bg-status-success);border-color:var(--ttdk-bg-status-success);color:var(--ttdk-color-white)}.ttdk-chip[data-appearance=solid][data-variant=info]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=info]{background-color:var(--ttdk-bg-status-info);border-color:var(--ttdk-bg-status-info);color:var(--ttdk-color-white)}.ttdk-chip[data-appearance=solid][data-variant=warning]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=warning]{background-color:var(--ttdk-bg-status-warning);border-color:var(--ttdk-bg-status-warning);color:var(--ttdk-color-black)}.ttdk-chip[data-appearance=solid][data-variant=danger]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=danger]{background-color:var(--ttdk-bg-status-error);border-color:var(--ttdk-bg-status-error);color:var(--ttdk-color-white)}.ttdk-chip[data-appearance=solid][data-variant=neutral]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-variant=base]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=neutral],.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=base]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary)}.ttdk-chip[data-appearance=solid][data-variant=disable]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-variant=disabled]:not([data-selected=false]),.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=disable],.ttdk-chip[data-appearance=solid][data-selected=true][data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled)}.ttdk-chip[data-appearance=outline]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-selected=true]{background-color:#0000}.ttdk-chip[data-appearance=outline][data-variant=primary]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=primary]{border-color:var(--ttdk-brand-default);color:var(--ttdk-brand-default)}.ttdk-chip[data-appearance=outline][data-variant=success]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=success]{border-color:var(--ttdk-stroke-status-success);color:var(--ttdk-text-icon-status-success)}.ttdk-chip[data-appearance=outline][data-variant=info]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=info]{border-color:var(--ttdk-stroke-status-info);color:var(--ttdk-text-icon-status-info)}.ttdk-chip[data-appearance=outline][data-variant=warning]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=warning]{border-color:var(--ttdk-stroke-status-warning);color:var(--ttdk-text-icon-status-warning)}.ttdk-chip[data-appearance=outline][data-variant=danger]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=danger]{border-color:var(--ttdk-stroke-status-error);color:var(--ttdk-text-icon-status-error)}.ttdk-chip[data-appearance=outline][data-variant=neutral]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-variant=base]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=neutral],.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=base]{border-color:var(--ttdk-stroke-divider);color:var(--ttdk-text-icon-primary)}.ttdk-chip[data-appearance=outline][data-variant=disable]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-variant=disabled]:not([data-selected=false]),.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=disable],.ttdk-chip[data-appearance=outline][data-selected=true][data-variant=disabled]{border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled)}.dark .ttdk-chip[data-appearance=soft][data-variant=primary]:not([data-selected=false]),[data-theme=dark] .ttdk-chip[data-appearance=soft][data-variant=primary]:not([data-selected=false]),.dark .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=primary],[data-theme=dark] .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=primary]{background-color:var(--ttdk-brand-subtle-dark);border-color:var(--ttdk-brand-default)}.dark .ttdk-chip[data-appearance=soft][data-variant=success]:not([data-selected=false]),[data-theme=dark] .ttdk-chip[data-appearance=soft][data-variant=success]:not([data-selected=false]),.dark .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=success],[data-theme=dark] .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=success]{background-color:var(--ttdk-bg-status-success-subtle);border-color:var(--ttdk-stroke-status-success)}.dark .ttdk-chip[data-appearance=soft][data-variant=info]:not([data-selected=false]),[data-theme=dark] .ttdk-chip[data-appearance=soft][data-variant=info]:not([data-selected=false]),.dark .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=info],[data-theme=dark] .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=info]{background-color:var(--ttdk-bg-status-info-subtle);border-color:var(--ttdk-stroke-status-info)}.dark .ttdk-chip[data-appearance=soft][data-variant=warning]:not([data-selected=false]),[data-theme=dark] .ttdk-chip[data-appearance=soft][data-variant=warning]:not([data-selected=false]),.dark .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=warning],[data-theme=dark] .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=warning]{background-color:var(--ttdk-bg-status-warning-subtle);border-color:var(--ttdk-stroke-status-warning)}.dark .ttdk-chip[data-appearance=soft][data-variant=danger]:not([data-selected=false]),[data-theme=dark] .ttdk-chip[data-appearance=soft][data-variant=danger]:not([data-selected=false]),.dark .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=danger],[data-theme=dark] .ttdk-chip[data-appearance=soft][data-selected=true][data-variant=danger]{background-color:var(--ttdk-bg-status-error-subtle);border-color:var(--ttdk-stroke-status-error)}.dark .ttdk-chip[data-appearance=solid][data-variant=neutral],[data-theme=dark] .ttdk-chip[data-appearance=solid][data-variant=neutral],.dark .ttdk-chip[data-appearance=solid][data-variant=base],[data-theme=dark] .ttdk-chip[data-appearance=solid][data-variant=base]{background-color:var(--ttdk-bg-stay-black);border-color:var(--ttdk-bg-stay-black);color:var(--ttdk-text-icon-stay-white)}.dark .ttdk-chip[data-appearance=soft][data-variant=neutral],[data-theme=dark] .ttdk-chip[data-appearance=soft][data-variant=neutral],.dark .ttdk-chip[data-appearance=soft][data-variant=base],[data-theme=dark] .ttdk-chip[data-appearance=soft][data-variant=base],.dark .ttdk-chip[data-variant=neutral],[data-theme=dark] .ttdk-chip[data-variant=neutral],.dark .ttdk-chip[data-variant=base],[data-theme=dark] .ttdk-chip[data-variant=base]{background-color:var(--ttdk-color-neutral-900);border-color:var(--ttdk-stroke-strong);color:var(--ttdk-text-icon-primary)}.dark .ttdk-chip[data-appearance=outline][data-variant=neutral],[data-theme=dark] .ttdk-chip[data-appearance=outline][data-variant=neutral],.dark .ttdk-chip[data-appearance=outline][data-variant=base],[data-theme=dark] .ttdk-chip[data-appearance=outline][data-variant=base]{background-color:var(--ttdk-bg-stay-black);border-color:var(--ttdk-stroke-stay-white);color:var(--ttdk-text-icon-primary)}.dark .ttdk-chip[data-variant=disable],[data-theme=dark] .ttdk-chip[data-variant=disable],.dark .ttdk-chip[data-variant=disabled],[data-theme=dark] .ttdk-chip[data-variant=disabled]{background-color:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-disabled)}.ttdk-chip-prefix{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.ttdk-chip-close{cursor:pointer;color:currentColor;opacity:.65;border-radius:var(--ttdk-radius-full);background:0 0;border:none;justify-content:center;align-items:center;margin:0 -2px 0 2px;padding:0;line-height:1;transition:opacity .12s,background-color .12s;display:inline-flex}.ttdk-chip-close:hover{opacity:1;background-color:color-mix(in srgb, currentColor 12%, transparent)}.ttdk-chip-close svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}.ttdk-chip[data-size=xs] .ttdk-chip-close svg{width:11px;height:11px}.ttdk-chip[data-size=sm] .ttdk-chip-close svg{width:12px;height:12px}.ttdk-chip[data-size=lg] .ttdk-chip-close svg{width:16px;height:16px}

package/src/web/chip/chip.tsx

@@ -0,0 +1,230 @@
+"use client";
+import * as React from "react";
+
+export type ChipUiProps = UiProps;
+export interface ChipProps {
+  /**
+   * Teks label yang ditampilkan pada chip.
+   */
+  label?: string;
+
+  /**
+   * Status apakah chip sedang dalam kondisi terpilih (selected).
+   *
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Varian warna semantik tema chip:
+   * - `'primary'`: Brand Teal utama (#00B5AD).
+   * - `'success'`: Sukses hijau (#04B761).
+   * - `'info'`: Biru informasi (#2196F3).
+   * - `'warning'`: Peringatan kuning / amber (#F88000).
+   * - `'danger'`: Bahaya / merah (#D0021B).
+   * - `'neutral'`: Netral abu-abu.
+   * - `'disabled'`: Status nonaktif (disabled).
+   *
+   * @default 'primary'
+   */
+  variant?:
+    | "primary"
+    | "success"
+    | "info"
+    | "warning"
+    | "danger"
+    | "neutral"
+    | "disabled";
+
+  /**
+   * Tipe tampilan visual chip:
+   * - `'soft'`: Background warna transparan lembut (default).
+   * - `'solid'`: Background warna solid pekat.
+   * - `'outline'`: Border tipis dengan background transparan.
+   *
+   * @default 'soft'
+   */
+  appearance?: "soft" | "solid" | "outline";
+
+  /**
+   * Skala ukuran chip:
+   * - `'sm'`: Tinggi 28px, font 12px.
+   * - `'md'`: Tinggi 32px, font 13px (standar).
+   * - `'lg'`: Tinggi 38px, font 15px.
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan:
+   * - `'full'`: Bentuk kapsul / pill 9999px (default).
+   * - `'none'`: Persegi lancip 0px.
+   * - `'sm'`: Sudut melengkung halus 4px.
+   * - `'md'`: Sudut melengkung sedang 6px.
+   * - `'lg'`: Sudut melengkung besar 8px.
+   *
+   * @default 'full'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menampilkan tombol silang (x) untuk menghapus / menutup chip.
+   *
+   * @default false
+   */
+  closable?: boolean;
+
+  /**
+   * Menonaktifkan interaksi klik pada chip.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+   */
+  ui?: UiProps;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Style kustom untuk teks label chip (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks label chip (Tailwind / class kustom).
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk tombol tutup chip (UiProps).
+   */
+  closableStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol tutup chip (Tailwind / class kustom).
+   */
+  closableClass?: string;
+
+  /**
+   * Event handler saat chip diklik (toggle select atau trigger aksi).
+   */
+  onClick?: (event?: any) => void;
+
+  /**
+   * Event handler saat tombol close (x) diklik.
+   */
+  onClose?: (event?: any) => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom / icon kustom yang disisipkan di dalam chip.
+   */
+  children?: any;
+}
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+function Chip(props: ChipProps) {
+  return (
+    <button
+      type="button"
+      className={`ttdk-chip ${props.className || ""}`.trim()}
+      data-variant={props.variant || "primary"}
+      data-appearance={props.appearance || "soft"}
+      data-size={props.size || "md"}
+      data-rounded={props.rounded || "full"}
+      data-selected={
+        props.selected !== undefined
+          ? props.selected
+            ? "true"
+            : "false"
+          : undefined
+      }
+      data-disabled={
+        props.disabled || props.variant === "disabled" ? "true" : "false"
+      }
+      style={{
+        ...buildUiVars(props.ui),
+        ...(props.ui?.border
+          ? {
+              border: props.ui.border,
+            }
+          : {}),
+        ...(props.ui?.borderColor
+          ? {
+              borderColor: props.ui.borderColor,
+            }
+          : {}),
+        ...(props.ui?.borderWidth
+          ? {
+              borderWidth: props.ui.borderWidth,
+            }
+          : {}),
+        ...(props.ui?.borderStyle
+          ? {
+              borderStyle: props.ui.borderStyle,
+            }
+          : {}),
+        ...(props.ui?.borderRadius
+          ? {
+              borderRadius: props.ui.borderRadius,
+            }
+          : {}),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+      onClick={(event) => {
+        if (props.disabled || props.variant === "disabled") return;
+        props.onClick?.(event);
+      }}
+    >
+      <>{props.children}</>
+      {props.label ? (
+        <span
+          className={`ttdk-chip-label ${props.labelClass || ""}`.trim()}
+          style={{
+            ...buildUiVars(props.labelStyle),
+          }}
+        >
+          {props.label}
+        </span>
+      ) : null}
+      {props.closable ? (
+        <span
+          role="button"
+          aria-label="Hapus chip"
+          tabIndex={0}
+          className={`ttdk-chip-close ${props.closableClass || ""}`.trim()}
+          style={{
+            ...buildUiVars(props.closableStyle),
+          }}
+          onClick={(event) => {
+            event.stopPropagation();
+            if (props.disabled) return;
+            props.onClose?.(event);
+          }}
+        >
+          <svg viewBox="0 0 24 24">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+export default Chip;
+
+export { Chip };

package/src/web/chip/index.ts

@@ -0,0 +1,2 @@
+export { default as Chip } from './chip';
+export { default } from "./chip"

package/src/web/chip/manifest.json

@@ -0,0 +1,186 @@
+{
+  "name": "@ttdk-design-system/chip",
+  "component": "Chip",
+  "folder": "chip",
+  "description": "TTDK Chip component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "chip.css",
+      "importPath": "web/chip/chip.css"
+    }
+  ],
+  "props": {
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label yang ditampilkan pada chip.",
+      "example": null,
+      "param": null
+    },
+    "selected": {
+      "name": "selected",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah chip sedang dalam kondisi terpilih (selected).",
+      "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 chip: - `'primary'`: Brand Teal utama (#00B5AD). - `'success'`: Sukses hijau (#04B761). - `'info'`: Biru informasi (#2196F3). - `'warning'`: Peringatan kuning / amber (#F88000). - `'danger'`: Bahaya / merah (#D0021B). - `'neutral'`: Netral abu-abu. - `'disabled'`: Status nonaktif (disabled).",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'soft' | 'solid' | 'outline'",
+      "optional": true,
+      "default": "soft",
+      "description": "Tipe tampilan visual chip: - `'soft'`: Background warna transparan lembut (default). - `'solid'`: Background warna solid pekat. - `'outline'`: Border tipis dengan background transparan.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran chip: - `'sm'`: Tinggi 28px, font 12px. - `'md'`: Tinggi 32px, font 13px (standar). - `'lg'`: Tinggi 38px, font 15px.",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "full",
+      "description": "Bentuk sudut kelengkungan: - `'full'`: Bentuk kapsul / pill 9999px (default). - `'none'`: Persegi lancip 0px. - `'sm'`: Sudut melengkung halus 4px. - `'md'`: Sudut melengkung sedang 6px. - `'lg'`: Sudut melengkung besar 8px.",
+      "example": null,
+      "param": null
+    },
+    "closable": {
+      "name": "closable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol silang (x) untuk menghapus / menutup chip.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan interaksi klik pada chip.",
+      "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
+    },
+    "labelStyle": {
+      "name": "labelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks label chip (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "labelClass": {
+      "name": "labelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks label chip (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "closableStyle": {
+      "name": "closableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tutup chip (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "closableClass": {
+      "name": "closableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tutup chip (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "onClick": {
+      "name": "onClick",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler saat chip diklik (toggle select atau trigger aksi).",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler saat tombol close (x) diklik.",
+      "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 / icon kustom yang disisipkan di dalam chip.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}