@qwickapps/react-framework 1.3.3 → 1.3.4

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.4",
   "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/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,

package/src/components/input/SwitchInputField.tsx

@@ -0,0 +1,165 @@
+/**
+ * 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 React from 'react';
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  Paper,
+  Switch,
+  Typography
+} from '@mui/material';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps } from '../../hooks';
+import { useDataBinding } from '../../hooks';
+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 {}
+
+// View component - handles the actual rendering
+function SwitchInputFieldView({
+  label,
+  checked = false,
+  onChange,
+  onFocus,
+  required = false,
+  disabled = false,
+  error,
+  helperText,
+  size = 'medium',
+  color = 'primary',
+  ...restProps
+}: SwitchInputFieldViewProps) {
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(event.target.checked);
+    }
+  };
+
+  return (
+    <FormControl
+      {...htmlProps}
+      {...styleProps}
+      error={!!error}
+      required={required}
+      disabled={disabled}
+      sx={{
+        display: 'block',
+        ...styleProps.sx
+      }}
+    >
+      <FormControlLabel
+        control={
+          <Switch
+            checked={checked}
+            onChange={handleChange}
+            onFocus={onFocus}
+            size={size}
+            color={color}
+            disabled={disabled}
+          />
+        }
+        label={label}
+        disabled={disabled}
+      />
+      {(error || helperText) && (
+        <FormHelperText>
+          {error || helperText}
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+}
+
+/**
+ * SwitchInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function SwitchInputField(props: SwitchInputFieldProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return <SwitchInputFieldView {...restProps} />;
+  }
+
+  // Use data binding
+  const bindingResult = useDataBinding<SwitchInputFieldModel>(
+    dataSource,
+    restProps as Partial<SwitchInputFieldModel>,
+    SwitchInputFieldModel.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 (
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 2,
+          textAlign: 'center'
+        }}
+      >
+        <Typography variant="body2">Loading SwitchInputField...</Typography>
+        <Typography variant="caption" color="text.secondary">
+          Loading switch field configuration from data source...
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading switch input field:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Paper
+          variant="outlined"
+          sx={{
+            p: 2,
+            textAlign: 'center',
+            borderColor: 'error.main'
+          }}
+        >
+          <Typography variant="body2" color="error">
+            Error loading switch field: {error.message}
+          </Typography>
+        </Paper>
+      );
+    }
+    return null;
+  }
+
+  return <SwitchInputFieldView {...switchInputFieldProps} />;
+}
+
+// Mark as QwickApp component
+(SwitchInputField as any)[QWICKAPP_COMPONENT] = true;
+
+export default SwitchInputField;

package/src/components/input/index.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';