@shohojdhara/atomix 0.3.13 → 0.3.15

package/src/lib/composables/useAtomixGlass.ts

@@ -235,18 +235,12 @@ export function useAtomixGlass({
   const effectiveCornerRadius = useMemo(() => {
     if (cornerRadius !== undefined) {
       const result = Math.max(0, cornerRadius);
-      // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-      //   console.log('[AtomixGlass] Using manual cornerRadius prop:', result);
-      // }
       return result;
     }
 
     const result = Math.max(0, dynamicCornerRadius);
-    // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-    //   console.log('[AtomixGlass] Using dynamic cornerRadius:', result);
-    // }
     return result;
-  }, [cornerRadius, dynamicCornerRadius, debugCornerRadius]);
+  }, [cornerRadius, dynamicCornerRadius]);
 
   const effectiveReducedMotion = useMemo(
     () => reducedMotion || userPrefersReducedMotion,
@@ -278,7 +272,6 @@ export function useAtomixGlass({
     const extractRadius = () => {
       try {
         let extractedRadius: number | null = null;
-        let extractionSource = 'default';
 
         if (contentRef.current) {
           const firstChild = contentRef.current.firstElementChild as HTMLElement;
@@ -286,7 +279,6 @@ export function useAtomixGlass({
             const domRadius = extractBorderRadiusFromDOMElement(firstChild);
             if (domRadius !== null && domRadius > 0) {
               extractedRadius = domRadius;
-              extractionSource = 'DOM element';
             }
           }
         }
@@ -295,25 +287,11 @@ export function useAtomixGlass({
           const childRadius = extractBorderRadiusFromChildren(children);
           if (childRadius > 0 && childRadius !== CONSTANTS.DEFAULT_CORNER_RADIUS) {
             extractedRadius = childRadius;
-            extractionSource = 'React children';
           }
         }
 
         if (extractedRadius !== null && extractedRadius > 0) {
           setDynamicCornerRadius(extractedRadius);
-
-          // if (process.env.NODE_ENV !== 'production' && debugCornerRadius) {
-          //   console.log('[AtomixGlass] Corner radius extracted:', {
-          //     value: extractedRadius,
-          //     source: extractionSource,
-          //     timestamp: new Date().toISOString(),
-          //   });
-          // }
-        } else if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
-          //   console.log(
-          //     '[AtomixGlass] No corner radius found, using default:',
-          //     CONSTANTS.DEFAULT_CORNER_RADIUS
-          //   );
         }
       } catch (error) {
         if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && debugCornerRadius) {
@@ -451,19 +429,6 @@ export function useAtomixGlass({
               setCachedBackgroundDetection(element.parentElement, overLight, isOverLightDetected, threshold);
 
               setDetectedOverLight(isOverLightDetected);
-
-              // Debug logging
-              // if (process.env.NODE_ENV !== 'production' && debugOverLight) {
-              //   console.log('[AtomixGlass] OverLight Detection:', {
-              //     avgLuminance: avgLuminance.toFixed(3),
-              //     threshold: threshold.toFixed(3),
-              //     detected: isOverLightDetected,
-              //     validSamples,
-              //     totalLuminance: totalLuminance.toFixed(3),
-              //     configType: typeof overLight === 'object' ? 'object' : typeof overLight,
-              //     timestamp: new Date().toISOString(),
-              //   });
-              // }
             } else {
               // Invalid luminance calculation, default to false
               const result = false;
@@ -501,17 +466,7 @@ export function useAtomixGlass({
       return () => clearTimeout(timeoutId);
     } else if (typeof overLight === 'boolean') {
       // For boolean values, disable auto-detection
-      // Cache is automatically managed by WeakMap (no manual clearing needed)
       setDetectedOverLight(false);
-
-      // Debug logging for boolean mode
-      // if (process.env.NODE_ENV !== 'production' && debugOverLight) {
-      //   console.log('[AtomixGlass] OverLight Mode: boolean', {
-      //     value: overLight,
-      //     autoDetection: false,
-      //     timestamp: new Date().toISOString(),
-      //   });
-      // }
     }
 
     if (typeof window.matchMedia !== 'function') {
@@ -609,7 +564,7 @@ export function useAtomixGlass({
 
       if ((typeof process === 'undefined' || process.env?.NODE_ENV !== 'production') && enablePerformanceMonitoring) {
         const endTime = performance.now();
-        const duration = endTime - startTime;
+        // const duration = endTime - startTime;
         // if (duration > 5) {
         //   console.warn(`AtomixGlass: Mouse tracking took ${duration.toFixed(2)}ms`);
         // }
@@ -684,6 +639,16 @@ export function useAtomixGlass({
 
   // Transform calculations
   const calculateDirectionalScale = useCallback(() => {
+    // Disable directional scaling if overLight is active (to prevent zooming/distorting the premium glass effect)
+    const isOverLightActive =
+      overLight === true ||
+      (overLight === 'auto' && detectedOverLight) ||
+      (typeof overLight === 'object' && overLight !== null && detectedOverLight);
+
+    if (isOverLightActive) {
+      return 'scale(1)';
+    }
+
     if (
       !globalMousePosition.x ||
       !globalMousePosition.y ||
@@ -727,7 +692,14 @@ export function useAtomixGlass({
       Math.abs(normalizedX) * stretchIntensity * 0.15;
 
     return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
-  }, [globalMousePosition, elasticity, glassSize, glassRef]);
+  }, [
+    globalMousePosition,
+    elasticity,
+    glassSize,
+    glassRef,
+    overLight,
+    detectedOverLight,
+  ]);
 
   const calculateFadeInFactor = useCallback(() => {
     if (
@@ -937,11 +909,11 @@ export function useAtomixGlass({
       isOverLight,
       threshold: 0.7,
       opacity: baseOpacity,
-      contrast: Math.min(1.8, Math.max(1.0, 1.4 + mouseInfluence * 0.3)),
-      brightness: Math.min(1.2, Math.max(0.7, 0.85 + mouseInfluence * 0.15)),
-      saturationBoost: Math.min(2.0, Math.max(1.0, 1.3 + mouseInfluence * 0.4)),
-      shadowIntensity: Math.min(1.5, Math.max(0.5, 0.9 + mouseInfluence * 0.5)),
-      borderOpacity: Math.min(1.0, Math.max(0.3, 0.7 + mouseInfluence * 0.3)),
+      contrast: Math.min(1.6, Math.max(1.0, 1.4 + mouseInfluence * 0.1)),
+      brightness: Math.min(1.1, Math.max(0.8, 0.9 + mouseInfluence * 0.05)),
+      saturationBoost: 1.3, // Fixed value — dynamic saturation amplifies perceived displacement
+      shadowIntensity: Math.min(1.2, Math.max(0.5, 0.9 + mouseInfluence * 0.2)),
+      borderOpacity: Math.min(1.0, Math.max(0.3, 0.7 + mouseInfluence * 0.1)),
     };
 
     if (typeof overLight === 'object' && overLight !== null) {
@@ -958,9 +930,9 @@ export function useAtomixGlass({
         ...baseConfig,
         threshold: validatedThreshold,
         opacity: validatedOpacity * hoverIntensity * activeIntensity,
-        contrast: validatedContrast + mouseInfluence * 0.3,
-        brightness: validatedBrightness + mouseInfluence * 0.15,
-        saturationBoost: validatedSaturationBoost + mouseInfluence * 0.4,
+        contrast: Math.min(1.6, validatedContrast + mouseInfluence * 0.1),
+        brightness: Math.min(1.1, validatedBrightness + mouseInfluence * 0.05),
+        saturationBoost: validatedSaturationBoost, // Use validated value directly, no mouse influence
       };
 
       // Debug logging

package/src/lib/composables/useBreadcrumb.ts

@@ -5,7 +5,7 @@ interface BreadcrumbOptions {
   items: BreadcrumbItem[];
   divider?: React.ReactNode;
   className?: string;
-  ariaLabel?: string;
+  'aria-label'?: string;
 }
 
 /**
@@ -19,7 +19,7 @@ export function useBreadcrumb(initialOptions?: Partial<BreadcrumbOptions>) {
     items: [],
     divider: BREADCRUMB.DEFAULTS.DIVIDER,
     className: '',
-    ariaLabel: 'Breadcrumb',
+    'aria-label': 'Breadcrumb',
     ...initialOptions,
   };
 

package/src/lib/composables/useCallout.ts

@@ -9,8 +9,8 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
   // Default callout properties
   const defaultProps: Partial<CalloutProps> = {
     variant: 'primary',
-    oneLine: false,
-    toast: false,
+    compact: false,
+    isToast: false,
     glass: false,
     ...initialProps,
   };
@@ -23,18 +23,18 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
   const generateCalloutClass = (props: Partial<CalloutProps>): string => {
     const {
       variant = defaultProps.variant,
-      oneLine = defaultProps.oneLine,
-      toast = defaultProps.toast,
+      compact = defaultProps.compact,
+      isToast = defaultProps.isToast,
       glass = defaultProps.glass,
       className = '',
     } = props;
 
-    const oneLineClass = oneLine ? 'c-callout--oneline' : '';
-    const toastClass = toast ? 'c-callout--toast' : '';
+    const compactClass = compact ? 'c-callout--compact' : '';
+    const toastClass = isToast ? 'c-callout--toast' : '';
     const variantClass = variant ? `c-callout--${variant}` : '';
     const glassClass = glass ? 'c-callout--glass' : '';
 
-    return `c-callout ${variantClass} ${oneLineClass} ${toastClass} ${glassClass} ${className}`.trim();
+    return `c-callout ${variantClass} ${compactClass} ${toastClass} ${glassClass} ${className}`.trim();
   };
 
   /**

package/src/lib/composables/useChartExport.ts

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from 'react';
+import { sanitizeCSVCell } from '../utils/csv';
 
 export interface ExportOptions {
   /**
@@ -180,13 +181,7 @@ export function useChartExport() {
 
     // Convert to CSV string with sanitization
     const csvContent = rows
-      .map(row => row.map(cell => {
-        // Sanitize cell content to prevent CSV injection
-        const sanitized = String(cell).replace(/[\r\n\t]/g, ' ').replace(/"/g, '""');
-        // Prevent formula injection by prefixing dangerous characters
-        const dangerous = /^[=+\-@]/;
-        return `"${dangerous.test(sanitized) ? `'${sanitized}` : sanitized}"`;
-      }).join(','))
+      .map(row => row.map(cell => `"${sanitizeCSVCell(cell)}"`).join(','))
       .join('\n');
 
     // Download

package/src/lib/composables/useDataTable.ts

@@ -328,47 +328,64 @@ export function useDataTable({
     setCurrentPage(1);
   }, []);
 
+  // Pre-process column filters to avoid redundant lookups and transformations
+  const activeColumnFilters = useMemo(() => {
+    if (!columnFilters) return [];
+
+    return Object.entries(columnFilterValues)
+      .filter(([, value]) => value !== undefined && value !== null && value !== '')
+      .map(([columnKey, value]) => {
+        const column = columns.find(col => col.key === columnKey);
+        if (!column || !column.filterable) return null;
+
+        return {
+          key: columnKey,
+          value,
+          lowercaseValue: typeof value === 'string' ? value.toLowerCase() : String(value).toLowerCase(),
+          column,
+        };
+      })
+      .filter((f): f is NonNullable<typeof f> => f !== null);
+  }, [columnFilters, columnFilterValues, columns]);
+
   // Filter data based on search query and column filters
   const filteredData = useMemo(() => {
-    let result = data;
+    if (!searchQuery && activeColumnFilters.length === 0) {
+      return data;
+    }
 
-    // Apply global search
-    if (searchQuery) {
-      const lowercaseQuery = searchQuery.toLowerCase();
-      result = result.filter(row => {
-        return visibleColumns.some(column => {
+    const lowercaseQuery = searchQuery ? searchQuery.toLowerCase() : '';
+
+    return data.filter(row => {
+      // Apply global search
+      if (searchQuery) {
+        const matchesGlobal = visibleColumns.some(column => {
           const value = row[column.key];
           if (value == null) return false;
           return String(value).toLowerCase().includes(lowercaseQuery);
         });
-      });
-    }
-
-    // Apply column-specific filters
-    if (columnFilters) {
-      result = result.filter(row => {
-        return Object.entries(columnFilterValues).every(([columnKey, filterValue]) => {
-          if (!filterValue) return true;
-
-          const column = columns.find(col => col.key === columnKey);
-          if (!column || !column.filterable) return true;
+        if (!matchesGlobal) return false;
+      }
 
-          const cellValue = row[columnKey];
-          if (cellValue == null) return false;
+      // Apply column-specific filters
+      for (let i = 0; i < activeColumnFilters.length; i++) {
+        const { key, value, lowercaseValue, column } = activeColumnFilters[i];
+        const cellValue = row[key];
 
-          // Use custom filter function if provided
-          if (column.filterFunction) {
-            return column.filterFunction(cellValue, filterValue);
-          }
+        if (cellValue == null) return false;
 
+        // Use custom filter function if provided
+        if (column.filterFunction) {
+          if (!column.filterFunction(cellValue, value)) return false;
+        } else {
           // Default text filter
-          return String(cellValue).toLowerCase().includes(filterValue.toLowerCase());
-        });
-      });
-    }
+          if (!String(cellValue).toLowerCase().includes(lowercaseValue)) return false;
+        }
+      }
 
-    return result;
-  }, [data, visibleColumns, searchQuery, columnFilterValues, columnFilters, columns]);
+      return true;
+    });
+  }, [data, visibleColumns, searchQuery, activeColumnFilters]);
 
   // Sort data
   const sortedData = useMemo(() => {

package/src/lib/composables/useNavbar.ts

@@ -17,7 +17,7 @@ export function useNavbar(initialProps?: Partial<NavbarProps>) {
     backdrop: false,
     closeOnOutsideClick: true,
     closeOnEscape: true,
-    ariaLabel: 'Main navigation',
+    'aria-label': 'Main navigation',
     ...initialProps,
   };
 

package/src/lib/constants/components.ts

@@ -79,7 +79,7 @@ export const CALLOUT = {
   CLOSE_BTN_CLASS: 'c-callout__close-btn',
   VARIANT_PREFIX: 'c-callout--',
   CLASSES: {
-    ONELINE: 'c-callout--oneline',
+    COMPACT: 'c-callout--compact',
     TOAST: 'c-callout--toast',
     HIDE: 'is-hide',
   },
@@ -1522,37 +1522,6 @@ export const BLOCK = {
   },
 };
 
-/**
- * GlassContainer-specific constants
- */
-export const GLASS_CONTAINER = {
-  CLASSES: {
-    BASE: 'c-glass-container',
-    GLASS: 'c-glass-container__glass',
-    WARP: 'c-glass-container__warp',
-    CONTENT: 'c-glass-container__content',
-    OVERLAY: 'c-glass-container__overlay',
-    OVERLAY_VISIBLE: 'c-glass-container__overlay--visible',
-    OVERLAY_HIDDEN: 'c-glass-container__overlay--hidden',
-    OVERLAY_BLEND: 'c-glass-container__overlay-blend',
-    BORDER: 'c-glass-container__border',
-    BORDER_OVERLAY: 'c-glass-container__border-overlay',
-    HOVER_EFFECT: 'c-glass-container__hover-effect',
-    ACTIVE_EFFECT: 'c-glass-container__active-effect',
-    INTERACTION_EFFECT: 'c-glass-container__interaction-effect',
-    ACTIVE: 'c-glass-container--active',
-    CLICKABLE: 'c-glass-container--clickable',
-  },
-  DISPLACEMENT_MAPS: {
-    STANDARD:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZGllbnQpIi8+PC9zdmc+',
-    POLAR:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icG9sYXIiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODA4MDgwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwb2xhcikiLz48L3N2Zz4=',
-    PROMINENT:
-      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjcwIiBoZWlnaHQ9IjY5IiB2aWV3Qm94PSIwIDAgMjcwIDY5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0icHJvbWluZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjMGMwYzAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDQwNDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3Byb21pbmVudCkiLz48L3N2Zz4=',
-  },
-};
-
 /**
  * Footer-specific constants
  */
@@ -1698,9 +1667,17 @@ export const ATOMIX_GLASS = {
     MIN_BLUR: 0.1,
     MOUSE_INFLUENCE_DIVISOR: 100,
     EDGE_FADE_PIXELS: 2,
-    DEFAULT_CORNER_RADIUS: 16, // Fallback value matching design system
+    // Note: This default must match the SCSS variable --atomix-radius-md
+    // @see src/styles/01-settings/_settings.global.scss
+    DEFAULT_CORNER_RADIUS: 16,
     MAX_SIZE: 4096, // Maximum width/height for glass size
 
+    // Palette for internal calculations (matches design system base colors)
+    PALETTE: {
+      WHITE: '255, 255, 255',
+      BLACK: '0, 0, 0',
+    },
+
     // Gradient calculation constants
     GRADIENT: {
       BASE_ANGLE: 135, // Base angle for border gradients (degrees)

package/src/lib/storybook/InteractiveDemo.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+interface ControlOption {
+  type: 'select' | 'slider' | 'text' | 'checkbox';
+  label: string;
+  value: any;
+  onChange: (value: any) => void;
+  options?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+interface InteractiveDemoProps {
+  controls: ControlOption[];
+  children: React.ReactNode;
+}
+
+export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
+  controls,
+  children,
+}) => {
+  const renderControl = (control: ControlOption, index: number) => {
+    const baseId = `control-${index}`;
+    
+    switch (control.type) {
+      case 'select':
+        return (
+          <div key={baseId} className="mb-4">
+            <label htmlFor={baseId} className="block text-sm font-medium mb-2">
+              {control.label}
+            </label>
+            <select
+              id={baseId}
+              value={control.value}
+              onChange={(e) => control.onChange(e.target.value)}
+              className="w-full px-3 py-2 border rounded-lg"
+            >
+              {control.options?.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        );
+        
+      case 'slider':
+        return (
+          <div key={baseId} className="mb-4">
+            <label htmlFor={baseId} className="block text-sm font-medium mb-2">
+              {control.label}: {control.value}
+            </label>
+            <input
+              id={baseId}
+              type="range"
+              min={control.min}
+              max={control.max}
+              step={control.step}
+              value={control.value}
+              onChange={(e) => control.onChange(Number(e.target.value))}
+              className="w-full"
+            />
+          </div>
+        );
+        
+      case 'text':
+        return (
+          <div key={baseId} className="mb-4">
+            <label htmlFor={baseId} className="block text-sm font-medium mb-2">
+              {control.label}
+            </label>
+            <input
+              id={baseId}
+              type="text"
+              value={control.value}
+              onChange={(e) => control.onChange(e.target.value)}
+              className="w-full px-3 py-2 border rounded-lg"
+            />
+          </div>
+        );
+        
+      case 'checkbox':
+        return (
+          <div key={baseId} className="mb-4">
+            <label className="flex items-center space-x-2">
+              <input
+                type="checkbox"
+                checked={control.value}
+                onChange={(e) => control.onChange(e.target.checked)}
+                className="rounded"
+              />
+              <span className="text-sm font-medium">{control.label}</span>
+            </label>
+          </div>
+        );
+        
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+        {controls.map(renderControl)}
+      </div>
+      <div className="border-t pt-6">
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/storybook/PreviewContainer.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface PreviewContainerProps {
+  title: string;
+  description: string;
+  backgroundImage?: string;
+  children: React.ReactNode;
+}
+
+export const PreviewContainer: React.FC<PreviewContainerProps> = ({
+  title,
+  description,
+  backgroundImage,
+  children,
+}) => {
+  const containerStyle = backgroundImage
+    ? {
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        minHeight: '100vh',
+      }
+    : {};
+
+  return (
+    <div style={containerStyle} className="w-full">
+      <div className="max-w-7xl mx-auto p-6">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">{title}</h1>
+          <p className="text-gray-600">{description}</p>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/storybook/VariantsGrid.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface VariantsGridProps {
+  children: React.ReactNode;
+  columns?: number;
+  gap?: string;
+}
+
+export const VariantsGrid: React.FC<VariantsGridProps> = ({
+  children,
+  columns = 4,
+  gap = 'gap-4',
+}) => {
+  const gridClass = `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns} ${gap}`;
+  
+  return (
+    <div className={gridClass}>
+      {children}
+    </div>
+  );
+};

package/src/lib/storybook/index.ts

@@ -0,0 +1,3 @@
+export { PreviewContainer } from './PreviewContainer';
+export { VariantsGrid } from './VariantsGrid';
+export { InteractiveDemo } from './InteractiveDemo';

package/src/lib/theme/core/createThemeObject.ts

@@ -296,8 +296,12 @@ function createBreakpoints(breakpointsInput?: BreakpointsOptions): Theme['breakp
  * @returns Complete theme object
  */
 export function createThemeObject(...options: ThemeOptions[]): Theme {
-    // Merge all options
-    const mergedOptions = options.reduce((acc, option) => deepMerge(acc, option), {} as ThemeOptions);
+    // Merge all options by spreading them into a single object
+    const mergedOptions = options.reduce((acc, option) => {
+        // Cast option to any to avoid strict typing during merge
+        const opt = option as any;
+        return deepMerge(acc, opt || {}) as any;
+    }, {} as any);
 
     // Create palette
     const palette: Theme['palette'] = {
@@ -342,9 +346,9 @@ export function createThemeObject(...options: ThemeOptions[]): Theme {
 
     // Create transitions
     const transitions: Theme['transitions'] = deepMerge(
-        { ...DEFAULT_TRANSITIONS },
-        mergedOptions.transitions || {}
-    );
+        { ...DEFAULT_TRANSITIONS } as Partial<Theme['transitions']>,
+        (mergedOptions.transitions || {}) as Partial<Theme['transitions']>
+    ) as Theme['transitions'];
 
     // Create z-index
     const zIndex: Theme['zIndex'] = deepMerge({ ...DEFAULT_ZINDEX }, mergedOptions.zIndex || {});