@app-studio/web 0.9.39 → 0.9.43

package/docs/components/Background.mdx

@@ -1,522 +1,130 @@
 # Background
 
-A comprehensive collection of background effects including animated backgrounds (Aurora, Meteors, Particles), background images with overlays, and gradient backgrounds. Perfect for creating engaging visual experiences in your applications.
+No description provided.
 
 ### **Import**
 ```tsx
 import { Background } from '@app-studio/web';
 ```
 
-### **Aurora Background**
-Creates a beautiful animated aurora gradient background effect.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-import { Text } from 'app-studio';
-
-export const AuroraDemo = () => (
-  <Background.Aurora height="300px" showRadialGradient={true}>
-    <Text color="white" fontSize={20}>
-      Aurora Effect Background
-    </Text>
-  </Background.Aurora>
-);
-```
-
-### **Meteors Effect**
-Animated falling meteors effect with customizable count.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-import { Text } from 'app-studio';
-
-export const MeteorsDemo = () => (
-  <Background.Meteors number={20} height="300px">
-    <Text color="white" fontSize={20}>
-      Meteors Effect Background
-    </Text>
-  </Background.Meteors>
-);
-```
-
-### **Wall Effect**
-Interactive grid wall with hover color effects.
-
+### **Default**
 ```tsx
 import React from 'react';
-import { Background } from '../Background';
-
-export const WallDemo = () => (
-  <Background.Wall rows={15} cols={10} squareSize={40} />
-);
-```
-
-### **Particles Effect**
-Floating animated particles with customizable shapes and colors.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-
-export const ParticlesDemo = () => (
-  <Background.Particles
-    count={50}
-    speed="medium"
-    shapes={['circle', 'square', 'triangle']}
-  />
-);
-```
-
-### **Grid Effect**
-Animated geometric grid with pulsing cells.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-
-export const GridDemo = () => (
-  <Background.Grid
-    gridSize={30}
-    animationSpeed="medium"
-  />
-);
-```
-
-### **Ripples Effect**
-Expanding circular ripples from random points.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-
-export const RipplesDemo = () => (
-  <Background.Ripples
-    rippleCount={5}
-    maxSize={200}
-    frequency={3}
-  />
-);
-```
-
-### **Background Image**
-Display images as backgrounds with overlay support and blend modes.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-import { Text } from 'app-studio';
-
-export const BackgroundImageDemo = () => (
-  <Background.Image
-    src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop"
-    height="300px"
-    backgroundSize="cover"
-    overlay="rgba(0,0,0,0.4)"
-    blendMode="multiply"
-  >
-    <Text color="white" fontSize={20} fontWeight="600">
-      Beautiful Image Background
-    </Text>
-  </Background.Image>
-);
-```
-
-### **Background Gradient**
-Create beautiful gradient backgrounds with animation support.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
+import { Background } from '@app-studio/web';
+import { Vertical } from 'app-studio';
 import { Text } from 'app-studio';
 
-// Simple two-color gradient
-export const SimpleGradientDemo = () => (
-  <Background.Gradient
-    from="color.blue.500"
-    to="color.purple.500"
-    height="300px"
-    animate={true}
-    animationDuration={4}
-  >
-    <Text color="white" fontSize={20} fontWeight="600">
-      Animated Gradient
-    </Text>
-  </Background.Gradient>
-);
-
-// Multi-color radial gradient
-export const RadialGradientDemo = () => (
-  <Background.Gradient
-    type="radial"
-    colors={[
-      { color: 'color.red.500', position: '0%' },
-      { color: 'color.orange.500', position: '50%' },
-      { color: 'color.yellow.500', position: '100%' },
-    ]}
-    height="300px"
-    shape="ellipse"
-    position="center"
-  >
-    <Text color="white" fontSize={20} fontWeight="600">
-      Radial Multi-color Gradient
+export const DefaultDemo = () => (
+  <Vertical gap={32}>
+    <Text fontSize={16} fontWeight="600">
+      Background Component Examples
     </Text>
-  </Background.Gradient>
-);
-
-// Conic gradient
-export const ConicGradientDemo = () => (
-  <Background.Gradient
-    type="conic"
-    colors={[
-      { color: 'color.blue.500', position: '0deg' },
-      { color: 'color.green.500', position: '120deg' },
-      { color: 'color.red.500', position: '240deg' },
-      { color: 'color.blue.500', position: '360deg' },
-    ]}
-    height="300px"
-    animate={true}
-  >
-    <Text color="white" fontSize={20} fontWeight="600">
-      Animated Conic Gradient
-    </Text>
-  </Background.Gradient>
-);
-```
-
-### **Border Moving Button**
-Button with animated moving gradient border.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-
-export const BorderButtonDemo = () => (
-  <Background.BorderMovingButton
-    duration={2}
-    borderRadius={25}
-    gradientColors={['#705CFF', '#FF5C97', '#FFC75C']}
-  >
-    Click Me
-  </Background.BorderMovingButton>
-);
-```
-
-### **Animated Stroke Button**
-Button with animated stroke effect on hover.
 
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-
-export const StrokeButtonDemo = () => (
-  <Background.AnimatedStrokeButton
-    text="Hover Me"
-    width={300}
-    height={60}
-    accentColor="color.blue.500"
-    textColor="color.gray.800"
-    onClick={() => console.log('Clicked!')}
-  />
-);
-```
-
-### **Combined Effects**
-Multiple background effects can be combined for rich visual experiences.
-
-```tsx
-import React from 'react';
-import { Background } from '../Background';
-import { Text } from 'app-studio';
-import { Vertical, Horizontal } from 'app-studio';
-
-// Aurora with content
-export const CombinedAuroraDemo = () => (
-  <Background.Aurora height="400px" showRadialGradient={true}>
-    <Vertical alignItems="center" gap={24}>
-      <Text color="white" fontSize={24} fontWeight="600">
-        Welcome to the Future
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Aurora Background
       </Text>
-
-      <Horizontal gap={16}>
-        <Background.BorderMovingButton duration={2}>
-          Get Started
-        </Background.BorderMovingButton>
-
-        <Background.AnimatedStrokeButton
-          text="Learn More"
-          accentColor="white"
-          textColor="white"
-        />
-      </Horizontal>
+      <Background.Aurora height="200px" showRadialGradient={true}>
+        <Text color="white" fontSize={18} fontWeight="500">
+          Aurora Effect Background
+        </Text>
+      </Background.Aurora>
     </Vertical>
-  </Background.Aurora>
-);
 
-// Image with gradient overlay
-export const ImageGradientOverlayDemo = () => (
-  <Background.Image
-    src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop"
-    height="400px"
-    backgroundSize="cover"
-    overlay="linear-gradient(45deg, rgba(59, 130, 246, 0.8), rgba(147, 51, 234, 0.8))"
-    blendMode="overlay"
-  >
-    <Vertical alignItems="center" gap={24}>
-      <Text color="white" fontSize={28} fontWeight="700">
-        Stunning Visuals
-      </Text>
-      <Text color="white" fontSize={16} textAlign="center" maxWidth="400px">
-        Combine beautiful images with gradient overlays for captivating designs
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Meteors Effect
       </Text>
+      <Background.Meteors number={15} />
     </Vertical>
-  </Background.Image>
-);
 
-// Layered backgrounds
-export const LayeredBackgroundDemo = () => (
-  <Background.Gradient
-    from="color.indigo.900"
-    to="color.purple.900"
-    height="400px"
-  >
-    <Background.Particles
-      count={30}
-      speed="slow"
-      shapes={['circle']}
-      colors={['rgba(255,255,255,0.3)', 'rgba(147,51,234,0.5)']}
-    />
-    <Vertical alignItems="center" gap={24} style={{ position: 'relative', zIndex: 2 }}>
-      <Text color="white" fontSize={24} fontWeight="600">
-        Layered Effects
-      </Text>
-      <Text color="white" fontSize={16} textAlign="center">
-        Gradient background with floating particles
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Wall Effect
       </Text>
+      <Background.Wall rows={15} cols={10} squareSize={40} />
     </Vertical>
-  </Background.Gradient>
-);
-```
 
-## Props
-
-### Aurora Background Props
-- `showRadialGradient?: boolean` - Whether to apply radial gradient mask
-- `children?: ReactNode` - Content to display over the aurora
-- `height?: string | number` - Height of the aurora container
-
-### Meteors Props
-- `number?: number` - Number of meteors to display (default: 20)
-- `width?: number` - Container width
-- `height?: number` - Container height
-
-### Wall Props
-- `rows?: number` - Number of rows in the grid (default: 15)
-- `cols?: number` - Number of columns in the grid (default: 10)
-- `squareSize?: number` - Size of each grid square (default: 40)
-- `width?: number` - Container width
-- `height?: number` - Container height
-
-### Particles Props
-- `count?: number` - Number of particles to display (default: 50)
-- `colors?: string[]` - Array of particle colors (default: blue/purple/pink palette)
-- `speed?: 'slow' | 'medium' | 'fast'` - Animation speed (default: 'medium')
-- `shapes?: ('circle' | 'square' | 'triangle')[]` - Particle shapes (default: ['circle'])
-- `width?: number` - Container width
-- `height?: number` - Container height
-
-### Grid Props
-- `gridSize?: number` - Size of each grid cell in pixels (default: 30)
-- `lineColor?: string` - Color of grid lines (default: 'rgba(59, 130, 246, 0.3)')
-- `pulseColor?: string` - Color of pulsing cells (default: 'rgba(59, 130, 246, 0.8)')
-- `animationSpeed?: 'slow' | 'medium' | 'fast'` - Speed of pulse animation (default: 'medium')
-- `width?: number` - Container width
-- `height?: number` - Container height
-
-### Ripples Props
-- `rippleCount?: number` - Number of ripple sources (default: 5)
-- `colors?: string[]` - Array of ripple colors (default: blue/purple/pink/green palette)
-- `maxSize?: number` - Maximum ripple size in pixels (default: 200)
-- `frequency?: number` - Ripple generation frequency (default: 3)
-- `width?: number` - Container width
-- `height?: number` - Container height
-
-### Background Image Props
-- `src: string` - **Required.** Image source URL
-- `backgroundSize?: string` - How the image should be sized ('cover', 'contain', 'auto', or custom) (default: 'cover')
-- `backgroundPosition?: string` - Image position ('center', 'top', 'bottom', 'left', 'right', or custom) (default: 'center')
-- `backgroundRepeat?: string` - Image repeat behavior ('no-repeat', 'repeat', 'repeat-x', 'repeat-y', 'space', 'round') (default: 'no-repeat')
-- `backgroundAttachment?: string` - Scroll behavior ('scroll', 'fixed', 'local') (default: 'scroll')
-- `imageOpacity?: number` - Image opacity (0-1) (default: 1)
-- `overlay?: string` - Overlay color or gradient to blend with image
-- `blendMode?: string` - CSS blend mode for overlay ('normal', 'multiply', 'screen', 'overlay', etc.) (default: 'normal')
-- `children?: ReactNode` - Content to display over the image
-- `width?: number` - Container width
-- `height?: number` - Container height
-
-### Background Gradient Props
-*Inherits all props from the Gradient component:*
-
-- `type?: 'linear' | 'radial' | 'conic'` - Type of gradient (default: 'linear')
-- `direction?: string` - Direction for linear gradients ('to-right', 'to-left', 'to-bottom', 'to-top', or custom angle) (default: 'to-right')
-- `shape?: 'circle' | 'ellipse'` - Shape for radial gradients (default: 'circle')
-- `position?: string` - Position for radial/conic gradients ('center', 'top', 'bottom', etc.) (default: 'center')
-- `from?: string` - Starting color for simple two-color gradients
-- `to?: string` - Ending color for simple two-color gradients
-- `colors?: ColorStop[]` - Array of color stops for multi-color gradients (takes precedence over from/to)
-- `animate?: boolean` - Whether to animate the gradient (default: false)
-- `animationDuration?: number` - Animation duration in seconds (default: 3)
-- `children?: ReactNode` - Content to display over the gradient
-- `width?: number` - Container width
-- `height?: number` - Container height
-
-#### ColorStop Interface
-```tsx
-interface ColorStop {
-  color: string;        // Color value (supports theme colors like 'color.blue.500')
-  position?: string;    // Position as percentage ('0%', '50%', '100%') or angle for conic
-}
-```
-
-### Border Moving Button Props
-- `children: ReactNode` - Button content
-- `duration?: number` - Animation duration in seconds (default: 2)
-- `borderRadius?: number` - Border radius (default: 50)
-- `gradientColors?: string[]` - Array of gradient colors
-- `width?: number` - Button width (default: 300)
-- `height?: number` - Button height (default: 64)
-
-### Animated Stroke Button Props
-- `text?: string` - Button text (default: "Learn CSS")
-- `width?: number` - Button width (default: 300)
-- `height?: number` - Button height (default: 60)
-- `accentColor?: string` - Stroke color (default: "#705CFF")
-- `textColor?: string` - Text color (default: "#333333")
-- `href?: string` - Link URL
-- `onClick?: () => void` - Click handler
-
-## Usage Guide
-
-### **Theme Integration**
-All Background components integrate seamlessly with the app-studio theme system:
-
-```tsx
-// Use theme colors
-<Background.Gradient
-  from="color.blue.500"
-  to="color.purple.500"
-  animate={true}
-/>
-
-// Use theme colors in overlays
-<Background.Image
-  src="/hero-image.jpg"
-  overlay="color.gray.900"
-  imageOpacity={0.8}
-/>
-```
-
-### **Responsive Design**
-Background components work well with responsive layouts:
-
-```tsx
-// Responsive sizing
-<Background.Image
-  src="/hero-image.jpg"
-  height={{ base: "300px", md: "400px", lg: "500px" }}
-  backgroundPosition={{ base: "center", md: "top" }}
-/>
-
-// Adaptive content
-<Background.Gradient from="color.blue.500" to="color.purple.500">
-  <Vertical gap={{ base: 16, md: 24 }} alignItems="center">
-    <Text fontSize={{ base: 20, md: 24, lg: 28 }} color="white">
-      Responsive Content
-    </Text>
-  </Vertical>
-</Background.Gradient>
-```
-
-### **Performance Considerations**
-- Use appropriate image sizes and formats for Background.Image
-- Consider using `loading="lazy"` for images below the fold
-- Limit the number of animated particles for better performance
-- Use CSS transforms for animations when possible
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Particles Effect
+      </Text>
+      <Background.Particles
+        count={30}
+        speed="medium"
+        shapes={['circle', 'square']}
+      />
+    </Vertical>
 
-### **Accessibility**
-- Ensure sufficient color contrast for text over backgrounds
-- Provide alternative text or descriptions for decorative backgrounds
-- Consider reduced motion preferences for animations
-- Test with screen readers
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Grid Effect
+      </Text>
+      <Background.Grid gridSize={25} animationSpeed="medium" />
+    </Vertical>
 
-```tsx
-// Good contrast example
-<Background.Image
-  src="/hero-image.jpg"
-  overlay="rgba(0,0,0,0.6)"  // Dark overlay for better text contrast
->
-  <Text color="white" fontSize={24}>
-    High Contrast Text
-  </Text>
-</Background.Image>
-```
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Ripples Effect
+      </Text>
+      <Background.Ripples rippleCount={4} maxSize={150} frequency={2} />
+    </Vertical>
 
-### **Common Patterns**
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Background Image
+      </Text>
+      <Background.Image
+        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop"
+        height="200px"
+        backgroundSize="cover"
+        overlay="rgba(0,0,0,0.3)"
+        blendMode="multiply"
+      >
+        <Text color="white" fontSize={18} fontWeight="500">
+          Image Background with Overlay
+        </Text>
+      </Background.Image>
+    </Vertical>
 
-#### Hero Sections
-```tsx
-<Background.Image
-  src="/hero-background.jpg"
-  height="100vh"
-  backgroundSize="cover"
-  backgroundPosition="center"
-  overlay="rgba(0,0,0,0.4)"
->
-  <Vertical alignItems="center" gap={24}>
-    <Text fontSize={48} fontWeight="bold" color="white" textAlign="center">
-      Welcome to Our Platform
-    </Text>
-    <Text fontSize={18} color="white" textAlign="center" maxWidth="600px">
-      Create amazing experiences with our background components
-    </Text>
-    <Button variant="filled" size="lg">
-      Get Started
-    </Button>
-  </Vertical>
-</Background.Image>
-```
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Background Gradient
+      </Text>
+      <Background.Gradient
+        from="color.blue.500"
+        to="color.purple.500"
+        height="200px"
+        animate={true}
+        animationDuration={4}
+      >
+        <Text color="white" fontSize={18} fontWeight="500">
+          Animated Gradient Background
+        </Text>
+      </Background.Gradient>
+    </Vertical>
 
-#### Card Backgrounds
-```tsx
-<Background.Gradient
-  from="color.blue.50"
-  to="color.indigo.100"
-  borderRadius={12}
-  padding={24}
->
-  <Vertical gap={16}>
-    <Text fontSize={20} fontWeight="600">
-      Feature Card
-    </Text>
-    <Text color="color.gray.600">
-      Beautiful gradient background for cards and sections
-    </Text>
+    <Vertical gap={16}>
+      <Text fontSize={14} color="color.gray.600">
+        Multi-color Gradient
+      </Text>
+      <Background.Gradient
+        type="radial"
+        colors={[
+          { color: 'color.red.500', position: '0%' },
+          { color: 'color.orange.500', position: '50%' },
+          { color: 'color.yellow.500', position: '100%' },
+        ]}
+        height="200px"
+        shape="ellipse"
+        position="top-left"
+      >
+        <Text color="white" fontSize={18} fontWeight="500">
+          Radial Multi-color Gradient
+        </Text>
+      </Background.Gradient>
+    </Vertical>
   </Vertical>
-</Background.Gradient>
+);
 ```
 
-#### Loading States
-```tsx
-<Background.Particles
-  count={20}
-  speed="medium"
-  shapes={['circle']}
-  colors={['color.blue.400', 'color.purple.400']}
->
-  <Vertical alignItems="center" gap={16}>
-    <Spinner size="lg" />
-    <Text>Loading...</Text>
-  </Vertical>
-</Background.Particles>
-```