@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/components/Slider/Slider.tsx

@@ -16,6 +16,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     allowTouchMove = true,
     threshold = 50,
     grabCursor = true,
+    autoplay,
     navigation,
     pagination,
     className,
@@ -41,6 +42,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     speed,
     allowTouchMove,
     threshold,
+    autoplay,
     onSlideChange,
   });
 
@@ -82,7 +84,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
 
   return (
     <div
-      ref={ref || containerRef}
+      ref={ref || (containerRef as React.RefObject<HTMLDivElement>)}
       className={containerClasses}
       style={{
         height: typeof height === 'number' ? `${height}px` : height,
@@ -101,7 +103,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
       onMouseLeave={handleTouchEnd}
     >
       <div
-        ref={wrapperRef}
+        ref={wrapperRef as React.RefObject<HTMLDivElement>}
         className="c-slider__wrapper"
         style={{
           display: 'flex',
@@ -222,4 +224,4 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
   );
 });
 
-Slider.displayName = 'Slider';
+Slider.displayName = 'Slider';

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

@@ -16,6 +16,10 @@ export default {
       control: { type: 'boolean' },
       defaultValue: false,
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } as Meta<typeof Steps>;
 
@@ -156,3 +160,118 @@ export const Interactive: StoryFn<typeof Steps> = () => (
     <InteractiveSteps />
   </div>
 );
+
+export const Glass = {
+  args: {
+    items: [
+      { number: 1, text: 'Glass Step 1' },
+      { number: 2, text: 'Glass Step 2' },
+      { number: 3, text: 'Glass Step 3' },
+      { number: 4, text: 'Glass Step 4' },
+      { number: 5, text: 'Glass Step 5' },
+    ],
+    activeIndex: 1,
+    vertical: false,
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '300px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '800px' }}>
+        <Steps {...args} />
+      </div>
+    </div>
+  ),
+};
+
+export const GlassVertical = {
+  args: {
+    items: [
+      { number: 1, text: 'Glass Step 1' },
+      { number: 2, text: 'Glass Step 2' },
+      { number: 3, text: 'Glass Step 3' },
+      { number: 4, text: 'Glass Step 4' },
+      { number: 5, text: 'Glass Step 5' },
+    ],
+    activeIndex: 1,
+    vertical: true,
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        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',
+        borderRadius: '12px',
+        minHeight: '500px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '400px' }}>
+        <Steps {...args} />
+      </div>
+    </div>
+  ),
+};
+
+export const GlassCustom = {
+  args: {
+    items: [
+      { number: 1, text: 'Custom Glass Step 1' },
+      { number: 2, text: 'Custom Glass Step 2' },
+      { number: 3, text: 'Custom Glass Step 3' },
+      { number: 4, text: 'Custom Glass Step 4' },
+      { number: 5, text: 'Custom Glass Step 5' },
+    ],
+    activeIndex: 1,
+    vertical: false,
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
+        backgroundSize: '400% 400%',
+        animation: 'gradient 15s ease infinite',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '400px',
+        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 style={{ width: '100%', maxWidth: '800px' }}>
+        <Steps {...args} />
+      </div>
+    </div>
+  ),
+};

package/src/components/Steps/Steps.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState, ReactNode } from 'react';
 import { STEPS } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { AtomixGlassProps } from '../../lib/types/components';
 
 export interface StepItem {
   /**
@@ -43,6 +45,12 @@ export interface StepsProps {
    * Additional CSS class
    */
   className?: string;
+
+  /**
+   * 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
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -54,6 +62,7 @@ export const Steps: React.FC<StepsProps> = ({
   vertical = false,
   onStepChange,
   className = '',
+  glass,
 }) => {
   const [currentStep, setCurrentStep] = useState(activeIndex);
 
@@ -86,7 +95,7 @@ export const Steps: React.FC<StepsProps> = ({
     }
   };
 
-  return (
+  const stepsContent = (
     <div
       className={`c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ''} ${className}`}
       role="navigation"
@@ -108,6 +117,28 @@ export const Steps: React.FC<StepsProps> = ({
       ))}
     </div>
   );
+
+  if (glass) {
+    // Default glass settings for steps
+    const defaultGlassProps = {
+      displacementScale: 60,
+      blurAmount: 1,
+      saturation: 160,
+      aberrationIntensity: 0.5,
+      cornerRadius: 8,
+      mode: 'shader' as const,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {stepsContent}
+      </AtomixGlass>
+    );
+  }
+
+  return stepsContent;
 };
 
 Steps.displayName = 'Steps';

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

@@ -11,6 +11,10 @@ export default {
       control: { type: 'number' },
       defaultValue: 0,
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } as Meta<typeof Tab>;
 
@@ -127,3 +131,87 @@ WithRichContent.args = {
   ],
   activeIndex: 0,
 };
+
+export const Glass = {
+  args: {
+    items: [
+      {
+        label: 'Glass Tab 1',
+        content: <p>This is the content for Glass Tab 1 with glass morphism effect.</p>,
+      },
+      {
+        label: 'Glass Tab 2',
+        content: <p>This is the content for Glass Tab 2 with glass morphism effect.</p>,
+      },
+      {
+        label: 'Glass Tab 3',
+        content: <p>This is the content for Glass Tab 3 with glass morphism effect.</p>,
+      },
+    ],
+    activeIndex: 0,
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '2rem',
+        borderRadius: '12px',
+        minHeight: '400px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '600px' }}>
+        <Tab {...args} />
+      </div>
+    </div>
+  ),
+};
+
+export const GlassCustom = {
+  args: {
+    items: [
+      {
+        label: 'Custom Glass Tab 1',
+        content: <p>This tab has custom glass morphism settings.</p>,
+      },
+      {
+        label: 'Custom Glass Tab 2',
+        content: <p>Enhanced glass effect with custom parameters.</p>,
+      },
+      {
+        label: 'Custom Glass Tab 3',
+        content: <p>Another tab with the same custom glass settings.</p>,
+      },
+    ],
+    activeIndex: 0,
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        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',
+        borderRadius: '12px',
+        minHeight: '500px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: '600px' }}>
+        <Tab {...args} />
+      </div>
+    </div>
+  ),
+};

package/src/components/Tab/Tab.tsx

@@ -1,5 +1,7 @@
 import React, { useState, ReactNode } from 'react';
 import { TAB } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { AtomixGlassProps } from '../../lib/types/components';
 
 export interface TabItemProps {
   /**
@@ -43,6 +45,12 @@ export interface TabProps {
    * Additional CSS class for the tab component
    */
   className?: string;
+
+  /**
+   * 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
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -53,6 +61,7 @@ export const Tab: React.FC<TabProps> = ({
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
   className = '',
+  glass,
 }) => {
   const [currentTab, setCurrentTab] = useState(activeIndex);
 
@@ -64,7 +73,7 @@ export const Tab: React.FC<TabProps> = ({
     }
   };
 
-  return (
+  const tabContent = (
     <div className={`c-tabs js-atomix-tab ${className}`}>
       <ul className="c-tabs__nav">
         {items.map((item, index) => (
@@ -104,6 +113,28 @@ export const Tab: React.FC<TabProps> = ({
       </div>
     </div>
   );
+
+  if (glass) {
+    // Default glass settings for tabs
+    const defaultGlassProps = {
+      displacementScale: 60,
+      blurAmount: 1,
+      saturation: 160,
+      aberrationIntensity: 0.5,
+      cornerRadius: 8,
+      mode: 'shader' as const,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {tabContent}
+      </AtomixGlass>
+    );
+  }
+
+  return tabContent;
 };
 
 Tab.displayName = 'Tab';

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

@@ -15,6 +15,10 @@ export default {
       control: { type: 'boolean' },
       defaultValue: false,
     },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+    },
   },
 } as Meta<typeof Toggle>;
 
@@ -47,3 +51,91 @@ DisabledOn.args = {
   initialOn: true,
   disabled: true,
 };
+
+export const Glass = {
+  args: {
+    initialOn: false,
+    disabled: false,
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Toggle {...args} />
+    </div>
+  ),
+};
+
+export const GlassOn = {
+  args: {
+    initialOn: true,
+    disabled: false,
+    glass: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        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',
+        borderRadius: '12px',
+        minHeight: '200px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Toggle {...args} />
+    </div>
+  ),
+};
+
+export const GlassCustom = {
+  args: {
+    initialOn: false,
+    disabled: false,
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 0.8,
+      cornerRadius: 12,
+    },
+  },
+  render: (args) => (
+    <div
+      style={{
+        background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
+        backgroundSize: '400% 400%',
+        animation: 'gradient 15s ease infinite',
+        padding: '3rem',
+        borderRadius: '12px',
+        minHeight: '200px',
+        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>
+      <Toggle {...args} />
+    </div>
+  ),
+};

package/src/components/Toggle/Toggle.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { TOGGLE } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
+import { AtomixGlassProps } from '../../lib/types/components';
 
 export interface ToggleProps {
   /**
@@ -26,6 +28,12 @@ export interface ToggleProps {
    * Additional CSS class for the toggle
    */
   className?: string;
+
+  /**
+   * Glass morphism effect for the toggle
+   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
+   */
+  glass?: AtomixGlassProps | boolean;
 }
 
 /**
@@ -37,6 +45,7 @@ export const Toggle: React.FC<ToggleProps> = ({
   onToggleOff,
   disabled = false,
   className = '',
+  glass,
 }) => {
   const [isOn, setIsOn] = useState(initialOn);
 
@@ -64,7 +73,7 @@ export const Toggle: React.FC<ToggleProps> = ({
     }
   };
 
-  return (
+  const toggleContent = (
     <div
       className={`c-toggle ${isOn ? TOGGLE.CLASSES.IS_ON : ''} ${disabled ? 'is-disabled' : ''} ${className}`}
       onClick={handleClick}
@@ -77,6 +86,28 @@ export const Toggle: React.FC<ToggleProps> = ({
       <div className="c-toggle__switch"></div>
     </div>
   );
+
+  if (glass) {
+    // Default glass settings for toggles
+    const defaultGlassProps = {
+      displacementScale: 60,
+      blurAmount: 1,
+      saturation: 160,
+      aberrationIntensity: 0.5,
+      cornerRadius: 8,
+      mode: 'shader' as const,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    return (
+      <AtomixGlass {...glassProps}>
+        {toggleContent}
+      </AtomixGlass>
+    );
+  }
+
+  return toggleContent;
 };
 
 Toggle.displayName = 'Toggle';

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

@@ -33,6 +33,10 @@ export default {
       control: { type: 'number' },
       defaultValue: 10,
     },
+    glass: {
+      control: { type: 'boolean' },
+      description: 'Enable glass morphism effect',
+    },
   },
 } as Meta<typeof Tooltip>;
 
@@ -113,3 +117,130 @@ RichContent.args = {
   trigger: 'click',
   offset: 15,
 };
+
+/**
+ * Glass morphism tooltip example.
+ */
+export const GlassTooltip = Template.bind({});
+GlassTooltip.args = {
+  content: <p className="u-mb-0">This is a glass tooltip</p>,
+  position: 'top',
+  trigger: 'hover',
+  glass: true,
+};
+GlassTooltip.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * Glass tooltip with custom settings.
+ */
+export const GlassTooltipCustom = Template.bind({});
+GlassTooltipCustom.args = {
+  content: <p className="u-mb-0">Custom glass tooltip with enhanced effects</p>,
+  position: 'top',
+  trigger: 'hover',
+  glass: {
+    displacementScale: 60,
+    blurAmount: 2,
+    saturation: 200,
+    aberrationIntensity: 1,
+    cornerRadius: 12,
+    mode: 'polar',
+  },
+};
+GlassTooltipCustom.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * Glass tooltip with click trigger.
+ */
+export const GlassTooltipClick = Template.bind({});
+GlassTooltipClick.args = {
+  content: <p className="u-mb-0">Click to show glass tooltip</p>,
+  position: 'top',
+  trigger: 'click',
+  glass: true,
+};
+GlassTooltipClick.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * Glass tooltip with different positions.
+ */
+export const GlassTooltipPositions = Template.bind({});
+GlassTooltipPositions.args = {
+  content: <p className="u-mb-0">Glass tooltip in different positions</p>,
+  position: 'top',
+  trigger: 'hover',
+  glass: true,
+};
+GlassTooltipPositions.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];
+
+/**
+ * Glass tooltip with rich content.
+ */
+export const GlassTooltipRich = Template.bind({});
+GlassTooltipRich.args = {
+  content: (
+    <div>
+      <h4 style={{ marginTop: 0, marginBottom: '8px' }}>Glass Rich Tooltip</h4>
+      <ul style={{ margin: 0, paddingLeft: '16px' }}>
+        <li>Beautiful glass effect</li>
+        <li>Supports rich content</li>
+        <li>Modern design</li>
+      </ul>
+    </div>
+  ),
+  position: 'bottom',
+  trigger: 'click',
+  offset: 15,
+  glass: true,
+};
+GlassTooltipRich.decorators = [
+  (Story) => (
+    <div style={{ 
+      background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)', 
+      minHeight: '100vh',
+      padding: '2rem'
+    }}>
+      <Story />
+    </div>
+  ),
+];