react-hook-toolkit 1.0.16 → 1.0.17

package/README.md

@@ -15,23 +15,22 @@ yarn add react-hook-toolkit
 pnpm add react-hook-toolkit
 ```
 
+### **Authors**
+
+![NPM](https://img.shields.io/badge/Author-NPM_Teams-red)   ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D)   ![npm](https://img.shields.io/npm/dt/react-hook-toolkit)   ![NPM](https://img.shields.io/npm/l/react-hook-toolkit)   ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)
+
 ### **Browser Support**  
 
 | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png)  | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png)
 | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
 | Latest ✔                                                                                          | Latest ✔                                                                                             | Latest ✔                                                                                          | Latest ✔                                                                                       | Latest ✔                                                                                    | 
 
-### **Authors**
 
-![NPM](https://img.shields.io/badge/Author-NPM_Teams-red)   ![npm](https://img.shields.io/npm/v/react-hook-toolkit?color=1C939D)   ![npm](https://img.shields.io/npm/dt/react-hook-toolkit)   ![NPM](https://img.shields.io/npm/l/react-hook-toolkit)   ![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/react-hook-toolkit)
-
-
-## Features  
+###  **Features**
 Here's the properly structured documentation with clear purpose explanations:
 
 ------------------------------------------ **Custom Hooks**  ------------------------------------------------
 
-### 🌐 **API / Async**
 
 📌 **useAxios**   
 A custom hook for making API requests using Axios. It manages request states (`loading`, `error`, `data`) and provides a function (`makeRequest`) to initiate a request.
@@ -132,8 +131,6 @@ useTimeout(() => {
 
 ---
 
-### 📝 **Form / Validation**
-
   📌 **useForm**  
 Manages form state, handles input changes, and performs validation using provided validators.
 
@@ -230,8 +227,6 @@ reset(); // Clears storage
 
 ---
 
-### 🎯 **Event / Interaction**
-
   📌 **useEventListener**  
 Listens for a specified event on an element or window, and triggers the handler function when the event is fired. It ensures proper cleanup when the component is unmounted.
 
@@ -316,9 +311,6 @@ const { items, dragStart, dragOver, drop } = useDragReorder(initialItems);
 
 ---
 
-### 📦 **State / Logic**
-
-
   📌 **useToggle**  
 A simple boolean toggle hook that returns a state and a function to toggle its value.
 
@@ -419,8 +411,6 @@ remove(0); // Remove first item
 
 ---
 
-### 🧭 **Browser / Storage**
-
   📌 **useLocalStorage**  
  A hook to persist state in `localStorage`. It initializes state from `localStorage` and updates it whenever the value changes.
 
@@ -516,8 +506,6 @@ const { data, setData } = useIndexedDB('dbName');
 ```
 ---
 
-### 🧱 **DOM / UI**
-
 📌 **useMediaQuery**  
 Checks if a media query condition matches the current viewport, useful for responsive design.
 
@@ -593,8 +581,6 @@ const { isLoading, image } = useImageLoader('imageURL');
 
 ---
 
-### 📱 **Device / Sensors**
-
   📌 **useBattery**  
  Monitors the battery status of the device, including level, charging status, and remaining charging or discharging time.
 
@@ -626,8 +612,6 @@ const isOnline = useOnlineStatus();
 
 ---
 
-### 🎵 **Media / Audio / Visual**
-
   📌 **useSound**  
 Controls the playback of an audio file, including play, pause, and stop functionalities, while also managing the audio volume and handling any errors.
 
@@ -671,8 +655,6 @@ const { count, error } = useCountDown(10); // counts down from 10
 
 ---
 
-### 🔄 **Networking / Real-time**
-
 📌 **useWebSocket**  
  Manages WebSocket connections with auto-reconnect.
 
@@ -786,6 +768,18 @@ A functional React component that displays dynamic alerts using the enqueueSnack
 ```jsx
 <AlertMessage type="success" msg="Data saved successfully!" />
 ```
+---
+  ✅ **FieldSkeleton**  
+Simulates form field placeholders with optional label skeletons, useful for loading states in forms or input sections.
+
+```jsx
+<FieldSkeleton 
+  length={3} 
+  spacing={2} 
+  isLabel={true} 
+  responsive={{ xs: 12, sm: 6, md: 4 }} 
+/>
+```
 ---
 
  ✅ **FileSkeleton**  
@@ -842,4 +836,4 @@ Displays a skeleton placeholder for a pie chart inside a card layout. Includes a
 
   **License** 
 
-[MIT](https://www.npmjs.com/products/teams) © (2022-2024)
+[MIT](https://docs.npmjs.com/policies/npm-license) © (2022-2024)

package/dist/hooks/chunk613852.js

@@ -126,7 +126,7 @@ export var FilePreview = function (_a) {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 maxWidth: width - 120,
-                            }, children: filename })), _jsx(Typography, { variant: "caption", color: "text.secondary", children: size })] }), _jsx(IconButton, { disabled: onDownload === undefined, "aria-label": "download", onClick: function () { return onDownload(primaryKey); }, sx: { color: '#dfdfdf', '&:hover': { color: 'primary.main' } }, children: isDownloading ? (_jsx(CircularProgress, { color: "success", size: 20 })) : (_jsx(Download, { fontSize: "small", color: "primary" })) })] }) }));
+                            }, children: filename })), _jsx(Typography, { variant: "caption", color: "text.secondary", children: size })] }), _jsx(IconButton, { disabled: onDownload === undefined, "aria-label": "download", onClick: function () { return onDownload(primaryKey); }, sx: { color: '#dfdfdf', '&:hover': { color: 'primary.main' } }, children: isDownloading ? (_jsx(CircularProgress, { color: "success", size: 20 })) : (_jsx(Download, { fontSize: "small", color: onDownload ? 'primary' : 'inherit' })) })] }) }));
 };
 var VisuallyHiddenInput = forwardRef(function (props, ref) { return (_jsx("input", __assign({ ref: ref, type: "file", style: {
         position: 'absolute',

package/dist/skeletons/chunk613555.d.ts

@@ -10,10 +10,14 @@ export declare const TableSkeleton: ({ rows, columns }: {
 export declare const LineChartSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export declare const CardSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export declare const PieChartSkeleton: React.FC;
-export declare const FieldSkeleton: ({ length, width, spacing, isLabel, itemsPerRow, }: {
+export declare const FieldSkeleton: ({ length, width, spacing, isLabel, responsive, }: {
     length?: number | undefined;
     width?: string | undefined;
     spacing?: number | undefined;
     isLabel?: boolean | undefined;
-    itemsPerRow?: number | undefined;
+    responsive?: {
+        xs: number;
+        sm: number;
+        md: number;
+    } | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/skeletons/chunk613555.js

@@ -1,3 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Card, CardContent, CardHeader, Grid, IconButton, Skeleton, Table, TableBody, TableCell, TableHead, TableRow, Toolbar, Tooltip, } from "@mui/material";
 import { Download } from "@mui/icons-material";
@@ -88,7 +100,7 @@ export var PieChartSkeleton = function () {
                             }, children: _jsx(Skeleton, { variant: "circular", width: 200, height: 200, sx: { marginBottom: '16px' } }) })] }) })] }));
 };
 export var FieldSkeleton = function (_a) {
-    var _b = _a.length, length = _b === void 0 ? 1 : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, _d = _a.spacing, spacing = _d === void 0 ? 2 : _d, _e = _a.isLabel, isLabel = _e === void 0 ? false : _e, _f = _a.itemsPerRow, itemsPerRow = _f === void 0 ? 2 : _f;
-    var columnSize = Math.floor(12 / itemsPerRow);
-    return (_jsx(Grid, { container: true, spacing: spacing, children: Array.from({ length: length }).map(function (_, index) { return (_jsx(Grid, { item: true, xs: 12, sm: columnSize, children: _jsxs(Box, { sx: { width: '100%', margin: 2 }, children: [isLabel && _jsx(Skeleton, { variant: "text", width: "40%", height: 20, sx: { marginBottom: 1 } }), _jsx(Skeleton, { variant: "rectangular", width: width, height: 40, sx: { borderRadius: 1 } })] }) }, index.toString())); }) }));
+    var _b = _a.length, length = _b === void 0 ? 1 : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, _d = _a.spacing, spacing = _d === void 0 ? 2 : _d, _e = _a.isLabel, isLabel = _e === void 0 ? false : _e, _f = _a.responsive, responsive = _f === void 0 ? { xs: 12, sm: 6, md: 4 } : _f;
+    return (_jsx(Grid, { container: true, spacing: spacing, children: Array.from({ length: length }).map(function (_, index) { return (_createElement(Grid, __assign({ item: true }, responsive, { key: index.toString() }),
+            _jsxs(Box, { sx: { width: '100%', margin: 2 }, children: [isLabel && _jsx(Skeleton, { variant: "text", width: "40%", height: 20, sx: { marginBottom: 1 } }), _jsx(Skeleton, { variant: "rectangular", width: width, height: 40, sx: { borderRadius: 1 } })] }))); }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Ultimate package for React developers, offering a powerful collection of hooks and components to enhance their development experience.",
   "main": "dist/index.js",
   "module": "dist/index.js",