@qwickapps/react-framework 1.3.3 → 1.3.5

package/dist/index.js

@@ -13762,72 +13762,62 @@ function ContentView({
         return 3;
     }
   };
-  // Content wrapper based on variant
-  const ContentWrapper = ({
-    children
-  }) => {
-    const paddingValue = getPadding();
-    const mappedMaxWidth = mapToMUIBreakpoint(contentMaxWidth === 'false' ? false : contentMaxWidth);
-    const commonSx = {
-      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 jsxRuntime.jsx(material.Paper, {
-          elevation: 4,
-          ...htmlProps,
-          ...otherProps,
-          sx: {
-            ...commonSx,
-            backgroundColor: theme.palette.background.paper
-          },
-          children: children
-        });
-      case 'outlined':
-        return jsxRuntime.jsx(material.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: children
-        });
-      case 'filled':
-        return jsxRuntime.jsx(material.Box, {
-          ...htmlProps,
-          ...otherProps,
-          sx: {
-            ...commonSx,
-            backgroundColor: 'var(--theme-surface-variant)',
-            // Use theme surface variant
-            borderRadius: 1
-          },
-          children: children
-        });
-      default:
-        return jsxRuntime.jsx(material.Box, {
-          ...htmlProps,
-          ...otherProps,
-          sx: commonSx,
-          children: children
-        });
-    }
+  // 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);
+  const commonSx = {
+    textAlign: centered ? 'center' : 'left',
+    maxWidth: mappedMaxWidth !== false ? theme.breakpoints.values[mappedMaxWidth] : '100%',
+    width: '100%',
+    ...(centered && contentMaxWidth && {
+      mx: 'auto'
+    }),
+    p: paddingValue,
+    ...styleProps.sx
+  };
+  let Wrapper = material.Box;
+  let wrapperProps = {
+    ...htmlProps,
+    ...otherProps,
+    sx: commonSx
   };
-  return jsxRuntime.jsx(ContentWrapper, {
+  if (variant === 'elevated') {
+    Wrapper = material.Paper;
+    wrapperProps = {
+      ...wrapperProps,
+      elevation: 4,
+      sx: {
+        ...commonSx,
+        backgroundColor: theme.palette.background.paper
+      }
+    };
+  } else if (variant === 'outlined') {
+    Wrapper = material.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 = material.Box;
+    wrapperProps = {
+      ...wrapperProps,
+      sx: {
+        ...commonSx,
+        backgroundColor: 'var(--theme-surface-variant)',
+        borderRadius: 1
+      }
+    };
+  }
+  return jsxRuntime.jsx(Wrapper, {
+    ...wrapperProps,
     children: jsxRuntime.jsxs(material.Stack, {
       spacing: 2,
       children: [(title || subtitle) && jsxRuntime.jsxs(material.Box, {
@@ -15336,6 +15326,689 @@ const GridCell = props => {
 };
 GridCell.displayName = 'GridCell';
 
+/**
+ * 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.
+ */
+let CollapsibleLayoutModel = class CollapsibleLayoutModel extends schema.Model {};
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Collapsed',
+  description: 'Whether the layout is currently collapsed'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], CollapsibleLayoutModel.prototype, "collapsed", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Default Collapsed',
+  description: 'Initial collapsed state for uncontrolled usage'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], CollapsibleLayoutModel.prototype, "defaultCollapsed", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Title',
+  description: 'Main title displayed in the header',
+  placeholder: 'Enter title...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "title", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Subtitle',
+  description: 'Secondary text displayed below the title',
+  placeholder: 'Enter subtitle...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "subtitle", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Lead Icon',
+  description: 'Icon displayed before the title (icon identifier or HTML)',
+  placeholder: 'Icon identifier...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "leadIcon", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Header Actions',
+  description: 'Additional controls displayed in header (HTML/React content)',
+  placeholder: 'Enter header actions HTML...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "headerActions", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Collapsed View',
+  description: 'Summary content shown when collapsed (HTML supported)',
+  placeholder: 'Enter collapsed view content...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "collapsedView", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Content',
+  description: 'Main content shown when expanded (HTML supported)',
+  placeholder: 'Enter main content...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "children", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Footer View',
+  description: 'Always visible footer content (HTML supported)',
+  placeholder: 'Enter footer content...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "footerView", void 0);
+__decorate([schema.Field({
+  defaultValue: 'header'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Trigger Area',
+  description: 'Area that responds to clicks for toggle functionality',
+  validation: {
+    options: [{
+      label: 'Button Only',
+      value: 'button'
+    }, {
+      label: 'Header Area',
+      value: 'header'
+    }, {
+      label: 'Button and Header',
+      value: 'both'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['button', 'header', 'both']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "triggerArea", void 0);
+__decorate([schema.Field({
+  defaultValue: 'slide'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Animation Style',
+  description: 'Animation variant for expand/collapse transitions',
+  validation: {
+    options: [{
+      label: 'Fade',
+      value: 'fade'
+    }, {
+      label: 'Slide',
+      value: 'slide'
+    }, {
+      label: 'Scale',
+      value: 'scale'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['fade', 'slide', 'scale']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "animationStyle", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Persist State',
+  description: 'Save collapse state in local storage'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], CollapsibleLayoutModel.prototype, "persistState", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Collapsed Icon',
+  description: 'Icon shown when content is collapsed (default: VisibilityIcon)',
+  placeholder: 'Icon identifier...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "collapsedIcon", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Expanded Icon',
+  description: 'Icon shown when content is expanded (default: VisibilityOffIcon)',
+  placeholder: 'Icon identifier...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "expandedIcon", void 0);
+__decorate([schema.Field({
+  defaultValue: true
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Show Divider',
+  description: 'Show divider lines between header, content, and footer sections'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], CollapsibleLayoutModel.prototype, "showDivider", void 0);
+__decorate([schema.Field({
+  defaultValue: 'default'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Variant',
+  description: 'Visual style variant for the layout container',
+  validation: {
+    options: [{
+      label: 'Default',
+      value: 'default'
+    }, {
+      label: 'Outlined',
+      value: 'outlined'
+    }, {
+      label: 'Elevated',
+      value: 'elevated'
+    }, {
+      label: 'Filled',
+      value: 'filled'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['default', 'outlined', 'elevated', 'filled']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "variant", void 0);
+__decorate([schema.Field({
+  defaultValue: 'comfortable'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Header Spacing',
+  description: 'Padding/spacing within the header area',
+  validation: {
+    options: [{
+      label: 'Compact',
+      value: 'compact'
+    }, {
+      label: 'Comfortable',
+      value: 'comfortable'
+    }, {
+      label: 'Spacious',
+      value: 'spacious'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['compact', 'comfortable', 'spacious']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "headerSpacing", void 0);
+__decorate([schema.Field({
+  defaultValue: 'comfortable'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Content Spacing',
+  description: 'Padding/spacing within the content area',
+  validation: {
+    options: [{
+      label: 'Compact',
+      value: 'compact'
+    }, {
+      label: 'Comfortable',
+      value: 'comfortable'
+    }, {
+      label: 'Spacious',
+      value: 'spacious'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['compact', 'comfortable', 'spacious']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "contentSpacing", void 0);
+CollapsibleLayoutModel = __decorate([schema.Schema('CollapsibleLayout', '1.0.0')], CollapsibleLayoutModel);
+var CollapsibleLayoutModel$1 = CollapsibleLayoutModel;
+
+/**
+ * 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.
+ */
+/**
+ * Type guard to check if a component has CollapsibleLayout props
+ */
+function isCollapsibleLayoutProps(props) {
+  return props && typeof props === 'object' && ('collapsed' in props || 'defaultCollapsed' in props);
+}
+/**
+ * Default props for CollapsibleLayout component
+ */
+const defaultCollapsibleLayoutProps = {
+  // Note: collapsed is intentionally omitted so components can be uncontrolled
+  defaultCollapsed: false,
+  triggerArea: 'both',
+  animationStyle: 'slide',
+  persistState: false,
+  showDivider: true,
+  variant: 'default',
+  headerSpacing: 'comfortable',
+  contentSpacing: 'comfortable',
+  animationDuration: 300,
+  disableAnimations: false,
+  toggleAriaLabel: 'Toggle content visibility'
+};
+const animationConfigs = {
+  fade: {
+    duration: 300,
+    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    opacity: [0, 1]
+  },
+  slide: {
+    duration: 300,
+    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transform: 'translateY(-10px)'
+  },
+  scale: {
+    duration: 200,
+    easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    transform: 'scale(0.95)',
+    opacity: [0, 1]
+  }
+};
+const spacingConfigs = {
+  compact: {
+    padding: '8px 12px',
+    gap: '4px'
+  },
+  comfortable: {
+    padding: '16px 20px',
+    gap: '8px'
+  },
+  spacious: {
+    padding: '24px 32px',
+    gap: '16px'
+  }
+};
+
+/**
+ * Custom hook for managing collapsible state - simplified approach
+ */
+function useCollapsibleState(controlled, collapsedProp, defaultCollapsedProp, onToggleProp, persistState, storageKey) {
+  const id = React.useId();
+  const finalStorageKey = storageKey || `collapsible-${id}`;
+  // For controlled components, use the prop; for uncontrolled, use internal state
+  const [internalCollapsed, setInternalCollapsed] = React.useState(() => {
+    if (controlled) {
+      return collapsedProp ?? false;
+    }
+    // Try localStorage first if persistence is enabled
+    if (persistState && typeof window !== 'undefined') {
+      const stored = localStorage.getItem(finalStorageKey);
+      if (stored !== null) {
+        return JSON.parse(stored);
+      }
+    }
+    return defaultCollapsedProp ?? false;
+  });
+  // Sync with controlled prop changes
+  React.useEffect(() => {
+    if (controlled && collapsedProp !== undefined) {
+      setInternalCollapsed(collapsedProp);
+    }
+  }, [controlled, collapsedProp]);
+  // Persist to localStorage for uncontrolled components
+  React.useEffect(() => {
+    if (!controlled && persistState && typeof window !== 'undefined') {
+      localStorage.setItem(finalStorageKey, JSON.stringify(internalCollapsed));
+    }
+  }, [controlled, internalCollapsed, persistState, finalStorageKey]);
+  const toggle = React.useCallback(() => {
+    const currentState = controlled ? collapsedProp ?? false : internalCollapsed;
+    const newCollapsed = !currentState;
+    // Always update internal state for visual updates
+    setInternalCollapsed(newCollapsed);
+    // Call callback to notify parent
+    onToggleProp?.(newCollapsed);
+  }, [controlled, collapsedProp, internalCollapsed, onToggleProp]);
+  const setCollapsed = React.useCallback(collapsed => {
+    setInternalCollapsed(collapsed);
+    onToggleProp?.(collapsed);
+  }, [onToggleProp]);
+  // Return the appropriate state
+  const finalCollapsed = controlled ? collapsedProp ?? false : internalCollapsed;
+  return {
+    collapsed: finalCollapsed,
+    toggle,
+    setCollapsed,
+    isControlled: controlled
+  };
+}
+/**
+ * Core CollapsibleLayout View component
+ */
+function CollapsibleLayoutView({
+  // State props
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onToggle,
+  // Content props  
+  title,
+  subtitle,
+  leadIcon,
+  headerActions,
+  collapsedView,
+  children,
+  footerView,
+  // Behavior props
+  triggerArea = 'both',
+  animationStyle = 'slide',
+  persistState = false,
+  storageKey,
+  animationDuration = 300,
+  disableAnimations = false,
+  // Icons
+  collapsedIcon,
+  expandedIcon,
+  // Layout props
+  showDivider = true,
+  variant = 'default',
+  headerSpacing = 'comfortable',
+  contentSpacing = 'comfortable',
+  // Accessibility
+  toggleAriaLabel = 'Toggle content visibility',
+  'aria-describedby': ariaDescribedBy,
+  contentAriaProps = {},
+  // CSS classes
+  containerClassName,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  ...restProps
+}) {
+  const theme = material.useTheme();
+  const {
+    styleProps,
+    htmlProps,
+    restProps: otherProps
+  } = useBaseProps(restProps);
+  // Mark as QwickApp component
+  CollapsibleLayoutView[QWICKAPP_COMPONENT] = true;
+  // Determine controlled vs uncontrolled usage
+  const controlled = collapsedProp !== undefined;
+  // State management
+  const {
+    collapsed,
+    toggle,
+    setCollapsed
+  } = useCollapsibleState(controlled, collapsedProp, defaultCollapsed, onToggle, persistState, storageKey);
+  // Get spacing configurations
+  const headerSpacingConfig = spacingConfigs[headerSpacing];
+  const contentSpacingConfig = spacingConfigs[contentSpacing];
+  // Get animation configuration
+  const animationConfig = animationConfigs[animationStyle];
+  // Generate unique IDs for accessibility
+  const headerId = React.useId();
+  const contentId = React.useId();
+  // Handle click events
+  const handleHeaderClick = React.useCallback(event => {
+    if (triggerArea === 'header' || triggerArea === 'both') {
+      event.preventDefault();
+      toggle();
+    }
+  }, [triggerArea, toggle]);
+  const handleButtonClick = React.useCallback(event => {
+    event.stopPropagation();
+    toggle();
+  }, [toggle]);
+  // Render icons
+  const renderIcon = React.useCallback((icon, defaultIcon) => {
+    if (/*#__PURE__*/React.isValidElement(icon)) {
+      return icon;
+    }
+    if (typeof icon === 'string') {
+      return jsxRuntime.jsx(Html, {
+        children: icon
+      });
+    }
+    return defaultIcon;
+  }, []);
+  const toggleIcon = renderIcon(collapsed ? collapsedIcon : expandedIcon, collapsed ? jsxRuntime.jsx(iconsMaterial.ExpandMore, {}) : jsxRuntime.jsx(iconsMaterial.ExpandLess, {}));
+  // Container styles based on variant
+  const containerSx = React.useMemo(() => {
+    const baseSx = {
+      width: '100%',
+      position: 'relative',
+      ...styleProps.sx
+    };
+    switch (variant) {
+      case 'outlined':
+        return {
+          ...baseSx,
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: 1,
+          backgroundColor: 'var(--theme-surface)'
+        };
+      case 'elevated':
+        return {
+          ...baseSx,
+          boxShadow: theme.shadows[2],
+          borderRadius: 1,
+          backgroundColor: theme.palette.background.paper
+        };
+      case 'filled':
+        return {
+          ...baseSx,
+          backgroundColor: 'var(--theme-surface-variant)',
+          borderRadius: 1
+        };
+      default:
+        return baseSx;
+    }
+  }, [variant, theme, styleProps.sx]);
+  // Header styles
+  const headerSx = React.useMemo(() => ({
+    ...headerSpacingConfig,
+    cursor: triggerArea === 'header' || triggerArea === 'both' ? 'pointer' : 'default',
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    '&:hover': triggerArea === 'header' || triggerArea === 'both' ? {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)'
+    } : {}
+  }), [headerSpacingConfig, triggerArea]);
+  // Content styles
+  const contentSx = React.useMemo(() => ({
+    ...contentSpacingConfig
+  }), [contentSpacingConfig]);
+  // Animation props for Collapse component
+  const collapseProps = React.useMemo(() => {
+    if (disableAnimations) {
+      return {
+        timeout: 0
+      };
+    }
+    const baseProps = {
+      timeout: animationDuration
+    };
+    switch (animationStyle) {
+      case 'fade':
+        return {
+          ...baseProps,
+          sx: {
+            '& .MuiCollapse-wrapper': {
+              opacity: collapsed ? 0 : 1,
+              transition: `opacity ${animationDuration}ms ${animationConfig.easing}`
+            }
+          }
+        };
+      case 'scale':
+        return {
+          ...baseProps,
+          sx: {
+            '& .MuiCollapse-wrapper': {
+              transform: collapsed ? 'scale(0.95)' : 'scale(1)',
+              opacity: collapsed ? 0 : 1,
+              transition: `all ${animationDuration}ms ${animationConfig.easing}`
+            }
+          }
+        };
+      default:
+        // slide
+        return baseProps;
+    }
+  }, [disableAnimations, animationDuration, animationStyle, animationConfig, collapsed]);
+  // Render content based on type
+  const renderContent = React.useCallback(content => {
+    if (!content) return null;
+    if (typeof content === 'string') {
+      return jsxRuntime.jsx(Html, {
+        children: content
+      });
+    }
+    return content;
+  }, []);
+  // Container content that will be wrapped
+  const containerContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [(title || subtitle || leadIcon || headerActions || triggerArea === 'button' || triggerArea === 'both') && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsxs(material.Box, {
+        id: headerId,
+        className: headerClassName,
+        sx: headerSx,
+        onClick: handleHeaderClick,
+        role: triggerArea === 'header' || triggerArea === 'both' ? 'button' : undefined,
+        tabIndex: triggerArea === 'header' || triggerArea === 'both' ? 0 : undefined,
+        "aria-expanded": !collapsed,
+        "aria-controls": contentId,
+        "aria-describedby": ariaDescribedBy,
+        onKeyDown: e => {
+          if ((triggerArea === 'header' || triggerArea === 'both') && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            toggle();
+          }
+        },
+        children: [jsxRuntime.jsxs(material.Stack, {
+          direction: "row",
+          spacing: 2,
+          alignItems: "center",
+          sx: {
+            minWidth: 0,
+            flex: 1
+          },
+          children: [leadIcon && jsxRuntime.jsx(material.Box, {
+            sx: {
+              flexShrink: 0
+            },
+            children: renderContent(leadIcon)
+          }), (title || subtitle) && jsxRuntime.jsxs(material.Box, {
+            sx: {
+              minWidth: 0,
+              flex: 1
+            },
+            children: [title && jsxRuntime.jsx(material.Typography, {
+              variant: "h6",
+              component: "h3",
+              sx: {
+                fontWeight: 600,
+                lineHeight: 1.2,
+                ...(subtitle && {
+                  mb: 0.5
+                })
+              },
+              children: title
+            }), subtitle && jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                lineHeight: 1.3
+              },
+              children: subtitle
+            })]
+          })]
+        }), jsxRuntime.jsxs(material.Stack, {
+          direction: "row",
+          spacing: 1,
+          alignItems: "center",
+          sx: {
+            flexShrink: 0
+          },
+          children: [headerActions && jsxRuntime.jsx(material.Box, {
+            children: renderContent(headerActions)
+          }), jsxRuntime.jsx(material.IconButton, {
+            onClick: handleButtonClick,
+            size: "small",
+            "aria-label": toggleAriaLabel,
+            "aria-expanded": !collapsed,
+            "aria-controls": contentId,
+            children: toggleIcon
+          })]
+        })]
+      }), showDivider && jsxRuntime.jsx(material.Divider, {})]
+    }), collapsed && collapsedView && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(material.Box, {
+        className: contentClassName,
+        sx: contentSx,
+        children: renderContent(collapsedView)
+      }), showDivider && footerView && jsxRuntime.jsx(material.Divider, {})]
+    }), jsxRuntime.jsxs(material.Collapse, {
+      in: !collapsed,
+      ...collapseProps,
+      children: [jsxRuntime.jsx(material.Box, {
+        id: contentId,
+        className: contentClassName,
+        sx: contentSx,
+        role: "region",
+        "aria-labelledby": title ? headerId : undefined,
+        ...contentAriaProps,
+        children: renderContent(children)
+      }), showDivider && footerView && jsxRuntime.jsx(material.Divider, {})]
+    }), footerView && jsxRuntime.jsx(material.Box, {
+      className: footerClassName,
+      sx: contentSx,
+      children: renderContent(footerView)
+    })]
+  });
+  // Return appropriate container based on variant
+  if (variant === 'outlined') {
+    return jsxRuntime.jsx(material.Paper, {
+      variant: "outlined",
+      elevation: 0,
+      ...htmlProps,
+      ...otherProps,
+      className: containerClassName,
+      sx: containerSx,
+      children: containerContent
+    });
+  }
+  if (variant === 'elevated') {
+    return jsxRuntime.jsx(material.Paper, {
+      elevation: 2,
+      ...htmlProps,
+      ...otherProps,
+      className: containerClassName,
+      sx: containerSx,
+      children: containerContent
+    });
+  }
+  // Default variant (default, filled)
+  return jsxRuntime.jsx(material.Box, {
+    ...htmlProps,
+    ...otherProps,
+    className: containerClassName,
+    sx: containerSx,
+    children: containerContent
+  });
+}
+/**
+ * Main CollapsibleLayout component with data binding support
+ */
+function CollapsibleLayout(props) {
+  const {
+    dataSource,
+    bindingOptions,
+    ...restProps
+  } = props;
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return jsxRuntime.jsx(CollapsibleLayoutView, {
+      ...restProps
+    });
+  }
+  // Use data binding
+  const {
+    dataSource: _source,
+    loading,
+    error,
+    cached,
+    ...collapsibleProps
+  } = useDataBinding(dataSource, restProps, CollapsibleLayoutModel$1.getSchema(), {
+    cache: true,
+    cacheTTL: 300000,
+    strict: false,
+    ...bindingOptions
+  });
+  // Show loading state
+  if (loading) {
+    return jsxRuntime.jsx(CollapsibleLayoutView, {
+      ...restProps,
+      title: "Loading...",
+      variant: "default",
+      headerSpacing: "comfortable",
+      contentSpacing: "comfortable"
+    });
+  }
+  if (error) {
+    console.error('Error loading collapsible layout:', error);
+    {
+      return jsxRuntime.jsx(CollapsibleLayoutView, {
+        ...restProps,
+        title: "Error Loading Layout",
+        subtitle: error.message,
+        variant: "outlined",
+        headerSpacing: "comfortable",
+        contentSpacing: "comfortable"
+      });
+    }
+  }
+  return jsxRuntime.jsx(CollapsibleLayoutView, {
+    ...collapsibleProps
+  });
+}
+// Set default props
+CollapsibleLayout.defaultProps = defaultCollapsibleLayoutProps;
+
 /**
  * FeatureCard Schema - Schema definition for FeatureCard component
  *
@@ -16456,7 +17129,9 @@ function ProductCardView({
     return actions;
   };
   const displayActions = actions || getDefaultActions();
-  const FeaturesList = () => {
+  // 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 jsxRuntime.jsxs(material.Box, {
       sx: {
@@ -16516,40 +17191,37 @@ function ProductCardView({
         })]
       })]
     });
-  };
-  const TechnologiesSection = () => {
-    if (!showTechnologies || variant === 'compact') return null;
-    return jsxRuntime.jsxs(material.Box, {
+  })();
+  const technologiesSectionElement = !showTechnologies || variant === 'compact' ? null : jsxRuntime.jsxs(material.Box, {
+    sx: {
+      mb: 3
+    },
+    children: [jsxRuntime.jsx(material.Typography, {
+      variant: "h6",
+      component: "h4",
       sx: {
-        mb: 3
+        mb: 1.5,
+        fontSize: '1rem',
+        fontWeight: 600
       },
-      children: [jsxRuntime.jsx(material.Typography, {
-        variant: "h6",
-        component: "h4",
-        sx: {
-          mb: 1.5,
-          fontSize: '1rem',
-          fontWeight: 600
-        },
-        children: "Technologies:"
-      }), jsxRuntime.jsx(material.Box, {
+      children: "Technologies:"
+    }), jsxRuntime.jsx(material.Box, {
+      sx: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 1
+      },
+      children: product.technologies.map((tech, index) => jsxRuntime.jsx(material.Chip, {
+        label: tech,
+        variant: "outlined",
+        size: "small",
         sx: {
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: 1
-        },
-        children: product.technologies.map((tech, index) => jsxRuntime.jsx(material.Chip, {
-          label: tech,
-          variant: "outlined",
-          size: "small",
-          sx: {
-            fontSize: '0.8rem',
-            fontWeight: 500
-          }
-        }, index))
-      })]
-    });
-  };
+          fontSize: '0.8rem',
+          fontWeight: 500
+        }
+      }, index))
+    })]
+  });
   return jsxRuntime.jsxs(material.Box, {
     className: styleProps.className || "product-card",
     onClick: htmlProps.onClick || (variant === 'compact' ? handleProductClick : undefined),
@@ -16655,7 +17327,7 @@ function ProductCardView({
           },
           children: variant === 'detailed' ? product.description : product.shortDescription || product.description
         })]
-      }), jsxRuntime.jsx(FeaturesList, {}), jsxRuntime.jsx(TechnologiesSection, {}), jsxRuntime.jsx(material.Box, {
+      }), featuresListElement, technologiesSectionElement, jsxRuntime.jsx(material.Box, {
         sx: {
           display: 'flex',
           gap: 1.5,
@@ -17516,7 +18188,6 @@ const ThemeProvider = ({
         }
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actualThemeMode, paletteChangeCounter]); // paletteChangeCounter is needed to force theme rebuild // Re-create theme when palette changes
   // Theme preference management methods
   const setPreferredTheme = theme => {
@@ -18728,7 +19399,7 @@ function FormBlockView({
   title,
   description,
   coverImage,
-  form,
+  children: form,
   footer,
   status,
   message,
@@ -19729,6 +20400,193 @@ function SelectInputField(props) {
 // Mark as QwickApp component
 SelectInputField[QWICKAPP_COMPONENT] = true;
 
+/**
+ * SwitchInputField Schema - Data model for switch input field component
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+let SwitchInputFieldModel = class SwitchInputFieldModel extends schema.Model {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'The label text for the switch'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "label", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Checked',
+  description: 'Whether the switch is checked'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], SwitchInputFieldModel.prototype, "checked", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Whether the field is required'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], SwitchInputFieldModel.prototype, "required", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Whether the field is disabled'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], SwitchInputFieldModel.prototype, "disabled", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Error',
+  description: 'Error message to display'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "error", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text to display below the switch'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "helperText", void 0);
+__decorate([schema.Field({
+  defaultValue: 'medium'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Size',
+  description: 'Size of the switch'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "size", void 0);
+__decorate([schema.Field({
+  defaultValue: 'primary'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Color',
+  description: 'Color theme of the switch'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "color", void 0);
+SwitchInputFieldModel = __decorate([schema.Schema('SwitchInputField', '1.0.0')], SwitchInputFieldModel);
+var SwitchInputFieldModel$1 = SwitchInputFieldModel;
+
+// View component - handles the actual rendering
+function SwitchInputFieldView({
+  label,
+  checked = false,
+  onChange,
+  onFocus,
+  required = false,
+  disabled = false,
+  error,
+  helperText,
+  size = 'medium',
+  color = 'primary',
+  ...restProps
+}) {
+  const {
+    styleProps,
+    htmlProps
+  } = useBaseProps(restProps);
+  const handleChange = event => {
+    if (onChange) {
+      onChange(event.target.checked);
+    }
+  };
+  return jsxRuntime.jsxs(material.FormControl, {
+    ...htmlProps,
+    ...styleProps,
+    error: !!error,
+    required: required,
+    disabled: disabled,
+    sx: {
+      display: 'block',
+      ...styleProps.sx
+    },
+    children: [jsxRuntime.jsx(material.FormControlLabel, {
+      control: jsxRuntime.jsx(material.Switch, {
+        checked: checked,
+        onChange: handleChange,
+        onFocus: onFocus,
+        size: size,
+        color: color,
+        disabled: disabled
+      }),
+      label: label,
+      disabled: disabled
+    }), (error || helperText) && jsxRuntime.jsx(material.FormHelperText, {
+      children: error || helperText
+    })]
+  });
+}
+/**
+ * SwitchInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function SwitchInputField(props) {
+  const {
+    dataSource,
+    bindingOptions,
+    ...restProps
+  } = props;
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return jsxRuntime.jsx(SwitchInputFieldView, {
+      ...restProps
+    });
+  }
+  // Use data binding
+  const bindingResult = useDataBinding(dataSource, restProps, SwitchInputFieldModel$1.getSchema(), {
+    cache: true,
+    cacheTTL: 300000,
+    strict: false,
+    ...bindingOptions
+  });
+  // Check if we're still loading data using the metadata properties
+  const bindingLoading = bindingResult.$loading;
+  // Extract all the actual switch properties (excluding metadata)
+  const {
+    dataSource: _source,
+    $loading,
+    $error,
+    $dataSource,
+    $cached,
+    cached,
+    ...switchInputFieldProps
+  } = bindingResult;
+  const error = bindingResult.$error;
+  // Show loading state while fetching data
+  if (bindingLoading) {
+    return jsxRuntime.jsxs(material.Paper, {
+      variant: "outlined",
+      sx: {
+        p: 2,
+        textAlign: 'center'
+      },
+      children: [jsxRuntime.jsx(material.Typography, {
+        variant: "body2",
+        children: "Loading SwitchInputField..."
+      }), jsxRuntime.jsx(material.Typography, {
+        variant: "caption",
+        color: "text.secondary",
+        children: "Loading switch field configuration from data source..."
+      })]
+    });
+  }
+  if (error) {
+    console.error('Error loading switch input field:', error);
+    {
+      return jsxRuntime.jsx(material.Paper, {
+        variant: "outlined",
+        sx: {
+          p: 2,
+          textAlign: 'center',
+          borderColor: 'error.main'
+        },
+        children: jsxRuntime.jsxs(material.Typography, {
+          variant: "body2",
+          color: "error",
+          children: ["Error loading switch field: ", error.message]
+        })
+      });
+    }
+  }
+  return jsxRuntime.jsx(SwitchInputFieldView, {
+    ...switchInputFieldProps
+  });
+}
+// Mark as QwickApp component
+SwitchInputField[QWICKAPP_COMPONENT] = true;
+
 const TextField = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     gridProps,
@@ -20225,7 +21083,7 @@ const FormPage = ({
     title: title,
     description: description,
     coverImage: coverImage,
-    form: form,
+    children: form,
     footer: footer,
     status: status,
     message: message,
@@ -25018,6 +25876,8 @@ exports.Button = Button;
 exports.CardListGrid = CardListGrid;
 exports.ChoiceInputField = ChoiceInputField;
 exports.Code = Code;
+exports.CollapsibleLayout = CollapsibleLayout;
+exports.CollapsibleLayoutView = CollapsibleLayoutView;
 exports.Content = Content;
 exports.CoverImageHeader = CoverImageHeader;
 exports.DataProvider = DataProvider;
@@ -25053,16 +25913,19 @@ exports.QwickAppsLogo = QwickAppsLogo;
 exports.SafeSpan = SafeSpan;
 exports.Section = Section;
 exports.SelectInputField = SelectInputField;
+exports.SwitchInputField = SwitchInputField;
 exports.T = T;
 exports.TextField = TextField;
 exports.TextInputField = TextInputField;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
+exports.animationConfigs = animationConfigs;
 exports.applyCustomPalette = applyCustomPalette;
 exports.clearUserPalettePreference = clearUserPalettePreference;
 exports.clearUserThemePreference = clearUserThemePreference;
 exports.createLogger = createLogger;
 exports.createPaletteFromCurrentTheme = createPaletteFromCurrentTheme;
+exports.defaultCollapsibleLayoutProps = defaultCollapsibleLayoutProps;
 exports.deleteCustomPalette = deleteCustomPalette;
 exports.exportPalette = exportPalette;
 exports.getCSSVariable = getCSSVariable;
@@ -25077,6 +25940,7 @@ exports.getThemePerformanceStats = getThemePerformanceStats;
 exports.importPalette = importPalette;
 exports.initializePalette = initializePalette;
 exports.initializeTheme = initializeTheme;
+exports.isCollapsibleLayoutProps = isCollapsibleLayoutProps;
 exports.loadUserPalettePreference = loadUserPalettePreference;
 exports.loadUserThemePreference = loadUserThemePreference;
 exports.logThemePerformanceStats = logThemePerformanceStats;
@@ -25094,10 +25958,12 @@ exports.saveUserThemePreference = saveUserThemePreference;
 exports.setCSSVariable = setCSSVariable;
 exports.setPalette = setPalette;
 exports.setTheme = setTheme;
+exports.spacingConfigs = spacingConfigs;
 exports.t = t;
 exports.useAccessibility = useAccessibility;
 exports.useBaseProps = useBaseProps;
 exports.useBreadcrumbs = useBreadcrumbs;
+exports.useCollapsibleState = useCollapsibleState;
 exports.useData = useData;
 exports.useDataBinding = useDataBinding;
 exports.useDataContext = useDataContext;