react-hook-toolkit 1.1.9 → 1.2.0

package/dist/chunk1617/chunk613555.d.ts

@@ -0,0 +1,23 @@
+export declare const FileSkeleton: ({ length, width, borderColor }: {
+    length?: number | undefined;
+    width?: number | undefined;
+    borderColor?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const TableSkeleton: ({ rows, columns }: {
+    rows?: number | undefined;
+    columns?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+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, responsive, }: {
+    length?: number | undefined;
+    width?: string | undefined;
+    spacing?: number | undefined;
+    isLabel?: boolean | undefined;
+    responsive?: {
+        xs: number;
+        sm: number;
+        md: number;
+    } | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/chunk1617/chunk613555.js

@@ -0,0 +1,115 @@
+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";
+export var FileSkeleton = function (_a) {
+    var _b = _a.length, length = _b === void 0 ? 1 : _b, _c = _a.width, width = _c === void 0 ? 350 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#dfdfdf' : _d;
+    return (_jsx(Grid, { container: true, spacing: 2, children: Array.from({ length: length }).map(function (_, index) { return (_jsx(Grid, { item: true, children: _jsx(Card, { variant: "outlined", sx: {
+                    maxWidth: width,
+                    minWidth: width,
+                    border: "1px solid ".concat(borderColor),
+                    borderRadius: 1,
+                    '&:hover': { boxShadow: 2 },
+                    marginLeft: 3,
+                }, children: _jsxs(CardContent, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        padding: '8px !important',
+                    }, children: [_jsx(Skeleton, { variant: "rectangular", width: 50, height: 40 }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Skeleton, { variant: "text", width: width - 120, height: 20 }), _jsx(Skeleton, { variant: "text", width: 60, height: 14 })] }), _jsx(IconButton, { disabled: true, sx: { color: '#dfdfdf' }, children: _jsx(Download, { fontSize: "small", color: "disabled" }) })] }) }) }, index.toString())); }) }));
+};
+export var TableSkeleton = function (_a) {
+    var _b = _a.rows, rows = _b === void 0 ? 6 : _b, _c = _a.columns, columns = _c === void 0 ? 6 : _c;
+    return (_jsxs(Box, { sx: { width: '100%', overflowX: 'auto' }, children: [_jsxs(Toolbar, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    p: 1,
+                    borderBottom: '1px solid #dbdbdb',
+                }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: _jsx(Skeleton, { variant: "rectangular", width: 200, height: 40 }) }), _jsx(Box, { children: _jsx(Tooltip, { title: "Filter", children: _jsx(IconButton, { children: _jsx(Skeleton, { variant: "circular", width: 40, height: 40 }) }) }) })] }), _jsxs(Table, { "aria-label": "loading table", children: [_jsx(TableHead, { children: _jsx(TableRow, { children: Array.from({ length: columns }).map(function (_, index) { return (_jsx(TableCell, { children: _jsx(Skeleton, { variant: "rectangular", height: 20 }) }, "head-".concat(index))); }) }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map(function (_, rowIndex) { return (_jsx(TableRow, { children: Array.from({ length: columns }).map(function (_, colIndex) { return (_jsx(TableCell, { children: _jsx(Skeleton, { animation: "wave", variant: "text", width: "100%" }) }, "cell-".concat(rowIndex, "-").concat(colIndex))); }) }, "row-".concat(rowIndex))); }) })] })] }));
+};
+export var LineChartSkeleton = function () {
+    return (_jsxs(Box, { sx: { width: '100%', height: '300px', position: 'relative', padding: '16px' }, children: [_jsx(Skeleton, { variant: "text", width: "30%", height: 30, sx: { position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)' } }), _jsx(Skeleton, { variant: "rectangular", width: "calc(100% - 40px)", height: 4, sx: { position: 'absolute', bottom: 40, left: 20 } }), _jsx(Skeleton, { variant: "rectangular", width: 2, height: "calc(100% - 40px)", sx: { position: 'absolute', top: 0, bottom: 40, left: 20 } }), _jsx(Skeleton, { variant: "rectangular", width: 2, height: "calc(100% - 40px)", sx: { position: 'absolute', top: 0, bottom: 40, right: 20 } }), [1, 2, 3, 4].map(function (_, index) { return (_jsx(Skeleton, { variant: "rectangular", width: "calc(100% - 40px)", height: 4, sx: { position: 'absolute', bottom: "".concat(40 + index * 50, "px"), left: '20px' } }, index.toString())); }), _jsx(Skeleton, { variant: "rectangular", width: "calc(100% - 40px)", height: 2, sx: {
+                    position: 'absolute',
+                    left: '20px',
+                    top: '85%',
+                    transform: 'rotate(-7deg)',
+                    transformOrigin: 'left center',
+                } })] }));
+};
+export var CardSkeleton = function () {
+    var skeletonStyles = {
+        boxShadow: '0px 1px 8px -2px #444444de',
+        borderRadius: '10px',
+        overflow: 'hidden',
+        padding: '12px',
+        transition: '0.3s',
+        background: 'linear-gradient(to top left, #fff 20%, #f5f5f5 80%)',
+        width: {
+            xs: '90%',
+            sm: '70%',
+            md: '150%',
+            lg: '195%',
+            xl: '200%',
+        },
+        maxWidth: '600px',
+    };
+    return (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, children: _jsxs(Box, { sx: skeletonStyles, children: [_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 30, sx: {
+                        marginBottom: '12px',
+                        borderRadius: '4px',
+                        background: 'linear-gradient(to left, #e0e0e0 10%, #cfcfcf 100%)',
+                    } }), _jsx(Box, { children: Array.from(new Array(4)).map(function (__, index) { return (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            marginBottom: index !== 3 ? 1 : 0,
+                        }, children: [_jsx(Skeleton, { variant: "text", width: "70%", height: 20 }), _jsx(Skeleton, { variant: "text", width: "20%", height: 20 })] }, index.toString())); }) })] }) }));
+};
+export var PieChartSkeleton = function () {
+    return (_jsxs(_Fragment, { children: [_jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 6, sx: { padding: '10px' }, children: _jsxs(Card, { sx: {
+                        borderRadius: '6px',
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        cursor: 'default',
+                    }, children: [_jsx(CardHeader, { title: _jsx(Skeleton, { variant: "rectangular", width: "80%", height: "20px", sx: { margin: '0 auto', borderRadius: '4px' } }), sx: {
+                                background: '#dbe7f2',
+                                padding: '8px',
+                            } }), _jsx(CardContent, { sx: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                height: '320px',
+                            }, children: _jsx(Skeleton, { variant: "circular", width: 200, height: 200, sx: { marginBottom: '16px' } }) })] }) }), _jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 6, sx: { padding: '10px' }, children: _jsxs(Card, { sx: {
+                        borderRadius: '6px',
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        cursor: 'default',
+                    }, children: [_jsx(CardHeader, { title: _jsx(Skeleton, { variant: "rectangular", width: "80%", height: "20px", sx: { margin: '0 auto', borderRadius: '4px' } }), sx: {
+                                background: '#dbe7f2',
+                                padding: '8px',
+                            } }), _jsx(CardContent, { sx: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                height: '320px',
+                            }, 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.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/dist/chunk1617/chunk613557.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AnimatedWrapperProps } from '../type';
+export declare const AnimatedWrapper: React.FC<AnimatedWrapperProps>;

package/dist/chunk1617/chunk613557.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AnimatedWrapper = function (_a) {
+    var _b = _a.animationClass, animationClass = _b === void 0 ? 'animate__bounceIn' : _b, _c = _a.delay, delay = _c === void 0 ? '0' : _c, children = _a.children;
+    var delayValue = Number(delay);
+    var delayClass = delayValue > 0 ? "animate__delay-".concat(delayValue, "s") : '';
+    return (_jsx("div", { className: "animate__animated ".concat(animationClass, " ").concat(delayClass), children: children }));
+};