@tpitre/story-ui 2.7.1 → 2.8.1

package/dist/visual-builder/config/componentRegistry.js

@@ -1,1758 +0,0 @@
-// Mantine spacing tokens
-const SPACING_OPTIONS = ['0', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'];
-// Common spacing properties for all components
-export const SPACING_PROPERTIES = [
-    // Margin properties
-    {
-        name: 'm',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Margin on all sides',
-        category: 'spacing'
-    },
-    {
-        name: 'mt',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Margin top',
-        category: 'spacing'
-    },
-    {
-        name: 'mr',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Margin right',
-        category: 'spacing'
-    },
-    {
-        name: 'mb',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Margin bottom',
-        category: 'spacing'
-    },
-    {
-        name: 'ml',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Margin left',
-        category: 'spacing'
-    },
-    {
-        name: 'mx',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Margin horizontal (left and right)',
-        category: 'spacing'
-    },
-    {
-        name: 'my',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Margin vertical (top and bottom)',
-        category: 'spacing'
-    },
-    // Padding properties  
-    {
-        name: 'p',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Padding on all sides',
-        category: 'spacing'
-    },
-    {
-        name: 'pt',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Padding top',
-        category: 'spacing'
-    },
-    {
-        name: 'pr',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Padding right',
-        category: 'spacing'
-    },
-    {
-        name: 'pb',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Padding bottom',
-        category: 'spacing'
-    },
-    {
-        name: 'pl',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Padding left',
-        category: 'spacing'
-    },
-    {
-        name: 'px',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Padding horizontal (left and right)',
-        category: 'spacing'
-    },
-    {
-        name: 'py',
-        type: 'select',
-        defaultValue: undefined,
-        options: SPACING_OPTIONS,
-        description: 'Padding vertical (top and bottom)',
-        category: 'spacing'
-    }
-];
-// Helper function to add spacing properties to a component
-const addSpacingProperties = (properties) => {
-    return [...properties, ...SPACING_PROPERTIES];
-};
-export const MANTINE_COMPONENTS = [
-    {
-        type: 'Button',
-        displayName: 'Button',
-        category: 'Inputs',
-        defaultProps: {
-            variant: 'filled',
-            size: 'sm',
-            children: 'Click me'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'Click me',
-                description: 'Button text content',
-                category: 'content'
-            },
-            {
-                name: 'variant',
-                type: 'select',
-                defaultValue: 'filled',
-                options: ['filled', 'outline', 'light', 'default', 'subtle'],
-                description: 'Button visual style',
-                category: 'appearance'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Button size',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Button color theme',
-                category: 'appearance'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable button interaction',
-                category: 'behavior'
-            },
-            {
-                name: 'fullWidth',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Make button full width',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'TextInput',
-        displayName: 'Text Input',
-        category: 'Inputs',
-        defaultProps: {
-            placeholder: 'Enter text...',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'placeholder',
-                type: 'string',
-                defaultValue: 'Enter text...',
-                description: 'Placeholder text',
-                category: 'content'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '',
-                description: 'Input label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Input size',
-                category: 'appearance'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable input',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'Text',
-        displayName: 'Text',
-        category: 'Typography',
-        defaultProps: {
-            children: 'Sample text',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'Sample text',
-                description: 'Text content',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Text size',
-                category: 'appearance'
-            },
-            {
-                name: 'weight',
-                type: 'select',
-                defaultValue: 'normal',
-                options: ['normal', 'bold', 'lighter'],
-                description: 'Font weight',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'string',
-                defaultValue: '',
-                description: 'Text color',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Title',
-        displayName: 'Title',
-        category: 'Typography',
-        defaultProps: {
-            children: 'Page Title',
-            order: 1
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'Page Title',
-                description: 'Title text',
-                category: 'content'
-            },
-            {
-                name: 'order',
-                type: 'select',
-                defaultValue: 1,
-                options: ['1', '2', '3', '4', '5', '6'],
-                description: 'Heading level (h1-h6)',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'string',
-                defaultValue: '',
-                description: 'Title color',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Container',
-        displayName: 'Container',
-        category: 'Layout',
-        defaultProps: {
-            size: 'md',
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Container max width',
-                category: 'appearance'
-            },
-            {
-                name: 'fluid',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Full width container',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'Group',
-        displayName: 'Group',
-        category: 'Layout',
-        defaultProps: {
-            justify: 'flex-start',
-            align: 'center',
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'justify',
-                type: 'select',
-                defaultValue: 'flex-start',
-                options: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around'],
-                description: 'Horizontal alignment',
-                category: 'appearance'
-            },
-            {
-                name: 'align',
-                type: 'select',
-                defaultValue: 'center',
-                options: ['flex-start', 'center', 'flex-end', 'stretch'],
-                description: 'Vertical alignment',
-                category: 'appearance'
-            },
-            {
-                name: 'gap',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Gap between items',
-                category: 'spacing'
-            }
-        ])
-    },
-    {
-        type: 'Stack',
-        displayName: 'Stack',
-        category: 'Layout',
-        defaultProps: {
-            gap: 'md',
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'gap',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Gap between items',
-                category: 'spacing'
-            },
-            {
-                name: 'align',
-                type: 'select',
-                defaultValue: 'stretch',
-                options: ['flex-start', 'center', 'flex-end', 'stretch'],
-                description: 'Horizontal alignment',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Card',
-        displayName: 'Card',
-        category: 'Layout',
-        defaultProps: {
-            shadow: 'sm',
-            padding: 'lg',
-            radius: 'md',
-            withBorder: true,
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'shadow',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Card shadow',
-                category: 'appearance'
-            },
-            {
-                name: 'padding',
-                type: 'select',
-                defaultValue: 'lg',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Card padding',
-                category: 'spacing'
-            },
-            {
-                name: 'radius',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Border radius',
-                category: 'appearance'
-            },
-            {
-                name: 'withBorder',
-                type: 'boolean',
-                defaultValue: true,
-                description: 'Show border',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'CardSection',
-        displayName: 'Card Section',
-        category: 'Layout',
-        defaultProps: {
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'withBorder',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Show border around section',
-                category: 'appearance'
-            },
-            {
-                name: 'inheritPadding',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Inherit card padding',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Badge',
-        displayName: 'Badge',
-        category: 'Display',
-        defaultProps: {
-            children: 'New',
-            variant: 'filled',
-            color: 'blue',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'New',
-                description: 'Badge text content',
-                category: 'content'
-            },
-            {
-                name: 'variant',
-                type: 'select',
-                defaultValue: 'filled',
-                options: ['filled', 'light', 'outline', 'dot'],
-                description: 'Badge variant',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Badge color',
-                category: 'appearance'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Badge size',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Anchor',
-        displayName: 'Link',
-        category: 'Navigation',
-        defaultProps: {
-            children: 'Link text',
-            href: '#',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'Link text',
-                description: 'Link text content',
-                category: 'content'
-            },
-            {
-                name: 'href',
-                type: 'string',
-                defaultValue: '#',
-                description: 'Link URL',
-                category: 'behavior'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Link size',
-                category: 'appearance'
-            },
-            {
-                name: 'underline',
-                type: 'select',
-                defaultValue: 'hover',
-                options: ['always', 'hover', 'never'],
-                description: 'Underline style',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Image',
-        displayName: 'Image',
-        category: 'Media',
-        defaultProps: {
-            src: 'https://images.unsplash.com/photo-1511216335778-7cb8f49fa7a3?w=400&h=300&fit=crop',
-            alt: 'Sample image',
-            radius: 'sm',
-            aspectRatio: '16:9',
-            fit: 'cover'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'src',
-                type: 'string',
-                defaultValue: 'https://images.unsplash.com/photo-1511216335778-7cb8f49fa7a3?w=400&h=300&fit=crop',
-                description: 'Image source URL',
-                category: 'content'
-            },
-            {
-                name: 'alt',
-                type: 'string',
-                defaultValue: 'Sample image',
-                description: 'Image alt text',
-                category: 'content'
-            },
-            {
-                name: 'radius',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Image border radius',
-                category: 'appearance'
-            },
-            {
-                name: 'aspectRatio',
-                type: 'select',
-                defaultValue: '16:9',
-                options: ['16:9', '4:3', '1:1', '3:2', '21:9'],
-                description: 'Image aspect ratio',
-                category: 'appearance'
-            },
-            {
-                name: 'fit',
-                type: 'select',
-                defaultValue: 'cover',
-                options: ['contain', 'cover', 'fill', 'none', 'scale-down'],
-                description: 'How the image fits within its container',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Divider',
-        displayName: 'Divider',
-        category: 'Layout',
-        defaultProps: {
-            size: 'xs',
-            orientation: 'horizontal'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'xs',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Divider thickness',
-                category: 'appearance'
-            },
-            {
-                name: 'orientation',
-                type: 'select',
-                defaultValue: 'horizontal',
-                options: ['horizontal', 'vertical'],
-                description: 'Divider orientation',
-                category: 'appearance'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '',
-                description: 'Divider label (optional)',
-                category: 'content'
-            },
-            {
-                name: 'labelPosition',
-                type: 'select',
-                defaultValue: 'center',
-                options: ['left', 'center', 'right'],
-                description: 'Label position',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Paper',
-        displayName: 'Paper',
-        category: 'Layout',
-        defaultProps: {
-            shadow: 'xs',
-            radius: 'md',
-            p: 'md',
-            withBorder: false,
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'shadow',
-                type: 'select',
-                defaultValue: 'xs',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Paper shadow',
-                category: 'appearance'
-            },
-            {
-                name: 'radius',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Border radius',
-                category: 'appearance'
-            },
-            {
-                name: 'p',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Padding',
-                category: 'spacing'
-            },
-            {
-                name: 'withBorder',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Show border',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Alert',
-        displayName: 'Alert',
-        category: 'Feedback',
-        defaultProps: {
-            title: 'Alert title',
-            children: 'This is an alert message',
-            color: 'blue',
-            variant: 'light'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'title',
-                type: 'string',
-                defaultValue: 'Alert title',
-                description: 'Alert title',
-                category: 'content'
-            },
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'This is an alert message',
-                description: 'Alert message content',
-                category: 'content'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Alert color',
-                category: 'appearance'
-            },
-            {
-                name: 'variant',
-                type: 'select',
-                defaultValue: 'light',
-                options: ['filled', 'light', 'outline'],
-                description: 'Alert variant',
-                category: 'appearance'
-            }
-        ])
-    },
-    // Additional Input Components
-    {
-        type: 'PasswordInput',
-        displayName: 'Password Input',
-        category: 'Inputs',
-        defaultProps: {
-            placeholder: 'Enter password...',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'placeholder',
-                type: 'string',
-                defaultValue: 'Enter password...',
-                description: 'Placeholder text',
-                category: 'content'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '',
-                description: 'Input label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Input size',
-                category: 'appearance'
-            },
-            {
-                name: 'visible',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Show password',
-                category: 'behavior'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable input',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'Textarea',
-        displayName: 'Textarea',
-        category: 'Inputs',
-        defaultProps: {
-            placeholder: 'Enter text...',
-            size: 'sm',
-            rows: 4
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'placeholder',
-                type: 'string',
-                defaultValue: 'Enter text...',
-                description: 'Placeholder text',
-                category: 'content'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '',
-                description: 'Input label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Input size',
-                category: 'appearance'
-            },
-            {
-                name: 'rows',
-                type: 'number',
-                defaultValue: 4,
-                description: 'Number of rows',
-                category: 'appearance'
-            },
-            {
-                name: 'autosize',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Auto resize height',
-                category: 'behavior'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable input',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'Select',
-        displayName: 'Select',
-        category: 'Inputs',
-        defaultProps: {
-            placeholder: 'Select option...',
-            size: 'sm',
-            data: ['Option 1', 'Option 2', 'Option 3']
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'placeholder',
-                type: 'string',
-                defaultValue: 'Select option...',
-                description: 'Placeholder text',
-                category: 'content'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '',
-                description: 'Input label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Input size',
-                category: 'appearance'
-            },
-            {
-                name: 'searchable',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Enable search',
-                category: 'behavior'
-            },
-            {
-                name: 'clearable',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Show clear button',
-                category: 'behavior'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable input',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'MultiSelect',
-        displayName: 'Multi Select',
-        category: 'Inputs',
-        defaultProps: {
-            placeholder: 'Select options...',
-            size: 'sm',
-            data: ['Option 1', 'Option 2', 'Option 3']
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'placeholder',
-                type: 'string',
-                defaultValue: 'Select options...',
-                description: 'Placeholder text',
-                category: 'content'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '',
-                description: 'Input label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Input size',
-                category: 'appearance'
-            },
-            {
-                name: 'searchable',
-                type: 'boolean',
-                defaultValue: true,
-                description: 'Enable search',
-                category: 'behavior'
-            },
-            {
-                name: 'clearable',
-                type: 'boolean',
-                defaultValue: true,
-                description: 'Show clear button',
-                category: 'behavior'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable input',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'NumberInput',
-        displayName: 'Number Input',
-        category: 'Inputs',
-        defaultProps: {
-            placeholder: 'Enter number...',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'placeholder',
-                type: 'string',
-                defaultValue: 'Enter number...',
-                description: 'Placeholder text',
-                category: 'content'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '',
-                description: 'Input label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Input size',
-                category: 'appearance'
-            },
-            {
-                name: 'min',
-                type: 'number',
-                defaultValue: undefined,
-                description: 'Minimum value',
-                category: 'behavior'
-            },
-            {
-                name: 'max',
-                type: 'number',
-                defaultValue: undefined,
-                description: 'Maximum value',
-                category: 'behavior'
-            },
-            {
-                name: 'step',
-                type: 'number',
-                defaultValue: 1,
-                description: 'Step value',
-                category: 'behavior'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable input',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'Checkbox',
-        displayName: 'Checkbox',
-        category: 'Inputs',
-        defaultProps: {
-            label: 'Checkbox label',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: 'Checkbox label',
-                description: 'Checkbox label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Checkbox size',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Checkbox color',
-                category: 'appearance'
-            },
-            {
-                name: 'indeterminate',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Indeterminate state',
-                category: 'behavior'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable checkbox',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'Radio',
-        displayName: 'Radio',
-        category: 'Inputs',
-        defaultProps: {
-            label: 'Radio label',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: 'Radio label',
-                description: 'Radio label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Radio size',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Radio color',
-                category: 'appearance'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable radio',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'Switch',
-        displayName: 'Switch',
-        category: 'Inputs',
-        defaultProps: {
-            label: 'Switch label',
-            size: 'sm'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: 'Switch label',
-                description: 'Switch label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Switch size',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Switch color',
-                category: 'appearance'
-            },
-            {
-                name: 'disabled',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Disable switch',
-                category: 'behavior'
-            }
-        ])
-    },
-    // Layout Components
-    {
-        type: 'Box',
-        displayName: 'Box',
-        category: 'Layout',
-        defaultProps: {
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'bg',
-                type: 'string',
-                defaultValue: '',
-                description: 'Background color',
-                category: 'appearance'
-            },
-            {
-                name: 'c',
-                type: 'string',
-                defaultValue: '',
-                description: 'Text color',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Flex',
-        displayName: 'Flex',
-        category: 'Layout',
-        defaultProps: {
-            direction: 'row',
-            justify: 'flex-start',
-            align: 'stretch',
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'direction',
-                type: 'select',
-                defaultValue: 'row',
-                options: ['row', 'column', 'row-reverse', 'column-reverse'],
-                description: 'Flex direction',
-                category: 'appearance'
-            },
-            {
-                name: 'justify',
-                type: 'select',
-                defaultValue: 'flex-start',
-                options: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
-                description: 'Justify content',
-                category: 'appearance'
-            },
-            {
-                name: 'align',
-                type: 'select',
-                defaultValue: 'stretch',
-                options: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
-                description: 'Align items',
-                category: 'appearance'
-            },
-            {
-                name: 'wrap',
-                type: 'select',
-                defaultValue: 'nowrap',
-                options: ['nowrap', 'wrap', 'wrap-reverse'],
-                description: 'Flex wrap',
-                category: 'appearance'
-            },
-            {
-                name: 'gap',
-                type: 'select',
-                defaultValue: undefined,
-                options: SPACING_OPTIONS,
-                description: 'Gap between items',
-                category: 'spacing'
-            }
-        ])
-    },
-    {
-        type: 'Grid',
-        displayName: 'Grid',
-        category: 'Layout',
-        defaultProps: {
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'columns',
-                type: 'number',
-                defaultValue: 12,
-                description: 'Number of columns',
-                category: 'appearance'
-            },
-            {
-                name: 'gutter',
-                type: 'select',
-                defaultValue: 'md',
-                options: SPACING_OPTIONS,
-                description: 'Gutter size',
-                category: 'spacing'
-            },
-            {
-                name: 'grow',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Allow columns to grow',
-                category: 'behavior'
-            }
-        ])
-    },
-    {
-        type: 'GridCol',
-        displayName: 'Grid Column',
-        category: 'Layout',
-        defaultProps: {
-            span: 12,
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'span',
-                type: 'number',
-                defaultValue: 12,
-                description: 'Column span',
-                category: 'appearance'
-            },
-            {
-                name: 'offset',
-                type: 'number',
-                defaultValue: 0,
-                description: 'Column offset',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'SimpleGrid',
-        displayName: 'Simple Grid',
-        category: 'Layout',
-        defaultProps: {
-            cols: 2,
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'cols',
-                type: 'number',
-                defaultValue: 2,
-                description: 'Number of columns',
-                category: 'appearance'
-            },
-            {
-                name: 'spacing',
-                type: 'select',
-                defaultValue: 'md',
-                options: SPACING_OPTIONS,
-                description: 'Spacing between items',
-                category: 'spacing'
-            },
-            {
-                name: 'verticalSpacing',
-                type: 'select',
-                defaultValue: undefined,
-                options: SPACING_OPTIONS,
-                description: 'Vertical spacing',
-                category: 'spacing'
-            }
-        ])
-    },
-    // Typography Components  
-    {
-        type: 'Code',
-        displayName: 'Code',
-        category: 'Typography',
-        defaultProps: {
-            children: 'console.log("Hello world")'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'console.log("Hello world")',
-                description: 'Code content',
-                category: 'content'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Code color',
-                category: 'appearance'
-            },
-            {
-                name: 'block',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Display as block',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Mark',
-        displayName: 'Highlight',
-        category: 'Typography',
-        defaultProps: {
-            children: 'Highlighted text'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'Highlighted text',
-                description: 'Text to highlight',
-                category: 'content'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'yellow',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Highlight color',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Blockquote',
-        displayName: 'Blockquote',
-        category: 'Typography',
-        defaultProps: {
-            children: 'This is a blockquote',
-            cite: '- Author'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'This is a blockquote',
-                description: 'Quote content',
-                category: 'content'
-            },
-            {
-                name: 'cite',
-                type: 'string',
-                defaultValue: '- Author',
-                description: 'Citation',
-                category: 'content'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Quote color',
-                category: 'appearance'
-            }
-        ])
-    },
-    // Display Components
-    {
-        type: 'Avatar',
-        displayName: 'Avatar',
-        category: 'Display',
-        defaultProps: {
-            size: 'md',
-            radius: 'xl'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'src',
-                type: 'string',
-                defaultValue: '',
-                description: 'Avatar image URL',
-                category: 'content'
-            },
-            {
-                name: 'alt',
-                type: 'string',
-                defaultValue: '',
-                description: 'Alt text',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Avatar size',
-                category: 'appearance'
-            },
-            {
-                name: 'radius',
-                type: 'select',
-                defaultValue: 'xl',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Border radius',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Avatar color',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Indicator',
-        displayName: 'Indicator',
-        category: 'Display',
-        defaultProps: {
-            children: 'Content with indicator',
-            label: '5'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'Content with indicator',
-                description: 'Content to wrap',
-                category: 'content'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '5',
-                description: 'Indicator label',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Indicator size',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'red',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Indicator color',
-                category: 'appearance'
-            },
-            {
-                name: 'position',
-                type: 'select',
-                defaultValue: 'top-end',
-                options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
-                description: 'Indicator position',
-                category: 'appearance'
-            }
-        ])
-    },
-    // Navigation Components
-    {
-        type: 'Breadcrumbs',
-        displayName: 'Breadcrumbs',
-        category: 'Navigation',
-        defaultProps: {
-            children: ['Home', 'Products', 'Current Page']
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'separator',
-                type: 'string',
-                defaultValue: '/',
-                description: 'Separator character',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Tabs',
-        displayName: 'Tabs',
-        category: 'Navigation',
-        defaultProps: {
-            defaultValue: 'tab1',
-            children: []
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'variant',
-                type: 'select',
-                defaultValue: 'default',
-                options: ['default', 'outline', 'pills'],
-                description: 'Tabs variant',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Tabs color',
-                category: 'appearance'
-            },
-            {
-                name: 'orientation',
-                type: 'select',
-                defaultValue: 'horizontal',
-                options: ['horizontal', 'vertical'],
-                description: 'Tabs orientation',
-                category: 'appearance'
-            }
-        ])
-    },
-    // Feedback Components
-    {
-        type: 'Loader',
-        displayName: 'Loader',
-        category: 'Feedback',
-        defaultProps: {
-            size: 'md'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Loader size',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Loader color',
-                category: 'appearance'
-            },
-            {
-                name: 'variant',
-                type: 'select',
-                defaultValue: 'oval',
-                options: ['oval', 'bars', 'dots'],
-                description: 'Loader variant',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Progress',
-        displayName: 'Progress',
-        category: 'Feedback',
-        defaultProps: {
-            value: 50,
-            size: 'md'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'value',
-                type: 'number',
-                defaultValue: 50,
-                description: 'Progress value (0-100)',
-                category: 'content'
-            },
-            {
-                name: 'size',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Progress size',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'blue',
-                options: ['blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Progress color',
-                category: 'appearance'
-            },
-            {
-                name: 'radius',
-                type: 'select',
-                defaultValue: 'sm',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Border radius',
-                category: 'appearance'
-            },
-            {
-                name: 'striped',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Striped appearance',
-                category: 'appearance'
-            },
-            {
-                name: 'animated',
-                type: 'boolean',
-                defaultValue: false,
-                description: 'Animated stripes',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'RingProgress',
-        displayName: 'Ring Progress',
-        category: 'Feedback',
-        defaultProps: {
-            size: 120,
-            thickness: 12,
-            sections: [{ value: 40, color: 'blue' }]
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'size',
-                type: 'number',
-                defaultValue: 120,
-                description: 'Ring size in pixels',
-                category: 'appearance'
-            },
-            {
-                name: 'thickness',
-                type: 'number',
-                defaultValue: 12,
-                description: 'Ring thickness',
-                category: 'appearance'
-            },
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: '',
-                description: 'Center label',
-                category: 'content'
-            }
-        ])
-    },
-    // Overlay Components  
-    {
-        type: 'Tooltip',
-        displayName: 'Tooltip',
-        category: 'Overlays',
-        defaultProps: {
-            label: 'Tooltip content',
-            children: 'Hover me'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'label',
-                type: 'string',
-                defaultValue: 'Tooltip content',
-                description: 'Tooltip text',
-                category: 'content'
-            },
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'Hover me',
-                description: 'Element to wrap',
-                category: 'content'
-            },
-            {
-                name: 'position',
-                type: 'select',
-                defaultValue: 'top',
-                options: ['top', 'bottom', 'left', 'right'],
-                description: 'Tooltip position',
-                category: 'appearance'
-            },
-            {
-                name: 'color',
-                type: 'select',
-                defaultValue: 'dark',
-                options: ['dark', 'blue', 'red', 'green', 'yellow', 'orange', 'purple', 'pink', 'gray'],
-                description: 'Tooltip color',
-                category: 'appearance'
-            }
-        ])
-    },
-    {
-        type: 'Popover',
-        displayName: 'Popover',
-        category: 'Overlays',
-        defaultProps: {
-            children: 'Click me'
-        },
-        properties: addSpacingProperties([
-            {
-                name: 'children',
-                type: 'string',
-                defaultValue: 'Click me',
-                description: 'Trigger element',
-                category: 'content'
-            },
-            {
-                name: 'position',
-                type: 'select',
-                defaultValue: 'bottom',
-                options: ['top', 'bottom', 'left', 'right'],
-                description: 'Popover position',
-                category: 'appearance'
-            },
-            {
-                name: 'width',
-                type: 'number',
-                defaultValue: 260,
-                description: 'Popover width',
-                category: 'appearance'
-            },
-            {
-                name: 'shadow',
-                type: 'select',
-                defaultValue: 'md',
-                options: ['xs', 'sm', 'md', 'lg', 'xl'],
-                description: 'Popover shadow',
-                category: 'appearance'
-            }
-        ])
-    }
-];
-export const getComponentConfig = (type) => {
-    return MANTINE_COMPONENTS.find(comp => comp.type === type);
-};
-export const getComponentsByCategory = () => {
-    return MANTINE_COMPONENTS.reduce((acc, component) => {
-        if (!acc[component.category]) {
-            acc[component.category] = [];
-        }
-        acc[component.category].push(component);
-        return acc;
-    }, {});
-};
-// List of container components that can accept children
-export const CONTAINER_COMPONENTS = ['Container', 'Group', 'Stack', 'Card', 'CardSection', 'Paper', 'Box', 'Flex', 'Grid', 'GridCol', 'SimpleGrid', 'Tabs', 'Indicator', 'Tooltip', 'Popover'];