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

package/dist/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/dist/web/chip/chip.svelte

@@ -0,0 +1,113 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let variant = void 0;
+export let appearance = void 0;
+export let size = void 0;
+export let rounded = void 0;
+export let selected = void 0;
+export let disabled = void 0;
+export let ui = void 0;
+const dispatch = createEventDispatcher();
+export let onClick = void 0;
+export let label = void 0;
+export let labelClass = void 0;
+export let labelStyle = void 0;
+export let closable = void 0;
+export let closableClass = void 0;
+export let closableStyle = void 0;
+export let onClose = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<button
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    ...(ui?.border
+      ? {
+          border: ui.border,
+        }
+      : {}),
+    ...(ui?.borderColor
+      ? {
+          borderColor: ui.borderColor,
+        }
+      : {}),
+    ...(ui?.borderWidth
+      ? {
+          borderWidth: ui.borderWidth,
+        }
+      : {}),
+    ...(ui?.borderStyle
+      ? {
+          borderStyle: ui.borderStyle,
+        }
+      : {}),
+    ...(ui?.borderRadius
+      ? {
+          borderRadius: ui.borderRadius,
+        }
+      : {}),
+    })}
+  type="button"
+  class={`ttdk-chip ${className || ""}`.trim()}
+  data-variant={variant || "primary"}
+  data-appearance={appearance || "soft"}
+  data-size={size || "md"}
+  data-rounded={rounded || "full"}
+  data-selected={selected !== undefined
+    ? selected
+      ? "true"
+      : "false"
+    : undefined}
+  data-disabled={disabled || variant === "disabled" ? "true" : "false"}
+  on:click={(event) => {
+    if (disabled || variant === "disabled") return;
+    onClick?.(event);
+    dispatch("click", event);
+  }}
+  ><slot />
+  {#if label}
+    <span
+      style={stringifyStyles({
+        ...buildUiVars(labelStyle),
+      })}
+      class={`ttdk-chip-label ${labelClass || ""}`.trim()}>{label}</span
+    >
+  {/if}
+  {#if closable}
+    <span
+      style={stringifyStyles({
+        ...buildUiVars(closableStyle),
+      })}
+      role="button"
+      aria-label="Hapus chip"
+      tabIndex={0}
+      class={`ttdk-chip-close ${closableClass || ""}`.trim()}
+      on:click={(event) => {
+        event.stopPropagation();
+        if (disabled) return;
+        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
+    >
+  {/if}</button
+>

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

@@ -0,0 +1,145 @@
+import { SvelteComponent } from "svelte";
+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?: any;
+    /**
+     * 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 { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: ChipProps["className"];
+        variant?: ChipProps["variant"];
+        appearance?: ChipProps["appearance"];
+        size?: ChipProps["size"];
+        rounded?: ChipProps["rounded"];
+        selected?: ChipProps["selected"];
+        disabled?: ChipProps["disabled"];
+        ui?: ChipProps["ui"];
+        onClick?: ChipProps["onClick"];
+        label?: ChipProps["label"];
+        labelClass?: ChipProps["labelClass"];
+        labelStyle?: ChipProps["labelStyle"];
+        closable?: ChipProps["closable"];
+        closableClass?: ChipProps["closableClass"];
+        closableStyle?: ChipProps["closableStyle"];
+        onClose?: ChipProps["onClose"];
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type ChipProps_ = typeof __propDef.props;
+export type ChipEvents = typeof __propDef.events;
+export type ChipSlots = typeof __propDef.slots;
+export default class Chip extends SvelteComponent<ChipProps_, ChipEvents, ChipSlots> {
+}
+export {};

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

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

package/dist/web/chip/index.js

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

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

package/dist/web/dropdown/AI_GUIDE.md

@@ -0,0 +1,167 @@
+# <Dropdown /> — TTDK Component Reference
+
+Komponen Dropdown Menu TTDK sesuai spesifikasi Desain: - Selaras UI & Props dengan Selectbox: Label, Helper/Error text, Search bar, Floating popover - Mode Single Select / Menu Actions dengan Active Teal Checkmark (#00A3A6) - Mode Multi-Select dengan Checkbox list, Chip tags (Label ✕), dan Action footer (Reset & Terapkan) - Varian trigger fleksibel: 'select' (standar form), 'action' / 'primary' (tombol aksi), 'outline', 'ghost' - Dukungan Trigger Kustom melalui Slot / Children (misal: tombol kustom) - Dukungan item kaya: Icon, Deskripsi, Divider pemisah seksi, dan Danger item
+
+## 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/dropdown/dropdown.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Dropdown from "@ttdk-design-system/library-react/web/dropdown";
+
+// Vue 3
+import Dropdown from "@ttdk-design-system/library-vue/web/dropdown";
+
+// Svelte
+import Dropdown from "@ttdk-design-system/library-svelte/web/dropdown";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label?` | `string` | `-` | Teks label judul field yang ditampilkan di atas dropdown (14px Semibold, #141313). |
+| `optional?` | `boolean` | `false` | Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2). |
+| `optionalText?` | `string` | `(Opsional)` | Kustomisasi teks keterangan opsional. |
+| `placeholder?` | `string` | `Pilih dropdown menu` | Teks petunjuk saat belum ada opsi yang dipilih. |
+| `value?` | `any` | `-` | Nilai terpilih saat ini (single string/number atau array nilai untuk mode multiple). |
+| `defaultValue?` | `any` | `-` | Nilai awal tidak terkontrol (uncontrolled initial value). |
+| `options?` | `Array<DropdownOption | string>` | `-` | Daftar pilihan opsi dropdown menu. Dapat berupa array of object `{ label, value }` atau array of string. |
+| `multiple?` | `boolean` | `false` | Mode pemilihan jamak (multi-select) dengan tampilan chips/tag dan daftar checkbox. |
+| `searchable?` | `boolean` | `false` | Mengaktifkan kotak pencarian (search input) di dalam menu dropdown. |
+| `searchPlaceholder?` | `string` | `Cari` | Placeholder pada kotak pencarian di dalam dropdown. |
+| `applyText?` | `string` | `Terapkan` | Teks tombol terapkan pada footer multi-select. |
+| `resetText?` | `string` | `Reset` | Teks tombol reset pada footer multi-select. |
+| `name?` | `string` | `-` | Nama form field HTML. |
+| `id?` | `string` | `-` | Identifier unik elemen dropdown. |
+| `error?` | `boolean` | `false` | Status apakah dropdown sedang dalam kondisi error / tidak valid. |
+| `errorMessage?` | `string` | `-` | Pesan teks penjelasan kesalahan validasi di bawah field. |
+| `helperText?` | `string` | `-` | Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245). |
+| `helperTextPosition?` | `'top' | 'bottom'` | `-` | Posisi teks helper |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran dropdown. - `'sm'`: 36px - `'md'`: 48px (standar desain) - `'lg'`: 56px |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Bentuk sudut kelengkungan dropdown. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 9999px (kapsul) |
+| `placement?` | `| 'bottom-start'
+  | 'bottom-end'
+  | 'bottom'
+  | 'top-start'
+  | 'top-end'
+  | 'top'` | `bottom-start` | Posisi penempatan panel menu dropdown popover terhadap elemen trigger. |
+| `arrow?` | `boolean` | `true` | Menampilkan panah chevron indikator buka/tutup pada trigger. |
+| `icon?` | `any` | `-` | Ikon kustom di awal teks trigger (leading icon). |
+| `closeOnSelect?` | `boolean` | `true` | Otomatis menutup menu popover setelah pengguna memilih opsi (pada single select). |
+| `block?` | `boolean` | `false` | Menjadikan lebar field dropdown memenuhi kontainer penuh (full-width 100%). |
+| `disabled?` | `boolean` | `false` | Status apakah dropdown dinonaktifkan (disabled). |
+| `required?` | `boolean` | `false` | Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *). |
+| `inputRef?` | `any` | `-` | Ref instance elemen control dropdown untuk akses DOM langsung. |
+| `clearable?` | `boolean` | `false` | Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner loading dan menonaktifkan interaksi dropdown. |
+| `readOnly?` | `boolean` | `false` | Menjadikan dropdown hanya-baca (tidak bisa dibuka/diubah). |
+| `ui?` | `DropdownUiProps` | `-` | Kustomisasi visual granular wrapper utama (UiProps). |
+| `style?` | `any` | `-` | Style inline native untuk wrapper luar. |
+| `labelStyle?` | `UiProps` | `-` | Style kustom untuk elemen label (UiProps). |
+| `labelClass?` | `string` | `-` | Class CSS kustom untuk elemen label (Tailwind / class kustom). |
+| `controlStyle?` | `UiProps` | `-` | Style kustom untuk elemen kotak pemicu (control trigger) (UiProps). |
+| `controlClass?` | `string` | `-` | Class CSS kustom untuk elemen kotak pemicu (control trigger) (Tailwind / class kustom). |
+| `listStyle?` | `UiProps` | `-` | Style kustom untuk panel popover / menu list opsi (UiProps). |
+| `listClass?` | `string` | `-` | Class CSS kustom untuk panel popover / menu list opsi (Tailwind / class kustom). |
+| `errorMessageStyle?` | `UiProps` | `-` | Style kustom untuk pesan teks error validasi (UiProps). |
+| `errorMessageClass?` | `string` | `-` | Class CSS kustom untuk pesan teks error validasi (Tailwind / class kustom). |
+| `helperTextStyle?` | `UiProps` | `-` | Style kustom untuk teks petunjuk bantuan (UiProps). |
+| `helperTextClass?` | `string` | `-` | Class CSS kustom untuk teks petunjuk bantuan (Tailwind / class kustom). |
+| `onChange?` | `(value: any) => void` | `-` | Callback event saat nilai pilihan berubah. |
+| `onSelect?` | `(option: DropdownOption) => void` | `-` | Callback event saat sebuah opsi dipilih dari menu. |
+| `onSearch?` | `(query: string) => void` | `-` | Callback event saat pengguna mengetik di kolom pencarian. |
+| `onOpen?` | `() => void` | `-` | Callback event saat menu dropdown terbuka. |
+| `onClose?` | `() => void` | `-` | Callback event saat menu dropdown ditutup. |
+| `disableShift?` | `boolean` | `false` | Menonaktifkan middleware `shift` pada floating-ui sehingga posisi list popover tidak bergeser secara horizontal mengikuti tepi layar. Berguna saat ingin list tetap berada di tengah atau posisi placement yang ditentukan. |
+| `className?` | `string` | `-` | Class CSS kustom wrapper luar. |
+| `children?` | `any` | `-` | Elemen pemicu (trigger) kustom, tombol, ikon, atau komponen anak lainnya. |
+| `panelContent?` | `any` | `-` | Konten kustom yang ditampilkan di dalam panel popover menggantikan list opsi standar. Berguna untuk menampilkan komponen seperti Calendar, Color Picker, dsb. di dalam Dropdown. Ketika prop ini di-set, `options` tidak akan dirender. Menerima ReactNode atau render function `({ close }) => ReactNode`. |
+| `displayValue?` | `string` | `-` | Label atau teks kustom untuk ditampilkan pada trigger dropdown. Sangat berguna saat menggunakan `panelContent` seperti Date Picker di mana nilai trigger diformat secara kustom. |
+
+### Sub-interface: `DropdownOption`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Teks label tampilan pilihan dropdown menu. |
+| `value` | `string | number` | `-` | Nilai unik (value) dari item dropdown. |
+| `disabled?` | `boolean` | `false` | Status apakah opsi ini dinonaktifkan dari pemilihan. |
+| `icon?` | `any` | `-` | Ikon kustom di samping label item pilihan. |
+| `description?` | `string` | `-` | Deskripsi atau teks bantuan kecil di bawah label item pilihan. |
+| `danger?` | `boolean` | `false` | Menandai item sebagai aksi berbahaya/destruktif (misal: "Hapus"), ditampilkan dengan warna aksen merah. |
+| `divider?` | `boolean` | `false` | Menampilkan garis pemisah horizontal (divider) di atas item ini. |
+| `onClick?` | `(option?: DropdownOption) => void` | `-` | Callback event saat item ini diklik. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Dropdown from "@ttdk-design-system/library-react/web/dropdown";
+import "@ttdk-design-system/library-react/web/dropdown/dropdown.css";
+
+export function Example() {
+  const options = [
+    { label: "Unduh Rekap FHIR (JSON)", value: "json" },
+    { label: "Ekspor Laporan (CSV)", value: "csv" },
+    { label: "Kirim ke SATUSEHAT", value: "sync" },
+    { label: "Hapus Data Pasien", value: "delete", danger: true, divider: true }
+  ];
+
+  return (
+    <Dropdown
+      label="Aksi Tindakan"
+      placeholder="Pilih tindakan klinis..."
+      options={options}
+      onChange={(val) => console.log("Aksi terpilih:", val)}
+    />
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Dropdown from "@ttdk-design-system/library-vue/web/dropdown";
+import "@ttdk-design-system/library-vue/web/dropdown/dropdown.css";
+
+const options = [
+  { label: "Unduh Rekap FHIR (JSON)", value: "json" },
+  { label: "Ekspor Laporan (CSV)", value: "csv" },
+  { label: "Kirim ke SATUSEHAT", value: "sync" },
+  { label: "Hapus Data Pasien", value: "delete", danger: true, divider: true }
+];
+</script>
+
+<template>
+  <Dropdown
+    label="Aksi Tindakan"
+    placeholder="Pilih tindakan klinis..."
+    :options="options"
+    @change="(val: any) => console.log('Aksi terpilih:', val)"
+  />
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Dropdown from "@ttdk-design-system/library-svelte/web/dropdown";
+  import "@ttdk-design-system/library-svelte/web/dropdown/dropdown.css";
+
+  const options = [
+    { label: "Unduh Rekap FHIR (JSON)", value: "json" },
+    { label: "Ekspor Laporan (CSV)", value: "csv" },
+    { label: "Kirim ke SATUSEHAT", value: "sync" },
+    { label: "Hapus Data Pasien", value: "delete", danger: true, divider: true }
+  ];
+</script>
+
+<Dropdown
+  label="Aksi Tindakan"
+  placeholder="Pilih tindakan klinis..."
+  {options}
+  on:change={(e) => console.log('Aksi terpilih:', e.detail)}
+/>
+```