@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.3

package/dist/components/core/form/SolidFormViewContextMenuHeaderButton.tsx

@@ -1,6 +1,6 @@
-import { Button } from 'primereact/button';
-import { hasAnyRole } from '../../../helpers/rolesHelper';
+import { hasAnyRole } from "../../../helpers/rolesHelper";
 import { useSession } from "../../../hooks/useSession";
+import { SolidButton, SolidIcon, parseSolidIconMeta } from "../../shad-cn-ui";
 
 interface SolidFormViewContextMenuHeaderButtonProps {
     button: any;
@@ -9,6 +9,8 @@ interface SolidFormViewContextMenuHeaderButtonProps {
     solidFormViewMetaData: any;
     handleCustomButtonClick: (attrs: any, event: any) => void;
     formData: any;
+    onActionComplete?: () => void;
+    variant?: "default" | "menu";
 }
 
 export function SolidFormViewContextMenuHeaderButton({
@@ -17,7 +19,9 @@ export function SolidFormViewContextMenuHeaderButton({
     formik,
     solidFormViewMetaData,
     handleCustomButtonClick,
-    formData
+    formData,
+    onActionComplete,
+    variant = "default"
 }: SolidFormViewContextMenuHeaderButtonProps) {
 
     const { data: session, status } = useSession();
@@ -27,26 +31,51 @@ export function SolidFormViewContextMenuHeaderButton({
 
     if (!hasRole) return null;
     if (button.attrs?.visible == false) return null
+    const iconMeta = parseSolidIconMeta(button?.attrs?.icon ?? "si si-pencil");
+    const handleClick = () => {
+        const event = {
+            action: button.attrs.action,
+            params,
+            formik,
+            solidFormViewMetaData: solidFormViewMetaData.data,
+            formData
+        };
+        handleCustomButtonClick(button.attrs, event);
+        onActionComplete?.();
+    };
+
+    if (variant === "menu") {
+        return (
+            <button
+                type="button"
+                className={`solid-row-action-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+                onClick={handleClick}
+            >
+                {iconMeta ? (
+                    <SolidIcon
+                        name={iconMeta.name}
+                        spin={iconMeta.spin}
+                        className="solid-row-action-button-icon"
+                        aria-hidden
+                    />
+                ) : null}
+                <span className="solid-row-action-button-label">{button.attrs.label}</span>
+            </button>
+        );
+    }
+
     return (
         <div>
-            <Button
+            <SolidButton
                 text
                 type="button"
                 className={`w-full text-left gap-2 ${button?.attrs?.className ? button?.attrs?.className : ''}`}
                 label={button.attrs.label}
-                size="small"
-                iconPos="left"
-                icon={button?.attrs?.icon ? button?.attrs?.icon : "pi pi-pencil"}
-                onClick={() => {
-                    const event = {
-                        action: button.attrs.action,
-                        params,
-                        formik,
-                        solidFormViewMetaData: solidFormViewMetaData.data,
-                        formData
-                    }
-                    handleCustomButtonClick(button.attrs, event)
-                }}
+                size="sm"
+                leftIcon={
+                    iconMeta ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} aria-hidden /> : undefined
+                }
+                onClick={handleClick}
             />
         </div>
     );

package/dist/components/core/form/SolidFormViewNormalHeaderButton.d.ts

@@ -5,7 +5,9 @@ interface SolidFormViewNormalHeaderButtonProps {
     solidFormViewMetaData: any;
     handleCustomButtonClick: (attrs: any, event: any) => void;
     formData: any;
+    onActionComplete?: () => void;
+    variant?: "default" | "menu";
 }
-export declare function SolidFormViewNormalHeaderButton({ button, params, formik, solidFormViewMetaData, handleCustomButtonClick, formData }: SolidFormViewNormalHeaderButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SolidFormViewNormalHeaderButton({ button, params, formik, solidFormViewMetaData, handleCustomButtonClick, formData, onActionComplete, variant }: SolidFormViewNormalHeaderButtonProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=SolidFormViewNormalHeaderButton.d.ts.map

package/dist/components/core/form/SolidFormViewNormalHeaderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewNormalHeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewNormalHeaderButton.tsx"],"names":[],"mappings":"AAIA,UAAU,oCAAoC;IAC1C,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,GAAG,CAAA;CAChB;AAED,wBAAgB,+BAA+B,CAAC,EAE5C,MAAM,EACN,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,QAAQ,EACX,EAAE,oCAAoC,kDA+BtC"}
+{"version":3,"file":"SolidFormViewNormalHeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewNormalHeaderButton.tsx"],"names":[],"mappings":"AAKA,UAAU,oCAAoC;IAC1C,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,EAAE,GAAG,CAAC;IACZ,qBAAqB,EAAE,GAAG,CAAC;IAC3B,uBAAuB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC;AAED,wBAAgB,+BAA+B,CAAC,EAC5C,MAAM,EACN,MAAM,EACN,MAAM,EACN,qBAAqB,EACrB,uBAAuB,EACvB,QAAQ,EACR,gBAAgB,EAChB,OAAmB,EACtB,EAAE,oCAAoC,kDAiDtC"}

package/dist/components/core/form/SolidFormViewNormalHeaderButton.js

@@ -1,26 +1,32 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from 'primereact/button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { hasAnyRole } from '../../../helpers/rolesHelper';
 import { useSession } from "../../../hooks/useSession";
+import { SolidButton } from '../../shad-cn-ui';
+import { SolidIcon, parseSolidIconMeta } from "../../shad-cn-ui/SolidIcon";
 export function SolidFormViewNormalHeaderButton(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var button = _a.button, params = _a.params, formik = _a.formik, solidFormViewMetaData = _a.solidFormViewMetaData, handleCustomButtonClick = _a.handleCustomButtonClick, formData = _a.formData;
-    var _k = useSession(), session = _k.data, status = _k.status;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var button = _a.button, params = _a.params, formik = _a.formik, solidFormViewMetaData = _a.solidFormViewMetaData, handleCustomButtonClick = _a.handleCustomButtonClick, formData = _a.formData, onActionComplete = _a.onActionComplete, _o = _a.variant, variant = _o === void 0 ? "default" : _o;
+    var _p = useSession(), session = _p.data, status = _p.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
     var hasRole = !((_b = button === null || button === void 0 ? void 0 : button.attrs) === null || _b === void 0 ? void 0 : _b.roles) || ((_c = button === null || button === void 0 ? void 0 : button.attrs) === null || _c === void 0 ? void 0 : _c.roles.length) === 0 ? true : hasAnyRole(user === null || user === void 0 ? void 0 : user.roles, (_d = button === null || button === void 0 ? void 0 : button.attrs) === null || _d === void 0 ? void 0 : _d.roles);
     if (!hasRole)
         return null;
     if (((_e = button === null || button === void 0 ? void 0 : button.attrs) === null || _e === void 0 ? void 0 : _e.visible) == false)
         return null;
-    return (_jsx("div", { children: _jsx(Button, { type: "button", className: "w-full text-left gap-2 p-button-sm solid-icon-button ".concat(((_f = button === null || button === void 0 ? void 0 : button.attrs) === null || _f === void 0 ? void 0 : _f.className) ? (_g = button === null || button === void 0 ? void 0 : button.attrs) === null || _g === void 0 ? void 0 : _g.className : ''), label: button.attrs.label, size: "small", iconPos: "left", icon: ((_h = button === null || button === void 0 ? void 0 : button.attrs) === null || _h === void 0 ? void 0 : _h.icon) ? (_j = button === null || button === void 0 ? void 0 : button.attrs) === null || _j === void 0 ? void 0 : _j.icon : "", onClick: function () {
-                var event = {
-                    action: button.attrs.action,
-                    params: params,
-                    formik: formik,
-                    solidFormViewMetaData: solidFormViewMetaData.data,
-                    formData: formData
-                };
-                handleCustomButtonClick(button.attrs, event);
-            } }) }));
+    var handleClick = function () {
+        var event = {
+            action: button.attrs.action,
+            params: params,
+            formik: formik,
+            solidFormViewMetaData: solidFormViewMetaData.data,
+            formData: formData
+        };
+        handleCustomButtonClick(button.attrs, event);
+        onActionComplete === null || onActionComplete === void 0 ? void 0 : onActionComplete();
+    };
+    if (variant === "menu") {
+        return (_jsxs("button", { type: "button", className: "solid-row-action-button ".concat(((_f = button === null || button === void 0 ? void 0 : button.attrs) === null || _f === void 0 ? void 0 : _f.className) ? (_g = button === null || button === void 0 ? void 0 : button.attrs) === null || _g === void 0 ? void 0 : _g.className : ''), onClick: handleClick, children: [((_h = button === null || button === void 0 ? void 0 : button.attrs) === null || _h === void 0 ? void 0 : _h.icon) && ((function () { var m = parseSolidIconMeta(button.attrs.icon); return m ? _jsx(SolidIcon, { name: m.name, spin: m.spin, className: "solid-row-action-button-icon" }) : _jsx("i", { className: "".concat(button.attrs.icon, " solid-row-action-button-icon") }); })()), _jsx("span", { className: "solid-row-action-button-label", children: button.attrs.label })] }));
+    }
+    return (_jsx("div", { children: _jsx(SolidButton, { type: "button", className: "w-full text-left gap-2 solid-icon-button ".concat(((_j = button === null || button === void 0 ? void 0 : button.attrs) === null || _j === void 0 ? void 0 : _j.className) ? (_k = button === null || button === void 0 ? void 0 : button.attrs) === null || _k === void 0 ? void 0 : _k.className : ''), label: button.attrs.label, size: "sm", iconPos: "left", icon: ((_l = button === null || button === void 0 ? void 0 : button.attrs) === null || _l === void 0 ? void 0 : _l.icon) ? (_m = button === null || button === void 0 ? void 0 : button.attrs) === null || _m === void 0 ? void 0 : _m.icon : "", onClick: handleClick }) }));
 }
 //# sourceMappingURL=SolidFormViewNormalHeaderButton.js.map

package/dist/components/core/form/SolidFormViewNormalHeaderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewNormalHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewNormalHeaderButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAWvD,MAAM,UAAU,+BAA+B,CAAC,EAQT;;QANnC,MAAM,YAAA,EACN,MAAM,YAAA,EACN,MAAM,YAAA,EACN,qBAAqB,2BAAA,EACrB,uBAAuB,6BAAA,EACvB,QAAQ,cAAA;IAGF,IAAA,KAA4B,UAAU,EAAE,EAAhC,OAAO,UAAA,EAAE,MAAM,YAAiB,CAAC;IAC/C,IAAM,IAAI,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAC;IAE3B,IAAM,OAAO,GAAG,CAAC,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAA,IAAI,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,MAAM,MAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,KAAK,CAAC,CAAC;IAElI,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAC1B,IAAI,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,OAAO,KAAI,KAAK;QAAE,OAAO,IAAI,CAAA;IAChD,OAAO,CACH,wBACI,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,+DAAwD,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,EAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EAC7H,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EACzB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,IAAI,EAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,0CAAE,IAAI,CAAC,CAAC,CAAC,EAAE,EACpD,OAAO,EAAE;gBACL,IAAM,KAAK,GAAG;oBACV,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM;oBAC3B,MAAM,QAAA;oBACN,MAAM,QAAA;oBACN,qBAAqB,EAAE,qBAAqB,CAAC,IAAI;oBACjD,QAAQ,UAAA;iBACX,CAAC;gBACF,uBAAuB,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YACjD,CAAC,GACH,GACA,CACT,CAAC;AACN,CAAC","sourcesContent":["import { Button } from 'primereact/button';\nimport { hasAnyRole } from '../../../helpers/rolesHelper';\nimport { useSession } from \"../../../hooks/useSession\";\n\ninterface SolidFormViewNormalHeaderButtonProps {\n    button: any;\n    params: any;\n    formik: any;\n    solidFormViewMetaData: any;\n    handleCustomButtonClick: (attrs: any, event: any) => void;\n    formData: any\n}\n\nexport function SolidFormViewNormalHeaderButton({\n\n    button,\n    params,\n    formik,\n    solidFormViewMetaData,\n    handleCustomButtonClick,\n    formData\n}: SolidFormViewNormalHeaderButtonProps) {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button?.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n\n    if (!hasRole) return null;\n    if (button?.attrs?.visible == false) return null\n    return (\n        <div>\n            <Button\n                type=\"button\"\n                className={`w-full text-left gap-2 p-button-sm solid-icon-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n                label={button.attrs.label}\n                size=\"small\"\n                iconPos=\"left\"\n                icon={button?.attrs?.icon ? button?.attrs?.icon : \"\"}\n                onClick={() => {\n                    const event = {\n                        action: button.attrs.action,\n                        params,\n                        formik,\n                        solidFormViewMetaData: solidFormViewMetaData.data,\n                        formData\n                    };\n                    handleCustomButtonClick(button.attrs, event);\n                }}\n            />\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidFormViewNormalHeaderButton.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewNormalHeaderButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { hasAnyRole } from '../../../helpers/rolesHelper';\nimport { useSession } from \"../../../hooks/useSession\";\nimport { SolidButton } from '../../shad-cn-ui';\nimport { SolidIcon, parseSolidIconMeta } from \"../../shad-cn-ui/SolidIcon\";\n\ninterface SolidFormViewNormalHeaderButtonProps {\n    button: any;\n    params: any;\n    formik: any;\n    solidFormViewMetaData: any;\n    handleCustomButtonClick: (attrs: any, event: any) => void;\n    formData: any;\n    onActionComplete?: () => void;\n    variant?: \"default\" | \"menu\";\n}\n\nexport function SolidFormViewNormalHeaderButton({\n    button,\n    params,\n    formik,\n    solidFormViewMetaData,\n    handleCustomButtonClick,\n    formData,\n    onActionComplete,\n    variant = \"default\"\n}: SolidFormViewNormalHeaderButtonProps) {\n\n    const { data: session, status } = useSession();\n    const user = session?.user;\n\n    const hasRole = !button?.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);\n\n    if (!hasRole) return null;\n    if (button?.attrs?.visible == false) return null\n    const handleClick = () => {\n        const event = {\n            action: button.attrs.action,\n            params,\n            formik,\n            solidFormViewMetaData: solidFormViewMetaData.data,\n            formData\n        };\n        handleCustomButtonClick(button.attrs, event);\n        onActionComplete?.();\n    };\n\n    if (variant === \"menu\") {\n        return (\n            <button\n                type=\"button\"\n                className={`solid-row-action-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n                onClick={handleClick}\n            >\n                {button?.attrs?.icon && (\n                    (() => { const m = parseSolidIconMeta(button.attrs.icon); return m ? <SolidIcon name={m.name} spin={m.spin} className=\"solid-row-action-button-icon\" /> : <i className={`${button.attrs.icon} solid-row-action-button-icon`} />; })()\n                )}\n                <span className=\"solid-row-action-button-label\">{button.attrs.label}</span>\n            </button>\n        );\n    }\n\n    return (\n        <div>\n            <SolidButton\n                type=\"button\"\n                className={`w-full text-left gap-2 solid-icon-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}\n                label={button.attrs.label}\n                size=\"sm\"\n                iconPos=\"left\"\n                icon={button?.attrs?.icon ? button?.attrs?.icon : \"\"}\n                onClick={handleClick}\n            />\n        </div>\n    );\n}\n"]}

package/dist/components/core/form/SolidFormViewNormalHeaderButton.tsx

@@ -1,6 +1,7 @@
-import { Button } from 'primereact/button';
 import { hasAnyRole } from '../../../helpers/rolesHelper';
 import { useSession } from "../../../hooks/useSession";
+import { SolidButton } from '../../shad-cn-ui';
+import { SolidIcon, parseSolidIconMeta } from "../../shad-cn-ui/SolidIcon";
 
 interface SolidFormViewNormalHeaderButtonProps {
     button: any;
@@ -8,17 +9,20 @@ interface SolidFormViewNormalHeaderButtonProps {
     formik: any;
     solidFormViewMetaData: any;
     handleCustomButtonClick: (attrs: any, event: any) => void;
-    formData: any
+    formData: any;
+    onActionComplete?: () => void;
+    variant?: "default" | "menu";
 }
 
 export function SolidFormViewNormalHeaderButton({
-
     button,
     params,
     formik,
     solidFormViewMetaData,
     handleCustomButtonClick,
-    formData
+    formData,
+    onActionComplete,
+    variant = "default"
 }: SolidFormViewNormalHeaderButtonProps) {
 
     const { data: session, status } = useSession();
@@ -28,25 +32,43 @@ export function SolidFormViewNormalHeaderButton({
 
     if (!hasRole) return null;
     if (button?.attrs?.visible == false) return null
+    const handleClick = () => {
+        const event = {
+            action: button.attrs.action,
+            params,
+            formik,
+            solidFormViewMetaData: solidFormViewMetaData.data,
+            formData
+        };
+        handleCustomButtonClick(button.attrs, event);
+        onActionComplete?.();
+    };
+
+    if (variant === "menu") {
+        return (
+            <button
+                type="button"
+                className={`solid-row-action-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+                onClick={handleClick}
+            >
+                {button?.attrs?.icon && (
+                    (() => { const m = parseSolidIconMeta(button.attrs.icon); return m ? <SolidIcon name={m.name} spin={m.spin} className="solid-row-action-button-icon" /> : <i className={`${button.attrs.icon} solid-row-action-button-icon`} />; })()
+                )}
+                <span className="solid-row-action-button-label">{button.attrs.label}</span>
+            </button>
+        );
+    }
+
     return (
         <div>
-            <Button
+            <SolidButton
                 type="button"
-                className={`w-full text-left gap-2 p-button-sm solid-icon-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+                className={`w-full text-left gap-2 solid-icon-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
                 label={button.attrs.label}
-                size="small"
+                size="sm"
                 iconPos="left"
                 icon={button?.attrs?.icon ? button?.attrs?.icon : ""}
-                onClick={() => {
-                    const event = {
-                        action: button.attrs.action,
-                        params,
-                        formik,
-                        solidFormViewMetaData: solidFormViewMetaData.data,
-                        formData
-                    };
-                    handleCustomButtonClick(button.attrs, event);
-                }}
+                onClick={handleClick}
             />
         </div>
     );

package/dist/components/core/form/SolidFormViewShimmerLoading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewShimmerLoading.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewShimmerLoading.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,2BAA2B,+CAwGvC,CAAA"}
+{"version":3,"file":"SolidFormViewShimmerLoading.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewShimmerLoading.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,2BAA2B,+CAwGvC,CAAA"}

package/dist/components/core/form/SolidFormViewShimmerLoading.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './solidFormViewShimmerLoading.module.css';
-import { Skeleton } from 'primereact/skeleton';
+var SkeletonBlock = function (_a) {
+    var width = _a.width, height = _a.height, className = _a.className;
+    return (_jsx("div", { className: "solid-skeleton ".concat(className !== null && className !== void 0 ? className : ""), style: { width: width, height: height } }));
+};
 export var SolidFormViewShimmerLoading = function () {
-    return (_jsxs("div", { className: 'h-screen surface-0', children: [_jsxs("div", { className: "page-header pl-2 ", children: [_jsxs("div", { className: 'flex align-items-center gap-3', children: [_jsx(Skeleton, { width: "50px", height: '1.4rem', className: 'md:h-1.3rem  border-round-lg ' }), _jsx(Skeleton, { width: "300px", className: 'border-round-lg hidden md:flex' })] }), _jsxs("div", { className: 'flex align-items-center gap-3', children: [_jsx(Skeleton, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem" }), _jsx(Skeleton, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem" }), _jsx(Skeleton, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem flex md:hidden" })] })] }), _jsx("div", { className: "page-header", style: { borderTop: '1px solid var(--primary-light-color)' }, children: _jsx("div", { className: 'w-full flex align-items-center justify-content-end', children: _jsx(Skeleton, { width: "30%", height: "2rem" }) }) }), _jsxs("div", { className: styles.solidFormViewShimmerLoadingWrapper, children: [_jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'field col-6', children: _jsxs("div", { className: 'flex align-items-center gap-2', children: [_jsx(Skeleton, { width: "2rem", className: 'border-round-lg' }), _jsx(Skeleton, { width: "2rem", className: 'border-round-lg' }), _jsx(Skeleton, { width: "2rem", className: 'border-round-lg' })] }) }) }), _jsxs("div", { className: 'formgrid grid mt-4', children: [_jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] })] })] })] }), _jsx("div", { style: { borderTop: '1px solid var(--primary-light-color)' } }), _jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'field col-6', children: _jsx("div", { className: 'flex align-items-center gap-2', children: _jsx(Skeleton, { width: "8rem", height: '1.5rem', className: 'border-round-lg' }) }) }) }), _jsxs("div", { className: 'formgrid grid mt-4', children: [_jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(Skeleton, { width: "40%", className: 'border-round-lg' }), _jsx(Skeleton, { width: "100%", height: "2rem" })] })] })] })] })] })] }));
+    return (_jsxs("div", { className: 'h-screen surface-0', children: [_jsxs("div", { className: "page-header pl-2 ", children: [_jsxs("div", { className: 'flex align-items-center gap-3', children: [_jsx(SkeletonBlock, { width: "50px", height: '1.4rem', className: 'md:h-1.3rem  border-round-lg ' }), _jsx(SkeletonBlock, { width: "300px", className: 'border-round-lg hidden md:flex' })] }), _jsxs("div", { className: 'flex align-items-center gap-3', children: [_jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem" }), _jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem" }), _jsx(SkeletonBlock, { width: "2.7rem", height: "1.6rem", className: "md:w-4rem md:h-2rem flex md:hidden" })] })] }), _jsx("div", { className: "page-header", style: { borderTop: '1px solid var(--primary-light-color)' }, children: _jsx("div", { className: 'w-full flex align-items-center justify-content-end', children: _jsx(SkeletonBlock, { width: "30%", height: "2rem" }) }) }), _jsxs("div", { className: styles.solidFormViewShimmerLoadingWrapper, children: [_jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'field col-6', children: _jsxs("div", { className: 'flex align-items-center gap-2', children: [_jsx(SkeletonBlock, { width: "2rem", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "2rem", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "2rem", className: 'border-round-lg' })] }) }) }), _jsxs("div", { className: 'formgrid grid mt-4', children: [_jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] })] })] }), _jsx("div", { style: { borderTop: '1px solid var(--primary-light-color)' } }), _jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'formgrid grid', children: _jsx("div", { className: 'field col-6', children: _jsx("div", { className: 'flex align-items-center gap-2', children: _jsx(SkeletonBlock, { width: "8rem", height: '1.5rem', className: 'border-round-lg' }) }) }) }), _jsxs("div", { className: 'formgrid grid mt-4', children: [_jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field col-6 flex flex-column gap-4', children: [_jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-column gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'border-round-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] })] })] })] })] }));
 };
 //# sourceMappingURL=SolidFormViewShimmerLoading.js.map

package/dist/components/core/form/SolidFormViewShimmerLoading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormViewShimmerLoading.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewShimmerLoading.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport React from 'react'\nimport styles from './solidFormViewShimmerLoading.module.css'\nimport { Skeleton } from 'primereact/skeleton'\nexport const SolidFormViewShimmerLoading = () => {\n    return (\n        <div className='h-screen surface-0'>\n            <div className=\"page-header pl-2 \">\n                <div className='flex align-items-center gap-3'>\n                    <Skeleton width=\"50px\" height='1.4rem' className='md:h-1.3rem  border-round-lg '></Skeleton>\n                    <Skeleton width=\"300px\" className='border-round-lg hidden md:flex'></Skeleton>\n                </div>\n                <div className='flex align-items-center gap-3'>\n                    <Skeleton width=\"2.7rem\" height=\"1.6rem\" className=\"md:w-4rem md:h-2rem\" />\n                    <Skeleton width=\"2.7rem\" height=\"1.6rem\" className=\"md:w-4rem md:h-2rem\" />\n                    <Skeleton width=\"2.7rem\" height=\"1.6rem\" className=\"md:w-4rem md:h-2rem flex md:hidden\" />\n                </div>\n            </div>\n            <div className=\"page-header\" style={{ borderTop: '1px solid var(--primary-light-color)' }}>\n                <div className='w-full flex align-items-center justify-content-end'>\n                    <Skeleton width=\"30%\" height=\"2rem\"></Skeleton>\n                </div>\n            </div>\n            <div className={styles.solidFormViewShimmerLoadingWrapper}>\n                <div className='p-4'>\n                    <div className='formgrid grid'>\n                        <div className='field col-6'>\n                            <div className='flex align-items-center gap-2'>\n                                <Skeleton width=\"2rem\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"2rem\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"2rem\" className='border-round-lg'></Skeleton>\n                            </div>\n                        </div>\n                    </div>\n                    <div className='formgrid grid mt-4'>\n                        <div className='field col-6 flex flex-column gap-4'>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                        </div>\n                        <div className='field col-6 flex flex-column gap-4'>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div style={{ borderTop: '1px solid var(--primary-light-color)' }}></div>\n                <div className='p-4'>\n                    <div className='formgrid grid'>\n                        <div className='field col-6'>\n                            <div className='flex align-items-center gap-2'>\n                                <Skeleton width=\"8rem\" height='1.5rem' className='border-round-lg'></Skeleton>\n                            </div>\n                        </div>\n                    </div>\n                    <div className='formgrid grid mt-4'>\n                        <div className='field col-6 flex flex-column gap-4'>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                        </div>\n                        <div className='field col-6 flex flex-column gap-4'>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <Skeleton width=\"40%\" className='border-round-lg'></Skeleton>\n                                <Skeleton width=\"100%\" height=\"2rem\"></Skeleton>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}"]}
+{"version":3,"file":"SolidFormViewShimmerLoading.js","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormViewShimmerLoading.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport styles from './solidFormViewShimmerLoading.module.css'\n\nconst SkeletonBlock = ({ width, height, className }: { width?: string; height?: string; className?: string }) => (\n    <div className={`solid-skeleton ${className ?? \"\"}`} style={{ width, height }} />\n);\n\nexport const SolidFormViewShimmerLoading = () => {\n    return (\n        <div className='h-screen surface-0'>\n            <div className=\"page-header pl-2 \">\n                <div className='flex align-items-center gap-3'>\n                    <SkeletonBlock width=\"50px\" height='1.4rem' className='md:h-1.3rem  border-round-lg ' />\n                    <SkeletonBlock width=\"300px\" className='border-round-lg hidden md:flex' />\n                </div>\n                <div className='flex align-items-center gap-3'>\n                    <SkeletonBlock width=\"2.7rem\" height=\"1.6rem\" className=\"md:w-4rem md:h-2rem\" />\n                    <SkeletonBlock width=\"2.7rem\" height=\"1.6rem\" className=\"md:w-4rem md:h-2rem\" />\n                    <SkeletonBlock width=\"2.7rem\" height=\"1.6rem\" className=\"md:w-4rem md:h-2rem flex md:hidden\" />\n                </div>\n            </div>\n            <div className=\"page-header\" style={{ borderTop: '1px solid var(--primary-light-color)' }}>\n                <div className='w-full flex align-items-center justify-content-end'>\n                    <SkeletonBlock width=\"30%\" height=\"2rem\" />\n                </div>\n            </div>\n            <div className={styles.solidFormViewShimmerLoadingWrapper}>\n                <div className='p-4'>\n                    <div className='formgrid grid'>\n                        <div className='field col-6'>\n                            <div className='flex align-items-center gap-2'>\n                                <SkeletonBlock width=\"2rem\" className='border-round-lg' />\n                                <SkeletonBlock width=\"2rem\" className='border-round-lg' />\n                                <SkeletonBlock width=\"2rem\" className='border-round-lg' />\n                            </div>\n                        </div>\n                    </div>\n                    <div className='formgrid grid mt-4'>\n                        <div className='field col-6 flex flex-column gap-4'>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                        </div>\n                        <div className='field col-6 flex flex-column gap-4'>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div style={{ borderTop: '1px solid var(--primary-light-color)' }}></div>\n                <div className='p-4'>\n                    <div className='formgrid grid'>\n                        <div className='field col-6'>\n                            <div className='flex align-items-center gap-2'>\n                                <SkeletonBlock width=\"8rem\" height='1.5rem' className='border-round-lg' />\n                            </div>\n                        </div>\n                    </div>\n                    <div className='formgrid grid mt-4'>\n                        <div className='field col-6 flex flex-column gap-4'>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                        </div>\n                        <div className='field col-6 flex flex-column gap-4'>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-column gap-2'>\n                                <SkeletonBlock width=\"40%\" className='border-round-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}\n"]}

package/dist/components/core/form/SolidFormViewShimmerLoading.tsx

@@ -1,24 +1,27 @@
 
-import React from 'react'
 import styles from './solidFormViewShimmerLoading.module.css'
-import { Skeleton } from 'primereact/skeleton'
+
+const SkeletonBlock = ({ width, height, className }: { width?: string; height?: string; className?: string }) => (
+    <div className={`solid-skeleton ${className ?? ""}`} style={{ width, height }} />
+);
+
 export const SolidFormViewShimmerLoading = () => {
     return (
         <div className='h-screen surface-0'>
             <div className="page-header pl-2 ">
                 <div className='flex align-items-center gap-3'>
-                    <Skeleton width="50px" height='1.4rem' className='md:h-1.3rem  border-round-lg '></Skeleton>
-                    <Skeleton width="300px" className='border-round-lg hidden md:flex'></Skeleton>
+                    <SkeletonBlock width="50px" height='1.4rem' className='md:h-1.3rem  border-round-lg ' />
+                    <SkeletonBlock width="300px" className='border-round-lg hidden md:flex' />
                 </div>
                 <div className='flex align-items-center gap-3'>
-                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
-                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
-                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem flex md:hidden" />
+                    <SkeletonBlock width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
+                    <SkeletonBlock width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
+                    <SkeletonBlock width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem flex md:hidden" />
                 </div>
             </div>
             <div className="page-header" style={{ borderTop: '1px solid var(--primary-light-color)' }}>
                 <div className='w-full flex align-items-center justify-content-end'>
-                    <Skeleton width="30%" height="2rem"></Skeleton>
+                    <SkeletonBlock width="30%" height="2rem" />
                 </div>
             </div>
             <div className={styles.solidFormViewShimmerLoadingWrapper}>
@@ -26,39 +29,39 @@ export const SolidFormViewShimmerLoading = () => {
                     <div className='formgrid grid'>
                         <div className='field col-6'>
                             <div className='flex align-items-center gap-2'>
-                                <Skeleton width="2rem" className='border-round-lg'></Skeleton>
-                                <Skeleton width="2rem" className='border-round-lg'></Skeleton>
-                                <Skeleton width="2rem" className='border-round-lg'></Skeleton>
+                                <SkeletonBlock width="2rem" className='border-round-lg' />
+                                <SkeletonBlock width="2rem" className='border-round-lg' />
+                                <SkeletonBlock width="2rem" className='border-round-lg' />
                             </div>
                         </div>
                     </div>
                     <div className='formgrid grid mt-4'>
                         <div className='field col-6 flex flex-column gap-4'>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                         </div>
                         <div className='field col-6 flex flex-column gap-4'>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                         </div>
                     </div>
@@ -68,37 +71,37 @@ export const SolidFormViewShimmerLoading = () => {
                     <div className='formgrid grid'>
                         <div className='field col-6'>
                             <div className='flex align-items-center gap-2'>
-                                <Skeleton width="8rem" height='1.5rem' className='border-round-lg'></Skeleton>
+                                <SkeletonBlock width="8rem" height='1.5rem' className='border-round-lg' />
                             </div>
                         </div>
                     </div>
                     <div className='formgrid grid mt-4'>
                         <div className='field col-6 flex flex-column gap-4'>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                         </div>
                         <div className='field col-6 flex flex-column gap-4'>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                             <div className='flex flex-column gap-2'>
-                                <Skeleton width="40%" className='border-round-lg'></Skeleton>
-                                <Skeleton width="100%" height="2rem"></Skeleton>
+                                <SkeletonBlock width="40%" className='border-round-lg' />
+                                <SkeletonBlock width="100%" height="2rem" />
                             </div>
                         </div>
                     </div>
@@ -106,4 +109,4 @@ export const SolidFormViewShimmerLoading = () => {
             </div>
         </div>
     )
-}
+}

package/dist/components/core/form/fields/SolidBooleanField.d.ts

@@ -1,5 +1,5 @@
+import * as Yup from "yup";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
-import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 export declare class SolidBooleanField implements ISolidField {
     private fieldContext;

package/dist/components/core/form/fields/SolidBooleanField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidBooleanField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidBooleanField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAKzE,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAY3E,qBAAa,iBAAkB,YAAW,WAAW;IAEjD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAKnD,YAAY,IAAI,GAAG;IAoBnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA8B9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAyC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAcjE;AAID,eAAO,MAAM,4BAA4B,6BAA8B,yBAAyB,4CAuF/F,CAAA;AAED,eAAO,MAAM,uCAAuC,6BAA8B,yBAAyB,4CAwF1G,CAAA;AAED,eAAO,MAAM,qCAAqC,6BAA8B,yBAAyB,4CA2FxG,CAAA;AAED,eAAO,MAAM,4BAA4B,6BAA8B,yBAAyB,4CA0C/F,CAAA"}
+{"version":3,"file":"SolidBooleanField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidBooleanField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AA6B3E,qBAAa,iBAAkB,YAAW,WAAW;IAEjD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAKnD,YAAY,IAAI,GAAG;IAoBnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA8B9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAyC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAcjE;AAID,eAAO,MAAM,4BAA4B,6BAA8B,yBAAyB,4CAmE/F,CAAA;AAED,eAAO,MAAM,uCAAuC,6BAA8B,yBAAyB,4CAyE1G,CAAA;AAED,eAAO,MAAM,qCAAqC,6BAA8B,yBAAyB,4CAyFxG,CAAA;AAED,eAAO,MAAM,4BAA4B,6BAA8B,yBAAyB,4CAmC/F,CAAA"}