@qwickapps/react-framework 1.3.2 → 1.3.4

package/README.md

@@ -4,6 +4,13 @@ A complete React framework for building modern, responsive applications with int
 
 ## What's New
 
+### September 2, 2025 - Built-in Error Handling & Accessibility
+- **Automatic Error Boundaries**: QwickApp now automatically wraps all content with ErrorBoundary for robust error handling
+- **Built-in Accessibility**: AccessibilityProvider automatically included for WCAG 2.1 AA compliance
+- **Generic Components**: Moved ErrorBoundary, AccessibilityProvider, and Breadcrumbs to framework level
+- **Complete Test Coverage**: Added comprehensive unit tests and Storybook stories for all new components
+- **Zero Configuration**: Error handling and accessibility features work out-of-the-box with QwickApp
+
 ### September 1, 2025 - Optional Dependencies & Performance
 - **Optional Logging**: Made `@qwickapps/logging` an optional dependency with console fallback
 - **Reduced Bundle Size**: Core framework no longer includes logging overhead by default
@@ -30,6 +37,7 @@ A complete React framework for building modern, responsive applications with int
 - **Content Blocks**: Styled containers with variants (elevated, outlined, filled)
 - **Feature Grids**: Showcase features with icons, titles, and actions
 - **Section Containers**: Configurable spacing and background variants
+- **CollapsibleLayout**: Advanced expandable/collapsible containers with state management
 
 ### 🎨 **Advanced Theming**
 - **Theme Management**: Light, dark, and system theme support
@@ -46,6 +54,12 @@ A complete React framework for building modern, responsive applications with int
 - **Markdown Component**: Convert Markdown to React components with syntax highlighting
 - **Transform System**: Extensible HTML element transformation with fallback handling
 
+### 🛡️ **Built-in Error Handling & Accessibility**
+- **ErrorBoundary**: Automatic error catching with user-friendly fallback UI and retry functionality
+- **AccessibilityProvider**: WCAG 2.1 AA compliance with system preference detection and ARIA announcements
+- **Breadcrumbs**: Accessible navigation hierarchy with keyboard support and customization
+- **Automatic Integration**: All features automatically enabled in QwickApp without configuration
+
 ### 🚀 **Developer Experience**
 - **TypeScript First**: Full TypeScript support with comprehensive types
 - **Storybook**: Interactive component documentation
@@ -288,6 +302,72 @@ import { Section, Content } from '@qwickapps/react-framework';
 </Section>
 ```
 
+### CollapsibleLayout
+
+Create advanced expandable/collapsible sections with comprehensive features:
+
+```tsx
+import { CollapsibleLayout } from '@qwickapps/react-framework';
+
+<CollapsibleLayout
+  title="User Settings"
+  subtitle="Configure your account preferences"
+  defaultCollapsed={false}
+  variant="outlined" // 'default' | 'outlined' | 'elevated' | 'filled'
+  triggerArea="header" // 'header' | 'button' | 'both'
+  animationStyle="slide" // 'fade' | 'slide' | 'scale'
+  persistState={true} // Remember state in localStorage
+  leadIcon={<SettingsIcon />}
+  headerActions={
+    <Button size="small">Edit</Button>
+  }
+>
+  <Stack spacing={2}>
+    <TextField label="Display Name" />
+    <TextField label="Email" />
+    <Switch label="Email Notifications" />
+  </Stack>
+</CollapsibleLayout>
+```
+
+**Key Features:**
+- **Controlled & Uncontrolled State**: Use `collapsed` prop for controlled state or `defaultCollapsed` for uncontrolled
+- **State Persistence**: `persistState` option saves collapsed state to localStorage
+- **Multiple Animations**: Choose from fade, slide, or scale animations with customizable duration
+- **Flexible Triggers**: Header click, button only, or both can trigger expand/collapse
+- **Rich Content Support**: Supports React components, HTML strings, and mixed content
+- **Accessibility Built-in**: ARIA attributes, keyboard navigation, and screen reader support
+- **Visual Variants**: Material-UI inspired variants (outlined, elevated, filled)
+- **CMS Integration**: Full data binding support for content management systems
+
+**Advanced Usage:**
+
+```tsx
+// Controlled state with custom icons
+const [isCollapsed, setIsCollapsed] = useState(false);
+
+<CollapsibleLayout
+  title="Advanced Configuration"
+  collapsed={isCollapsed}
+  onToggle={setIsCollapsed}
+  collapsedIcon={<ExpandMoreIcon />}
+  expandedIcon={<ExpandLessIcon />}
+  collapsedView={
+    <Typography color="text.secondary">
+      Click to view configuration options...
+    </Typography>
+  }
+  footerView={
+    <Button size="small">Save Changes</Button>
+  }
+>
+  {/* Complex form content */}
+</CollapsibleLayout>
+
+// Data binding with CMS
+<CollapsibleLayout dataSource="settings.user-preferences" />
+```
+
 ## CMS Content Components
 
 Transform HTML strings and Markdown content into React components with intelligent element transformation and syntax highlighting.
@@ -633,6 +713,49 @@ interface TransformConfig {
 }
 ```
 
+### CollapsibleLayout Component
+
+```tsx
+interface CollapsibleLayoutProps extends WithBaseProps, WithDataBinding {
+  // State Management
+  collapsed?: boolean;                 // Controlled collapsed state
+  defaultCollapsed?: boolean;          // Initial collapsed state (uncontrolled)
+  onToggle?: (collapsed: boolean) => void; // State change callback
+  persistState?: boolean;              // Save state to localStorage
+  storageKey?: string;                 // Custom storage key
+  
+  // Content
+  title?: string;                      // Header title
+  subtitle?: string;                   // Header subtitle  
+  leadIcon?: ReactNode;                // Icon before title
+  headerActions?: ReactNode;           // Actions in header (buttons, etc.)
+  children?: ReactNode;                // Main expandable content
+  collapsedView?: ReactNode;           // Content shown when collapsed
+  footerView?: ReactNode;              // Always-visible footer content
+  
+  // Behavior
+  triggerArea?: 'header' | 'button' | 'both'; // Click trigger area
+  animationStyle?: 'fade' | 'slide' | 'scale'; // Animation type
+  animationDuration?: number;          // Animation duration (ms)
+  disableAnimations?: boolean;         // Disable all animations
+  
+  // Styling
+  variant?: 'default' | 'outlined' | 'elevated' | 'filled';
+  headerSpacing?: 'compact' | 'comfortable' | 'spacious';
+  contentSpacing?: 'compact' | 'comfortable' | 'spacious';
+  showDivider?: boolean;               // Show section dividers
+  
+  // Icons
+  collapsedIcon?: ReactNode;           // Custom collapsed state icon
+  expandedIcon?: ReactNode;            // Custom expanded state icon
+  
+  // Accessibility
+  toggleAriaLabel?: string;            // ARIA label for toggle button
+  'aria-describedby'?: string;         // Describedby reference
+  contentAriaProps?: object;           // Additional ARIA props
+}
+```
+
 ## Advanced Usage
 
 ### Custom Layout Composition
@@ -686,6 +809,113 @@ function LandingPage() {
 }
 ```
 
+### Advanced CollapsibleLayout Patterns
+
+```tsx
+// Settings Dashboard with Multiple Sections
+function SettingsDashboard() {
+  return (
+    <QwickApp appName="Settings">
+      <Stack spacing={2}>
+        <CollapsibleLayout
+          title="Account Settings"
+          subtitle="Profile and security preferences"
+          defaultCollapsed={false}
+          variant="outlined"
+          leadIcon={<PersonIcon />}
+          persistState={true}
+          storageKey="settings-account"
+        >
+          <Stack spacing={2}>
+            <TextField label="Display Name" />
+            <TextField label="Email Address" />
+            <Switch label="Two-Factor Authentication" />
+          </Stack>
+        </CollapsibleLayout>
+
+        <CollapsibleLayout
+          title="Privacy Settings"
+          subtitle="Data usage and visibility"
+          defaultCollapsed={true}
+          variant="outlined" 
+          leadIcon={<PrivacyIcon />}
+          triggerArea="both"
+          animationStyle="fade"
+        >
+          <Stack spacing={2}>
+            <Switch label="Public Profile" />
+            <Switch label="Activity Tracking" />
+            <TextField 
+              label="Data Retention" 
+              select
+              defaultValue="1year"
+            />
+          </Stack>
+        </CollapsibleLayout>
+      </Stack>
+    </QwickApp>
+  );
+}
+
+// FAQ Section with Collapsed Previews  
+function FAQSection() {
+  const faqs = [
+    {
+      question: "How do I integrate with my CMS?",
+      preview: "Integration involves data providers and configuration...",
+      answer: "Detailed integration steps with code examples..."
+    },
+    // ... more FAQs
+  ];
+
+  return (
+    <Stack spacing={2}>
+      {faqs.map((faq, index) => (
+        <CollapsibleLayout
+          key={index}
+          title={faq.question}
+          defaultCollapsed={true}
+          variant="outlined"
+          collapsedView={
+            <Typography color="text.secondary" sx={{ fontStyle: 'italic' }}>
+              {faq.preview}
+            </Typography>
+          }
+        >
+          <Typography>{faq.answer}</Typography>
+        </CollapsibleLayout>
+      ))}
+    </Stack>
+  );
+}
+
+// Complex Data Dashboard
+function DataDashboard() {
+  return (
+    <CollapsibleLayout
+      title="Sales Analytics"
+      subtitle="Q4 2024 performance metrics"
+      variant="elevated"
+      headerActions={
+        <Stack direction="row" spacing={1}>
+          <Chip label="Live" color="success" size="small" />
+          <Button size="small">Export</Button>
+        </Stack>
+      }
+      leadIcon={<ChartIcon />}
+      footerView={
+        <Typography variant="caption" color="text.secondary">
+          Last updated: {new Date().toLocaleTimeString()}
+        </Typography>
+      }
+    >
+      {/* Complex dashboard content with charts, tables, etc. */}
+      <DashboardContent />
+    </CollapsibleLayout>
+  );
+}
+```
+
 ### Accessing App Context
 
 ```tsx
@@ -715,6 +945,9 @@ import type {
   HeroBlockProps,
   ColumnLayoutProps,
   FeatureItem,
+  CollapsibleLayoutProps,
+  CollapsibleLayoutViewProps,
+  UseCollapsibleLayoutState,
 } from '@qwickapps/react-framework';
 ```
 
@@ -797,6 +1030,99 @@ For complete documentation, see [@qwickapps/logging](../qwickapps-logging/README
 3. **Leverage the built-in performance monitoring** for theme changes
 4. **Consider lazy loading** for large component trees
 
+## Built-in Error Handling & Accessibility
+
+QwickApp automatically includes robust error handling and accessibility features without any configuration needed.
+
+### ErrorBoundary
+
+All QwickApp instances are automatically wrapped with an ErrorBoundary that:
+- Catches JavaScript errors anywhere in the component tree
+- Displays user-friendly fallback UI with retry functionality
+- Shows error details in development mode
+- Supports custom error handling callbacks
+
+```tsx
+import { ErrorBoundary } from '@qwickapps/react-framework';
+
+// For standalone usage outside QwickApp
+<ErrorBoundary onError={(error, errorInfo) => console.log(error)}>
+  <MyComponent />
+</ErrorBoundary>
+
+// Or use as Higher-Order Component
+const SafeComponent = withErrorBoundary(MyComponent, {
+  fallback: <div>Custom error UI</div>
+});
+```
+
+### AccessibilityProvider
+
+All QwickApp instances automatically include accessibility features:
+- **System Preferences**: Detects high contrast, reduced motion preferences
+- **Keyboard Navigation**: Enhanced focus indicators for keyboard users
+- **Screen Reader Support**: ARIA live announcements
+- **Accessibility Auditing**: Development-time accessibility issue detection
+
+```tsx
+import { useAccessibility } from '@qwickapps/react-framework';
+
+function MyComponent() {
+  const {
+    highContrast,
+    reducedMotion,
+    isKeyboardUser,
+    announce,
+    runAudit
+  } = useAccessibility();
+
+  return (
+    <div>
+      {highContrast && <p>High contrast mode enabled</p>}
+      <button onClick={() => announce('Action completed', 'polite')}>
+        Complete Action
+      </button>
+    </div>
+  );
+}
+```
+
+### Breadcrumbs
+
+Generic breadcrumb navigation with full accessibility support:
+
+```tsx
+import { Breadcrumbs, useBreadcrumbs } from '@qwickapps/react-framework';
+
+const breadcrumbItems = [
+  { label: 'Home', href: '/', icon: <HomeIcon /> },
+  { label: 'Products', href: '/products' },
+  { label: 'Electronics', href: '/products/electronics', current: true },
+];
+
+function Navigation() {
+  const handleNavigate = (item, index) => {
+    console.log('Navigate to:', item.label);
+  };
+
+  return (
+    <Breadcrumbs 
+      items={breadcrumbItems}
+      onNavigate={handleNavigate}
+      separator="→"
+      maxItems={4}
+    />
+  );
+}
+
+// Or use the hook for dynamic breadcrumbs
+function DynamicBreadcrumbs() {
+  const { breadcrumbs, addBreadcrumb, setBreadcrumbs } = useBreadcrumbs();
+  
+  return <Breadcrumbs items={breadcrumbs} />;
+}
+```
+
 ## License
 
 This software is licensed under the **PolyForm Shield License 1.0.0**.

package/dist/components/AccessibilityProvider.d.ts

@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+export interface AccessibilityState {
+    highContrast: boolean;
+    reducedMotion: boolean;
+    largeText: boolean;
+    focusVisible: boolean;
+    isKeyboardUser: boolean;
+    issues: AccessibilityIssue[];
+    lastAnnouncement: Announcement | null;
+    preferences: Record<string, any>;
+}
+export interface AccessibilityIssue {
+    type: string;
+    message: string;
+    level: 'error' | 'warning' | 'info';
+    element?: Element;
+}
+export interface Announcement {
+    message: string;
+    level: 'polite' | 'assertive';
+    timestamp: number;
+}
+export interface AccessibilityContextValue extends AccessibilityState {
+    setHighContrast: (enabled: boolean) => void;
+    setReducedMotion: (enabled: boolean) => void;
+    setLargeText: (enabled: boolean) => void;
+    setFocusVisible: (enabled: boolean) => void;
+    announce: (message: string, level?: 'polite' | 'assertive') => void;
+    announcePolite: (message: string) => void;
+    announceAssertive: (message: string) => void;
+    addIssue: (issue: AccessibilityIssue) => void;
+    clearIssues: () => void;
+    runAudit: () => void;
+}
+export interface AccessibilityProviderProps {
+    children: ReactNode;
+    enableAudit?: boolean;
+}
+/**
+ * Accessibility Provider Component
+ * Provides comprehensive accessibility context and utilities
+ *
+ * Features:
+ * - System preference detection (high contrast, reduced motion)
+ * - Keyboard navigation detection
+ * - ARIA live announcements
+ * - Focus management
+ * - Accessibility auditing
+ * - Settings persistence
+ */
+export declare const AccessibilityProvider: React.FC<AccessibilityProviderProps>;
+/**
+ * Hook to access accessibility context
+ */
+export declare const useAccessibility: () => AccessibilityContextValue;
+/**
+ * Higher-Order Component for accessibility enhancements
+ */
+export declare const withAccessibility: <P extends object>(WrappedComponent: React.ComponentType<P>) => {
+    (props: P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AccessibilityProvider;
+//# sourceMappingURL=AccessibilityProvider.d.ts.map

package/dist/components/AccessibilityProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibilityProvider.d.ts","sourceRoot":"","sources":["../../src/components/AccessibilityProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAoD,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3F,MAAM,WAAW,kBAAkB;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,gBAAgB,EAAE,YAAY,GAAG,IAAI,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;CAClB;AAcD,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACpE,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,QAAQ,GAAG,WAAW,KAAK,IAAI,CAAC;IACpE,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC9C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AAqHD,MAAM,WAAW,0BAA0B;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAoPtE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,yBAQnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,EACjD,kBAAkB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;YAEO,CAAC;;CAchD,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: React.ReactNode;
+    current?: boolean;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+    className?: string;
+    onNavigate?: (item: BreadcrumbItem, index: number) => void;
+    maxItems?: number;
+    showRoot?: boolean;
+}
+/**
+ * Generic Breadcrumbs component for navigation hierarchy
+ *
+ * Features:
+ * - Accessible navigation with proper ARIA labels
+ * - Customizable separators and icons
+ * - Responsive design with item truncation
+ * - Support for custom navigation handlers
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ */
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+/**
+ * Hook for managing breadcrumb state
+ */
+export declare const useBreadcrumbs: () => {
+    breadcrumbs: BreadcrumbItem[];
+    addBreadcrumb: (item: BreadcrumbItem) => void;
+    removeBreadcrumb: (index: number) => void;
+    setBreadcrumbs: (items: BreadcrumbItem[]) => void;
+    clearBreadcrumbs: () => void;
+};
+export default Breadcrumbs;
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/components/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/components/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAChC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+IlD,CAAC;AAmBF;;GAEG;AACH,eAAO,MAAM,cAAc;;0BAGqB,cAAc;8BAIV,MAAM;4BAID,cAAc,EAAE;;CAexE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,39 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    showErrorDetails?: boolean;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+/**
+ * Generic ErrorBoundary component for catching and handling React errors
+ *
+ * Features:
+ * - Catches JavaScript errors anywhere in child component tree
+ * - Displays fallback UI with retry functionality
+ * - Shows error details in development mode
+ * - Customizable error handling and fallback UI
+ * - Automatic error logging
+ */
+export declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleRetry: () => void;
+    handleRefresh: () => void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+/**
+ * Higher-order component that wraps a component with ErrorBoundary
+ */
+export declare function withErrorBoundary<P extends object>(WrappedComponent: React.ComponentType<P>, errorBoundaryProps?: Omit<Props, 'children'>): {
+    (props: P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/dist/components/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,UAAU,KAAK;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,KAAK;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC7C,KAAK,EAAE,KAAK;IASxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IASpD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAwBpD,WAAW,aAMT;IAEF,aAAa,aAIX;IAEF,MAAM;CAgHN;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EACjD,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACxC,kBAAkB,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;YAED,CAAC;;EAS5C;AAED,eAAe,aAAa,CAAC"}

package/dist/components/QwickApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QwickApp.d.ts","sourceRoot":"","sources":["../../src/components/QwickApp.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAAiC,MAAM,OAAO,CAAC;AACtD,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,EAAmB,KAAK,oBAAoB,EAAE,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,gBAAgB,CAAC;AAMxB,UAAU,sBAAuB,SAAQ,aAAa;IACpD,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,sBAAsB,CAAC;CAErC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuFrD,CAAC;AAEF,eAAO,MAAM,WAAW,QAAO,oBAM9B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"QwickApp.d.ts","sourceRoot":"","sources":["../../src/components/QwickApp.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAAiC,MAAM,OAAO,CAAC;AACtD,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,EAAmB,KAAK,oBAAoB,EAAE,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,gBAAgB,CAAC;AAQxB,UAAU,sBAAuB,SAAQ,aAAa;IACpD,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,sBAAsB,CAAC;CAErC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2FrD,CAAC;AAEF,eAAO,MAAM,WAAW,QAAO,oBAM9B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -28,7 +28,7 @@ type FormBlockViewProps = ModelProps<FormBlockModel> & {
     /**
      * Form content
      */
-    form?: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * Footer content (links, additional text, etc.)
      */

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

@@ -1 +1 @@
-{"version":3,"file":"FormBlock.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBlock.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAI3D,KAAK,kBAAkB,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG;IACrD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAEtC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,eAAe;CAAI;AAyK/E;;;GAGG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,kDAwDvC;AAKD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormBlock.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBlock.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAI3D,KAAK,kBAAkB,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG;IACrD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,eAAe;CAAI;AAyK/E;;;GAGG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,kDAwDvC;AAKD,eAAe,SAAS,CAAC"}

package/dist/components/index.d.ts

@@ -19,6 +19,9 @@ export * from './Scaffold';
 export * from './ResponsiveMenu';
 export * from './QwickApp';
 export * from './AccessibilityChecker';
+export * from './ErrorBoundary';
+export * from './AccessibilityProvider';
+export * from './Breadcrumbs';
 export { default as Logo } from './Logo';
 export type { LogoProps } from './Logo';
 export { default as QwickAppsLogo } from './QwickAppsLogo';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/input/SwitchInputField.d.ts

@@ -0,0 +1,28 @@
+/**
+ * SwitchInputField - Switch toggle component with data binding support
+ *
+ * Provides a standardized switch field with:
+ * - Consistent Material-UI styling
+ * - Data binding capabilities
+ * - Label and helper text support
+ * - Focus and error handling
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import SwitchInputFieldModel from '../../schemas/SwitchInputFieldSchema';
+type SwitchInputFieldViewProps = ModelProps<SwitchInputFieldModel> & {
+    /** Change handler */
+    onChange?: (checked: boolean) => void;
+    /** Focus handler */
+    onFocus?: () => void;
+};
+export interface SwitchInputFieldProps extends SwitchInputFieldViewProps, WithDataBinding {
+}
+/**
+ * SwitchInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+declare function SwitchInputField(props: SwitchInputFieldProps): import("react/jsx-runtime").JSX.Element | null;
+export default SwitchInputField;
+//# sourceMappingURL=SwitchInputField.d.ts.map

package/dist/components/input/SwitchInputField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchInputField.d.ts","sourceRoot":"","sources":["../../../src/components/input/SwitchInputField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAWH,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGrE,OAAO,qBAAqB,MAAM,sCAAsC,CAAC;AAEzE,KAAK,yBAAyB,GAAG,UAAU,CAAC,qBAAqB,CAAC,GAAG;IACnE,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,yBAAyB,EAAE,eAAe;CAAG;AA2D5F;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kDA+DrD;AAKD,eAAe,gBAAgB,CAAC"}

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

@@ -7,11 +7,13 @@
 export { default as ChoiceInputField } from './ChoiceInputField';
 export { default as HtmlInputField } from './HtmlInputField';
 export { default as SelectInputField } from './SelectInputField';
+export { default as SwitchInputField } from './SwitchInputField';
 export { default as TextField } from './TextField';
 export { default as TextInputField } from './TextInputField';
 export type { ChoiceInputFieldProps } from './ChoiceInputField';
 export type { HtmlInputFieldProps } from './HtmlInputField';
 export type { SelectInputFieldProps, SelectOption } from './SelectInputField';
+export type { SwitchInputFieldProps } from './SwitchInputField';
 export type { TextFieldProps } from './TextField';
 export type { TextInputFieldProps } from './TextInputField';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/layout/CollapsibleLayout/CollapsibleLayout.d.ts

@@ -0,0 +1,34 @@
+/**
+ * CollapsibleLayout Component - Advanced expandable/collapsible container
+ *
+ * Features:
+ * - Controlled and uncontrolled state management
+ * - Multiple animation styles (fade, slide, scale)
+ * - Customizable trigger areas (button, header, both)
+ * - localStorage persistence
+ * - Full accessibility support
+ * - Material-UI integration with themes
+ * - Multiple visual variants
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+import { CollapsibleLayoutViewProps, CollapsibleLayoutProps, UseCollapsibleLayoutState } from '../../../types/CollapsibleLayout';
+/**
+ * Custom hook for managing collapsible state - simplified approach
+ */
+declare function useCollapsibleState(controlled: boolean, collapsedProp?: boolean, defaultCollapsedProp?: boolean, onToggleProp?: (collapsed: boolean) => void, persistState?: boolean, storageKey?: string): UseCollapsibleLayoutState;
+/**
+ * Core CollapsibleLayout View component
+ */
+declare function CollapsibleLayoutView({ collapsed: collapsedProp, defaultCollapsed, onToggle, title, subtitle, leadIcon, headerActions, collapsedView, children, footerView, triggerArea, animationStyle, persistState, storageKey, animationDuration, disableAnimations, collapsedIcon, expandedIcon, showDivider, variant, headerSpacing, contentSpacing, toggleAriaLabel, 'aria-describedby': ariaDescribedBy, contentAriaProps, containerClassName, headerClassName, contentClassName, footerClassName, ...restProps }: CollapsibleLayoutViewProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main CollapsibleLayout component with data binding support
+ */
+declare function CollapsibleLayout(props: CollapsibleLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace CollapsibleLayout {
+    var defaultProps: Partial<CollapsibleLayoutProps>;
+}
+export default CollapsibleLayout;
+export { CollapsibleLayout, CollapsibleLayoutView, useCollapsibleState };
+export type { CollapsibleLayoutProps, CollapsibleLayoutViewProps, UseCollapsibleLayoutState };
+//# sourceMappingURL=CollapsibleLayout.d.ts.map