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

package/src/web/dropdown/index.ts

@@ -0,0 +1,3 @@
+export { default } from './dropdown';
+export { default as Dropdown, default as DropdownMenu } from './dropdown';
+export type { DropdownProps, DropdownMenuProps, DropdownOption, DropdownMenuItem, DropdownUiProps } from './dropdown'

package/src/web/dropdown/manifest.json

@@ -0,0 +1,576 @@
+{
+  "name": "@ttdk-design-system/dropdown",
+  "component": "Dropdown",
+  "folder": "dropdown",
+  "description": "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",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "dropdown.css",
+      "importPath": "web/dropdown/dropdown.css"
+    }
+  ],
+  "props": {
+    "label": {
+      "name": "label",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks label judul field yang ditampilkan di atas dropdown (14px Semibold, #141313).",
+      "example": null,
+      "param": null
+    },
+    "optional": {
+      "name": "optional",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).",
+      "example": null,
+      "param": null
+    },
+    "optionalText": {
+      "name": "optionalText",
+      "type": "string",
+      "optional": true,
+      "default": "(Opsional)",
+      "description": "Kustomisasi teks keterangan opsional.",
+      "example": null,
+      "param": null
+    },
+    "placeholder": {
+      "name": "placeholder",
+      "type": "string",
+      "optional": true,
+      "default": "Pilih dropdown menu",
+      "description": "Teks petunjuk saat belum ada opsi yang dipilih.",
+      "example": null,
+      "param": null
+    },
+    "value": {
+      "name": "value",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Nilai terpilih saat ini (single string/number atau array nilai untuk mode multiple).",
+      "example": null,
+      "param": null
+    },
+    "defaultValue": {
+      "name": "defaultValue",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Nilai awal tidak terkontrol (uncontrolled initial value).",
+      "example": null,
+      "param": null
+    },
+    "options": {
+      "name": "options",
+      "type": "Array<DropdownOption | string>",
+      "optional": true,
+      "default": null,
+      "description": "Daftar pilihan opsi dropdown menu. Dapat berupa array of object `{ label, value }` atau array of string.",
+      "example": null,
+      "param": null
+    },
+    "multiple": {
+      "name": "multiple",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mode pemilihan jamak (multi-select) dengan tampilan chips/tag dan daftar checkbox.",
+      "example": null,
+      "param": null
+    },
+    "searchable": {
+      "name": "searchable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Mengaktifkan kotak pencarian (search input) di dalam menu dropdown.",
+      "example": null,
+      "param": null
+    },
+    "searchPlaceholder": {
+      "name": "searchPlaceholder",
+      "type": "string",
+      "optional": true,
+      "default": "Cari",
+      "description": "Placeholder pada kotak pencarian di dalam dropdown.",
+      "example": null,
+      "param": null
+    },
+    "applyText": {
+      "name": "applyText",
+      "type": "string",
+      "optional": true,
+      "default": "Terapkan",
+      "description": "Teks tombol terapkan pada footer multi-select.",
+      "example": null,
+      "param": null
+    },
+    "resetText": {
+      "name": "resetText",
+      "type": "string",
+      "optional": true,
+      "default": "Reset",
+      "description": "Teks tombol reset pada footer multi-select.",
+      "example": null,
+      "param": null
+    },
+    "name": {
+      "name": "name",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Nama form field HTML.",
+      "example": null,
+      "param": null
+    },
+    "id": {
+      "name": "id",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Identifier unik elemen dropdown.",
+      "example": null,
+      "param": null
+    },
+    "error": {
+      "name": "error",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah dropdown sedang dalam kondisi error / tidak valid.",
+      "example": null,
+      "param": null
+    },
+    "errorMessage": {
+      "name": "errorMessage",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Pesan teks penjelasan kesalahan validasi di bawah field.",
+      "example": null,
+      "param": null
+    },
+    "helperText": {
+      "name": "helperText",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).",
+      "example": null,
+      "param": null
+    },
+    "helperTextPosition": {
+      "name": "helperTextPosition",
+      "type": "'top' | 'bottom'",
+      "optional": true,
+      "default": null,
+      "description": "Posisi teks helper",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran dropdown. - `'sm'`: 36px - `'md'`: 48px (standar desain) - `'lg'`: 56px",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Bentuk sudut kelengkungan dropdown. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 9999px (kapsul)",
+      "example": null,
+      "param": null
+    },
+    "placement": {
+      "name": "placement",
+      "type": "| 'bottom-start'\n  | 'bottom-end'\n  | 'bottom'\n  | 'top-start'\n  | 'top-end'\n  | 'top'",
+      "optional": true,
+      "default": "bottom-start",
+      "description": "Posisi penempatan panel menu dropdown popover terhadap elemen trigger.",
+      "example": null,
+      "param": null
+    },
+    "arrow": {
+      "name": "arrow",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Menampilkan panah chevron indikator buka/tutup pada trigger.",
+      "example": null,
+      "param": null
+    },
+    "icon": {
+      "name": "icon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ikon kustom di awal teks trigger (leading icon).",
+      "example": null,
+      "param": null
+    },
+    "closeOnSelect": {
+      "name": "closeOnSelect",
+      "type": "boolean",
+      "optional": true,
+      "default": "true",
+      "description": "Otomatis menutup menu popover setelah pengguna memilih opsi (pada single select).",
+      "example": null,
+      "param": null
+    },
+    "block": {
+      "name": "block",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan lebar field dropdown memenuhi kontainer penuh (full-width 100%).",
+      "example": null,
+      "param": null
+    },
+    "disabled": {
+      "name": "disabled",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Status apakah dropdown dinonaktifkan (disabled).",
+      "example": null,
+      "param": null
+    },
+    "required": {
+      "name": "required",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).",
+      "example": null,
+      "param": null
+    },
+    "inputRef": {
+      "name": "inputRef",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Ref instance elemen control dropdown untuk akses DOM langsung.",
+      "example": null,
+      "param": null
+    },
+    "clearable": {
+      "name": "clearable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih.",
+      "example": null,
+      "param": null
+    },
+    "loading": {
+      "name": "loading",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan spinner loading dan menonaktifkan interaksi dropdown.",
+      "example": null,
+      "param": null
+    },
+    "readOnly": {
+      "name": "readOnly",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menjadikan dropdown hanya-baca (tidak bisa dibuka/diubah).",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "DropdownUiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular wrapper utama (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Style inline native untuk wrapper luar.",
+      "example": null,
+      "param": null
+    },
+    "labelStyle": {
+      "name": "labelStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen label (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "labelClass": {
+      "name": "labelClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen label (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "controlStyle": {
+      "name": "controlStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk elemen kotak pemicu (control trigger) (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "controlClass": {
+      "name": "controlClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk elemen kotak pemicu (control trigger) (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "listStyle": {
+      "name": "listStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk panel popover / menu list opsi (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "listClass": {
+      "name": "listClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk panel popover / menu list opsi (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "errorMessageStyle": {
+      "name": "errorMessageStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk pesan teks error validasi (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "errorMessageClass": {
+      "name": "errorMessageClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk pesan teks error validasi (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "helperTextStyle": {
+      "name": "helperTextStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk teks petunjuk bantuan (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "helperTextClass": {
+      "name": "helperTextClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk teks petunjuk bantuan (Tailwind / class kustom).",
+      "example": null,
+      "param": null
+    },
+    "onChange": {
+      "name": "onChange",
+      "type": "(value: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat nilai pilihan berubah.",
+      "example": null,
+      "param": null
+    },
+    "onSelect": {
+      "name": "onSelect",
+      "type": "(option: DropdownOption) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat sebuah opsi dipilih dari menu.",
+      "example": null,
+      "param": null
+    },
+    "onSearch": {
+      "name": "onSearch",
+      "type": "(query: string) => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat pengguna mengetik di kolom pencarian.",
+      "example": null,
+      "param": null
+    },
+    "onOpen": {
+      "name": "onOpen",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat menu dropdown terbuka.",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "() => void",
+      "optional": true,
+      "default": null,
+      "description": "Callback event saat menu dropdown ditutup.",
+      "example": null,
+      "param": null
+    },
+    "disableShift": {
+      "name": "disableShift",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "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.",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom wrapper luar.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Elemen pemicu (trigger) kustom, tombol, ikon, atau komponen anak lainnya.",
+      "example": null,
+      "param": null
+    },
+    "panelContent": {
+      "name": "panelContent",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "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`.",
+      "example": null,
+      "param": null
+    },
+    "displayValue": {
+      "name": "displayValue",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Label atau teks kustom untuk ditampilkan pada trigger dropdown. Sangat berguna saat menggunakan `panelContent` seperti Date Picker di mana nilai trigger diformat secara kustom.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "DropdownOption": {
+      "label": {
+        "name": "label",
+        "type": "string",
+        "optional": false,
+        "default": null,
+        "description": "Teks label tampilan pilihan dropdown menu.",
+        "example": null,
+        "param": null
+      },
+      "value": {
+        "name": "value",
+        "type": "string | number",
+        "optional": false,
+        "default": null,
+        "description": "Nilai unik (value) dari item dropdown.",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Status apakah opsi ini dinonaktifkan dari pemilihan.",
+        "example": null,
+        "param": null
+      },
+      "icon": {
+        "name": "icon",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon kustom di samping label item pilihan.",
+        "example": null,
+        "param": null
+      },
+      "description": {
+        "name": "description",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Deskripsi atau teks bantuan kecil di bawah label item pilihan.",
+        "example": null,
+        "param": null
+      },
+      "danger": {
+        "name": "danger",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menandai item sebagai aksi berbahaya/destruktif (misal: \"Hapus\"), ditampilkan dengan warna aksen merah.",
+        "example": null,
+        "param": null
+      },
+      "divider": {
+        "name": "divider",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menampilkan garis pemisah horizontal (divider) di atas item ini.",
+        "example": null,
+        "param": null
+      },
+      "onClick": {
+        "name": "onClick",
+        "type": "(option?: DropdownOption) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat item ini diklik.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/flex/AI_GUIDE.md

@@ -0,0 +1,113 @@
+# <Flex /> — TTDK Component Reference
+
+TTDK Flex 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/flex/flex.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Flex from "@ttdk-design-system/library-react/web/flex";
+
+// Vue 3
+import Flex from "@ttdk-design-system/library-vue/web/flex";
+
+// Svelte
+import Flex from "@ttdk-design-system/library-svelte/web/flex";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `inline?` | `boolean` | `false` | Menggunakan display 'inline-flex' daripada 'flex'. |
+| `sm?` | `FlexBreakpointProps` | `-` | Override pada breakpoint sm (min-width: 640px). |
+| `md?` | `FlexBreakpointProps` | `-` | Override pada breakpoint md (min-width: 768px). |
+| `lg?` | `FlexBreakpointProps` | `-` | Override pada breakpoint lg (min-width: 1024px). |
+| `xl?` | `FlexBreakpointProps` | `-` | Override pada breakpoint xl (min-width: 1280px). |
+| `xxl?` | `FlexBreakpointProps` | `-` | Override pada breakpoint xxl / 2xl (min-width: 1536px). |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer (UiProps). |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `style?` | `any` | `-` | Style kustom inline. |
+| `children?` | `any` | `-` | Konten anak di dalam Flex. |
+
+### Sub-interface: `FlexBreakpointProps`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `direction?` | `'row' | 'column' | 'row-reverse' | 'column-reverse'` | `row` | Arah susunan elemen anak (flex-direction). |
+| `justifyContent?` | `'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'` | `start` | Distribusi ruang antar elemen anak pada sumbu utama (justify-content). |
+| `alignItems?` | `'start' | 'center' | 'end' | 'stretch'` | `stretch` | Perataan elemen anak pada sumbu silang (align-items). |
+| `gap?` | `string | number` | `-` | Jarak celah antar elemen anak (gap). Nilai dapat berupa angka pixel atau string unit CSS (misal: 12, "16px", "var(--ttdk-spacing-16)"). |
+| `wrap?` | `'nowrap' | 'wrap' | 'wrap-reverse'` | `nowrap` | Membungkus elemen anak jika melebihi lebar kontainer (flex-wrap). |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { Flex, FlexItem } from "@ttdk-design-system/library-react/flex";
+import "@ttdk-design-system/library-react/flex/flex.css";
+
+export function Example() {
+  return (
+    <Flex
+      direction="column"
+      gap="16px"
+      md={{ direction: "row", gap: "24px", justifyContent: "between" }}
+    >
+      <FlexItem grow>
+        <div style={{ background: '#f4f4f5', padding: '16px' }}>Sisi Kiri</div>
+      </FlexItem>
+      <FlexItem>
+        <div style={{ background: '#e4e4e7', padding: '16px' }}>Sisi Kanan</div>
+      </FlexItem>
+    </Flex>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { Flex, FlexItem } from "@ttdk-design-system/library-vue/flex";
+import "@ttdk-design-system/library-vue/flex/flex.css";
+</script>
+
+<template>
+  <Flex
+    direction="column"
+    gap="16px"
+    :md="{ direction: 'row', gap: '24px', justifyContent: 'between' }"
+  >
+    <FlexItem :grow="true">
+      <div style="background: #f4f4f5; padding: 16px;">Sisi Kiri</div>
+    </FlexItem>
+    <FlexItem>
+      <div style="background: #e4e4e7; padding: 16px;">Sisi Kanan</div>
+    </FlexItem>
+  </Flex>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import { Flex, FlexItem } from "@ttdk-design-system/library-svelte/flex";
+  import "@ttdk-design-system/library-svelte/flex/flex.css";
+</script>
+
+<Flex
+  direction="column"
+  gap="16px"
+  md={{ direction: "row", gap: "24px", justifyContent: "between" }}
+>
+  <FlexItem grow>
+    <div style="background: #f4f4f5; padding: 16px;">Sisi Kiri</div>
+  </FlexItem>
+  <FlexItem>
+    <div style="background: #e4e4e7; padding: 16px;">Sisi Kanan</div>
+  </FlexItem>
+</Flex>
+```