1mpacto-react-ui 1.0.0 → 2.0.0

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

@@ -2,12 +2,39 @@ 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';
+    /**
+     * [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,23 +1,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,57 @@
 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,47 @@
 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

@@ -1,24 +1,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'];