@delightui/components 0.1.108 → 0.1.109

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, FormHTMLAttributes, Ref, InputHTMLAttributes, TextareaHTMLAttributes, ComponentType, LiHTMLAttributes, CSSProperties, RefObject, TableHTMLAttributes, TdHTMLAttributes, AriaRole, KeyboardEventHandler } from 'react';
+import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, FormHTMLAttributes, Ref, InputHTMLAttributes, TextareaHTMLAttributes, ComponentType, LiHTMLAttributes, CSSProperties, RefObject, TableHTMLAttributes, TdHTMLAttributes, ReactElement, AriaRole, KeyboardEventHandler } from 'react';
 import { LinkProps } from 'react-router-dom';
 import { Plugin } from 'flatpickr/dist/types/options';
 import FlatPickr from 'react-flatpickr';
@@ -2328,6 +2328,59 @@ type RenderStateViewProps<T = unknown, P = any> = {
 
 declare const RenderStateView: <T = unknown, P = any>(props: RenderStateViewProps<T, P>) => react_jsx_runtime.JSX.Element;
 
+/**
+ * A hook that takes a component type and props and returns a memoized React element.
+ * This is useful for creating reusable component instances with memoization to prevent
+ * unnecessary re-renders when props haven't changed.
+ *
+ * @template T - The props type for the component
+ * @param Component - React component to render
+ * @param props - Props to pass to the component
+ * @returns Memoized React element
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = ({ title, count }) => (
+ *   <div>
+ *     <h1>{title}</h1>
+ *     <p>Count: {count}</p>
+ *   </div>
+ * );
+ *
+ * function ParentComponent() {
+ *   const [count, setCount] = useState(0);
+ *
+ *   // This view will only re-render when title or count changes
+ *   const inflatedView = useInflateView(MyComponent, {
+ *     title: 'My Title',
+ *     count: count
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {inflatedView}
+ *       <button onClick={() => setCount(c => c + 1)}>
+ *         Increment
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useInflateView: <T extends Record<string, unknown>>(Component: ComponentType<T>, props: T) => ReactElement;
+
+/**
+ * Return type for the useInflateView hook.
+ */
+type UseInflateViewReturn = ReactElement;
+/**
+ * Parameters for the useInflateView hook.
+ */
+type UseInflateViewParams<T extends Record<string, unknown>> = {
+    Component: ComponentType<T>;
+    props: T;
+};
+
 type ArrowDirectionEnum = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight';
 type AccessibilityActions = {
     onClick?: (event?: SyntheticEvent) => void;
@@ -2425,4 +2478,4 @@ declare const NotificationContext: React__default.Context<NotificationContextVal
 declare const NotificationProvider: React__default.FC<NotificationProviderProps>;
 declare const useNotification: () => NotificationContextValue;
 
-export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, _default as ChipInput, type ChipInputProps, type ChipListItemProps, type ChipListItemTypeEnum, type ChipProps, ConditionalView, type ConditionalViewProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, type ModalComponentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalProvider, type ModalProviderProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type NotificationContainerProps, NotificationContext, NotificationProvider, Option, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RadioGroup, type RadioGroupProps, RenderStateView, type RenderStateViewProps, RepeaterList, type RepeaterListProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, type UseModalReturn, WrapTextNodes, type WrapTextNodesProps, applyPropsToChildren, getClickAccessibilityProps, mergeRefs, useDropzoneContext, useModal, useNotification, useSelectContext, useTab };
+export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, _default as ChipInput, type ChipInputProps, type ChipListItemProps, type ChipListItemTypeEnum, type ChipProps, ConditionalView, type ConditionalViewProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, type ModalComponentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalProvider, type ModalProviderProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type NotificationContainerProps, NotificationContext, NotificationProvider, Option, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RadioGroup, type RadioGroupProps, RenderStateView, type RenderStateViewProps, RepeaterList, type RepeaterListProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, type UseInflateViewParams, type UseInflateViewReturn, type UseModalReturn, WrapTextNodes, type WrapTextNodesProps, applyPropsToChildren, getClickAccessibilityProps, mergeRefs, useDropzoneContext, useInflateView, useModal, useNotification, useSelectContext, useTab };

package/docs/README.md

@@ -251,6 +251,9 @@ React hooks for enhanced functionality:
 - **[useModal](./docs/components/molecules/useModal.md)** - A React hook that provides programmatic modal management with automatic ID generation and simplified modal state handling. Takes a modal component as a parameter and returns functions to open and close that specific modal, along with automatic unique identifier generation for each modal instance.
   - *Aliases: useModal, Modal Hook, Modal Manager*
 
+- **[useInflateView](./docs/components/utils/useInflateView.md)** - A React hook that takes a component type and props and returns a memoized React element. This hook is useful for creating reusable component instances with built-in memoization to prevent unnecessary re-renders when props haven't changed.
+  - *Aliases: useInflateView, Component Inflater, Memoized View Hook, Dynamic Component Hook*
+
 ### Utilities
 Helper components and utilities:
 

package/docs/components/utils/useInflateView.md

@@ -0,0 +1,442 @@
+# useInflateView
+
+## Description
+
+A React hook that takes a component type and props and returns a memoized React element. This hook is useful for creating reusable component instances with built-in memoization to prevent unnecessary re-renders when props haven't changed. It's particularly effective in scenarios where you need to create component instances dynamically or repeatedly.
+
+## Aliases
+
+- useInflateView
+- Component Inflater
+- Memoized View Hook
+- Dynamic Component Hook
+
+## Hook Signature
+
+```tsx
+function useInflateView<T extends Record<string, unknown>>(
+  Component: ComponentType<T>,
+  props: T
+): ReactElement
+```
+
+## Parameters
+
+| Parameter | Type | Required | Description |
+|-----------|------|----------|-------------|
+| `Component` | `ComponentType<T>` | Yes | React component to render |
+| `props` | `T` | Yes | Props to pass to the component |
+
+## Return Value
+
+Returns a memoized `ReactElement` that will only re-render when the component or props change.
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { useInflateView, Button, Text } from '@delightui/components';
+
+const UserCard = ({ name, email, age }) => (
+  <div style={{ padding: '16px', border: '1px solid #ccc', borderRadius: '8px' }}>
+    <Text type="Heading4">{name}</Text>
+    <Text type="BodyMedium">{email}</Text>
+    <Text type="BodySmall">Age: {age}</Text>
+  </div>
+);
+
+function BasicExample() {
+  const [userData, setUserData] = useState({
+    name: 'John Doe',
+    email: 'john@example.com',
+    age: 30
+  });
+
+  // This view will only re-render when userData changes
+  const userCardView = useInflateView(UserCard, userData);
+
+  return (
+    <div>
+      {userCardView}
+      
+      <Button onClick={() => setUserData(prev => ({
+        ...prev,
+        age: prev.age + 1
+      }))}>
+        Increment Age
+      </Button>
+    </div>
+  );
+}
+```
+
+### Dynamic Component Selection
+
+```tsx
+import React, { useState } from 'react';
+import { useInflateView, Button, Text } from '@delightui/components';
+
+const SuccessMessage = ({ message }) => (
+  <div style={{ color: 'green', padding: '8px' }}>
+    ✅ {message}
+  </div>
+);
+
+const ErrorMessage = ({ message }) => (
+  <div style={{ color: 'red', padding: '8px' }}>
+    ❌ {message}
+  </div>
+);
+
+const InfoMessage = ({ message }) => (
+  <div style={{ color: 'blue', padding: '8px' }}>
+    ℹ️ {message}
+  </div>
+);
+
+function DynamicExample() {
+  const [messageType, setMessageType] = useState('info');
+  const [message] = useState('This is a dynamic message');
+
+  const getComponent = () => {
+    switch (messageType) {
+      case 'success': return SuccessMessage;
+      case 'error': return ErrorMessage;
+      default: return InfoMessage;
+    }
+  };
+
+  // Dynamically inflate different components based on type
+  const messageView = useInflateView(getComponent(), { message });
+
+  return (
+    <div>
+      {messageView}
+      
+      <div style={{ marginTop: '16px', display: 'flex', gap: '8px' }}>
+        <Button onClick={() => setMessageType('success')}>
+          Success
+        </Button>
+        <Button onClick={() => setMessageType('error')}>
+          Error
+        </Button>
+        <Button onClick={() => setMessageType('info')}>
+          Info
+        </Button>
+      </div>
+    </div>
+  );
+}
+```
+
+### List Rendering with Memoization
+
+```tsx
+import React, { useState } from 'react';
+import { useInflateView, Button, Text, Card } from '@delightui/components';
+
+const ProductCard = ({ id, name, price, inStock }) => (
+  <Card style={{ padding: '16px', margin: '8px 0' }}>
+    <Text type="Heading5">{name}</Text>
+    <Text type="BodyMedium">${price}</Text>
+    <Text type="BodySmall" style={{ 
+      color: inStock ? 'green' : 'red' 
+    }}>
+      {inStock ? 'In Stock' : 'Out of Stock'}
+    </Text>
+  </Card>
+);
+
+function ListExample() {
+  const [products] = useState([
+    { id: 1, name: 'Laptop', price: 999, inStock: true },
+    { id: 2, name: 'Mouse', price: 29, inStock: false },
+    { id: 3, name: 'Keyboard', price: 79, inStock: true }
+  ]);
+
+  return (
+    <div>
+      <Text type="Heading3">Product List</Text>
+      {products.map(product => {
+        // Each product card is memoized individually
+        const ProductView = () => useInflateView(ProductCard, product);
+        return <ProductView key={product.id} />;
+      })}
+    </div>
+  );
+}
+```
+
+### Configuration-Based Component
+
+```tsx
+import React, { useState } from 'react';
+import { useInflateView, Button, Text, Input, Toggle } from '@delightui/components';
+
+const ConfigurableForm = ({ fields, onSubmit }) => (
+  <form onSubmit={onSubmit}>
+    {fields.map(field => (
+      <div key={field.name} style={{ marginBottom: '16px' }}>
+        <Text type="BodyMedium">{field.label}</Text>
+        {field.type === 'text' && (
+          <Input 
+            name={field.name}
+            placeholder={field.placeholder}
+            required={field.required}
+          />
+        )}
+        {field.type === 'toggle' && (
+          <Toggle name={field.name}>
+            {field.label}
+          </Toggle>
+        )}
+      </div>
+    ))}
+    <Button actionType="submit">Submit</Button>
+  </form>
+);
+
+function ConfigurationExample() {
+  const [formConfig] = useState({
+    fields: [
+      {
+        name: 'username',
+        type: 'text',
+        label: 'Username',
+        placeholder: 'Enter username',
+        required: true
+      },
+      {
+        name: 'email',
+        type: 'text',
+        label: 'Email',
+        placeholder: 'Enter email',
+        required: true
+      },
+      {
+        name: 'notifications',
+        type: 'toggle',
+        label: 'Enable Notifications'
+      }
+    ]
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Form submitted');
+  };
+
+  // Form structure is memoized based on configuration
+  const formView = useInflateView(ConfigurableForm, {
+    ...formConfig,
+    onSubmit: handleSubmit
+  });
+
+  return (
+    <div>
+      <Text type="Heading3">Dynamic Form</Text>
+      {formView}
+    </div>
+  );
+}
+```
+
+### Performance Optimization Example
+
+```tsx
+import React, { useState, useCallback } from 'react';
+import { useInflateView, Button, Text } from '@delightui/components';
+
+const ExpensiveComponent = ({ data, onProcess }) => {
+  // Simulate expensive computation
+  const processedData = React.useMemo(() => {
+    console.log('Processing data...'); // This should only log when data changes
+    return data.map(item => item * 2);
+  }, [data]);
+
+  return (
+    <div>
+      <Text type="Heading4">Processed Results</Text>
+      <Text type="BodyMedium">
+        Results: {processedData.join(', ')}
+      </Text>
+      <Button onClick={onProcess}>
+        Process Again
+      </Button>
+    </div>
+  );
+};
+
+function PerformanceExample() {
+  const [data] = useState([1, 2, 3, 4, 5]);
+  const [counter, setCounter] = useState(0);
+
+  const handleProcess = useCallback(() => {
+    console.log('Process clicked');
+  }, []);
+
+  // Component is memoized - won't re-render when counter changes
+  const expensiveView = useInflateView(ExpensiveComponent, {
+    data,
+    onProcess: handleProcess
+  });
+
+  return (
+    <div>
+      <Text type="Heading3">Performance Test</Text>
+      <Text type="BodyMedium">Counter: {counter}</Text>
+      
+      <Button onClick={() => setCounter(c => c + 1)}>
+        Increment Counter (won't affect expensive component)
+      </Button>
+      
+      {expensiveView}
+    </div>
+  );
+}
+```
+
+### Conditional Component Rendering
+
+```tsx
+import React, { useState } from 'react';
+import { useInflateView, Button, Text, Spinner } from '@delightui/components';
+
+const LoadingView = ({ message }) => (
+  <div style={{ textAlign: 'center', padding: '40px' }}>
+    <Spinner />
+    <Text type="BodyMedium" style={{ marginTop: '16px' }}>
+      {message}
+    </Text>
+  </div>
+);
+
+const ContentView = ({ title, content }) => (
+  <div>
+    <Text type="Heading3">{title}</Text>
+    <Text type="BodyMedium">{content}</Text>
+  </div>
+);
+
+const ErrorView = ({ error, onRetry }) => (
+  <div style={{ textAlign: 'center', padding: '40px' }}>
+    <Text type="Heading4" style={{ color: 'red' }}>
+      Error Occurred
+    </Text>
+    <Text type="BodyMedium">{error}</Text>
+    <Button onClick={onRetry} style={{ marginTop: '16px' }}>
+      Retry
+    </Button>
+  </div>
+);
+
+function ConditionalExample() {
+  const [state, setState] = useState('loading'); // loading, success, error
+  const [data, setData] = useState(null);
+
+  const loadData = () => {
+    setState('loading');
+    setTimeout(() => {
+      if (Math.random() > 0.3) {
+        setData({
+          title: 'Success!',
+          content: 'Data loaded successfully.'
+        });
+        setState('success');
+      } else {
+        setState('error');
+      }
+    }, 2000);
+  };
+
+  const getView = () => {
+    switch (state) {
+      case 'loading':
+        return useInflateView(LoadingView, {
+          message: 'Loading data...'
+        });
+      case 'success':
+        return useInflateView(ContentView, data);
+      case 'error':
+        return useInflateView(ErrorView, {
+          error: 'Failed to load data',
+          onRetry: loadData
+        });
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div>
+      <Button onClick={loadData}>
+        Load Data
+      </Button>
+      <div style={{ marginTop: '20px' }}>
+        {getView()}
+      </div>
+    </div>
+  );
+}
+```
+
+## Performance Benefits
+
+1. **Memoization**: Component instances are memoized based on props, preventing unnecessary re-renders
+2. **Efficient Dependency Tracking**: Only re-renders when component or props actually change
+3. **Memory Optimization**: Reuses component instances when props are unchanged
+4. **Computation Reduction**: Reduces the overhead of recreating React elements
+
+## Best Practices
+
+1. **Stable References**: Use stable component references to maximize memoization benefits
+2. **Prop Optimization**: Keep props objects shallow when possible for better comparison
+3. **Callback Memoization**: Use `useCallback` for function props to maintain memoization
+4. **Avoid Inline Objects**: Don't create new objects in props unless necessary
+
+## Common Patterns
+
+### Configuration-Driven UI
+```tsx
+const configBasedView = useInflateView(DynamicForm, formConfiguration);
+```
+
+### Conditional Rendering
+```tsx
+const conditionalView = useInflateView(
+  isLoading ? LoadingSpinner : ContentComponent, 
+  componentProps
+);
+```
+
+## TypeScript Support
+
+The hook is fully typed and provides excellent TypeScript support:
+
+```tsx
+interface MyComponentProps {
+  title: string;
+  count: number;
+  onAction: (value: string) => void;
+}
+
+const MyComponent: React.FC<MyComponentProps> = ({ title, count, onAction }) => {
+  // Component implementation
+};
+
+// TypeScript will enforce correct prop types
+const view = useInflateView(MyComponent, {
+  title: "Required string",     // ✅ Required
+  count: 42,                   // ✅ Required number
+  onAction: (val) => {...}     // ✅ Required function
+  // Missing any required prop will cause TypeScript error
+});
+```
+
+## Related Hooks
+
+- **[React.useMemo](https://reactjs.org/docs/hooks-reference.html#usememo)** - Base memoization hook
+- **[React.useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback)** - Memoization for functions
+- **[useModal](../molecules/useModal.md)** - For programmatic modal management

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delightui/components",
-  "version": "0.1.108",
+  "version": "0.1.109",
   "private": false,
   "scripts": {
     "start": "vite",