@qwickapps/react-framework 1.5.13 → 1.7.0

package/dist/index.js

@@ -1274,6 +1274,18 @@ const PaletteAutumn = {
   primaryColor: '#ea580c'
 };
 
+/**
+ * Boutique Palette Configuration
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+const PaletteBoutique = {
+  id: 'boutique',
+  name: 'Boutique',
+  description: 'Sophisticated teal, bronze, and navy - perfect for premium retail and fashion brands',
+  primaryColor: '#3ca6b6'
+};
+
 /**
  * Ocean Palette Configuration
  *
@@ -1327,7 +1339,7 @@ const PaletteCosmic = {
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-const AllPalettes = [PaletteDefault, PaletteOcean, PaletteCosmic, PaletteWinter, PaletteAutumn, PaletteSpring];
+const AllPalettes = [PaletteDefault, PaletteBoutique, PaletteOcean, PaletteCosmic, PaletteWinter, PaletteAutumn, PaletteSpring];
 
 /**
  * Persistence utilities for theme and palette preferences
@@ -18495,6 +18507,20 @@ class ReactNodeTransformer {
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
+// Import linkedom for server-side HTML parsing
+let parseHTML = null;
+if (typeof window === 'undefined') {
+  // Server-side: use linkedom
+  try {
+    const {
+      parseHTML: parse
+    } = require('linkedom');
+    parseHTML = html => parse(html).document;
+  } catch (e) {
+    // linkedom not available, will fall back to client-only rendering
+    console.warn('linkedom not available for SSR HTML parsing');
+  }
+}
 /**
  * Registry for component classes that support serialization
  */
@@ -18803,13 +18829,27 @@ let ComponentTransformer$1 = class ComponentTransformer {
   }
   /**
    * Transform HTML string to React nodes using registered patterns
+   * Supports both server-side (linkedom) and client-side (DOMParser) rendering
    * @param html - HTML string to transform
    * @returns Array of React nodes
    */
   static transformHTML(html) {
     if (!html.trim()) return [];
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
+    let doc;
+    // Server-side: use linkedom if available
+    if (typeof window === 'undefined') {
+      if (parseHTML) {
+        doc = parseHTML(html);
+      } else {
+        // linkedom not available, return empty for client-side rendering
+        console.warn('SSR HTML parsing unavailable - content will render client-side only');
+        return [];
+      }
+    } else {
+      // Client-side: use DOMParser
+      const parser = new DOMParser();
+      doc = parser.parseFromString(html, 'text/html');
+    }
     return Array.from(doc.body.children).map((element, index) => ComponentTransformer.transformElement(element, `element-${index}`));
   }
   /**
@@ -22976,36 +23016,31 @@ function DialogContentText({
   });
 }
 
-const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    value,
-    onChange,
-    onChangeRaw,
-    type = 'text',
-    helperText,
-    required = false,
-    readOnly = false,
-    disabled = false,
-    disabledColor,
-    fullWidth = true,
-    multiline = false,
-    rows,
-    placeholder,
-    startAdornment,
-    endAdornment,
-    inputProps
-  } = restProps;
-  // Generate a unique ID for the input field
+/**
+ * FormFieldView - Pure view component that renders the input field
+ */
+function FormFieldView({
+  label,
+  value,
+  onChange,
+  onChangeRaw,
+  type = 'text',
+  helperText,
+  required = false,
+  readOnly = false,
+  disabled = false,
+  disabledColor,
+  fullWidth = true,
+  multiline = false,
+  rows,
+  placeholder,
+  startAdornment,
+  endAdornment,
+  inputProps,
+  ...restProps
+}) {
   const fieldId = React.useId();
   const handleChange = e => {
-    // If onChangeRaw is provided, use it instead
     if (onChangeRaw) {
       onChangeRaw(e);
       return;
@@ -23029,8 +23064,7 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
     '& input.Mui-disabled': disabledColor ? {
       color: disabledColor,
       WebkitTextFillColor: disabledColor
-    } : undefined,
-    ...styleProps.sx
+    } : undefined
   };
   const labelStyles = {
     left: -12,
@@ -23041,18 +23075,8 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: 'var(--theme-secondary)'
   };
   return jsxRuntime.jsxs(material.FormControl, {
-    ref: ref,
     fullWidth: fullWidth,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [jsxRuntime.jsx(material.InputLabel, {
       htmlFor: fieldId,
       sx: labelStyles,
@@ -23084,32 +23108,33 @@ const FormField = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormField.displayName = 'FormField';
-// Mark as QwickApp component
-Object.assign(FormField, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormField component using the factory pattern
+ */
+const FormField = createSerializableView({
+  tagName: 'FormField',
+  version: '1.0.0',
+  role: 'input',
+  View: FormFieldView
 });
 
-const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    value,
-    onChange,
-    options,
-    helperText,
-    required = false,
-    disabled = false,
-    fullWidth = true,
-    size = 'small',
-    placeholder
-  } = restProps;
+/**
+ * FormSelectView - Pure view component that renders the select field
+ */
+function FormSelectView({
+  label,
+  value,
+  onChange,
+  options,
+  helperText,
+  required = false,
+  disabled = false,
+  fullWidth = true,
+  size = 'small',
+  placeholder,
+  ...restProps
+}) {
   const handleChange = e => {
     onChange(e.target.value);
   };
@@ -23123,8 +23148,7 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     backgroundColor: 'var(--theme-surface-variant)',
     borderColor: 'var(--theme-surface)',
     color: 'var(--theme-text-primary)',
-    borderRadius: 1,
-    ...styleProps.sx
+    borderRadius: 1
   };
   const labelStyles = {
     left: -12,
@@ -23135,19 +23159,9 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
     color: 'var(--theme-secondary)'
   };
   return jsxRuntime.jsxs(material.FormControl, {
-    ref: ref,
     fullWidth: fullWidth,
     size: size,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [label && jsxRuntime.jsx(material.InputLabel, {
       sx: labelStyles,
       shrink: true,
@@ -23172,28 +23186,29 @@ const FormSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormSelect.displayName = 'FormSelect';
-// Mark as QwickApp component
-Object.assign(FormSelect, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormSelect component using the factory pattern
+ */
+const FormSelect = createSerializableView({
+  tagName: 'FormSelect',
+  version: '1.0.0',
+  role: 'input',
+  View: FormSelectView
 });
 
-const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    label,
-    checked,
-    onChange,
-    helperText,
-    required = false,
-    disabled = false
-  } = restProps;
+/**
+ * FormCheckboxView - Pure view component that renders the checkbox
+ */
+function FormCheckboxView({
+  label,
+  checked,
+  onChange,
+  helperText,
+  required = false,
+  disabled = false,
+  ...restProps
+}) {
   const handleChange = e => {
     onChange(e.target.checked);
   };
@@ -23213,25 +23228,14 @@ const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     '& .MuiFormControlLabel-label.Mui-disabled': {
       color: 'var(--theme-text-disabled)'
-    },
-    ...styleProps.sx
+    }
   };
   const helperTextStyles = {
     color: 'var(--theme-secondary)',
-    marginLeft: '32px' // Align with checkbox + label
+    marginLeft: '32px'
   };
   return jsxRuntime.jsxs(material.FormControl, {
-    ref: ref,
-    ...htmlProps,
-    ...styleProps,
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
+    ...restProps,
     children: [jsxRuntime.jsx(material.FormControlLabel, {
       control: jsxRuntime.jsx(material.Checkbox, {
         checked: checked,
@@ -23247,30 +23251,31 @@ const FormCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
       children: helperText
     })]
   });
-});
-FormCheckbox.displayName = 'FormCheckbox';
-// Mark as QwickApp component
-Object.assign(FormCheckbox, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create FormCheckbox component using the factory pattern
+ */
+const FormCheckbox = createSerializableView({
+  tagName: 'FormCheckbox',
+  version: '1.0.0',
+  role: 'input',
+  View: FormCheckboxView
 });
 
-const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    gridProps,
-    styleProps,
-    htmlProps,
-    restProps
-  } = useBaseProps(props);
-  const {
-    provider,
-    siteKey,
-    onVerify,
-    onExpire,
-    onError,
-    theme = 'light',
-    size = 'normal',
-    action = 'submit'
-  } = restProps;
+/**
+ * CaptchaView - Pure view component that renders the CAPTCHA widget
+ */
+function CaptchaView({
+  provider,
+  siteKey,
+  onVerify,
+  onExpire,
+  onError,
+  theme = 'light',
+  size = 'normal',
+  action = 'submit',
+  ...restProps
+}) {
   const containerRef = React.useRef(null);
   const widgetIdRef = React.useRef(null);
   const [isLoaded, setIsLoaded] = React.useState(false);
@@ -23343,7 +23348,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
       try {
         switch (provider) {
           case 'recaptcha-v2':
-            if (window.grecaptcha && window.grecaptcha.render) {
+            if (window.grecaptcha?.render) {
               widgetIdRef.current = window.grecaptcha.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -23360,7 +23365,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             break;
           case 'recaptcha-v3':
             // reCAPTCHA v3 is invisible and executes programmatically
-            if (window.grecaptcha && window.grecaptcha.execute) {
+            if (window.grecaptcha?.execute) {
               window.grecaptcha.execute(siteKey, {
                 action
               }).then(token => {
@@ -23372,7 +23377,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
             break;
           case 'hcaptcha':
-            if (window.hcaptcha && window.hcaptcha.render) {
+            if (window.hcaptcha?.render) {
               widgetIdRef.current = window.hcaptcha.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -23388,7 +23393,7 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
             }
             break;
           case 'turnstile':
-            if (window.turnstile && window.turnstile.render) {
+            if (window.turnstile?.render) {
               widgetIdRef.current = window.turnstile.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -23439,20 +23444,10 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
     return null;
   }
   return jsxRuntime.jsxs(material.Box, {
-    ref: ref,
-    ...htmlProps,
+    ...restProps,
     sx: {
-      my: 2,
-      ...styleProps.sx
+      my: 2
     },
-    ...(gridProps && {
-      'data-grid-span': gridProps.span,
-      'data-grid-xs': gridProps.xs,
-      'data-grid-sm': gridProps.sm,
-      'data-grid-md': gridProps.md,
-      'data-grid-lg': gridProps.lg,
-      'data-grid-xl': gridProps.xl
-    }),
     children: [error && jsxRuntime.jsx(material.Alert, {
       severity: "error",
       sx: {
@@ -23463,11 +23458,15 @@ const Captcha = /*#__PURE__*/React.forwardRef((props, ref) => {
       ref: containerRef
     })]
   });
-});
-Captcha.displayName = 'Captcha';
-// Mark as QwickApp component
-Object.assign(Captcha, {
-  [QWICKAPP_COMPONENT]: true
+}
+/**
+ * Create Captcha component using the factory pattern
+ */
+const Captcha = createSerializableView({
+  tagName: 'Captcha',
+  version: '1.0.0',
+  role: 'input',
+  View: CaptchaView
 });
 
 /**
@@ -24595,7 +24594,7 @@ const Scaffold = ({
           className: "appbar-right",
           children: [enhancedAppBar?.actions && jsxRuntime.jsx("div", {
             className: "appbar-actions",
-            children: enhancedAppBar.actions
+            children: typeof enhancedAppBar.actions === 'function' ? enhancedAppBar.actions() : enhancedAppBar.actions
           }, "appbar-actions"), jsxRuntime.jsxs("div", {
             className: "appbar-theme-controls",
             children: [showThemeSwitcher && jsxRuntime.jsx(ThemeSwitcher, {}, "theme-switcher"), showPaletteSwitcher && jsxRuntime.jsx(PaletteSwitcher, {}, "palette-switcher")]
@@ -31066,6 +31065,240 @@ __decorate([schema.Field(), schema.Editor({
 }), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormBlockModel.prototype, "backgroundImage", void 0);
 exports.FormBlockModel = __decorate([schema.Schema('FormBlock', '1.0.0')], exports.FormBlockModel);
 
+/**
+ * Schema for FormSelect component - Themed dropdown select input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+exports.FormSelectModel = class FormSelectModel extends ViewSchema {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the select field',
+  placeholder: 'Enter label...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "label", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Value',
+  description: 'Current selected value',
+  placeholder: ''
+}), classValidator.IsString(), __metadata("design:type", Object)], exports.FormSelectModel.prototype, "value", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Options',
+  description: 'Select options as JSON array: [{"value": "1", "label": "Option 1"}]',
+  placeholder: '[{"value": "1", "label": "Option 1"}]'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "options", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the select',
+  placeholder: 'Enter helper text...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "helperText", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Mark field as required'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormSelectModel.prototype, "required", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the select field'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormSelectModel.prototype, "disabled", void 0);
+__decorate([schema.Field({
+  defaultValue: true
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Full Width',
+  description: 'Make select take full width of container'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormSelectModel.prototype, "fullWidth", void 0);
+__decorate([schema.Field({
+  defaultValue: 'small'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Size',
+  description: 'Size variant of the select field'
+}), classValidator.IsOptional(), classValidator.IsIn(['small', 'medium']), __metadata("design:type", String)], exports.FormSelectModel.prototype, "size", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Placeholder',
+  description: 'Placeholder text when no value is selected',
+  placeholder: 'Select an option...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormSelectModel.prototype, "placeholder", void 0);
+exports.FormSelectModel = __decorate([schema.Schema('FormSelect', '1.0.0')], exports.FormSelectModel);
+
+/**
+ * Schema for FormField component - Themed text/number input field
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+exports.FormFieldModel = class FormFieldModel extends ViewSchema {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the input field',
+  placeholder: 'Enter label...'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "label", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Value',
+  description: 'Current input value',
+  placeholder: ''
+}), classValidator.IsString(), __metadata("design:type", Object)], exports.FormFieldModel.prototype, "value", void 0);
+__decorate([schema.Field({
+  defaultValue: 'text'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Input Type',
+  description: 'Type of input field'
+}), classValidator.IsOptional(), classValidator.IsIn(['text', 'number', 'password', 'email', 'tel']), __metadata("design:type", String)], exports.FormFieldModel.prototype, "type", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the input',
+  placeholder: 'Enter helper text...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "helperText", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Mark field as required'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "required", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Read Only',
+  description: 'Make field read-only'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "readOnly", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the input field'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "disabled", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Disabled Color',
+  description: 'Custom color for disabled state (CSS color value)',
+  placeholder: 'var(--theme-text-disabled)'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "disabledColor", void 0);
+__decorate([schema.Field({
+  defaultValue: true
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Full Width',
+  description: 'Make input take full width of container'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "fullWidth", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Multiline',
+  description: 'Enable multiline textarea mode'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormFieldModel.prototype, "multiline", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Rows',
+  description: 'Number of rows for multiline textarea',
+  placeholder: '4'
+}), classValidator.IsOptional(), classValidator.IsInt(), classValidator.Min(1), __metadata("design:type", Number)], exports.FormFieldModel.prototype, "rows", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Placeholder',
+  description: 'Placeholder text',
+  placeholder: 'Enter text...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormFieldModel.prototype, "placeholder", void 0);
+exports.FormFieldModel = __decorate([schema.Schema('FormField', '1.0.0')], exports.FormFieldModel);
+
+/**
+ * Schema for FormCheckbox component - Themed checkbox input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+exports.FormCheckboxModel = class FormCheckboxModel extends ViewSchema {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'Label text for the checkbox',
+  placeholder: 'Enter label...'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.FormCheckboxModel.prototype, "label", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Checked',
+  description: 'Checkbox checked state'
+}), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormCheckboxModel.prototype, "checked", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text displayed below the checkbox',
+  placeholder: 'Enter helper text...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.FormCheckboxModel.prototype, "helperText", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Mark checkbox as required'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormCheckboxModel.prototype, "required", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Disable the checkbox'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], exports.FormCheckboxModel.prototype, "disabled", void 0);
+exports.FormCheckboxModel = __decorate([schema.Schema('FormCheckbox', '1.0.0')], exports.FormCheckboxModel);
+
+/**
+ * Schema for Captcha component - Universal CAPTCHA widget
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+exports.CaptchaModel = class CaptchaModel extends ViewSchema {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'CAPTCHA Provider',
+  description: 'Which CAPTCHA service to use'
+}), classValidator.IsIn(['recaptcha-v2', 'recaptcha-v3', 'hcaptcha', 'turnstile']), __metadata("design:type", String)], exports.CaptchaModel.prototype, "provider", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Site Key',
+  description: 'Public site key from CAPTCHA provider',
+  placeholder: 'Enter site key...'
+}), classValidator.IsString(), __metadata("design:type", String)], exports.CaptchaModel.prototype, "siteKey", void 0);
+__decorate([schema.Field({
+  defaultValue: 'light'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Theme',
+  description: 'CAPTCHA widget theme'
+}), classValidator.IsOptional(), classValidator.IsIn(['light', 'dark']), __metadata("design:type", String)], exports.CaptchaModel.prototype, "theme", void 0);
+__decorate([schema.Field({
+  defaultValue: 'normal'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Size',
+  description: 'CAPTCHA widget size'
+}), classValidator.IsOptional(), classValidator.IsIn(['normal', 'compact', 'invisible']), __metadata("design:type", String)], exports.CaptchaModel.prototype, "size", void 0);
+__decorate([schema.Field({
+  defaultValue: 'submit'
+}), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Action',
+  description: 'reCAPTCHA v3 action name',
+  placeholder: 'submit'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], exports.CaptchaModel.prototype, "action", void 0);
+exports.CaptchaModel = __decorate([schema.Schema('Captcha', '1.0.0')], exports.CaptchaModel);
+
 /**
  * FooterSection Schema - Defines data structure for footer sections
  *
@@ -33293,6 +33526,7 @@ exports.OptionSelector = OptionSelector;
 exports.Page = Page;
 exports.PageBannerHeader = PageBannerHeader;
 exports.PaletteAutumn = PaletteAutumn;
+exports.PaletteBoutique = PaletteBoutique;
 exports.PaletteCosmic = PaletteCosmic;
 exports.PaletteDefault = PaletteDefault;
 exports.PaletteOcean = PaletteOcean;