@shohojdhara/atomix 0.4.9 → 0.5.1

package/src/components/AtomixGlass/stories/Shaders.stories.tsx

@@ -1,395 +0,0 @@
-/**
- * ShaderVariants.stories.tsx
- *
- * Professional showcase of Apple-style shader variants with modern design.
- * Features premium liquid glass effects with advanced visual rendering.
- *
- * @package Atomix
- * @component AtomixGlass
- */
-
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import AtomixGlass from '../AtomixGlass';
-import { BackgroundWrapper } from './shared-components';
-
-const meta: Meta<typeof AtomixGlass> = {
-  title: 'Components/AtomixGlass/Features/Shaders',
-  component: AtomixGlass,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Experience premium Apple-style shader variants with advanced GPU-accelerated effects. Each variant features unique characteristics including time-based animations, organic flow patterns, and sophisticated visual rendering.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof AtomixGlass>;
-
-/**
- * Liquid Glass Variant
- *
- * Enhanced liquid glass with time-based animations and multi-layered organic distortion.
- * Perfect for hero sections and premium content areas.
- */
-export const LiquidGlass: Story = {
-  args: {
-    children: (
-      <div style={{ padding: '44px 40px', textAlign: 'center', maxWidth: '480px' }}>
-        <div
-          style={{
-            width: '80px',
-            height: '80px',
-            margin: '0 auto 28px',
-            borderRadius: '22px',
-            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '44px',
-            boxShadow: '0 20px 48px rgba(102, 126, 234, 0.6)',
-            position: 'relative',
-          }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              inset: '-6px',
-              borderRadius: '28px',
-              background: 'linear-gradient(135deg, #667eea, #764ba2)',
-              opacity: 0.4,
-              filter: 'blur(20px)',
-            }}
-          />
-          <span style={{ position: 'relative', zIndex: 1 }}>💧</span>
-        </div>
-        <h2
-          style={{
-            margin: '0 0 16px 0',
-            fontSize: '38px',
-            fontWeight: 700,
-            background: 'url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809)',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            backgroundClip: 'text',
-            letterSpacing: '-0.5px',
-          }}
-        >
-          Liquid Glass
-        </h2>
-        <p
-          style={{
-            margin: '0 0 32px 0',
-            fontSize: '18px',
-            lineHeight: 1.8,
-            color: 'rgba(255, 255, 255, 0.9)',
-          }}
-        >
-          Experience fluid, time-based animations with multi-layered organic distortion and
-          chromatic aberration effects that create living, breathing glass.
-        </p>
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '12px',
-            justifyContent: 'center',
-          }}
-        >
-          {['Time Animation', 'Multi-Layer', 'Chromatic FX', 'Organic Flow'].map(tag => (
-            <div
-              key={tag}
-              style={{
-                padding: '8px 16px',
-                borderRadius: '10px',
-                background: 'rgba(102, 126, 234, 0.2)',
-                border: '1px solid rgba(102, 126, 234, 0.3)',
-                fontSize: '13px',
-                fontWeight: 600,
-                color: '#fff',
-              }}
-            >
-              {tag}
-            </div>
-          ))}
-        </div>
-      </div>
-    ),
-    displacementScale: 25,
-    blurAmount: 1.5,
-    saturation: 150,
-    aberrationIntensity: 2,
-    elasticity: 0.2,
-    borderRadius: 32,
-    mode: 'shader',
-    shaderVariant: 'liquidGlass',
-  },
-  decorators: [
-    Story => (
-      <BackgroundWrapper
-        backgroundImage="https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=3029&auto=format&fit=crop"
-        height="100vh"
-        width="100vw"
-        overlayOpacity={0.3}
-        borderRadius="0"
-      >
-        <Story />
-      </BackgroundWrapper>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Liquid Glass features time-based animations with multi-layered distortion. Ideal for premium hero sections and feature highlights.',
-      },
-    },
-  },
-};
-
-/**
- * Apple Fluid Variant
- *
- * Premium fluid glass inspired by Apple's design language.
- * Features vortex effects and 5-octave noise for organic, flowing visuals.
- */
-export const AppleFluid: Story = {
-  args: {
-    children: (
-      <div style={{ padding: '44px 40px', textAlign: 'center', maxWidth: '480px' }}>
-        <div
-          style={{
-            width: '80px',
-            height: '80px',
-            margin: '0 auto 28px',
-            borderRadius: '22px',
-            background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '44px',
-            boxShadow: '0 20px 48px rgba(245, 87, 108, 0.6)',
-            position: 'relative',
-          }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              inset: '-6px',
-              borderRadius: '28px',
-              background: 'linear-gradient(135deg, #f093fb, #f5576c)',
-              opacity: 0.4,
-              filter: 'blur(20px)',
-            }}
-          />
-          <span style={{ position: 'relative', zIndex: 1 }}>🌊</span>
-        </div>
-        <h2
-          style={{
-            margin: '0 0 16px 0',
-            fontSize: '38px',
-            fontWeight: 700,
-            background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            backgroundClip: 'text',
-            letterSpacing: '-0.5px',
-          }}
-        >
-          Apple Fluid
-        </h2>
-        <p
-          style={{
-            margin: '0 0 32px 0',
-            fontSize: '18px',
-            lineHeight: 1.8,
-            color: 'rgba(255, 255, 255, 0.9)',
-          }}
-        >
-          Apple-inspired fluid dynamics with vortex effects and high-quality 5-octave noise. Mouse
-          interactions create mesmerizing, organic flow patterns.
-        </p>
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '12px',
-            justifyContent: 'center',
-          }}
-        >
-          {['Vortex FX', '5-Octave', 'Apple Style', 'Interactive'].map(tag => (
-            <div
-              key={tag}
-              style={{
-                padding: '8px 16px',
-                borderRadius: '10px',
-                background: 'rgba(245, 87, 108, 0.2)',
-                border: '1px solid rgba(245, 87, 108, 0.3)',
-                fontSize: '13px',
-                fontWeight: 600,
-                color: '#fff',
-              }}
-            >
-              {tag}
-            </div>
-          ))}
-        </div>
-      </div>
-    ),
-    displacementScale: 25,
-    blurAmount: 1.5,
-    saturation: 150,
-    aberrationIntensity: 2,
-    elasticity: 0.2,
-    borderRadius: 32,
-    mode: 'shader',
-    shaderVariant: 'appleFluid',
-  },
-  decorators: [
-    Story => (
-      <BackgroundWrapper
-        backgroundImage="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop"
-        height="100vh"
-        width="100vw"
-        overlayOpacity={0.3}
-        borderRadius="0"
-      >
-        <Story />
-      </BackgroundWrapper>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Apple Fluid delivers premium vortex effects with 5-octave noise. Mouse interactions create dynamic, flowing patterns inspired by Apple design.',
-      },
-    },
-  },
-};
-
-/**
- * Premium Glass Variant
- *
- * High-end glass rendering with advanced refraction and multi-layer depth.
- * Offers the best performance-to-quality ratio among shader variants.
- */
-export const PremiumGlass: Story = {
-  args: {
-    children: (
-      <div style={{ padding: '44px 40px', textAlign: 'center', maxWidth: '480px' }}>
-        <div
-          style={{
-            width: '80px',
-            height: '80px',
-            margin: '0 auto 28px',
-            borderRadius: '22px',
-            background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '44px',
-            boxShadow: '0 20px 48px rgba(79, 172, 254, 0.6)',
-            position: 'relative',
-          }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              inset: '-6px',
-              borderRadius: '28px',
-              background: 'linear-gradient(135deg, #4facfe, #00f2fe)',
-              opacity: 0.4,
-              filter: 'blur(20px)',
-            }}
-          />
-          <span style={{ position: 'relative', zIndex: 1 }}>💎</span>
-        </div>
-        <h2
-          style={{
-            margin: '0 0 16px 0',
-            fontSize: '38px',
-            fontWeight: 700,
-            background: 'linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%)',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            backgroundClip: 'text',
-            letterSpacing: '-0.5px',
-          }}
-        >
-          Premium Glass
-        </h2>
-        <p
-          style={{
-            margin: '0 0 32px 0',
-            fontSize: '18px',
-            lineHeight: 1.8,
-            color: 'rgba(255, 255, 255, 0.9)',
-          }}
-        >
-          Advanced refraction with multi-layer depth effects and edge-aware rendering. The optimal
-          balance of quality and performance for production applications.
-        </p>
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '12px',
-            justifyContent: 'center',
-          }}
-        >
-          {['Advanced Refraction', 'Multi-Depth', 'Edge-Aware', 'Optimized'].map(tag => (
-            <div
-              key={tag}
-              style={{
-                padding: '8px 16px',
-                borderRadius: '10px',
-                background: 'rgba(79, 172, 254, 0.2)',
-                border: '1px solid rgba(79, 172, 254, 0.3)',
-                fontSize: '13px',
-                fontWeight: 600,
-                color: '#fff',
-              }}
-            >
-              {tag}
-            </div>
-          ))}
-        </div>
-      </div>
-    ),
-    displacementScale: 25,
-    blurAmount: 1.5,
-    saturation: 150,
-    aberrationIntensity: 2,
-    elasticity: 0.2,
-    borderRadius: 32,
-    mode: 'shader',
-    shaderVariant: 'premiumGlass',
-  },
-  decorators: [
-    Story => (
-      <BackgroundWrapper
-        backgroundImage="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=2940&auto=format&fit=crop"
-        height="100vh"
-        width="100vw"
-        overlayOpacity={0.3}
-        borderRadius="0"
-      >
-        <Story />
-      </BackgroundWrapper>
-    ),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Premium Glass offers advanced refraction with optimal performance. Best choice for production applications requiring high-quality shader effects.',
-      },
-    },
-  },
-};

package/src/components/TypedButton/TypedButton.stories.tsx

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TypedButton } from './TypedButton';
-
-const meta: Meta<typeof TypedButton> = {
-  title: 'Components/TypedButton',
-  component: TypedButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'success', 'error'],
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    glass: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: 'TypedButton Component',
-    size: 'md',
-    variant: 'primary',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    ...Default.args,
-    size: 'sm',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    ...Default.args,
-    size: 'lg',
-  },
-};
-
-export const Glass: Story = {
-  args: {
-    ...Default.args,
-    glass: true,
-  },
-};

package/src/components/TypedButton/TypedButton.tsx

@@ -1,39 +0,0 @@
-import React, { forwardRef, useId, memo } from 'react';
-import { TYPEDBUTTON } from '../../lib/constants/components';
-import { useTypedButton } from '../../lib/composables/useTypedButton';
-import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
-import type { TypedButtonProps } from '../../lib/types/components';
-
-/**
- * TypedButton - Medium Presentational Component
- * 
- * @param {TypedButtonProps} props - Component properties
- * @returns {JSX.Element} The rendered component
- */
-export const TypedButton = memo(
-  forwardRef<HTMLDivElement, TypedButtonProps>(
-    ({ children, className = '', disabled = false, glass, style, 'aria-label': ariaLabel, ...props }, ref) => {
-      const instanceId = useId();
-      const { generateClassNames } = useTypedButton({ disabled });
-      
-      const content = (
-        <div
-          ref={ref}
-          className={generateClassNames(className)}
-          style={style}
-          aria-label={ariaLabel}
-          aria-disabled={disabled}
-          {...props}
-        >
-          {children}
-        </div>
-      );
-
-      return glass ? <AtomixGlass {...(glass === true ? {} : glass)}>{content}</AtomixGlass> : content;
-    }
-  )
-);
-
-TypedButton.displayName = 'TypedButton';
-
-export default TypedButton;

package/src/components/TypedButton/index.ts

@@ -1,2 +0,0 @@
-export { default as TypedButton } from './TypedButton';
-export type { TypedButtonProps } from './TypedButton';

package/src/lib/composables/useTypedButton.ts

@@ -1,66 +0,0 @@
-import { TypedButtonProps } from '../types/components';
-import { TYPEDBUTTON } from '../constants/components';
-
-/**
- * TypedButton state and functionality
- * @param initialProps - Initial typedbutton properties
- * @returns TypedButton state and methods
- */
-export function useTypedButton(initialProps?: Partial<TypedButtonProps>) {
-  // Default typedbutton properties
-  const defaultProps: Partial<TypedButtonProps> = {
-    variant: 'primary',
-    size: 'md',
-    disabled: false,
-    ...initialProps,
-  };
-
-  /**
-   * Generate typedbutton class based on properties
-   * @param props - TypedButton properties
-   * @returns Class string
-   */
-  const generateClassNames = (props: Partial<TypedButtonProps> = {}): string => {
-    const {
-      variant = defaultProps.variant,
-      size = defaultProps.size,
-      disabled = defaultProps.disabled,
-      glass = defaultProps.glass,
-      className = '',
-    } = props;
-
-    const sizeClass = size === 'md' ? '' : `c-typedbutton--${size}`;
-    const disabledClass = disabled ? 'c-typedbutton--disabled' : '';
-    const glassClass = glass ? 'c-typedbutton--glass' : '';
-
-    return [
-      TYPEDBUTTON.BASE_CLASS,
-      `c-typedbutton--${variant}`,
-      sizeClass,
-      disabledClass,
-      glassClass,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-  };
-
-  /**
-   * Handle typedbutton click with disabled check
-   * @param handler - Click handler function
-   * @returns Function that respects disabled state
-   */
-  const handleClick = (handler?: (event: React.MouseEvent<HTMLDivElement>) => void) => {
-    return (event: React.MouseEvent<HTMLDivElement>) => {
-      if (!defaultProps.disabled && handler) {
-        handler(event);
-      }
-    };
-  };
-
-  return {
-    defaultProps,
-    generateClassNames,
-    handleClick,
-  };
-}