@shohojdhara/atomix 0.1.13 → 0.1.15

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/Upload/Upload.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { UPLOAD } from '../../lib/constants/components';
 
-interface UploadProps {
+export interface UploadProps {
   /**
    * Whether the upload component is disabled
    */
@@ -81,7 +81,7 @@ type UploadStatus = 'idle' | 'loading' | 'success' | 'error';
 /**
  * Upload component for file uploads with drag and drop
  */
-const Upload: React.FC<UploadProps> = ({
+export const Upload: React.FC<UploadProps> = ({
   disabled = false,
   maxSizeInMB = 5,
   acceptedFileTypes = ['application/pdf', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'image/jpeg', 'image/png'],
@@ -112,7 +112,7 @@ const Upload: React.FC<UploadProps> = ({
   
   useEffect(() => {
     // Only run on client-side
-    if (typeof window === 'undefined' || !uploadRef.current) return;
+    if (typeof window === 'undefined' || !uploadRef.current) return undefined;
 
     // Dynamically import the upload script to avoid server-side rendering issues
     import('./scripts').then(({ default: UploadClass }) => {
@@ -223,13 +223,15 @@ const Upload: React.FC<UploadProps> = ({
     
     // Notify about file selection
     if (validFiles.length && onFileSelect) {
-      onFileSelect(validFiles);
+      onFileSelect(validFiles as File[]);
     }
     
     // Process the first valid file
     if (validFiles.length) {
-      setCurrentFile(validFiles[0]);
-      simulateUpload(validFiles[0]);
+        setCurrentFile(validFiles[0] || null);
+      if (validFiles[0]) {
+        simulateUpload(validFiles[0]);
+      }
     }
   };
   
@@ -401,13 +403,5 @@ const Upload: React.FC<UploadProps> = ({
   );
 };
 
-export type { UploadProps  };
-
-// Set display name for debugging
 Upload.displayName = 'Upload';
-
-// Default export (primary)
-export default Upload;
-
-// Named export for compatibility
-export { Upload };
+export default Upload;

package/src/components/index.ts

@@ -1,153 +1,118 @@
 // Components Index - Explicit exports for better tree-shaking and compatibility
 
 // Accordion
-export { default as Accordion } from './Accordion/Accordion';
-export type { AccordionProps } from './Accordion/Accordion';
+export { Accordion, type AccordionProps } from './Accordion/Accordion';
 
 // Avatar  
-export { default as Avatar } from './Avatar/Avatar';
-export type { AvatarProps } from './Avatar/Avatar';
+export { Avatar, type AvatarProps } from './Avatar/Avatar';
+
+// AvatarGroup
+export { AvatarGroup, type AvatarGroupProps } from './Avatar/AvatarGroup';
 
 // Badge
-export { default as Badge } from './Badge/Badge';
-export type { BadgeProps } from './Badge/Badge';
+export { Badge, type BadgeProps } from './Badge/Badge';
 
 // Breadcrumb
-export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
-export type { BreadcrumbProps } from './Breadcrumb/Breadcrumb';
+export { Breadcrumb, type BreadcrumbProps } from './Breadcrumb/Breadcrumb';
 
 // Button
-export { default as Button } from './Button';
-export type { ButtonProps } from './Button';
+export { Button, type ButtonProps } from './Button/Button';
 
 // Callout
-export { default as Callout } from './Callout/Callout';
-export type { CalloutProps } from './Callout/Callout';
+export { Callout, type CalloutProps } from './Callout/Callout';
 
 // Card
-export { default as Card } from './Card/Card';
-export type { CardProps } from './Card/Card';
+export { Card, type CardProps } from './Card/Card';
 
 // ColorModeToggle
-export { default as ColorModeToggle } from './ColorModeToggle/ColorModeToggle';
-export type { ColorModeToggleProps } from './ColorModeToggle/ColorModeToggle';
+export { ColorModeToggle, type ColorModeToggleProps } from './ColorModeToggle/ColorModeToggle';
 
 // Countdown
-export { default as Countdown } from './Countdown/Countdown';
-export type { CountdownProps } from './Countdown/Countdown';
+export { Countdown, type CountdownProps } from './Countdown/Countdown';
 
 // DataTable
-export { default as DataTable } from './DataTable/DataTable';
-export type { DataTableProps } from './DataTable/DataTable';
+export { DataTable, type DataTableProps } from './DataTable/DataTable';
 
 // DatePicker
-export { default as DatePicker } from './DatePicker/DatePicker';
-export type { DatePickerProps } from './DatePicker/DatePicker';
+export { DatePicker, type DatePickerProps } from './DatePicker/DatePicker';
 
 // Dropdown
-export { default as Dropdown } from './Dropdown/Dropdown';
-export type { DropdownProps } from './Dropdown/Dropdown';
+export { Dropdown, type DropdownProps } from './Dropdown/Dropdown';          
 
 // EdgePanel
-export { default as EdgePanel } from './EdgePanel/EdgePanel';
-export type { EdgePanelProps } from './EdgePanel/EdgePanel';
+export { EdgePanel, type EdgePanelProps } from './EdgePanel/EdgePanel';
 
 // Form components - you might want to break these down further
-export { default as Form } from './Form/Form';
-export { default as Input } from './Form/Input';
-export { default as Textarea } from './Form/Textarea';
-export { default as Select } from './Form/Select';
-export { default as Checkbox } from './Form/Checkbox';
-export { default as Radio } from './Form/Radio';
+export { Form, type FormProps } from './Form/Form';
+export { Input, type InputProps } from './Form/Input';
+export { Textarea, type TextareaProps } from './Form/Textarea';
+export { Select, type SelectProps } from './Form/Select';
+export { Checkbox, type CheckboxProps } from './Form/Checkbox';
+export { Radio, type RadioProps } from './Form/Radio';
 
 // Hero
-export { default as Hero } from './Hero/Hero';
-export type { HeroProps } from './Hero/Hero';
+export { Hero, type HeroProps } from './Hero/Hero';
 
 // Icon
-export { default as Icon } from './Icon/Icon';
-export type { IconProps } from './Icon/Icon';
+export { Icon, type IconProps } from './Icon/Icon';
 
 // List
-export { default as List } from './List/List';
-export type { ListProps } from './List/List';
+export { List, type ListProps } from './List/List';
 
 // Messages
-export { default as Messages } from './Messages/Messages';
-export type { MessagesProps } from './Messages/Messages';
+export { Messages, type MessagesProps } from './Messages/Messages';
 
 // Modal
-export { default as Modal } from './Modal/Modal';
-export type { ModalProps } from './Modal/Modal';
+export { Modal, type ModalProps } from './Modal/Modal';
 
 // Navbar
-export { default as Navbar } from './Navbar/Navbar';
-export type { NavbarProps } from './Navbar/Navbar';
+export { Navbar, type NavbarProps } from './Navbar/Navbar';
 
 // Pagination
-export { default as Pagination } from './Pagination/Pagination';
-export type { PaginationProps } from './Pagination/Pagination';
+export { Pagination, type PaginationProps } from './Pagination/Pagination';
 
 // PhotoViewer
-export { default as PhotoViewer } from './PhotoViewer/PhotoViewer';
-export type { PhotoViewerProps } from './PhotoViewer/PhotoViewer';
+export { PhotoViewer, type PhotoViewerProps } from './PhotoViewer/PhotoViewer';
 
 // Popover
-export { default as Popover } from './Popover/Popover';
-export type { PopoverProps } from './Popover/Popover';
+export { Popover, type PopoverProps } from './Popover/Popover';
 
 // ProductReview
-export { default as ProductReview } from './ProductReview/ProductReview';
-export type { ProductReviewProps } from './ProductReview/ProductReview';
+export { ProductReview, type ProductReviewProps } from './ProductReview/ProductReview';       
 
 // Progress
-export { default as Progress } from './Progress/Progress';
-export type { ProgressProps } from './Progress/Progress';
+export { Progress, type ProgressProps } from './Progress/Progress';
 
 // Rating
-export { default as Rating } from './Rating/Rating';
-export type { RatingProps } from './Rating/Rating';
+export { Rating, type RatingProps } from './Rating/Rating';
 
 // River
-export { default as River } from './River/River';
-export type { RiverProps } from './River/River';
+export { River, type RiverProps } from './River/River';
 
 // SectionIntro
-export { default as SectionIntro } from './SectionIntro/SectionIntro';
-export type { SectionIntroProps } from './SectionIntro/SectionIntro';
+export { SectionIntro, type SectionIntroProps } from './SectionIntro/SectionIntro';
 
 // Spinner
-export { default as Spinner } from './Spinner/Spinner';
-export type { SpinnerProps } from './Spinner/Spinner';
+export { Spinner, type SpinnerProps } from './Spinner/Spinner';
 
 // Steps
-export { default as Steps } from './Steps/Steps';
-export type { StepsProps } from './Steps/Steps';
+export { Steps, type StepsProps } from './Steps/Steps';
 
 // Tab
-export { default as Tab } from './Tab/Tab';
-export type { TabProps } from './Tab/Tab';
+export { Tab, type TabProps } from './Tab/Tab';
 
 // Testimonial
-export { default as Testimonial } from './Testimonial/Testimonial';
-export type { TestimonialProps } from './Testimonial/Testimonial';
+export { Testimonial, type TestimonialProps } from './Testimonial/Testimonial';
 
 // Todo
-export { default as Todo } from './Todo/Todo';
-export type { TodoProps } from './Todo/Todo';
+export { Todo, type TodoProps } from './Todo/Todo';
 
 // Toggle
-export { default as Toggle } from './Toggle/Toggle';
-export type { ToggleProps } from './Toggle/Toggle';
+export { Toggle, type ToggleProps } from './Toggle/Toggle';
 
 // Tooltip
-export { default as Tooltip } from './Tooltip/Tooltip';
-export type { TooltipProps } from './Tooltip/Tooltip';
+export { Tooltip, type TooltipProps } from './Tooltip/Tooltip'; 
 
 // Upload
-export { default as Upload } from './Upload/Upload';
-export type { UploadProps } from './Upload/Upload';
+export { Upload, type UploadProps } from './Upload/Upload';
 
-// AtomixLogo
-export { default as AtomixLogo } from './AtomixLogo/AtomixLogo';
-export type { AtomixLogoProps } from './AtomixLogo/AtomixLogo';

package/src/index.ts

@@ -1,22 +1,21 @@
-// Export components and utilities with namespaces to avoid conflicts
-import * as components from './components';
-import * as lib from './lib';
+// Export all components individually for better tree-shaking
+export * from './components';
 
-// Re-export with namespaces
-export { components };
-export { lib };
+// Export lib utilities
+export * from './lib';
 
-// Create a properly typed default export without spreading
-// This avoids TypeScript errors with internal types like UseAccordionResult
-const Atomix = {
-  // Export components explicitly
-  ...components,
-  // Export lib utilities explicitly
-  // We avoid spreading lib directly to prevent TypeScript errors with internal types
-  composables: lib.composables,
-  utils: lib.utils,
-  types: lib.types,
-  constants: lib.constants
+// Export layouts
+export * from './layouts';
+
+// Create a properly typed default export
+const atomix = {
+  // Re-export all components and utilities
+  ...require('./components'),
+  composables: require('./lib').composables,
+  utils: require('./lib').utils,
+  constants: require('./lib').constants,
+  layouts: require('./layouts')
 };
 
-export default Atomix;
+// Default export
+export default atomix;

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -213,7 +213,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
     );
 
     const trackImages = useCallback(() => {
-      if (!imagesLoaded || !containerRef.current) return;
+      if (!imagesLoaded || !containerRef.current) return undefined;
       imageElements.current.clear();
       imagesLoadedCount.current = 0;
       const images = containerRef.current.querySelectorAll('img');
@@ -222,7 +222,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
         setLayoutComplete(true);
         setLoadingImages(false);
         onLayoutComplete?.();
-        return;
+        return undefined;
       }
       setLoadingImages(true);
       images.forEach((img) => {
@@ -283,8 +283,8 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
 
     // === OBSERVE CONTAINER RESIZE ===
     useEffect(() => {
-      if (!containerRef.current) return;
-      let animationFrame: number | null = null;
+      if (!containerRef.current) return undefined;
+      let animationFrame: ReturnType<typeof requestAnimationFrame> | null = null;
       const observer = new ResizeObserver(() => {
         if (animationFrame) cancelAnimationFrame(animationFrame);
         animationFrame = requestAnimationFrame(() => calculateLayout());
@@ -305,6 +305,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
         calculateLayout();
         setLayoutComplete(true);
         setLoadingImages(false);
+        return undefined;
       }
       // Only reset layoutComplete when items or columns change
       // eslint-disable-next-line

package/src/layouts/index.ts

@@ -0,0 +1,10 @@
+import * as Grid  from './Grid';
+import * as MasonryGrid from './MasonryGrid';
+
+
+const layouts = {
+  ...Grid,
+  ...MasonryGrid
+}
+
+export default layouts;

package/src/lib/composables/useDropdown.ts

@@ -67,7 +67,7 @@ export const useDropdown = ({
 
   // Handle click outside
   useEffect(() => {
-    if (!isOpen || !closeOnClickOutside) return;
+    if (!isOpen || !closeOnClickOutside) return undefined;
 
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -89,7 +89,7 @@ export const useDropdown = ({
 
   // Handle escape key
   useEffect(() => {
-    if (!isOpen || !closeOnEscape) return;
+    if (!isOpen || !closeOnEscape) return undefined;
 
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -204,7 +204,7 @@ export const useDropdown = ({
 
   // Update position when menu is opened
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen) return undefined;
 
     // Initial position update
     updatePosition();