@shohojdhara/atomix 0.3.11 → 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/types/components.ts

@@ -1418,19 +1418,7 @@ export interface SideMenuProps extends BaseComponentProps {
    * <SideMenu LinkComponent={Link} />
    * ```
    */
-  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>;
-  }>;
+  LinkComponent?: React.ElementType;
 
   /**
    * Menu items
@@ -1524,19 +1512,7 @@ export interface SideMenuItemProps extends BaseComponentProps {
    * <SideMenuItem href="/about" LinkComponent={Link}>About</SideMenuItem>
    * ```
    */
-  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>;
-  }>;
+  LinkComponent?: React.ElementType;
 }
 
 /**

package/src/styles/06-components/_components.edge-panel.scss

@@ -416,7 +416,7 @@
   }
 
   // Remove borders for glass variant on all positions
-  &.c-edge-panel--start .c-edge-panel__glass-wrapper {
+  &.c-edge-panel--start .c-edge-panel__glass-content {
     animation: slideInStart 0.3s ease forwards;
 
     &.is-animating-out {
@@ -424,7 +424,7 @@
     }
   }
 
-  &.c-edge-panel--end .c-edge-panel__glass-wrapper {
+  &.c-edge-panel--end .c-edge-panel__glass-content {
     animation: slideInEnd 0.3s ease forwards;
 
     &.is-animating-out {
@@ -432,11 +432,11 @@
     }
   }
 
-  &.c-edge-panel--top .c-edge-panel__glass-wrapper {
+  &.c-edge-panel--top .c-edge-panel__glass-content{
     animation: slideInTop 0.3s ease forwards;
   }
 
-  &.c-edge-panel--bottom .c-edge-panel__glass-wrapper {
+  &.c-edge-panel--bottom .c-edge-panel__glass-content {
     animation: slideInBottom 0.3s ease forwards;
   }
 

package/src/styles/06-components/_components.nav.scss

@@ -92,6 +92,9 @@
     visibility: hidden;
     opacity: 0;
     white-space: nowrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
     @include transition.basic-transition();
 
     &--center {