diff --git a/registry/components/ContactSplitForm.json b/registry/components/ContactSplitForm.json new file mode 100644 index 0000000..04e024e --- /dev/null +++ b/registry/components/ContactSplitForm.json @@ -0,0 +1,69 @@ +{ + "name": "ContactSplitForm", + "description": "Split layout contact form with animated title and description, dynamic input fields, optional textarea, submit button, and media content.", + "details": "Use for full contact forms with visual context. Features split layout with form (animated title and description, dynamic input fields array with minimum 2 required, optional textarea, submit button) on one side and image or video media on the other. All form inputs use secondary-button styling with rounded-theme borders. Media can be positioned left or right. On mobile, media displays with natural aspect ratio; on desktop, uses absolute positioning to match form height. Returns Record with all field values on submit. Ideal for contact pages that combine detailed forms with visual storytelling.", + "constraints": { + "textRules": { + "title": { + "required": true, + "example": "Medium length heading goes here", + "minChars": 4, + "maxChars": 50 + }, + "description": { + "required": true, + "example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.", + "minChars": 20, + "maxChars": 200 + }, + "buttonText": { + "required": false, + "default": "Submit", + "example": "Send Message", + "minChars": 2, + "maxChars": 15 + } + } + }, + "propsSchema": { + "title": "string", + "description": "string", + "inputs": "Array<{ name: string, type: string, placeholder: string, required?: boolean, className?: string }> - Form input fields (min 2 required)", + "multiSelect?": "{ name: string, label: string, options: string[] } - Optional multi-select dropdown field", + "textarea?": "{ name: string, placeholder: string, rows?: number, required?: boolean, className?: string } - Optional textarea field", + "useInvertedBackground": "boolean", + "imageSrc?": "string", + "videoSrc?": "string", + "imageAlt?": "string (default: '')", + "videoAriaLabel?": "string (default: 'Contact section video')", + "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'none')", + "mediaPosition?": "'left' | 'right' (default: 'right')", + "buttonText?": "string (default: 'Submit')", + "onSubmit?": "(data: Record) => void", + "ariaLabel?": "string (default: 'Contact section')", + "className?": "string", + "containerClassName?": "string", + "contentClassName?": "string", + "formCardClassName?": "string", + "titleClassName?": "string", + "descriptionClassName?": "string", + "buttonClassName?": "string", + "buttonTextClassName?": "string", + "mediaWrapperClassName?": "string", + "mediaClassName?": "string" + }, + "usageExample": "// Wrap in ThemeProvider\n\n console.log(data)} />\n", + "do": [ + "Use for feature showcases", + "Use for capability displays", + "Use for contact pages", + "Use for lead generation", + "Requires inputs[]" + ], + "dont": [], + "editRules": { + "textOnly": true, + "layoutLocked": true, + "styleLocked": true + } +}