aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
732 lines (729 loc) • 34.9 kB
JavaScript
'use client';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useRef, useEffect, useCallback } from 'react';
import { GlassCore } from '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { cn } from '../../lib/utilsComprehensive.js';
import { useAccessibility } from '../../hooks/useAccessibility.js';
import { usePerformance } from '../../hooks/usePerformance.js';
// AI-powered field type detection
const analyzeFieldPurpose = (label, context) => {
const lowerLabel = label.toLowerCase();
const lowerContext = context.toLowerCase();
const suggestions = {
fieldType: [],
validationRules: [],
accessibilityTips: [],
uxOptimizations: []
};
// Smart field type detection
if (lowerLabel.includes("email")) {
suggestions.fieldType.push("email");
suggestions.validationRules.push("Email format validation");
suggestions.accessibilityTips.push('Use autocomplete="email" for better UX');
} else if (lowerLabel.includes("password")) {
suggestions.fieldType.push("password");
suggestions.validationRules.push("Minimum 8 characters, include numbers and symbols");
suggestions.uxOptimizations.push("Add password strength indicator");
} else if (lowerLabel.includes("phone") || lowerLabel.includes("tel")) {
suggestions.fieldType.push("tel");
suggestions.validationRules.push("Phone number format validation");
suggestions.accessibilityTips.push('Use autocomplete="tel" for mobile optimization');
} else if (lowerLabel.includes("date") || lowerLabel.includes("birth")) {
suggestions.fieldType.push("date");
suggestions.validationRules.push("Date range validation");
suggestions.uxOptimizations.push("Consider date picker for better UX");
} else if (lowerLabel.includes("age") || lowerLabel.includes("count") || lowerLabel.includes("number")) {
suggestions.fieldType.push("number");
suggestions.validationRules.push("Numeric range validation");
} else if (lowerLabel.includes("description") || lowerLabel.includes("comment") || lowerLabel.includes("message")) {
suggestions.fieldType.push("textarea");
suggestions.validationRules.push("Character limit (recommended: 500-2000)");
suggestions.uxOptimizations.push("Add character counter");
} else if (lowerLabel.includes("website") || lowerLabel.includes("url") || lowerLabel.includes("link")) {
suggestions.fieldType.push("url");
suggestions.validationRules.push("URL format validation");
}
// Context-based suggestions
if (lowerContext.includes("registration") || lowerContext.includes("signup")) {
suggestions.uxOptimizations.push("Consider social login options");
suggestions.accessibilityTips.push("Provide clear password requirements");
} else if (lowerContext.includes("payment") || lowerContext.includes("billing")) {
suggestions.validationRules.push("Real-time validation for payment fields");
suggestions.uxOptimizations.push("Add secure payment indicators");
} else if (lowerContext.includes("contact") || lowerContext.includes("support")) {
suggestions.uxOptimizations.push("Add expected response time");
suggestions.accessibilityTips.push("Provide alternative contact methods");
}
// Universal accessibility tips
suggestions.accessibilityTips.push("Ensure sufficient color contrast");
suggestions.accessibilityTips.push("Add proper ARIA labels");
suggestions.uxOptimizations.push("Add real-time validation feedback");
return suggestions;
};
// AI form optimization engine
const optimizeFormFlow = fields => {
const optimizations = [];
// Check field order
const hasPersonalInfo = fields.some(f => f.type === "text" && (f.label.toLowerCase().includes("name") || f.label.toLowerCase().includes("first")));
const hasContactInfo = fields.some(f => f.type === "email" || f.type === "tel");
if (hasPersonalInfo && hasContactInfo) {
optimizations.push("Consider grouping personal information first, then contact details");
}
// Check for long forms
if (fields.length > 8) {
optimizations.push("Consider breaking this into multiple steps or sections");
optimizations.push("Implement progress indicator for better UX");
}
// Check for required field balance
const requiredFields = fields.filter(f => f.required).length;
if (requiredFields / fields.length > 0.7) {
optimizations.push("Consider reducing required fields to improve completion rates");
}
// Check for conditional logic opportunities
const independentFields = fields.filter(f => !f.conditional).length;
if (independentFields === fields.length && fields.length > 5) {
optimizations.push("Consider adding conditional logic to reduce cognitive load");
}
return optimizations;
};
const GlassIntelligentFormBuilder = ({
onSchemaChange,
initialSchema,
enableAIAssistance = true,
enableRealTimeOptimization = true
}) => {
const [schema, setSchema] = useState({
id: initialSchema?.id || `form-${Date.now()}`,
title: initialSchema?.title || "New Form",
description: initialSchema?.description || "",
fields: initialSchema?.fields || [],
aiAnalysis: initialSchema?.aiAnalysis
});
const [selectedFieldIndex, setSelectedFieldIndex] = useState(null);
const [aiRecommendations, setAIRecommendations] = useState([]);
const [isAnalyzing, setIsAnalyzing] = useState(false);
const [validationErrors, setValidationErrors] = useState({});
useAccessibility();
const performance = usePerformance();
const analysisTimeoutRef = useRef();
// Real-time AI analysis
useEffect(() => {
if (!enableAIAssistance || schema.fields.length === 0) return;
clearTimeout(analysisTimeoutRef.current);
analysisTimeoutRef.current = setTimeout(() => {
setIsAnalyzing(true);
// Simulate AI analysis delay
setTimeout(() => {
const optimizations = optimizeFormFlow(schema.fields);
const accessibilityScore = calculateAccessibilityScore(schema.fields);
const performanceScore = performance.getPerformanceScore();
const updatedSchema = {
...schema,
aiAnalysis: {
purpose: detectFormPurpose(schema.title, schema.description),
conversionOptimizations: optimizations,
performanceScore,
accessibilityScore,
recommendations: [...optimizations, ...(accessibilityScore < 90 ? ["Improve accessibility compliance"] : []), ...(performanceScore < 80 ? ["Optimize form performance"] : [])]
}
};
setSchema(updatedSchema);
setAIRecommendations(updatedSchema.aiAnalysis.recommendations);
setIsAnalyzing(false);
onSchemaChange?.(updatedSchema);
}, 1000);
}, 500);
return () => clearTimeout(analysisTimeoutRef.current);
}, [schema.fields, enableAIAssistance]);
const detectFormPurpose = (title, description) => {
const combined = (title + " " + description).toLowerCase();
if (combined.includes("contact") || combined.includes("support")) return "Contact/Support Form";
if (combined.includes("registration") || combined.includes("signup")) return "Registration Form";
if (combined.includes("login") || combined.includes("signin")) return "Authentication Form";
if (combined.includes("payment") || combined.includes("billing")) return "Payment Form";
if (combined.includes("feedback") || combined.includes("survey")) return "Feedback/Survey Form";
if (combined.includes("application") || combined.includes("apply")) return "Application Form";
return "General Purpose Form";
};
const calculateAccessibilityScore = fields => {
let score = 100;
fields.forEach(field => {
if (!field.label || field.label.trim() === "") score -= 10;
if (field.required && !field.validation) score -= 5;
if (field.type === "select" && (!field.options || field.options.length === 0)) score -= 10;
});
return Math.max(0, score);
};
const addField = useCallback(() => {
const newField = {
id: `field-${Date.now()}`,
type: "text",
label: "New Field",
required: false
};
setSchema(prev => ({
...prev,
fields: [...prev.fields, newField]
}));
}, []);
const updateField = useCallback((index, updates) => {
setSchema(prev => ({
...prev,
fields: prev.fields.map((field, i) => {
if (i === index) {
const updatedField = {
...field,
...updates
};
// AI-powered field analysis
if (enableAIAssistance && (updates.label || updates.type)) {
updatedField.aiSuggestions = analyzeFieldPurpose(updatedField.label, prev.title + " " + prev.description);
}
return updatedField;
}
return field;
})
}));
}, [enableAIAssistance]);
const removeField = useCallback(index => {
setSchema(prev => ({
...prev,
fields: prev.fields.filter((_, i) => i !== index)
}));
if (selectedFieldIndex === index) {
setSelectedFieldIndex(null);
}
}, [selectedFieldIndex]);
const validateForm = useCallback(() => {
const errors = {};
if (!schema.title.trim()) {
errors.title = "Form title is required";
}
schema.fields.forEach((field, index) => {
if (!field.label.trim()) {
errors[`field-${index}-label`] = "Field label is required";
}
if (field.type === "select" && (!field.options || field.options.length === 0)) {
errors[`field-${index}-options`] = "Select fields must have options";
}
});
setValidationErrors(errors);
return Object.keys(errors).length === 0;
}, [schema]);
const exportSchema = useCallback(() => {
if (!validateForm()) return;
const exportData = {
...schema,
exportedAt: new Date().toISOString(),
version: "1.0.0"
};
const blob = new Blob([JSON.stringify(exportData, null, 2)], {
type: "application/json"
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${schema.title.replace(/\s+/g, "-").toLowerCase()}-schema.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, [schema, validateForm]);
return jsxs("div", {
"data-glass-component": true,
className: "glass-w-full glass-container-6xl glass-mx-auto glass-p-6",
children: [jsxs(GlassCore, {
className: "glass-p-6",
children: [jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-between mb-6',
children: [jsxs("div", {
children: [jsx("h1", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "\uD83E\uDD16 Intelligent Form Builder"
}), jsx("p", {
className: 'glass-text-secondary mt-1',
children: "AI-powered form creation with real-time optimization"
})]
}), jsxs("div", {
className: "glass-flex glass-gap-3",
children: [jsx("button", {
onClick: exportSchema,
className: 'glass-px-4 glass-py-2 glass-surface-blue text-primary glass-radius-lg hover:glass-surface-blue transition-colors glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
children: "Export Schema"
}), jsx("button", {
onClick: addField,
className: 'glass-px-4 glass-py-2 glass-surface-green text-primary glass-radius-lg hover:glass-surface-green transition-colors glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
children: "+ Add Field"
})]
})]
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-1 lg:grid-cols-2 glass-gap-6 mb-6',
children: [jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium glass-text-secondary mb-2',
children: "Form Title *"
}), jsx("input", {
type: "text",
value: schema.title,
onChange: e => setSchema(prev => ({
...prev,
title: e.target.value
})),
className: cn("glass-w-full glass-px-3 glass-py-2 glass-border glass-radius-lg glass-focus", validationErrors.title ? "border-red-500" : "border-gray-300"),
placeholder: "Enter form title..."
}), validationErrors.title && jsx("p", {
className: 'text-primary glass-text-sm mt-1',
children: validationErrors.title
})]
}), jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium glass-text-secondary mb-2',
children: "Description"
}), jsx("input", {
type: "text",
value: schema.description,
onChange: e => setSchema(prev => ({
...prev,
description: e.target.value
})),
className: "glass-w-full glass-px-3 glass-py-2 glass-border glass-border-subtle glass-radius-lg glass-focus",
placeholder: "Describe the purpose of this form..."
})]
})]
}), enableAIAssistance && schema.aiAnalysis && jsxs("div", {
className: "glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-xl glass-p-6",
children: [jsxs("div", {
className: 'glass-flex glass-items-center glass-gap-3 mb-4',
children: [jsx("div", {
className: 'w-8 h-8 glass-surface-blue glass-radius-full glass-flex glass-items-center glass-justify-center',
children: jsx("span", {
className: 'text-primary glass-text-sm',
children: "\uD83E\uDD16"
})
}), jsxs("div", {
children: [jsx("h3", {
className: 'font-semibold glass-text-secondary',
children: "AI Analysis"
}), jsxs("p", {
className: "glass-text-sm glass-text-secondary",
children: ["Detected Purpose: ", schema.aiAnalysis.purpose]
})]
}), isAnalyzing && jsx("div", {
className: 'ml-auto',
children: jsx("div", {
className: 'animate-spin w-5 h-5 glass-border-2 glass-border-blue glass-border-t-transparent glass-radius-full'
})
})]
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-1 lg:grid-cols-3 glass-gap-4 mb-4',
children: [jsxs("div", {
className: 'text-center',
children: [jsxs("div", {
className: 'glass-text-2xl font-bold text-primary',
children: [schema.aiAnalysis.accessibilityScore, "%"]
}), jsx("div", {
className: "glass-text-sm glass-text-secondary",
children: "Accessibility Score"
})]
}), jsxs("div", {
className: 'text-center',
children: [jsxs("div", {
className: 'glass-text-2xl font-bold text-primary',
children: [schema.aiAnalysis.performanceScore, "/100"]
}), jsx("div", {
className: "glass-text-sm glass-text-secondary",
children: "Performance Score"
})]
}), jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'glass-text-2xl font-bold text-primary',
children: schema.fields.length
}), jsx("div", {
className: "glass-text-sm glass-text-secondary",
children: "Total Fields"
})]
})]
}), schema.aiAnalysis.recommendations.length > 0 && jsxs("div", {
children: [jsx("h4", {
className: 'font-medium glass-text-secondary mb-2',
children: "\uD83C\uDFAF AI Recommendations:"
}), jsx("ul", {
className: 'space-y-1',
children: schema.aiAnalysis.recommendations.slice(0, 3).map((rec, index) => jsxs("li", {
className: "glass-text-sm glass-text-secondary glass-flex glass-items-center glass-gap-2",
children: [jsx("span", {
className: 'w-1.5 h-1.5 glass-surface-blue glass-radius-full'
}), rec]
}, index))
})]
})]
})]
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-1 lg:grid-cols-2 glass-gap-8',
children: [jsxs(GlassCore, {
className: "glass-p-6",
children: [jsx("h2", {
className: 'glass-text-lg font-semibold glass-text-secondary mb-4',
children: "Form Fields"
}), jsxs("div", {
className: 'space-y-4 max-h-96 overflow-y-auto',
children: [schema.fields.map((field, index) => jsxs("div", {
className: cn("glass-p-4 glass-border glass-radius-lg glass-cursor-pointer glass-transition", selectedFieldIndex === index ? "glass-surface-primary/10" : "glass-border-subtle hover:glass-border"),
onClick: () => setSelectedFieldIndex(index),
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between",
children: [jsxs("div", {
className: "glass-flex-1",
children: [jsx("div", {
className: 'font-medium glass-text-secondary',
children: field.label
}), jsxs("div", {
className: 'glass-text-sm glass-text-secondary capitalize',
children: [field.type, " ", field.required && "• Required"]
})]
}), jsx("button", {
onClick: e => {
e.stopPropagation();
removeField(index);
},
className: 'text-primary hover:text-primary glass-p-1',
children: "\u2715"
})]
}), enableAIAssistance && field.aiSuggestions && field.aiSuggestions.fieldType.length > 0 && jsx("div", {
className: 'mt-2 glass-flex glass-flex-wrap glass-gap-1',
children: field.aiSuggestions.fieldType.slice(0, 2).map((suggestion, i) => jsxs("span", {
className: 'glass-px-2 glass-py-1 glass-text-xs glass-surface-subtle text-primary glass-radius',
children: ["\uD83D\uDCA1 ", suggestion]
}, i))
})]
}, field.id)), schema.fields.length === 0 && jsxs("div", {
className: 'text-center glass-py-8 glass-text-secondary',
children: [jsx("div", {
className: 'glass-text-4xl mb-2',
children: "\uD83D\uDCDD"
}), jsx("p", {
children: "No fields yet. Click \"Add Field\" to get started."
})]
})]
})]
}), jsxs(GlassCore, {
className: "glass-p-6",
children: [jsx("h2", {
className: 'glass-text-lg font-semibold glass-text-secondary mb-4',
children: "Field Editor"
}), selectedFieldIndex !== null && schema.fields[selectedFieldIndex] ? jsx("div", {
className: 'space-y-4',
children: (() => {
const field = schema.fields[selectedFieldIndex];
return jsxs(Fragment, {
children: [jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium glass-text-secondary mb-2',
children: "Field Label *"
}), jsx("input", {
type: "text",
value: field.label,
onChange: e => updateField(selectedFieldIndex, {
label: e.target.value
}),
className: cn("glass-w-full glass-px-3 glass-py-2 glass-border glass-radius-lg glass-focus", validationErrors[`field-${selectedFieldIndex}-label`] ? "border-red-500" : "border-gray-300"),
placeholder: "Enter field label..."
}), validationErrors[`field-${selectedFieldIndex}-label`] && jsx("p", {
className: 'text-primary glass-text-sm mt-1',
children: validationErrors[`field-${selectedFieldIndex}-label`]
})]
}), jsxs("div", {
className: "glass-grid glass-grid-cols-2 glass-gap-4",
children: [jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium glass-text-secondary mb-2',
children: "Field Type"
}), jsxs("select", {
value: field.type,
onChange: e => updateField(selectedFieldIndex, {
type: e.target.value
}),
className: "glass-w-full glass-px-3 glass-py-2 glass-border glass-border-subtle glass-radius-lg glass-focus",
children: [jsx("option", {
value: "text",
children: "Text"
}), jsx("option", {
value: "email",
children: "Email"
}), jsx("option", {
value: "password",
children: "Password"
}), jsx("option", {
value: "tel",
children: "Phone"
}), jsx("option", {
value: "number",
children: "Number"
}), jsx("option", {
value: "date",
children: "Date"
}), jsx("option", {
value: "url",
children: "URL"
}), jsx("option", {
value: "textarea",
children: "Textarea"
}), jsx("option", {
value: "select",
children: "Select"
}), jsx("option", {
value: "checkbox",
children: "Checkbox"
}), jsx("option", {
value: "radio",
children: "Radio"
}), jsx("option", {
value: "file",
children: "File Upload"
})]
})]
}), jsx("div", {
className: "glass-flex glass-items-center",
children: jsxs("label", {
className: 'glass-flex glass-items-center glass-gap-2 glass-text-sm font-medium glass-text-secondary',
children: [jsx("input", {
type: "checkbox",
checked: field.required || false,
onChange: e => updateField(selectedFieldIndex, {
required: e.target.checked
}),
className: 'glass-radius glass-border-subtle text-primary glass-focus'
}), "Required Field"]
})
})]
}), jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium glass-text-secondary mb-2',
children: "Placeholder Text"
}), jsx("input", {
type: "text",
value: field.placeholder || "",
onChange: e => updateField(selectedFieldIndex, {
placeholder: e.target.value
}),
className: "glass-w-full glass-px-3 glass-py-2 glass-border glass-border-subtle glass-radius-lg glass-focus",
placeholder: "Enter placeholder text..."
})]
}), (field.type === "select" || field.type === "radio") && jsxs("div", {
children: [jsx("label", {
className: 'block glass-text-sm font-medium glass-text-secondary mb-2',
children: "Options"
}), jsxs("div", {
className: 'space-y-2',
children: [(field.options || []).map((option, optionIndex) => jsxs("div", {
className: "glass-flex glass-gap-2",
children: [jsx("input", {
type: "text",
value: option.value,
onChange: e => {
const newOptions = [...(field.options || [])];
newOptions[optionIndex] = {
...option,
value: e.target.value
};
updateField(selectedFieldIndex, {
options: newOptions
});
},
placeholder: "Value",
className: "glass-flex-1 glass-px-3 glass-py-2 glass-border glass-border-subtle glass-radius-lg glass-focus"
}), jsx("input", {
type: "text",
value: option.label,
onChange: e => {
const newOptions = [...(field.options || [])];
newOptions[optionIndex] = {
...option,
label: e.target.value
};
updateField(selectedFieldIndex, {
options: newOptions
});
},
placeholder: "Label",
className: "glass-flex-1 glass-px-3 glass-py-2 glass-border glass-border-subtle glass-radius-lg glass-focus"
}), jsx("button", {
onClick: () => {
const newOptions = (field.options || []).filter((_, i) => i !== optionIndex);
updateField(selectedFieldIndex, {
options: newOptions
});
},
className: 'glass-px-3 glass-py-2 text-primary hover:text-primary',
children: "\u2715"
})]
}, optionIndex)), jsx("button", {
onClick: () => {
const newOptions = [...(field.options || []), {
value: "",
label: ""
}];
updateField(selectedFieldIndex, {
options: newOptions
});
},
className: 'glass-w-full glass-px-3 glass-py-2 glass-border glass-border-dashed glass-border-subtle glass-radius-lg glass-text-secondary hover:border-subtle transition-colors',
children: "+ Add Option"
})]
}), validationErrors[`field-${selectedFieldIndex}-options`] && jsx("p", {
className: 'text-primary glass-text-sm mt-1',
children: validationErrors[`field-${selectedFieldIndex}-options`]
})]
}), enableAIAssistance && field.aiSuggestions && jsxs("div", {
className: "glass-surface-subtle glass-radius-lg glass-p-4",
children: [jsx("h4", {
className: 'font-medium glass-text-secondary mb-2',
children: "\uD83E\uDD16 AI Suggestions"
}), field.aiSuggestions.fieldType.length > 0 && jsxs("div", {
className: 'mb-3',
children: [jsx("h5", {
className: 'glass-text-sm font-medium glass-text-secondary',
children: "Recommended Field Types:"
}), jsx("div", {
className: 'glass-flex glass-flex-wrap glass-gap-1 mt-1',
children: field.aiSuggestions.fieldType.map((type, i) => jsx("button", {
onClick: () => updateField(selectedFieldIndex, {
type: type
}),
className: 'glass-px-2 glass-py-1 glass-text-xs glass-surface-subtle text-primary glass-radius hover:glass-surface-subtle transition-colors',
children: type
}, i))
})]
}), field.aiSuggestions.validationRules.length > 0 && jsxs("div", {
className: 'mb-3',
children: [jsx("h5", {
className: 'glass-text-sm font-medium glass-text-secondary',
children: "Validation Suggestions:"
}), jsx("ul", {
className: 'glass-text-xs glass-text-secondary mt-1 space-y-1',
children: field.aiSuggestions.validationRules.slice(0, 2).map((rule, i) => jsxs("li", {
className: "glass-flex glass-items-center glass-gap-1",
children: [jsx("span", {
className: 'w-1 h-1 glass-surface-green glass-radius-full'
}), rule]
}, i))
})]
}), field.aiSuggestions.uxOptimizations.length > 0 && jsxs("div", {
children: [jsx("h5", {
className: 'glass-text-sm font-medium glass-text-secondary',
children: "UX Optimizations:"
}), jsx("ul", {
className: 'glass-text-xs glass-text-secondary mt-1 space-y-1',
children: field.aiSuggestions.uxOptimizations.slice(0, 2).map((opt, i) => jsxs("li", {
className: "glass-flex glass-items-center glass-gap-1",
children: [jsx("span", {
className: 'w-1 h-1 glass-surface-primary glass-radius-full'
}), opt]
}, i))
})]
})]
})]
});
})()
}) : jsxs("div", {
className: 'text-center glass-py-8 glass-text-secondary',
children: [jsx("div", {
className: 'glass-text-4xl mb-2',
children: "\u2699\uFE0F"
}), jsx("p", {
children: "Select a field from the left to edit its properties"
})]
})]
})]
}), jsxs(GlassCore, {
className: "glass-p-6",
children: [jsx("h2", {
className: 'glass-text-lg font-semibold glass-text-secondary mb-4',
children: "Live Preview"
}), jsx("div", {
className: "glass-surface-subtle glass-radius-lg glass-p-6",
children: jsxs("form", {
className: 'max-w-2xl glass-mx-auto space-y-6',
children: [jsxs("div", {
className: 'text-center mb-8',
children: [jsx("h2", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: schema.title
}), schema.description && jsx("p", {
className: 'glass-text-secondary mt-2',
children: schema.description
})]
}), schema.fields.map((field, index) => jsxs("div", {
children: [jsxs("label", {
className: 'block glass-text-sm font-medium glass-text-secondary mb-2',
children: [field.label, field.required && jsx("span", {
className: 'text-primary ml-1',
children: "*"
})]
}), field.type === "textarea" ? jsx("textarea", {
placeholder: field.placeholder,
required: field.required,
className: "glass-w-full glass-px-3 glass-py-2 glass-border glass-border-subtle glass-radius-lg glass-focus glass-touch-target glass-contrast-guard",
rows: 3
}) : field.type === "select" ? jsxs("select", {
required: field.required,
className: "glass-w-full glass-px-3 glass-py-2 glass-border glass-border-subtle glass-radius-lg glass-focus glass-touch-target glass-contrast-guard",
children: [jsx("option", {
value: "",
children: "Choose an option..."
}), (field.options || []).map((option, i) => jsx("option", {
value: option.value,
children: option.label
}, i))]
}) : field.type === "checkbox" ? jsxs("label", {
className: "glass-flex glass-items-center glass-gap-2",
children: [jsx("input", {
type: "checkbox",
required: field.required,
className: 'glass-radius glass-border-subtle text-primary glass-focus glass-touch-target glass-contrast-guard'
}), jsx("span", {
className: "glass-text-sm glass-text-secondary",
children: field.placeholder || "Check this option"
})]
}) : field.type === "radio" ? jsx("div", {
className: 'space-y-2',
children: (field.options || []).map((option, i) => jsxs("label", {
className: "glass-flex glass-items-center glass-gap-2",
children: [jsx("input", {
type: "radio",
name: field.id,
value: option.value,
required: field.required,
className: 'glass-border-subtle text-primary glass-focus glass-touch-target glass-contrast-guard'
}), jsx("span", {
className: "glass-text-sm glass-text-secondary",
children: option.label
})]
}, i))
}) : jsx("input", {
type: field.type,
placeholder: field.placeholder,
required: field.required,
className: "glass-w-full glass-px-3 glass-py-2 glass-border glass-border-subtle glass-radius-lg glass-focus glass-touch-target glass-contrast-guard"
})]
}, field.id)), schema.fields.length > 0 && jsx("div", {
className: 'pt-6 glass-border-t',
children: jsx("button", {
type: "button",
className: 'glass-w-full glass-px-6 glass-py-3 glass-surface-blue text-primary glass-radius-lg hover:glass-surface-blue transition-colors font-medium',
children: "Submit Form"
})
})]
})
})]
})]
});
};
export { GlassIntelligentFormBuilder, GlassIntelligentFormBuilder as default };
//# sourceMappingURL=GlassIntelligentFormBuilder.js.map