react-hook-toolkit 1.0.8 → 1.0.10

package/README.md

@@ -24,8 +24,9 @@ pnpm add react-hook-toolkit
 ## Features  
 Here's the properly structured documentation with clear purpose explanations:
 
-----------------------------------------------------  **Custom Hooks**  --------------------------------------------------
-  📌 **useAxios**   
+----------------------------------------------------  **Custom Hooks**  ------------------------------------------------
+
+📌 **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.
 ```ts
 const { data, loading, error, makeRequest, cancelRequest } = useAxios({ baseURL: '/api' });
@@ -617,6 +618,31 @@ Displays a styled file card with an icon based on file type, filename with ellip
   onDownload={(id) => console.log("Download:", id)}
 />
 ```
+---
+
+### ✅ **LabeledValue**  
+Displays a simple key-value label pair in a single line, with optional styling.
+
+```tsx
+<LabeledValue
+  label="Name"
+  value="ABC"
+/>
+```
+---
+
+### ✅ **DetailsCard**  
+Renders a card with a title and grid-based layout of labeled values. It supports custom spacing, responsive behavior, and optional card shadow.
+
+```tsx
+<DetailsCard
+  title="Details"
+  spacing={2}
+  details={[
+    { label: 'Name', value: 'XYZ' },
+  ]}
+/>
+```
 
 ---
   ✅ **AlertMessage**  

package/dist/hooks/hooksComp.d.ts

@@ -6,6 +6,15 @@ interface PropsType {
     duration?: number;
 }
 export declare const AlertMessage: FC<PropsType>;
+interface DetailsCardProps {
+    title: string;
+    details: any;
+    spacing?: number;
+    boxShadow?: string;
+    background?: string;
+}
+export declare const DetailsCard: ({ title, details, spacing, boxShadow, background, }: DetailsCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LabeledValue: ({ label, value, style }: any) => import("react/jsx-runtime").JSX.Element;
 interface FileComponentProps {
     primaryKey: string | number;
     filename: string;

package/dist/hooks/hooksComp.js

@@ -9,14 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useCallback, useRef, Suspense } from 'react';
-import { Box, Alert, AlertTitle, IconButton, CardContent, Tooltip, Typography, Card, } from '@mui/material';
+import { Box, Alert, AlertTitle, IconButton, CardContent, Tooltip, Typography, Card, Grid, } from '@mui/material';
 import { Close, InsertDriveFile, Image, Description, Download } from '@mui/icons-material';
 import NProgress from 'nprogress';
 import { ErrorBoundary } from 'react-error-boundary';
 import { promise } from '../utils';
 import { getHook } from '../hookExecuter/hookExecuter';
+import { useWindowSize } from './hooks';
 function Fallback(_a) {
     var error = _a.error;
     return (_jsxs(Box, { sx: { padding: 2 }, children: [process.env.NODE_ENV === 'production' && (_jsxs(Alert, { sx: { py: 0, borderLeft: '2px solid #00abff !important', border: '1px solid #d0cfcf' }, severity: "info", children: [_jsx(AlertTitle, { children: "Page Loading Error" }), "Please check your network connection..."] })), process.env.NODE_ENV !== 'production' && (_jsxs(Alert, { severity: "error", sx: { py: 0, borderTop: '2px solid #791212ad !important', border: '1px solid #d0cfcf' }, children: [_jsx(AlertTitle, { children: "Error" }), error.message] }))] }));
@@ -71,6 +72,15 @@ export var AlertMessage = function (_a) {
     }
     return null;
 };
+export var DetailsCard = function (_a) {
+    var title = _a.title, details = _a.details, _b = _a.spacing, spacing = _b === void 0 ? 2 : _b, _c = _a.boxShadow, boxShadow = _c === void 0 ? '0px 0px 2px 2px #d8d8d8' : _c, _d = _a.background, background = _d === void 0 ? '#eee' : _d;
+    var width = useWindowSize().width;
+    return (_jsx(Card, { sx: { boxShadow: boxShadow }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", sx: { background: background, padding: '4px' }, children: title }), _jsx(Grid, { container: true, spacing: spacing, sx: { mt: 1 }, children: details.filter(Boolean).map(function (item, index) { return (_jsxs(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: width < 1367 ? 6 : 4, children: [_jsxs(Typography, { fontWeight: "bold", component: "span", sx: { fontSize: '14px' }, children: [item === null || item === void 0 ? void 0 : item.label, ": \u00A0"] }), _jsx(Typography, { component: "span", sx: { fontSize: '14px' }, children: (item === null || item === void 0 ? void 0 : item.value) || 'N/A' })] }, index.toString())); }) })] }) }));
+};
+export var LabeledValue = function (_a) {
+    var label = _a.label, value = _a.value, _b = _a.style, style = _b === void 0 ? undefined : _b;
+    return (_jsx(_Fragment, { children: _jsx(Typography, { sx: style !== null && style !== void 0 ? style : { padding: '5px' }, children: _jsxs("span", { style: { fontSize: '13px' }, children: [_jsxs("b", { children: [label, " "] }), ": ", value !== null && value !== void 0 ? value : 'N/A'] }) }) }));
+};
 export var FilePreview = function (_a) {
     var primaryKey = _a.primaryKey, filename = _a.filename, size = _a.size, _b = _a.onDownload, onDownload = _b === void 0 ? undefined : _b, _c = _a.width, width = _c === void 0 ? 350 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#dfdfdf' : _d, _e = _a.fileColor, fileColor = _e === void 0 ? 'primary' : _e;
     // Icon mapping configuration

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import 'nprogress/nprogress.css';
 import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
-import { DynamicLoader, AlertMessage, FilePreview } from './hooks/hooksComp';
+import { DynamicLoader, AlertMessage, FilePreview, LabeledValue, DetailsCard } from './hooks/hooksComp';
 import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './skeletons/skeletons';
 import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown } from './hooks/hooks';
 export default ReactHooksWrapper;
-export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton };
+export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton, LabeledValue, DetailsCard };

package/dist/index.js

@@ -1,7 +1,7 @@
 import 'nprogress/nprogress.css';
 import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
-import { DynamicLoader, AlertMessage, FilePreview, } from './hooks/hooksComp';
+import { DynamicLoader, AlertMessage, FilePreview, LabeledValue, DetailsCard } from './hooks/hooksComp';
 import { FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton } from './skeletons/skeletons';
 import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, } from './hooks/hooks';
 export default ReactHooksWrapper;
-export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton };
+export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader, AlertMessage, FilePreview, FileSkeleton, TableSkeleton, PieChartSkeleton, CardSkeleton, LineChartSkeleton, FieldSkeleton, LabeledValue, DetailsCard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-toolkit",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "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",