@shohojdhara/atomix 0.1.14 → 0.1.16

package/src/components/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import { BadgeProps } from '../../lib/types/components';
 import { useBadge } from '../../lib/composables/useBadge';
 import { BADGE } from '../../lib/constants/components';
 
-const Badge: React.FC<BadgeProps> = ({
+export const Badge: React.FC<BadgeProps> = ({
   label,
   variant = 'primary',
   size = 'md',
@@ -30,13 +30,8 @@ const Badge: React.FC<BadgeProps> = ({
   );
 }; 
 
-export type { BadgeProps };
-
-// Set display name for debugging
 Badge.displayName = 'Badge';
 
-// Default export (primary)
-export default Badge;
+export type { BadgeProps };
 
-// Named export for compatibility
-export { Badge };
+export default Badge;

package/src/components/Badge/index.ts

@@ -0,0 +1,3 @@
+export { Badge } from "./Badge";
+export { default } from "./Badge";
+export type { BadgeProps } from "./Badge";

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -49,7 +49,7 @@ export interface BreadcrumbProps {
    */
   ariaLabel?: string;
 }
-const Breadcrumb: React.FC<BreadcrumbProps> = ({
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items,
   divider,
   className = '',
@@ -100,11 +100,6 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   );
 };
 
-// Set display name for debugging
 Breadcrumb.displayName = 'Breadcrumb';
 
-// Default export (primary)
-export default Breadcrumb;
-
-// Named export for compatibility
-export { Breadcrumb };
+export default Breadcrumb;

package/src/components/Breadcrumb/index.ts

@@ -1,2 +1,3 @@
 export { Breadcrumb } from './Breadcrumb';
+export { default } from './Breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb'; 

package/src/components/Button/Button.tsx

@@ -3,7 +3,7 @@ import { ButtonProps } from '../../lib/types/components';
 import { useButton } from '../../lib/composables/useButton';
 import { BUTTON } from '../../lib/constants/components';
 
-type ButtonAsProp = {
+export type ButtonAsProp = {
   as?: ElementType;
   to?: string;
   href?: string;
@@ -50,5 +50,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
   );
 });
 
-// Add displayName for better debugging
 Button.displayName = 'Button';
+
+export type { ButtonProps };
+
+export default Button;

package/src/components/Button/index.ts

@@ -1,6 +1,3 @@
-import { Button } from './Button';
-import type { ButtonProps } from '../../lib/types/components';
-
-export { Button };
-export type { ButtonProps };
-export default Button; 
+export { Button } from './Button';
+export { default } from './Button';
+export type { ButtonProps } from './Button';

package/src/components/Callout/Callout.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon';
 /**
  * Callout component for displaying important messages, notifications, or alerts
  */
- const Callout: React.FC<CalloutProps> = ({
+export const Callout: React.FC<CalloutProps> = ({
   title,
   children,
   icon,
@@ -71,13 +71,8 @@ import { Icon } from '../Icon/Icon';
   );
 };
 
-export type { CalloutProps };
-
-// Set display name for debugging
 Callout.displayName = 'Callout';
 
-// Default export (primary)
-export default Callout;
+export type { CalloutProps };
 
-// Named export for compatibility
-export { Callout };
+export default Callout;

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

@@ -9,20 +9,10 @@ if (typeof window !== 'undefined') {
   window.Atomix = window.Atomix || {};
   
   // Add Callout to Atomix namespace
+  // @ts-ignore - Ignore type mismatch between React component and vanilla JS class
   window.Atomix.Callout = Callout;
   window.Atomix.CalloutInteractions = CalloutInteractions;
 }
 
 // Export for module usage
-export { Callout, CalloutInteractions };
-
-// Add type definitions for global namespace
-declare global {
-  interface Window {
-    Atomix: {
-      Callout: typeof Callout;
-      CalloutInteractions: typeof CalloutInteractions;
-      [key: string]: any;
-    };
-  }
-}
+export { Callout, CalloutInteractions };

package/src/components/Card/Card.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, Ref } from 'react';
 import { CARD } from '../../lib/constants/components';
 import { CardProps } from '../../lib/types/components';
 
- const Card = forwardRef<HTMLDivElement, CardProps>(({
+export const Card = forwardRef<HTMLDivElement, CardProps>(({
   header,
   image,
   imageAlt = '',
@@ -87,11 +87,6 @@ import { CardProps } from '../../lib/types/components';
 
 export type { CardProps  };
 
-// Set display name for debugging
-Card.displayName = 'Badge';
+Card.displayName = 'Card';
 
-// Default export (primary)
-export default Card;
-
-// Named export for compatibility
-export { Card };
+export default Card;

package/src/components/Card/ElevationCard.tsx

@@ -44,4 +44,8 @@ export const ElevationCard: React.FC<ElevationCardProps> = ({
   );
 };
 
+export type { ElevationCardProps };
+
+ElevationCard.displayName = 'ElevationCard';  
+
 export default ElevationCard;

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

@@ -15,13 +15,6 @@ import {
   applyFlipEffect
 } from './cardInteractions';
 
-// 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/ColorModeToggle/ColorModeToggle.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 
-interface ColorModeToggleProps {
+export interface ColorModeToggleProps {
   className?: string;
 }
 
-const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) => {
+export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) => {
   const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
   
   // Initialize color mode from localStorage or system preference
@@ -80,13 +80,9 @@ const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) =>
   );
 }; 
 
-export type { ColorModeToggleProps  };
 
-// Set display name for debugging
 ColorModeToggle.displayName = 'ColorModeToggle';
 
-// Default export (primary)
 export default ColorModeToggle;
 
-// Named export for compatibility
-export { ColorModeToggle };
+

package/src/components/Countdown/Countdown.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 
-interface CountdownProps {
+export interface CountdownProps {
   /** Target date/time as a Date or ISO string */
   target: Date | string;
   /** Show days, hours, minutes, seconds */
@@ -24,20 +24,20 @@ function getTimeParts(diff: number) {
   return { days, hours, minutes, seconds };
 }
 
-const Countdown: React.FC<CountdownProps> = ({
+export const Countdown: React.FC<CountdownProps> = forwardRef<HTMLDivElement, CountdownProps>(({
   target,
   show = ['days', 'hours', 'minutes', 'seconds'],
   separator = ':',
   focused = false,
   className = '',
   onComplete,
-}) => {
+}, ref) => {
   const targetDate = typeof target === 'string' ? new Date(target) : target;
   const [now, setNow] = useState(() => new Date());
   const [completed, setCompleted] = useState(false);
 
   useEffect(() => {
-    if (completed) return;
+    if (completed) return undefined;
     const interval = setInterval(() => {
       setNow(new Date());
     }, 1000);
@@ -61,7 +61,7 @@ const Countdown: React.FC<CountdownProps> = ({
   if (show.includes('seconds')) timeParts.push({ label: 'Seconds', value: seconds });
 
   return (
-    <div className={`c-countdown${focused ? ' c-countdown--focused' : ''} ${className}`.trim()}>
+    <div ref={ref} className={`c-countdown${focused ? ' c-countdown--focused' : ''} ${className}`.trim()}>
       {timeParts.map((part, idx) => (
         <React.Fragment key={part.label}>
           <div className="c-countdown__time">
@@ -75,16 +75,8 @@ const Countdown: React.FC<CountdownProps> = ({
       ))}
     </div>
   );
-};
+});
 
+Countdown.displayName = 'Countdown';
 
-export type { CountdownProps  };
-
-// Set display name for debugging
-Countdown.displayName = 'Badge';
-
-// Default export (primary)
-export default Countdown;
-
-// Named export for compatibility
-export { Countdown };
+export default Countdown;

package/src/components/DataTable/DataTable.tsx

@@ -1,10 +1,10 @@
 import React, { useRef } from 'react';
 import { DataTableProps } from '../../lib/types/components';
-import { useDataTable } from './scripts';
+import { useDataTable } from '../../lib/composables/useDataTable';
 import { DATA_TABLE_CLASSES } from '../../lib/constants/components';
-import { Spinner } from '../Spinner';
-import { Icon } from '../Icon';
-import { Pagination } from '../Pagination';
+import { Spinner } from '../Spinner/Spinner';
+import { Icon } from '../Icon/Icon';
+import { Pagination } from '../Pagination/Pagination';
 
 /**
  * DataTable - A flexible and accessible data table component
@@ -19,9 +19,9 @@ import { Pagination } from '../Pagination';
  * />
  * ```
  */
-const DataTable: React.FC<DataTableProps> = ({
-  data = [],
-  columns = [],
+export const DataTable: React.FC<DataTableProps> = ({
+  data,
+  columns,
   className,
   sortable = false,
   filterable = false,
@@ -206,13 +206,8 @@ const DataTable: React.FC<DataTableProps> = ({
   );
 };
 
-export type { DataTableProps  };
+export type { DataTableProps };
 
-// Set display name for debugging
 DataTable.displayName = 'DataTable';
 
-// Default export (primary)
-export default DataTable;
-
-// Named export for compatibility
-export { DataTable };
+export default DataTable;

package/src/components/DataTable/index.ts

@@ -1,2 +1,3 @@
-export { default as DataTable } from './DataTable';
-export * from './DataTable'; 
+export { DataTable } from './DataTable';
+export { default } from './DataTable';
+export type { DataTableProps } from './DataTable'; 

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

@@ -1,21 +1,13 @@
 import { DataTable, DataTableColumn, DataTableOptions } from './index';
 
-// Export for global usage
-declare global {
-  interface Window {
-    AtomixDataTable: {
-      DataTable: typeof DataTable;
-      initializeAll: typeof DataTable.initializeAll;
-      create: (element: string | HTMLElement, data?: any[], columns?: DataTableColumn[], options?: DataTableOptions) => DataTable;
-    };
-  }
-}
+// Initialize global namespace if not exists
+window.Atomix = window.Atomix || {};
 
-// Create global API
-window.AtomixDataTable = {
+// Add DataTable to global namespace
+window.Atomix.DataTable = {
   DataTable,
   initializeAll: DataTable.initializeAll,
-  create: (element, data = [], columns = [], options = {}) => {
+  create: (element: string | HTMLElement, data: any[] = [], columns: DataTableColumn[] = [], options: DataTableOptions = {}) => {
     return new DataTable(element, data, columns, options);
   }
 };

package/src/components/DatePicker/DatePicker.tsx

@@ -2,13 +2,13 @@ import React, { forwardRef, useImperativeHandle } from 'react';
 import { DatePickerProps, DatePickerRef } from './types';
 import { useDatePicker } from '../../lib/composables/useDatePicker';
 import { formatDate } from './utils';
-import Icon from '../Icon';
+import { Icon } from '../Icon/Icon';
 
 /**
  * DatePicker component for selecting dates from a calendar interface.
  * Supports various display modes, date ranges, and customization options.
  */
-const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(({
+export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(({
   value,
   onChange,
   selectionMode = 'single',
@@ -458,8 +458,6 @@ const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(({
 DatePicker.displayName = 'DatePicker';
 
 
-export  {DatePicker};
-
-export type { DatePickerProps, DatePickerRef } from './types';
+export type { DatePickerProps, DatePickerRef };
 
 export default DatePicker;

package/src/components/Dropdown/Dropdown.tsx

@@ -8,7 +8,7 @@ import type {
 } from '../../lib/types/components';
 
 // Context type definition
-type DropdownContextType = {
+export type DropdownContextType = {
   isOpen: boolean;
   close: () => void;
   id: string;
@@ -116,7 +116,7 @@ export const DropdownHeader: React.FC<DropdownHeaderProps> = ({ children, classN
 /**
  * Dropdown component for creating dropdown menus
  */
-const Dropdown: React.FC<DropdownProps> = ({
+export const Dropdown: React.FC<DropdownProps> = ({
   children, 
   menu,
   placement = 'bottom-start',
@@ -167,7 +167,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   
   // Click outside handler
   useEffect(() => {
-    if (!isOpen || !closeOnClickOutside) return;
+    if (!isOpen || !closeOnClickOutside) return undefined;
     
     const handleClickOutside = (e: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
@@ -181,7 +181,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   
   // Escape key handler
   useEffect(() => {
-    if (!isOpen || !closeOnEscape) return;
+    if (!isOpen || !closeOnEscape) return undefined;
     
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -328,11 +328,6 @@ const Dropdown: React.FC<DropdownProps> = ({
 
 export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };
 
-// Set display name for debugging
 Dropdown.displayName = 'Dropdown';
 
-// Default export (primary)
-export default Dropdown;
-
-// Named export for compatibility
-export { Dropdown };
+export default Dropdown;

package/src/components/Dropdown/index.ts

@@ -8,6 +8,7 @@ import type {
 
 // Export React components
 export { Dropdown, DropdownItem, DropdownDivider, DropdownHeader };
+export { default } from './Dropdown';
 
 // Export types for React components
 export type { 
@@ -15,7 +16,4 @@ export type {
   DropdownItemProps, 
   DropdownDividerProps,
   DropdownHeaderProps
-}; 
-
-// Re-export Vanilla JS implementation
-export * from './scripts'; 
+}; 

package/src/components/EdgePanel/EdgePanel.tsx

@@ -3,7 +3,8 @@ import { EdgePanelProps } from '../../lib/types/components';
 import { useEdgePanel } from '../../lib/composables/useEdgePanel';
 import { EDGE_PANEL } from '../../lib/constants/components';
 import { Icon } from '../Icon/Icon';
-const EdgePanel: React.FC<EdgePanelProps> = ({
+
+export const EdgePanel: React.FC<EdgePanelProps> = ({
   title,
   children,
   position = 'start',
@@ -71,15 +72,8 @@ const EdgePanel: React.FC<EdgePanelProps> = ({
   );
 }; 
 
+export type { EdgePanelProps };
 
-
-export type { EdgePanelProps } from '../../lib/types/components';
-
-// Set display name for debugging
 EdgePanel.displayName = 'EdgePanel';
 
-// Default export (primary)
-export default EdgePanel;
-
-// Named export for compatibility
-export { EdgePanel };
+export default EdgePanel;

package/src/components/Form/Checkbox.tsx

@@ -5,7 +5,7 @@ import { useCheckbox } from '../../lib/composables/useCheckbox';
 /**
  * Checkbox - A component for checkbox inputs
  */
- const Checkbox: React.FC<CheckboxProps> = ({
+export const Checkbox: React.FC<CheckboxProps> = ({
   label,
   checked = false,
   onChange,
@@ -58,11 +58,6 @@ import { useCheckbox } from '../../lib/composables/useCheckbox';
 
 export type { CheckboxProps  };
 
-// Set display name for debugging
 Checkbox.displayName = 'Checkbox';
 
-// Default export (primary)
-export default Checkbox;
-
-// Named export for compatibility
-export { Checkbox };
+export default Checkbox;

package/src/components/Form/Form.tsx

@@ -5,7 +5,7 @@ import { useForm } from '../../lib/composables/useForm';
 /**
  * Form - A component for creating form layouts
  */
-const Form: React.FC<FormProps> = ({
+export const Form: React.FC<FormProps> = ({
   children,
   onSubmit,
   onReset,
@@ -41,11 +41,6 @@ const Form: React.FC<FormProps> = ({
 
 export type { FormProps  };
 
-// Set display name for debugging
 Form.displayName = 'Form';
 
-// Default export (primary)
-export default Form;
-
-// Named export for compatibility
-export { Form };
+export default Form;

package/src/components/Form/FormGroup.tsx

@@ -5,7 +5,7 @@ import { useFormGroup } from '../../lib/composables/useFormGroup';
 /**
  * FormGroup - A component for grouping form controls with labels and help text
  */
-const FormGroup: React.FC<FormGroupProps> = ({
+export const FormGroup: React.FC<FormGroupProps> = ({
   children,
   label,
   helperText,
@@ -50,11 +50,6 @@ const FormGroup: React.FC<FormGroupProps> = ({
 
 export type { FormGroupProps  };
 
-// Set display name for debugging
 FormGroup.displayName = 'FormGroup';
 
-// Default export (primary)
-export default FormGroup;
-
-// Named export for compatibility
-export { FormGroup };
+export default FormGroup;

package/src/components/Form/Input.tsx

@@ -5,7 +5,7 @@ import { useInput } from '../../lib/composables/useInput';
 /**
  * Input - A component for text input fields
  */
- const Input: React.FC<InputProps> = ({
+export const Input: React.FC<InputProps> = ({
   type = 'text',
   value,
   onChange,
@@ -72,11 +72,6 @@ import { useInput } from '../../lib/composables/useInput';
 
 export type { InputProps  };
 
-// Set display name for debugging
 Input.displayName = 'Input';
 
-// Default export (primary)
-export default Input;
-
-// Named export for compatibility
-export { Input };
+export default Input;

package/src/components/Form/Radio.tsx

@@ -5,7 +5,7 @@ import { useRadio } from '../../lib/composables/useRadio';
 /**
  * Radio - A component for radio button inputs
  */
-const Radio: React.FC<RadioProps> = ({
+export const Radio: React.FC<RadioProps> = ({
   label,
   checked = false,
   onChange,
@@ -55,11 +55,6 @@ const Radio: React.FC<RadioProps> = ({
 
 export type { RadioProps  };
 
-// Set display name for debugging
 Radio.displayName = 'Radio';
 
-// Default export (primary)
-export default Radio;
-
-// Named export for compatibility
-export { Radio };
+export default Radio;

package/src/components/Form/Select.tsx

@@ -6,7 +6,7 @@ import { SELECT } from '../../lib/constants/components';
 /**
  * Select - A component for dropdown selection
  */
-const Select: React.FC<SelectProps> = ({
+export const Select: React.FC<SelectProps> = ({
   options = [],
   value,
   onChange,
@@ -187,11 +187,7 @@ const Select: React.FC<SelectProps> = ({
 
 export type { SelectProps  };
 
-// Set display name for debugging
 Select.displayName = 'Select';
 
-// Default export (primary)
 export default Select;
-
-// Named export for compatibility
-export { Select };
+  

package/src/components/Form/Textarea.tsx

@@ -5,7 +5,7 @@ import { useTextarea } from '../../lib/composables/useTextarea';
 /**
  * Textarea - A component for multiline text input
  */
-const Textarea: React.FC<TextareaProps> = ({
+export const Textarea: React.FC<TextareaProps> = ({
   value,
   onChange,
   onBlur,
@@ -64,11 +64,6 @@ const Textarea: React.FC<TextareaProps> = ({
 
 export type { TextareaProps  };
 
-// Set display name for debugging
 Textarea.displayName = 'Textarea';
 
-// Default export (primary)
-export default Textarea;
-
-// Named export for compatibility
-export { Textarea };
+export default Textarea;

package/src/components/Hero/Hero.tsx

@@ -3,7 +3,7 @@ import { HeroProps, HeroAlignment } from '../../lib/types/components';
 import { useHero } from '../../lib/composables/useHero';
 import { HERO } from '../../lib/constants/components';
 
- const Hero: React.FC<HeroProps> = ({
+export const Hero: React.FC<HeroProps> = ({
   title,
   subtitle,
   text,
@@ -180,11 +180,6 @@ import { HERO } from '../../lib/constants/components';
 
 export type { HeroProps  };
 
-// Set display name for debugging
 Hero.displayName = 'Hero';
 
-// Default export (primary)
-export default Hero;
-
-// Named export for compatibility
-export { Hero };
+export default Hero;