1mpacto-react-ui 0.2.0-beta.9 → 1.0.1

package/dist/src/hooks/useCountdown.d.ts

@@ -1,14 +1,78 @@
-declare const useCountdown: (options: {
+/**
+ * [ID] : Interface untuk opsi hook useCountdown.
+ * [EN] : Interface for useCountdown hook options.
+ */
+export interface IUseCountdown {
+    /**
+     * [ID] : Tanggal target hitung mundur.
+     * [EN] : Countdown target date.
+     */
     date: string;
+    /**
+     * [ID] : Interval waktu dalam milidetik.
+     * [EN] : Time interval in milliseconds.
+     */
     intervalMs: number;
+    /**
+     * [ID] : Status berjalan atau tidak.
+     * [EN] : Running status.
+     */
     running: boolean;
+    /**
+     * [ID] : Penyesuaian waktu dalam jam (opsional).
+     * [EN] : Time adjustment in hours (optional).
+     */
     adjustTimesTime?: number;
+    /**
+     * [ID] : Callback saat hitung mundur selesai (opsional).
+     * [EN] : Callback when countdown is done (optional).
+     */
     callbackDone?: () => void;
-}) => {
+}
+/**
+ * [ID] : Interface untuk nilai kembalian hook useCountdown.
+ * [EN] : Interface for useCountdown hook return value.
+ */
+export interface IUseCountdownReturn {
+    /**
+     * [ID] : Sisa waktu dalam detik.
+     * [EN] : Remaining time in seconds.
+     */
     count: number;
+    /**
+     * [ID] : Status apakah hitung mundur sedang berjalan.
+     * [EN] : Status whether countdown is running.
+     */
+    isRunning: boolean;
+    /**
+     * [ID] : Fungsi untuk memulai hitung mundur.
+     * [EN] : Function to start countdown.
+     */
     startCountdown: () => void;
+    /**
+     * [ID] : Fungsi untuk menghentikan hitung mundur.
+     * [EN] : Function to stop countdown.
+     */
     stopCountdown: () => void;
+    /**
+     * [ID] : Fungsi untuk mereset hitung mundur.
+     * [EN] : Function to reset countdown.
+     * @param value - [ID] : Nilai reset (opsional, bisa Date atau number).
+     * [EN] : Reset value (optional, can be Date or number).
+     */
     resetCountdown: (value?: Date | number) => void;
+    /**
+     * [ID] : Fungsi untuk mengatur callback saat selesai.
+     * [EN] : Function to set callback when done.
+     * @param val - [ID] : Fungsi callback. [EN] : Callback function.
+     */
     setCallbackDone: (val: () => void) => void;
-};
+}
+/**
+ * [ID] : Hook untuk hitung mundur waktu.
+ * [EN] : Hook for countdown timer.
+ * @param options - [ID] : Opsi hitung mundur. [EN] : Countdown options.
+ * @returns [ID] : Objek kontrol hitung mundur. [EN] : Countdown control object.
+ */
+declare const useCountdown: (options: IUseCountdown) => IUseCountdownReturn;
 export default useCountdown;

package/dist/src/hooks/useDeepCompareEffect.d.ts

@@ -1,3 +1,17 @@
 import { default as React } from 'react';
+
+/**
+ * [ID] : Hook untuk memoize nilai dengan perbandingan mendalam.
+ * [EN] : Hook to memoize value with deep comparison.
+ * @template T - [ID] : Tipe nilai. [EN] : Value type.
+ * @param value - [ID] : Nilai yang akan di-memoize. [EN] : Value to be memoized.
+ * @returns [ID] : Nilai yang sudah di-memoize. [EN] : Memoized value.
+ */
 export declare function useDeepCompareMemoize<T>(value: T): T;
+/**
+ * [ID] : Hook useEffect dengan perbandingan dependensi mendalam.
+ * [EN] : useEffect hook with deep dependency comparison.
+ * @param callback - [ID] : Fungsi efek yang akan dijalankan. [EN] : Effect function to be executed.
+ * @param dependencies - [ID] : Daftar dependensi. [EN] : Dependency list.
+ */
 export declare function useDeepCompareEffect(callback: React.EffectCallback, dependencies: React.DependencyList): void;

package/dist/src/hooks/useElementOrWindowMediaQuery.d.ts

@@ -1,2 +1,11 @@
+/**
+ * [ID] : Hook untuk memeriksa media query pada elemen atau jendela.
+ * [EN] : Hook to check media query on element or window.
+ * @param query - [ID] : String media query (gunakan 'WIDTH' sebagai placeholder lebar).
+ * [EN] : Media query string (use 'WIDTH' as width placeholder).
+ * @param elementId - [ID] : ID elemen target (opsional, jika null menggunakan window).
+ * [EN] : Target element ID (optional, if null uses window).
+ * @returns [ID] : Boolean apakah query cocok. [EN] : Boolean whether query matches.
+ */
 declare function useElementOrWindowMediaQuery(query: string, elementId?: string | null): boolean;
 export default useElementOrWindowMediaQuery;

package/dist/src/hooks/useEventListener.d.ts

@@ -1,9 +1,37 @@
 import { default as React } from 'react';
+
+/**
+ * [ID] : Interface untuk opsi hook useEventListener.
+ * [EN] : Interface for useEventListener hook options.
+ */
 interface UseEventListenerOptions {
+    /**
+     * [ID] : Referensi elemen target.
+     * [EN] : Target element reference.
+     */
     ref: React.RefObject<HTMLElement>;
+    /**
+     * [ID] : Fungsi handler utama.
+     * [EN] : Main handler function.
+     * @param ref - [ID] : Referensi elemen. [EN] : Element reference.
+     * @param event - [ID] : Objek event. [EN] : Event object.
+     */
     handlerMain: (ref: React.RefObject<HTMLElement>, event: Event) => void;
+    /**
+     * [ID] : Jenis event listener (default: 'mousedown').
+     * [EN] : Event listener type (default: 'mousedown').
+     */
     eventListener?: keyof DocumentEventMap | (string & {});
+    /**
+     * [ID] : Dependensi tambahan untuk useEffect (opsional).
+     * [EN] : Additional dependencies for useEffect (optional).
+     */
     useEffectDependency?: unknown[];
 }
+/**
+ * [ID] : Hook untuk menambahkan event listener ke dokumen.
+ * [EN] : Hook to add event listener to document.
+ * @param options - [ID] : Opsi event listener. [EN] : Event listener options.
+ */
 export declare function useEventListener({ ref, handlerMain, eventListener, useEffectDependency, }: UseEventListenerOptions): void;
 export {};

package/dist/src/hooks/useMasonry.d.ts

@@ -1,24 +1,104 @@
 import { default as React } from 'react';
+
+/**
+ * [ID] : Tipe arah layout masonry.
+ * [EN] : Masonry layout direction type.
+ */
 export type TMasonryDirection = 'masonry-ltr' | 'masonry-rtl' | 'top-down-ltr' | 'top-down-rtl';
+/**
+ * [ID] : Tipe hook useMasonry.
+ * [EN] : useMasonry hook type.
+ * @template T - [ID] : Tipe elemen HTML kontainer. [EN] : Container HTML element type.
+ * @param params - [ID] : Parameter hook. [EN] : Hook parameters.
+ * @returns [ID] : Objek berisi fungsi hitung ulang layout. [EN] : Object containing recalculate layout function.
+ */
 export type TUseMasonry = <T extends HTMLElement>(params: {
+    /**
+     * [ID] : Referensi kontainer.
+     * [EN] : Container reference.
+     */
     containerRef: React.RefObject<T>;
+    /**
+     * [ID] : Elemen anak.
+     * [EN] : Children elements.
+     */
     children: React.ReactNode;
+    /**
+     * [ID] : Jumlah kolom.
+     * [EN] : Column count.
+     */
     columnCount: number;
+    /**
+     * [ID] : Jarak horizontal antar item.
+     * [EN] : Horizontal gap between items.
+     */
     gapX: number;
+    /**
+     * [ID] : Jarak vertikal antar item.
+     * [EN] : Vertical gap between items.
+     */
     gapY: number;
+    /**
+     * [ID] : Arah layout (opsional).
+     * [EN] : Layout direction (optional).
+     */
     direction?: TMasonryDirection;
+    /**
+     * [ID] : Waktu debounce hitung ulang (ms) (opsional).
+     * [EN] : Recalculate debounce time (ms) (optional).
+     */
     debounceRecalculate?: number;
+    /**
+     * [ID] : Durasi animasi (ms) (opsional).
+     * [EN] : Animation duration (ms) (optional).
+     */
     durationAnimation?: number;
+    /**
+     * [ID] : Aktifkan animasi (opsional).
+     * [EN] : Enable animation (optional).
+     */
     enableAnimation?: boolean;
 }) => {
+    /**
+     * [ID] : Fungsi untuk menghitung ulang layout.
+     * [EN] : Function to recalculate layout.
+     */
     recalculateLayout: () => void;
 };
+/**
+ * [ID] : Interface untuk properti layout masonry.
+ * [EN] : Interface for masonry layout properties.
+ */
 export interface IMasonryLayout {
+    /**
+     * [ID] : Elemen anak.
+     * [EN] : Children elements.
+     */
     children: React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Jumlah kolom (opsional).
+     * [EN] : Column count (optional).
+     */
     columnCount?: number;
+    /**
+     * [ID] : Jarak horizontal (opsional).
+     * [EN] : Horizontal gap (optional).
+     */
     gapX?: number;
+    /**
+     * [ID] : Jarak vertikal (opsional).
+     * [EN] : Vertical gap (optional).
+     */
     gapY?: number;
+    /**
+     * [ID] : Arah layout (opsional).
+     * [EN] : Layout direction (optional).
+     */
     direction?: TMasonryDirection;
 }
+/**
+ * [ID] : Hook untuk mengatur layout masonry.
+ * [EN] : Hook to manage masonry layout.
+ */
 declare const useMasonry: TUseMasonry;
 export default useMasonry;

package/dist/src/hooks/useMergeRefs.d.ts

@@ -1,5 +1,32 @@
 import { default as React } from 'react';
+
+/**
+ * [ID] : Tipe referensi React (callback atau objek).
+ * [EN] : React reference type (callback or object).
+ * @template T - [ID] : Tipe elemen. [EN] : Element type.
+ */
 export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
+/**
+ * [ID] : Menetapkan nilai ke referensi.
+ * [EN] : Assigns a value to a reference.
+ * @template T - [ID] : Tipe nilai. [EN] : Value type.
+ * @param ref - [ID] : Referensi target. [EN] : Target reference.
+ * @param value - [ID] : Nilai yang akan ditetapkan. [EN] : Value to assign.
+ */
 export declare function assignRef<T = unknown>(ref: ReactRef<T> | null | undefined, value: T): void;
+/**
+ * [ID] : Menggabungkan beberapa referensi menjadi satu fungsi callback.
+ * [EN] : Merges multiple references into a single callback function.
+ * @template T - [ID] : Tipe elemen. [EN] : Element type.
+ * @param refs - [ID] : Daftar referensi. [EN] : List of references.
+ * @returns [ID] : Fungsi callback referensi. [EN] : Reference callback function.
+ */
 export declare function mergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]): (node: T | null) => void;
+/**
+ * [ID] : Hook untuk menggabungkan beberapa referensi.
+ * [EN] : Hook to merge multiple references.
+ * @template T - [ID] : Tipe elemen. [EN] : Element type.
+ * @param refs - [ID] : Daftar referensi. [EN] : List of references.
+ * @returns [ID] : Referensi gabungan yang di-memoize. [EN] : Memoized merged reference.
+ */
 export declare function useMergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]): (node: T | null) => void;

package/dist/src/hooks/useOtpInput.d.ts

@@ -0,0 +1,200 @@
+import { default as React } from 'react';
+
+/**
+ * [ID] : Interface untuk opsi hook useOtpInput.
+ * [EN] : Interface for useOtpInput hook options.
+ */
+export interface IUseOtpInput {
+    /**
+     * [ID] : ID komponen (opsional).
+     * [EN] : Component ID (optional).
+     */
+    id?: string;
+    /**
+     * [ID] : Jumlah input OTP.
+     * [EN] : Number of OTP inputs.
+     */
+    numInputs: number;
+    /**
+     * [ID] : Callback saat OTP lengkap (opsional).
+     * [EN] : Callback when OTP is complete (optional).
+     * @param otp - [ID] : String OTP lengkap. [EN] : Complete OTP string.
+     */
+    onComplete?: (otp: string) => void;
+    /**
+     * [ID] : Nonaktifkan fokus saat edit (opsional).
+     * [EN] : Disable focus on edit (optional).
+     */
+    disableFocusOnEdit?: boolean;
+    /**
+     * [ID] : Blur saat lengkap (opsional).
+     * [EN] : Blur on complete (optional).
+     */
+    blurOnComplete?: boolean;
+    /**
+     * [ID] : Nonaktifkan input saat lengkap (opsional).
+     * [EN] : Disable input on complete (optional).
+     */
+    disableOnComplete?: boolean;
+}
+/**
+ * [ID] : Interface untuk properti input.
+ * [EN] : Interface for input properties.
+ */
+export interface IInputProps {
+    /**
+     * [ID] : ID input.
+     * [EN] : Input ID.
+     */
+    id: string;
+    /**
+     * [ID] : Fungsi referensi input.
+     * [EN] : Input reference function.
+     * @param el - [ID] : Elemen input. [EN] : Input element.
+     */
+    ref: (el: HTMLInputElement | null) => void;
+    /**
+     * [ID] : Nilai input.
+     * [EN] : Input value.
+     */
+    value: string;
+    /**
+     * [ID] : Handler perubahan input.
+     * [EN] : Input change handler.
+     * @param e - [ID] : Event perubahan. [EN] : Change event.
+     */
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * [ID] : Handler tombol ditekan.
+     * [EN] : Key down handler.
+     * @param e - [ID] : Event keyboard. [EN] : Keyboard event.
+     */
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * [ID] : Handler paste.
+     * [EN] : Paste handler.
+     * @param e - [ID] : Event clipboard. [EN] : Clipboard event.
+     */
+    onPaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+    /**
+     * [ID] : Handler fokus.
+     * [EN] : Focus handler.
+     * @param e - [ID] : Event fokus. [EN] : Focus event.
+     */
+    onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * [ID] : Status non-aktif.
+     * [EN] : Disabled status.
+     */
+    disabled: boolean;
+    /**
+     * [ID] : Tipe input.
+     * [EN] : Input type.
+     */
+    type: 'text';
+    /**
+     * [ID] : Mode input.
+     * [EN] : Input mode.
+     */
+    inputMode: 'numeric';
+    /**
+     * [ID] : Auto complete.
+     * [EN] : Auto complete.
+     */
+    autoComplete: 'one-time-code';
+    /**
+     * [ID] : Label ARIA.
+     * [EN] : ARIA label.
+     */
+    'aria-label': string;
+}
+/**
+ * [ID] : Interface untuk data input.
+ * [EN] : Interface for input data.
+ */
+export interface IInputData {
+    /**
+     * [ID] : ID input.
+     * [EN] : Input ID.
+     */
+    id: string;
+    /**
+     * [ID] : Fungsi referensi input.
+     * [EN] : Input reference function.
+     * @param el - [ID] : Elemen input. [EN] : Input element.
+     */
+    ref: (el: HTMLInputElement | null) => void;
+    /**
+     * [ID] : Nilai input.
+     * [EN] : Input value.
+     */
+    value: string;
+    /**
+     * [ID] : Status non-aktif.
+     * [EN] : Disabled status.
+     */
+    disabled: boolean;
+    /**
+     * [ID] : Tipe input.
+     * [EN] : Input type.
+     */
+    type: 'text';
+    /**
+     * [ID] : Mode input.
+     * [EN] : Input mode.
+     */
+    inputMode: 'numeric';
+    /**
+     * [ID] : Status apakah OTP terisi.
+     * [EN] : Status whether OTP is filled.
+     */
+    isOtpFilled: boolean;
+}
+/**
+ * [ID] : Interface untuk nilai kembalian hook useOtpInput.
+ * [EN] : Interface for useOtpInput hook return value.
+ */
+export interface IUseOtpInputReturn {
+    /**
+     * [ID] : Fungsi mendapatkan properti input berdasarkan indeks.
+     * [EN] : Function to get input properties by index.
+     * @param index - [ID] : Indeks input. [EN] : Input index.
+     * @returns [ID] : Properti input. [EN] : Input properties.
+     */
+    getInputProps: (index: number) => IInputProps;
+    /**
+     * [ID] : Fungsi mendapatkan data input berdasarkan indeks.
+     * [EN] : Function to get input data by index.
+     * @param index - [ID] : Indeks input. [EN] : Input index.
+     * @returns [ID] : Data input. [EN] : Input data.
+     */
+    getInputData: (index: number) => IInputData;
+    /**
+     * [ID] : Fungsi membersihkan OTP.
+     * [EN] : Function to clear OTP.
+     */
+    clearOtp: () => void;
+    /**
+     * [ID] : Array nilai OTP.
+     * [EN] : OTP values array.
+     */
+    otpValues: string[];
+    /**
+     * [ID] : String OTP gabungan.
+     * [EN] : Joined OTP string.
+     */
+    otpString: string;
+    /**
+     * [ID] : Status apakah OTP lengkap.
+     * [EN] : Status whether OTP is complete.
+     */
+    isOtpComplete: boolean;
+}
+/**
+ * [ID] : Hook untuk mengelola input OTP.
+ * [EN] : Hook to manage OTP input.
+ * @param options - [ID] : Opsi hook. [EN] : Hook options.
+ * @returns [ID] : Objek kontrol OTP. [EN] : OTP control object.
+ */
+export declare const useOtpInput: ({ id, numInputs, onComplete, disableFocusOnEdit, blurOnComplete, disableOnComplete, }: IUseOtpInput) => IUseOtpInputReturn;
+export default useOtpInput;

package/dist/src/hooks/useStateRef.d.ts

@@ -1,3 +1,12 @@
 import { default as React } from 'react';
+
+/**
+ * [ID] : Hook untuk menggunakan state dengan referensi mutable.
+ * [EN] : Hook to use state with mutable reference.
+ * @template T - [ID] : Tipe nilai state. [EN] : State value type.
+ * @param initialValue - [ID] : Nilai awal. [EN] : Initial value.
+ * @returns [ID] : Tuple berisi nilai, fungsi setter, dan referensi.
+ * [EN] : Tuple containing value, setter function, and reference.
+ */
 declare function useStateRef<T>(initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>, React.MutableRefObject<T>];
 export default useStateRef;

package/dist/src/interfaces/components/Alert/index.d.ts

@@ -1,4 +1,13 @@
 import { ToastOptions } from 'react-toastify';
+
+/**
+ * [ID] : Interface untuk opsi komponen Alert.
+ * [EN] : Interface for Alert component options.
+ */
 export interface IOptionAlert extends ToastOptions {
+    /**
+     * [ID] : Jenis alert (opsional).
+     * [EN] : Alert kind (optional).
+     */
     kind?: 'laba' | 'payhere';
 }

package/dist/src/interfaces/components/Badges/index.d.ts

@@ -1,11 +1,41 @@
 import { ReactNode } from 'react';
 import { IBorderRadius } from '../../../config/components/borderRadius';
 import { Itypography } from '../../../config/components/typography';
+import { TFont } from '../../../config/components/font';
+
+/**
+ * [ID] : Interface untuk komponen Badges.
+ * [EN] : Interface for Badges component.
+ */
 export interface IBadges extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * [ID] : Konten anak di dalam badge.
+     * [EN] : Child content inside the badge.
+     */
     children: ReactNode | ReactNode[];
+    /**
+     * [ID] : Nama kelas CSS tambahan (opsional).
+     * [EN] : Additional CSS class name (optional).
+     */
     className?: string | undefined;
+    /**
+     * [ID] : Konfigurasi radius sudut badge (opsional).
+     * [EN] : Badge border radius configuration (optional).
+     */
     rounded?: IBorderRadius;
+    /**
+     * [ID] : Varian gaya badge (opsional).
+     * [EN] : Badge style variant (optional).
+     */
     variants?: 'filled-gray-600' | 'filled-green-600' | 'filled-green-50' | 'filled-blue-gray-50' | 'filled-red-500' | 'filled-blue-600' | 'filled-amber-800' | 'filled-pink-600' | 'filled-lime-700' | 'filled-lime-900-bg_lime-100' | 'filled-red-900' | 'filled-laba-green-10' | 'filled-cyan-800-bg_cyan-100' | 'ghost-gray-200' | 'ghost-green-100' | 'ghost-red-100' | 'ghost-blue-100' | 'ghost-amber-100' | 'ghost-laba-orange-01' | 'ghost-laba-green-01' | 'ghost-laba-green-02' | 'ghost-laba-blue-02' | 'ghost-laba-blue-01' | 'ghost-laba-grey-05' | 'ghost-laba-red-01' | 'outline-gray-600' | 'outline-green-600' | 'outline-red-500' | 'outline-blue-600' | 'outline-amber-800' | 'outline-laba-blue-01' | 'outline-laba-orange-06' | 'outline-laba-orange-06-bg_laba-orange-01' | 'outline-laba-red-06' | 'outline-laba-green-06';
-    fonts?: 'lato' | 'inter';
+    /**
+     * [ID] : Konfigurasi font (opsional).
+     * [EN] : Font configuration (optional).
+     */
+    fonts?: TFont;
+    /**
+     * [ID] : Konfigurasi tipografi (opsional).
+     * [EN] : Typography configuration (optional).
+     */
     typography?: Itypography;
 }

package/dist/src/interfaces/components/Breadcrumbs/index.d.ts

@@ -1,18 +1,102 @@
 import { ReactNode, ElementType, HTMLAttributes } from 'react';
 import { IGap } from '../../../config/components/gap';
+import { TFont } from '../../../config/components/font';
+
+/**
+ * [ID] : Interface untuk komponen Breadcrumbs.
+ * [EN] : Interface for Breadcrumbs component.
+ * @template T - [ID] : Tipe elemen HTML. [EN] : HTML element type.
+ */
 export interface IBreadcrumbs<T extends ElementType> extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * [ID] : Elemen HTML yang akan dirender (opsional).
+     * [EN] : HTML element to be rendered (optional).
+     */
     as?: T;
-    fonts?: 'lato' | 'inter';
-    variants?: 'laba-blue-10' | 'blue-700';
+    /**
+     * [ID] : Konfigurasi font (opsional).
+     * [EN] : Font configuration (optional).
+     */
+    fonts?: TFont;
+    /**
+     * [ID] : Varian gaya breadcrumbs (opsional).
+     * [EN] : Breadcrumbs style variant (optional).
+     */
+    variants?: 'laba-blue-10' | 'blue-700' | 'bill-secondary-800';
+    /**
+     * [ID] : Daftar URL untuk setiap breadcrumb.
+     * [EN] : List of URLs for each breadcrumb.
+     */
     urls: string[];
+    /**
+     * [ID] : Teks label untuk setiap breadcrumb.
+     * [EN] : Label text for each breadcrumb.
+     */
     textBreadcrumbs: string[];
+    /**
+     * [ID] : Handler klik untuk setiap breadcrumb (opsional).
+     * [EN] : Click handler for each breadcrumb (optional).
+     */
     onClickBreadcrumbs?: (() => void | undefined)[];
+    /**
+     * [ID] : Handler klik untuk aksi tambahan (opsional).
+     * [EN] : Click handler for additional action (optional).
+     */
     onClickAction?: () => void;
+    /**
+     * [ID] : Handler klik global untuk URL (opsional).
+     * [EN] : Global click handler for URLs (optional).
+     * @param url - [ID] : URL yang diklik. [EN] : Clicked URL.
+     */
     onClickUrls?: (url: string) => void;
+    /**
+     * [ID] : Jarak untuk elemen aksi (opsional).
+     * [EN] : Gap for action element (optional).
+     */
     gapAction?: IGap;
+    /**
+     * [ID] : Jarak antar URL (opsional).
+     * [EN] : Gap between URLs (optional).
+     */
     gapUrls?: IGap;
+    /**
+     * [ID] : Teks untuk tombol aksi (opsional).
+     * [EN] : Text for action button (optional).
+     */
     textAction?: string;
+    /**
+     * [ID] : Ikon untuk tombol aksi (opsional).
+     * [EN] : Icon for action button (optional).
+     */
     iconAction?: ReactNode | ReactNode[];
+    /**
+     * [ID] : Pemisah antar breadcrumb (opsional).
+     * [EN] : Separator between breadcrumbs (optional).
+     */
     separator?: ReactNode | ReactNode[] | string;
+    /**
+     * [ID] : Fungsi untuk menghasilkan properti link kustom (opsional).
+     * [EN] : Function to generate custom link properties (optional).
+     * @param value - [ID] : Nilai teks breadcrumb. [EN] : Breadcrumb text value.
+     * @param index - [ID] : Indeks breadcrumb. [EN] : Breadcrumb index.
+     * @param urls - [ID] : Array semua URL. [EN] : Array of all URLs.
+     * @returns [ID] : Objek properti. [EN] : Property object.
+     */
     propsLink?: (value: string, index: number, urls: string[]) => object;
+    /**
+     * [ID] : Nama kelas CSS untuk elemen aksi (opsional).
+     * [EN] : CSS class name for action element (optional).
+     */
+    classNameAction?: string;
+    /**
+     * [ID] : Nama kelas CSS untuk URL (opsional).
+     * [EN] : CSS class name for URL (optional).
+     */
+    classNameUrl?: string;
+    /**
+     * [ID] : Fungsi render kustom untuk aksi (opsional).
+     * [EN] : Custom render function for action (optional).
+     * @returns [ID] : Elemen React. [EN] : React element.
+     */
+    renderAction?: () => ReactNode | ReactNode[];
 }