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

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

@@ -0,0 +1,1153 @@
+<template>
+  <div
+    :class="`ttdk-form-item ${className || ''}`.trim()"
+    :data-disabled="disabled"
+    :data-error="Boolean(error || errorMessage)"
+    :data-size="size || 'md'"
+    :data-block="block ? 'true' : undefined"
+    :style="{
+      ...buildUiVars(ui),
+      ...(ui || {}),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <template v-if="label">
+      <label
+        :class="`ttdk-form-label ${labelClass || ''}`.trim()"
+        :for="id"
+        :style="{
+          ...buildUiVars(labelStyle),
+          ...(labelStyle || {}),
+        }"
+        ><span>{{ label }}</span>
+        <template v-if="required">
+          <span class="ttdk-form-required" aria-hidden="true"> * </span>
+        </template>
+
+        <template v-if="optional">
+          <span class="ttdk-form-optional">{{
+            optionalText || "(Opsional)"
+          }}</span>
+        </template>
+      </label>
+    </template>
+
+    <template v-if="helperText && helperTextPosition === 'top'">
+      <div
+        :class="`ttdk-form-helper-text ${helperTextClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(helperTextStyle),
+          ...(helperTextStyle || {}),
+        }"
+      >
+        {{ helperText }}
+      </div>
+    </template>
+
+    <div
+      :class="
+        `ttdk-input-wrapper ttdk-input-number-wrapper ${
+          wrapperClass || ''
+        }`.trim()
+      "
+      :data-filled="Boolean(String(getRawValue()) !== '')"
+      :data-error="Boolean(error || errorMessage)"
+      :data-disabled="Boolean(disabled)"
+      :data-size="size || 'md'"
+      :data-rounded="rounded || 'md'"
+      :data-split="
+        shouldShowControls() && controlsPosition === 'split'
+          ? 'true'
+          : undefined
+      "
+      :style="{
+        ...buildUiVars(wrapperStyle),
+        ...(wrapperStyle || {}),
+      }"
+    >
+      <template v-if="shouldShowControls() && controlsPosition === 'split'">
+        <button
+          type="button"
+          aria-label="Kurangi nilai"
+          class="ttdk-input-number-split-btn ttdk-input-number-split-down"
+          :tabIndex="-1"
+          :disabled="!canDecrement()"
+          :data-disabled="!canDecrement() ? 'true' : 'false'"
+          @click="async (event) => stepDown()"
+        ></button>
+      </template>
+
+      <template v-if="addonLeft">
+        <div class="ttdk-input-addon ttdk-input-addon-left">
+          {{ addonLeft }}
+        </div>
+      </template>
+
+      <div class="ttdk-input-inner">
+        <template v-if="iconLeft">
+          <span
+            class="ttdk-input-icon ttdk-input-icon-left"
+            aria-hidden="true"
+            >{{ iconLeft }}</span
+          >
+        </template>
+
+        <input
+          ref="inputRef"
+          :class="
+            `ttdk-input-control ttdk-input-number-control ${
+              inputClass || ''
+            }`.trim()
+          "
+          :type="getInputType()"
+          :inputMode="getInputMode()"
+          :name="name"
+          :id="id"
+          :value="getDisplayValue()"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          :readOnly="readOnly"
+          :required="required"
+          :autocomplete="autoComplete"
+          :maxLength="maxLength"
+          :minLength="minLength"
+          :min="min"
+          :max="max"
+          :step="step !== undefined ? step : 1"
+          :aria-invalid="Boolean(error || errorMessage)"
+          :style="{
+            ...buildUiVars(inputStyle),
+            ...(inputStyle || {}),
+          }"
+          @change="async (e) => handleChange(e)"
+          @input="async (e) => handleInput(e)"
+          @blur="async (e) => handleBlur(e)"
+          @focus="async (e) => onFocus && onFocus(e)"
+          @copy="async (e) => handleCopy(e)"
+          @cut="async (e) => handleCut(e)"
+          @keydown="async (e) => handleKeyDown(e)"
+          @keyup="async (e) => onKeyUp && onKeyUp(e)"
+        />
+        <template v-if="loading">
+          <span
+            class="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>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.25"
+                transform="rotate(30 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.325"
+                transform="rotate(60 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.4"
+                transform="rotate(90 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.475"
+                transform="rotate(120 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.55"
+                transform="rotate(150 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.625"
+                transform="rotate(180 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.7"
+                transform="rotate(210 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.775"
+                transform="rotate(240 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.85"
+                transform="rotate(270 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.925"
+                transform="rotate(300 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="1"
+                transform="rotate(330 12 12)"
+              ></line></svg
+          ></span>
+        </template>
+
+        <template v-if="!loading && iconRight">
+          <span
+            class="ttdk-input-icon ttdk-input-icon-right"
+            aria-hidden="true"
+            >{{ iconRight }}</span
+          >
+        </template>
+
+        <template v-if="shouldShowControls() && controlsPosition !== 'split'">
+          <div
+            :class="`ttdk-input-number-stepper ${controlsClass || ''}`.trim()"
+            :style="{
+              ...buildUiVars(controlsStyle),
+              ...(controlsStyle || {}),
+            }"
+          >
+            <button
+              type="button"
+              aria-label="Tingkatkan nilai"
+              class="ttdk-input-number-btn ttdk-input-number-btn-up"
+              :tabIndex="-1"
+              :disabled="!canIncrement()"
+              :data-disabled="!canIncrement() ? 'true' : 'false'"
+              @click="async (event) => stepUp()"
+            ></button
+            ><button
+              type="button"
+              aria-label="Kurangi nilai"
+              class="ttdk-input-number-btn ttdk-input-number-btn-down"
+              :tabIndex="-1"
+              :disabled="!canDecrement()"
+              :data-disabled="!canDecrement() ? 'true' : 'false'"
+              @click="async (event) => stepDown()"
+            ></button>
+          </div>
+        </template>
+      </div>
+      <template v-if="addonRight">
+        <div class="ttdk-input-addon ttdk-input-addon-right">
+          {{ addonRight }}
+        </div>
+      </template>
+
+      <template v-if="shouldShowControls() && controlsPosition === 'split'">
+        <button
+          type="button"
+          aria-label="Tingkatkan nilai"
+          class="ttdk-input-number-split-btn ttdk-input-number-split-up"
+          :tabIndex="-1"
+          :disabled="!canIncrement()"
+          :data-disabled="!canIncrement() ? 'true' : 'false'"
+          @click="async (event) => stepUp()"
+        ></button>
+      </template>
+    </div>
+    <template v-if="helperText && helperTextPosition !== 'top'">
+      <div
+        :class="`ttdk-form-helper-text ${helperTextClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(helperTextStyle),
+          ...(helperTextStyle || {}),
+        }"
+      >
+        {{ helperText }}
+      </div>
+    </template>
+
+    <template v-if="errorMessage && (error || errorMessage)">
+      <div
+        role="alert"
+        :class="`ttdk-form-error-msg ${errorMessageClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(errorMessageStyle),
+          ...(errorMessageStyle || {}),
+        }"
+      >
+        <span>{{ errorMessage }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+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?: any;
+
+  /**
+   * 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
+ */
+
+const props = withDefaults(defineProps<InputNumberProps>(), {
+  controls: true,
+});
+const innerValue = ref(
+  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.value === "-") {
+      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.value === "string" &&
+      (innerValue.value.includes(".") ||
+        innerValue.value.includes(",") ||
+        innerValue.value === "-")
+    ) {
+      const innerNum = Number(parseToRawNumber(innerValue.value));
+      const propNum = Number(props.value);
+      if (innerNum === propNum) {
+        return innerValue.value;
+      }
+    }
+    return props.value;
+  }
+  // 2. Uncontrolled mode: gunakan state.innerValue
+  return innerValue.value !== undefined && innerValue.value !== null
+    ? innerValue.value
+    : "";
+}
+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) {
+  innerValue.value = 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);
+    innerValue.value = 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 {
+    innerValue.value = 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);
+  innerValue.value = 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);
+      innerValue.value = 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);
+      innerValue.value = 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);
+  }
+}
+</script>