@app-studio/web 0.9.80 → 0.9.82

package/docs/components/Background.mdx

@@ -1,145 +1,144 @@
 # Background
 
-No description provided.
+A comprehensive collection of background effects, including animated particles, gradients, images, and videos.
 
 ### **Import**
 ```tsx
 import { Background } from '@app-studio/web';
 ```
 
-### **Default**
+### **Aurora**
+A smooth, flowing gradient animation resembling the northern lights.
+
+**Props:**
+- `showRadialGradient` (boolean): Adds a radial gradient overlay.
+
 ```tsx
-import React from 'react';
-import { Background } from '@app-studio/web';
-import { Vertical } from 'app-studio';
-import { Text } from 'app-studio';
-
-export const DefaultDemo = () => (
-  <Vertical gap={32}>
-    <Text fontSize={16} fontWeight="600">
-      Background Component Examples
-    </Text>
-
-    <Vertical gap={16}>
-      <Text fontSize={14} color="color.gray.600">
-        Aurora Background
-      </Text>
-      <Background.Aurora height="200px" showRadialGradient={true}>
-        <Text color="white" fontSize={18} fontWeight="500">
-          Aurora Effect Background
-        </Text>
-      </Background.Aurora>
-    </Vertical>
-
-    <Vertical gap={16}>
-      <Text fontSize={14} color="color.gray.600">
-        Meteors Effect
-      </Text>
-      <Background.Meteors number={15} />
-    </Vertical>
-
-    <Vertical gap={16}>
-      <Text fontSize={14} color="color.gray.600">
-        Wall Effect
-      </Text>
-      <Background.Wall rows={15} cols={10} squareSize={40} />
-    </Vertical>
-
-    <Vertical gap={16}>
-      <Text fontSize={14} color="color.gray.600">
-        Particles Effect
-      </Text>
-      <Background.Particles
-        count={30}
-        speed="medium"
-        shapes={['circle', 'square']}
-      />
-    </Vertical>
-
-    <Vertical gap={16}>
-      <Text fontSize={14} color="color.gray.600">
-        Grid Effect
-      </Text>
-      <Background.Grid gridSize={25} animationSpeed="medium" />
-    </Vertical>
-
-    <Vertical gap={16}>
-      <Text fontSize={14} color="color.gray.600">
-        Ripples Effect
-      </Text>
-      <Background.Ripples rippleCount={4} maxSize={150} frequency={2} />
-    </Vertical>
-
-    <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={<Background.Overlay />}
-        blendMode="multiply"
-      >
-        <Text color="white" fontSize={18} fontWeight="500">
-          Image Background with Overlay
-        </Text>
-      </Background.Image>
-    </Vertical>
-
-    <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>
-
-    <Vertical gap={16}>
-      <Text fontSize={14} color="color.gray.600">
-        Background Video
-      </Text>
-      <Background.Video
-        src="https://www.w3schools.com/html/mov_bbb.mp4"
-        height="200px"
-  overlay={<Background.Overlay />}
-      >
-        <Text color="white" fontSize={18} fontWeight="500">
-          Video Background
-        </Text>
-      </Background.Video>
-    </Vertical>
-
-    <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.Aurora height="300px" showRadialGradient>
+  <Center height="100%">
+    <Title color="white">Aurora Effect</Title>
+  </Center>
+</Background.Aurora>
+```
+
+### **Meteors**
+Falling meteor effects, perfect for dark themes.
+
+**Props:**
+- `number` (number): Number of meteors to render.
+
+```tsx
+<Background.Meteors number={20}>
+  <Center height="300px" backgroundColor="#0f172a">
+    <Title color="white">Meteor Shower</Title>
+  </Center>
+</Background.Meteors>
+```
+
+### **Particles**
+Interactive floating particles.
+
+**Props:**
+- `count` (number): Number of particles.
+- `speed` ('slow' | 'medium' | 'fast'): Movement speed.
+- `shapes` (Array): Shapes to use ('circle', 'square', 'triangle').
+- `colors` (string[]): Array of colors for particles.
+
+```tsx
+<Background.Particles 
+  count={50} 
+  speed="slow" 
+  shapes={['circle']}
+  colors={['#6366f1', '#a855f7']} 
+/>
+```
+
+### **Wall**
+A grid of squares that can animate.
+
+**Props:**
+- `rows` (number): Number of rows.
+- `cols` (number): Number of columns.
+- `squareSize` (number): Size of each square.
+
+```tsx
+<Background.Wall rows={10} cols={10} squareSize={50} />
+```
+
+### **Grid**
+A retro-style perspective grid.
+
+**Props:**
+- `gridSize` (number): Size of grid cells.
+- `animationSpeed` ('slow' | 'medium' | 'fast').
+- `lineColor` (string).
+- `pulseColor` (string).
+
+```tsx
+<Background.Grid gridSize={40} animationSpeed="medium" lineColor="rgba(255,255,255,0.1)" />
 ```
 
+### **Ripples**
+Concentric ripple animations.
+
+**Props:**
+- `rippleCount` (number).
+- `maxSize` (number).
+- `frequency` (number).
+
+```tsx
+<Background.Ripples rippleCount={3} maxSize={300} />
+```
+
+### **Image**
+Background image with optional overlay and blend modes.
+
+**Props:**
+- `src` (string): Image URL.
+- `backgroundSize`, `backgroundPosition`, `backgroundRepeat`.
+- `overlay` (ReactNode): Content to overlay (like `<Background.Overlay />`).
+- `blendMode` (BlendMode): CSS blend mode.
+
+```tsx
+<Background.Image 
+  src="https://example.com/bg.jpg" 
+  height="400px"
+  overlay={<Background.Overlay contentPosition="center" backgroundColor="rgba(0,0,0,0.6)" />}
+>
+  <Title color="white">Hero Section</Title>
+</Background.Image>
+```
+
+### **Video**
+Background video with auto-play support.
+
+**Props:**
+- `src` (string): Video URL.
+- `autoPlay`, `loop`, `muted`, `playsInline` (boolean).
+- `overlay` (ReactNode).
+- `blendMode` (BlendMode).
+
+```tsx
+<Background.Video 
+  src="/assets/background.mp4" 
+  height="100vh"
+  overlay={<Background.Overlay backgroundColor="rgba(0,0,0,0.4)" />}
+>
+  <Title>Cinematic Experience</Title>
+</Background.Video>
+```
+
+### **Gradient**
+Advanced gradient backgrounds.
+
+**Props:**
+- Inherits `GradientProps`.
+
+```tsx
+<Background.Gradient 
+  from="color.blue.600" 
+  to="color.purple.600" 
+  direction="45deg" 
+  height="300px" 
+/>
+```

package/docs/components/Button.mdx

@@ -1,6 +1,6 @@
 # Button
 
-A versatile button component for user interaction with various styles, sizes, and interactive effects.
+A versatile button component for user interaction with various styles, sizes, shapes, and interactive effects.
 
 ### **Import**
 ```tsx
@@ -17,204 +17,227 @@ export const DefaultButton = () => (
 );
 ```
 
-### **loaderProps**
-Optional LoaderProps object to configure the appearance and behavior of the loader animation.
+### **variant**
+Variant to define the stylistic variation of the button.
 
-- **Type:** `LoaderProps`
-- **Possible Values:** ``
+- **Type:** `Variant`
+- **Default:** `filled`
+- **Possible Values:** `filled, outline, link, ghost, empty, subtle`
 
 ```tsx
 import React from 'react';
 import { Button } from '@app-studio/web';
 import { Vertical } from 'app-studio';
+import { Variant } from '@app-studio/web';
 
-export const LoaderButtons = () => (
+export const VariantButtons = () => (
   <Vertical gap={15}>
-    <Button isLoading isFilled onClick={(e) => alert('ok')}>
-      Submitting
-    </Button>
-    <Button isLoading isFilled>
-      Submitting
-    </Button>
-    <Button isLoading loaderPosition="right" isFilled>
-      Submitting
+    {['filled', 'outline', 'link', 'ghost', 'subtle'].map((variant, index) => (
+      <Button
+        key={index}
+        variant={variant as Variant}
+      >
+        {variant}
+      </Button>
+    ))}
+    <Button variant="link" to="https://google.com" isExternal>
+      External Link
     </Button>
   </Vertical>
 );
 ```
 
-### **icon**
-Optional React node(s) defining the icon to be displayed within the button.
+### **size**
+Optional Size to specify the size of the button.
 
-- **Type:** `React.ReactNode`
-- **Possible Values:** ``
+- **Type:** `Size`
+- **Default:** `md`
+- **Possible Values:** `xs, sm, md, lg, xl`
 
 ```tsx
 import React from 'react';
 import { Button } from '@app-studio/web';
-import { Center } from 'app-studio';
-
-import { DustBinIcon } from '@app-studio/web';
-
-import { Shape } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+import { Size } from '@app-studio/web';
 
-export const IconButtons = () => (
-  <Center gap={15}>
-    <Button icon={<DustBinIcon widthHeight={16} />} size="md">
-      Delete
-    </Button>
-    <Button
-      size="md"
-      icon={<DustBinIcon widthHeight={16} />}
-      shape={'pillShaped' as Shape}
-      iconPosition="right"
-    >
-      Delete
-    </Button>
-    <Button icon={<DustBinIcon widthHeight={16} />} isIconRounded isAuto />
-    <Button
-      icon={<DustBinIcon widthHeight={16} />}
-      size="md"
-      iconPosition="top"
-    >
-      Delete
-    </Button>
-    <Button
-      size="md"
-      icon={<DustBinIcon widthHeight={16} />}
-      shape={'pillShaped' as Shape}
-      iconPosition="bottom"
-    >
-      Delete
-    </Button>
-  </Center>
+export const ButtonSizes = () => (
+  <Vertical gap={10}>
+    {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
+      <Button key={index} size={size as Size}>
+        Button {size.toUpperCase()}
+      </Button>
+    ))}
+  </Vertical>
 );
 ```
 
-### **isDisabled**
-Optional boolean to indicate if the button is non-interactive/disabled.
+### **shape**
+Optional Shape to specify the border radius style of the button.
 
-- **Type:** `boolean`
-- **Default:** `false`
-- **Possible Values:** ``
+- **Type:** `Shape`
+- **Default:** `rounded`
+- **Possible Values:** `sharp, rounded, pillShaped`
 
 ```tsx
 import React from 'react';
 import { Button } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
+import { Shape } from '@app-studio/web';
 
-export const DisabledButton = () => (
-  <Button
-    onClick={() => {
-      alert('Disabled');
-    }}
-    isDisabled
-  >
-    Disabled
-  </Button>
+export const ShapeButtons = () => (
+  <Horizontal gap={15}>
+    {['sharp', 'rounded', 'pillShaped'].map((shape, index) => (
+      <Button key={index} shape={shape as Shape}>
+        {shape}
+      </Button>
+    ))}
+  </Horizontal>
 );
 ```
 
-### **isAuto**
-Optional boolean indicating if the button size should automatically adjust to its content.
+### **isLoading**
+Boolean to indicate if the button is in a loading state. Shows a loader and disables interactions.
 
 - **Type:** `boolean`
 - **Default:** `false`
-- **Possible Values:** ``
+- **Related:** `loaderPosition`, `loaderProps`
 
 ```tsx
 import React from 'react';
 import { Button } from '@app-studio/web';
-import { Horizontal } from 'app-studio';
-
-import { Shape } from '@app-studio/web';
+import { Vertical } from 'app-studio';
 
-export const BorderedButtons = () => (
-  <Horizontal gap={15}>
-    {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
-      <Button key={index} shape={border as Shape}>
-        {border}
-      </Button>
-    ))}
-  </Horizontal>
+export const LoadingButtons = () => (
+  <Vertical gap={15}>
+    <Button isLoading>Loading...</Button>
+    <Button isLoading loaderPosition="right">
+      Submitted
+    </Button>
+    <Button isLoading isFilled={false} variant="outline">
+      Loading Outline
+    </Button>
+  </Vertical>
 );
 ```
 
-### **size**
-Optional Size to specify the size of the button.
+### **animation**
+Apply special animation effects to the button.
 
-- **Type:** `Size`
-- **Default:** `md`
-- **Possible Values:** `xs, sm, md, lg, xl`
+- **Type:** `Animation`
+- **Possible Values:** `borderMoving, animatedStroke, borderReveal`
 
 ```tsx
 import React from 'react';
 import { Button } from '@app-studio/web';
 import { Vertical } from 'app-studio';
 
-import { Size } from '@app-studio/web';
+export const AnimatedButtons = () => (
+  <Vertical gap={15}>
+    <Button 
+      animation="borderMoving" 
+      borderMovingDuration={2}
+      borderMovingGradientColors={['#705CFF', '#FF5C97', '#FFC75C']}
+    >
+      Border Moving
+    </Button>
+    
+    <Button 
+      animation="animatedStroke"
+      variant="outline"
+      animatedStrokeAccentColor="#705CFF"
+    >
+      Animated Stroke
+    </Button>
 
-export const ButtonSizes = () => (
-  <Vertical gap={10}>
-    {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
-      <Button key={index} size={size as Size}>
-        Button {size.toUpperCase()}
-      </Button>
-    ))}
+    <Button 
+      animation="borderReveal"
+      variant="outline"
+    >
+      Border Reveal (Hover)
+    </Button>
   </Vertical>
 );
 ```
 
-### **shadow**
-Optional shadow property that can be a predefined Shadow, Elevation value or custom CSSProperties to apply shadow effects to the button.
-
-- **Type:** `Shadow | Elevation | ViewProps`
-- **Possible Values:** ``
+### **color & backgroundColor**
+Override the main color of the button.
+- `backgroundColor`: Sets the primary background color (filled variant).
+- `color`: Sets the main color token used for text/borders (outline/ghost variants).
+- `textColor`: Explicitly sets the text color.
 
 ```tsx
 import React from 'react';
 import { Button } from '@app-studio/web';
+import { Horizontal } from 'app-studio';
 
-export const ShadowButton = () => (
-  <Button shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}>
-    Click Me
-  </Button>
+export const ColoredButtons = () => (
+  <Horizontal gap={15}>
+    <Button backgroundColor="#F43F5E">Custom Red</Button>
+    <Button variant="outline" color="#10B981">Custom Green</Button>
+    <Button backgroundColor="theme.primary" textColor="white">
+      Theme Primary
+    </Button>
+  </Horizontal>
 );
 ```
 
-### **variant**
-Variant to define the stylistic variation of the button.
+### **icon**
+Optional React node(s) defining the icon to be displayed within the button.
 
-- **Type:** `Variant`
-- **Default:** `filled`
-- **Possible Values:** `filled, outline, link, ghost, borderMoving, animatedStroke`
+- **Type:** `React.ReactNode`
+- **Related:** `iconPosition`, `isIconRounded`
 
 ```tsx
 import React from 'react';
-import { Button } from '@app-studio/web';
-import { Vertical } from 'app-studio';
+import { Button, DustBinIcon } from '@app-studio/web';
+import { Center } from 'app-studio';
 
-import { Variant } from '@app-studio/web';
+export const IconButtons = () => (
+  <Center gap={15}>
+    <Button icon={<DustBinIcon widthHeight={16} />} size="md">
+      Delete
+    </Button>
+    <Button
+      size="md"
+      icon={<DustBinIcon widthHeight={16} />}
+      iconPosition="right"
+    >
+      Right Icon
+    </Button>
+    <Button icon={<DustBinIcon widthHeight={16} />} isIconRounded />
+  </Center>
+);
+```
 
-export const VariantButtons = () => (
-  <Vertical gap={15}>
-    {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
-      <Button
-        key={index}
-        to="https://www.npmjs.com/package/app-studio"
-        variant={variant as Variant}
-      >
-        App Studio Link {variant}
-      </Button>
-    ))}
-    {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
-      <Button key={index} variant={variant as Variant}>
-        {variant}
-      </Button>
-    ))}
-    {/* Effect variants */}
-    <Button variant="borderMoving">Border Moving Effect</Button>
-    <Button variant="animatedStroke">Animated Stroke Effect</Button>
-  </Vertical>
+### **isDisabled**
+Optional boolean to indicate if the button is non-interactive/disabled.
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/web';
+
+export const DisabledButton = () => (
+  <Button isDisabled onClick={() => alert('Disabled')}>
+    Disabled
+  </Button>
 );
 ```
 
+### **isAuto**
+Optional boolean indicating if the button size should automatically adjust to its content (fit-content).
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+### **to**
+The destination URL or path for a link button. Renders as a `<a>` or routing link.
+
+- **Type:** `string`
+
+```tsx
+<Button to="/dashboard">Go to Dashboard</Button>
+<Button to="https://google.com" isExternal>Open Google</Button>
+```