@qwickapps/react-framework 1.3.3 → 1.3.5

package/dist/schemas/CollapsibleLayoutSchema.d.ts

@@ -0,0 +1,31 @@
+/**
+ * CollapsibleLayout Schema - Data model for collapsible layout component
+ *
+ * Advanced expandable/collapsible container with header controls, animations,
+ * content management, and state persistence capabilities.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import { Model } from '@qwickapps/schema';
+export declare class CollapsibleLayoutModel extends Model {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    title?: string;
+    subtitle?: string;
+    leadIcon?: string;
+    headerActions?: string;
+    collapsedView?: string;
+    children?: string;
+    footerView?: string;
+    triggerArea?: 'button' | 'header' | 'both';
+    animationStyle?: 'fade' | 'slide' | 'scale';
+    persistState?: boolean;
+    collapsedIcon?: string;
+    expandedIcon?: string;
+    showDivider?: boolean;
+    variant?: 'default' | 'outlined' | 'elevated' | 'filled';
+    headerSpacing?: 'compact' | 'comfortable' | 'spacious';
+    contentSpacing?: 'compact' | 'comfortable' | 'spacious';
+}
+export default CollapsibleLayoutModel;
+//# sourceMappingURL=CollapsibleLayoutSchema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleLayoutSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/CollapsibleLayoutSchema.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAIL,KAAK,EAEN,MAAM,mBAAmB,CAAC;AAG3B,qBACa,sBAAuB,SAAQ,KAAK;IAc/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAUpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAe3B,KAAK,CAAC,EAAE,MAAM,CAAC;IAWf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAWlB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAWlB,aAAa,CAAC,EAAE,MAAM,CAAC;IAevB,aAAa,CAAC,EAAE,MAAM,CAAC;IAWvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAWlB,UAAU,CAAC,EAAE,MAAM,CAAC;IAqBpB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAiB3C,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAU5C,YAAY,CAAC,EAAE,OAAO,CAAC;IAevB,aAAa,CAAC,EAAE,MAAM,CAAC;IAWvB,YAAY,CAAC,EAAE,MAAM,CAAC;IActB,WAAW,CAAC,EAAE,OAAO,CAAC;IAsBtB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;IAiBzD,aAAa,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;IAiBvD,cAAc,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;CACzD;AAED,eAAe,sBAAsB,CAAC"}

package/dist/schemas/SwitchInputFieldSchema.d.ts

@@ -0,0 +1,18 @@
+/**
+ * SwitchInputField Schema - Data model for switch input field component
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import { Model } from '@qwickapps/schema';
+export declare class SwitchInputFieldModel extends Model {
+    label?: string;
+    checked?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    helperText?: string;
+    size?: 'small' | 'medium';
+    color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+}
+export default SwitchInputFieldModel;
+//# sourceMappingURL=SwitchInputFieldSchema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchInputFieldSchema.d.ts","sourceRoot":"","sources":["../../src/schemas/SwitchInputFieldSchema.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAIL,KAAK,EAEN,MAAM,mBAAmB,CAAC;AAG3B,qBACa,qBAAsB,SAAQ,KAAK;IAS9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAUf,OAAO,CAAC,EAAE,OAAO,CAAC;IAUlB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAUnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAUf,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAU1B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CACxF;AAED,eAAe,qBAAqB,CAAC"}

package/dist/types/CollapsibleLayout.d.ts

@@ -0,0 +1,142 @@
+/**
+ * TypeScript type definitions for CollapsibleLayout component
+ *
+ * Provides TypeScript interfaces that extend the schema model with React-specific types
+ * and component-level functionality for the CollapsibleLayout component.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import { ReactNode } from 'react';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import type { WithBaseProps } from '../hooks/useBaseProps';
+import CollapsibleLayoutModel from '../schemas/CollapsibleLayoutSchema';
+/**
+ * Core CollapsibleLayout properties extending the schema model
+ *
+ * This interface combines the schema-defined properties with React-specific types
+ * and additional component functionality not captured in the schema.
+ */
+export type CollapsibleLayoutViewProps = ModelProps<CollapsibleLayoutModel> & WithBaseProps & {
+    /**
+     * Callback fired when the collapsed state changes
+     * @param collapsed - The new collapsed state
+     */
+    onToggle?: (collapsed: boolean) => void;
+    /** Lead icon as React node (overrides string-based leadIcon from schema) */
+    leadIcon?: ReactNode;
+    /** Header actions as React node (overrides string-based headerActions from schema) */
+    headerActions?: ReactNode;
+    /** Collapsed view content as React node (overrides string-based collapsedView from schema) */
+    collapsedView?: ReactNode;
+    /** Main content as React node (overrides string-based children from schema) */
+    children?: ReactNode;
+    /** Footer content as React node (overrides string-based footerView from schema) */
+    footerView?: ReactNode;
+    /** Collapsed state icon as React node (overrides string-based collapsedIcon from schema) */
+    collapsedIcon?: ReactNode;
+    /** Expanded state icon as React node (overrides string-based expandedIcon from schema) */
+    expandedIcon?: ReactNode;
+    /**
+     * Unique key for local storage persistence (when persistState is true)
+     * Defaults to component id or generates one automatically
+     */
+    storageKey?: string;
+    /**
+     * Animation duration in milliseconds
+     * @default 300
+     */
+    animationDuration?: number;
+    /**
+     * Disable all animations (useful for testing or accessibility)
+     * @default false
+     */
+    disableAnimations?: boolean;
+    /**
+     * Custom CSS class for the container
+     */
+    containerClassName?: string;
+    /**
+     * Custom CSS class for the header
+     */
+    headerClassName?: string;
+    /**
+     * Custom CSS class for the content area
+     */
+    contentClassName?: string;
+    /**
+     * Custom CSS class for the footer
+     */
+    footerClassName?: string;
+    /**
+     * ARIA label for the toggle button
+     * @default "Toggle content visibility"
+     */
+    toggleAriaLabel?: string;
+    /**
+     * ID of element that describes the collapsible content
+     */
+    'aria-describedby'?: string;
+    /**
+     * Additional ARIA attributes for the content region
+     */
+    contentAriaProps?: {
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
+        role?: string;
+    };
+};
+/**
+ * Complete CollapsibleLayout component props interface
+ *
+ * This is the interface that should be used by the CollapsibleLayout component.
+ * It combines the view props with data binding capabilities.
+ */
+export interface CollapsibleLayoutProps extends CollapsibleLayoutViewProps, WithDataBinding {
+}
+/**
+ * Type guard to check if a component has CollapsibleLayout props
+ */
+export declare function isCollapsibleLayoutProps(props: any): props is CollapsibleLayoutProps;
+/**
+ * Default props for CollapsibleLayout component
+ */
+export declare const defaultCollapsibleLayoutProps: Partial<CollapsibleLayoutProps>;
+/**
+ * Animation style configurations
+ */
+export interface AnimationConfig {
+    duration: number;
+    easing: string;
+    transform?: string;
+    opacity?: [number, number];
+}
+export declare const animationConfigs: Record<NonNullable<CollapsibleLayoutProps['animationStyle']>, AnimationConfig>;
+/**
+ * Spacing configurations
+ */
+export interface SpacingConfig {
+    padding: string;
+    gap?: string;
+}
+export declare const spacingConfigs: Record<NonNullable<CollapsibleLayoutProps['headerSpacing'] | CollapsibleLayoutProps['contentSpacing']>, SpacingConfig>;
+/**
+ * Utility type for extracting controlled vs uncontrolled props
+ */
+export type ControlledCollapsibleLayoutProps = CollapsibleLayoutProps & {
+    collapsed: boolean;
+    onToggle: (collapsed: boolean) => void;
+};
+export type UncontrolledCollapsibleLayoutProps = CollapsibleLayoutProps & {
+    defaultCollapsed?: boolean;
+    onToggle?: (collapsed: boolean) => void;
+};
+/**
+ * Hook return type for managing collapsed state
+ */
+export interface UseCollapsibleLayoutState {
+    collapsed: boolean;
+    toggle: () => void;
+    setCollapsed: (collapsed: boolean) => void;
+    isControlled: boolean;
+}
+//# sourceMappingURL=CollapsibleLayout.d.ts.map

package/dist/types/CollapsibleLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleLayout.d.ts","sourceRoot":"","sources":["../../src/types/CollapsibleLayout.ts"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -74,6 +74,7 @@ export type ColorIntensity = 'light' | 'main' | 'dark';
  */
 export type LoadingState = 'idle' | 'loading' | 'success' | 'error';
 export * from './CacheProvider';
+export * from './CollapsibleLayout';
 export * from './ContentProxy';
 export * from './DataTypes';
 export * from './TemplateProvider';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAE9F;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,kBAAkB,GAAG,KAAK,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AAE5D;;GAEG;AAEH;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAExG;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1F;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAE5E;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE1E;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAGpE,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAE9F;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,kBAAkB,GAAG,KAAK,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AAE5D;;GAEG;AAEH;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAExG;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1F;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAE5E;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE1E;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvF;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAGpE,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/package.json

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

package/src/components/blocks/Content.tsx

@@ -61,85 +61,33 @@ function ContentView({
     }
   };
 
-  // Content wrapper based on variant
-  const ContentWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-    const paddingValue = getPadding();
-    const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth as BreakpointValue);
-    const commonSx: SxProps<Theme> = {
-      textAlign: centered ? 'center' : 'left',
-      maxWidth: mappedMaxWidth !== false 
-        ? theme.breakpoints.values[mappedMaxWidth] 
-        : '100%',
-      width: '100%',
-      ...(centered && contentMaxWidth && {
-        mx: 'auto',
-      }),
-      p: paddingValue,
-      ...styleProps.sx,
-    };
-
-    switch (variant) {
-      case 'elevated':
-        return (
-          <Paper 
-            elevation={4}
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: theme.palette.background.paper,
-            }}
-          >
-            {children}
-          </Paper>
-        );
-      case 'outlined':
-        return (
-          <Paper 
-            variant="outlined" 
-            elevation={0}
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: 'var(--theme-surface)',
-              borderColor: 'var(--theme-border-main)', // Use theme border color
-              borderWidth: 1,
-              borderStyle: 'solid',
-            }}
-          >
-            {children}
-          </Paper>
-        );
-      case 'filled':
-        return (
-          <Box
-            {...htmlProps}
-            {...otherProps}
-            sx={{
-              ...commonSx,
-              backgroundColor: 'var(--theme-surface-variant)', // Use theme surface variant
-              borderRadius: 1,
-            }}
-          >
-            {children}
-          </Box>
-        );
-      default:
-        return (
-          <Box
-            {...htmlProps}
-            {...otherProps}
-            sx={commonSx}
-          >
-            {children}
-          </Box>
-        );
-    }
+  // Compute stable wrapper element (avoid recreating component type each render which caused remount & focus loss)
+  const paddingValue = getPadding();
+  const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth as BreakpointValue);
+  const commonSx: SxProps<Theme> = {
+    textAlign: centered ? 'center' : 'left',
+    maxWidth: mappedMaxWidth !== false ? theme.breakpoints.values[mappedMaxWidth] : '100%',
+    width: '100%',
+    ...(centered && contentMaxWidth && { mx: 'auto' }),
+    p: paddingValue,
+    ...styleProps.sx,
   };
 
+  let Wrapper: React.ElementType = Box;
+  let wrapperProps: Record<string, any> = { ...htmlProps, ...otherProps, sx: commonSx };
+  if (variant === 'elevated') {
+    Wrapper = Paper;
+    wrapperProps = { ...wrapperProps, elevation: 4, sx: { ...commonSx, backgroundColor: theme.palette.background.paper } };
+  } else if (variant === 'outlined') {
+    Wrapper = Paper;
+    wrapperProps = { ...wrapperProps, variant: 'outlined', elevation: 0, sx: { ...commonSx, backgroundColor: 'var(--theme-surface)', borderColor: 'var(--theme-border-main)', borderWidth: 1, borderStyle: 'solid' } };
+  } else if (variant === 'filled') {
+    Wrapper = Box;
+    wrapperProps = { ...wrapperProps, sx: { ...commonSx, backgroundColor: 'var(--theme-surface-variant)', borderRadius: 1 } };
+  }
+
   return (
-    <ContentWrapper>
+    <Wrapper {...wrapperProps}>
       <Stack spacing={2}>
         {/* Header */}
         {(title || subtitle) && (
@@ -210,7 +158,7 @@ function ContentView({
           </Stack>
         )}
       </Stack>
-    </ContentWrapper>
+  </Wrapper>
   );
 }
 

package/src/components/blocks/ProductCard.tsx

@@ -141,26 +141,29 @@ function ProductCardView({
 
   const displayActions = actions || getDefaultActions();
 
-  const FeaturesList = () => {
-    const featuresToShow = variant === 'compact' 
+  // INLINE WRAPPERS REFACTORED: Instead of inline component declarations (which cause remounts),
+  // compute JSX fragments via plain variables/functions and inject directly.
+
+  const featuresListElement = (() => {
+    const featuresToShow = variant === 'compact'
       ? (product.features || []).slice(0, maxFeaturesCompact)
       : (product.features || []);
 
     return (
       <Box sx={{ mb: variant === 'detailed' ? 2.5 : 2 }}>
-        <Typography 
-          variant="h6" 
+        <Typography
+          variant="h6"
           component="h4"
-          sx={{ 
-            mb: 1.5, 
+          sx={{
+            mb: 1.5,
             fontSize: '1.1rem',
             fontWeight: 600
           }}
         >
           Key Features:
         </Typography>
-        <Box component="ul" sx={{ 
-          m: 0, 
+        <Box component="ul" sx={{
+          m: 0,
           p: 0,
           listStyle: 'none'
         }}>
@@ -185,9 +188,9 @@ function ProductCardView({
                   flexShrink: 0
                 }}
               />
-              <Typography 
-                variant="body2" 
-                sx={{ 
+              <Typography
+                variant="body2"
+                sx={{
                   fontSize: '0.95rem',
                   lineHeight: 1.4,
                   opacity: 0.8
@@ -198,10 +201,10 @@ function ProductCardView({
             </Box>
           ))}
           {variant === 'compact' && (product.features || []).length > maxFeaturesCompact && (
-            <Typography 
-              variant="body2" 
+            <Typography
+              variant="body2"
               color="primary"
-              sx={{ 
+              sx={{
                 fontSize: '0.9rem',
                 pl: 2.5,
                 fontWeight: 500
@@ -213,41 +216,37 @@ function ProductCardView({
         </Box>
       </Box>
     );
-  };
-
-  const TechnologiesSection = () => {
-    if (!showTechnologies || variant === 'compact') return null;
+  })();
 
-    return (
-      <Box sx={{ mb: 3 }}>
-        <Typography 
-          variant="h6" 
-          component="h4"
-          sx={{ 
-            mb: 1.5, 
-            fontSize: '1rem',
-            fontWeight: 600
-          }}
-        >
-          Technologies:
-        </Typography>
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
-          {product.technologies.map((tech, index) => (
-            <Chip
-              key={index}
-              label={tech}
-              variant="outlined"
-              size="small"
-              sx={{
-                fontSize: '0.8rem',
-                fontWeight: 500
-              }}
-            />
-          ))}
-        </Box>
+  const technologiesSectionElement = (!showTechnologies || variant === 'compact') ? null : (
+    <Box sx={{ mb: 3 }}>
+      <Typography
+        variant="h6"
+        component="h4"
+        sx={{
+          mb: 1.5,
+          fontSize: '1rem',
+          fontWeight: 600
+        }}
+      >
+        Technologies:
+      </Typography>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+        {product.technologies.map((tech, index) => (
+          <Chip
+            key={index}
+            label={tech}
+            variant="outlined"
+            size="small"
+            sx={{
+              fontSize: '0.8rem',
+              fontWeight: 500
+            }}
+          />
+        ))}
       </Box>
-    );
-  };
+    </Box>
+  );
 
   return (
     <Box
@@ -364,11 +363,11 @@ function ProductCardView({
           </Typography>
         </Box>
 
-        {/* Features */}
-        <FeaturesList />
+  {/* Features */}
+  {featuresListElement}
 
-        {/* Technologies */}
-        <TechnologiesSection />
+  {/* Technologies */}
+  {technologiesSectionElement}
 
         {/* Action Buttons */}
         <Box sx={{ 

package/src/components/forms/FormBlock.tsx

@@ -46,7 +46,7 @@ type FormBlockViewProps = ModelProps<FormBlockModel> & {
   /**
    * Form content
    */
-  form?: React.ReactNode;
+  children?: React.ReactNode;
 
   /**
    * Footer content (links, additional text, etc.)
@@ -99,7 +99,7 @@ function FormBlockView({
   title,
   description,
   coverImage,
-  form,
+  children: form,
   footer,
   status,
   message,