@shohojdhara/atomix 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Atomix Design System - A modern component library for web applications",
   "main": "dist/js/atomix-${version}.react.cjs.js",
   "module": "dist/js/atomix-${version}.react.esm.js",
@@ -99,8 +99,8 @@
     "analyze:bundle": "npm run analyze",
     "build:parallel": "npm-run-all --parallel build:cjs build:esm build:umd",
     "clean:dist": "rm -rf dist",
-    "build:components": "npm-run-all clean:dist --parallel build:react build:styles build:types",
-    "build:react": "npm run clean:dist && npx webpack --mode production --env target=components",
+    "build:components": "npm-run-all clean:dist build:types --parallel build:react build:styles",
+    "build:react": "npx webpack --mode production --env target=components --env format=all",
     "build:styles": "npm run clean:dist && npx webpack --mode production --env target=styles",
     "build:cjs": "npx webpack --mode production --env target=components --env format=cjs",
     "build:esm": "npx webpack --mode production --env target=components --env format=esm",

package/src/components/Accordion/Accordion.tsx

@@ -18,7 +18,7 @@ export type AccordionProps = AccordionPropsType & {
   onOpenChange?: (open: boolean) => void;
 };
 
-export const Accordion: React.FC<AccordionProps> = ({
+const Accordion: React.FC<AccordionProps> = ({
   title,
   children,
   defaultOpen = false,
@@ -87,4 +87,13 @@ export const Accordion: React.FC<AccordionProps> = ({
       </div>
     </div>
   );
-}; 
+};
+
+// Set display name for debugging
+Accordion.displayName = 'Accordion';
+
+// Default export (primary)
+export default Accordion;
+
+// Named export for compatibility
+export { Accordion };

package/src/components/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@ import { AvatarProps } from '../../lib/types/components';
 import { AVATAR } from '../../lib/constants/components';
 import { Icon } from '../Icon';
 
-export const Avatar: React.FC<AvatarProps> = ({
+const Avatar: React.FC<AvatarProps> = ({
   src,
   alt = 'Avatar',
   initials,
@@ -64,4 +64,14 @@ export const Avatar: React.FC<AvatarProps> = ({
   );
 };
 
-export default Avatar; 
+
+export type { AvatarProps };
+
+// Set display name for debugging
+Avatar.displayName = 'Avatar';
+
+// Default export (primary)
+export default Avatar;
+
+// Named export for compatibility
+export { Avatar };

package/src/components/Avatar/AvatarGroup.tsx

@@ -3,7 +3,7 @@ import { AvatarGroupProps, AvatarProps } from '../../lib/types/components';
 import { AVATAR_GROUP, AVATAR } from '../../lib/constants/components';
 import { Avatar } from './Avatar';
 
-export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+const AvatarGroup: React.FC<AvatarGroupProps> = ({
   children,
   max,
   stacked = false,
@@ -66,4 +66,13 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = ({
   );
 };
 
-export default AvatarGroup; 
+export type { AvatarGroupProps, AvatarProps }
+
+// Set display name for debugging
+AvatarGroup.displayName = 'Accordion';
+
+// Default export (primary)
+export default AvatarGroup;
+
+// Named export for compatibility
+export { AvatarGroup };

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';
 
-export const Badge: React.FC<BadgeProps> = ({
+const Badge: React.FC<BadgeProps> = ({
   label,
   variant = 'primary',
   size = 'md',
@@ -28,4 +28,15 @@ export const Badge: React.FC<BadgeProps> = ({
       <span>{label}</span>
     </span>
   );
-}; 
+}; 
+
+export type { BadgeProps };
+
+// Set display name for debugging
+Badge.displayName = 'Badge';
+
+// Default export (primary)
+export default Badge;
+
+// Named export for compatibility
+export { Badge };

package/src/components/Badge/index.tsx

@@ -1,4 +1,2 @@
-import { Badge } from "./Badge";
-
-export { Badge };
-export default Badge;
+export { default as Badge } from "./Badge";
+export type { BadgeProps } from "./Badge";

package/src/components/Breadcrumb/Breadcrumb.tsx

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

package/src/components/Callout/Callout.tsx

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

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';
 
-export const Card = forwardRef<HTMLDivElement, CardProps>(({
+ const Card = forwardRef<HTMLDivElement, CardProps>(({
   header,
   image,
   imageAlt = '',
@@ -84,4 +84,14 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
   );
 });
 
-export default Card;
+
+export type { CardProps  };
+
+// Set display name for debugging
+Card.displayName = 'Badge';
+
+// Default export (primary)
+export default Card;
+
+// Named export for compatibility
+export { Card };

package/src/components/ColorModeToggle/ColorModeToggle.tsx

@@ -4,7 +4,7 @@ interface ColorModeToggleProps {
   className?: string;
 }
 
-export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) => {
+const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) => {
   const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
   
   // Initialize color mode from localStorage or system preference
@@ -80,4 +80,13 @@ export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = ''
   );
 }; 
 
-export default ColorModeToggle;
+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/ColorModeToggle/index.ts

@@ -1 +1,2 @@
-export { default } from './ColorModeToggle';
+export { default as ColorModeToggle } from './ColorModeToggle';
+export type { ColorModeToggleProps } from './ColorModeToggle';

package/src/components/Countdown/Countdown.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-export interface CountdownProps {
+interface CountdownProps {
   /** Target date/time as a Date or ISO string */
   target: Date | string;
   /** Show days, hours, minutes, seconds */
@@ -24,7 +24,7 @@ function getTimeParts(diff: number) {
   return { days, hours, minutes, seconds };
 }
 
-export const Countdown: React.FC<CountdownProps> = ({
+const Countdown: React.FC<CountdownProps> = ({
   target,
   show = ['days', 'hours', 'minutes', 'seconds'],
   separator = ':',
@@ -77,4 +77,14 @@ export const Countdown: React.FC<CountdownProps> = ({
   );
 };
 
-export default Countdown; 
+
+export type { CountdownProps  };
+
+// Set display name for debugging
+Countdown.displayName = 'Badge';
+
+// Default export (primary)
+export default Countdown;
+
+// Named export for compatibility
+export { Countdown };

package/src/components/DataTable/DataTable.tsx

@@ -19,7 +19,7 @@ import { Pagination } from '../Pagination';
  * />
  * ```
  */
-export const DataTable: React.FC<DataTableProps> = ({
+const DataTable: React.FC<DataTableProps> = ({
   data = [],
   columns = [],
   className,
@@ -206,4 +206,13 @@ export const DataTable: React.FC<DataTableProps> = ({
   );
 };
 
-export default DataTable; 
+export type { DataTableProps  };
+
+// Set display name for debugging
+DataTable.displayName = 'DataTable';
+
+// Default export (primary)
+export default DataTable;
+
+// Named export for compatibility
+export { DataTable };

package/src/components/DatePicker/DatePicker.tsx

@@ -457,4 +457,9 @@ const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(({
 
 DatePicker.displayName = 'DatePicker';
 
+
+export  {DatePicker};
+
+export type { DatePickerProps, DatePickerRef } from './types';
+
 export default DatePicker;

package/src/components/Dropdown/Dropdown.tsx

@@ -116,7 +116,7 @@ export const DropdownHeader: React.FC<DropdownHeaderProps> = ({ children, classN
 /**
  * Dropdown component for creating dropdown menus
  */
-export const Dropdown: React.FC<DropdownProps> = ({
+const Dropdown: React.FC<DropdownProps> = ({
   children, 
   menu,
   placement = 'bottom-start',
@@ -323,3 +323,16 @@ export const Dropdown: React.FC<DropdownProps> = ({
     </div>
   );
 }; 
+
+
+
+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 };

package/src/components/EdgePanel/EdgePanel.tsx

@@ -3,7 +3,7 @@ import { EdgePanelProps } from '../../lib/types/components';
 import { useEdgePanel } from '../../lib/composables/useEdgePanel';
 import { EDGE_PANEL } from '../../lib/constants/components';
 import { Icon } from '../Icon/Icon';
-export const EdgePanel: React.FC<EdgePanelProps> = ({
+const EdgePanel: React.FC<EdgePanelProps> = ({
   title,
   children,
   position = 'start',
@@ -69,4 +69,17 @@ export const EdgePanel: React.FC<EdgePanelProps> = ({
       </div>
     </div>
   );
-}; 
+}; 
+
+
+
+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 };

package/src/components/Form/Checkbox.tsx

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

package/src/components/Form/Form.tsx

@@ -5,7 +5,7 @@ import { useForm } from '../../lib/composables/useForm';
 /**
  * Form - A component for creating form layouts
  */
-export const Form: React.FC<FormProps> = ({
+const Form: React.FC<FormProps> = ({
   children,
   onSubmit,
   onReset,
@@ -39,4 +39,13 @@ export const Form: React.FC<FormProps> = ({
   );
 };
 
-export default Form; 
+export type { FormProps  };
+
+// Set display name for debugging
+Form.displayName = 'Form';
+
+// Default export (primary)
+export default Form;
+
+// Named export for compatibility
+export { 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
  */
-export const FormGroup: React.FC<FormGroupProps> = ({
+const FormGroup: React.FC<FormGroupProps> = ({
   children,
   label,
   helperText,
@@ -48,4 +48,13 @@ export const FormGroup: React.FC<FormGroupProps> = ({
   );
 };
 
-export default FormGroup; 
+export type { FormGroupProps  };
+
+// Set display name for debugging
+FormGroup.displayName = 'FormGroup';
+
+// Default export (primary)
+export default FormGroup;
+
+// Named export for compatibility
+export { FormGroup };

package/src/components/Form/Input.tsx

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

package/src/components/Form/Radio.tsx

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

package/src/components/Form/Select.tsx

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

package/src/components/Form/index.ts

@@ -1,7 +1,7 @@
-export { Form } from './Form';
-export { FormGroup } from './FormGroup';
-export { Input } from './Input';
-export { Select } from './Select';
-export { Checkbox } from './Checkbox';
-export { Radio } from './Radio';
-export { Textarea } from './Textarea'; 
+export { default as Form } from './Form';
+export { default as FormGroup } from './FormGroup';
+export { default as Input } from './Input';
+export { default as Select } from './Select';
+export { default as Checkbox } from './Checkbox';
+export { default as Radio } from './Radio';
+export { default as Textarea } from './Textarea'; 

package/src/components/Hero/Hero.tsx

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

package/src/components/Hero/index.ts

@@ -1,6 +1,6 @@
 import { Hero } from './Hero';
-import type { HeroComponentProps } from './Hero';
+import type { HeroProps } from './Hero';
 
 export { Hero };
-export type { HeroComponentProps };
+export type { HeroProps };
 export default Hero; 

package/src/components/Icon/Icon.tsx

@@ -7,7 +7,7 @@ export type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duoto
 // We need to filter out non-icon exports from the Phosphor package
 type PhosphorIconsType = Exclude<keyof typeof PhosphorIcons, 'Icon' | 'IconContext' | 'IconBase' | 'IconProps' | 'createIcon' | 'default' | 'SSR'>;
 
-export interface IconProps {
+interface IconProps {
   /**
    * Icon name from Phosphor Icons
    */
@@ -51,7 +51,7 @@ const sizeMap: Record<IconSize, number> = {
 /**
  * Icon component that displays a Phosphor icon
  */
-export const Icon: React.FC<IconProps> = ({
+const Icon: React.FC<IconProps> = ({
   name,
   size = 'md',
   weight = 'regular',
@@ -84,4 +84,13 @@ export const Icon: React.FC<IconProps> = ({
   );
 };
 
-export default Icon; 
+export type { IconProps  };
+
+// Set display name for debugging
+Icon.displayName = 'Icon';
+
+// Default export (primary)
+export default Icon;
+
+// Named export for compatibility
+export { Icon };

package/src/components/List/List.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ListProps } from '../../lib/types/components';
 import { LIST } from '../../lib/constants/components';
 
-export const List: React.FC<ListProps> = ({
+const List: React.FC<ListProps> = ({
   children,
   variant = 'default',
   className = '',
@@ -30,4 +30,15 @@ export const List: React.FC<ListProps> = ({
   );
 };
 
-export default List;
+
+
+export type { ListProps  };
+
+// Set display name for debugging
+List.displayName = 'List';
+
+// Default export (primary)
+export default List;
+
+// Named export for compatibility
+export { List };

package/src/components/Messages/Messages.tsx

@@ -5,12 +5,10 @@ import { MESSAGES } from '../../lib/constants/components';
 import { MessagesProps } from '../../lib/types/components';
 import { useMessages } from '../../lib/composables/useMessages';
 
-export type { MessagesProps, MessageItem } from '../../lib/types/components';
-
 /**
  * Messages component for displaying a chat interface with messages, images, and file attachments
  */
-export const Messages: React.FC<MessagesProps> = ({
+const Messages: React.FC<MessagesProps> = ({
   messages = [],
   otherAvatar,
   selfAvatar,
@@ -162,4 +160,13 @@ export const Messages: React.FC<MessagesProps> = ({
   );
 };
 
-export default Messages; 
+export type { MessagesProps  };
+
+// Set display name for debugging
+Messages.displayName = 'Messages';
+
+// Default export (primary)
+export default Messages;
+
+// Named export for compatibility
+export { Messages };