@lowdefy/blocks-loaders 4.7.2 → 5.0.0

package/dist/blocks/ProgressBar/ProgressBar.js

@@ -1,5 +1,5 @@
 /*
-  Copyright 2020-2021 Lowdefy, Inc
+  Copyright 2020-2026 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -13,34 +13,28 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const ProgressBar = ({ blockId, methods, style, properties })=>{
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import cssStyles from './style.module.css';
+const ProgressBar = ({ blockId, classNames, properties, styles })=>{
     const { progress = 30, height = 4, transitionTime = 1000, // loaderSpeed = 500,
     // waitingTime = 1000,
     shadow = true } = properties;
     return /*#__PURE__*/ React.createElement("div", {
         id: blockId,
-        className: methods.makeCssClass(style),
+        className: classNames?.element,
         style: {
+            ...styles?.element,
             '--height': `${height}px`,
             '--progress': `${progress}%`,
             '--transition': `all ${transitionTime}ms ease`,
             '--opacity': progress < 100 ? 1 : 0
         }
     }, /*#__PURE__*/ React.createElement("div", {
-        className: "progress-bar-container"
+        className: cssStyles['progress-bar-container']
     }, /*#__PURE__*/ React.createElement("div", {
-        className: "progress-bar-loader"
+        className: cssStyles['progress-bar-loader']
     }, shadow ? /*#__PURE__*/ React.createElement("div", {
-        className: "progress-bar-shadow"
+        className: cssStyles['progress-bar-shadow']
     }) : null)));
 };
-ProgressBar.defaultProps = blockDefaultProps;
-ProgressBar.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/ProgressBar/style.less'
-    ]
-};
-export default ProgressBar;
+export default withBlockDefaults(ProgressBar);

package/dist/blocks/ProgressBar/{schema.js → meta.js}

@@ -13,18 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The ProgressBar element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
-                type: 'object',
-                description: 'Css style object to apply to the skeleton.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             height: {
                 type: [
                     'number',
@@ -40,10 +38,5 @@
                 description: 'Width of the skeleton.'
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {}
     }
 };

package/dist/blocks/ProgressBar/style.module.css

@@ -0,0 +1,47 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+@layer components {
+  .progress-bar-loader {
+    height: 100%;
+    width: var(--progress); /* initial 0% */
+    background: var(--ant-color-primary);
+    transition: var(--transition);
+    opacity: var(--opacity);
+  }
+
+  .progress-bar-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: var(--height);
+    z-index: 99999999999;
+    width: 100%;
+  }
+
+  .progress-bar-shadow {
+    box-shadow:
+      0 0 10px var(--ant-color-primary),
+      0 0 10px var(--ant-color-primary);
+    width: 20px;
+    opacity: 1;
+    position: absolute;
+    height: 100%;
+    transition: var(--transition);
+    transform: rotate(3deg) translate(0px, -4px);
+    left: calc(var(--progress) - 20px); /* initial -10rem */
+  }
+}

package/dist/blocks/Skeleton/Skeleton.js

@@ -13,22 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const Skeleton = ({ properties, methods })=>{
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import cssStyles from './style.module.css';
+const Skeleton = ({ classNames, properties, styles })=>{
     return /*#__PURE__*/ React.createElement("div", {
-        className: 'skeleton ' + methods.makeCssClass(properties.style),
+        className: cssStyles.skeleton + (classNames?.element ? ' ' + classNames.element : ''),
         style: {
             width: properties.width ?? '100%',
-            height: properties.height ?? '100%'
+            height: properties.height ?? '100%',
+            ...styles?.element
         }
     });
 };
-Skeleton.defaultProps = blockDefaultProps;
-Skeleton.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Skeleton/style.less'
-    ]
-};
-export default Skeleton;
+export default withBlockDefaults(Skeleton);

package/dist/blocks/Skeleton/{schema.js → meta.js}

@@ -13,18 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Skeleton element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
-                type: 'object',
-                description: 'Css style object to apply to the skeleton.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             height: {
                 type: [
                     'number',
@@ -46,10 +44,5 @@
                 }
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {}
     }
 };

package/dist/blocks/Skeleton/{style.less → style.module.css}

@@ -14,32 +14,38 @@
   limitations under the License.
 */
 
-.skeleton {
-  position: relative;
-  overflow: hidden;
-  background: #f1f1f1;
-}
-
-.skeleton::before {
-  content: '';
-  display: block;
-  position: absolute;
-  left: -100%;
-  max-width: 600px;
-  top: 0;
-  height: 200%;
-  width: 100%;
-  background: linear-gradient(to right, transparent 0%, #eaeaea 50%, transparent 100%);
-  background: -webkit-linear-gradient(to right, transparent 0%, #eaeaea 50%, transparent 100%);
-  animation: load 1.8s infinite;
-  /* transform: rotate(45deg); */
-}
+@layer components {
+  .skeleton {
+    position: relative;
+    overflow: hidden;
+    background: var(--ant-color-fill-tertiary);
+  }
 
-@keyframes load {
-  from {
+  .skeleton::before {
+    content: '';
+    display: block;
+    position: absolute;
     left: -100%;
+    max-width: 600px;
+    top: 0;
+    height: 200%;
+    width: 100%;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--ant-color-fill-secondary) 50%,
+      transparent 100%
+    );
+    animation: load 1.8s infinite;
+    /* transform: rotate(45deg); */
   }
-  to {
-    left: 100%;
+
+  @keyframes load {
+    from {
+      left: -100%;
+    }
+    to {
+      left: 100%;
+    }
   }
 }

package/dist/blocks/SkeletonAvatar/SkeletonAvatar.js

@@ -14,9 +14,9 @@
   limitations under the License.
 */ import React from 'react';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Skeleton from '../Skeleton/Skeleton.js';
-const SkeletonAvatar = ({ properties, methods })=>{
+const SkeletonAvatar = ({ classNames, properties, styles })=>{
     let size = properties.size ?? 32;
     if (type.isString(size)) {
         switch(properties.size){
@@ -31,25 +31,17 @@ const SkeletonAvatar = ({ properties, methods })=>{
         }
     }
     return /*#__PURE__*/ React.createElement(Skeleton, {
-        methods: methods,
+        classNames: classNames,
+        styles: {
+            element: {
+                borderRadius: properties.shape === 'square' ? '0' : size / 2,
+                ...styles?.element
+            }
+        },
         properties: {
-            style: {
-                ...{
-                    borderRadius: properties.shape === 'square' ? '0' : size / 2
-                },
-                ...properties.style || {}
-            },
             width: size,
             height: size
         }
     });
 };
-SkeletonAvatar.defaultProps = blockDefaultProps;
-SkeletonAvatar.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/SkeletonAvatar/style.less'
-    ]
-};
-export default SkeletonAvatar;
+export default withBlockDefaults(SkeletonAvatar);

package/dist/blocks/SkeletonAvatar/{schema.js → meta.js}

@@ -13,18 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The SkeletonAvatar element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
-                type: 'object',
-                description: 'Css style object to apply to the skeleton.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             size: {
                 type: 'string',
                 default: 'medium',
@@ -45,10 +43,5 @@
                 ]
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {}
     }
 };

package/dist/blocks/SkeletonButton/SkeletonButton.js

@@ -13,9 +13,9 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Skeleton from '../Skeleton/Skeleton.js';
-const SkeletonButton = ({ properties, methods })=>{
+const SkeletonButton = ({ classNames, properties, styles })=>{
     let height;
     switch(properties.size){
         case 'small':
@@ -28,25 +28,17 @@ const SkeletonButton = ({ properties, methods })=>{
             height = 32;
     }
     return /*#__PURE__*/ React.createElement(Skeleton, {
-        methods: methods,
+        classNames: classNames,
+        styles: {
+            element: {
+                borderRadius: properties.shape === 'round' && height / 2,
+                ...styles?.element
+            }
+        },
         properties: {
-            style: {
-                ...{
-                    borderRadius: properties.shape === 'round' && height / 2
-                },
-                ...properties.style || {}
-            },
             width: properties.width ?? '100%',
             height
         }
     });
 };
-SkeletonButton.defaultProps = blockDefaultProps;
-SkeletonButton.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/SkeletonButton/style.less'
-    ]
-};
-export default SkeletonButton;
+export default withBlockDefaults(SkeletonButton);

package/dist/blocks/SkeletonButton/{schema.js → meta.js}

@@ -13,18 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The SkeletonButton element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
-                type: 'object',
-                description: 'Css style object to apply to the skeleton.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             size: {
                 type: 'string',
                 default: 'medium',
@@ -46,10 +44,5 @@
                 }
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {}
     }
 };

package/dist/blocks/SkeletonInput/SkeletonInput.js

@@ -13,9 +13,9 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Skeleton from '../Skeleton/Skeleton.js';
-const SkeletonInput = ({ properties, methods })=>{
+const SkeletonInput = ({ classNames, properties, styles })=>{
     let inputHeight;
     switch(properties.size){
         case 'small':
@@ -27,33 +27,27 @@ const SkeletonInput = ({ properties, methods })=>{
         default:
             inputHeight = 32;
     }
-    return /*#__PURE__*/ React.createElement("div", null, properties.label !== false && /*#__PURE__*/ React.createElement(Skeleton, {
-        methods: methods,
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames?.element,
+        style: styles?.element
+    }, properties.label !== false && /*#__PURE__*/ React.createElement(Skeleton, {
+        styles: {
+            element: {
+                marginBottom: 10
+            }
+        },
         properties: {
             width: properties.labelWidth ?? properties.width ?? '30%',
-            height: properties.labelHeight ?? 20,
-            style: {
-                ...{
-                    marginBottom: 10
-                },
-                ...properties.labelStyle || {}
-            }
+            height: properties.labelHeight ?? 20
         }
     }), /*#__PURE__*/ React.createElement(Skeleton, {
-        methods: methods,
+        styles: {
+            element: styles?.input ?? {}
+        },
         properties: {
             width: properties.width ?? '100%',
-            height: properties.inputHeight ?? inputHeight,
-            style: properties.inputStyle || {}
+            height: properties.inputHeight ?? inputHeight
         }
     }));
 };
-SkeletonInput.defaultProps = blockDefaultProps;
-SkeletonInput.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/SkeletonInput/style.less'
-    ]
-};
-export default SkeletonInput;
+export default withBlockDefaults(SkeletonInput);

package/dist/blocks/SkeletonInput/{schema.js → meta.js}

@@ -13,25 +13,17 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The outer container.',
+        input: 'The input skeleton.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            labelStyle: {
-                type: 'object',
-                description: 'Css style object to apply to the label skeleton.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
-            inputStyle: {
-                type: 'object',
-                description: 'Css style object to apply to the input skeleton.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             size: {
                 type: 'string',
                 default: 'medium',
@@ -83,10 +75,5 @@
                 }
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {}
     }
 };

package/dist/blocks/SkeletonParagraph/SkeletonParagraph.js

@@ -13,37 +13,29 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Skeleton from '../Skeleton/Skeleton.js';
-const SkeletonParagraph = ({ properties, methods })=>{
+const SkeletonParagraph = ({ classNames, properties, styles })=>{
     const lines = [
         ...Array(properties.lines ?? 4).keys()
     ];
     return /*#__PURE__*/ React.createElement("div", {
+        className: classNames?.element,
         style: {
-            width: properties.width ?? '100%'
+            width: properties.width ?? '100%',
+            ...styles?.element
         }
     }, lines.map((key)=>/*#__PURE__*/ React.createElement(Skeleton, {
             key: key,
-            methods: methods,
+            styles: {
+                element: {
+                    marginBottom: '1rem'
+                }
+            },
             properties: {
-                ...{
-                    height: '1.25rem',
-                    width: key === lines.length - 1 && key !== 0 ? '40%' : '100%',
-                    style: {
-                        marginBottom: '1rem'
-                    }
-                },
-                ...properties.style || {}
+                height: '1.25rem',
+                width: key === lines.length - 1 && key !== 0 ? '40%' : '100%'
             }
         })));
 };
-SkeletonParagraph.defaultProps = blockDefaultProps;
-SkeletonParagraph.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/SkeletonParagraph/style.less'
-    ]
-};
-export default SkeletonParagraph;
+export default withBlockDefaults(SkeletonParagraph);

package/dist/blocks/SkeletonParagraph/{schema.js → meta.js}

@@ -13,18 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The SkeletonParagraph element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
-                type: 'object',
-                description: 'Css style object to apply to the skeleton.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             lines: {
                 type: 'number',
                 default: 4,
@@ -41,10 +39,5 @@
                 }
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {}
     }
 };

package/dist/blocks/Spinner/Spinner.js

@@ -14,8 +14,9 @@
   limitations under the License.
 */ import React from 'react';
 import { type } from '@lowdefy/helpers';
-import { blockDefaultProps } from '@lowdefy/block-utils';
-const Spinner = ({ properties, methods })=>{
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import cssStyles from './style.module.css';
+const Spinner = ({ classNames, properties, styles })=>{
     let size = properties.size ?? 20;
     if (type.isString(size)) {
         switch(properties.size){
@@ -30,15 +31,15 @@ const Spinner = ({ properties, methods })=>{
         }
     }
     return /*#__PURE__*/ React.createElement("span", {
-        className: methods.makeCssClass([
-            {
-                height: size,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center'
-            },
-            properties.style
-        ])
+        className: classNames?.element,
+        style: {
+            height: size,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'var(--ant-color-text-quaternary)',
+            ...styles?.element
+        }
     }, /*#__PURE__*/ React.createElement("svg", {
         viewBox: "0 0 1024 1024",
         focusable: "false",
@@ -47,18 +48,10 @@ const Spinner = ({ properties, methods })=>{
         height: size,
         fill: "currentColor",
         "aria-hidden": "true",
-        className: "spinner"
+        className: cssStyles.spinner
     }, /*#__PURE__*/ React.createElement("path", {
-        fill: "#bfbfbf",
+        fill: "currentColor",
         d: "M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
     })));
 };
-Spinner.defaultProps = blockDefaultProps;
-Spinner.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Spinner/style.less'
-    ]
-};
-export default Spinner;
+export default withBlockDefaults(Spinner);

package/dist/blocks/Spinner/{schema.js → meta.js}

@@ -13,18 +13,16 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Spinner element.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            style: {
-                type: 'object',
-                description: 'Css style object to apply to the icon.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             size: {
                 type: 'string',
                 description: 'Size of the icon spinner.',
@@ -35,10 +33,5 @@
                 ]
             }
         }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {}
     }
 };

package/dist/blocks/Spinner/{style.less → style.module.css}

@@ -14,16 +14,18 @@
   limitations under the License.
 */
 
-.spinner {
-  animation: spin-animation 1s infinite linear;
-  display: inline-block;
-}
-
-@keyframes spin-animation {
-  0% {
-    transform: rotate(0deg);
+@layer components {
+  .spinner {
+    animation: spin-animation 1s infinite linear;
+    display: inline-block;
   }
-  100% {
-    transform: rotate(359deg);
+
+  @keyframes spin-animation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(359deg);
+    }
   }
 }

package/dist/{schemas.js → metas.js}

@@ -12,10 +12,10 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ export { default as ProgressBar } from './blocks/ProgressBar/schema.js';
-export { default as Skeleton } from './blocks/Skeleton/schema.js';
-export { default as SkeletonAvatar } from './blocks/SkeletonAvatar/schema.js';
-export { default as SkeletonButton } from './blocks/SkeletonButton/schema.js';
-export { default as SkeletonInput } from './blocks/SkeletonInput/schema.js';
-export { default as SkeletonParagraph } from './blocks/SkeletonParagraph/schema.js';
-export { default as Spinner } from './blocks/Spinner/schema.js';
+*/ export { default as ProgressBar } from './blocks/ProgressBar/meta.js';
+export { default as Skeleton } from './blocks/Skeleton/meta.js';
+export { default as SkeletonAvatar } from './blocks/SkeletonAvatar/meta.js';
+export { default as SkeletonButton } from './blocks/SkeletonButton/meta.js';
+export { default as SkeletonInput } from './blocks/SkeletonInput/meta.js';
+export { default as SkeletonParagraph } from './blocks/SkeletonParagraph/meta.js';
+export { default as Spinner } from './blocks/Spinner/meta.js';

package/dist/types.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/namespace */ /*
+/*
   Copyright 2020-2026 Lowdefy, Inc
 
   Licensed under the Apache License, Version 2.0 (the "License");
@@ -12,18 +12,6 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ import * as blocks from './blocks.js';
-const icons = {};
-const styles = {};
-Object.keys(blocks).forEach((block)=>{
-    icons[block] = blocks[block].meta.icons ?? [];
-    styles[block] = blocks[block].meta.styles ?? [];
-});
-export default {
-    blocks: Object.keys(blocks),
-    icons,
-    styles: {
-        default: [],
-        ...styles
-    }
-};
+*/ import { extractBlockTypes } from '@lowdefy/block-utils';
+import * as metas from './metas.js';
+export default extractBlockTypes(metas);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-loaders",
-  "version": "4.7.2",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "description": "Lowdefy loader blocks.",
   "homepage": "https://lowdefy.com",
@@ -34,32 +34,34 @@
   "exports": {
     "./*": "./dist/*",
     "./blocks": "./dist/blocks.js",
+    "./metas": "./dist/metas.js",
     "./e2e": "./dist/e2e.js",
-    "./schemas": "./dist/schemas.js",
     "./types": "./dist/types.js"
   },
   "files": [
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "4.7.2",
-    "@lowdefy/helpers": "4.7.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@lowdefy/block-utils": "5.0.0",
+    "@lowdefy/helpers": "5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "4.7.2",
-    "@lowdefy/e2e-utils": "4.7.2",
+    "@lowdefy/block-dev-e2e": "5.0.0",
+    "@lowdefy/e2e-utils": "5.0.0",
     "@playwright/test": "1.50.1",
-    "@swc/cli": "0.1.63",
-    "@swc/core": "1.3.99",
+    "@swc/cli": "0.8.0",
+    "@swc/core": "1.15.18",
     "copyfiles": "2.4.1"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "swc src --out-dir dist --config-file ../../../../.swcrc --delete-dir-on-start && pnpm copyfiles",
+    "build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
     "clean": "rm -rf dist",
     "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.yaml\" -e \"./src/**/*.snap\"",
     "e2e": "playwright test --config e2e/playwright.config.js",

package/dist/blocks/ProgressBar/schema.json

@@ -1,29 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "style": {
-        "type": "object",
-        "description": "Css style object to apply to the skeleton.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "height": {
-        "type": ["number", "string"],
-        "description": "Height of the skeleton."
-      },
-      "width": {
-        "type": ["number", "string"],
-        "description": "Width of the skeleton."
-      }
-    }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {}
-  }
-}

package/dist/blocks/ProgressBar/style.less

@@ -1,43 +0,0 @@
-/*
-  Copyright 2020-2021 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/
-
-.progress-bar-loader {
-  height: 100%;
-  width: var(--progress); // initial 0%
-  background: @primary-color;
-  transition: var(--transition);
-  opacity: var(--opacity);
-}
-
-.progress-bar-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: var(--height);
-  z-index: 99999999999;
-  width: 100%;
-}
-
-.progress-bar-shadow {
-  box-shadow: 0 0 10px @primary-color, 0 0 10px @primary-color;
-  width: 20px;
-  opacity: 1;
-  position: absolute;
-  height: 100%;
-  transition: var(--transition);
-  transform: rotate(3deg) translate(0px, -4px);
-  left: calc(var(--progress) - 20px); // initial -10rem
-}

package/dist/blocks/Skeleton/schema.json

@@ -1,35 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "style": {
-        "type": "object",
-        "description": "Css style object to apply to the skeleton.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "height": {
-        "type": ["number", "string"],
-        "description": "Height of the skeleton.",
-        "docs": {
-          "displayType": "string"
-        }
-      },
-      "width": {
-        "type": ["number", "string"],
-        "description": "Width of the skeleton.",
-        "docs": {
-          "displayType": "string"
-        }
-      }
-    }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {}
-  }
-}

package/dist/blocks/SkeletonAvatar/schema.json

@@ -1,33 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "style": {
-        "type": "object",
-        "description": "Css style object to apply to the skeleton.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "size": {
-        "type": "string",
-        "default": "medium",
-        "description": "Size of the skeleton.",
-        "enum": ["small", "medium", "large"]
-      },
-      "shape": {
-        "type": "string",
-        "default": "round",
-        "description": "Shape of the skeleton.",
-        "enum": ["square", "round"]
-      }
-    }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {}
-  }
-}

package/dist/blocks/SkeletonAvatar/style.less

@@ -1,17 +0,0 @@
-/*
-  Copyright 2020-2026 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/
-
-@import '../Skeleton/style.less';

package/dist/blocks/SkeletonButton/schema.json

@@ -1,34 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "style": {
-        "type": "object",
-        "description": "Css style object to apply to the skeleton.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "size": {
-        "type": "string",
-        "default": "medium",
-        "description": "Size of the skeleton.",
-        "enum": ["small", "medium", "large"]
-      },
-      "width": {
-        "type": ["number", "string"],
-        "description": "Width of the skeleton.",
-        "docs": {
-          "displayType": "string"
-        }
-      }
-    }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {}
-  }
-}

package/dist/blocks/SkeletonButton/style.less

@@ -1,17 +0,0 @@
-/*
-  Copyright 2020-2026 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/
-
-@import '../Skeleton/style.less';

package/dist/blocks/SkeletonInput/schema.json

@@ -1,62 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "labelStyle": {
-        "type": "object",
-        "description": "Css style object to apply to the label skeleton.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "inputStyle": {
-        "type": "object",
-        "description": "Css style object to apply to the input skeleton.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "size": {
-        "type": "string",
-        "default": "medium",
-        "description": "Size of the skeleton.",
-        "enum": ["small", "medium", "large"]
-      },
-      "width": {
-        "type": ["number", "string"],
-        "description": "Width of the skeleton.",
-        "docs": {
-          "displayType": "string"
-        }
-      },
-      "labelHeight": {
-        "type": ["number", "string"],
-        "description": "Height of the skeleton.",
-        "docs": {
-          "displayType": "string"
-        }
-      },
-      "labelWidth": {
-        "type": ["number", "string"],
-        "description": "Width of the skeleton.",
-        "docs": {
-          "displayType": "string"
-        }
-      },
-      "inputHeight": {
-        "type": ["number", "string"],
-        "description": "Height of the skeleton.",
-        "docs": {
-          "displayType": "string"
-        }
-      }
-    }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {}
-  }
-}

package/dist/blocks/SkeletonInput/style.less

@@ -1,17 +0,0 @@
-/*
-  Copyright 2020-2026 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/
-
-@import '../Skeleton/style.less';

package/dist/blocks/SkeletonParagraph/schema.json

@@ -1,33 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "style": {
-        "type": "object",
-        "description": "Css style object to apply to the skeleton.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "lines": {
-        "type": "number",
-        "default": 4,
-        "description": "Number of paragraph lines of the skeleton."
-      },
-      "width": {
-        "type": ["number", "string"],
-        "description": "Width of the skeleton.",
-        "docs": {
-          "displayType": "string"
-        }
-      }
-    }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {}
-  }
-}

package/dist/blocks/SkeletonParagraph/style.less

@@ -1,17 +0,0 @@
-/*
-  Copyright 2020-2026 Lowdefy, Inc
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-*/
-
-@import '../Skeleton/style.less';

package/dist/blocks/Spinner/schema.json

@@ -1,26 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {
-      "style": {
-        "type": "object",
-        "description": "Css style object to apply to the icon.",
-        "docs": {
-          "displayType": "yaml"
-        }
-      },
-      "size": {
-        "type": "string",
-        "description": "Size of the icon spinner.",
-        "enum": ["small", "medium", "large"]
-      }
-    }
-  },
-  "events": {
-    "type": "object",
-    "additionalProperties": false,
-    "properties": {}
-  }
-}