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

package/dist/web/input-number/manifest.json

@@ -0,0 +1,575 @@
+{
+  "name": "@ttdk-design-system/input-number",
+  "component": "InputNumber",
+  "folder": "input-number",
+  "description": "Komponen InputNumber TTDK sesuai spesifikasi Anatomy Desain Form & Input: 1. Field title / label (14px Semibold, #141313) 2. (Opsional) label (12px Regular, #9698A2) 3. Border radius 8px default (rounded) 4. Stepper controls (+/- spin buttons) dengan mode right-stacked atau split-counter 5. Input control numerik terproteksi min, max, step, & precision 6. Additional information / Helper text & error message",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "input-number.css",
+      "importPath": "web/input-number/input-number.css"
+    }
+  ],
+  "props": {},
+  "subInterfaces": {
+    "InputNumberProps": {
+      "label": {
+        "name": "label",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Teks label judul field yang ditampilkan di atas input (14px Semibold, #141313).",
+        "example": null,
+        "param": null
+      },
+      "labelStyle": {
+        "name": "labelStyle",
+        "type": "UiProps",
+        "optional": true,
+        "default": null,
+        "description": "Style kustom untuk elemen label judul field (UiProps).",
+        "example": null,
+        "param": null
+      },
+      "labelClass": {
+        "name": "labelClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Class CSS kustom untuk elemen label judul field.",
+        "example": null,
+        "param": null
+      },
+      "wrapperStyle": {
+        "name": "wrapperStyle",
+        "type": "UiProps",
+        "optional": true,
+        "default": null,
+        "description": "Style kustom untuk elemen kontainer input wrapper (UiProps).",
+        "example": null,
+        "param": null
+      },
+      "wrapperClass": {
+        "name": "wrapperClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Class CSS kustom untuk elemen kontainer input wrapper.",
+        "example": null,
+        "param": null
+      },
+      "inputStyle": {
+        "name": "inputStyle",
+        "type": "UiProps",
+        "optional": true,
+        "default": null,
+        "description": "Style kustom untuk elemen input control HTML (UiProps).",
+        "example": null,
+        "param": null
+      },
+      "inputClass": {
+        "name": "inputClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Class CSS kustom untuk elemen input control HTML.",
+        "example": null,
+        "param": null
+      },
+      "controlsStyle": {
+        "name": "controlsStyle",
+        "type": "UiProps",
+        "optional": true,
+        "default": null,
+        "description": "Style kustom untuk elemen stepper kontrol tombol (UiProps).",
+        "example": null,
+        "param": null
+      },
+      "controlsClass": {
+        "name": "controlsClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Class CSS kustom untuk elemen stepper kontrol tombol.",
+        "example": null,
+        "param": null
+      },
+      "errorMessageStyle": {
+        "name": "errorMessageStyle",
+        "type": "UiProps",
+        "optional": true,
+        "default": null,
+        "description": "Style kustom untuk elemen pesan error validasi (UiProps).",
+        "example": null,
+        "param": null
+      },
+      "errorMessageClass": {
+        "name": "errorMessageClass",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Class CSS kustom untuk elemen pesan error validasi.",
+        "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
+      },
+      "optional": {
+        "name": "optional",
+        "type": "boolean",
+        "optional": true,
+        "default": null,
+        "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": null,
+        "description": "Nilai teks placeholder saat input kosong (#9698A2).",
+        "example": null,
+        "param": null
+      },
+      "value": {
+        "name": "value",
+        "type": "number | string",
+        "optional": true,
+        "default": null,
+        "description": "Nilai terkontrol (controlled value) pada input number.",
+        "example": null,
+        "param": null
+      },
+      "defaultValue": {
+        "name": "defaultValue",
+        "type": "number | string",
+        "optional": true,
+        "default": null,
+        "description": "Nilai awal tidak terkontrol (uncontrolled initial value).",
+        "example": null,
+        "param": null
+      },
+      "name": {
+        "name": "name",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Nama form field HTML untuk integrasi formulir.",
+        "example": null,
+        "param": null
+      },
+      "id": {
+        "name": "id",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Identifier unik elemen input.",
+        "example": null,
+        "param": null
+      },
+      "error": {
+        "name": "error",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Status apakah input 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 input field. - `'sm'`: 38px - `'md'`: 48px (standar) - `'lg'`: 56px",
+        "example": null,
+        "param": null
+      },
+      "rounded": {
+        "name": "rounded",
+        "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+        "optional": true,
+        "default": "md",
+        "description": "Bentuk sudut kelengkungan input. - `'none'`: 0px - `'sm'`: 4px - `'md'`: 8px (standar desain) - `'lg'`: 12px - `'full'`: 9999px (kapsul)",
+        "example": null,
+        "param": null
+      },
+      "block": {
+        "name": "block",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menjadikan lebar field input memenuhi kontainer penuh (full-width 100%).",
+        "example": null,
+        "param": null
+      },
+      "disabled": {
+        "name": "disabled",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Status apakah field dinonaktifkan (disabled).",
+        "example": null,
+        "param": null
+      },
+      "readOnly": {
+        "name": "readOnly",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Status apakah field bersifat hanya-baca (readonly).",
+        "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
+      },
+      "iconLeft": {
+        "name": "iconLeft",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon di sebelah kiri dalam input (ukuran 20-24px, misal: Hash, Calculator, Currency).",
+        "example": null,
+        "param": null
+      },
+      "iconRight": {
+        "name": "iconRight",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ikon di sebelah kanan dalam input (ukuran 20-24px).",
+        "example": null,
+        "param": null
+      },
+      "addonLeft": {
+        "name": "addonLeft",
+        "type": "string | any",
+        "optional": true,
+        "default": null,
+        "description": "Addon / teks prefix di sebelah kiri luar input (misal: 'Rp', '+62').",
+        "example": null,
+        "param": null
+      },
+      "addonRight": {
+        "name": "addonRight",
+        "type": "string | any",
+        "optional": true,
+        "default": null,
+        "description": "Addon / teks suffix di sebelah kanan luar input (misal: 'kg', 'pcs', '%').",
+        "example": null,
+        "param": null
+      },
+      "autoComplete": {
+        "name": "autoComplete",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Konfigurasi atribut autocomplete HTML.",
+        "example": null,
+        "param": null
+      },
+      "min": {
+        "name": "min",
+        "type": "number",
+        "optional": true,
+        "default": null,
+        "description": "Nilai minimum yang diizinkan untuk input number.",
+        "example": null,
+        "param": null
+      },
+      "max": {
+        "name": "max",
+        "type": "number",
+        "optional": true,
+        "default": null,
+        "description": "Nilai maksimum yang diizinkan untuk input number.",
+        "example": null,
+        "param": null
+      },
+      "step": {
+        "name": "step",
+        "type": "number",
+        "optional": true,
+        "default": "1",
+        "description": "Nilai selisih kenaikan atau penurunan setiap kali stepper ditekan.",
+        "example": null,
+        "param": null
+      },
+      "precision": {
+        "name": "precision",
+        "type": "number",
+        "optional": true,
+        "default": null,
+        "description": "Jumlah angka di belakang koma (presisi desimal).",
+        "example": null,
+        "param": null
+      },
+      "thousandSeparator": {
+        "name": "thousandSeparator",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Mengaktifkan format pemisah ribuan otomatis dengan titik '.' (contoh: 1.000 atau 10.000). Nilai yang diteruskan ke callback form (onChange / onValueChange) tetap berupa number murni standar (contoh: 1000).",
+        "example": null,
+        "param": null
+      },
+      "allowExponential": {
+        "name": "allowExponential",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Mengizinkan tanda eksponensial ilmiah 'e' / 'E'.",
+        "example": null,
+        "param": null
+      },
+      "type": {
+        "name": "type",
+        "type": "string",
+        "optional": true,
+        "default": "text",
+        "description": "Tipe input HTML. Secara default 'text' dengan inputMode 'numeric'/'decimal' agar mendukung formatting dan pembatasan karakter tanpa bug bawaan browser.",
+        "example": null,
+        "param": null
+      },
+      "controls": {
+        "name": "controls",
+        "type": "boolean",
+        "optional": true,
+        "default": "true",
+        "description": "Menampilkan tombol stepper panah kontrol atas/bawah.",
+        "example": null,
+        "param": null
+      },
+      "withoutButton": {
+        "name": "withoutButton",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menghilangkan tombol kontrol increment dan decrement sehingga tampil seperti input teks biasa.",
+        "example": null,
+        "param": null
+      },
+      "controlsPosition": {
+        "name": "controlsPosition",
+        "type": "'right' | 'split'",
+        "optional": true,
+        "default": "right",
+        "description": "Posisi letak tombol kontrol stepper: - `'right'`: tombol stepper ditumpuk di sisi kanan (standar) - `'split'`: tombol minus di sisi kiri dan tombol plus di sisi kanan (mode counter)",
+        "example": null,
+        "param": null
+      },
+      "maxLength": {
+        "name": "maxLength",
+        "type": "number",
+        "optional": true,
+        "default": null,
+        "description": "Batas maksimum panjang karakter.",
+        "example": null,
+        "param": null
+      },
+      "minLength": {
+        "name": "minLength",
+        "type": "number",
+        "optional": true,
+        "default": null,
+        "description": "Batas minimum panjang karakter.",
+        "example": null,
+        "param": null
+      },
+      "style": {
+        "name": "style",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Inline CSS style object native.",
+        "example": null,
+        "param": null
+      },
+      "ui": {
+        "name": "ui",
+        "type": "UiProps",
+        "optional": true,
+        "default": null,
+        "description": "Kustomisasi visual granular root / form-item (UiProps).",
+        "example": null,
+        "param": null
+      },
+      "onChange": {
+        "name": "onChange",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat nilai input berubah (SyntheticEvent standar HTML).",
+        "example": null,
+        "param": null
+      },
+      "onValueChange": {
+        "name": "onValueChange",
+        "type": "(value: number | undefined) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat nilai numerik angka berubah.",
+        "example": null,
+        "param": null
+      },
+      "onInput": {
+        "name": "onInput",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat pengguna mengetik (input event).",
+        "example": null,
+        "param": null
+      },
+      "onBlur": {
+        "name": "onBlur",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat field input kehilangan fokus.",
+        "example": null,
+        "param": null
+      },
+      "onFocus": {
+        "name": "onFocus",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat field input mendapatkan fokus.",
+        "example": null,
+        "param": null
+      },
+      "inputRef": {
+        "name": "inputRef",
+        "type": "any",
+        "optional": true,
+        "default": null,
+        "description": "Ref instance elemen input HTML untuk akses kontrol DOM langsung (focus, blur, select).",
+        "example": null,
+        "param": null
+      },
+      "className": {
+        "name": "className",
+        "type": "string",
+        "optional": true,
+        "default": null,
+        "description": "Class CSS kustom.",
+        "example": null,
+        "param": null
+      },
+      "onKeyDown": {
+        "name": "onKeyDown",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event tombol keyboard ditekan.",
+        "example": null,
+        "param": null
+      },
+      "onKeyUp": {
+        "name": "onKeyUp",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event tombol keyboard dilepaskan.",
+        "example": null,
+        "param": null
+      },
+      "onCopy": {
+        "name": "onCopy",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat teks di-copy.",
+        "example": null,
+        "param": null
+      },
+      "onCut": {
+        "name": "onCut",
+        "type": "(event: any) => void",
+        "optional": true,
+        "default": null,
+        "description": "Callback event saat teks di-cut.",
+        "example": null,
+        "param": null
+      },
+      "loading": {
+        "name": "loading",
+        "type": "boolean",
+        "optional": true,
+        "default": "false",
+        "description": "Menampilkan spinner dan menonaktifkan interaksi field sementara menunggu proses async.",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}