@shohojdhara/atomix 0.1.14 → 0.1.16

package/src/components/Popover/Popover.tsx

@@ -1,11 +1,11 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, forwardRef, createContext } from 'react';
 import { createPortal } from 'react-dom';
 import { POPOVER } from '../../lib/constants/components';
 import { usePopover } from '../../lib/composables/usePopover';
 import type { PopoverProps, PopoverTriggerProps } from '../../lib/types/components';
 
 // Context to share popover state between components
-const PopoverContext = React.createContext<{
+export const PopoverContext = createContext<{
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   triggerRef: React.RefObject<HTMLElement>;
@@ -22,7 +22,7 @@ const PopoverContext = React.createContext<{
 /**
  * Popover component for displaying floating content
  */
- const Popover: React.FC<PopoverProps> = ({
+export const Popover: React.FC<PopoverProps> = ({
   content,
   position = 'top',
   trigger = 'click',
@@ -89,10 +89,10 @@ const PopoverContext = React.createContext<{
 /**
  * PopoverTrigger component to wrap the element that triggers the popover
  */
-export const PopoverTrigger: React.FC<PopoverTriggerProps> = ({
+export const PopoverTrigger: React.FC<PopoverTriggerProps> = forwardRef<HTMLElement, PopoverTriggerProps>(({
   children,
   trigger: triggerProp,
-}) => {
+}, ref) => {
   const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } = React.useContext(PopoverContext);
   
   // Determine which trigger type to use - prop from PopoverTrigger or from context
@@ -115,7 +115,7 @@ export const PopoverTrigger: React.FC<PopoverTriggerProps> = ({
   const child = React.Children.only(children) as React.ReactElement;
   
   const triggerProps: any = {
-    ref: triggerRef,
+    ref: ref || triggerRef,
     'aria-describedby': popoverId,
     'aria-expanded': isOpen,
   };
@@ -128,15 +128,10 @@ export const PopoverTrigger: React.FC<PopoverTriggerProps> = ({
   }
   
   return React.cloneElement(child, triggerProps);
-}; 
+}); 
 
 export type { PopoverProps, PopoverTriggerProps };
 
-// Set display name for debugging
 Popover.displayName = 'Popover';
 
-// Default export (primary)
-export default Popover;
-
-// Named export for compatibility
-export { Popover };
+export default Popover;

package/src/components/Popover/scripts/index.ts

@@ -309,7 +309,12 @@ const initPopovers = (): void => {
     const delay = parseInt(popover.getAttribute('data-popover-delay') || String(POPOVER.DEFAULTS.DELAY), 10);
     
     // Initialize popover
-    new Popover(popover, { position, trigger, offset, delay });
+    new Popover(popover, { 
+      position: position as PopoverPosition | 'auto',
+      trigger: trigger as 'hover' | 'click',
+      offset, 
+      delay 
+    });
   });
 };
 

package/src/components/ProductReview/ProductReview.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Rating } from '../Rating';
-import { Button } from '../Button';
+import { Rating } from '../Rating/Rating';
+import { Button } from '../Button/Button';
 import type { ThemeColor } from '../../lib/types/components';
 
-interface ProductReviewProps {
+export interface ProductReviewProps {
   /**
    * Product name
    */
@@ -48,7 +48,7 @@ interface ProductReviewProps {
 /**
  * ProductReview component for collecting user ratings and feedback
  */
-const ProductReview: React.FC<ProductReviewProps> = ({
+export const ProductReview: React.FC<ProductReviewProps> = ({
   productName,
   productImage,
   initialRating = 0,
@@ -66,24 +66,7 @@ const ProductReview: React.FC<ProductReviewProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !reviewRef.current) return;
-
-    // Dynamically import the product review script to avoid server-side rendering issues
-    import('./scripts/bundle').then(({ default: ProductReviewClass }) => {
-      if (reviewRef.current) {
-        reviewInstance.current = new ProductReviewClass(reviewRef.current, {
-          productName,
-          productImage,
-          initialRating,
-          maxRating,
-          allowHalf,
-          ratingColor,
-          onSubmit
-        });
-      }
-    }).catch(err => {
-      console.warn('Failed to load ProductReview script:', err);
-    });
+    if (typeof window === 'undefined' || !reviewRef.current) return undefined;
     
     // Cleanup on unmount
     return () => {
@@ -185,13 +168,6 @@ const ProductReview: React.FC<ProductReviewProps> = ({
   );
 };
 
-export type { ProductReviewProps  };
-
-// Set display name for debugging
 ProductReview.displayName = 'ProductReview';
 
-// Default export (primary)
-export default ProductReview;
-
-// Named export for compatibility
-export { ProductReview };
+export default ProductReview;

package/src/components/ProductReview/index.ts

@@ -1,2 +1,3 @@
-export { default, ProductReview } from './ProductReview';
+export { ProductReview } from './ProductReview';
+export { default } from './ProductReview';
 export type { ProductReviewProps } from './ProductReview';

package/src/components/Progress/Progress.tsx

@@ -3,7 +3,7 @@ import { ProgressProps } from '../../lib/types/components';
 import { useProgress } from '../../lib/composables/useProgress';
 import { PROGRESS } from '../../lib/constants/components';
 
-const Progress = forwardRef<HTMLDivElement, ProgressProps>((
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>((
   {
     value,
     variant = 'primary',
@@ -40,11 +40,4 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>((
 
 export type { ProgressProps  };
 
-// Set display name for debugging
-Progress.displayName = 'Progress';
-
-// Default export (primary)
 export default Progress;
-
-// Named export for compatibility
-export { Progress };

package/src/components/Rating/Rating.tsx

@@ -19,7 +19,7 @@ import useForkRef from '../../lib/utils/useForkRef';
  * // With half-star support
  * <Rating value={3.5} allowHalf maxValue={5} />
  */
-const Rating = forwardRef<HTMLDivElement, RatingProps>(({
+export const Rating = forwardRef<HTMLDivElement, RatingProps>(({
   value: valueProp = 0,
   defaultValue,
   maxValue = 5,
@@ -113,22 +113,7 @@ const Rating = forwardRef<HTMLDivElement, RatingProps>(({
   
   // Use vanilla JS implementation if specified
   useEffect(() => {
-    if (!useVanillaJS || typeof window === 'undefined' || !internalRef.current) return;
-
-    // Dynamically import the rating script to avoid server-side rendering issues
-    import('./scripts/bundle').then(({ default: RatingClass }) => {
-      if (internalRef.current) {
-        ratingInstance.current = new RatingClass(internalRef.current, {
-          value: valueProp !== undefined ? valueProp : defaultValue,
-          maxValue,
-          allowHalf,
-          readOnly,
-          size,
-          color,
-          onChange
-        });
-      }
-    });
+    if (!useVanillaJS || typeof window === 'undefined' || !internalRef.current) return undefined;
     
     // Cleanup on unmount
     return () => {
@@ -140,7 +125,7 @@ const Rating = forwardRef<HTMLDivElement, RatingProps>(({
   
   // Update vanilla JS implementation when props change
   useEffect(() => {
-    if (!useVanillaJS || !ratingInstance.current) return;
+    if (!useVanillaJS || !ratingInstance.current) return undefined;
     
     ratingInstance.current.updateOptions({
       value: valueProp !== undefined ? valueProp : defaultValue,
@@ -279,11 +264,4 @@ Rating.displayName = 'Rating';
 
 export type { RatingProps  };
 
-// Set display name for debugging
-Rating.displayName = 'Rating';
-
-// Default export (primary)
 export default Rating;
-
-// Named export for compatibility
-export { Rating };

package/src/components/Rating/scripts/ratingInteractions.ts

@@ -1,5 +1,5 @@
 import Rating from './index';
-import type { RatingOptions } from './index';
+// RatingOptions is used in other functions in this file
 
 /**
  * Event handlers and utility functions for Rating component
@@ -45,13 +45,13 @@ export function handleKeyboardNavigation(event: KeyboardEvent, container: HTMLEl
     case ' ':
     case 'Enter':
       event.preventDefault();
-      if (currentIndex >= 0) {
+      if (currentIndex >= 0 && stars[currentIndex]) {
         stars[currentIndex].click();
       }
       break;
   }
   
-  if (nextIndex >= 0) {
+  if (nextIndex >= 0 && stars[nextIndex]) {
     stars[nextIndex].focus();
   }
 }

package/src/components/River/River.tsx

@@ -1,11 +1,11 @@
-import React, { useRef, useEffect, ReactNode } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { RIVER } from '../../lib/constants/components';
-import { useRiver, RiverProps, RiverContentColumn } from '../../lib/composables/useRiver';
+import { useRiver, RiverProps } from '../../lib/composables/useRiver';
 
 /**
  * River component for displaying content with image sections
  */
-const River: React.FC<RiverProps> = ({
+export const River: React.FC<RiverProps> = ({
   title,
   text,
   actions,
@@ -45,7 +45,7 @@ const River: React.FC<RiverProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !riverRef.current) return;
+    if (typeof window === 'undefined' || !riverRef.current) return undefined;
 
     // Dynamically import the river script to avoid server-side rendering issues
     import('./scripts').then(({ default: RiverClass }) => {
@@ -167,11 +167,6 @@ const River: React.FC<RiverProps> = ({
 
 export type { RiverProps  };
 
-// Set display name for debugging
 River.displayName = 'River';
 
-// Default export (primary)
 export default River;
-
-// Named export for compatibility
-export { River };

package/src/components/SectionIntro/SectionIntro.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, ReactNode } from 'react';
 import { SECTION_INTRO } from '../../lib/constants/components';
 
-interface SectionIntroProps {
+export interface SectionIntroProps {
   /**
    * The section title
    */
@@ -72,7 +72,7 @@ interface SectionIntroProps {
 /**
  * SectionIntro component for introducing content sections with titles, descriptions, and optional imagery
  */
-const SectionIntro: React.FC<SectionIntroProps> = ({
+export const SectionIntro: React.FC<SectionIntroProps> = ({
   title,
   label,
   text,
@@ -91,7 +91,7 @@ const SectionIntro: React.FC<SectionIntroProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !sectionIntroRef.current) return;
+    if (typeof window === 'undefined' || !sectionIntroRef.current) return undefined;
 
     // Dynamically import the section intro script to avoid server-side rendering issues
     import('./scripts').then(({ default: SectionIntroClass }) => {
@@ -198,13 +198,6 @@ const SectionIntro: React.FC<SectionIntroProps> = ({
   );
 };
 
-export type { SectionIntroProps  };
-
-// Set display name for debugging
 SectionIntro.displayName = 'SectionIntro';
 
-// Default export (primary)
 export default SectionIntro;
-
-// Named export for compatibility
-export { SectionIntro };

package/src/components/SectionIntro/index.ts

@@ -1,4 +1,3 @@
 export { SectionIntro } from './SectionIntro';
 export type { SectionIntroProps } from './SectionIntro';
-export { default as default } from './SectionIntro';
-export { initializeSectionIntros } from './scripts';
+export { default } from './SectionIntro';

package/src/components/Spinner/Spinner.tsx

@@ -3,7 +3,7 @@ import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
 
-const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: React.FC<SpinnerProps> = ({
   size = 'md',
   variant = 'primary',
   fullscreen = false,
@@ -24,12 +24,8 @@ const Spinner: React.FC<SpinnerProps> = ({
   );
 };
 
-export type { SpinnerProps  };
+export type { SpinnerProps };
 
-// Set display name for debugging
 Spinner.displayName = 'Spinner';
 
-// Default export (primary)
 export default Spinner;
-
-export { Spinner };

package/src/components/Steps/Steps.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState, ReactNode } from 'react';
 import { STEPS } from '../../lib/constants/components';
 
-interface StepItem {
+export interface StepItem {
   /**
    * The number for the step
    */
@@ -18,7 +18,7 @@ interface StepItem {
   content?: React.ReactNode;
 }
 
-interface StepsProps {
+export interface StepsProps {
   /**
    * Array of step items
    */
@@ -48,7 +48,7 @@ interface StepsProps {
 /**
  * Steps component for displaying a sequence of steps
  */
- const Steps: React.FC<StepsProps> = ({
+export const Steps: React.FC<StepsProps> = ({
   items,
   activeIndex = 0,
   vertical = false,
@@ -61,7 +61,7 @@ interface StepsProps {
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !stepsRef.current) return;
+    if (typeof window === 'undefined' || !stepsRef.current) return undefined;
 
     // Dynamically import the steps script to avoid server-side rendering issues
     import('./scripts').then(({ default: StepsClass }) => {
@@ -149,13 +149,6 @@ interface StepsProps {
   );
 };
 
-export type { StepsProps, StepItem };
-
-// Set display name for debugging
 Steps.displayName = 'Steps';
 
-// Default export (primary)
-export default Steps;
-
-// Named export for compatibility
-export { Steps };
+export default Steps;

package/src/components/Steps/index.ts

@@ -1,4 +1,3 @@
 export { Steps } from './Steps';
 export type { StepsProps, StepItem } from './Steps';
-export { default as default } from './Steps';
-export { initializeSteps } from './scripts'; 
+export { default } from './Steps'; 

package/src/components/Tab/Tab.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState, ReactNode } from 'react';
 import { TAB } from '../../lib/constants/components';
 
-interface TabItemProps {
+export interface TabItemProps {
   /**
    * Label for the tab
    */
@@ -23,7 +23,7 @@ interface TabItemProps {
   className?: string;
 }
 
-interface TabProps {
+export interface TabProps {
   /**
    * Array of tab items
    */
@@ -48,7 +48,7 @@ interface TabProps {
 /**
  * Tab component for switching between different content panels
  */
-const Tab: React.FC<TabProps> = ({
+export const Tab: React.FC<TabProps> = ({
   items,
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
@@ -61,7 +61,7 @@ const Tab: React.FC<TabProps> = ({
   // Handle tab instance initialization and cleanup
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !tabRef.current) return;
+    if (typeof window === 'undefined' || !tabRef.current) return undefined;
 
     // Dynamically import the tab script to avoid server-side rendering issues
     import('./scripts').then(({ default: TabClass }) => {
@@ -130,12 +130,6 @@ const Tab: React.FC<TabProps> = ({
   );
 }; 
 
-export type { TabProps, TabItemProps };
-
-// Set display name for debugging
 Tab.displayName = 'Tab';
 
-// Default export (primary)
 export default Tab;
-
-export { Tab };

package/src/components/Testimonial/Testimonial.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, ReactNode } from 'react';
 import { TESTIMONIAL } from '../../lib/constants/components';
 
-interface TestimonialAuthor {
+export interface TestimonialAuthor {
   /**
    * The author's name
    */
@@ -23,7 +23,7 @@ interface TestimonialAuthor {
   avatarAlt?: string;
 }
 
-interface TestimonialProps {
+export interface TestimonialProps {
   /**
    * The testimonial quote text or content
    */
@@ -53,7 +53,7 @@ interface TestimonialProps {
 /**
  * Testimonial component for displaying customer quotes and feedback
  */
-const Testimonial: React.FC<TestimonialProps> = ({
+export const Testimonial: React.FC<TestimonialProps> = ({
   quote,
   author,
   size = '',
@@ -65,7 +65,7 @@ const Testimonial: React.FC<TestimonialProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !testimonialRef.current) return;
+    if (typeof window === 'undefined' || !testimonialRef.current) return undefined;
 
     // Dynamically import the testimonial script to avoid server-side rendering issues
     import('./scripts').then(({ default: TestimonialClass }) => {
@@ -143,13 +143,7 @@ const Testimonial: React.FC<TestimonialProps> = ({
   );
 };
 
-export type { TestimonialProps, TestimonialAuthor };
 
-// Set display name for debugging
 Testimonial.displayName = 'Testimonial';
 
-// Default export (primary)
 export default Testimonial;
-
-// Named export for compatibility
-export { Testimonial };

package/src/components/Testimonial/index.ts

@@ -1,4 +1,3 @@
 export { Testimonial } from './Testimonial';
 export type { TestimonialProps, TestimonialAuthor } from './Testimonial';
-export { default as default } from './Testimonial';
-export { initializeTestimonials } from './scripts'; 
+export { default } from './Testimonial'; 

package/src/components/Todo/Todo.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { TodoProps } from '../../lib/types/components';
 import { useTodo } from '../../lib/composables/useTodo';
-import { Icon } from '../Icon';
+import { Icon } from '../Icon/Icon';
 import { TODO } from '../../lib/constants/components';
 import { v4 as uuidv4 } from 'uuid';
 
-const Todo: React.FC<TodoProps> = ({
+export const Todo: React.FC<TodoProps> = ({
   items = [],
   title = 'Todo List',
   onAddTodo,
@@ -162,13 +162,8 @@ const Todo: React.FC<TodoProps> = ({
   );
 };
 
-export type { TodoProps  };
-
-// Set display name for debugging
 Todo.displayName = 'Todo';
 
-// Default export (primary)
-export default Todo;
+export type { TodoProps  };
 
-// Named export for compatibility
-export { Todo };
+export default Todo;

package/src/components/Todo/scripts/bundle.ts

@@ -1,13 +1,6 @@
 import { Todo, TodoEvents } from './index';
 import { initializeAllTodos, filterTodoItems, sortTodoItems } from './todoInteractions';
 
-// Expose to global scope
-declare global {
-  interface Window {
-    Atomix: Record<string, any>;
-  }
-}
-
 // Initialize global namespace if not exists
 window.Atomix = window.Atomix || {};
 

package/src/components/Toggle/Toggle.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { TOGGLE } from '../../lib/constants/components';
 
-interface ToggleProps {
+export interface ToggleProps {
   /**
    * Whether the toggle is initially on
    */
@@ -31,7 +31,7 @@ interface ToggleProps {
 /**
  * Toggle component for switching between two states
  */
-const Toggle: React.FC<ToggleProps> = ({
+export const Toggle: React.FC<ToggleProps> = ({
   initialOn = false,
   onToggleOn,
   onToggleOff,
@@ -44,7 +44,7 @@ const Toggle: React.FC<ToggleProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !toggleRef.current) return;
+    if (typeof window === 'undefined' || !toggleRef.current) return undefined;
 
     // Initialize toggle instance
     import('./scripts').then(({ default: ToggleClass }) => {
@@ -109,12 +109,6 @@ const Toggle: React.FC<ToggleProps> = ({
   );
 }; 
 
-export type { ToggleProps  };
-
-// Set display name for debugging
 Toggle.displayName = 'Toggle';
 
-// Default export (primary)
-export default Toggle;
-
-export { Toggle };
+export default Toggle;

package/src/components/Toggle/scripts/bundle.ts

@@ -1,13 +1,6 @@
 import Toggle from './index';
 import { applyHoverEffect, applyFocusEffect, initializeToggle, initializeAllToggles } from './toggleInteractions';
 
-// Expose to global scope
-declare global {
-  interface Window {
-    Atomix: Record<string, any>;
-  }
-}
-
 // Initialize global namespace if not exists
 window.Atomix = window.Atomix || {};
 

package/src/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useRef, useEffect } from 'react';
 import { TOOLTIP } from '../../lib/constants/components';
 import { Tooltip as TooltipClass } from './scripts';
 
-interface TooltipProps {
+export interface TooltipProps {
   /**
    * Content to be displayed in the tooltip
    */
@@ -39,7 +39,7 @@ interface TooltipProps {
   offset?: number;
 }
 
-const Tooltip: React.FC<TooltipProps> = ({
+export const Tooltip: React.FC<TooltipProps> = ({
   content,
   children,
   position = TOOLTIP.DEFAULTS.POSITION,
@@ -90,13 +90,6 @@ const Tooltip: React.FC<TooltipProps> = ({
   );
 }; 
 
-export type { TooltipProps  };
-
-// Set display name for debugging
 Tooltip.displayName = 'Tooltip';
 
-// Default export (primary)
-export default Tooltip;
-
-// Named export for compatibility
-export { Tooltip };
+export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -1,5 +1,3 @@
 export { Tooltip } from "./Tooltip";
 export type { TooltipProps } from "./Tooltip";
-
-// Export Tooltip class for vanilla JS usage
-export { Tooltip as TooltipClass, initializeTooltips } from "./scripts";
+export { default } from "./Tooltip";