@qwickapps/react-framework 1.5.12 → 1.6.0

package/README.md

@@ -4,6 +4,29 @@ A complete React framework for building modern, responsive applications with int
 
 ## What's New
 
+### January 25, 2026 - E-Commerce Components (v1.5.13)
+
+#### New Components
+
+- **ImageGallery Component**: Professional image gallery with multiple display variants
+  - Three display modes: thumbnails (left/bottom/right), carousel, and grid
+  - Built-in zoom modal for full-screen viewing
+  - Customizable aspect ratios (1:1, 4:3, 16:9, custom)
+  - Responsive design with mobile-first approach
+  - Full theme compliance using CSS custom properties
+
+- **OptionSelector Component**: Universal option selector for e-commerce and forms
+  - Text mode: Button grid for sizes, quantities (S, M, L, XL, etc.)
+  - Color mode: Circular swatches with hex color backgrounds
+  - Image mode: Rounded rectangle pattern/texture swatches
+  - Features: availability states, disabled options, tooltips, price adjustments
+  - Dropdown fallback for accessibility
+  - Consolidates previous SizeSelector and ColorSelector into unified component
+
+#### Bug Fixes
+
+- **Article Component**: Fixed TypeScript type error in Article component
+
 ### December 6, 2025 - Repository URLs Update (v1.5.5)
 
 - Updated repository and homepage URLs to point to public GitHub org

package/dist/components/blocks/ImageGallery.d.ts

@@ -0,0 +1,30 @@
+import { SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+export interface GalleryImage {
+    url: string;
+    alt: string;
+    thumbnail?: string;
+}
+export interface ImageGalleryProps extends ViewProps {
+    /** Array of product images */
+    images: GalleryImage[];
+    /** Product name for accessibility */
+    productName: string;
+    /** Gallery display variant */
+    variant?: 'thumbnails' | 'carousel' | 'grid';
+    /** Position of thumbnails (only for thumbnails variant) */
+    thumbnailPosition?: 'left' | 'bottom' | 'right';
+    /** Aspect ratio for main image */
+    aspectRatio?: string;
+    /** Enable zoom functionality */
+    showZoom?: boolean;
+    /** Maximum number of images to display */
+    maxImages?: number;
+    /** Data source for dynamic loading */
+    dataSource?: string;
+    /** Data binding configuration */
+    bindingOptions?: Record<string, unknown>;
+}
+export declare const ImageGallery: SerializableComponent<ImageGalleryProps>;
+export default ImageGallery;
+//# sourceMappingURL=ImageGallery.d.ts.map

package/dist/components/blocks/ImageGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/ImageGallery.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,8BAA8B;IAC9B,MAAM,EAAE,YAAY,EAAE,CAAC;IAEvB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IAEpB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE7C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEhD,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AA+XD,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,iBAAiB,CAM9D,CAAC;AAEL,eAAe,YAAY,CAAC"}

package/dist/components/blocks/OptionSelector.d.ts

@@ -0,0 +1,45 @@
+import { SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+export interface SelectOption {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Whether this option is available for selection */
+    available: boolean;
+    /** Optional price adjustment */
+    price?: number;
+    /** Hex color value (for color display mode) */
+    hexValue?: string;
+    /** Image URL (for image or color display mode) */
+    imageUrl?: string;
+}
+export interface OptionSelectorProps extends ViewProps {
+    /** Array of available options */
+    options: SelectOption[];
+    /** Currently selected option ID */
+    selectedOption?: string;
+    /** Callback when option is selected */
+    onOptionSelect?: (optionId: string) => void;
+    /** Display mode */
+    displayMode?: 'text' | 'color' | 'image';
+    /** Display variant */
+    variant?: 'buttons' | 'dropdown' | 'grid';
+    /** Layout direction (for buttons variant) */
+    layout?: 'horizontal' | 'vertical' | 'wrap';
+    /** Visual size (for color/image modes) */
+    visualSize?: 'small' | 'medium' | 'large';
+    /** Show label below visual (for color/image modes) */
+    showLabel?: boolean;
+    /** Disable all selections */
+    disabled?: boolean;
+    /** Label for the selector */
+    label?: string;
+    /** Data source for dynamic loading */
+    dataSource?: string;
+    /** Data binding configuration */
+    bindingOptions?: Record<string, unknown>;
+}
+export declare const OptionSelector: SerializableComponent<OptionSelectorProps>;
+export default OptionSelector;
+//# sourceMappingURL=OptionSelector.d.ts.map

package/dist/components/blocks/OptionSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionSelector.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/OptionSelector.tsx"],"names":[],"mappings":"AAkDA,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IAEnB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,iCAAiC;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IAExB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAEzC,sBAAsB;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IAE1C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE5C,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE1C,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAqVD,eAAO,MAAM,cAAc,EAAE,qBAAqB,CAAC,mBAAmB,CAMlE,CAAC;AAEL,eAAe,cAAc,CAAC"}

package/dist/components/blocks/index.d.ts

@@ -22,6 +22,8 @@ export { default as Section } from './Section';
 export { default as Image } from './Image';
 export { default as Text } from './Text';
 export { default as ProductCard } from './ProductCard';
+export { default as ImageGallery } from './ImageGallery';
+export { default as OptionSelector } from './OptionSelector';
 export { default as FeatureCard } from './FeatureCard';
 export { default as CardListGrid } from './CardListGrid';
 export type { HeroBlockProps } from './HeroBlock';
@@ -36,6 +38,8 @@ export type { SectionProps } from './Section';
 export type { ImageProps } from './Image';
 export type { TextProps } from './Text';
 export type { ProductCardProps, Product, ProductCardAction } from './ProductCard';
+export type { ImageGalleryProps, GalleryImage } from './ImageGallery';
+export type { OptionSelectorProps, SelectOption } from './OptionSelector';
 export type { FeatureCardProps, FeatureItem, FeatureCardAction } from './FeatureCard';
 export type { CardListGridProps } from './CardListGrid';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/blocks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClF,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,gBAAgB,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClF,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/forms/Captcha.d.ts

@@ -11,45 +11,50 @@
  * - 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
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-import React from 'react';
-import { WithBaseProps } from '../../hooks/useBaseProps';
-export type CaptchaProvider = 'recaptcha-v2' | 'recaptcha-v3' | 'hcaptcha' | 'turnstile';
-interface CaptchaBaseProps {
-    /** CAPTCHA provider */
-    provider: CaptchaProvider;
-    /** Site key (public key) */
-    siteKey: string;
+import type { SchemaProps } from '@qwickapps/schema';
+import CaptchaModel from '../../schemas/CaptchaSchema';
+import { ViewProps } from '../shared/viewProps';
+import { SerializableComponent } from '../shared/createSerializableView';
+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;
+        };
+    }
+}
+/**
+ * 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 {
-    interface Window {
-        grecaptcha?: unknown;
-        hcaptcha?: unknown;
-        turnstile?: unknown;
-        onRecaptchaLoad?: () => void;
-        onHcaptchaLoad?: () => void;
-        onTurnstileLoad?: () => void;
-    }
-}
-export declare const Captcha: React.ForwardRefExoticComponent<CaptchaProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Create Captcha component using the factory pattern
+ */
+export declare const Captcha: SerializableComponent<CaptchaProps>;
 export default Captcha;
 //# sourceMappingURL=Captcha.d.ts.map

package/dist/components/forms/Captcha.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Captcha.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Captcha.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAgB,aAAa,EAAsB,MAAM,0BAA0B,CAAC;AAE3F,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;AAEzF,UAAU,gBAAgB;IACxB,uBAAuB;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,yBAAyB;IACzB,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IAC1C,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,CAAC,gBAAgB,CAAC;CAAG;AAGxE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;QAC7B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;QAC5B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;KAC9B;CACF;AAED,eAAO,MAAM,OAAO,qFAgOlB,CAAC;AAOH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Captcha.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Captcha.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAGjG,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE;YACX,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;YAC7F,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;gBAAE,MAAM,EAAE,MAAM,CAAA;aAAE,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;YAC5E,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;SAC7C,CAAC;QACF,QAAQ,CAAC,EAAE;YACT,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;YAC7F,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;SAC9C,CAAC;QACF,SAAS,CAAC,EAAE;YACV,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;YAC7F,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;SAC9C,CAAC;KACH;CACF;AAED;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,YAAY,CAAC;IAC/E,sDAAsD;IACtD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAyND;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,qBAAqB,CAAC,YAAY,CAKtD,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/components/forms/FormCheckbox.d.ts

@@ -6,22 +6,25 @@
  * - 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.
  */
-import React from 'react';
-import { WithBaseProps } from '../../hooks/useBaseProps';
-interface FormCheckboxBaseProps {
-    label: string;
-    checked: boolean;
+import type { SchemaProps } from '@qwickapps/schema';
+import FormCheckboxModel from '../../schemas/FormCheckboxSchema';
+import { ViewProps } from '../shared/viewProps';
+import { SerializableComponent } from '../shared/createSerializableView';
+/**
+ * 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 declare const FormCheckbox: React.ForwardRefExoticComponent<FormCheckboxProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Create FormCheckbox component using the factory pattern
+ */
+export declare const FormCheckbox: SerializableComponent<FormCheckboxProps>;
 export default FormCheckbox;
 //# sourceMappingURL=FormCheckbox.d.ts.map

package/dist/components/forms/FormCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormCheckbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAgB,aAAa,EAAsB,MAAM,0BAA0B,CAAC;AAE3F,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa,CAAC,qBAAqB,CAAC;CAAG;AAElF,eAAO,MAAM,YAAY,0FA2EvB,CAAC;AAOH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FormCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormCheckbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AASH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,iBAAiB,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,iBAAiB,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAiED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,iBAAiB,CAKhE,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/components/forms/FormField.d.ts

@@ -4,40 +4,37 @@
  * Features:
  * - Uses QwickApps CSS theme variables for consistent styling
  * - Supports text, number, password, and email input types
- * - Integrated with MUI FormControl, Input, and Select
+ * - Integrated with MUI FormControl, Input
  * - Handles readonly, disabled, and required states
  * - Support for adornments and helper text
- * - Base props support for grid behavior and styling
+ * - Schema-driven architecture with serialization support
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 import React from 'react';
-import { WithBaseProps } from '../../hooks/useBaseProps';
-export interface FormFieldOption {
-    value: string | number;
-    label: string;
-}
-interface FormFieldBaseProps {
-    label: string;
-    value: string | number;
+import type { SchemaProps } from '@qwickapps/schema';
+import FormFieldModel from '../../schemas/FormFieldSchema';
+import { ViewProps } from '../shared/viewProps';
+import { SerializableComponent } from '../shared/createSerializableView';
+/**
+ * Props interface for FormField component
+ * Combines schema props with callback handlers and adornments
+ */
+export interface FormFieldProps extends ViewProps, SchemaProps<typeof FormFieldModel> {
+    /** Callback when value changes */
     onChange?: (value: string | number) => void;
+    /** Raw change handler with event */
     onChangeRaw?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    type?: 'text' | 'number' | 'password' | 'email' | 'tel';
-    helperText?: string;
-    required?: boolean;
-    readOnly?: boolean;
-    disabled?: boolean;
-    disabledColor?: string;
-    fullWidth?: boolean;
-    multiline?: boolean;
-    rows?: number;
-    placeholder?: string;
+    /** Start adornment (icon, text, etc.) */
     startAdornment?: React.ReactNode;
+    /** End adornment (icon, text, etc.) */
     endAdornment?: React.ReactNode;
+    /** Additional input props */
     inputProps?: unknown;
 }
-export interface FormFieldProps extends WithBaseProps<FormFieldBaseProps> {
-}
-export declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Create FormField component using the factory pattern
+ */
+export declare const FormField: SerializableComponent<FormFieldProps>;
 export default FormField;
 //# sourceMappingURL=FormField.d.ts.map

package/dist/components/forms/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAgB,aAAa,EAAsB,MAAM,0BAA0B,CAAC;AAE3F,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACrF,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa,CAAC,kBAAkB,CAAC;CAAG;AAE5E,eAAO,MAAM,SAAS,uFAyHpB,CAAC;AAOH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,cAAc,CAAC;IACnF,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,oCAAoC;IACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IACrF,yCAAyC;IACzC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA+GD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,qBAAqB,CAAC,cAAc,CAK1D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/forms/FormSelect.d.ts

@@ -6,30 +6,31 @@
  * - Simplified select-only interface (use FormField for mixed inputs)
  * - Support for placeholder, size variants, and helper text
  * - Integrated with MUI FormControl and Select
- * - Base props support for grid behavior and styling
+ * - Schema-driven architecture with serialization support
  *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-import React from 'react';
-import { WithBaseProps } from '../../hooks/useBaseProps';
+import type { SchemaProps } from '@qwickapps/schema';
+import FormSelectModel from '../../schemas/FormSelectSchema';
+import { ViewProps } from '../shared/viewProps';
+import { SerializableComponent } from '../shared/createSerializableView';
 export interface FormSelectOption {
     value: string | number;
     label: string;
 }
-interface FormSelectBaseProps {
-    label?: string;
-    value: string | number;
+/**
+ * Props interface for FormSelect component
+ * Combines schema props with callback handlers
+ */
+export interface FormSelectProps extends ViewProps, SchemaProps<typeof FormSelectModel> {
+    /** Callback when value changes */
     onChange: (value: string | number) => void;
+    /** Options array (runtime prop, overrides schema) */
     options: FormSelectOption[];
-    helperText?: string;
-    required?: boolean;
-    disabled?: boolean;
-    fullWidth?: boolean;
-    size?: 'small' | 'medium';
-    placeholder?: string;
 }
-export interface FormSelectProps extends WithBaseProps<FormSelectBaseProps> {
-}
-export declare const FormSelect: React.ForwardRefExoticComponent<FormSelectProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Create FormSelect component using the factory pattern
+ */
+export declare const FormSelect: SerializableComponent<FormSelectProps>;
 export default FormSelect;
 //# sourceMappingURL=FormSelect.d.ts.map

package/dist/components/forms/FormSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormSelect.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormSelect.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAgB,aAAa,EAAsB,MAAM,0BAA0B,CAAC;AAE3F,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,aAAa,CAAC,mBAAmB,CAAC;CAAG;AAE9E,eAAO,MAAM,UAAU,wFAyFrB,CAAC;AAOH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormSelect.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormSelect.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAUH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAA0B,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAEjG,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,WAAW,CAAC,OAAO,eAAe,CAAC;IACrF,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,qDAAqD;IACrD,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B;AAiFD;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,qBAAqB,CAAC,eAAe,CAK5D,CAAC;AAEH,eAAe,UAAU,CAAC"}