1mpacto-react-ui 1.0.0 → 1.0.2

package/dist/package.json.d.ts

@@ -1,134 +1,134 @@
-declare const _default: {
-  "name": "1mpacto-react-ui",
-  "private": false,
-  "version": "1.0.0",
-  "type": "module",
-  "engines": {
-    "node": ">=20.19.4",
-    "npm": ">=10.8.2"
-  },
-  "scripts": {
-    "copy:toastify-css": "cp ./node_modules/react-toastify/dist/ReactToastify.css ./dist/assets/toast.css",
-    "copy:mixin-scss": "cp ./src/styles/_mixins.scss ./dist/assets/_mixins.scss",
-    "dev": "vite",
-    "transform:style": "node -r ./src/utils/register-ts-node.js ./src/utils/generate-file-style.js",
-    "postProcess:fontfamily": "node ./src/utils/post-process-css.js",
-    "process:transformStyle": "npm run postProcess:fontfamily && npm run transform:style",
-    "process:copyStyle": "npm run copy:mixin-scss && npm run copy:toastify-css",
-    "build": "tsc -b && vite build && npm run build:css && npm run build:fontfamily && npm run process:copyStyle && npm run process:transformStyle",
-    "build:css": "tailwindcss -i ./src/styles/index.scss -o ./dist/assets/core.css --minify",
-    "build:fontfamily": "sass ./src/styles/fontfamily.scss ./dist/assets/fontfamily.css --no-source-map --style=compressed",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "prepare": "husky && npm run build",
-    "watch:build": "npx watch \"npm run build\" ./src",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "postbuild": "copyfiles -f src/types/* dist/types-external/",
-    "install": "copyfiles -f dist/types-external/* ../../src/types/"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.14.10",
-    "@types/node-forge": "^1.3.14",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-storybook": "^0.11.1",
-    "glob": "^11.0.3",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "postcss": "^8.4.39",
-    "prettier": "^3.3.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "sass": "^1.77.6",
-    "storybook": "^8.4.7",
-    "tailwindcss": "^3.4.4",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "yup": ">=1.4.0"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    },
-    "./dist/assets/toast.css": "./dist/assets/toast.css",
-    "./dist/assets/core.css": "./dist/assets/core.css",
-    "./dist/assets/style.css": "./dist/assets/style.css",
-    "./dist/assets/colors.css": "./dist/assets/colors.css",
-    "./dist/assets/_colors.scss": "./dist/assets/_colors.scss",
-    "./dist/assets/typography.css": "./dist/assets/typography.css",
-    "./dist/assets/_typography.scss": "./dist/assets/_typography.scss",
-    "./dist/assets/screen.css": "./dist/assets/screen.css",
-    "./dist/assets/_screen.scss": "./dist/assets/_screen.scss",
-    "./dist/assets/_mixins.scss": "./dist/assets/_mixins.scss"
-  },
-  "files": [
-    "/dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --quiet --fix"
-    ],
-    "*.{json,js,ts,jsx,tsx,html}": [
-      "prettier --write --ignore-unknown"
-    ]
-  },
-  "dependencies": {
-    "@floating-ui/react": "^0.26.19",
-    "@internationalized/date": "^3.5.4",
-    "@tanstack/react-table": "^8.19.2",
-    "@tinymce/tinymce-react": "^6.2.1",
-    "bignumber.js": "^9.1.2",
-    "chart.js": "^4.4.3",
-    "copyfiles": "^2.4.1",
-    "date-fns": "^3.6.0",
-    "js-cookie": "^3.0.5",
-    "lossless-json": "^4.0.2",
-    "node-forge": "^1.3.1",
-    "react-aria": "^3.33.1",
-    "react-chartjs-2": "^5.2.0",
-    "react-number-format": "^5.4.0",
-    "react-select": "^5.8.0",
-    "react-stately": "^3.31.1",
-    "react-toastify": "^10.0.5",
-    "react-virtuoso": "^4.7.11",
-    "tinymce": "^7.9.1"
-  }
-}
+declare const _default: {
+  "name": "1mpacto-react-ui",
+  "private": false,
+  "version": "1.0.2",
+  "type": "module",
+  "engines": {
+    "node": ">=20.19.4",
+    "npm": ">=10.8.2"
+  },
+  "scripts": {
+    "copy:toastify-css": "cp ./node_modules/react-toastify/dist/ReactToastify.css ./dist/assets/toast.css",
+    "copy:mixin-scss": "cp ./src/styles/_mixins.scss ./dist/assets/_mixins.scss",
+    "dev": "vite",
+    "transform:style": "node -r ./src/utils/register-ts-node.js ./src/utils/generate-file-style.js",
+    "postProcess:fontfamily": "node ./src/utils/post-process-css.js",
+    "process:transformStyle": "npm run postProcess:fontfamily && npm run transform:style",
+    "process:copyStyle": "npm run copy:mixin-scss && npm run copy:toastify-css",
+    "build": "tsc -b && vite build && npm run build:css && npm run build:fontfamily && npm run process:copyStyle && npm run process:transformStyle",
+    "build:css": "tailwindcss -i ./src/styles/index.scss -o ./dist/assets/core.css --minify",
+    "build:fontfamily": "sass ./src/styles/fontfamily.scss ./dist/assets/fontfamily.css --no-source-map --style=compressed",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "prepare": "husky && npm run build",
+    "watch:build": "npx watch \"npm run build\" ./src",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "postbuild": "copyfiles -f src/types/* dist/types-external/",
+    "install": "copyfiles -f dist/types-external/* ../../src/types/"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^20.14.10",
+    "@types/node-forge": "^1.3.14",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.11.1",
+    "glob": "^11.0.3",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.6",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^3.4.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "yup": ">=1.4.0"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/assets/toast.css": "./dist/assets/toast.css",
+    "./dist/assets/core.css": "./dist/assets/core.css",
+    "./dist/assets/style.css": "./dist/assets/style.css",
+    "./dist/assets/colors.css": "./dist/assets/colors.css",
+    "./dist/assets/_colors.scss": "./dist/assets/_colors.scss",
+    "./dist/assets/typography.css": "./dist/assets/typography.css",
+    "./dist/assets/_typography.scss": "./dist/assets/_typography.scss",
+    "./dist/assets/screen.css": "./dist/assets/screen.css",
+    "./dist/assets/_screen.scss": "./dist/assets/_screen.scss",
+    "./dist/assets/_mixins.scss": "./dist/assets/_mixins.scss"
+  },
+  "files": [
+    "/dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --quiet --fix"
+    ],
+    "*.{json,js,ts,jsx,tsx,html}": [
+      "prettier --write --ignore-unknown"
+    ]
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.19",
+    "@internationalized/date": "^3.5.4",
+    "@tanstack/react-table": "^8.19.2",
+    "@tinymce/tinymce-react": "^6.2.1",
+    "bignumber.js": "^9.1.2",
+    "chart.js": "^4.4.3",
+    "copyfiles": "^2.4.1",
+    "date-fns": "^3.6.0",
+    "js-cookie": "^3.0.5",
+    "lossless-json": "^4.0.2",
+    "node-forge": "^1.3.1",
+    "react-aria": "^3.33.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-number-format": "^5.4.0",
+    "react-select": "^5.8.0",
+    "react-stately": "^3.31.1",
+    "react-toastify": "^10.0.5",
+    "react-virtuoso": "^4.7.11",
+    "tinymce": "^7.9.1"
+  }
+}
 ;
 
 export default _default;

package/dist/src/components/Table/Table.d.ts

@@ -3,5 +3,5 @@ import { ITable, IVirtualizationHead, IVirtualizationTable } from '../../interfa
 
 export declare const VirtualizationHead: React.ForwardRefExoticComponent<Omit<IVirtualizationHead, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
 export declare const VirtualizationTable: ({ style, context, ...props }: IVirtualizationTable) => import("react/jsx-runtime").JSX.Element;
-declare const Table: <T>({ tableInstance, classNameWrapperTable, classNameTable, collapseAll, handlerRowClick, privillageRowClick, virtualization, virtualizationProps, headerId, tbodyTrId, maxHeight, idCalculateHeight, kind, componentSortASC, componentSortDESC, scrollTop, emptyPlaceholder, variant, renderSubComponent, columnBreakpoints, }: ITable<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Table: <T>({ tableInstance, classNameWrapperTable, classNameTable, collapseAll, handlerRowClick, privillageRowClick, virtualization, virtualizationProps, headerId, tbodyTrId, theadTrId, maxHeight, idCalculateHeight, kind, componentSortASC, componentSortDESC, scrollTop, emptyPlaceholder, variant, renderSubComponent, columnBreakpoints, }: ITable<T>) => import("react/jsx-runtime").JSX.Element;
 export default Table;

package/dist/src/components/Table/Table.stories.d.ts

@@ -1,8 +1,9 @@
 import { StoryObj } from '@storybook/react';
+import { ITable } from '../../interfaces/components/Table';
 
 declare const meta: {
     title: string;
-    component: <T>({ tableInstance, classNameWrapperTable, classNameTable, collapseAll, handlerRowClick, privillageRowClick, virtualization, virtualizationProps, headerId, tbodyTrId, maxHeight, idCalculateHeight, kind, componentSortASC, componentSortDESC, scrollTop, emptyPlaceholder, variant, renderSubComponent, columnBreakpoints, }: import('../../interfaces/components/Table').ITable<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T>({ tableInstance, classNameWrapperTable, classNameTable, collapseAll, handlerRowClick, privillageRowClick, virtualization, virtualizationProps, headerId, tbodyTrId, theadTrId, maxHeight, idCalculateHeight, kind, componentSortASC, componentSortDESC, scrollTop, emptyPlaceholder, variant, renderSubComponent, columnBreakpoints, }: ITable<T>) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -271,9 +272,22 @@ declare const meta: {
                 };
             };
         };
+        theadTrId: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
     };
     args: {};
-    render: (args: import('../../interfaces/components/Table').ITable<unknown>) => import("react/jsx-runtime").JSX.Element;
+    render: (args: ITable<unknown>) => import("react/jsx-runtime").JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -1,2 +1,11 @@
+/**
+ * [ID] : Hook untuk melakukan debounce pada fungsi asinkron.
+ * [EN] : Hook to debounce an asynchronous function.
+ * @template T - [ID] : Tipe fungsi asinkron. [EN] : Asynchronous function type.
+ * @param defaultFn - [ID] : Fungsi yang akan di-debounce. [EN] : Function to be debounced.
+ * @param defaultWait - [ID] : Waktu tunggu default dalam milidetik (default: 0).
+ * [EN] : Default wait time in milliseconds (default: 0).
+ * @returns [ID] : Fungsi yang sudah di-debounce. [EN] : Debounced function.
+ */
 declare function useAsyncDebounce<T extends (...args: any[]) => Promise<any>>(defaultFn: T, defaultWait?: number): (...args: Parameters<T>) => Promise<ReturnType<T>>;
 export default useAsyncDebounce;

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

@@ -1,23 +1,89 @@
 import { default as React } from 'react';
 
+/**
+ * [ID] : Interface untuk persegi panjang konten.
+ * [EN] : Interface for content rect.
+ */
 interface ContentRect {
+    /**
+     * [ID] : Lebar elemen.
+     * [EN] : Element width.
+     */
     width: number;
+    /**
+     * [ID] : Tinggi elemen.
+     * [EN] : Element height.
+     */
     height: number;
+    /**
+     * [ID] : Posisi atas elemen.
+     * [EN] : Element top position.
+     */
     top: number;
+    /**
+     * [ID] : Posisi kiri elemen.
+     * [EN] : Element left position.
+     */
     left: number;
+    /**
+     * [ID] : Posisi bawah elemen.
+     * [EN] : Element bottom position.
+     */
     bottom: number;
+    /**
+     * [ID] : Posisi kanan elemen.
+     * [EN] : Element right position.
+     */
     right: number;
+    /**
+     * [ID] : Posisi X elemen.
+     * [EN] : Element X position.
+     */
     x: number;
+    /**
+     * [ID] : Posisi Y elemen.
+     * [EN] : Element Y position.
+     */
     y: number;
 }
+/**
+ * [ID] : Interface untuk hook CombinedResizeObserver.
+ * [EN] : Interface for CombinedResizeObserver hook.
+ * @template T - [ID] : Tipe elemen HTML. [EN] : HTML element type.
+ */
 interface CombinedResizeObserverHook<T extends HTMLElement> {
+    /**
+     * [ID] : Referensi ke elemen.
+     * [EN] : Reference to the element.
+     */
     ref: React.RefObject<T>;
+    /**
+     * [ID] : Ukuran jendela.
+     * [EN] : Window size.
+     */
     windowSize: {
         width: number;
         height: number;
     };
+    /**
+     * [ID] : Persegi panjang konten elemen.
+     * [EN] : Element content rect.
+     */
     contentRect: ContentRect;
 }
+/**
+ * [ID] : Hook layout effect isomorfik (aman untuk SSR).
+ * [EN] : Isomorphic layout effect hook (SSR safe).
+ */
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+/**
+ * [ID] : Hook untuk mengamati perubahan ukuran elemen dan jendela.
+ * [EN] : Hook to observe element and window resize changes.
+ * @template T - [ID] : Tipe elemen HTML. [EN] : HTML element type.
+ * @param dependencies - [ID] : Daftar dependensi (opsional). [EN] : Dependency list (optional).
+ * @param selector - [ID] : Selektor CSS untuk elemen (opsional). [EN] : CSS selector for element (optional).
+ * @returns [ID] : Objek berisi ref, ukuran jendela, dan rect konten.
+ * [EN] : Object containing ref, window size, and content rect.
+ */
 declare const useCombinedResizeObserver: <T extends HTMLElement>(dependencies?: unknown[], selector?: string) => CombinedResizeObserverHook<T>;
 export default useCombinedResizeObserver;

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

@@ -1,17 +1,78 @@
+/**
+ * [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,4 +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,10 +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,25 +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;