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

package/dist/web/input/input.svelte.d.ts

@@ -0,0 +1,283 @@
+import { SvelteComponent } from "svelte";
+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?: any;
+    /**
+     * 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;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: InputProps["className"];
+        disabled?: InputProps["disabled"];
+        error?: InputProps["error"];
+        errorMessage?: InputProps["errorMessage"];
+        size?: InputProps["size"];
+        block?: InputProps["block"];
+        ui?: InputProps["ui"];
+        label?: InputProps["label"];
+        labelClass?: InputProps["labelClass"];
+        id?: InputProps["id"];
+        labelStyle?: InputProps["labelStyle"];
+        required?: InputProps["required"];
+        optional?: InputProps["optional"];
+        optionalText?: InputProps["optionalText"];
+        helperText?: InputProps["helperText"];
+        helperTextPosition?: InputProps["helperTextPosition"];
+        helperTextClass?: InputProps["helperTextClass"];
+        helperTextStyle?: InputProps["helperTextStyle"];
+        wrapperClass?: InputProps["wrapperClass"];
+        value?: InputProps["value"];
+        defaultValue?: InputProps["defaultValue"];
+        rounded?: InputProps["rounded"];
+        wrapperStyle?: InputProps["wrapperStyle"];
+        addonLeft?: InputProps["addonLeft"];
+        iconLeft?: InputProps["iconLeft"];
+        inputRef?: InputProps["inputRef"];
+        inputClass?: InputProps["inputClass"];
+        type?: InputProps["type"];
+        name?: InputProps["name"];
+        placeholder?: InputProps["placeholder"];
+        readOnly?: InputProps["readOnly"];
+        autoComplete?: InputProps["autoComplete"];
+        maxLength?: InputProps["maxLength"];
+        minLength?: InputProps["minLength"];
+        min?: InputProps["min"];
+        max?: InputProps["max"];
+        inputStyle?: InputProps["inputStyle"];
+        onChange?: InputProps["onChange"];
+        onInput?: InputProps["onInput"];
+        onBlur?: InputProps["onBlur"];
+        onFocus?: InputProps["onFocus"];
+        onKeyDown?: InputProps["onKeyDown"];
+        onKeyUp?: InputProps["onKeyUp"];
+        loading?: InputProps["loading"];
+        iconRight?: InputProps["iconRight"];
+        addonRight?: InputProps["addonRight"];
+        errorMessageClass?: InputProps["errorMessageClass"];
+        errorMessageStyle?: InputProps["errorMessageStyle"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type InputProps_ = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponent<InputProps_, InputEvents, InputSlots> {
+}
+export {};