@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Progress/Progress.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import { ProgressProps } from '../../lib/types/components';
 import { useProgress } from '../../lib/composables/useProgress';
 import { PROGRESS } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
   (
@@ -10,8 +11,10 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
       variant = 'primary',
       size = 'md',
       className = '',
+      style,
       disabled = false,
       ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL,
+      glass,
     },
     ref
   ) => {
@@ -22,11 +25,11 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
       className,
     });
 
-    return (
+    const progressContent = (
       <div
         ref={ref}
-        className={progressClasses}
-        style={progressStyle}
+        className={progressClasses + (glass ? ' c-progress--glass' : '')}
+        style={{ ...progressStyle, ...style }}
         role="progressbar"
         aria-valuemin={0}
         aria-valuemax={100}
@@ -37,6 +40,19 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
         <div className={PROGRESS.CLASSES.BAR}></div>
       </div>
     );
+
+    if (glass) {
+      const defaultGlassProps = {
+        displacementScale: 30,
+        blurAmount: 0.5,
+        cornerRadius: 8,
+        mode: 'shader' as const,
+      };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return <AtomixGlass {...glassProps}>{progressContent}</AtomixGlass>;
+    }
+
+    return progressContent;
   }
 );
 

package/src/components/Rating/Rating.stories.tsx

@@ -121,7 +121,7 @@ export const Glass = {
     size: 'md',
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -147,10 +147,11 @@ export const GlassInteractive = {
     size: 'md',
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '3rem',
@@ -162,7 +163,9 @@ export const GlassInteractive = {
       }}
     >
       <div style={{ textAlign: 'center' }}>
-        <h3 style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}
+        >
           Interactive Glass Rating
         </h3>
         <Rating {...args} />
@@ -187,7 +190,7 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
@@ -211,7 +214,9 @@ export const GlassCustom = {
         `}
       </style>
       <div style={{ textAlign: 'center' }}>
-        <h3 style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}>
+        <h3
+          style={{ color: 'white', marginBottom: '1rem', textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}
+        >
           Custom Glass Rating
         </h3>
         <Rating {...args} />

package/src/components/Rating/Rating.tsx

@@ -32,6 +32,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
       color,
       onChange,
       className = '',
+      style,
       label,
       id,
       useVanillaJS = false,
@@ -269,6 +270,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         className={ratingClasses}
         ref={useForkRef(internalRef, ref)}
         id={id}
+        style={style}
         data-readonly={readOnly ? 'true' : 'false'}
         onMouseLeave={handleMouseLeave}
         role={readOnly ? 'img' : 'radiogroup'}
@@ -292,11 +294,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
 
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-      return (
-        <AtomixGlass {...glassProps}>
-          {ratingContent}
-        </AtomixGlass>
-      );
+      return <AtomixGlass {...glassProps}>{ratingContent}</AtomixGlass>;
     }
 
     return ratingContent;

package/src/components/River/River.tsx

@@ -19,6 +19,7 @@ export const River: React.FC<RiverProps> = ({
   showOverlay = true,
   contentWidth,
   className = '',
+  style,
 }) => {
   const {
     generateRiverClassNames,
@@ -41,11 +42,10 @@ export const River: React.FC<RiverProps> = ({
   });
 
   // Create custom style for river element with content width if provided
-  const riverStyle: React.CSSProperties | undefined = contentWidth
-    ? ({
-        [RIVER.ATTRIBUTES.CONTENT_WIDTH]: contentWidth,
-      } as React.CSSProperties)
-    : undefined;
+  const riverStyle: React.CSSProperties | undefined = {
+    ...(contentWidth ? { [RIVER.ATTRIBUTES.CONTENT_WIDTH]: contentWidth } : {}),
+    ...style,
+  };
 
   const renderBackground = () => {
     if (!hasBackgroundImage) return null;

package/src/components/SectionIntro/SectionIntro.tsx

@@ -67,6 +67,11 @@ export interface SectionIntroProps {
    * Additional CSS class
    */
   className?: string;
+
+  /**
+   * Custom style for the section intro
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -85,6 +90,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
   size = 'md',
   skeleton = false,
   className = '',
+  style,
 }) => {
   const sectionIntroRef = useRef<HTMLDivElement>(null);
   const sectionIntroInstance = useRef<any>(null);
@@ -116,7 +122,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
   // Render skeleton version
   if (skeleton) {
     return (
-      <div className={sectionIntroClasses} ref={sectionIntroRef}>
+      <div className={sectionIntroClasses} ref={sectionIntroRef} style={style}>
         <div className="c-sectionintro__container">
           {label && (
             <div className="c-sectionintro__label">
@@ -162,7 +168,7 @@ export const SectionIntro: React.FC<SectionIntroProps> = ({
 
   // Render normal version
   return (
-    <div className={sectionIntroClasses} ref={sectionIntroRef}>
+    <div className={sectionIntroClasses} ref={sectionIntroRef} style={style}>
       {renderBackground()}
       {label && <div className="c-sectionintro__label">{label}</div>}
       <h2 className="c-sectionintro__title">{title}</h2>

package/src/components/Slider/Slider.stories.tsx

@@ -799,10 +799,10 @@ export const Autoplay: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Slider with automatic playback that cycles through slides every 3 seconds.'
-      }
-    }
-  }
+        story: 'Slider with automatic playback that cycles through slides every 3 seconds.',
+      },
+    },
+  },
 };
 
 export const Vertical: Story = {

package/src/components/Slider/Slider.tsx

@@ -20,13 +20,14 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     navigation,
     pagination,
     className,
+    style,
     onSlideChange,
     ...rest
   } = props;
 
   if (!slides || slides.length === 0) {
     return (
-      <div className="c-slider c-slider--empty" style={{ height, width }}>
+      <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
         <div className="c-slider__empty-message">No slides available</div>
       </div>
     );
@@ -92,7 +93,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
         overflow: 'hidden',
         position: 'relative',
         cursor: grabCursor && !touching ? 'grab' : touching ? 'grabbing' : 'default',
-        ...(rest as any).style,
+        ...style,
       }}
       onTouchStart={handleTouchStart}
       onTouchMove={handleTouchMove}
@@ -224,4 +225,4 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
   );
 });
 
-Slider.displayName = 'Slider';
+Slider.displayName = 'Slider';

package/src/components/Spinner/Spinner.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Spinner: React.FC<SpinnerProps> = ({
   size = 'md',
   variant = 'primary',
   fullscreen = false,
   className = '',
+  style,
+  glass,
 }) => {
   const { generateSpinnerClass } = useSpinner({
     size,
@@ -19,14 +22,27 @@ export const Spinner: React.FC<SpinnerProps> = ({
     size,
     variant,
     fullscreen,
-    className,
+    className: `${className} ${glass ? 'c-spinner--glass' : ''}`.trim(),
   });
 
-  return (
-    <div className={spinnerClass} role="status">
+  const spinnerContent = (
+    <div className={spinnerClass} style={style} role="status">
       <span className={SPINNER.VISUALLY_HIDDEN}>Loading...</span>
     </div>
   );
+
+  if (glass) {
+    const defaultGlassProps = {
+      displacementScale: 20,
+      blurAmount: 1,
+      cornerRadius: 999,
+      mode: 'shader' as const,
+    };
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    return <AtomixGlass {...glassProps}>{spinnerContent}</AtomixGlass>;
+  }
+
+  return spinnerContent;
 };
 
 export type { SpinnerProps };

package/src/components/Steps/Steps.stories.tsx

@@ -174,7 +174,7 @@ export const Glass = {
     vertical: false,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -206,10 +206,11 @@ export const GlassVertical = {
     vertical: true,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '2rem',
@@ -246,7 +247,7 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',

package/src/components/Steps/Steps.tsx

@@ -46,6 +46,11 @@ export interface StepsProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Glass morphism effect for the steps component
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -62,6 +67,7 @@ export const Steps: React.FC<StepsProps> = ({
   vertical = false,
   onStepChange,
   className = '',
+  style,
   glass,
 }) => {
   const [currentStep, setCurrentStep] = useState(activeIndex);
@@ -98,6 +104,7 @@ export const Steps: React.FC<StepsProps> = ({
   const stepsContent = (
     <div
       className={`c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ''} ${className}`}
+      style={style}
       role="navigation"
       aria-label="Steps"
     >
@@ -131,11 +138,7 @@ export const Steps: React.FC<StepsProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {stepsContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{stepsContent}</AtomixGlass>;
   }
 
   return stepsContent;

package/src/components/Tab/Tab.stories.tsx

@@ -151,7 +151,7 @@ export const Glass = {
     activeIndex: 0,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -195,10 +195,11 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1519904981063-b0cf448d479e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1519904981063-b0cf448d479e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '2rem',

package/src/components/Tab/Tab.tsx

@@ -46,6 +46,11 @@ export interface TabProps {
    */
   className?: string;
 
+  /**
+   * Custom style for the tab component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Glass morphism effect for the tab component
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -61,6 +66,7 @@ export const Tab: React.FC<TabProps> = ({
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
   className = '',
+  style,
   glass,
 }) => {
   const [currentTab, setCurrentTab] = useState(activeIndex);
@@ -74,7 +80,7 @@ export const Tab: React.FC<TabProps> = ({
   };
 
   const tabContent = (
-    <div className={`c-tabs js-atomix-tab ${className}`}>
+    <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
       <ul className="c-tabs__nav">
         {items.map((item, index) => (
           <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
@@ -127,11 +133,7 @@ export const Tab: React.FC<TabProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {tabContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{tabContent}</AtomixGlass>;
   }
 
   return tabContent;

package/src/components/Testimonial/Testimonial.tsx

@@ -48,6 +48,11 @@ export interface TestimonialProps {
    * Additional CSS class
    */
   className?: string;
+
+  /**
+   * Custom style for the testimonial
+   */
+  style?: React.CSSProperties;
 }
 
 /**
@@ -59,6 +64,7 @@ export const Testimonial: React.FC<TestimonialProps> = ({
   size = '',
   skeleton = false,
   className = '',
+  style,
 }) => {
   const testimonialRef = useRef<HTMLDivElement>(null);
   const testimonialInstance = useRef<any>(null);
@@ -88,7 +94,7 @@ export const Testimonial: React.FC<TestimonialProps> = ({
   // Render skeleton version
   if (skeleton) {
     return (
-      <div className={testimonialClasses} ref={testimonialRef}>
+      <div className={testimonialClasses} ref={testimonialRef} style={style}>
         <blockquote className="c-testimonial__quote">
           <span className="c-skeleton"></span>
           <span className="c-skeleton"></span>
@@ -112,7 +118,7 @@ export const Testimonial: React.FC<TestimonialProps> = ({
 
   // Render normal version
   return (
-    <div className={testimonialClasses} ref={testimonialRef}>
+    <div className={testimonialClasses} ref={testimonialRef} style={style}>
       <blockquote className="c-testimonial__quote">{quote}</blockquote>
       {author && (
         <div className="c-testimonial__author">

package/src/components/Todo/Todo.tsx

@@ -15,6 +15,7 @@ export const Todo: React.FC<TodoProps> = ({
   placeholder = 'Add a new todo',
   showCompleted = true,
   className = '',
+  style,
   disabled = false,
 }) => {
   const { inputText, setInputText, addTodo, generateTodoClasses, generateItemClasses } = useTodo({
@@ -89,7 +90,7 @@ export const Todo: React.FC<TodoProps> = ({
   const todoClass = generateTodoClasses({ size, className, disabled });
 
   return (
-    <div className={todoClass}>
+    <div className={todoClass} style={style}>
       {title && <h2 className="c-todo__title">{title}</h2>}
 
       <form className="c-todo__form" onSubmit={handleFormSubmit}>

package/src/components/Toggle/Toggle.stories.tsx

@@ -58,7 +58,7 @@ export const Glass = {
     disabled: false,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -81,10 +81,11 @@ export const GlassOn = {
     disabled: false,
     glass: true,
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
-        background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
+        background:
+          'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)',
         backgroundSize: 'cover',
         backgroundPosition: 'center',
         padding: '3rem',
@@ -112,7 +113,7 @@ export const GlassCustom = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: (args: any) => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',

package/src/components/Toggle/Toggle.tsx

@@ -29,6 +29,11 @@ export interface ToggleProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Glass morphism effect for the toggle
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
@@ -45,6 +50,7 @@ export const Toggle: React.FC<ToggleProps> = ({
   onToggleOff,
   disabled = false,
   className = '',
+  style,
   glass,
 }) => {
   const [isOn, setIsOn] = useState(initialOn);
@@ -76,6 +82,7 @@ export const Toggle: React.FC<ToggleProps> = ({
   const toggleContent = (
     <div
       className={`c-toggle ${isOn ? TOGGLE.CLASSES.IS_ON : ''} ${disabled ? 'is-disabled' : ''} ${className}`}
+      style={style}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       role="switch"
@@ -100,11 +107,7 @@ export const Toggle: React.FC<ToggleProps> = ({
 
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return (
-      <AtomixGlass {...glassProps}>
-        {toggleContent}
-      </AtomixGlass>
-    );
+    return <AtomixGlass {...glassProps}>{toggleContent}</AtomixGlass>;
   }
 
   return toggleContent;

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -129,12 +129,14 @@ GlassTooltip.args = {
   glass: true,
 };
 GlassTooltip.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>
   ),
@@ -158,12 +160,14 @@ GlassTooltipCustom.args = {
   },
 };
 GlassTooltipCustom.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),
@@ -180,12 +184,14 @@ GlassTooltipClick.args = {
   glass: true,
 };
 GlassTooltipClick.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>
   ),
@@ -202,12 +208,14 @@ GlassTooltipPositions.args = {
   glass: true,
 };
 GlassTooltipPositions.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>
   ),
@@ -234,12 +242,14 @@ GlassTooltipRich.args = {
   glass: true,
 };
 GlassTooltipRich.decorators = [
-  (Story) => (
-    <div style={{ 
-      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
-      minHeight: '100vh',
-      padding: '2rem'
-    }}>
+  Story => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+        minHeight: '100vh',
+        padding: '2rem',
+      }}
+    >
       <Story />
     </div>
   ),