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

package/src/web/input/input.tsx

@@ -0,0 +1,537 @@
+"use client";
+import * as React from "react";
+import { forwardRef } from "react";
+
+export type InputUiProps = UiProps;
+export interface InputProps {
+  /**
+   * 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 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.
+   */
+  value?: string | number;
+
+  /**
+   * Nilai awal tidak terkontrol (uncontrolled initial value).
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Tipe field input HTML standar.
+   * @default 'text'
+   */
+  type?: 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'`: 36px
+   * - `'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: Calendar, Search, User).
+   */
+  iconLeft?: any;
+
+  /**
+   * Ikon di sebelah kanan dalam input (ukuran 20-24px, misal: Chevron-down, Eye, Close).
+   */
+  iconRight?: any;
+
+  /**
+   * Addon / teks prefix di sebelah kiri luar input (misal: 'Text', '+62 (IDN)').
+   */
+  addonLeft?: string | any;
+
+  /**
+   * Addon / teks suffix di sebelah kanan luar input (misal: 'Text', '.com', 'kg').
+   */
+  addonRight?: string | any;
+
+  /**
+   * Konfigurasi atribut autocomplete HTML.
+   */
+  autoComplete?: string;
+
+  /**
+   * Batas maksimum panjang karakter.
+   */
+  maxLength?: number;
+
+  /**
+   * Batas minimum panjang karakter.
+   */
+  minLength?: number;
+
+  /**
+   * Nilai minimum untuk input bertipe number atau date.
+   */
+  min?: number | string;
+
+  /**
+   * Nilai maksimum untuk input bertipe number atau date.
+   */
+  max?: number | string;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Kustomisasi visual granular root / form-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback event saat nilai input berubah.
+   */
+  onChange?: (event: any) => 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;
+
+  /**
+   * Menampilkan spinner dan menonaktifkan interaksi field sementara menunggu proses async.
+   * @default false
+   */
+  loading?: boolean;
+}
+
+/**
+ * Komponen Input TTDK sesuai spesifikasi Anatomy Desain:
+ * 1. Field title (14px Semibold, #141313)
+ * 2. (Opsional) label (12px Regular, #9698A2)
+ * 3. Border radius 8px
+ * 4. Icon left / right (24px)
+ * 5. Field content (14px Regular, #141313, placeholder #9698A2)
+ * 6. Additional information / Helper text (12px Regular, #3C4245)
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+const Input = forwardRef<any, InputProps>(function Input(
+  props: InputProps,
+  inputRef
+) {
+  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),
+          }}
+        >
+          <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.helperText}
+        </div>
+      ) : null}
+      <div
+        className={`ttdk-input-wrapper ${props.wrapperClass || ""}`.trim()}
+        data-filled={Boolean(props.value || props.defaultValue)}
+        data-error={Boolean(props.error || props.errorMessage)}
+        data-disabled={Boolean(props.disabled)}
+        data-size={props.size || "md"}
+        data-rounded={props.rounded || "md"}
+        style={{
+          ...buildUiVars(props.wrapperStyle),
+        }}
+      >
+        {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 ${props.inputClass || ""}`.trim()}
+            type={props.type || "text"}
+            name={props.name}
+            id={props.id}
+            value={props.value !== undefined ? props.value : props.defaultValue}
+            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}
+            aria-invalid={Boolean(props.error || props.errorMessage)}
+            style={{
+              ...buildUiVars(props.inputStyle),
+            }}
+            onChange={(e) => props.onChange && props.onChange(e)}
+            onInput={(e) => props.onInput && props.onInput(e)}
+            onBlur={(e) => props.onBlur && props.onBlur(e)}
+            onFocus={(e) => props.onFocus && props.onFocus(e)}
+            onKeyDown={(e) => props.onKeyDown && props.onKeyDown(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}
+        </div>
+        {props.addonRight ? (
+          <div className="ttdk-input-addon ttdk-input-addon-right">
+            {props.addonRight}
+          </div>
+        ) : null}
+      </div>
+      {props.helperText && props.helperTextPosition !== "top" ? (
+        <div
+          className={`ttdk-form-helper-text ${
+            props.helperTextClass || ""
+          }`.trim()}
+          style={{
+            ...buildUiVars(props.helperTextStyle),
+          }}
+        >
+          {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),
+          }}
+        >
+          <span>{props.errorMessage}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+export default Input;
+
+export { Input };