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

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

@@ -0,0 +1,199 @@
+import { SvelteComponent } from "svelte";
+export type CheckboxUiProps = UiProps;
+export interface CheckboxProps {
+    /**
+     * Status apakah checkbox sedang dalam kondisi terpilih (checked).
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Status apakah checkbox dalam kondisi parsial / indeterminate (menampilkan tanda strip '-').
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Teks label utama yang ditampilkan di samping kotak checkbox.
+     */
+    label?: string;
+    /**
+     * Deskripsi atau teks bantuan yang ditampilkan di bawah label.
+     */
+    description?: string;
+    /**
+     * Teks bantuan atau keterangan di bawah label (dapat digunakan bergantian dengan description).
+     */
+    helperText?: string;
+    /**
+     * Status error visual atau string pesan error.
+     */
+    error?: boolean | string;
+    /**
+     * Pesan error yang ditampilkan jika validasi form gagal.
+     */
+    errorMessage?: string;
+    /**
+     * Skala ukuran checkbox:
+     * - `'sm'`: Kotak 16px, font 12px.
+     * - `'md'`: Kotak 18px, font 14px (standar).
+     * - `'lg'`: Kotak 22px, font 16px.
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Varian warna semantik saat checkbox dicentang:
+     * - `'primary'`: Aksen toska aksi (#16b3ac, standar).
+     * - `'info'`: Aksen biru informasi (#2196f3).
+     * - `'success'`: Warna hijau sukses (#047b5d).
+     * - `'warning'`: Warna peringatan kuning/oranye (#fb8c00).
+     * - `'danger'`: Warna bahaya merah (#c50a24).
+     * - `'neutral'`: Warna abu-abu netral (#4a4f53).
+     *
+     * @default 'primary'
+     */
+    variant?: "primary" | "info" | "success" | "warning" | "danger" | "neutral";
+    /**
+     * Sudut kelengkungan kotak checkbox:
+     * - `'none'`: Kotak tajam 0px.
+     * - `'sm'`: Radius halus 2px.
+     * - `'md'`: Radius sedang 4px (standar).
+     * - `'full'`: Lingkaran penuh 9999px.
+     *
+     * @default 'md'
+     */
+    rounded?: "none" | "sm" | "md" | "full";
+    /**
+     * Menonaktifkan interaksi pada checkbox.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Menandakan bahwa field checkbox wajib diisi (required) pada formulir.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Name atribut untuk elemen HTML `<input type="checkbox">`.
+     */
+    name?: string;
+    /**
+     * Value atribut untuk elemen HTML input.
+     */
+    value?: string;
+    /**
+     * Identifier unik elemen checkbox (untuk kaitan dengan label form).
+     */
+    id?: string;
+    /**
+     * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+     */
+    ui?: UiProps;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Style kustom untuk kotak kontrol checkbox (UiProps).
+     */
+    controlStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk kotak kontrol checkbox (Tailwind / class kustom).
+     */
+    controlClass?: string;
+    /**
+     * Style kustom untuk teks label checkbox (UiProps).
+     */
+    labelStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks label checkbox (Tailwind / class kustom).
+     */
+    labelClass?: string;
+    /**
+     * Style kustom untuk teks deskripsi bantuan (UiProps).
+     */
+    descStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks deskripsi bantuan (Tailwind / class kustom).
+     */
+    descClass?: string;
+    /**
+     * Style kustom untuk elemen helper text (UiProps).
+     */
+    helperTextStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk elemen helper text.
+     */
+    helperTextClass?: string;
+    /**
+     * Style kustom untuk teks pesan error validasi (UiProps).
+     */
+    errorMessageStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks pesan error validasi (Tailwind / class kustom).
+     */
+    errorMessageClass?: string;
+    /**
+     * Event handler yang dipanggil saat nilai checkbox berubah.
+     * Mengembalikan `(checked: boolean, event: Event)`.
+     */
+    onChange?: (checked: boolean, event?: any) => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Slot konten label kustom yang menggantikan prop `label`.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: CheckboxProps["className"];
+        size?: CheckboxProps["size"];
+        variant?: CheckboxProps["variant"];
+        rounded?: CheckboxProps["rounded"];
+        disabled?: CheckboxProps["disabled"];
+        checked?: CheckboxProps["checked"];
+        indeterminate?: CheckboxProps["indeterminate"];
+        errorMessage?: CheckboxProps["errorMessage"];
+        error?: CheckboxProps["error"];
+        description?: CheckboxProps["description"];
+        helperText?: CheckboxProps["helperText"];
+        ui?: CheckboxProps["ui"];
+        id?: CheckboxProps["id"];
+        name?: CheckboxProps["name"];
+        value?: CheckboxProps["value"];
+        required?: CheckboxProps["required"];
+        onChange?: CheckboxProps["onChange"];
+        controlClass?: CheckboxProps["controlClass"];
+        controlStyle?: CheckboxProps["controlStyle"];
+        label?: CheckboxProps["label"];
+        labelClass?: CheckboxProps["labelClass"];
+        labelStyle?: CheckboxProps["labelStyle"];
+        helperTextClass?: CheckboxProps["helperTextClass"];
+        descClass?: CheckboxProps["descClass"];
+        helperTextStyle?: CheckboxProps["helperTextStyle"];
+        descStyle?: CheckboxProps["descStyle"];
+        errorMessageClass?: CheckboxProps["errorMessageClass"];
+        errorMessageStyle?: CheckboxProps["errorMessageStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type CheckboxProps_ = typeof __propDef.props;
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponent<CheckboxProps_, CheckboxEvents, CheckboxSlots> {
+}
+export {};

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

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

package/dist/web/checkbox/index.js

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

package/dist/web/checkbox/manifest.json

@@ -0,0 +1,294 @@
+{
+  "name": "@ttdk-design-system/checkbox",
+  "component": "Checkbox",
+  "folder": "checkbox",
+  "description": "TTDK Checkbox component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "checkbox.css",
+      "importPath": "web/checkbox/checkbox.css"
+    }
+  ],
+  "props": {
+    "checked": {
+      "name": "checked",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah checkbox sedang dalam kondisi terpilih (checked).",
+      "example": null,
+      "param": null
+    },
+    "indeterminate": {
+      "name": "indeterminate",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah checkbox dalam kondisi parsial / indeterminate (menampilkan tanda strip '-').",
+      "example": null,
+      "param": null
+    },
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label utama yang ditampilkan di samping kotak checkbox.",
+      "example": null,
+      "param": null
+    },
+    "description": {
+      "name": "description",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Deskripsi atau teks bantuan yang ditampilkan di bawah label.",
+      "example": null,
+      "param": null
+    },
+    "helperText": {
+      "name": "helperText",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks bantuan atau keterangan di bawah label (dapat digunakan bergantian dengan description).",
+      "example": null,
+      "param": null
+    },
+    "error": {
+      "name": "error",
+      "type": "boolean | string",
+      "optional": true,
+      "default": null,
+      "description": "Status error visual atau string pesan error.",
+      "example": null,
+      "param": null
+    },
+    "errorMessage": {
+      "name": "errorMessage",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Pesan error yang ditampilkan jika validasi form gagal.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran checkbox: - `'sm'`: Kotak 16px, font 12px. - `'md'`: Kotak 18px, font 14px (standar). - `'lg'`: Kotak 22px, font 16px.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral'",
+      "optional": true,
+      "default": "primary",
+      "description": "Varian warna semantik saat checkbox dicentang: - `'primary'`: Aksen toska aksi (#16b3ac, standar). - `'info'`: Aksen biru informasi (#2196f3). - `'success'`: Warna hijau sukses (#047b5d). - `'warning'`: Warna peringatan kuning/oranye (#fb8c00). - `'danger'`: Warna bahaya merah (#c50a24). - `'neutral'`: Warna abu-abu netral (#4a4f53).",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Sudut kelengkungan kotak checkbox: - `'none'`: Kotak tajam 0px. - `'sm'`: Radius halus 2px. - `'md'`: Radius sedang 4px (standar). - `'full'`: Lingkaran penuh 9999px.",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menonaktifkan interaksi pada checkbox.",
+      "example": null,
+      "param": null
+    },
+    "required": {
+      "name": "required",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menandakan bahwa field checkbox wajib diisi (required) pada formulir.",
+      "example": null,
+      "param": null
+    },
+    "name": {
+      "name": "name",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Name atribut untuk elemen HTML `<input type=\"checkbox\">`.",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Value atribut untuk elemen HTML input.",
+      "example": null,
+      "param": null
+    },
+    "id": {
+      "name": "id",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Identifier unik elemen checkbox (untuk kaitan dengan label form).",
+      "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
+    },
+    "controlStyle": {
+      "name": "controlStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk kotak kontrol checkbox (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "controlClass": {
+      "name": "controlClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk kotak kontrol checkbox (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "labelStyle": {
+      "name": "labelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks label checkbox (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "labelClass": {
+      "name": "labelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks label checkbox (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "descStyle": {
+      "name": "descStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks deskripsi bantuan (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "descClass": {
+      "name": "descClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks deskripsi bantuan (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "helperTextStyle": {
+      "name": "helperTextStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen helper text (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "helperTextClass": {
+      "name": "helperTextClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen helper text.",
+      "example": null,
+      "param": null
+    },
+    "errorMessageStyle": {
+      "name": "errorMessageStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks pesan error validasi (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "errorMessageClass": {
+      "name": "errorMessageClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks pesan error validasi (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(checked: boolean, event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event handler yang dipanggil saat nilai checkbox berubah. Mengembalikan `(checked: boolean, event: Event)`.",
+      "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": "Slot konten label kustom yang menggantikan prop `label`.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/dist/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>
+```