@qwickapps/react-framework 1.5.6 → 1.5.8

package/src/components/Scaffold.tsx

@@ -21,7 +21,7 @@ import { useQwickApp } from '../contexts/QwickAppContext';
 import Logo from './Logo';
 import ThemeSwitcher from './buttons/ThemeSwitcher';
 import PaletteSwitcher from './buttons/PaletteSwitcher';
-import { RadioButtonUnchecked as DefaultIcon } from '@mui/icons-material';
+// DefaultIcon removed - using iconMap radio_button_unchecked instead
 import { getIconComponent } from './buttons/Button';
 import './Scaffold.css';
 import { useNavigation } from '../contexts/NavigationContext';
@@ -260,21 +260,21 @@ const Scaffold: React.FC<ScaffoldProps> = ({
       }
     };
 
-    // Transform icon string to component, or use provided ReactNode, or fallback to DefaultIcon
+    // Transform icon string to component, or use provided ReactNode, or fallback to radio_button_unchecked
     const needsIcon = variant !== 'drawer';
     let displayIcon: React.ReactNode = null;
 
     if (item.icon) {
       // If icon is a string, transform it to component
       if (typeof item.icon === 'string') {
-        displayIcon = getIconComponent(item.icon) || (needsIcon ? <DefaultIcon /> : null);
+        displayIcon = getIconComponent(item.icon) || (needsIcon ? getIconComponent('radio_button_unchecked') : null);
       } else {
         // If icon is already a React component, use it
         displayIcon = item.icon;
       }
     } else if (needsIcon) {
       // No icon provided, use default for primary navigation
-      displayIcon = <DefaultIcon />;
+      displayIcon = getIconComponent('radio_button_unchecked');
     }
 
     const content = (

package/src/components/base/ModelView.tsx

@@ -295,7 +295,7 @@ export abstract class ModelView<TProps = Record<string, unknown>>
  * Helper function for creating ModelView component classes with ViewSchema support
  * Updated to work with the new ViewSchema processing system
  */
-export function createModelViewClass<TProps, TModel>(
+export function createModelViewClass<TProps>(
   config: {
     tagName: string;
     version: string;
@@ -306,7 +306,7 @@ export function createModelViewClass<TProps, TModel>(
   }
 ): unknown {
 
-  class DynamicModelView extends ModelView<TProps, TModel> {
+  class DynamicModelView extends ModelView<TProps> {
     static readonly tagName = config.tagName;
     static readonly version = config.version;
 

package/src/components/blocks/Article.tsx

@@ -39,7 +39,7 @@ function ArticleView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (ArticleView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(ArticleView, { [QWICKAPP_COMPONENT]: true });
 
   // Return empty state if no HTML content
   if (!html.trim()) {
@@ -336,7 +336,7 @@ function ArticleView({
 }
 
 // Main component with data binding support and serialization capability
-export class Article extends ModelView<ArticleProps, ArticleModel> {
+export class Article extends ModelView<ArticleProps> {
   // Component self-declaration for serialization
   static readonly tagName = 'Article';
   static readonly version = '1.0.0';
@@ -362,9 +362,11 @@ export class Article extends ModelView<ArticleProps, ArticleModel> {
 
   // Register HTML patterns that Article component can handle
   static registerPatternHandlers(registry: unknown): void {
+    const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
     // Register article elements
-    if (!registry.hasPattern('article')) {
-      registry.registerPattern('article', Article.transformArticle);
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern('article')) {
+      typedRegistry.registerPattern?.('article', Article.transformArticle);
     }
   }
 
@@ -389,9 +391,7 @@ function ArticleWithDataBinding(props: ArticleProps) {
   // Use data binding
   const { loading, error, ...articleProps } = useDataBinding<ArticleModel>(
     dataSource!,
-    restProps as Partial<ArticleModel>,
-    ArticleModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<ArticleModel>
   );
 
   // Show loading state

package/src/components/blocks/CardListGrid.tsx

@@ -87,9 +87,7 @@ function CardListGrid(props: CardListGridProps) {
   // Always call hooks unconditionally
   const result = useDataBinding<CardListGridModel>(
     dataSource || '',
-    restProps as Partial<CardListGridModel>,
-    CardListGridModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<CardListGridModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/Code.tsx

@@ -22,7 +22,10 @@
 
 import React, { useState } from 'react';
 import { Box, Typography, Tooltip, IconButton, Snackbar, Alert, useTheme, Paper } from '@mui/material';
-import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
+import ContentCopy from '@mui/icons-material/ContentCopy';
+import Check from '@mui/icons-material/Check';
+const CopyIcon = ContentCopy;
+const CheckIcon = Check;
 import CodeSchema from '../../schemas/CodeSchema';
 import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
 import { ViewProps } from '../shared/viewProps';
@@ -260,17 +263,16 @@ export const Code: SerializableComponent<CodeProps> = createSerializableView<Cod
 
 // Register HTML patterns that Code component can handle
 (Code as Record<string, unknown>).registerPatternHandlers = (registry: Record<string, (...args: unknown[]) => unknown>): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (...args: unknown[]) => unknown) => void };
+
   // Register pre + code pattern
-  if (!registry.hasPattern) {
-    return;
-  }
-  if (!registry.hasPattern('pre code')) {
-    registry.registerPattern('pre code', (Code as Record<string, unknown>).transformPreCode as (...args: unknown[]) => unknown);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('pre code')) {
+    typedRegistry.registerPattern?.('pre code', (Code as Record<string, unknown>).transformPreCode as (...args: unknown[]) => unknown);
   }
 
   // Register standalone code pattern for complex code blocks
-  if (!registry.hasPattern('code.highlight')) {
-    registry.registerPattern('code.highlight', (Code as Record<string, unknown>).transformCodeHighlight as (...args: unknown[]) => unknown);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('code.highlight')) {
+    typedRegistry.registerPattern?.('code.highlight', (Code as Record<string, unknown>).transformCodeHighlight as (...args: unknown[]) => unknown);
   }
 };
 

package/src/components/blocks/Content.tsx

@@ -45,7 +45,7 @@ function ContentView({
   const theme = useTheme();
 
   // Mark as QwickApp component
-  (ContentView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(ContentView, { [QWICKAPP_COMPONENT]: true });
 
   // Map spacing to padding values
   const getPadding = () => {
@@ -170,9 +170,7 @@ function Content(props: ContentProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<ContentModel>(
     dataSource || '',
-    restProps as Partial<ContentModel>,
-    ContentModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<ContentModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/CoverImageHeader.tsx

@@ -11,7 +11,8 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { MoreVert as MoreIcon } from '@mui/icons-material';
+import MoreVert from "@mui/icons-material/MoreVert";
+const MoreIcon = MoreVert;
 import {
   Avatar,
   Box,
@@ -401,9 +402,7 @@ function CoverImageHeader(props: CoverImageHeaderProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<CoverImageHeaderModel>(
     dataSource || '',
-    restProps as Partial<CoverImageHeaderModel>,
-    CoverImageHeaderModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<CoverImageHeaderModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/FeatureCard.tsx

@@ -260,14 +260,12 @@ function FeatureCard(props: FeatureCardProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Mark as QwickApp component
-  (FeatureCard as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(FeatureCard, { [QWICKAPP_COMPONENT]: true });
 
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<FeatureCardModel>(
     dataSource || '',
-    restProps as Partial<FeatureCardModel>,
-    FeatureCardModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<FeatureCardModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/FeatureGrid.tsx

@@ -64,7 +64,7 @@ function FeatureGridView({
   const { styleProps, htmlProps } = useBaseProps(restProps);
   
   // Mark as QwickApp component
-  (FeatureGridView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(FeatureGridView, { [QWICKAPP_COMPONENT]: true });
 
   // Map gap to spacing value for GridLayout
   const getSpacing = (): 'none' | 'tiny' | 'small' | 'medium' | 'large' | 'huge' => {
@@ -95,9 +95,7 @@ function FeatureGrid(props: FeatureGridProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<FeatureGridModel>(
     dataSource || '',
-    restProps as Partial<FeatureGridModel>,
-    FeatureGridModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<FeatureGridModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/Footer.tsx

@@ -81,7 +81,7 @@ function FooterView({
   const { gridProps, styleProps, htmlProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (FooterView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(FooterView, { [QWICKAPP_COMPONENT]: true });
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
@@ -292,9 +292,7 @@ function Footer(props: FooterProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<FooterModel>(
     dataSource || '',
-    restProps as Partial<FooterModel>,
-    FooterModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<FooterModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/Image.tsx

@@ -17,7 +17,8 @@
 
 import React, { useState, useCallback } from 'react';
 import { Box, Skeleton, Typography, useTheme } from '@mui/material';
-import { BrokenImage as BrokenImageIcon } from '@mui/icons-material';
+import BrokenImage from "@mui/icons-material/BrokenImage";
+const BrokenImageIcon = BrokenImage;
 import { ImageFit, ImageLoading, ImagePosition } from '../../schemas/ImageSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
@@ -231,14 +232,16 @@ interface PatternRegistry {
 
 // Register HTML patterns that Image component can handle
 (Image as unknown as { registerPatternHandlers: (registry: PatternRegistry) => void }).registerPatternHandlers = (registry: PatternRegistry): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
   // Register img elements
-  if (!registry.hasPattern('img')) {
-    registry.registerPattern('img', transformImage);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('img')) {
+    typedRegistry.registerPattern?.('img', transformImage);
   }
 
   // Register figure elements with img
-  if (!registry.hasPattern('figure img')) {
-    registry.registerPattern('figure img', transformFigureImage);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('figure img')) {
+    typedRegistry.registerPattern?.('figure img', transformFigureImage);
   }
 };
 

package/src/components/blocks/PageBannerHeader.tsx

@@ -12,7 +12,8 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { MoreVert as MoreIcon } from '@mui/icons-material';
+import MoreVert from "@mui/icons-material/MoreVert";
+const MoreIcon = MoreVert;
 import {
   Avatar,
   Box,
@@ -387,9 +388,7 @@ function PageBannerHeader(props: PageBannerHeaderProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<PageBannerHeaderModel>(
     dataSource || '',
-    restProps as Partial<PageBannerHeaderModel>,
-    PageBannerHeaderModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<PageBannerHeaderModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/ProductCard.tsx

@@ -10,7 +10,12 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Schedule as ComingSoonIcon, Launch as LaunchIcon, Visibility as PreviewIcon } from '@mui/icons-material';
+import Schedule from '@mui/icons-material/Schedule';
+import Launch from '@mui/icons-material/Launch';
+import Visibility from '@mui/icons-material/Visibility';
+const ComingSoonIcon = Schedule;
+const LaunchIcon = Launch;
+const PreviewIcon = Visibility;
 import {
   Box,
   Chip,
@@ -406,14 +411,12 @@ function ProductCard(props: ProductCardProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Mark as QwickApp component
-  (ProductCard as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+  Object.assign(ProductCard, { [QWICKAPP_COMPONENT]: true });
 
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<ProductCardModel>(
     dataSource || '',
-    restProps as Partial<ProductCardModel>,
-    ProductCardModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<ProductCardModel>
   );
 
   // If no dataSource, use traditional props

package/src/components/blocks/Section.tsx

@@ -168,14 +168,16 @@ interface PatternRegistry {
 
 // Register HTML patterns that Section component can handle
 (Section as unknown as { registerPatternHandlers: (registry: PatternRegistry) => void }).registerPatternHandlers = (registry: PatternRegistry): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
   // Register section element pattern
-  if (!registry.hasPattern('section')) {
-    registry.registerPattern('section', (Section as unknown as { transformSection: (element: Element) => unknown }).transformSection);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('section')) {
+    typedRegistry.registerPattern?.('section', (Section as unknown as { transformSection: (element: Element) => unknown }).transformSection);
   }
 
   // Register section with specific classes
-  if (!registry.hasPattern('section.blog-section')) {
-    registry.registerPattern('section.blog-section', (Section as unknown as { transformBlogSection: (element: Element) => unknown }).transformBlogSection);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('section.blog-section')) {
+    typedRegistry.registerPattern?.('section.blog-section', (Section as unknown as { transformBlogSection: (element: Element) => unknown }).transformBlogSection);
   }
 };
 

package/src/components/blocks/Text.tsx

@@ -25,8 +25,14 @@ import type { SchemaProps } from '@qwickapps/schema/src/types/ModelProps';
 /**
  * Props interface for Text component
  * Uses SchemaProps<typeof TextSchema> for clean typing
+ * Explicitly includes sx and style for type resolution
  */
-export type TextProps = ViewProps & SchemaProps<typeof TextSchema>;
+export type TextProps = ViewProps & SchemaProps<typeof TextSchema> & {
+  /** MUI sx prop for advanced styling (explicit override for type resolution) */
+  sx?: import('@mui/material/styles').SxProps<import('@mui/material/styles').Theme>;
+  /** Inline CSS styles (explicit override for type resolution) */
+  style?: React.CSSProperties;
+};
 
 /**
  * TextView - Pure view component that renders the typography
@@ -130,24 +136,26 @@ interface TextComponentWithPatterns {
 
 // Register HTML patterns that Text component can handle
 (Text as unknown as TextComponentWithPatterns).registerPatternHandlers = (registry: PatternRegistry): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
   const textComponent = Text as unknown as TextComponentWithPatterns;
 
   // Register paragraph elements
-  if (!registry.hasPattern('p')) {
-    registry.registerPattern('p', textComponent.transformParagraph);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('p')) {
+    typedRegistry.registerPattern?.('p', textComponent.transformParagraph);
   }
 
   // Register heading elements
   const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
   headings.forEach(heading => {
-    if (!registry.hasPattern(heading)) {
-      registry.registerPattern(heading, (element: Element) => textComponent.transformHeading(element, heading));
+
+    if (typedRegistry.hasPattern && !typedRegistry.hasPattern(heading)) {
+      typedRegistry.registerPattern?.(heading, (element: Element) => textComponent.transformHeading(element, heading));
     }
   });
 
   // Register span elements
-  if (!registry.hasPattern('span')) {
-    registry.registerPattern('span', textComponent.transformSpan);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('span')) {
+    typedRegistry.registerPattern?.('span', textComponent.transformSpan);
   }
 };
 

package/src/components/buttons/Button.tsx

@@ -311,19 +311,21 @@ export const Button: SerializableComponent<ButtonProps> = createSerializableView
 
 // Register HTML patterns that Button component can handle
 (Button as Record<string, unknown>).registerPatternHandlers = (registry: Record<string, (...args: unknown[]) => unknown>): void => {
+  const typedRegistry = registry as { hasPattern?: (pattern: string) => boolean; registerPattern?: (pattern: string, handler: (element: Element) => Record<string, unknown>) => void };
+
   // Register button elements
-  if (!registry.hasPattern('button')) {
-    registry.registerPattern('button', transformButton);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('button')) {
+    typedRegistry.registerPattern?.('button', transformButton);
   }
   
   // Register input type="button" elements
-  if (!registry.hasPattern('input[type="button"]')) {
-    registry.registerPattern('input[type="button"]', transformInputButton);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('input[type="button"]')) {
+    typedRegistry.registerPattern?.('input[type="button"]', transformInputButton);
   }
   
   // Register input type="submit" elements
-  if (!registry.hasPattern('input[type="submit"]')) {
-    registry.registerPattern('input[type="submit"]', transformSubmitButton);
+  if (typedRegistry.hasPattern && !typedRegistry.hasPattern('input[type="submit"]')) {
+    typedRegistry.registerPattern?.('input[type="submit"]', transformSubmitButton);
   }
 };
 

package/src/components/buttons/PaletteSwitcher.tsx

@@ -11,10 +11,10 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import {
-  Palette as PaletteIcon,
-  Circle as CircleIcon,
-} from '@mui/icons-material';
+import Palette from '@mui/icons-material/Palette';
+import Circle from '@mui/icons-material/Circle';
+const PaletteIcon = Palette;
+const CircleIcon = Circle;
 import {
   IconButton,
   Menu,
@@ -210,9 +210,7 @@ function PaletteSwitcher(props: PaletteSwitcherProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<PaletteSwitcherModel>(
     dataSource || '',
-    restProps as Partial<PaletteSwitcherModel>,
-    PaletteSwitcherModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<PaletteSwitcherModel>
   );
 
   // If no dataSource, use traditional props
@@ -266,6 +264,6 @@ function PaletteSwitcher(props: PaletteSwitcherProps) {
 }
 
 // Mark as QwickApp component
-(PaletteSwitcher as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(PaletteSwitcher, { [QWICKAPP_COMPONENT]: true });
 
 export default PaletteSwitcher;

package/src/components/buttons/ThemeSwitcher.tsx

@@ -21,11 +21,12 @@ import {
   Tooltip,
   Typography
 } from '@mui/material';
-import {
-  DarkMode as DarkModeIcon,
-  LightMode as LightModeIcon,
-  SettingsSystemDaydream as SystemIcon
-} from '@mui/icons-material';
+import DarkMode from '@mui/icons-material/DarkMode';
+import LightMode from '@mui/icons-material/LightMode';
+import SettingsSystemDaydream from '@mui/icons-material/SettingsSystemDaydream';
+const DarkModeIcon = DarkMode;
+const LightModeIcon = LightMode;
+const SystemIcon = SettingsSystemDaydream;
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { useState } from 'react';
 import { useTheme } from '../../contexts/ThemeContext';
@@ -235,9 +236,7 @@ function ThemeSwitcher(props: ThemeSwitcherProps) {
   // Always call hooks unconditionally
   const bindingResult = useDataBinding<ThemeSwitcherModel>(
     dataSource || '',
-    restProps as Partial<ThemeSwitcherModel>,
-    ThemeSwitcherModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<ThemeSwitcherModel>
   );
 
   // If no dataSource, use traditional props
@@ -282,6 +281,6 @@ function ThemeSwitcher(props: ThemeSwitcherProps) {
 }
 
 // Mark as QwickApp component
-(ThemeSwitcher as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(ThemeSwitcher, { [QWICKAPP_COMPONENT]: true });
 
 export default ThemeSwitcher;

package/src/components/forms/Captcha.tsx

@@ -286,6 +286,6 @@ export const Captcha = React.forwardRef<HTMLDivElement, CaptchaProps>((props, re
 Captcha.displayName = 'Captcha';
 
 // Mark as QwickApp component
-(Captcha as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(Captcha, { [QWICKAPP_COMPONENT]: true });
 
 export default Captcha;

package/src/components/forms/FormBlock.tsx

@@ -225,7 +225,7 @@ function FormBlockView({
 }
 
 // Main component with data binding support and serialization capability
-export class FormBlock extends ModelView<FormBlockProps, FormBlockModel> {
+export class FormBlock extends ModelView<FormBlockProps> {
   // Component self-declaration for serialization
   static readonly tagName = 'FormBlock';
   static readonly version = '1.0.0';
@@ -298,9 +298,7 @@ function FormBlockWithDataBinding(props: FormBlockProps) {
   // Use data binding
   const { loading, error, ...formBlockProps } = useDataBinding<FormBlockModel>(
     dataSource!,
-    restProps as Partial<FormBlockModel>,
-    FormBlockModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+    restProps as Partial<FormBlockModel>
   );
 
   // Show loading state
@@ -346,6 +344,6 @@ function FormBlockWithDataBinding(props: FormBlockProps) {
 }
 
 // Mark as QwickApp component
-(FormBlock as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(FormBlock, { [QWICKAPP_COMPONENT]: true });
 
 export default FormBlock;

package/src/components/forms/FormCheckbox.tsx

@@ -111,6 +111,6 @@ export const FormCheckbox = React.forwardRef<HTMLDivElement, FormCheckboxProps>(
 FormCheckbox.displayName = 'FormCheckbox';
 
 // Mark as QwickApp component
-(FormCheckbox as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(FormCheckbox, { [QWICKAPP_COMPONENT]: true });
 
 export default FormCheckbox;

package/src/components/forms/FormField.tsx

@@ -175,6 +175,6 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
 FormField.displayName = 'FormField';
 
 // Mark as QwickApp component
-(FormField as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(FormField, { [QWICKAPP_COMPONENT]: true });
 
 export default FormField;

package/src/components/forms/FormSelect.tsx

@@ -135,6 +135,6 @@ export const FormSelect = React.forwardRef<HTMLDivElement, FormSelectProps>((pro
 FormSelect.displayName = 'FormSelect';
 
 // Mark as QwickApp component
-(FormSelect as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+Object.assign(FormSelect, { [QWICKAPP_COMPONENT]: true });
 
 export default FormSelect;