@cntrl-site/components 0.1.33 → 1.0.0

package/dist/Components/ControlSlider/ControlSlider.d.ts

@@ -5,7 +5,7 @@ type SliderProps = {
     styles: SliderStyles;
     isEditor?: boolean;
 } & CommonComponentProps;
-export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): JSX.Element;
+export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): import("react/jsx-runtime").JSX.Element;
 type SliderItem = {
     image: {
         url: string;

package/dist/Components/ControlSlider/ControlSliderComponent.d.ts

@@ -1,2 +1,571 @@
-import { Component } from '../../types/Component';
-export declare const ControlSliderComponent: Component;
+import { ControlSlider } from './ControlSlider';
+export declare const ControlSliderComponent: {
+    element: typeof ControlSlider;
+    id: string;
+    name: string;
+    preview: {
+        type: "video";
+        url: string;
+    };
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    schema: {
+        type: string;
+        properties: {
+            settings: {
+                type: string;
+                display: {
+                    type: string;
+                };
+                properties: {
+                    triggers: {
+                        title: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            triggersList: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    click: {
+                                        type: string;
+                                    };
+                                    drag: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            autoPlay: {
+                                type: string[];
+                                label: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: (string | null)[];
+                            };
+                        };
+                    };
+                    direction: {
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        display: {
+                            type: string;
+                        };
+                        enum: string[];
+                    };
+                    transition: {
+                        title: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            type: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                            backgroundColor: {
+                                type: string[];
+                                title: string;
+                                display: {
+                                    visible: boolean;
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                            duration: {
+                                type: string;
+                                label: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                        };
+                    };
+                    controls: {
+                        title: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            isActive: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            arrowsImgUrl: {
+                                type: string[];
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            offset: {
+                                type: string;
+                                title: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    x: {
+                                        type: string;
+                                        label: string;
+                                        scalingEnabled: boolean;
+                                        display: {
+                                            type: string;
+                                            visible: boolean;
+                                        };
+                                    };
+                                    y: {
+                                        type: string;
+                                        label: string;
+                                        scalingEnabled: boolean;
+                                        display: {
+                                            type: string;
+                                            visible: boolean;
+                                        };
+                                    };
+                                };
+                            };
+                            scale: {
+                                type: string;
+                                title: string;
+                                min: number;
+                                max: number;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            color: {
+                                title: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                            hover: {
+                                title: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                            show: {
+                                title: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                        };
+                    };
+                    pagination: {
+                        title: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            isActive: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            position: {
+                                display: {
+                                    type: string;
+                                    direction: string;
+                                };
+                                type: string;
+                                enum: string[];
+                            };
+                            offset: {
+                                type: string;
+                                title: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    x: {
+                                        type: string;
+                                        label: string;
+                                        scalingEnabled: boolean;
+                                        display: {
+                                            type: string;
+                                            visible: boolean;
+                                        };
+                                    };
+                                    y: {
+                                        type: string;
+                                        label: string;
+                                        scalingEnabled: boolean;
+                                        display: {
+                                            type: string;
+                                            visible: boolean;
+                                        };
+                                    };
+                                };
+                            };
+                            scale: {
+                                type: string;
+                                title: string;
+                                min: number;
+                                max: number;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            colors: {
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                                title: string;
+                                type: string;
+                                items: {
+                                    type: string;
+                                };
+                            };
+                            hover: {
+                                title: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                        };
+                    };
+                    imageCaption: {
+                        title: string;
+                        icon: string;
+                        tooltip: string;
+                        type: string;
+                        properties: {
+                            isActive: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                            };
+                            alignment: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
+                            offset: {
+                                type: string;
+                                title: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    x: {
+                                        type: string;
+                                        label: string;
+                                        scalingEnabled: boolean;
+                                        display: {
+                                            type: string;
+                                            visible: boolean;
+                                        };
+                                    };
+                                    y: {
+                                        type: string;
+                                        label: string;
+                                        scalingEnabled: boolean;
+                                        display: {
+                                            type: string;
+                                            visible: boolean;
+                                        };
+                                    };
+                                };
+                            };
+                            linkColor: {
+                                title: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                            linkHoverColor: {
+                                title: string;
+                                type: string;
+                                display: {
+                                    type: string;
+                                    format: string;
+                                };
+                            };
+                        };
+                    };
+                };
+                default: {
+                    triggers: {
+                        triggersList: {
+                            click: boolean;
+                            drag: boolean;
+                        };
+                        autoPlay: null;
+                    };
+                    controls: {
+                        isActive: boolean;
+                        arrowsImgUrl: null;
+                        offset: {
+                            x: number;
+                            y: number;
+                        };
+                        scale: number;
+                        color: string;
+                        hover: string;
+                        show: string;
+                    };
+                    transition: {
+                        type: string;
+                        duration: string;
+                        backgroundColor: null;
+                    };
+                    pagination: {
+                        isActive: boolean;
+                        scale: number;
+                        position: string;
+                        offset: {
+                            x: number;
+                            y: number;
+                        };
+                        colors: string[];
+                        hover: string;
+                    };
+                    direction: string;
+                    imageCaption: {
+                        offset: {
+                            x: number;
+                            y: number;
+                        };
+                        isActive: boolean;
+                        alignment: string;
+                        linkColor: string;
+                        linkHoverColor: string;
+                    };
+                };
+                displayRules: ({
+                    if: {
+                        name: string;
+                        value: string;
+                    };
+                    then: {
+                        name: string;
+                        value: string;
+                    };
+                } | {
+                    if: {
+                        name: string;
+                        value: string;
+                    };
+                    then: {
+                        name: string;
+                        value: boolean;
+                    };
+                })[];
+            };
+            content: {
+                type: string;
+                settings: {
+                    addItemFromFileExplorer: boolean;
+                    defaultWidth: number;
+                };
+                items: {
+                    type: string;
+                    properties: {
+                        image: {
+                            type: string;
+                            label: string;
+                            display: {
+                                minWidth: number;
+                                maxWidth: number;
+                                type: string;
+                            };
+                            properties: {
+                                url: {
+                                    type: string;
+                                };
+                                name: {
+                                    type: string;
+                                };
+                                objectFit: {
+                                    type: string;
+                                    enum: string[];
+                                };
+                            };
+                            required: string[];
+                        };
+                        imageCaption: {
+                            placeholder: string;
+                            label: string;
+                            display: {
+                                type: string;
+                                minWidth: number;
+                                maxWidth: number;
+                            };
+                        };
+                    };
+                    required: string[];
+                };
+                default: {
+                    image: {
+                        objectFit: string;
+                        url: string;
+                        name: string;
+                    };
+                    imageCaption: {
+                        type: string;
+                        children: {
+                            text: string;
+                        }[];
+                    }[];
+                }[];
+            };
+            styles: {
+                type: string;
+                properties: {
+                    imageCaption: {
+                        dataName: string;
+                        type: string;
+                        properties: {
+                            fontSettings: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    fontFamily: {
+                                        type: string;
+                                    };
+                                    fontWeight: {
+                                        type: string;
+                                    };
+                                    fontStyle: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            widthSettings: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                                properties: {
+                                    width: {
+                                        type: string;
+                                    };
+                                    sizing: {
+                                        type: string;
+                                        enum: string[];
+                                    };
+                                };
+                            };
+                            fontSizeLineHeight: {
+                                type: string;
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    fontSize: {
+                                        type: string;
+                                    };
+                                    lineHeight: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                            letterSpacing: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                            };
+                            wordSpacing: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                            };
+                            textAlign: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                                enum: string[];
+                            };
+                            textAppearance: {
+                                display: {
+                                    type: string;
+                                };
+                                properties: {
+                                    textTransform: {
+                                        type: string;
+                                        enum: string[];
+                                    };
+                                    textDecoration: {
+                                        type: string;
+                                        enum: string[];
+                                    };
+                                    fontVariant: {
+                                        type: string;
+                                        enum: string[];
+                                    };
+                                };
+                            };
+                            color: {
+                                display: {
+                                    type: string;
+                                };
+                                type: string;
+                            };
+                        };
+                    };
+                };
+                default: {
+                    imageCaption: {
+                        widthSettings: {
+                            width: number;
+                            sizing: string;
+                        };
+                        fontSettings: {
+                            fontFamily: string;
+                            fontWeight: number;
+                            fontStyle: string;
+                        };
+                        fontSizeLineHeight: {
+                            fontSize: number;
+                            lineHeight: number;
+                        };
+                        letterSpacing: number;
+                        wordSpacing: number;
+                        textAlign: string;
+                        textAppearance: {
+                            textTransform: string;
+                            textDecoration: string;
+                            fontVariant: string;
+                        };
+                        color: string;
+                    };
+                };
+            };
+        };
+        required: string[];
+    };
+};

package/dist/Components/Form/Form.d.ts

@@ -0,0 +1,64 @@
+import { CommonComponentProps } from '../props';
+type FormProps = {
+    settings: FormSettings;
+    content?: unknown;
+    isEditor?: boolean;
+    onUpdateSettings?: (settings: FormSettings) => void;
+} & CommonComponentProps;
+export declare function Form({ settings, isEditor, metadata }: FormProps): import("react/jsx-runtime").JSX.Element;
+export type FormFieldType = 'text' | 'textarea' | 'phone' | 'email';
+export type FormFieldItem = {
+    name: string;
+    type: FormFieldType;
+    placeholder: string;
+    label?: string;
+};
+type TextStyles = {
+    fontSettings: {
+        fontFamily: string;
+        fontWeight: number;
+        fontStyle: string;
+    };
+    letterSpacing: number;
+    wordSpacing: number;
+    fontSize: number;
+    lineHeight?: number;
+    textAppearance?: {
+        textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+        textDecoration?: 'none' | 'underline';
+        fontVariant?: 'normal' | 'small-caps';
+    };
+    color: string;
+};
+type Padding = {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+type FormSettings = {
+    type: 'A' | 'B' | 'C';
+    fieldsToShow: number;
+    fields: FormFieldItem[];
+    buttonLabel?: string;
+    input?: TextStyles;
+    button?: TextStyles;
+    gap?: number;
+    fieldsGap?: number;
+    label?: TextStyles;
+    buttonCorners?: number;
+    buttonStroke?: number;
+    inputCorners?: number;
+    inputStroke?: number;
+    buttonPadding?: Padding;
+    inputPadding?: Padding;
+    inputColor: string;
+    inputTextColor: string;
+    inputBorderColor: string;
+    placeholderColor: string;
+    buttonColor: string;
+    buttonTextColor: string;
+    buttonBorderColor: string;
+    labelTextColor: string;
+};
+export {};

package/dist/Components/Form/FormComponent.d.ts

@@ -0,0 +1,14 @@
+import { Form } from './Form';
+import { ComponentSchemaV1 } from '../../types/SchemaV1';
+export declare const FormComponent: {
+    element: typeof Form;
+    id: string;
+    name: string;
+    version: number;
+    defaultSize: {
+        width: number;
+        height: number;
+    };
+    schema: ComponentSchemaV1;
+    sourceCode: string;
+};