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

package/src/web/checkbox/checkbox.tsx

@@ -0,0 +1,307 @@
+"use client";
+import * as React from "react";
+
+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?: React.CSSProperties;
+
+  /**
+   * 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 { buildUiVars, UiProps } from "../../core/types";
+
+function Checkbox(props: CheckboxProps) {
+  return (
+    <label
+      className={`ttdk-checkbox-wrapper ttdk-checkbox-root ${
+        props.className || ""
+      }`.trim()}
+      data-size={props.size || "md"}
+      data-variant={props.variant || "primary"}
+      data-rounded={props.rounded || "md"}
+      data-disabled={props.disabled ? "true" : "false"}
+      data-checked={props.checked ? "true" : "false"}
+      data-state={
+        props.indeterminate
+          ? "indeterminate"
+          : props.checked
+          ? "checked"
+          : "unchecked"
+      }
+      data-indeterminate={props.indeterminate ? "true" : "false"}
+      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="checkbox"
+        className="ttdk-checkbox-native ttdk-checkbox-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-checkbox-control ${props.controlClass || ""}`.trim()}
+        style={{
+          ...buildUiVars(props.controlStyle),
+        }}
+      >
+        {props.indeterminate ? (
+          <svg className="ttdk-checkbox-icon" viewBox="0 0 24 24">
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+        ) : null}
+        {!props.indeterminate && props.checked ? (
+          <svg className="ttdk-checkbox-icon" viewBox="0 0 24 24">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        ) : null}
+      </span>
+      {props.label ||
+      props.description ||
+      props.helperText ||
+      props.children ||
+      props.errorMessage ||
+      (typeof props.error === "string" && props.error) ? (
+        <div className="ttdk-checkbox-label-wrapper">
+          {props.label || props.children ? (
+            <span
+              className={`ttdk-checkbox-label ${props.labelClass || ""}`.trim()}
+              style={{
+                ...buildUiVars(props.labelStyle),
+              }}
+            >
+              {props.label}
+              <>{props.children}</>
+            </span>
+          ) : null}
+          {props.helperText || props.description ? (
+            <span
+              className={`ttdk-checkbox-desc ttdk-checkbox-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-checkbox-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 Checkbox;
+
+export { Checkbox };

package/src/web/checkbox/index.ts

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

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