@qwickapps/react-framework 1.5.13 → 1.6.0

package/dist/palettes/manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "./manifest.schema.json",
-  "version": "1.5.13",
+  "version": "1.6.0",
   "palettes": [
     {
       "id": "default",
@@ -8,11 +8,11 @@
       "description": "Classic blue and neutral color scheme - the original QwickApps palette",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.13",
-      "file": "palette-default.1.5.13.css",
+      "version": "1.6.0",
+      "file": "palette-default.1.6.0.css",
       "primaryColor": "#007bff",
       "inlined": true,
-      "fileMinified": "palette-default.1.5.13.min.css",
+      "fileMinified": "palette-default.1.6.0.min.css",
       "fileLatest": "palette-default.latest.css",
       "fileLatestMinified": "palette-default.latest.min.css"
     },
@@ -22,11 +22,11 @@
       "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.13",
-      "file": "palette-autumn.1.5.13.css",
+      "version": "1.6.0",
+      "file": "palette-autumn.1.6.0.css",
       "primaryColor": "#ea580c",
       "inlined": false,
-      "fileMinified": "palette-autumn.1.5.13.min.css",
+      "fileMinified": "palette-autumn.1.6.0.min.css",
       "fileLatest": "palette-autumn.latest.css",
       "fileLatestMinified": "palette-autumn.latest.min.css"
     },
@@ -36,11 +36,11 @@
       "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.13",
-      "file": "palette-cosmic.1.5.13.css",
+      "version": "1.6.0",
+      "file": "palette-cosmic.1.6.0.css",
       "primaryColor": "#8b5cf6",
       "inlined": false,
-      "fileMinified": "palette-cosmic.1.5.13.min.css",
+      "fileMinified": "palette-cosmic.1.6.0.min.css",
       "fileLatest": "palette-cosmic.latest.css",
       "fileLatestMinified": "palette-cosmic.latest.min.css"
     },
@@ -50,11 +50,11 @@
       "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.13",
-      "file": "palette-ocean.1.5.13.css",
+      "version": "1.6.0",
+      "file": "palette-ocean.1.6.0.css",
       "primaryColor": "#0891b2",
       "inlined": false,
-      "fileMinified": "palette-ocean.1.5.13.min.css",
+      "fileMinified": "palette-ocean.1.6.0.min.css",
       "fileLatest": "palette-ocean.latest.css",
       "fileLatestMinified": "palette-ocean.latest.min.css"
     },
@@ -64,11 +64,11 @@
       "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.13",
-      "file": "palette-spring.1.5.13.css",
+      "version": "1.6.0",
+      "file": "palette-spring.1.6.0.css",
       "primaryColor": "#16a34a",
       "inlined": false,
-      "fileMinified": "palette-spring.1.5.13.min.css",
+      "fileMinified": "palette-spring.1.6.0.min.css",
       "fileLatest": "palette-spring.latest.css",
       "fileLatestMinified": "palette-spring.latest.min.css"
     },
@@ -78,11 +78,11 @@
       "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
       "author": "QwickApps",
       "license": "PolyForm-Shield-1.0.0",
-      "version": "1.5.13",
-      "file": "palette-winter.1.5.13.css",
+      "version": "1.6.0",
+      "file": "palette-winter.1.6.0.css",
       "primaryColor": "#0077be",
       "inlined": false,
-      "fileMinified": "palette-winter.1.5.13.min.css",
+      "fileMinified": "palette-winter.1.6.0.min.css",
       "fileLatest": "palette-winter.latest.css",
       "fileLatestMinified": "palette-winter.latest.min.css"
     }

package/dist/schemas/CaptchaSchema.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Schema for Captcha component - Universal CAPTCHA widget
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import 'reflect-metadata';
+import ViewSchema from './ViewSchema';
+export declare class CaptchaModel extends ViewSchema {
+    provider: 'recaptcha-v2' | 'recaptcha-v3' | 'hcaptcha' | 'turnstile';
+    siteKey: string;
+    theme?: 'light' | 'dark';
+    size?: 'normal' | 'compact' | 'invisible';
+    action?: string;
+}
+export default CaptchaModel;
+//# sourceMappingURL=CaptchaSchema.d.ts.map

package/dist/schemas/CaptchaSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptchaSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/CaptchaSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,qBACa,YAAa,SAAQ,UAAU;IAQ1C,QAAQ,EAAG,cAAc,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;IAUtE,OAAO,EAAG,MAAM,CAAC;IAUjB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAUzB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IAW1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAe,YAAY,CAAC"}

package/dist/schemas/FormCheckboxSchema.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Schema for FormCheckbox component - Themed checkbox input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import 'reflect-metadata';
+import ViewSchema from './ViewSchema';
+export declare class FormCheckboxModel extends ViewSchema {
+    label: string;
+    checked: boolean;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+}
+export default FormCheckboxModel;
+//# sourceMappingURL=FormCheckboxSchema.d.ts.map

package/dist/schemas/FormCheckboxSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCheckboxSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/FormCheckboxSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,qBACa,iBAAkB,SAAQ,UAAU;IAS/C,KAAK,EAAG,MAAM,CAAC;IASf,OAAO,EAAG,OAAO,CAAC;IAWlB,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/schemas/FormFieldSchema.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Schema for FormField component - Themed text/number input field
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import 'reflect-metadata';
+import ViewSchema from './ViewSchema';
+export declare class FormFieldModel extends ViewSchema {
+    label: string;
+    value: string | number;
+    type?: 'text' | 'number' | 'password' | 'email' | 'tel';
+    helperText?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    disabledColor?: string;
+    fullWidth?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    placeholder?: string;
+}
+export default FormFieldModel;
+//# sourceMappingURL=FormFieldSchema.d.ts.map

package/dist/schemas/FormFieldSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/FormFieldSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,qBACa,cAAe,SAAQ,UAAU;IAS5C,KAAK,EAAG,MAAM,CAAC;IAUf,KAAK,EAAG,MAAM,GAAG,MAAM,CAAC;IAUxB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IAWxD,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAWnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAUvB,SAAS,CAAC,EAAE,OAAO,CAAC;IAUpB,SAAS,CAAC,EAAE,OAAO,CAAC;IAYpB,IAAI,CAAC,EAAE,MAAM,CAAC;IAWd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAe,cAAc,CAAC"}

package/dist/schemas/FormSelectSchema.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Schema for FormSelect component - Themed dropdown select input
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import 'reflect-metadata';
+import ViewSchema from './ViewSchema';
+export declare class FormSelectModel extends ViewSchema {
+    label?: string;
+    value: string | number;
+    options: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    size?: 'small' | 'medium';
+    placeholder?: string;
+}
+export default FormSelectModel;
+//# sourceMappingURL=FormSelectSchema.d.ts.map

package/dist/schemas/FormSelectSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSelectSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/FormSelectSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,qBACa,eAAgB,SAAQ,UAAU;IAU7C,KAAK,CAAC,EAAE,MAAM,CAAC;IAUf,KAAK,EAAG,MAAM,GAAG,MAAM,CAAC;IAUxB,OAAO,EAAG,MAAM,CAAC;IAWjB,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAUpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAW1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAe,eAAe,CAAC"}

package/dist/schemas/index.d.ts

@@ -23,6 +23,10 @@ export * from './FeatureGridSchema';
 export * from './FeatureItemSchema';
 export * from './FooterItemSchema';
 export * from './FormBlockSchema';
+export * from './FormSelectSchema';
+export * from './FormFieldSchema';
+export * from './FormCheckboxSchema';
+export * from './CaptchaSchema';
 export * from './FooterSchema';
 export * from './FooterSectionSchema';
 export * from './GridCellSchema';

package/dist/schemas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/schemas/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,YAAY,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,OAAO,yBAAyB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAGtC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/schemas/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,YAAY,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,OAAO,yBAAyB,CAAC;AAGjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAGtC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.5.13",
+  "version": "1.6.0",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/forms/Captcha.tsx

@@ -11,7 +11,7 @@
  * - Provider-agnostic API
  * - Automatic script loading
  * - TypeScript support
- * - Themed styling with base props support
+ * - Themed styling with schema-driven architecture
  * - Grid behavior support
  * - Error handling
  *
@@ -20,57 +20,57 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { Box, Alert } from '@mui/material';
-import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+import type { SchemaProps } from '@qwickapps/schema';
+import CaptchaModel from '../../schemas/CaptchaSchema';
+import { ViewProps } from '../shared/viewProps';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 
-export type CaptchaProvider = 'recaptcha-v2' | 'recaptcha-v3' | 'hcaptcha' | 'turnstile';
+// Declare global interfaces for CAPTCHA providers
+declare global {
+  interface Window {
+    grecaptcha?: {
+      render?: (container: HTMLElement | null, params: Record<string, unknown>) => string | number;
+      execute?: (siteKey: string, options: { action: string }) => Promise<string>;
+      reset?: (widgetId: string | number) => void;
+    };
+    hcaptcha?: {
+      render?: (container: HTMLElement | null, params: Record<string, unknown>) => string | number;
+      remove?: (widgetId: string | number) => void;
+    };
+    turnstile?: {
+      render?: (container: HTMLElement | null, params: Record<string, unknown>) => string | number;
+      remove?: (widgetId: string | number) => void;
+    };
+  }
+}
 
-interface CaptchaBaseProps {
-  /** CAPTCHA provider */
-  provider: CaptchaProvider;
-  /** Site key (public key) */
-  siteKey: string;
+/**
+ * Props interface for Captcha component
+ * Combines schema props with callback handlers
+ */
+export interface CaptchaProps extends ViewProps, SchemaProps<typeof CaptchaModel> {
   /** Callback when CAPTCHA is successfully completed */
   onVerify: (token: string) => void;
   /** Callback when CAPTCHA expires or fails */
   onExpire?: () => void;
   /** Callback when CAPTCHA encounters an error */
   onError?: (error: Error) => void;
-  /** Theme for the widget (light or dark) */
-  theme?: 'light' | 'dark';
-  /** Size of the widget */
-  size?: 'normal' | 'compact' | 'invisible';
-  /** reCAPTCHA v3 action name */
-  action?: string;
 }
 
-export interface CaptchaProps extends WithBaseProps<CaptchaBaseProps> {}
-
-// Declare global interfaces for CAPTCHA providers
-declare global {
-  interface Window {
-    grecaptcha?: unknown;
-    hcaptcha?: unknown;
-    turnstile?: unknown;
-    onRecaptchaLoad?: () => void;
-    onHcaptchaLoad?: () => void;
-    onTurnstileLoad?: () => void;
-  }
-}
-
-export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, ref) => {
-  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
-
-  const {
-    provider,
-    siteKey,
-    onVerify,
-    onExpire,
-    onError,
-    theme = 'light',
-    size = 'normal',
-    action = 'submit',
-  } = restProps as CaptchaBaseProps;
-
+/**
+ * CaptchaView - Pure view component that renders the CAPTCHA widget
+ */
+function CaptchaView({
+  provider,
+  siteKey,
+  onVerify,
+  onExpire,
+  onError,
+  theme = 'light',
+  size = 'normal',
+  action = 'submit',
+  ...restProps
+}: CaptchaProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const widgetIdRef = useRef<string | number | null>(null);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -155,7 +155,7 @@ export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, re
       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,
@@ -173,7 +173,7 @@ export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, re
 
           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: string) => {
                 onVerify(token);
               }).catch((err: Error) => {
@@ -184,7 +184,7 @@ export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, re
             break;
 
           case 'hcaptcha':
-            if (window.hcaptcha && window.hcaptcha.render) {
+            if (window.hcaptcha?.render) {
               widgetIdRef.current = window.hcaptcha.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -201,7 +201,7 @@ export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, re
             break;
 
           case 'turnstile':
-            if (window.turnstile && window.turnstile.render) {
+            if (window.turnstile?.render) {
               widgetIdRef.current = window.turnstile.render(containerRef.current, {
                 sitekey: siteKey,
                 callback: onVerify,
@@ -257,21 +257,10 @@ export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, re
 
   return (
     <Box
-      ref={ref}
-      {...htmlProps}
+      {...restProps}
       sx={{
         my: 2,
-        ...styleProps.sx,
       }}
-      // Store grid props as data attributes for ColumnLayout to pick up
-      {...(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,
-      })}
     >
       {error && (
         <Alert severity="error" sx={{ mb: 2 }}>
@@ -281,11 +270,16 @@ export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, re
       <div ref={containerRef} />
     </Box>
   );
-});
-
-Captcha.displayName = 'Captcha';
+}
 
-// Mark as QwickApp component
-Object.assign(Captcha, { [QWICKAPP_COMPONENT]: true });
+/**
+ * Create Captcha component using the factory pattern
+ */
+export const Captcha: SerializableComponent<CaptchaProps> = createSerializableView<CaptchaProps>({
+  tagName: 'Captcha',
+  version: '1.0.0',
+  role: 'input',
+  View: CaptchaView,
+});
 
 export default Captcha;

package/src/components/forms/FormCheckbox.tsx

@@ -6,7 +6,7 @@
  * - Supports FormControlLabel for proper label positioning
  * - Handles required and disabled states
  * - Helper text support
- * - Base props support for grid behavior and styling
+ * - Schema-driven architecture with serialization support
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
@@ -18,31 +18,32 @@ import {
   Checkbox,
   FormHelperText,
 } from '@mui/material';
-import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+import type { SchemaProps } from '@qwickapps/schema';
+import FormCheckboxModel from '../../schemas/FormCheckboxSchema';
+import { ViewProps } from '../shared/viewProps';
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 
-interface FormCheckboxBaseProps {
-  label: string;
-  checked: boolean;
+/**
+ * Props interface for FormCheckbox component
+ * Combines schema props with callback handler
+ */
+export interface FormCheckboxProps extends ViewProps, SchemaProps<typeof FormCheckboxModel> {
+  /** Callback when checkbox state changes */
   onChange: (checked: boolean) => void;
-  helperText?: string;
-  required?: boolean;
-  disabled?: boolean;
 }
 
-export interface FormCheckboxProps extends WithBaseProps<FormCheckboxBaseProps> {}
-
-export const FormCheckbox = React.forwardRef<HTMLDivElement, FormCheckboxProps>((props, ref) => {
-  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
-
-  const {
-    label,
-    checked,
-    onChange,
-    helperText,
-    required = false,
-    disabled = false,
-  } = restProps as FormCheckboxBaseProps;
-
+/**
+ * FormCheckboxView - Pure view component that renders the checkbox
+ */
+function FormCheckboxView({
+  label,
+  checked,
+  onChange,
+  helperText,
+  required = false,
+  disabled = false,
+  ...restProps
+}: FormCheckboxProps) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e.target.checked);
   };
@@ -65,29 +66,15 @@ export const FormCheckbox = React.forwardRef<HTMLDivElement, FormCheckboxProps>(
     '& .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 (
-    <FormControl
-      ref={ref}
-      {...htmlProps}
-      {...styleProps}
-      // Store grid props as data attributes for ColumnLayout to pick up
-      {...(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,
-      })}
-    >
+    <FormControl {...restProps}>
       <FormControlLabel
         control={
           <Checkbox
@@ -106,11 +93,16 @@ export const FormCheckbox = React.forwardRef<HTMLDivElement, FormCheckboxProps>(
       )}
     </FormControl>
   );
-});
-
-FormCheckbox.displayName = 'FormCheckbox';
+}
 
-// Mark as QwickApp component
-Object.assign(FormCheckbox, { [QWICKAPP_COMPONENT]: true });
+/**
+ * Create FormCheckbox component using the factory pattern
+ */
+export const FormCheckbox: SerializableComponent<FormCheckboxProps> = createSerializableView<FormCheckboxProps>({
+  tagName: 'FormCheckbox',
+  version: '1.0.0',
+  role: 'input',
+  View: FormCheckboxView,
+});
 
 export default FormCheckbox;