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

package/src/web/radio/radio.tsx

@@ -0,0 +1,290 @@
+"use client";
+import * as React from "react";
+
+export type RadioUiProps = UiProps;
+export interface RadioProps {
+  /**
+   * Status apakah radio button sedang dalam kondisi terpilih (checked).
+   *
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Teks label utama yang ditampilkan di samping lingkaran radio.
+   */
+  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 radio button:
+   * - `'sm'`: Lingkaran 16px, font 13px.
+   * - `'md'`: Lingkaran 18px, font 14px (standar).
+   * - `'lg'`: Lingkaran 22px, font 16px.
+   *
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Varian warna semantik saat radio button dipilih:
+   * - `'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";
+
+  /**
+   * Menonaktifkan interaksi pada radio button.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandakan bahwa field radio wajib diisi (required) pada formulir.
+   *
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Name atribut untuk elemen HTML `<input type="radio">`.
+   * Digunakan untuk mengelompokkan radio button dalam satu grup.
+   */
+  name?: string;
+
+  /**
+   * Value atribut untuk elemen HTML input.
+   */
+  value?: string;
+
+  /**
+   * Identifier unik elemen radio button (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?: React.CSSProperties;
+
+  /**
+   * Style kustom untuk lingkaran kontrol radio (UiProps).
+   */
+  controlStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk lingkaran kontrol radio (Tailwind / class kustom).
+   */
+  controlClass?: string;
+
+  /**
+   * Style kustom untuk titik (dot) di dalam radio button saat checked (UiProps).
+   */
+  dotStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk titik (dot) di dalam radio button saat checked (Tailwind / class kustom).
+   */
+  dotClass?: string;
+
+  /**
+   * Style kustom untuk teks label radio (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks label radio (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 radio button 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 { buildUiVars, UiProps } from "../../core/types";
+
+function Radio(props: RadioProps) {
+  return (
+    <label
+      className={`ttdk-radio-wrapper ttdk-radio-root ${
+        props.className || ""
+      }`.trim()}
+      data-size={props.size || "md"}
+      data-variant={props.variant || "primary"}
+      data-disabled={props.disabled ? "true" : "false"}
+      data-checked={props.checked ? "true" : "false"}
+      data-state={props.checked ? "checked" : "unchecked"}
+      data-error={Boolean(props.errorMessage || props.error) ? "true" : "false"}
+      data-has-description={
+        Boolean(props.description || props.helperText) ? "true" : "false"
+      }
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <input
+        type="radio"
+        className="ttdk-radio-native ttdk-radio-input"
+        id={props.id}
+        name={props.name}
+        value={props.value}
+        checked={props.checked}
+        disabled={props.disabled}
+        required={props.required}
+        onChange={(event) => {
+          props.onChange?.(event.target.checked, event);
+        }}
+      />
+      <span
+        className={`ttdk-radio-control ${props.controlClass || ""}`.trim()}
+        style={{
+          ...buildUiVars(props.controlStyle),
+        }}
+      >
+        {props.checked ? (
+          <span
+            className={`ttdk-radio-dot ${props.dotClass || ""}`.trim()}
+            style={{
+              ...buildUiVars(props.dotStyle),
+            }}
+          />
+        ) : null}
+      </span>
+      {props.label ||
+      props.description ||
+      props.helperText ||
+      props.children ||
+      props.errorMessage ||
+      (typeof props.error === "string" && props.error) ? (
+        <div className="ttdk-radio-label-wrapper">
+          {props.label || props.children ? (
+            <span
+              className={`ttdk-radio-label ${props.labelClass || ""}`.trim()}
+              style={{
+                ...buildUiVars(props.labelStyle),
+              }}
+            >
+              {props.label}
+              <>{props.children}</>
+            </span>
+          ) : null}
+          {props.helperText || props.description ? (
+            <span
+              className={`ttdk-radio-desc ttdk-radio-helper-text ${
+                props.helperTextClass || props.descClass || ""
+              }`.trim()}
+              style={{
+                ...buildUiVars(props.helperTextStyle || props.descStyle),
+              }}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              {props.helperText || props.description}
+            </span>
+          ) : null}
+          {props.errorMessage ||
+          (typeof props.error === "string" && props.error) ? (
+            <span
+              role="alert"
+              className={`ttdk-radio-error-msg ${
+                props.errorMessageClass || ""
+              }`.trim()}
+              style={{
+                ...buildUiVars(props.errorMessageStyle),
+              }}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              {props.errorMessage ||
+                (typeof props.error === "string" ? props.error : "")}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+    </label>
+  );
+}
+
+export default Radio;
+
+export { Radio };

package/src/web/selectbox/AI_GUIDE.md

@@ -0,0 +1,216 @@
+# <Selectbox /> — TTDK Component Reference
+
+Komponen Selectbox TTDK sesuai spesifikasi Desain: - Single Select dengan Checkmark indicator dan Active Teal border (#00A3A6) - Multi-Select dengan Checkbox list, Chip tags (Label ✕), dan Action footer (Reset & Terapkan) - Searchable filter bar dengan input Cari 🔍 - Visual States: Default, Active/Open, Filled, Error (#FF3A39), Disabled (#E4E5E7)
+
+## 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/selectbox/selectbox.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Selectbox from "@ttdk-design-system/library-react/web/selectbox";
+
+// Vue 3
+import Selectbox from "@ttdk-design-system/library-vue/web/selectbox";
+
+// Svelte
+import Selectbox from "@ttdk-design-system/library-svelte/web/selectbox";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label?` | `string` | `-` | Teks label judul field yang ditampilkan di atas selectbox (14px Semibold, #141313). |
+| `labelStyle?` | `UiProps` | `-` | Style kustom untuk elemen label judul field (UiProps). |
+| `labelClass?` | `string` | `-` | Class CSS kustom untuk elemen label judul field. |
+| `controlStyle?` | `UiProps` | `-` | Style kustom untuk elemen trigger kontrol selectbox (UiProps). |
+| `controlClass?` | `string` | `-` | Class CSS kustom untuk elemen trigger kontrol selectbox. |
+| `menuStyle?` | `UiProps` | `-` | Style kustom untuk elemen menu dropdown popover (UiProps). |
+| `menuClass?` | `string` | `-` | Class CSS kustom untuk elemen menu dropdown popover. |
+| `listStyle?` | `UiProps` | `-` | Alias untuk menuStyle (konsistensi dengan Dropdown listStyle). |
+| `listClass?` | `string` | `-` | Class CSS kustom untuk opsi list dropdown (atau alias menuClass). |
+| `errorMessageStyle?` | `UiProps` | `-` | Style kustom untuk elemen pesan error validasi (UiProps). |
+| `errorMessageClass?` | `string` | `-` | Class CSS kustom untuk elemen pesan error validasi. |
+| `helperTextStyle?` | `UiProps` | `-` | Style kustom untuk elemen helper text (UiProps). |
+| `helperTextClass?` | `string` | `-` | Class CSS kustom untuk elemen helper text. |
+| `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<SelectboxOption | string>` | `-` | Daftar pilihan opsi dropdown. 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 selectbox. |
+| `error?` | `boolean` | `false` | Status apakah selectbox 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 selectbox. - `'sm'`: 36px - `'md'`: 48px (standar desain) - `'lg'`: 56px |
+| `rounded?` | `'none' | 'sm' | 'md' | 'lg' | 'full'` | `md` | Bentuk sudut kelengkungan selectbox. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 9999px (kapsul) |
+| `block?` | `boolean` | `false` | Menjadikan lebar field selectbox memenuhi kontainer penuh (full-width 100%). |
+| `disabled?` | `boolean` | `false` | Status apakah selectbox dinonaktifkan (disabled). |
+| `required?` | `boolean` | `false` | Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *). |
+| `inputRef?` | `any` | `-` | Ref instance elemen control selectbox untuk akses DOM langsung. |
+| `clearable?` | `boolean` | `false` | Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih. |
+| `loading?` | `boolean` | `false` | Menampilkan spinner loading dan menonaktifkan interaksi selectbox. |
+| `readOnly?` | `boolean` | `false` | Menjadikan selectbox hanya-baca (tidak bisa dibuka/diubah). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root / form-item (UiProps). |
+| `onChange?` | `(value: any) => void` | `-` | Callback event saat nilai pilihan berubah. |
+| `onSearch?` | `(query: string) => void` | `-` | Callback event saat pengguna mengetik di kolom pencarian. |
+| `onOpen?` | `() => void` | `-` | Callback event saat menu dropdown terbuka. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `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. |
+| `onClose?` | `() => void` | `-` | Callback event saat menu dropdown ditutup. |
+
+### Sub-interface: `SelectboxOption`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Teks label tampilan pilihan dropdown. |
+| `value` | `string | number` | `-` | Nilai unik (value) dari opsi pilihan. |
+| `disabled?` | `boolean` | `false` | Status apakah opsi ini dinonaktifkan dari pemilihan. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { useState } from "react";
+import Selectbox from "@ttdk-design-system/library-react/web/selectbox";
+import "@ttdk-design-system/library-react/web/selectbox/selectbox.css";
+
+export function Example() {
+  const [singleVal, setSingleVal] = useState("jabar");
+  const [multiVal, setMultiVal] = useState(["puskesmas", "rs"]);
+
+  const provinceOptions = [
+    { label: "DKI Jakarta", value: "dki" },
+    { label: "Jawa Barat", value: "jabar" },
+    { label: "Jawa Tengah", value: "jateng" },
+    { label: "Jawa Timur", value: "jatim" }
+  ];
+
+  const faskesTypes = [
+    { label: "Puskesmas", value: "puskesmas" },
+    { label: "Rumah Sakit Umum", value: "rs" },
+    { label: "Klinik Pratama", value: "klinik" },
+    { label: "Laboratorium", value: "lab" }
+  ];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '400px' }}>
+      <Selectbox
+        label="Provinsi"
+        options={provinceOptions}
+        value={singleVal}
+        searchable
+        onChange={(val) => setSingleVal(val)}
+      />
+      <Selectbox
+        label="Jenis Fasilitas (Multi-Select)"
+        options={faskesTypes}
+        value={multiVal}
+        multiple
+        searchable
+        onChange={(val) => setMultiVal(val)}
+      />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import Selectbox from "@ttdk-design-system/library-vue/web/selectbox";
+import "@ttdk-design-system/library-vue/web/selectbox/selectbox.css";
+
+const singleVal = ref("jabar");
+const multiVal = ref(["puskesmas", "rs"]);
+
+const provinceOptions = [
+  { label: "DKI Jakarta", value: "dki" },
+  { label: "Jawa Barat", value: "jabar" },
+  { label: "Jawa Tengah", value: "jateng" },
+  { label: "Jawa Timur", value: "jatim" }
+];
+
+const faskesTypes = [
+  { label: "Puskesmas", value: "puskesmas" },
+  { label: "Rumah Sakit Umum", value: "rs" },
+  { label: "Klinik Pratama", value: "klinik" },
+  { label: "Laboratorium", value: "lab" }
+];
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+    <Selectbox
+      label="Provinsi"
+      :options="provinceOptions"
+      :value="singleVal"
+      :searchable="true"
+      @change="(val: any) => (singleVal = val)"
+    />
+    <Selectbox
+      label="Jenis Fasilitas (Multi-Select)"
+      :options="faskesTypes"
+      :value="multiVal"
+      :multiple="true"
+      :searchable="true"
+      @change="(val: any) => (multiVal = val)"
+    />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Selectbox from "@ttdk-design-system/library-svelte/web/selectbox";
+  import "@ttdk-design-system/library-svelte/web/selectbox/selectbox.css";
+
+  let singleVal = "jabar";
+  let multiVal = ["puskesmas", "rs"];
+
+  const provinceOptions = [
+    { label: "DKI Jakarta", value: "dki" },
+    { label: "Jawa Barat", value: "jabar" },
+    { label: "Jawa Tengah", value: "jateng" },
+    { label: "Jawa Timur", value: "jatim" }
+  ];
+
+  const faskesTypes = [
+    { label: "Puskesmas", value: "puskesmas" },
+    { label: "Rumah Sakit Umum", value: "rs" },
+    { label: "Klinik Pratama", value: "klinik" },
+    { label: "Laboratorium", value: "lab" }
+  ];
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+  <Selectbox
+    label="Provinsi"
+    options={provinceOptions}
+    value={singleVal}
+    searchable={true}
+    on:change={(e) => (singleVal = e.detail)}
+  />
+  <Selectbox
+    label="Jenis Fasilitas (Multi-Select)"
+    options={faskesTypes}
+    value={multiVal}
+    multiple={true}
+    searchable={true}
+    on:change={(e) => (multiVal = e.detail)}
+  />
+</div>
+```

package/src/web/selectbox/index.ts

@@ -0,0 +1,3 @@
+export { default } from './selectbox';
+export { default as Selectbox } from './selectbox';
+export type { SelectboxProps, SelectboxOption, SelectboxUiProps } from './selectbox'