@qwickapps/react-framework 1.5.7 → 1.5.9

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,19 +232,21 @@ 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);
   }
 };
 
 // Transform img elements to Image component
-function transformImage(element: Element): unknown {
+function transformImage(element: Element): Record<string, unknown> {
   const src = element.getAttribute('src') || '';
   const alt = element.getAttribute('alt') || '';
   const width = element.getAttribute('width');
@@ -263,7 +266,7 @@ function transformImage(element: Element): unknown {
 }
 
 // Transform figure > img elements to Image component with caption support
-function transformFigureImage(element: Element): unknown {
+function transformFigureImage(element: Element): Record<string, unknown> {
   const figure = element.closest('figure');
   const figcaption = figure?.querySelector('figcaption');
   const caption = figcaption?.textContent || '';

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,19 +168,21 @@ 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) => Record<string, 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) => Record<string, unknown> }).transformBlogSection);
   }
 };
 
 // Transform generic section elements to Section component
-(Section as unknown as { transformSection: (element: Element) => unknown }).transformSection = (element: Element): unknown => {
+(Section as unknown as { transformSection: (element: Element) => Record<string, unknown> }).transformSection = (element: Element): Record<string, unknown> => {
   const padding = element.getAttribute('data-padding') || 'medium';
   const background = element.getAttribute('data-background');
   const contentMaxWidth = element.getAttribute('data-max-width') || 'lg';
@@ -198,7 +200,7 @@ interface PatternRegistry {
 };
 
 // Transform blog section elements to Section component with specific styling
-(Section as unknown as { transformBlogSection: (element: Element) => unknown }).transformBlogSection = (element: Element): unknown => {
+(Section as unknown as { transformBlogSection: (element: Element) => Record<string, unknown> }).transformBlogSection = (element: Element): Record<string, unknown> => {
   const padding = element.getAttribute('data-padding') || 'large';
   const background = element.getAttribute('data-background') || 'var(--theme-surface)';
 

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
@@ -117,42 +123,44 @@ export const Text: SerializableComponent<TextProps> = createSerializableView<Tex
 // Type for pattern registry with basic methods
 interface PatternRegistry {
   hasPattern(pattern: string): boolean;
-  registerPattern(pattern: string, handler: (element: Element) => unknown): void;
+  registerPattern(pattern: string, handler: (element: Element) => Record<string, unknown>): void;
 }
 
 // Type for Text component with pattern handlers
 interface TextComponentWithPatterns {
   registerPatternHandlers: (registry: PatternRegistry) => void;
-  transformParagraph: (element: Element) => unknown;
-  transformHeading: (element: Element, tagName: string) => unknown;
-  transformSpan: (element: Element) => unknown;
+  transformParagraph: (element: Element) => Record<string, unknown>;
+  transformHeading: (element: Element, tagName: string) => Record<string, unknown>;
+  transformSpan: (element: Element) => Record<string, unknown>;
 }
 
 // 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);
   }
 };
 
 // Transform paragraph elements to Text component
-(Text as unknown as TextComponentWithPatterns).transformParagraph = (element: Element): unknown => {
+(Text as unknown as TextComponentWithPatterns).transformParagraph = (element: Element): Record<string, unknown> => {
   return {
     tagName: 'Text',
     version: '1.0.0',
@@ -165,7 +173,7 @@ interface TextComponentWithPatterns {
 };
 
 // Transform heading elements to Text component
-(Text as unknown as TextComponentWithPatterns).transformHeading = (element: Element, tagName: string): unknown => {
+(Text as unknown as TextComponentWithPatterns).transformHeading = (element: Element, tagName: string): Record<string, unknown> => {
   const variantMap: { [key: string]: string } = {
     'h1': 'h1',
     'h2': 'h2',
@@ -187,7 +195,7 @@ interface TextComponentWithPatterns {
 };
 
 // Transform span elements to Text component
-(Text as unknown as TextComponentWithPatterns).transformSpan = (element: Element): unknown => {
+(Text as unknown as TextComponentWithPatterns).transformSpan = (element: Element): Record<string, unknown> => {
   return {
     tagName: 'Text',
     version: '1.0.0',

package/src/components/buttons/Button.tsx

@@ -311,24 +311,26 @@ 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);
   }
 };
 
 // Transform button elements to Button component
-function transformButton(element: Element): unknown {
+function transformButton(element: Element): Record<string, unknown> {
   const variant = element.getAttribute('data-variant') || 
                  (element.className.includes('btn-primary') ? 'primary' : 
                   element.className.includes('btn-outlined') ? 'outlined' : 'secondary');
@@ -349,7 +351,7 @@ function transformButton(element: Element): unknown {
 }
 
 // Transform input type="button" elements to Button component
-function transformInputButton(element: Element): unknown {
+function transformInputButton(element: Element): Record<string, unknown> {
   const disabled = element.hasAttribute('disabled');
   const value = element.getAttribute('value') || 'Button';
 
@@ -364,7 +366,7 @@ function transformInputButton(element: Element): unknown {
 }
 
 // Transform input type="submit" elements to Button component
-function transformSubmitButton(element: Element): unknown {
+function transformSubmitButton(element: Element): Record<string, unknown> {
   const disabled = element.hasAttribute('disabled');
   const value = element.getAttribute('value') || 'Submit';
 

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;