1mpacto-react-ui 1.0.0 → 1.0.2

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

@@ -1,6 +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

@@ -1,43 +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,4 +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,5 +1,13 @@
 import { ToastOptions } from 'react-toastify';
 
+/**
+ * [ID] : Interface untuk opsi komponen Alert.
+ * [EN] : Interface for Alert component options.
+ */
 export interface IOptionAlert extends ToastOptions {
-    kind?: 'laba' | 'payhere';
+    /**
+     * [ID] : Variant alert (opsional).
+     * [EN] : Alert variant (optional).
+     */
+    variant?: 'solid' | 'outline';
 }

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

@@ -3,11 +3,39 @@ 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';
+    /**
+     * [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

@@ -2,22 +2,101 @@ 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;
+    /**
+     * [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[];
 }

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

@@ -1,14 +1,58 @@
 import { ReactNode } from 'react';
 
+/**
+ * [ID] : Tipe varian tombol yang tersedia.
+ * [EN] : Available button variant types.
+ */
 export type TButtonVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'ghost-blue-gray-100-bg_white-text_blue-gray-400' | 'ghost-laba-blue-05' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-08' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'ghost-laba-blue-01' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'secondary-red-700' | 'tertiary-black' | 'primary-bill-primary-600' | 'secondary-bill-secondary-800' | 'tertiary-bill-secondary-800' | 'primary-bill-red-700';
+/**
+ * [ID] : Tipe ukuran tombol.
+ * [EN] : Button size type.
+ */
 export type TButtonSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs' | 'bill-l' | 'bill-m' | 'bill-s' | 'bill-xs';
+/**
+ * [ID] : Interface untuk komponen Button.
+ * [EN] : Interface for Button component.
+ */
 export interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * [ID] : Ukuran tombol (opsional).
+     * [EN] : Button size (optional).
+     */
     size?: TButtonSize;
+    /**
+     * [ID] : Varian gaya tombol (opsional).
+     * [EN] : Button style variant (optional).
+     */
     variants?: TButtonVariants;
+    /**
+     * [ID] : Ikon di awal tombol (opsional).
+     * [EN] : Icon at the start of the button (optional).
+     */
     startIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
+    /**
+     * [ID] : Ikon di akhir tombol (opsional).
+     * [EN] : Icon at the end of the button (optional).
+     */
     endIcon?: ReactNode | ReactNode[] | (() => ReactNode) | (() => ReactNode[]);
+    /**
+     * [ID] : Konten anak di dalam tombol.
+     * [EN] : Child content inside the button.
+     */
     children: ReactNode | ReactNode[];
+    /**
+     * [ID] : Nama kelas CSS tambahan (opsional).
+     * [EN] : Additional CSS class name (optional).
+     */
     className?: string | undefined;
+    /**
+     * [ID] : Menentukan apakah tombol dalam keadaan memuat (opsional).
+     * [EN] : Determines if the button is in loading state (optional).
+     */
     loading?: boolean;
+    /**
+     * [ID] : Nama kelas CSS untuk ikon loading (opsional).
+     * [EN] : CSS class name for loading icon (optional).
+     */
     classNameIconLoading?: string | undefined;
 }

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

@@ -1,12 +1,48 @@
 import { ReactNode } from 'react';
 
+/**
+ * [ID] : Tipe varian tombol ikon.
+ * [EN] : Button icon variant types.
+ */
 export type TButtonIcomVariants = 'primary-laba-blue-10' | 'primary-red-700-dsb_laba-grey-06' | 'primary-green-700' | 'filled-laba-white_laba-blue-10' | 'filled-laba-white_laba-red-05' | 'ghost-laba-blue-10' | 'ghost-red-700' | 'ghost-green-700' | 'ghost-blue-gray-100-bg_white' | 'ghost-laba-green-10' | 'nude-laba-blue-10' | 'nude-red-700' | 'nude-green-700' | 'nude-gray-500' | 'nude-laba-red-10' | 'nude-laba-red-05' | 'primary-blue-700' | 'primary-red-700' | 'secondary-blue-700' | 'secondary-red-600' | 'secondary-green-600' | 'tertiary-blue-700' | 'tertiary-red-300' | 'tertiary-red-600' | 'tertiary-gray-500' | 'secondary-red-700';
+/**
+ * [ID] : Tipe ukuran tombol ikon.
+ * [EN] : Button icon size type.
+ */
 export type TButtonIconSize = 'large' | 'reguler' | 'small' | 'extra-small' | 'l' | 'm' | 's' | 'xs';
+/**
+ * [ID] : Interface untuk komponen ButtonIcon.
+ * [EN] : Interface for ButtonIcon component.
+ */
 export interface IButtonIcon extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * [ID] : Ukuran tombol (opsional).
+     * [EN] : Button size (optional).
+     */
     size?: TButtonIconSize;
+    /**
+     * [ID] : Varian gaya tombol (opsional).
+     * [EN] : Button style variant (optional).
+     */
     variants?: TButtonIcomVariants;
+    /**
+     * [ID] : Konten anak (biasanya ikon).
+     * [EN] : Child content (usually icon).
+     */
     children: ReactNode | ReactNode[];
+    /**
+     * [ID] : Nama kelas CSS tambahan (opsional).
+     * [EN] : Additional CSS class name (optional).
+     */
     className?: string | undefined;
+    /**
+     * [ID] : Menentukan apakah tombol dalam keadaan memuat (opsional).
+     * [EN] : Determines if the button is in loading state (optional).
+     */
     loading?: boolean;
+    /**
+     * [ID] : Nama kelas CSS untuk ikon loading (opsional).
+     * [EN] : CSS class name for loading icon (optional).
+     */
     classNameIconLoading?: string | undefined;
 }

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

@@ -2,23 +2,101 @@ import { OffsetOptions, UseFloatingOptions } from '@floating-ui/react';
 import { IPopover } from '../Popover';
 import { IButton } from '../Button';
 
+/**
+ * [ID] : Interface untuk komponen ButtonPopover.
+ * [EN] : Interface for ButtonPopover component.
+ */
 export interface IButtonPopover extends IButton {
+    /**
+     * [ID] : Teks tombol (opsional).
+     * [EN] : Button text (optional).
+     */
     text?: string;
+    /**
+     * [ID] : Ikon yang ditampilkan di awal (opsional).
+     * [EN] : Icon shown at the start (optional).
+     */
     startIconShow?: React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Ikon yang ditampilkan di akhir (opsional).
+     * [EN] : Icon shown at the end (optional).
+     */
     endIconShow?: React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : ID untuk popover (opsional).
+     * [EN] : ID for popover (optional).
+     */
     idPopover?: string;
+    /**
+     * [ID] : Nama kelas CSS untuk tombol (opsional).
+     * [EN] : CSS class name for button (optional).
+     */
     classNameButton?: string;
+    /**
+     * [ID] : Z-index untuk popover (opsional).
+     * [EN] : Z-index for popover (optional).
+     */
     zIndexPopover?: number;
+    /**
+     * [ID] : Opsi offset untuk posisi popover (opsional).
+     * [EN] : Offset options for popover position (optional).
+     */
     offset?: OffsetOptions;
+    /**
+     * [ID] : Properti tambahan untuk popover (opsional).
+     * [EN] : Additional properties for popover (optional).
+     */
     popoverProps?: Omit<IPopover, 'children'>;
+    /**
+     * [ID] : Penempatan popover (opsional).
+     * [EN] : Popover placement (optional).
+     */
     placement?: UseFloatingOptions['placement'];
+    /**
+     * [ID] : Handler saat popover ditutup (opsional).
+     * [EN] : Handler when popover is closed (optional).
+     */
     onClose?: () => void;
+    /**
+     * [ID] : Nama kelas CSS saat tombol aktif/ditampilkan (opsional).
+     * [EN] : CSS class name when button is active/shown (optional).
+     */
     classNameButtonShow?: string;
 }
+/**
+ * [ID] : Interface untuk referensi ButtonPopover.
+ * [EN] : Interface for ButtonPopover reference.
+ */
 export interface IRefButtonPopover {
+    /**
+     * [ID] : Status visibilitas popover.
+     * [EN] : Popover visibility status.
+     */
     show: boolean;
+    /**
+     * [ID] : Fungsi untuk mengatur visibilitas popover.
+     * [EN] : Function to set popover visibility.
+     * @param e - [ID] : Status visibilitas baru. [EN] : New visibility status.
+     */
     setShow: (e: boolean) => void;
+    /**
+     * [ID] : Handler untuk menampilkan popover.
+     * [EN] : Handler to show popover.
+     * @param e - [ID] : Event mouse. [EN] : Mouse event.
+     */
     handlerShow: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * [ID] : Handler untuk menutup popover.
+     * [EN] : Handler to close popover.
+     */
     handlerClose: () => void;
 }
+/**
+ * [ID] : Tipe fungsi untuk mendapatkan ikon tombol popover.
+ * [EN] : Function type to get popover button icon.
+ * @param isShow - [ID] : Status apakah popover ditampilkan. [EN] : Status if popover is shown.
+ * @param iconShow - [ID] : Ikon saat ditampilkan. [EN] : Icon when shown.
+ * @param iconClose - [ID] : Ikon saat ditutup. [EN] : Icon when closed.
+ * @returns [ID] : Ikon yang sesuai. [EN] : Corresponding icon.
+ */
 export type TGetIconButtonPopover = (isShow: boolean, iconShow?: React.ReactNode | React.ReactNode[], iconClose?: IButton['startIcon'] | IButton['endIcon']) => IButton['startIcon'] | IButton['endIcon'];