@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/components/Form/Textarea.tsx

@@ -6,99 +6,101 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Textarea - A component for multiline text input
  */
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder,
-  className = '',
-  disabled = false,
-  required = false,
-  readOnly = false,
-  id,
-  name,
-  rows = 4,
-  cols,
-  maxLength,
-  minLength,
-  size = 'md',
-  variant,
-  invalid = false,
-  valid = false,
-  autoFocus = false,
-  ariaLabel,
-  ariaDescribedBy,
-  glass,
-}, ref) => {
-  const { generateTextareaClass } = useTextarea({
-    size,
-    variant,
-    disabled,
-    invalid,
-    valid,
-  });
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      value,
+      onChange,
+      onBlur,
+      onFocus,
+      placeholder,
+      className = '',
+      style,
+      disabled = false,
+      required = false,
+      readOnly = false,
+      id,
+      name,
+      rows = 4,
+      cols,
+      maxLength,
+      minLength,
+      size = 'md',
+      variant,
+      invalid = false,
+      valid = false,
+      autoFocus = false,
+      ariaLabel,
+      ariaDescribedBy,
+      glass,
+    },
+    ref
+  ) => {
+    const { generateTextareaClass } = useTextarea({
+      size,
+      variant,
+      disabled,
+      invalid,
+      valid,
+    });
 
-  const textareaClass = generateTextareaClass({
-    className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
-    size,
-    variant,
-    disabled,
-    invalid,
-    valid,
-  });
+    const textareaClass = generateTextareaClass({
+      className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
+      size,
+      variant,
+      disabled,
+      invalid,
+      valid,
+    });
 
-  // Custom styles for glass effect
-  const glassStyles = glass ? {} : {};
+    // Custom styles for glass effect
+    const glassStyles = glass ? {} : {};
 
-  const textareaElement = (
-    <textarea
-      ref={ref}
-      className={textareaClass}
-      value={value}
-      onChange={onChange}
-      onBlur={onBlur}
-      onFocus={onFocus}
-      placeholder={placeholder}
-      disabled={disabled}
-      required={required}
-      readOnly={readOnly}
-      id={id}
-      name={name}
-      rows={rows}
-      cols={cols}
-      maxLength={maxLength}
-      minLength={minLength}
-      autoFocus={autoFocus}
-      aria-label={ariaLabel}
-      aria-describedby={ariaDescribedBy}
-      aria-invalid={invalid}
-      style={glass ? glassStyles : undefined}
-    />
-  );
+    const textareaElement = (
+      <textarea
+        ref={ref}
+        className={textareaClass}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        placeholder={placeholder}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        id={id}
+        name={name}
+        rows={rows}
+        cols={cols}
+        maxLength={maxLength}
+        minLength={minLength}
+        autoFocus={autoFocus}
+        aria-label={ariaLabel}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={invalid}
+        style={glass ? { ...glassStyles, ...style } : style}
+      />
+    );
 
-  if (glass) {
-    // Default glass settings for textareas
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 180,
-      aberrationIntensity: 1,
-      cornerRadius: 8,
-      mode: 'shader' as const,
-    };
+    if (glass) {
+      // Default glass settings for textareas
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 180,
+        aberrationIntensity: 1,
+        cornerRadius: 8,
+        mode: 'shader' as const,
+      };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {textareaElement}
-      </AtomixGlass>
-    );
-  }
+      return <AtomixGlass {...glassProps}>{textareaElement}</AtomixGlass>;
+    }
 
-  return textareaElement;
-});
+    return textareaElement;
+  }
+);
 
 Textarea.displayName = 'Textarea';
 

package/src/components/Hero/Hero.stories.tsx

@@ -178,7 +178,7 @@ export const WithCustomGlassEffect: Story = {
       aberrationIntensity: 0,
       cornerRadius: 45,
       mode: 'standard',
-      elasticity: .2,
+      elasticity: 0.2,
       showBorderEffects: true,
       showHoverEffects: true,
       onClick: () => {
@@ -190,7 +190,6 @@ export const WithCustomGlassEffect: Story = {
   },
 };
 
-
 /**
  * Hero with left-aligned content and image on right
  */
@@ -345,4 +344,4 @@ export const VideoBackgroundWithImage: Story = {
     imageSrc: 'https://picsum.photos/id/180/712/500',
     imageAlt: 'Product showcase',
   },
-};
+};

package/src/components/Hero/Hero.tsx

@@ -19,6 +19,7 @@ export const Hero: React.FC<HeroProps> = ({
   contentColSize = 5,
   contentWidth,
   className = '',
+  style,
   parallax = false,
   parallaxIntensity = 0.5,
   videoBackground,
@@ -54,11 +55,10 @@ export const Hero: React.FC<HeroProps> = ({
   });
 
   // Create custom style for hero element with content width if provided
-  const heroStyle: React.CSSProperties | undefined = contentWidth
-    ? ({
-        '--atomix-hero-content-width': contentWidth,
-      } as React.CSSProperties)
-    : undefined;
+  const heroStyle: React.CSSProperties | undefined = {
+    ...(contentWidth ? { '--atomix-hero-content-width': contentWidth } : {}),
+    ...style,
+  };
 
   const renderVideoBackground = () => {
     if (!videoBackground) return null;
@@ -128,7 +128,6 @@ export const Hero: React.FC<HeroProps> = ({
               cornerRadius={8}
               overLight={false}
               mode="standard"
-              
             >
               <div className="u-p-4">
                 {subtitle && <p className={HERO.SELECTORS.SUBTITLE.replace('.', '')}>{subtitle}</p>}

package/src/components/Icon/Icon.tsx

@@ -36,6 +36,11 @@ export interface IconProps {
    */
   className?: string;
 
+  /**
+   * Custom style
+   */
+  style?: React.CSSProperties;
+
   /**
    * Alt text for accessibility
    */
@@ -60,6 +65,7 @@ export const Icon: React.FC<IconProps> = ({
   weight = 'regular',
   color,
   className = '',
+  style,
   alt,
 }) => {
   // Get the icon component from Phosphor
@@ -76,7 +82,12 @@ export const Icon: React.FC<IconProps> = ({
   const pixelSize = typeof size === 'string' ? sizeMap[size as IconSize] || 24 : size;
 
   return (
-    <span className={`c-icon c-icon--${size} ${className}`} aria-hidden={!alt} title={alt}>
+    <span
+      className={`c-icon c-icon--${size} ${className}`}
+      style={style}
+      aria-hidden={!alt}
+      title={alt}
+    >
       <IconComponent size={pixelSize} weight={weight} color={color} aria-label={alt} />
     </span>
   );

package/src/components/List/List.tsx

@@ -6,6 +6,7 @@ export const List: React.FC<ListProps> = ({
   children,
   variant = 'default',
   className = '',
+  style,
   ...props
 }) => {
   // Generate CSS classes
@@ -17,7 +18,7 @@ export const List: React.FC<ListProps> = ({
   const ListElement = ['number', 'text'].includes(variant) ? 'ol' : 'ul';
 
   return (
-    <ListElement className={listClasses} {...props}>
+    <ListElement className={listClasses} style={style} {...props}>
       {React.Children.map(children, child => {
         if (React.isValidElement(child)) {
           return <li className="c-list__item">{child}</li>;

package/src/components/List/ListGroup.tsx

@@ -7,6 +7,7 @@ import { List } from './List';
 export const ListGroup: React.FC<ListGroupProps> = ({
   children,
   className = '',
+  style,
   variant = 'default',
 }) => {
   // Generate CSS classes
@@ -18,7 +19,7 @@ export const ListGroup: React.FC<ListGroupProps> = ({
   ) as React.ReactElement[];
 
   return (
-    <div className={listGroupClasses}>
+    <div className={listGroupClasses} style={style}>
       {validLists.map((child, index) => {
         const childProps = child.props as any;
         return React.cloneElement(child as React.ReactElement<any>, {

package/src/components/Messages/Messages.tsx

@@ -18,6 +18,7 @@ export const Messages: React.FC<MessagesProps> = ({
   onSendMessage,
   placeholder = 'Type a message',
   className = '',
+  style,
   bodyHeight,
   disabled = false,
   id,
@@ -175,7 +176,7 @@ export const Messages: React.FC<MessagesProps> = ({
     return (
       <div
         className={messagesClasses}
-        style={{ '--atomix-messages-width': width } as React.CSSProperties}
+        style={{ '--atomix-messages-width': width, ...style } as React.CSSProperties}
         id={messagesId}
         aria-label="Chat messages"
         role="log"
@@ -196,7 +197,7 @@ export const Messages: React.FC<MessagesProps> = ({
   return (
     <div
       className={messagesClasses}
-      style={{ '--atomix-messages-width': width } as React.CSSProperties}
+      style={{ '--atomix-messages-width': width, ...style } as React.CSSProperties}
       id={messagesId}
       aria-label="Chat messages"
       role="log"

package/src/components/Modal/Modal.stories.tsx

@@ -313,23 +313,27 @@ export const GlassModal: Story = {
           glass={true}
         >
           <p>
-            This modal demonstrates the glass morphism effect with a translucent, frosted appearance.
-            The glass effect creates a modern, elegant look that works well over colorful backgrounds.
+            This modal demonstrates the glass morphism effect with a translucent, frosted
+            appearance. The glass effect creates a modern, elegant look that works well over
+            colorful backgrounds.
           </p>
           <p>
-            The glass effect includes displacement, blur, and chromatic aberration for a premium feel.
+            The glass effect includes displacement, blur, and chromatic aberration for a premium
+            feel.
           </p>
         </Modal>
       </>
     );
   },
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -359,14 +363,16 @@ export const GlassModalCustom: Story = {
           onOpenChange={setIsOpen}
           title="Custom Glass Modal"
           subtitle="This modal has customized glass effect settings."
-          glass={{
-            displacementScale: 120,
-            blurAmount: 3,
-            saturation: 200,
-            aberrationIntensity: 2,
-            cornerRadius: 20,
-            mode: 'polar',
-          }as any}
+          glass={
+            {
+              displacementScale: 120,
+              blurAmount: 3,
+              saturation: 200,
+              aberrationIntensity: 2,
+              cornerRadius: 20,
+              mode: 'polar',
+            } as any
+          }
           footer={
             <>
               <div
@@ -392,22 +398,26 @@ export const GlassModalCustom: Story = {
           }
         >
           <p>
-            This modal uses custom glass settings with enhanced displacement, blur, and chromatic aberration.
-            The polar mode creates a different visual effect compared to the standard shader mode.
+            This modal uses custom glass settings with enhanced displacement, blur, and chromatic
+            aberration. The polar mode creates a different visual effect compared to the standard
+            shader mode.
           </p>
         </Modal>
       </>
     );
   },
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'url(https://images.unsplash.com/photo-1744872665943-fd335d371059?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)', 
-        height: '100vh',
-        width: '100vw',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }}>
+    Story => (
+      <div
+        style={{
+          background:
+            'url(https://images.unsplash.com/photo-1744872665943-fd335d371059?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+          height: '100vh',
+          width: '100vw',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }}
+      >
         <Story />
       </div>
     ),
@@ -502,18 +512,22 @@ export const GlassModalSizes: Story = {
           }
         >
           <p>This is a {size.toUpperCase()} sized glass modal.</p>
-          <p>The glass effect adapts to different modal sizes while maintaining its visual appeal.</p>
+          <p>
+            The glass effect adapts to different modal sizes while maintaining its visual appeal.
+          </p>
         </Modal>
       </div>
     );
   },
   decorators: [
-    (Story) => (
-      <div style={{ 
-        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
         <Story />
       </div>
     ),

package/src/components/Modal/Modal.tsx

@@ -88,6 +88,7 @@ export const Modal: React.FC<ModalProps> = ({
   backdrop = true,
   keyboard = true,
   className = '',
+  style,
   closeButton = true,
   footer,
   glass,
@@ -184,7 +185,7 @@ export const Modal: React.FC<ModalProps> = ({
     <div
       ref={modalRef}
       className={modalClasses}
-      style={{ display: isOpenState ? 'block' : 'none' }}
+      style={{ display: isOpenState ? 'block' : 'none', ...style }}
       role="dialog"
       aria-modal="true"
       aria-hidden={!isOpenState}
@@ -192,28 +193,23 @@ export const Modal: React.FC<ModalProps> = ({
     >
       <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />
       <div ref={dialogRef} className="c-modal__dialog">
-        {glass ? (
-          // Default glass settings for modals
-          (() => {
-            const defaultGlassProps = {
-              displacementScale: 100,
-              blurAmount: 2,
-              aberrationIntensity: 1,
-              cornerRadius: 12,
-              mode: 'shader' as const,
-            };
-
-            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-            return (
-              <AtomixGlass {...glassProps} >
-                {modalContent}
-              </AtomixGlass>
-            );
-          })()
-        ) : (
-          modalContent
-        )}
+        {glass
+          ? // Default glass settings for modals
+            (() => {
+              const defaultGlassProps = {
+                displacementScale: 100,
+                blurAmount: 2,
+                aberrationIntensity: 1,
+                cornerRadius: 12,
+                mode: 'shader' as const,
+              };
+
+              const glassProps =
+                glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+              return <AtomixGlass {...glassProps}>{modalContent}</AtomixGlass>;
+            })()
+          : modalContent}
       </div>
     </div>
   );

package/src/components/Navigation/Menu/MegaMenu.tsx

@@ -8,9 +8,9 @@ import { Icon } from '../../Icon/Icon';
 import { mapIconName } from './Menu'; // Import the mapping function
 
 export const MegaMenu: React.FC<MegaMenuProps> = forwardRef<HTMLDivElement, MegaMenuProps>(
-  ({ children, className = '', disabled = false }, ref) => {
+  ({ children, className = '', style, disabled = false }, ref) => {
     return (
-      <div ref={ref} className={`c-menu c-menu--mega ${className}`}>
+      <div ref={ref} className={`c-menu c-menu--mega ${className}`} style={style}>
         <div className="c-menu__container">
           <div className="c-menu__grid o-grid">
             {React.Children.map(children, child => {

package/src/components/Navigation/Menu/Menu.tsx

@@ -3,9 +3,9 @@ import { MenuProps, MenuItemProps } from '../../../lib/types/components';
 import { Icon } from '../../Icon/Icon';
 
 export const Menu: React.FC<MenuProps> = forwardRef<HTMLDivElement, MenuProps>(
-  ({ children, className = '', disabled = false }, ref) => {
+  ({ children, className = '', style, disabled = false }, ref) => {
     return (
-      <div ref={ref} className={`c-menu ${className}`}>
+      <div ref={ref} className={`c-menu ${className}`} style={style}>
         <ul className="c-menu__list" role="menu">
           {React.Children.map(children, child => {
             if (React.isValidElement(child)) {

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

@@ -28,7 +28,12 @@ export const Nav = forwardRef<HTMLUListElement, NavProps>(
     const navClass = generateNavClass({ alignment, variant, className });
 
     const navContent = (
-      <ul ref={ref} className={navClass + (glass ? ' c-nav--glass' : '')} role="menubar" aria-orientation="horizontal">
+      <ul
+        ref={ref}
+        className={navClass + (glass ? ' c-nav--glass' : '')}
+        role="menubar"
+        aria-orientation="horizontal"
+      >
         {React.Children.map(children, child => {
           if (React.isValidElement(child)) {
             const childProps = child.props as any;

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

@@ -6,7 +6,15 @@ import { Icon } from '../../Icon/Icon';
 
 export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement, NavDropdownProps>(
   (
-    { title, children, alignment = 'start', megaMenu = false, className = '', disabled = false },
+    {
+      title,
+      children,
+      alignment = 'start',
+      megaMenu = false,
+      className = '',
+      style,
+      disabled = false,
+    },
     ref
   ) => {
     const { generateDropdownMenuClass, getIconName } = useNavDropdown({
@@ -90,6 +98,7 @@ export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement,
         href="#"
         onClick={handleToggle}
         aria-expanded={isActive}
+        style={style}
       >
         {titleWithIcon}
         {menuContent}

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -30,6 +30,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
       expanded,
       onToggle,
       className = '',
+      style,
       disabled = false,
       backdrop = false,
       closeOnOutsideClick = true,
@@ -159,6 +160,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
             left: 0,
             right: 0,
             top: 0,
+            zIndex: 1000,
           }}
         >
           <nav
@@ -166,6 +168,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
             className={navbarClass + ' c-navbar--glass'}
             aria-label={ariaLabel}
             id={id}
+            style={style}
           >
             {navbarContent}
           </nav>
@@ -174,7 +177,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
     }
 
     return (
-      <nav ref={ref} className={navbarClass} aria-label={ariaLabel} id={id}>
+      <nav ref={ref} className={navbarClass} aria-label={ariaLabel} id={id} style={style}>
         {navbarContent}
       </nav>
     );

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

@@ -30,6 +30,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       onToggle,
       collapsible = true,
       className = '',
+      style,
       disabled = false,
       toggleIcon,
       id,
@@ -105,7 +106,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
       return (
         <AtomixGlass {...glassProps}>
-          <div ref={ref} className={sideMenuClass + ' c-side-menu--glass'} id={id}>
+          <div ref={ref} className={sideMenuClass + ' c-side-menu--glass'} id={id} style={style}>
             {sideMenuContent}
           </div>
         </AtomixGlass>
@@ -113,7 +114,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
     }
 
     return (
-      <div ref={ref} className={sideMenuClass} id={id}>
+      <div ref={ref} className={sideMenuClass} id={id} style={style}>
         {sideMenuContent}
       </div>
     );