@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/lib/constants/cssVariables.ts

@@ -1,6 +1,6 @@
 /**
  * CSS Variables Constants
- * 
+ *
  * Comprehensive CSS custom property definitions for all components.
  * These provide type-safe access to component styling variables.
  */
@@ -24,7 +24,7 @@ export const BUTTON_CSS_VARS = {
   '--atomix-button-min-width': 'minimum width',
   '--atomix-button-min-height': 'minimum height',
   '--atomix-button-transition': 'transition',
-  
+
   // State properties
   '--atomix-button-hover-bg': 'hover background',
   '--atomix-button-hover-color': 'hover text color',
@@ -35,7 +35,7 @@ export const BUTTON_CSS_VARS = {
   '--atomix-button-focus-ring-width': 'focus ring width',
   '--atomix-button-disabled-opacity': 'disabled opacity',
   '--atomix-button-disabled-bg': 'disabled background',
-  
+
   // Part properties
   '--atomix-button-icon-size': 'icon size',
   '--atomix-button-icon-gap': 'icon spacing',
@@ -57,32 +57,32 @@ export const CARD_CSS_VARS = {
   '--atomix-card-box-shadow': 'box shadow',
   '--atomix-card-width': 'width',
   '--atomix-card-max-width': 'maximum width',
-  
+
   // State properties
   '--atomix-card-hover-bg': 'hover background',
   '--atomix-card-hover-shadow': 'hover shadow',
   '--atomix-card-hover-transform': 'hover transform',
-  
+
   // Part properties - Header
   '--atomix-card-header-padding': 'header padding',
   '--atomix-card-header-bg': 'header background',
   '--atomix-card-header-border-bottom': 'header border bottom',
-  
+
   // Part properties - Body
   '--atomix-card-body-padding': 'body padding',
   '--atomix-card-body-font-size': 'body font size',
-  
+
   // Part properties - Footer
   '--atomix-card-footer-padding': 'footer padding',
   '--atomix-card-footer-bg': 'footer background',
   '--atomix-card-footer-border-top': 'footer border top',
-  
+
   // Part properties - Title
   '--atomix-card-title-font-size': 'title font size',
   '--atomix-card-title-font-weight': 'title font weight',
   '--atomix-card-title-color': 'title color',
   '--atomix-card-title-margin-bottom': 'title margin bottom',
-  
+
   // Part properties - Image
   '--atomix-card-image-border-radius': 'image border radius',
   '--atomix-card-image-max-height': 'image max height',
@@ -105,7 +105,7 @@ export const INPUT_CSS_VARS = {
   '--atomix-input-line-height': 'line height',
   '--atomix-input-height': 'height',
   '--atomix-input-placeholder-color': 'placeholder color',
-  
+
   // State properties
   '--atomix-input-hover-border-color': 'hover border color',
   '--atomix-input-focus-border-color': 'focus border color',
@@ -130,27 +130,27 @@ export const MODAL_CSS_VARS = {
   '--atomix-modal-width': 'width',
   '--atomix-modal-max-width': 'maximum width',
   '--atomix-modal-max-height': 'maximum height',
-  
+
   // Backdrop properties
   '--atomix-modal-backdrop-bg': 'backdrop background',
   '--atomix-modal-backdrop-opacity': 'backdrop opacity',
   '--atomix-modal-backdrop-blur': 'backdrop blur',
-  
+
   // Part properties - Header
   '--atomix-modal-header-padding': 'header padding',
   '--atomix-modal-header-border-bottom': 'header border bottom',
   '--atomix-modal-title-font-size': 'title font size',
   '--atomix-modal-title-font-weight': 'title font weight',
-  
+
   // Part properties - Body
   '--atomix-modal-body-padding': 'body padding',
   '--atomix-modal-body-font-size': 'body font size',
-  
+
   // Part properties - Footer
   '--atomix-modal-footer-padding': 'footer padding',
   '--atomix-modal-footer-border-top': 'footer border top',
   '--atomix-modal-footer-gap': 'footer button gap',
-  
+
   // Part properties - Close button
   '--atomix-modal-close-size': 'close button size',
   '--atomix-modal-close-color': 'close button color',
@@ -171,7 +171,7 @@ export const DROPDOWN_CSS_VARS = {
   '--atomix-dropdown-min-width': 'minimum width',
   '--atomix-dropdown-max-height': 'maximum height',
   '--atomix-dropdown-padding': 'padding',
-  
+
   // Part properties - Item
   '--atomix-dropdown-item-padding': 'item padding',
   '--atomix-dropdown-item-font-size': 'item font size',
@@ -180,11 +180,11 @@ export const DROPDOWN_CSS_VARS = {
   '--atomix-dropdown-item-active-bg': 'item active background',
   '--atomix-dropdown-item-active-color': 'item active color',
   '--atomix-dropdown-item-disabled-opacity': 'item disabled opacity',
-  
+
   // Part properties - Divider
   '--atomix-dropdown-divider-color': 'divider color',
   '--atomix-dropdown-divider-margin': 'divider margin',
-  
+
   // Part properties - Header
   '--atomix-dropdown-header-padding': 'header padding',
   '--atomix-dropdown-header-font-size': 'header font size',
@@ -205,7 +205,7 @@ export const BADGE_CSS_VARS = {
   '--atomix-badge-font-size': 'font size',
   '--atomix-badge-font-weight': 'font weight',
   '--atomix-badge-line-height': 'line height',
-  
+
   // Part properties
   '--atomix-badge-icon-size': 'icon size',
   '--atomix-badge-icon-gap': 'icon spacing',
@@ -219,11 +219,11 @@ export const TABS_CSS_VARS = {
   '--atomix-tabs-bg': 'background color',
   '--atomix-tabs-border-color': 'border color',
   '--atomix-tabs-border-width': 'border width',
-  
+
   // Part properties - Nav
   '--atomix-tabs-nav-gap': 'nav gap',
   '--atomix-tabs-nav-padding': 'nav padding',
-  
+
   // Part properties - Tab button
   '--atomix-tabs-btn-padding-x': 'button horizontal padding',
   '--atomix-tabs-btn-padding-y': 'button vertical padding',
@@ -234,7 +234,7 @@ export const TABS_CSS_VARS = {
   '--atomix-tabs-btn-active-color': 'button active color',
   '--atomix-tabs-btn-active-border-color': 'button active border color',
   '--atomix-tabs-btn-active-border-width': 'button active border width',
-  
+
   // Part properties - Panel
   '--atomix-tabs-panel-padding': 'panel padding',
   '--atomix-tabs-panel-bg': 'panel background',
@@ -248,7 +248,7 @@ export const PROGRESS_CSS_VARS = {
   '--atomix-progress-bg': 'background color',
   '--atomix-progress-height': 'height',
   '--atomix-progress-border-radius': 'border radius',
-  
+
   // Part properties - Bar
   '--atomix-progress-bar-bg': 'bar background',
   '--atomix-progress-bar-transition': 'bar transition',
@@ -268,7 +268,7 @@ export const TOOLTIP_CSS_VARS = {
   '--atomix-tooltip-max-width': 'maximum width',
   '--atomix-tooltip-box-shadow': 'box shadow',
   '--atomix-tooltip-z-index': 'z-index',
-  
+
   // Arrow properties
   '--atomix-tooltip-arrow-size': 'arrow size',
   '--atomix-tooltip-arrow-color': 'arrow color',
@@ -285,7 +285,7 @@ export const CHECKBOX_CSS_VARS = {
   '--atomix-checkbox-border-width': 'border width',
   '--atomix-checkbox-border-radius': 'border radius',
   '--atomix-checkbox-transition': 'transition',
-  
+
   // State properties
   '--atomix-checkbox-checked-bg': 'checked background',
   '--atomix-checkbox-checked-border-color': 'checked border color',
@@ -294,7 +294,7 @@ export const CHECKBOX_CSS_VARS = {
   '--atomix-checkbox-focus-ring-width': 'focus ring width',
   '--atomix-checkbox-disabled-opacity': 'disabled opacity',
   '--atomix-checkbox-invalid-border-color': 'invalid border color',
-  
+
   // Part properties
   '--atomix-checkbox-icon-size': 'icon size',
   '--atomix-checkbox-icon-color': 'icon color',
@@ -313,7 +313,7 @@ export const RADIO_CSS_VARS = {
   '--atomix-radio-border-color': 'border color',
   '--atomix-radio-border-width': 'border width',
   '--atomix-radio-transition': 'transition',
-  
+
   // State properties
   '--atomix-radio-checked-bg': 'checked background',
   '--atomix-radio-checked-border-color': 'checked border color',
@@ -322,7 +322,7 @@ export const RADIO_CSS_VARS = {
   '--atomix-radio-focus-ring-width': 'focus ring width',
   '--atomix-radio-disabled-opacity': 'disabled opacity',
   '--atomix-radio-invalid-border-color': 'invalid border color',
-  
+
   // Part properties
   '--atomix-radio-dot-size': 'dot size',
   '--atomix-radio-dot-color': 'dot color',
@@ -385,6 +385,6 @@ export type ComponentCSSVariables = {
  */
 export function getComponentCSSVars<T extends keyof typeof COMPONENT_CSS_VARS>(
   component: T
-): typeof COMPONENT_CSS_VARS[T] {
+): (typeof COMPONENT_CSS_VARS)[T] {
   return COMPONENT_CSS_VARS[component];
 }

package/src/lib/hooks/__tests__/useComponentCustomization.test.ts

@@ -25,9 +25,7 @@ describe('useComponentCustomization', () => {
     });
 
     it('should handle empty cssVars', () => {
-      const { result } = renderHook(() =>
-        useComponentCustomization('Button', {})
-      );
+      const { result } = renderHook(() => useComponentCustomization('Button', {}));
 
       expect(result.current.cssVars).toEqual({});
     });
@@ -77,9 +75,7 @@ describe('useComponentCustomization', () => {
     });
 
     it('should handle empty parts', () => {
-      const { result } = renderHook(() =>
-        useComponentCustomization('Button', {})
-      );
+      const { result } = renderHook(() => useComponentCustomization('Button', {}));
 
       expect(result.current.parts).toEqual({});
     });

package/src/lib/hooks/index.ts

@@ -1,6 +1,6 @@
 /**
  * Hooks Exports
- * 
+ *
  * Custom React hooks for component customization
  */
 

package/src/lib/hooks/useComponentCustomization.ts

@@ -1,6 +1,6 @@
 /**
  * Component Customization Hook
- * 
+ *
  * Merges theme-level component overrides with component-level props
  * for comprehensive customization support.
  */
@@ -23,7 +23,7 @@ export type ComponentName = keyof ComponentPartsMap;
  */
 export interface CustomizableComponentProps<T extends ComponentName> {
   /** CSS variable overrides */
-  cssVars?: T extends keyof ComponentCSSVariables 
+  cssVars?: T extends keyof ComponentCSSVariables
     ? Partial<Record<ComponentCSSVariables[T], string | number>>
     : Record<string, string | number>;
   /** Part-based styling */
@@ -52,13 +52,13 @@ export interface ComponentCustomization<T extends ComponentName> {
 
 /**
  * Hook to merge theme overrides with component props
- * 
+ *
  * @example
  * function Button(props: ButtonProps) {
  *   const customization = useComponentCustomization('Button', props);
- *   
+ *
  *   return (
- *     <button 
+ *     <button
  *       className={customization.className}
  *       style={customization.style}
  *     >
@@ -84,18 +84,12 @@ export function useComponentCustomization<T extends ComponentName>(
   const parts = useMemo(() => {
     const themeParts = (theme as any)?.components?.[component]?.parts || {};
     const propParts = (props.parts || {}) as Record<string, any>;
-    
+
     const merged: Record<string, any> = {};
-    const allPartNames = new Set([
-      ...Object.keys(themeParts),
-      ...Object.keys(propParts),
-    ]);
-
-    allPartNames.forEach((partName) => {
-      merged[partName] = mergePartStyles(
-        themeParts[partName] as any,
-        propParts[partName] as any
-      );
+    const allPartNames = new Set([...Object.keys(themeParts), ...Object.keys(propParts)]);
+
+    allPartNames.forEach(partName => {
+      merged[partName] = mergePartStyles(themeParts[partName] as any, propParts[partName] as any);
     });
 
     return merged as ComponentPartsMap[T];
@@ -137,7 +131,7 @@ export function useComponentDefaultProps<T extends ComponentName>(
   component: T
 ): Record<string, any> {
   const { theme } = useTheme();
-  
+
   return useMemo(() => {
     return (theme as any)?.components?.[component]?.defaultProps || {};
   }, [theme, component]);

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -1,6 +1,6 @@
 /**
  * Performance Monitoring Hook
- * 
+ *
  * Tracks component render times and re-render counts
  * for performance analysis and optimization
  */
@@ -58,10 +58,10 @@ export interface UsePerformanceMonitorOptions {
 
 /**
  * Hook to monitor component performance
- * 
+ *
  * @param options - Performance monitoring options
  * @returns Performance metrics
- * 
+ *
  * @example
  * ```tsx
  * function MyComponent() {
@@ -69,7 +69,7 @@ export interface UsePerformanceMonitorOptions {
  *     componentName: 'MyComponent',
  *     warnThreshold: 16, // Warn if render takes > 16ms (1 frame)
  *   });
- *   
+ *
  *   return <div>Content</div>;
  * }
  * ```
@@ -77,7 +77,7 @@ export interface UsePerformanceMonitorOptions {
 export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
   const {
     componentName,
-    logToConsole = (typeof process === 'undefined' || process.env?.NODE_ENV === 'development'),
+    logToConsole = typeof process === 'undefined' || process.env?.NODE_ENV === 'development',
     warnThreshold = 16,
     onMetrics,
   } = options;
@@ -114,7 +114,7 @@ export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
     if (renderTime > warnThreshold && logToConsole) {
       console.warn(
         `[Performance] ${componentName} render took ${renderTime.toFixed(2)}ms ` +
-        `(threshold: ${warnThreshold}ms)`
+          `(threshold: ${warnThreshold}ms)`
       );
     }
 
@@ -146,4 +146,3 @@ export function getPerformanceMetrics(): PerformanceMetrics[] {
   // For now, this is a placeholder
   return [];
 }
-

package/src/lib/patterns/__tests__/slots.test.ts

@@ -24,7 +24,7 @@ describe('slots', () => {
     it('should render with component', () => {
       const CustomComponent = ({ text }: { text: string }) =>
         React.createElement('span', null, `Component: ${text}`);
-      
+
       const slot = {
         component: CustomComponent,
       };

package/src/lib/patterns/index.ts

@@ -1,6 +1,6 @@
 /**
  * Pattern System Exports
- * 
+ *
  * Slot and render prop patterns for advanced component customization
  */
 

package/src/lib/patterns/slots.tsx

@@ -1,6 +1,6 @@
 /**
  * Slot Pattern System
- * 
+ *
  * Provides render props and slot-based customization for components.
  * Allows complete control over component rendering and structure.
  */
@@ -21,13 +21,13 @@ export interface SlotProps<T = any> {
 
 /**
  * Render a slot with the given props
- * 
+ *
  * Priority order:
  * 1. render function
  * 2. component
  * 3. children
  * 4. fallback
- * 
+ *
  * @example
  * renderSlot(
  *   { render: (props) => <CustomButton {...props} /> },
@@ -87,11 +87,9 @@ export function isSlot<T>(value: any): value is SlotProps<T> {
  * Merge multiple slot configurations
  * Later slots override earlier ones
  */
-export function mergeSlots<T>(
-  ...slots: Array<SlotProps<T> | undefined>
-): SlotProps<T> | undefined {
+export function mergeSlots<T>(...slots: Array<SlotProps<T> | undefined>): SlotProps<T> | undefined {
   const filtered = slots.filter((s): s is SlotProps<T> => s !== undefined);
-  
+
   if (filtered.length === 0) return undefined;
   if (filtered.length === 1) return filtered[0];
 
@@ -103,10 +101,10 @@ export function mergeSlots<T>(
 
 /**
  * Create a slot wrapper component
- * 
+ *
  * @example
  * const ButtonSlot = createSlotComponent<ButtonSlotProps>('button')
- * 
+ *
  * <ButtonSlot slot={customSlot} {...props}>
  *   Default content
  * </ButtonSlot>
@@ -414,8 +412,5 @@ export function useSlot<T>(
   props: T,
   fallback?: React.ReactNode
 ): React.ReactNode {
-  return React.useMemo(
-    () => renderSlot(slot, props, fallback),
-    [slot, props, fallback]
-  );
+  return React.useMemo(() => renderSlot(slot, props, fallback), [slot, props, fallback]);
 }

package/src/lib/storybook/InteractiveDemo.tsx

@@ -16,13 +16,10 @@ interface InteractiveDemoProps {
   children: React.ReactNode;
 }
 
-export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
-  controls,
-  children,
-}) => {
+export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({ controls, children }) => {
   const renderControl = (control: ControlOption, index: number) => {
     const baseId = `control-${index}`;
-    
+
     switch (control.type) {
       case 'select':
         return (
@@ -33,10 +30,10 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
             <select
               id={baseId}
               value={control.value}
-              onChange={(e) => control.onChange(e.target.value)}
+              onChange={e => control.onChange(e.target.value)}
               className="w-full px-3 py-2 border rounded-lg"
             >
-              {control.options?.map((option) => (
+              {control.options?.map(option => (
                 <option key={option} value={option}>
                   {option}
                 </option>
@@ -44,7 +41,7 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
             </select>
           </div>
         );
-        
+
       case 'slider':
         return (
           <div key={baseId} className="mb-4">
@@ -58,12 +55,12 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
               max={control.max}
               step={control.step}
               value={control.value}
-              onChange={(e) => control.onChange(Number(e.target.value))}
+              onChange={e => control.onChange(Number(e.target.value))}
               className="w-full"
             />
           </div>
         );
-        
+
       case 'text':
         return (
           <div key={baseId} className="mb-4">
@@ -74,12 +71,12 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
               id={baseId}
               type="text"
               value={control.value}
-              onChange={(e) => control.onChange(e.target.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">
@@ -87,14 +84,14 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
               <input
                 type="checkbox"
                 checked={control.value}
-                onChange={(e) => control.onChange(e.target.checked)}
+                onChange={e => control.onChange(e.target.checked)}
                 className="rounded"
               />
               <span className="text-sm font-medium">{control.label}</span>
             </label>
           </div>
         );
-        
+
       default:
         return null;
     }
@@ -105,9 +102,7 @@ export const InteractiveDemo: React.FC<InteractiveDemoProps> = ({
       <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 className="border-t pt-6">{children}</div>
     </div>
   );
-};
+};

package/src/lib/storybook/PreviewContainer.tsx

@@ -33,4 +33,4 @@ export const PreviewContainer: React.FC<PreviewContainerProps> = ({
       </div>
     </div>
   );
-};
+};

package/src/lib/storybook/VariantsGrid.tsx

@@ -12,10 +12,6 @@ export const VariantsGrid: React.FC<VariantsGridProps> = ({
   gap = 'gap-4',
 }) => {
   const gridClass = `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns} ${gap}`;
-  
-  return (
-    <div className={gridClass}>
-      {children}
-    </div>
-  );
-};
+
+  return <div className={gridClass}>{children}</div>;
+};

package/src/lib/storybook/index.ts

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