@shohojdhara/atomix 0.3.10 → 0.3.12

package/src/components/Form/Radio.stories.tsx

@@ -52,6 +52,7 @@ export const Basic: Story = {
     label: 'Option 1',
     name: 'option',
     value: 'option1',
+    onChange: () => {},
   },
 };
 
@@ -62,38 +63,98 @@ export const Checked: Story = {
     name: 'option',
     value: 'option1',
     checked: true,
+    onChange: () => {},
   },
 };
 
 // Radio button group
 export const RadioGroup: Story = {
-  render: (args: any) => (
-    <div className="u-d-flex u-flex-column u-gap-2">
-      <Radio label="Option 1" name="radioGroup" value="option1" checked />
-      <Radio label="Option 2" name="radioGroup" value="option2" />
-      <Radio label="Option 3" name="radioGroup" value="option3" />
-    </div>
-  ),
+  render: (args: any) => {
+    const [selectedValue, setSelectedValue] = React.useState('option1');
+    
+    return (
+      <div className="u-d-flex u-flex-column u-gap-2">
+        <Radio 
+          label="Option 1" 
+          name="radioGroup" 
+          value="option1" 
+          checked={selectedValue === 'option1'}
+          onChange={() => setSelectedValue('option1')}
+        />
+        <Radio 
+          label="Option 2" 
+          name="radioGroup" 
+          value="option2" 
+          checked={selectedValue === 'option2'}
+          onChange={() => setSelectedValue('option2')}
+        />
+        <Radio 
+          label="Option 3" 
+          name="radioGroup" 
+          value="option3" 
+          checked={selectedValue === 'option3'}
+          onChange={() => setSelectedValue('option3')}
+        />
+      </div>
+    );
+  },
 };
 
 // Radio button states
 export const States: Story = {
-  render: (args: any) => (
-    <div className="u-d-flex u-flex-column u-gap-2">
-      <Radio label="Default radio" name="states" value="default" />
-      <Radio label="Checked radio" name="states" value="checked" checked />
-      <Radio label="Disabled radio" name="states" value="disabled" disabled />
-      <Radio
-        label="Disabled and checked radio"
-        name="states"
-        value="disabledChecked"
-        disabled
-        checked
-      />
-      <Radio label="Valid radio" name="states" value="valid" valid checked />
-      <Radio label="Invalid radio" name="states" value="invalid" invalid />
-    </div>
-  ),
+  render: (args: any) => {
+    const [selectedValue, setSelectedValue] = React.useState('default');
+    
+    return (
+      <div className="u-d-flex u-flex-column u-gap-2">
+        <Radio 
+          label="Default radio" 
+          name="states" 
+          value="default" 
+          checked={selectedValue === 'default'}
+          onChange={() => setSelectedValue('default')} 
+        />
+        <Radio 
+          label="Checked radio" 
+          name="states" 
+          value="checked" 
+          checked={selectedValue === 'checked'}
+          onChange={() => setSelectedValue('checked')} 
+        />
+        <Radio 
+          label="Disabled radio" 
+          name="states" 
+          value="disabled" 
+          disabled
+          onChange={() => {}}
+        />
+        <Radio
+          label="Disabled and checked radio"
+          name="states"
+          value="disabledChecked"
+          disabled
+          checked
+          onChange={() => {}}
+        />
+        <Radio 
+          label="Valid radio" 
+          name="states" 
+          value="valid" 
+          valid 
+          checked={selectedValue === 'valid'}
+          onChange={() => setSelectedValue('valid')}
+        />
+        <Radio 
+          label="Invalid radio" 
+          name="states" 
+          value="invalid" 
+          invalid 
+          checked={selectedValue === 'invalid'}
+          onChange={() => setSelectedValue('invalid')}
+        />
+      </div>
+    );
+  },
 };
 
 // Without label
@@ -102,6 +163,7 @@ export const WithoutLabel: Story = {
     name: 'noLabel',
     value: 'noLabel',
     ariaLabel: 'Radio button without visible label',
+    onChange: () => {},
   },
 };
 
@@ -112,6 +174,7 @@ export const Glass: Story = {
     name: 'glass',
     value: 'glass',
     glass: true,
+    onChange: () => {},
   },
   render: (args: any) => (
     <div
@@ -143,6 +206,7 @@ export const GlassCustom: Story = {
       aberrationIntensity: 0.8,
       cornerRadius: 12,
     } as any,
+    onChange: () => {},
   },
   render: (args: any) => (
     <div
@@ -166,91 +230,159 @@ export const GlassCustom: Story = {
 
 // Glass radio group
 export const GlassGroup: Story = {
-  render: () => (
-    <div
-      style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        padding: '2rem',
-        borderRadius: '12px',
-        minHeight: '300px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <div>
-        <h3
-          style={{
-            color: 'white',
-            marginBottom: '2rem',
-            textAlign: 'center',
-            textShadow: '0 2px 4px rgba(0,0,0,0.5)',
-          }}
-        >
-          Glass Radio Group
-        </h3>
-        <div className="u-d-flex u-flex-column u-gap-2">
-          <Radio label="Glass Option 1" name="glassGroup" value="option1" checked glass />
-          <Radio label="Glass Option 2" name="glassGroup" value="option2" glass />
-          <Radio label="Glass Option 3" name="glassGroup" value="option3" glass />
+  render: () => {
+    const [selectedValue, setSelectedValue] = React.useState('option1');
+    
+    return (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          padding: '2rem',
+          borderRadius: '12px',
+          minHeight: '300px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div>
+          <h3
+            style={{
+              color: 'white',
+              marginBottom: '2rem',
+              textAlign: 'center',
+              textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+            }}
+          >
+            Glass Radio Group
+          </h3>
+          <div className="u-d-flex u-flex-column u-gap-2">
+            <Radio 
+              label="Glass Option 1" 
+              name="glassGroup" 
+              value="option1" 
+              checked={selectedValue === 'option1'}
+              onChange={() => setSelectedValue('option1')}
+              glass 
+            />
+            <Radio 
+              label="Glass Option 2" 
+              name="glassGroup" 
+              value="option2" 
+              checked={selectedValue === 'option2'}
+              onChange={() => setSelectedValue('option2')}
+              glass 
+            />
+            <Radio 
+              label="Glass Option 3" 
+              name="glassGroup" 
+              value="option3" 
+              checked={selectedValue === 'option3'}
+              onChange={() => setSelectedValue('option3')}
+              glass 
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
+    );
+  },
 };
 
 // Glass states
 export const GlassStates: Story = {
-  render: () => (
-    <div
-      style={{
-        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
-        backgroundSize: '400% 400%',
-        animation: 'gradient 15s ease infinite',
-        padding: '2rem',
-        borderRadius: '12px',
-        minHeight: '500px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <style>
-        {`
-          @keyframes gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-          }
-        `}
-      </style>
-      <div>
-        <h3
-          style={{
-            color: 'white',
-            marginBottom: '2rem',
-            textAlign: 'center',
-            textShadow: '0 2px 4px rgba(0,0,0,0.5)',
-          }}
-        >
-          Glass Radio States
-        </h3>
-        <div className="u-d-flex u-flex-column u-gap-2">
-          <Radio label="Glass Default" name="glassStates" value="default" glass />
-          <Radio label="Glass Checked" name="glassStates" value="checked" checked glass />
-          <Radio label="Glass Disabled" name="glassStates" value="disabled" disabled glass />
-          <Radio
-            label="Glass Disabled and Checked"
-            name="glassStates"
-            value="disabledChecked"
-            disabled
-            checked
-            glass
-          />
-          <Radio label="Glass Valid" name="glassStates" value="valid" valid checked glass />
-          <Radio label="Glass Invalid" name="glassStates" value="invalid" invalid glass />
+  render: () => {
+    const [selectedValue, setSelectedValue] = React.useState('default');
+    
+    return (
+      <div
+        style={{
+          background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
+          backgroundSize: '400% 400%',
+          animation: 'gradient 15s ease infinite',
+          padding: '2rem',
+          borderRadius: '12px',
+          minHeight: '500px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <style>
+          {`
+            @keyframes gradient {
+              0% { background-position: 0% 50%; }
+              50% { background-position: 100% 50%; }
+              100% { background-position: 0% 50%; }
+            }
+          `}
+        </style>
+        <div>
+          <h3
+            style={{
+              color: 'white',
+              marginBottom: '2rem',
+              textAlign: 'center',
+              textShadow: '0 2px 4px rgba(0,0,0,0.5)',
+            }}
+          >
+            Glass Radio States
+          </h3>
+          <div className="u-d-flex u-flex-column u-gap-2">
+            <Radio 
+              label="Glass Default" 
+              name="glassStates" 
+              value="default" 
+              checked={selectedValue === 'default'}
+              onChange={() => setSelectedValue('default')}
+              glass 
+            />
+            <Radio 
+              label="Glass Checked" 
+              name="glassStates" 
+              value="checked" 
+              checked={selectedValue === 'checked'}
+              onChange={() => setSelectedValue('checked')}
+              glass 
+            />
+            <Radio 
+              label="Glass Disabled" 
+              name="glassStates" 
+              value="disabled" 
+              disabled
+              checked={selectedValue === 'disabled'}
+              onChange={() => setSelectedValue('disabled')}
+              glass 
+            />
+            <Radio
+              label="Glass Disabled and Checked"
+              name="glassStates"
+              value="disabledChecked"
+              disabled
+              checked={selectedValue === 'disabledChecked'}
+              onChange={() => setSelectedValue('disabledChecked')}
+              glass
+            />
+            <Radio 
+              label="Glass Valid" 
+              name="glassStates" 
+              value="valid" 
+              valid 
+              checked={selectedValue === 'valid'}
+              onChange={() => setSelectedValue('valid')}
+              glass 
+            />
+            <Radio 
+              label="Glass Invalid" 
+              name="glassStates" 
+              value="invalid" 
+              invalid 
+              checked={selectedValue === 'invalid'}
+              onChange={() => setSelectedValue('invalid')}
+              glass 
+            />
+          </div>
         </div>
       </div>
-    </div>
-  ),
-};
+    );
+  },
+};

package/src/components/Navigation/Nav/NavDropdown.tsx

@@ -23,7 +23,7 @@ export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement,
     });
 
     const [isActive, setIsActive] = useState(false);
-    const dropdownRef = useRef<HTMLDivElement>(null);
+    const dropdownRef = useRef<HTMLElement>(null);
 
     const dropdownMenuClass = generateDropdownMenuClass({
       alignment,
@@ -82,11 +82,15 @@ export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement,
       </>
     );
 
-    // Create the dropdown/mega menu content
+    const MenuTag = megaMenu ? 'div' : 'ul';
     const menuContent = (
-      <div className={dropdownMenuClass} ref={dropdownRef} aria-hidden={!isActive}>
+      <MenuTag
+        className={dropdownMenuClass}
+        ref={dropdownRef as any}
+        aria-hidden={!isActive}
+      >
         {children}
-      </div>
+      </MenuTag>
     );
 
     return (

package/src/components/Navigation/SideMenu/SideMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, forwardRef, createContext, useContext } from 'react';
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import { SideMenuProps } from '../../../lib/types/components';
 import { useSideMenu } from '../../../lib/composables/useSideMenu';
 import { Icon } from '../../Icon';
@@ -7,25 +7,7 @@ import useForkRef from '../../../lib/utils/useForkRef';
 import SideMenuList from './SideMenuList';
 import SideMenuItem from './SideMenuItem';
 
-// Context for passing LinkComponent to SideMenuItem children
-const SideMenuContext = createContext<{
-  LinkComponent?: React.ComponentType<{
-    href?: string;
-    to?: string;
-    children: React.ReactNode;
-    className?: string;
-    onClick?: (event: React.MouseEvent) => void;
-    target?: string;
-    rel?: string;
-    'aria-disabled'?: boolean;
-    'aria-current'?: string;
-    tabIndex?: number;
-    ref?: React.Ref<HTMLAnchorElement>;
-  }>;
-}>({});
-
-// Hook to use SideMenu context
-export const useSideMenuContext = () => useContext(SideMenuContext);
+
 
 /**
  * SideMenu component provides a collapsible navigation menu with title and menu items.
@@ -235,7 +217,6 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
           id={id ? `${id}-content` : undefined}
           aria-hidden={shouldShowToggler ? !isOpenState : false}
         >
-          <SideMenuContext.Provider value={{ LinkComponent }}>
             <div ref={innerRef} className="c-side-menu__inner">
               {children}
             {menuItems?.map((item, index) => {
@@ -321,7 +302,6 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
               );
             })}
             </div>
-          </SideMenuContext.Provider>
         </div>
       </>
     );

package/src/components/Navigation/SideMenu/SideMenuItem.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import { SideMenuItemProps } from '../../../lib/types/components';
 import { useSideMenuItem } from '../../../lib/composables/useSideMenu';
-import { useSideMenuContext } from './SideMenu';
 
 /**
  * SideMenuItem component represents a single navigation item in a side menu.
@@ -17,7 +16,13 @@ import { useSideMenuContext } from './SideMenu';
  *   Click me
  * </SideMenuItem>
  *
- * // With icon
+ * // With icon and custom link component
+ * import Link from 'next/link';
+ * <SideMenuItem href="/settings" icon={<Icon name="Settings" />} LinkComponent={Link}>
+ *   Settings
+ * </SideMenuItem>
+ *
+ * // With icon and custom link component
  * <SideMenuItem href="/settings" icon={<Icon name="Settings" />}>
  *   Settings
  * </SideMenuItem>
@@ -44,9 +49,6 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
     },
     ref
   ) => {
-    const { LinkComponent: LinkComponentFromContext } = useSideMenuContext();
-    // Use LinkComponent from props first, then fall back to context
-    const LinkComponent = LinkComponentProp ?? LinkComponentFromContext;
     
     const { generateSideMenuItemClass, handleClick } = useSideMenuItem({
       active,
@@ -58,12 +60,8 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
 
     // Render as link if href is provided
     if (href) {
-      // When using a custom LinkComponent (e.g., Next.js Link, React Router Link)
-      if (LinkComponent) {
-        const Component = LinkComponent;
-        
-        // Build link props - support both 'href' (Next.js) and 'to' (React Router)
-        // The Link component will use whichever prop it needs
+      if (LinkComponentProp) {
+        const LinkComp = LinkComponentProp as React.ComponentType<any>;
         const linkProps: {
           ref?: React.Ref<HTMLAnchorElement>;
           className?: string;
@@ -88,16 +86,14 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
           target: target,
           rel: rel,
           tabIndex: disabled ? -1 : 0,
-          // Support both Next.js (href) and React Router (to) Link components
-          // Pass both props - the Link component will use whichever it needs
           ...(disabled ? {} : { href, to: href }),
         };
         
         return (
-          <Component {...linkProps}>
+            <LinkComp {...linkProps}>
             {icon && <span className="c-side-menu__link-icon">{icon}</span>}
             <span className="c-side-menu__link-text">{children}</span>
-          </Component>
+          </LinkComp>
         );
       }
       

package/src/lib/config/index.ts

@@ -192,7 +192,7 @@ export interface AtomixConfig {
      * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
      */
     prefix?: string;
-    
+
     /** 
      * Theme customization (Tailwind-like)
      * 
@@ -207,7 +207,7 @@ export interface AtomixConfig {
          * Your values will override or extend the base tokens.
          */
         extend?: ThemeTokens;
-        
+
         /** 
          * Override the default tokens entirely (advanced)
          * 
@@ -215,7 +215,7 @@ export interface AtomixConfig {
          * Most users should use `extend` instead.
          */
         tokens?: ThemeTokens;
-        
+
         /** 
          * Register custom themes (optional)
          * 
@@ -223,7 +223,7 @@ export interface AtomixConfig {
          */
         themes?: Record<string, ThemeDefinition>;
     };
-    
+
     // Internal configurations (for library development only)
     // These are not needed for external developers
     /** @internal Build configuration (internal use only) */
@@ -270,6 +270,6 @@ export function defineConfig(config: AtomixConfig): AtomixConfig {
 }
 
 // Export loader functions
-export { loadAtomixConfig, resolveConfigPath } from './loader';
+// Loader functions removed to prevent bundling Node.js modules in browser
 
 export default AtomixConfig;

package/src/lib/theme/config/index.ts

@@ -4,7 +4,7 @@
  * Exports for theme configuration loading and validation
  */
 
-export { loadThemeConfig, clearConfigCache, getCachedConfig, reloadThemeConfig } from './loader';
+// Loader exports removed
 export { validateConfig } from './validator';
 export type {
   ConfigLoaderOptions,

package/src/lib/theme/core/createTheme.ts

@@ -66,47 +66,18 @@ export function createTheme(
 
   // Determine tokens based on input
   let tokens: Partial<DesignTokens>;
-  
+
   if (!input) {
-    // Check if we're in a browser environment
-    if (typeof window !== 'undefined') {
-      throw new ThemeError(
-        'No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.',
-        ThemeErrorCode.CONFIG_LOAD_FAILED,
-        { environment: 'browser' }
-      );
-    }
-    
-    // Load from config when no input provided
-    let loadThemeFromConfigSync: any;
-    let loadAtomixConfig: any;
-    
-    try {
-      const configLoaderModule = require('../config/configLoader');
-      const loaderModule = require('../../config/loader');
-      
-      loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync;
-      loadAtomixConfig = loaderModule.loadAtomixConfig;
-      
-      tokens = loadThemeFromConfigSync();
-      
-      // Get prefix from config if needed
-      if (!options?.prefix) {
-        try {
-          const config = loadAtomixConfig({ configPath: 'atomix.config.ts', required: false });
-          options = { ...options, prefix: config?.prefix || 'atomix' };
-        } catch (error) {
-          // If config loading fails, use default prefix
-          options = { ...options, prefix: 'atomix' };
-        }
-      }
-    } catch (error) {
-      throw new ThemeError(
-        'No input provided and config loading is not available in this environment. Please provide tokens explicitly.',
-        ThemeErrorCode.CONFIG_LOAD_FAILED,
-        { error: error instanceof Error ? error.message : String(error) }
-      );
+    // Auto-loading config from file system is removed for browser compatibility.
+    // If no input is provided, we return an empty theme (using defaults only) or user must provide tokens.
+    // This allows createTheme to be isomorphic.
+
+    // Warn in development if no input provided
+    if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
+      console.warn('Atomix: createTheme() called without tokens. Using default tokens only.');
     }
+
+    tokens = {};
   } else {
     // Validate input tokens structure
     if (typeof input !== 'object' || input === null || Array.isArray(input)) {
@@ -116,7 +87,7 @@ export function createTheme(
         { inputType: typeof input }
       );
     }
-    
+
     // Use DesignTokens directly
     tokens = input;
   }

package/src/lib/theme/generators/index.ts

@@ -18,8 +18,5 @@ export {
 
 export { generateCSSVariables as generateCSSVariablesFromTheme } from './generateCSSVariables';
 
-export {
-  saveCSSFile,
-  saveCSSFileSync,
-} from './cssFile';
+