@solidxai/core-ui 0.1.9-beta.7 → 0.1.9

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

@@ -12,18 +12,22 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { hasAnyRole } from '../../../helpers/rolesHelper';
 import { useSession } from "../../../hooks/useSession";
+import { resolveButtonPresentation } from '../../../helpers/buttonPresentation';
 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, _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 _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var button = _a.button, params = _a.params, formik = _a.formik, solidFormViewMetaData = _a.solidFormViewMetaData, handleCustomButtonClick = _a.handleCustomButtonClick, formData = _a.formData, onActionComplete = _a.onActionComplete, _m = _a.variant, variant = _m === void 0 ? "default" : _m;
+    var _o = useSession(), session = _o.data, status = _o.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);
+    var presentation = resolveButtonPresentation(button === null || button === void 0 ? void 0 : button.attrs);
     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;
+    if (!presentation.showIcon && !presentation.showLabel)
+        return null;
     var handleClick = function () {
         var event = {
             action: button.attrs.action,
@@ -36,8 +40,18 @@ export function SolidFormViewNormalHeaderButton(_a) {
         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 })] }));
+        var iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;
+        var iconNode = presentation.showIcon
+            ? (iconMeta
+                ? _jsx(SolidIcon, { name: iconMeta.name, spin: iconMeta.spin, className: "solid-row-action-button-icon" })
+                : _jsx("i", { className: "".concat(presentation.icon, " solid-row-action-button-icon") }))
+            : null;
+        return (_jsxs("button", { type: "button", className: "solid-row-action-button ".concat(presentation.buttonClassName ? presentation.buttonClassName : ''), onClick: handleClick, title: presentation.tooltip, "aria-label": presentation.isIconOnly ? ((_h = (_f = presentation.tooltip) !== null && _f !== void 0 ? _f : (_g = button === null || button === void 0 ? void 0 : button.attrs) === null || _g === void 0 ? void 0 : _g.action) !== null && _h !== void 0 ? _h : "Action") : undefined, children: [presentation.iconPos === "left" ? iconNode : null, presentation.showLabel ? _jsx("span", { className: "solid-row-action-button-label", children: presentation.label }) : null, presentation.iconPos === "right" ? iconNode : null] }));
     }
-    return (_jsx("div", { children: _jsx(SolidButton, __assign({ 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 : '') }, button.attrs, { 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 })) }));
+    return (_jsx("div", { children: _jsx(SolidButton, __assign({ type: "button", className: [
+                "w-full text-left gap-2",
+                presentation.isIconOnly ? "solid-icon-button" : "",
+                presentation.buttonClassName ? presentation.buttonClassName : ""
+            ].filter(Boolean).join(" ") }, button.attrs, { label: presentation.label, size: "sm", iconPos: presentation.iconPos, icon: presentation.icon, tooltip: presentation.tooltip, "aria-label": presentation.isIconOnly ? ((_l = (_j = presentation.tooltip) !== null && _j !== void 0 ? _j : (_k = button === null || button === void 0 ? void 0 : button.attrs) === null || _k === void 0 ? void 0 : _k.action) !== null && _l !== void 0 ? _l : "Action") : undefined, 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":"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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                {...button.attrs}\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"]}
+{"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 { resolveButtonPresentation } from '../../../helpers/buttonPresentation';\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    const presentation = resolveButtonPresentation(button?.attrs);\n\n    if (!hasRole) return null;\n    if (button?.attrs?.visible == false) return null\n    if (!presentation.showIcon && !presentation.showLabel) 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        const iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;\n        const iconNode = presentation.showIcon\n            ? (iconMeta\n                ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} className=\"solid-row-action-button-icon\" />\n                : <i className={`${presentation.icon} solid-row-action-button-icon`} />)\n            : null;\n        return (\n            <button\n                type=\"button\"\n                className={`solid-row-action-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}\n                onClick={handleClick}\n                title={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n            >\n                {presentation.iconPos === \"left\" ? iconNode : null}\n                {presentation.showLabel ? <span className=\"solid-row-action-button-label\">{presentation.label}</span> : null}\n                {presentation.iconPos === \"right\" ? iconNode : null}\n            </button>\n        );\n    }\n\n    return (\n        <div>\n            <SolidButton\n                type=\"button\"\n                className={[\n                    \"w-full text-left gap-2\",\n                    presentation.isIconOnly ? \"solid-icon-button\" : \"\",\n                    presentation.buttonClassName ? presentation.buttonClassName : \"\"\n                ].filter(Boolean).join(\" \")}\n                {...button.attrs}\n                label={presentation.label}\n                size=\"sm\"\n                iconPos={presentation.iconPos}\n                icon={presentation.icon}\n                tooltip={presentation.tooltip}\n                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? \"Action\") : undefined}\n                onClick={handleClick}\n            />\n        </div>\n    );\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { hasAnyRole } from '../../../helpers/rolesHelper';
 import { useSession } from "../../../hooks/useSession";
+import { resolveButtonPresentation } from '../../../helpers/buttonPresentation';
 import { SolidButton } from '../../shad-cn-ui';
 import { SolidIcon, parseSolidIconMeta } from "../../shad-cn-ui/SolidIcon";
 
@@ -29,9 +30,11 @@ export function SolidFormViewNormalHeaderButton({
     const user = session?.user;
 
     const hasRole = !button?.attrs?.roles || button?.attrs?.roles.length === 0 ? true : hasAnyRole(user?.roles, button?.attrs?.roles);
+    const presentation = resolveButtonPresentation(button?.attrs);
 
     if (!hasRole) return null;
     if (button?.attrs?.visible == false) return null
+    if (!presentation.showIcon && !presentation.showLabel) return null;
     const handleClick = () => {
         const event = {
             action: button.attrs.action,
@@ -45,16 +48,23 @@ export function SolidFormViewNormalHeaderButton({
     };
 
     if (variant === "menu") {
+        const iconMeta = presentation.icon ? parseSolidIconMeta(presentation.icon) : undefined;
+        const iconNode = presentation.showIcon
+            ? (iconMeta
+                ? <SolidIcon name={iconMeta.name} spin={iconMeta.spin} className="solid-row-action-button-icon" />
+                : <i className={`${presentation.icon} solid-row-action-button-icon`} />)
+            : null;
         return (
             <button
                 type="button"
-                className={`solid-row-action-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+                className={`solid-row-action-button ${presentation.buttonClassName ? presentation.buttonClassName : ''}`}
                 onClick={handleClick}
+                title={presentation.tooltip}
+                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? "Action") : undefined}
             >
-                {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>
+                {presentation.iconPos === "left" ? iconNode : null}
+                {presentation.showLabel ? <span className="solid-row-action-button-label">{presentation.label}</span> : null}
+                {presentation.iconPos === "right" ? iconNode : null}
             </button>
         );
     }
@@ -63,12 +73,18 @@ export function SolidFormViewNormalHeaderButton({
         <div>
             <SolidButton
                 type="button"
-                className={`w-full text-left gap-2 solid-icon-button ${button?.attrs?.className ? button?.attrs?.className : ''}`}
+                className={[
+                    "w-full text-left gap-2",
+                    presentation.isIconOnly ? "solid-icon-button" : "",
+                    presentation.buttonClassName ? presentation.buttonClassName : ""
+                ].filter(Boolean).join(" ")}
                 {...button.attrs}
-                label={button.attrs.label}
+                label={presentation.label}
                 size="sm"
-                iconPos="left"
-                icon={button?.attrs?.icon ? button?.attrs?.icon : ""}
+                iconPos={presentation.iconPos}
+                icon={presentation.icon}
+                tooltip={presentation.tooltip}
+                aria-label={presentation.isIconOnly ? (presentation.tooltip ?? button?.attrs?.action ?? "Action") : undefined}
                 onClick={handleClick}
             />
         </div>

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

@@ -5,6 +5,6 @@ var SkeletonBlock = function (_a) {
     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(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" })] })] })] })] })] })] }));
+    return (_jsxs("div", { className: 'h-screen bg-[var(--surface-0)]', children: [_jsxs("div", { className: "page-header pl-2 ", children: [_jsxs("div", { className: 'flex items-center gap-4', children: [_jsx(SkeletonBlock, { width: "50px", height: '1.4rem', className: 'rounded-lg md:h-1.3rem' }), _jsx(SkeletonBlock, { width: "300px", className: 'hidden rounded-lg md:flex' })] }), _jsxs("div", { className: 'flex items-center gap-4', 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 items-center justify-end', children: _jsx(SkeletonBlock, { width: "30%", height: "2rem" }) }) }), _jsxs("div", { className: styles.solidFormViewShimmerLoadingWrapper, children: [_jsxs("div", { className: 'p-4', children: [_jsx("div", { className: 'flex flex-wrap -mx-2 -mt-2', children: _jsx("div", { className: 'field w-1/2 px-2 pt-2', children: _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx(SkeletonBlock, { width: "2rem", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "2rem", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "2rem", className: 'rounded-lg' })] }) }) }), _jsxs("div", { className: 'flex flex-wrap -mx-2 -mt-2 mt-6', children: [_jsxs("div", { className: 'field w-1/2 px-2 pt-2 flex flex-col gap-6', children: [_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field w-1/2 px-2 pt-2 flex flex-col gap-6', children: [_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-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: 'flex flex-wrap -mx-2 -mt-2', children: _jsx("div", { className: 'field w-1/2 px-2 pt-2', children: _jsx("div", { className: 'flex items-center gap-2', children: _jsx(SkeletonBlock, { width: "8rem", height: '1.5rem', className: 'rounded-lg' }) }) }) }), _jsxs("div", { className: 'flex flex-wrap -mx-2 -mt-2 mt-6', children: [_jsxs("div", { className: 'field w-1/2 px-2 pt-2 flex flex-col gap-6', children: [_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] })] }), _jsxs("div", { className: 'field w-1/2 px-2 pt-2 flex flex-col gap-6', children: [_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-lg' }), _jsx(SkeletonBlock, { width: "100%", height: "2rem" })] }), _jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(SkeletonBlock, { width: "40%", className: 'rounded-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 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"]}
+{"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 bg-[var(--surface-0)]'>\n            <div className=\"page-header pl-2 \">\n                <div className='flex items-center gap-4'>\n                    <SkeletonBlock width=\"50px\" height='1.4rem' className='rounded-lg md:h-1.3rem' />\n                    <SkeletonBlock width=\"300px\" className='hidden rounded-lg md:flex' />\n                </div>\n                <div className='flex items-center gap-4'>\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 items-center justify-end'>\n                    <SkeletonBlock width=\"30%\" height=\"2rem\" />\n                </div>\n            </div>\n            <div className={styles.solidFormViewShimmerLoadingWrapper}>\n                <div className='p-4'>\n                    <div className='flex flex-wrap -mx-2 -mt-2'>\n                        <div className='field w-1/2 px-2 pt-2'>\n                            <div className='flex items-center gap-2'>\n                                <SkeletonBlock width=\"2rem\" className='rounded-lg' />\n                                <SkeletonBlock width=\"2rem\" className='rounded-lg' />\n                                <SkeletonBlock width=\"2rem\" className='rounded-lg' />\n                            </div>\n                        </div>\n                    </div>\n                    <div className='flex flex-wrap -mx-2 -mt-2 mt-6'>\n                        <div className='field w-1/2 px-2 pt-2 flex flex-col gap-6'>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                        </div>\n                        <div className='field w-1/2 px-2 pt-2 flex flex-col gap-6'>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-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='flex flex-wrap -mx-2 -mt-2'>\n                        <div className='field w-1/2 px-2 pt-2'>\n                            <div className='flex items-center gap-2'>\n                                <SkeletonBlock width=\"8rem\" height='1.5rem' className='rounded-lg' />\n                            </div>\n                        </div>\n                    </div>\n                    <div className='flex flex-wrap -mx-2 -mt-2 mt-6'>\n                        <div className='field w-1/2 px-2 pt-2 flex flex-col gap-6'>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                        </div>\n                        <div className='field w-1/2 px-2 pt-2 flex flex-col gap-6'>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-lg' />\n                                <SkeletonBlock width=\"100%\" height=\"2rem\" />\n                            </div>\n                            <div className='flex flex-col gap-2'>\n                                <SkeletonBlock width=\"40%\" className='rounded-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

@@ -7,60 +7,60 @@ const SkeletonBlock = ({ width, height, className }: { width?: string; height?:
 
 export const SolidFormViewShimmerLoading = () => {
     return (
-        <div className='h-screen surface-0'>
+        <div className='h-screen bg-[var(--surface-0)]'>
             <div className="page-header pl-2 ">
-                <div className='flex align-items-center gap-3'>
-                    <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 className='flex items-center gap-4'>
+                    <SkeletonBlock width="50px" height='1.4rem' className='rounded-lg md:h-1.3rem' />
+                    <SkeletonBlock width="300px" className='hidden rounded-lg md:flex' />
                 </div>
-                <div className='flex align-items-center gap-3'>
+                <div className='flex items-center gap-4'>
                     <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'>
+                <div className='w-full flex items-center justify-end'>
                     <SkeletonBlock width="30%" height="2rem" />
                 </div>
             </div>
             <div className={styles.solidFormViewShimmerLoadingWrapper}>
                 <div className='p-4'>
-                    <div className='formgrid grid'>
-                        <div className='field col-6'>
-                            <div className='flex align-items-center gap-2'>
-                                <SkeletonBlock width="2rem" className='border-round-lg' />
-                                <SkeletonBlock width="2rem" className='border-round-lg' />
-                                <SkeletonBlock width="2rem" className='border-round-lg' />
+                    <div className='flex flex-wrap -mx-2 -mt-2'>
+                        <div className='field w-1/2 px-2 pt-2'>
+                            <div className='flex items-center gap-2'>
+                                <SkeletonBlock width="2rem" className='rounded-lg' />
+                                <SkeletonBlock width="2rem" className='rounded-lg' />
+                                <SkeletonBlock width="2rem" className='rounded-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'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                    <div className='flex flex-wrap -mx-2 -mt-2 mt-6'>
+                        <div className='field w-1/2 px-2 pt-2 flex flex-col gap-6'>
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
-                            <div className='flex flex-column gap-2'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
-                            <div className='flex flex-column gap-2'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-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'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                        <div className='field w-1/2 px-2 pt-2 flex flex-col gap-6'>
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
-                            <div className='flex flex-column gap-2'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
-                            <div className='flex flex-column gap-2'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
                         </div>
@@ -68,39 +68,39 @@ export const SolidFormViewShimmerLoading = () => {
                 </div>
                 <div style={{ borderTop: '1px solid var(--primary-light-color)' }}></div>
                 <div className='p-4'>
-                    <div className='formgrid grid'>
-                        <div className='field col-6'>
-                            <div className='flex align-items-center gap-2'>
-                                <SkeletonBlock width="8rem" height='1.5rem' className='border-round-lg' />
+                    <div className='flex flex-wrap -mx-2 -mt-2'>
+                        <div className='field w-1/2 px-2 pt-2'>
+                            <div className='flex items-center gap-2'>
+                                <SkeletonBlock width="8rem" height='1.5rem' className='rounded-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'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                    <div className='flex flex-wrap -mx-2 -mt-2 mt-6'>
+                        <div className='field w-1/2 px-2 pt-2 flex flex-col gap-6'>
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
-                            <div className='flex flex-column gap-2'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
-                            <div className='flex flex-column gap-2'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-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'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                        <div className='field w-1/2 px-2 pt-2 flex flex-col gap-6'>
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
-                            <div className='flex flex-column gap-2'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
-                            <div className='flex flex-column gap-2'>
-                                <SkeletonBlock width="40%" className='border-round-lg' />
+                            <div className='flex flex-col gap-2'>
+                                <SkeletonBlock width="40%" className='rounded-lg' />
                                 <SkeletonBlock width="100%" height="2rem" />
                             </div>
                         </div>