@shohojdhara/atomix 0.2.3 → 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.stories.tsx

@@ -158,3 +158,116 @@ export const Interactive: StoryObj<typeof Messages> = {
     },
   },
 };
+
+// Glass morphism variant
+export const Glass: Story = {
+  args: {
+    ...Default.args,
+    glass: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Messages component with glass morphism effect applied.',
+      },
+    },
+    backgrounds: {
+      default: 'image',
+      values: [
+        {
+          name: 'image',
+          value:
+            'url(https://images.unsplash.com/photo-1649579037846-bf8c4d19d045?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2070)',
+        },
+      ],
+    },
+  },
+};
+
+// Glass morphism with custom properties
+export const GlassCustom: Story = {
+  args: {
+    ...Default.args,
+    glass: {
+      displacementScale: 30,
+      blurAmount: 0,
+      cornerRadius: 16,
+      elasticity: 0,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Messages component with customized glass morphism effect.',
+      },
+    },
+    backgrounds: {
+      default: 'image',
+      position: 'center',
+      values: [
+        {
+          name: 'image',
+          value:
+            'url(https://images.unsplash.com/photo-1760888102496-8ed280c9fc62?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2532)',
+        },
+      ],
+    },
+  },
+};
+
+// Interactive glass example
+export const InteractiveGlass: StoryObj<typeof Messages> = {
+  render: args => {
+    const [messages, setMessages] = useState<MessageItem[]>(args.messages || []);
+
+    const handleSendMessage = (text: string) => {
+      const newMessage: MessageItem = {
+        id: `msg-${Date.now()}`,
+        text,
+        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+        isSelf: true,
+      };
+
+      setMessages([...messages, newMessage]);
+    };
+
+    return <Messages {...args} messages={messages} onSendMessage={handleSendMessage} />;
+  },
+  args: {
+    width: '800px',
+    bodyHeight: '400px',
+    otherName: 'Meghan',
+    otherAvatar:
+      'https://images.unsplash.com/photo-1648074074225-16189e7ad8c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80',
+    selfAvatar:
+      'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1780&q=80',
+    messages: [
+      {
+        id: '1',
+        text: 'Hi there! How can I help you today?',
+        time: '12:00 PM',
+        isSelf: false,
+      },
+    ],
+    placeholder: 'Type your message here...',
+    glass: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'An interactive glass morphism example where you can send messages and see them appear in the chat.',
+      },
+    },
+    backgrounds: {
+      default: 'image',
+      values: [
+        {
+          name: 'image',
+          value:
+            'url(https://images.unsplash.com/photo-1760709072133-2472415b05f4?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=987)',
+        },
+      ],
+    },
+  },
+};

package/src/components/Messages/Messages.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon } from '../Icon/Icon';
 import { Avatar } from '../Avatar/Avatar';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { MESSAGES } from '../../lib/constants/components';
 import { MessagesProps } from '../../lib/types/components';
 import { useMessages } from '../../lib/composables/useMessages';
@@ -17,9 +18,11 @@ export const Messages: React.FC<MessagesProps> = ({
   onSendMessage,
   placeholder = 'Type a message',
   className = '',
+  style,
   bodyHeight,
   disabled = false,
   id,
+  glass,
 }) => {
   const { inputValue, handleInputChange, handleSubmit, handleKeyDown } = useMessages({
     onSendMessage,
@@ -29,15 +32,18 @@ export const Messages: React.FC<MessagesProps> = ({
   const messagesId = id || `messages-${Math.random().toString(36).substr(2, 9)}`;
   const inputId = `${messagesId}-input`;
 
-  return (
-    <div
-      className={`${MESSAGES.CLASSES.BASE} ${disabled ? 'is-disabled' : ''} ${className}`}
-      style={{ '--atomix-messages-width': width } as React.CSSProperties}
-      id={messagesId}
-      aria-label="Chat messages"
-      role="log"
-      aria-live="polite"
-    >
+  // Default glass settings for messages
+  const defaultGlassProps = {
+    displacementScale: 150,
+    cornerRadius: 12,
+    elasticity: 0,
+    aberrationIntensity: 2,
+  };
+
+  const messagesClasses = `${MESSAGES.CLASSES.BASE} ${glass ? 'c-messages--glass' : ''} ${disabled ? 'is-disabled' : ''} ${className}`;
+
+  const messagesContent = (
+    <>
       <div
         className={MESSAGES.CLASSES.BODY}
         style={
@@ -161,6 +167,43 @@ export const Messages: React.FC<MessagesProps> = ({
           <Icon name="PaperPlaneTilt" aria-hidden="true" size={24} />
         </button>
       </form>
+    </>
+  );
+
+  if (glass) {
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <div
+        className={messagesClasses}
+        style={{ '--atomix-messages-width': width, ...style } as React.CSSProperties}
+        id={messagesId}
+        aria-label="Chat messages"
+        role="log"
+        aria-live="polite"
+      >
+        <AtomixGlass {...glassProps}>
+          <div
+            className="c-messages__glass-content"
+            style={{ borderRadius: glassProps.cornerRadius }}
+          >
+            {messagesContent}
+          </div>
+        </AtomixGlass>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={messagesClasses}
+      style={{ '--atomix-messages-width': width, ...style } as React.CSSProperties}
+      id={messagesId}
+      aria-label="Chat messages"
+      role="log"
+      aria-live="polite"
+    >
+      {messagesContent}
     </div>
   );
 };

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',
-          }}
+          glass={
+            {
+              displacementScale: 120,
+              blurAmount: 3,
+              saturation: 200,
+              aberrationIntensity: 2,
+              cornerRadius: 20,
+              mode: 'polar',
+            } as any
+          }
           footer={
             <>
               <div
@@ -392,20 +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: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-        minHeight: '100vh',
-        padding: '2rem'
-      }}>
+    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>
     ),
@@ -500,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>
     ),