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

package/src/web/input-number/input-number.tsx

@@ -0,0 +1,1193 @@
+"use client";
+import * as React from "react";
+import { useState, forwardRef } from "react";
+
+export type InputNumberUiProps = UiProps;
+export interface InputNumberProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas input (14px Semibold, #141313).
+   */
+  label?: string;
+
+  /**
+   * Style kustom untuk elemen label judul field (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen label judul field.
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk elemen kontainer input wrapper (UiProps).
+   */
+  wrapperStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen kontainer input wrapper.
+   */
+  wrapperClass?: string;
+
+  /**
+   * Style kustom untuk elemen input control HTML (UiProps).
+   */
+  inputStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen input control HTML.
+   */
+  inputClass?: string;
+
+  /**
+   * Style kustom untuk elemen stepper kontrol tombol (UiProps).
+   */
+  controlsStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen stepper kontrol tombol.
+   */
+  controlsClass?: string;
+
+  /**
+   * Style kustom untuk elemen pesan error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen pesan error validasi.
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Style kustom untuk elemen helper text (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen helper text.
+   */
+  helperTextClass?: string;
+
+  /**
+   * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+   */
+  optional?: boolean;
+
+  /**
+   * Kustomisasi teks keterangan opsional.
+   * @default '(Opsional)'
+   */
+  optionalText?: string;
+
+  /**
+   * Nilai teks placeholder saat input kosong (#9698A2).
+   */
+  placeholder?: string;
+
+  /**
+   * Nilai terkontrol (controlled value) pada input number.
+   */
+  value?: number | string;
+
+  /**
+   * Nilai awal tidak terkontrol (uncontrolled initial value).
+   */
+  defaultValue?: number | string;
+
+  /**
+   * Nama form field HTML untuk integrasi formulir.
+   */
+  name?: string;
+
+  /**
+   * Identifier unik elemen input.
+   */
+  id?: string;
+
+  /**
+   * Status apakah input sedang dalam kondisi error / tidak valid.
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Pesan teks penjelasan kesalahan validasi di bawah field.
+   */
+  errorMessage?: string;
+
+  /**
+   * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+   */
+  helperText?: string;
+
+  /**
+   * Posisi teks helper
+   */
+  helperTextPosition?: "top" | "bottom";
+
+  /**
+   * Skala ukuran input field.
+   * - `'sm'`: 38px
+   * - `'md'`: 48px (standar)
+   * - `'lg'`: 56px
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan input.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (kapsul)
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menjadikan lebar field input memenuhi kontainer penuh (full-width 100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Status apakah field dinonaktifkan (disabled).
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Status apakah field bersifat hanya-baca (readonly).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Ikon di sebelah kiri dalam input (ukuran 20-24px, misal: Hash, Calculator, Currency).
+   */
+  iconLeft?: any;
+
+  /**
+   * Ikon di sebelah kanan dalam input (ukuran 20-24px).
+   */
+  iconRight?: any;
+
+  /**
+   * Addon / teks prefix di sebelah kiri luar input (misal: 'Rp', '+62').
+   */
+  addonLeft?: string | any;
+
+  /**
+   * Addon / teks suffix di sebelah kanan luar input (misal: 'kg', 'pcs', '%').
+   */
+  addonRight?: string | any;
+
+  /**
+   * Konfigurasi atribut autocomplete HTML.
+   */
+  autoComplete?: string;
+
+  /**
+   * Nilai minimum yang diizinkan untuk input number.
+   */
+  min?: number;
+
+  /**
+   * Nilai maksimum yang diizinkan untuk input number.
+   */
+  max?: number;
+
+  /**
+   * Nilai selisih kenaikan atau penurunan setiap kali stepper ditekan.
+   * @default 1
+   */
+  step?: number;
+
+  /**
+   * Jumlah angka di belakang koma (presisi desimal).
+   */
+  precision?: number;
+
+  /**
+   * 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).
+   * @default false
+   */
+  thousandSeparator?: boolean;
+
+  /**
+   * Mengizinkan tanda eksponensial ilmiah 'e' / 'E'.
+   * @default false
+   */
+  allowExponential?: boolean;
+
+  /**
+   * Tipe input HTML. Secara default 'text' dengan inputMode 'numeric'/'decimal' agar mendukung formatting dan pembatasan karakter tanpa bug bawaan browser.
+   * @default 'text'
+   */
+  type?: string;
+
+  /**
+   * Menampilkan tombol stepper panah kontrol atas/bawah.
+   * @default true
+   */
+  controls?: boolean;
+
+  /**
+   * Menghilangkan tombol kontrol increment dan decrement sehingga tampil seperti input teks biasa.
+   * @default false
+   */
+  withoutButton?: boolean;
+
+  /**
+   * 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)
+   * @default 'right'
+   */
+  controlsPosition?: "right" | "split";
+
+  /**
+   * Batas maksimum panjang karakter.
+   */
+  maxLength?: number;
+
+  /**
+   * Batas minimum panjang karakter.
+   */
+  minLength?: number;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Kustomisasi visual granular root / form-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback event saat nilai input berubah (SyntheticEvent standar HTML).
+   */
+  onChange?: (event: any) => void;
+
+  /**
+   * Callback event saat nilai numerik angka berubah.
+   */
+  onValueChange?: (value: number | undefined) => void;
+
+  /**
+   * Callback event saat pengguna mengetik (input event).
+   */
+  onInput?: (event: any) => void;
+
+  /**
+   * Callback event saat field input kehilangan fokus.
+   */
+  onBlur?: (event: any) => void;
+
+  /**
+   * Callback event saat field input mendapatkan fokus.
+   */
+  onFocus?: (event: any) => void;
+
+  /**
+   * Ref instance elemen input HTML untuk akses kontrol DOM langsung (focus, blur, select).
+   */
+  inputRef?: any;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Callback event tombol keyboard ditekan.
+   */
+  onKeyDown?: (event: any) => void;
+
+  /**
+   * Callback event tombol keyboard dilepaskan.
+   */
+  onKeyUp?: (event: any) => void;
+
+  /**
+   * Callback event saat teks di-copy.
+   */
+  onCopy?: (event: any) => void;
+
+  /**
+   * Callback event saat teks di-cut.
+   */
+  onCut?: (event: any) => void;
+
+  /**
+   * Menampilkan spinner dan menonaktifkan interaksi field sementara menunggu proses async.
+   * @default false
+   */
+  loading?: boolean;
+}
+
+/**
+ * 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
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+const InputNumber = forwardRef<any, InputNumberProps>(
+  function InputNumber(props: InputNumberProps, inputRef) {
+    const [innerValue, setInnerValue] = useState(() =>
+      props.value !== undefined
+        ? props.value
+        : props.defaultValue !== undefined
+        ? props.defaultValue
+        : ""
+    );
+
+    function shouldShowControls() {
+      if (props.withoutButton) {
+        return false;
+      }
+      return props.controls !== false;
+    }
+
+    function getStep() {
+      return props.step !== undefined ? props.step : 1;
+    }
+
+    function getPrecision() {
+      if (props.precision !== undefined) {
+        return props.precision;
+      }
+      if (props.step !== undefined) {
+        const stepVal = props.step;
+        const stepStr = String(stepVal);
+        const dotIdx = stepStr.indexOf(".");
+        return dotIdx === -1 ? 0 : stepStr.length - dotIdx - 1;
+      }
+      return -1;
+    }
+
+    function getThousandSep() {
+      return props.thousandSeparator ? "." : "";
+    }
+
+    function getInputType() {
+      if (props.type) return props.type;
+      return "text";
+    }
+
+    function getInputMode() {
+      return getPrecision() === 0 ? "numeric" : "decimal";
+    }
+
+    function parseToRawNumber(displayVal: any) {
+      if (
+        displayVal === undefined ||
+        displayVal === null ||
+        displayVal === ""
+      ) {
+        return "";
+      }
+      if (typeof displayVal === "number") {
+        return String(displayVal);
+      }
+      let s = String(displayVal).trim();
+      if (s === "-" || s === "") return s;
+      let isNegative = false;
+      if (s.startsWith("-")) {
+        isNegative = true;
+        s = s.slice(1);
+      }
+
+      // Hapus titik pemisah ribuan
+      s = s.replace(/\./g, "");
+
+      // Ubah koma desimal menjadi titik desimal standar
+      s = s.replace(/,/g, ".");
+
+      // Hapus karakter selain digit dan titik
+      s = s.replace(/[^0-9.]/g, "");
+
+      // Pastikan maksimal 1 titik desimal
+      const dotIndex = s.indexOf(".");
+      if (dotIndex !== -1) {
+        s = s.slice(0, dotIndex + 1) + s.slice(dotIndex + 1).replace(/\./g, "");
+      }
+      return (isNegative ? "-" : "") + s;
+    }
+
+    function formatValue(rawVal: any) {
+      if (rawVal === undefined || rawVal === null || rawVal === "") {
+        return "";
+      }
+      const strVal = String(rawVal);
+      if (strVal === "-") return "-";
+      const thSep = getThousandSep();
+      let isNegative = false;
+      let clean = strVal;
+      if (clean.startsWith("-")) {
+        isNegative = true;
+        clean = clean.slice(1);
+      }
+
+      // Pisahkan bagian integer dan desimal
+      let intPart = clean;
+      let decPart = "";
+      let hasDecimal = false;
+      if (clean.includes(".")) {
+        hasDecimal = true;
+        const parts = clean.split(".");
+        intPart = parts[0];
+        decPart = parts.slice(1).join("");
+      } else if (clean.includes(",")) {
+        hasDecimal = true;
+        const parts = clean.split(",");
+        intPart = parts[0];
+        decPart = parts.slice(1).join("");
+      }
+
+      // Format ribuan pada integer part dengan titik jika thousandSeparator aktif
+      const formattedInt = thSep
+        ? intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thSep)
+        : intPart;
+      let result =
+        (isNegative ? "-" : "") + (formattedInt || (hasDecimal ? "0" : ""));
+      if (hasDecimal) {
+        result += "," + decPart;
+      }
+      return result;
+    }
+
+    function getRawValue() {
+      // 1. Controlled mode: jika prop value diberikan ke komponen
+      if (props.value !== undefined) {
+        // Jika user sedang mengetik tanda minus murni ('-'), pertahankan!
+        if (innerValue === "-") {
+          return "-";
+        }
+        if (
+          props.value === undefined ||
+          props.value === null ||
+          props.value === ""
+        ) {
+          return "";
+        }
+        // Pertahankan tanda minus atau titik desimal saat sedang diketik (misal '12,' atau '12,0' atau '-')
+        if (
+          typeof innerValue === "string" &&
+          (innerValue.includes(".") ||
+            innerValue.includes(",") ||
+            innerValue === "-")
+        ) {
+          const innerNum = Number(parseToRawNumber(innerValue));
+          const propNum = Number(props.value);
+          if (innerNum === propNum) {
+            return innerValue;
+          }
+        }
+        return props.value;
+      }
+      // 2. Uncontrolled mode: gunakan state.innerValue
+      return innerValue !== undefined && innerValue !== null ? innerValue : "";
+    }
+
+    function getDisplayValue() {
+      const raw = getRawValue();
+      if (raw === undefined || raw === null || raw === "") return "";
+      if (raw === "-") return "-";
+      return formatValue(raw);
+    }
+
+    function getCurrentNumber() {
+      const raw = getRawValue();
+      if (raw === undefined || raw === null || raw === "") return undefined;
+      const parsed = parseToRawNumber(raw);
+      if (parsed === "" || parsed === "-") return undefined;
+      const num = Number(parsed);
+      return isNaN(num) ? undefined : num;
+    }
+
+    function canIncrement() {
+      if (props.disabled || props.readOnly || props.loading) return false;
+      const num = getCurrentNumber();
+      if (props.max !== undefined && num !== undefined) {
+        return num < props.max;
+      }
+      return true;
+    }
+
+    function canDecrement() {
+      if (props.disabled || props.readOnly || props.loading) return false;
+      const num = getCurrentNumber();
+      if (props.min !== undefined && num !== undefined) {
+        return num > props.min;
+      }
+      return true;
+    }
+
+    function clamp(val: number) {
+      let result = val;
+      if (props.min !== undefined && result < props.min) {
+        result = props.min;
+      }
+      if (props.max !== undefined && result > props.max) {
+        result = props.max;
+      }
+      const prec = getPrecision();
+      if (prec > 0) {
+        const factor = Math.pow(10, prec);
+        result = Math.round(result * factor) / factor;
+      } else if (prec === 0 && props.precision === 0) {
+        result = Math.round(result);
+      }
+      return result;
+    }
+
+    function emitValue(nextVal: number | string) {
+      setInnerValue(nextVal);
+      const rawParsed =
+        typeof nextVal === "string" ? parseToRawNumber(nextVal) : nextVal;
+      const numVal =
+        typeof rawParsed === "number"
+          ? rawParsed
+          : rawParsed === "" || rawParsed === "-"
+          ? undefined
+          : Number(rawParsed);
+      const safeNumVal =
+        numVal !== undefined && isNaN(numVal) ? undefined : numVal;
+      if (props.onValueChange) {
+        props.onValueChange(safeNumVal);
+      }
+      if (props.onChange) {
+        const syntheticEvent = {
+          target: {
+            value: rawParsed,
+            valueAsNumber: safeNumVal,
+            name: props.name,
+            id: props.id,
+          },
+          currentTarget: {
+            value: rawParsed,
+            valueAsNumber: safeNumVal,
+          },
+          type: "change",
+          value: rawParsed,
+        };
+        props.onChange(syntheticEvent);
+      }
+    }
+
+    function stepUp() {
+      if (!canIncrement()) return;
+      const current = getCurrentNumber();
+      const step = getStep();
+      const base =
+        current !== undefined
+          ? current
+          : props.min !== undefined
+          ? props.min
+          : 0;
+      const next = clamp(base + step);
+      emitValue(next);
+    }
+
+    function stepDown() {
+      if (!canDecrement()) return;
+      const current = getCurrentNumber();
+      const step = getStep();
+      const base =
+        current !== undefined
+          ? current
+          : props.min !== undefined
+          ? props.min
+          : 0;
+      const next = clamp(base - step);
+      emitValue(next);
+    }
+
+    function handleInput(e: any) {
+      const input = e.target;
+      const inputValue = input ? input.value : "";
+      const raw = parseToRawNumber(inputValue);
+      if (getThousandSep()) {
+        const cursorPos = (input && input.selectionEnd) || inputValue.length;
+        let validCharsBeforeCursor = 0;
+        for (let i = 0; i < cursorPos; i++) {
+          const ch = inputValue[i];
+          if (/\d/.test(ch) || ch === "-" || ch === ",") {
+            validCharsBeforeCursor++;
+          }
+        }
+        const formatted = formatValue(raw);
+        setInnerValue(raw);
+        emitValue(raw);
+        if (input && typeof input.setSelectionRange === "function") {
+          let newCursorPos = 0;
+          let count = 0;
+          for (let i = 0; i < formatted.length; i++) {
+            const ch = formatted[i];
+            if (/\d/.test(ch) || ch === "-" || ch === ",") {
+              count++;
+            }
+            if (count >= validCharsBeforeCursor) {
+              newCursorPos = i + 1;
+              break;
+            }
+          }
+          if (count < validCharsBeforeCursor) {
+            newCursorPos = formatted.length;
+          }
+          input.value = formatted;
+          try {
+            input.setSelectionRange(newCursorPos, newCursorPos);
+          } catch (err) {
+            // ignore
+          }
+        }
+      } else {
+        setInnerValue(raw);
+        emitValue(raw);
+      }
+      if (props.onInput) {
+        props.onInput(e);
+      }
+    }
+
+    function handleChange(e: any) {
+      handleInput(e);
+    }
+
+    function handleBlur(e: any) {
+      const current = getCurrentNumber();
+      if (current !== undefined) {
+        const clamped = clamp(current);
+        if (clamped !== current) {
+          emitValue(clamped);
+        }
+      }
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
+    }
+
+    function handleCopy(e: any) {
+      const input = e.target;
+      if (!input) return;
+      const start = input.selectionStart;
+      const end = input.selectionEnd;
+      if (start === null || end === null || start === end) return;
+      const selectedText = input.value.substring(start, end);
+      if (!selectedText) return;
+
+      // Hilangkan titik separator ribuan, desimal koma dipertahankan
+      const cleanText = selectedText.replace(/\./g, "");
+      if (e.clipboardData) {
+        e.clipboardData.setData("text/plain", cleanText);
+        e.preventDefault();
+      }
+      if (props.onCopy) {
+        props.onCopy(e);
+      }
+    }
+
+    function handleCut(e: any) {
+      if (props.disabled || props.readOnly) {
+        e.preventDefault();
+        return;
+      }
+      const input = e.target;
+      if (!input) return;
+      const start = input.selectionStart;
+      const end = input.selectionEnd;
+      if (start === null || end === null || start === end) return;
+      const selectedText = input.value.substring(start, end);
+      if (!selectedText) return;
+
+      // Hilangkan titik separator ribuan, desimal koma dipertahankan
+      const cleanText = selectedText.replace(/\./g, "");
+      if (e.clipboardData) {
+        e.clipboardData.setData("text/plain", cleanText);
+        e.preventDefault();
+      }
+      const val = input.value || "";
+      const nextVal = val.slice(0, start) + val.slice(end);
+      const raw = parseToRawNumber(nextVal);
+      setInnerValue(raw);
+      emitValue(raw);
+      const formatted = formatValue(raw);
+      input.value = formatted;
+      try {
+        input.setSelectionRange(start, start);
+      } catch (err) {
+        // ignore
+      }
+      if (props.onCut) {
+        props.onCut(e);
+      }
+    }
+
+    function handleKeyDown(e: any) {
+      // 1. Izinkan navigasi, editing, copy-paste, dan shortcut keyboard
+      if (
+        e.key === "Backspace" ||
+        e.key === "Delete" ||
+        e.key === "Tab" ||
+        e.key === "Escape" ||
+        e.key === "Enter" ||
+        e.key === "ArrowLeft" ||
+        e.key === "ArrowRight" ||
+        e.key === "Home" ||
+        e.key === "End" ||
+        e.key === "PageUp" ||
+        e.key === "PageDown" ||
+        e.ctrlKey ||
+        e.metaKey ||
+        e.altKey ||
+        e.key.length > 1
+      ) {
+        if (props.onKeyDown) {
+          props.onKeyDown(e);
+        }
+        return;
+      }
+
+      // 2. Stepper Up / Down via panah keyboard
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        stepUp();
+        if (props.onKeyDown) props.onKeyDown(e);
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        stepDown();
+        if (props.onKeyDown) props.onKeyDown(e);
+        return;
+      }
+
+      // 3. Karakter Eksponensial ('e', 'E')
+      if (e.key === "e" || e.key === "E") {
+        if (!props.allowExponential) {
+          e.preventDefault();
+          return;
+        }
+      }
+
+      // 4. Blokir tanda plus '+'
+      if (e.key === "+") {
+        e.preventDefault();
+        return;
+      }
+
+      // 5. Pembatasan tanda minus '-'
+      if (e.key === "-") {
+        // Jika nilai minimum >= 0, dilarang tanda minus
+        if (props.min !== undefined && props.min >= 0) {
+          e.preventDefault();
+          return;
+        }
+        const input = e.target;
+        const val = input ? input.value : "";
+
+        // Jika sudah ada tanda minus di depan, toggle/hapus tanda minus
+        if (val.startsWith("-")) {
+          e.preventDefault();
+          const positiveVal = val.slice(1);
+          const raw = parseToRawNumber(positiveVal);
+          setInnerValue(raw);
+          emitValue(raw);
+          return;
+        }
+
+        // Jika ada teks dan kursor tidak di posisi 0, jadikan negatif (tambahkan '-' di depan)
+        if (
+          val &&
+          input &&
+          (input.selectionStart === null || input.selectionStart > 0)
+        ) {
+          e.preventDefault();
+          const negativeVal = "-" + val;
+          const raw = parseToRawNumber(negativeVal);
+          setInnerValue(raw);
+          emitValue(raw);
+          return;
+        }
+        if (props.onKeyDown) props.onKeyDown(e);
+        return;
+      }
+
+      // 6. Pemisah desimal (koma ',')
+      if (e.key === ",") {
+        // Hanya tolak jika developer secara eksplisit menyetel precision={0}
+        if (props.precision === 0) {
+          e.preventDefault();
+          return;
+        }
+        const input = e.target;
+        const val = input ? input.value : "";
+
+        // Hanya izinkan 1 koma desimal
+        if (val.includes(",")) {
+          e.preventDefault();
+          return;
+        }
+        if (props.onKeyDown) props.onKeyDown(e);
+        return;
+      }
+
+      // 6b. Pemisah ribuan (titik '.')
+      if (e.key === ".") {
+        // Titik sebagai pemisah ribuan diizinkan
+        if (props.onKeyDown) props.onKeyDown(e);
+        return;
+      }
+
+      // 7. Jika bukan digit 0-9, blokir karakter lainnya (termasuk aritmatika *, /, %, =, dll.)
+      if (!/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+        return;
+      }
+      if (props.onKeyDown) {
+        props.onKeyDown(e);
+      }
+    }
+
+    return (
+      <div
+        className={`ttdk-form-item ${props.className || ""}`.trim()}
+        data-disabled={props.disabled}
+        data-error={Boolean(props.error || props.errorMessage)}
+        data-size={props.size || "md"}
+        data-block={props.block ? "true" : undefined}
+        style={{
+          ...buildUiVars(props.ui),
+          ...((props.ui as any) || {}),
+          ...((props as any)["style"] || {}),
+              ...props.style,
+        }}
+      >
+        {props.label ? (
+          <label
+            className={`ttdk-form-label ${props.labelClass || ""}`.trim()}
+            htmlFor={props.id}
+            style={{
+              ...buildUiVars(props.labelStyle),
+              ...((props.labelStyle as any) || {}),
+            }}
+          >
+            <span>{props.label}</span>
+            {props.required ? (
+              <span className="ttdk-form-required" aria-hidden="true">
+                *
+              </span>
+            ) : null}
+            {props.optional ? (
+              <span className="ttdk-form-optional">
+                {props.optionalText || "(Opsional)"}
+              </span>
+            ) : null}
+          </label>
+        ) : null}
+        {props.helperText && props.helperTextPosition === "top" ? (
+          <div
+            className={`ttdk-form-helper-text ${
+              props.helperTextClass || ""
+            }`.trim()}
+            style={{
+              ...buildUiVars(props.helperTextStyle),
+              ...((props.helperTextStyle as any) || {}),
+            }}
+          >
+            {props.helperText}
+          </div>
+        ) : null}
+        <div
+          className={`ttdk-input-wrapper ttdk-input-number-wrapper ${
+            props.wrapperClass || ""
+          }`.trim()}
+          data-filled={Boolean(String(getRawValue()) !== "")}
+          data-error={Boolean(props.error || props.errorMessage)}
+          data-disabled={Boolean(props.disabled)}
+          data-size={props.size || "md"}
+          data-rounded={props.rounded || "md"}
+          data-split={
+            shouldShowControls() && props.controlsPosition === "split"
+              ? "true"
+              : undefined
+          }
+          style={{
+            ...buildUiVars(props.wrapperStyle),
+            ...((props.wrapperStyle as any) || {}),
+          }}
+        >
+          {shouldShowControls() && props.controlsPosition === "split" ? (
+            <button
+              type="button"
+              aria-label="Kurangi nilai"
+              className="ttdk-input-number-split-btn ttdk-input-number-split-down"
+              tabIndex={-1}
+              disabled={!canDecrement()}
+              data-disabled={!canDecrement() ? "true" : "false"}
+              onClick={(event) => stepDown()}
+            />
+          ) : null}
+          {props.addonLeft ? (
+            <div className="ttdk-input-addon ttdk-input-addon-left">
+              {props.addonLeft}
+            </div>
+          ) : null}
+          <div className="ttdk-input-inner">
+            {props.iconLeft ? (
+              <span
+                className="ttdk-input-icon ttdk-input-icon-left"
+                aria-hidden="true"
+              >
+                {props.iconLeft}
+              </span>
+            ) : null}
+            <input
+              ref={inputRef}
+              className={`ttdk-input-control ttdk-input-number-control ${
+                props.inputClass || ""
+              }`.trim()}
+              type={getInputType()}
+              inputMode={getInputMode()}
+              name={props.name}
+              id={props.id}
+              value={getDisplayValue()}
+              placeholder={props.placeholder}
+              disabled={props.disabled}
+              readOnly={props.readOnly}
+              required={props.required}
+              autoComplete={props.autoComplete}
+              maxLength={props.maxLength}
+              minLength={props.minLength}
+              min={props.min}
+              max={props.max}
+              step={props.step !== undefined ? props.step : 1}
+              aria-invalid={Boolean(props.error || props.errorMessage)}
+              style={{
+                ...buildUiVars(props.inputStyle),
+                ...((props.inputStyle as any) || {}),
+              }}
+              onChange={(e) => handleChange(e)}
+              onInput={(e) => handleInput(e)}
+              onBlur={(e) => handleBlur(e)}
+              onFocus={(e) => props.onFocus && props.onFocus(e)}
+              onCopy={(e) => handleCopy(e)}
+              onCut={(e) => handleCut(e)}
+              onKeyDown={(e) => handleKeyDown(e)}
+              onKeyUp={(e) => props.onKeyUp && props.onKeyUp(e)}
+            />
+            {props.loading ? (
+              <span
+                className="ttdk-input-icon ttdk-input-icon-right ttdk-input-spinner"
+                aria-hidden="true"
+              >
+                <svg viewBox="0 0 24 24">
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.175"
+                    transform="rotate(0 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.25"
+                    transform="rotate(30 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.325"
+                    transform="rotate(60 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.4"
+                    transform="rotate(90 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.475"
+                    transform="rotate(120 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.55"
+                    transform="rotate(150 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.625"
+                    transform="rotate(180 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.7"
+                    transform="rotate(210 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.775"
+                    transform="rotate(240 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.85"
+                    transform="rotate(270 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="0.925"
+                    transform="rotate(300 12 12)"
+                  />
+                  <line
+                    x1="12"
+                    y1="2.5"
+                    x2="12"
+                    y2="6.5"
+                    opacity="1"
+                    transform="rotate(330 12 12)"
+                  />
+                </svg>
+              </span>
+            ) : null}
+            {!props.loading && props.iconRight ? (
+              <span
+                className="ttdk-input-icon ttdk-input-icon-right"
+                aria-hidden="true"
+              >
+                {props.iconRight}
+              </span>
+            ) : null}
+            {shouldShowControls() && props.controlsPosition !== "split" ? (
+              <div
+                className={`ttdk-input-number-stepper ${
+                  props.controlsClass || ""
+                }`.trim()}
+                style={{
+                  ...buildUiVars(props.controlsStyle),
+                  ...((props.controlsStyle as any) || {}),
+                }}
+              >
+                <button
+                  type="button"
+                  aria-label="Tingkatkan nilai"
+                  className="ttdk-input-number-btn ttdk-input-number-btn-up"
+                  tabIndex={-1}
+                  disabled={!canIncrement()}
+                  data-disabled={!canIncrement() ? "true" : "false"}
+                  onClick={(event) => stepUp()}
+                />
+                <button
+                  type="button"
+                  aria-label="Kurangi nilai"
+                  className="ttdk-input-number-btn ttdk-input-number-btn-down"
+                  tabIndex={-1}
+                  disabled={!canDecrement()}
+                  data-disabled={!canDecrement() ? "true" : "false"}
+                  onClick={(event) => stepDown()}
+                />
+              </div>
+            ) : null}
+          </div>
+          {props.addonRight ? (
+            <div className="ttdk-input-addon ttdk-input-addon-right">
+              {props.addonRight}
+            </div>
+          ) : null}
+          {shouldShowControls() && props.controlsPosition === "split" ? (
+            <button
+              type="button"
+              aria-label="Tingkatkan nilai"
+              className="ttdk-input-number-split-btn ttdk-input-number-split-up"
+              tabIndex={-1}
+              disabled={!canIncrement()}
+              data-disabled={!canIncrement() ? "true" : "false"}
+              onClick={(event) => stepUp()}
+            />
+          ) : null}
+        </div>
+        {props.helperText && props.helperTextPosition !== "top" ? (
+          <div
+            className={`ttdk-form-helper-text ${
+              props.helperTextClass || ""
+            }`.trim()}
+            style={{
+              ...buildUiVars(props.helperTextStyle),
+              ...((props.helperTextStyle as any) || {}),
+            }}
+          >
+            {props.helperText}
+          </div>
+        ) : null}
+        {props.errorMessage && (props.error || props.errorMessage) ? (
+          <div
+            role="alert"
+            className={`ttdk-form-error-msg ${
+              props.errorMessageClass || ""
+            }`.trim()}
+            style={{
+              ...buildUiVars(props.errorMessageStyle),
+              ...((props.errorMessageStyle as any) || {}),
+            }}
+          >
+            <span>{props.errorMessage}</span>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+export default InputNumber;
+
+export { InputNumber };