@app-studio/components 0.10.17

package/docs/components/Gradient.mdx

@@ -0,0 +1,448 @@
+# Gradient
+
+A versatile gradient component supporting linear, radial, and conic gradients with animation capabilities.
+
+### **Import**
+```tsx
+import { Gradient } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+
+export const DefaultGradient = () => (
+  <Gradient 
+    from="color-blue-500" 
+    to="color-violet-500" 
+    width={300} 
+    height={200} 
+  />
+);
+```
+
+### **type**
+Type of gradient.
+
+- **Type:** `GradientType`
+- **Default:** `'linear'`
+- **Possible Values:** `'linear' | 'radial' | 'conic'`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const GradientTypes = () => (
+  <Vertical gap={15}>
+    <Gradient 
+      type="linear" 
+      from="color-blue-500" 
+      to="color-violet-500" 
+      width={300} 
+      height={100} 
+    />
+    <Gradient 
+      type="radial" 
+      from="color-blue-500" 
+      to="color-violet-500" 
+      width={300} 
+      height={100} 
+    />
+    <Gradient 
+      type="conic" 
+      from="color-blue-500" 
+      to="color-violet-500" 
+      width={300} 
+      height={100} 
+    />
+  </Vertical>
+);
+```
+
+### **from & to**
+Starting and ending colors for simple two-color gradients.
+
+- **Type:** `string`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const SimpleGradients = () => (
+  <Vertical gap={15}>
+    <Gradient from="color-red-500" to="color-amber-500" width={300} height={100} />
+    <Gradient from="color-emerald-500" to="color-blue-500" width={300} height={100} />
+    <Gradient from="color-violet-500" to="color-pink-500" width={300} height={100} />
+  </Vertical>
+);
+```
+
+### **colors**
+Array of color stops for multi-color gradients.
+
+- **Type:** `ColorStop[]`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+
+export const MultiColorGradient = () => (
+  <Gradient 
+    colors={[
+      { color: '#ef4444', position: 0 },
+      { color: '#f59e0b', position: 25 },
+      { color: '#10b981', position: 50 },
+      { color: '#3b82f6', position: 75 },
+      { color: '#8b5cf6', position: 100 },
+    ]}
+    width={300} 
+    height={100} 
+  />
+);
+```
+
+### **direction**
+Direction for linear gradients.
+
+- **Type:** `LinearDirection`
+- **Default:** `'to-right'`
+- **Possible Values:** `'to-top' | 'to-bottom' | 'to-left' | 'to-right' | 'to-top-right' | 'to-top-left' | 'to-bottom-right' | 'to-bottom-left'`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const DirectionalGradients = () => (
+  <Vertical gap={15}>
+    {[
+      'to-right',
+      'to-bottom',
+      'to-top-right',
+      'to-bottom-left',
+    ].map((direction) => (
+      <Gradient 
+        key={direction}
+        direction={direction as any}
+        from="color-blue-500" 
+        to="color-violet-500" 
+        width={300} 
+        height={100} 
+      />
+    ))}
+  </Vertical>
+);
+```
+
+### **shape**
+Shape for radial gradients.
+
+- **Type:** `RadialShape`
+- **Default:** `'circle'`
+- **Possible Values:** `'circle' | 'ellipse'`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+export const RadialShapes = () => (
+  <Horizontal gap={15}>
+    <Gradient 
+      type="radial"
+      shape="circle"
+      from="color-blue-500" 
+      to="color-violet-500" 
+      width={200} 
+      height={200} 
+    />
+    <Gradient 
+      type="radial"
+      shape="ellipse"
+      from="color-blue-500" 
+      to="color-violet-500" 
+      width={300} 
+      height={200} 
+    />
+  </Horizontal>
+);
+```
+
+### **position**
+Position for radial gradients.
+
+- **Type:** `RadialPosition`
+- **Default:** `'center'`
+- **Possible Values:** `'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const RadialPositions = () => (
+  <Vertical gap={15}>
+    {[
+      'center',
+      'top-left',
+      'top-right',
+      'bottom-left',
+    ].map((position) => (
+      <Gradient 
+        key={position}
+        type="radial"
+        position={position as any}
+        from="color-blue-500" 
+        to="color-violet-500" 
+        width={300} 
+        height={100} 
+      />
+    ))}
+  </Vertical>
+);
+```
+
+### **animate**
+Whether to animate the gradient.
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+
+export const AnimatedGradient = () => (
+  <Gradient 
+    from="color-blue-500" 
+    to="color-violet-500" 
+    animate
+    width={300} 
+    height={200} 
+  />
+);
+```
+
+### **animationDuration**
+Animation duration in seconds.
+
+- **Type:** `number`
+- **Default:** `3`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const AnimationDurations = () => (
+  <Vertical gap={15}>
+    <Gradient 
+      from="color-blue-500" 
+      to="color-violet-500" 
+      animate
+      animationDuration={1}
+      width={300} 
+      height={80} 
+    />
+    <Gradient 
+      from="color-blue-500" 
+      to="color-violet-500" 
+      animate
+      animationDuration={5}
+      width={300} 
+      height={80} 
+    />
+  </Vertical>
+);
+```
+
+### **children**
+Content to render inside the gradient.
+
+- **Type:** `React.ReactNode`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Text, Center } from 'app-studio';
+
+export const GradientWithContent = () => (
+  <Gradient 
+    from="color-blue-500" 
+    to="color-violet-500" 
+    width={300} 
+    height={200}
+    borderRadius={16}
+  >
+    <Center width="100%" height="100%">
+      <Text color="white" fontSize={24} fontWeight="bold">
+        Gradient Background
+      </Text>
+    </Center>
+  </Gradient>
+);
+```
+
+### **views**
+Custom styles for the gradient.
+
+- **Type:** `GradientStyles`
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+
+export const StyledGradient = () => (
+  <Gradient 
+    from="color-blue-500" 
+    to="color-violet-500" 
+    width={300} 
+    height={200}
+    views={{
+      container: {
+        borderRadius: 20,
+        boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
+        border: '2px solid #ffffff',
+      }
+    }}
+  />
+);
+```
+
+### **Complex Gradients**
+Creating sophisticated gradient effects.
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const ComplexGradients = () => (
+  <Vertical gap={20}>
+    {/* Sunset gradient */}
+    <Gradient 
+      colors={[
+        { color: '#ff6b6b', position: 0 },
+        { color: '#feca57', position: 50 },
+        { color: '#ee5a6f', position: 100 },
+      ]}
+      direction="to-bottom"
+      width={300} 
+      height={150}
+      borderRadius={12}
+    />
+    
+    {/* Ocean gradient */}
+    <Gradient 
+      type="radial"
+      colors={[
+        { color: '#667eea', position: 0 },
+        { color: '#764ba2', position: 50 },
+        { color: '#f093fb', position: 100 },
+      ]}
+      width={300} 
+      height={150}
+      borderRadius={12}
+    />
+    
+    {/* Rainbow conic */}
+    <Gradient 
+      type="conic"
+      colors={[
+        { color: '#ff0000', position: 0 },
+        { color: '#ff7f00', position: 14 },
+        { color: '#ffff00', position: 28 },
+        { color: '#00ff00', position: 42 },
+        { color: '#0000ff', position: 57 },
+        { color: '#4b0082', position: 71 },
+        { color: '#9400d3', position: 85 },
+        { color: '#ff0000', position: 100 },
+      ]}
+      width={200} 
+      height={200}
+      borderRadius="50%"
+    />
+  </Vertical>
+);
+```
+
+### **Card with Gradient Background**
+Using gradient as a card background.
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Text, Vertical, Button } from 'app-studio';
+
+export const GradientCard = () => (
+  <Gradient 
+    from="color-indigo-400" 
+    to="color-purple-700" 
+    width={350} 
+    borderRadius={16}
+    boxShadow="0 10px 40px rgba(0,0,0,0.2)"
+  >
+    <Vertical gap={20} padding={30}>
+      <Text color="white" fontSize={28} fontWeight="bold">
+        Premium Plan
+      </Text>
+      <Text color="white" fontSize={48} fontWeight="bold">
+        $99
+        <Text as="span" fontSize={20}>/month</Text>
+      </Text>
+      <Vertical gap={10}>
+        <Text color="white">✓ Unlimited projects</Text>
+        <Text color="white">✓ Priority support</Text>
+        <Text color="white">✓ Advanced analytics</Text>
+      </Vertical>
+      <Button 
+        backgroundColor="white" 
+        color="color-indigo-400"
+        isFullWidth
+      >
+        Get Started
+      </Button>
+    </Vertical>
+  </Gradient>
+);
+```
+
+### **Animated Background**
+Creating an animated gradient background.
+
+```tsx
+import React from 'react';
+import { Gradient } from '@app-studio/components';
+import { Text, Center } from 'app-studio';
+
+export const AnimatedBackground = () => (
+  <Gradient 
+    colors={[
+      { color: '#ee7752', position: 0 },
+      { color: '#e73c7e', position: 33 },
+      { color: '#23a6d5', position: 66 },
+      { color: '#23d5ab', position: 100 },
+    ]}
+    direction="to-right"
+    animate
+    animationDuration={4}
+    width="100%"
+    height={400}
+  >
+    <Center width="100%" height="100%">
+      <Text 
+        color="white" 
+        fontSize={40} 
+        fontWeight="bold"
+        textAlign="center"
+      >
+        Animated Gradient
+      </Text>
+    </Center>
+  </Gradient>
+);
+```
+

package/docs/components/Horizontal.mdx

@@ -0,0 +1,39 @@
+# Horizontal
+
+Aligns child components horizontally, with optional reverse order.
+
+### **Import**
+  ```tsx
+  import { Horizontal } from '@app-studio/components';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+
+import { View, Horizontal } from '@app-studio/components';
+
+export const DefaultHorizontal = () => (
+  <Horizontal>
+    <View width={50} height={50} backgroundColor="theme-primary" />
+    <View
+      width={50}
+      height={50}
+      backgroundColor="theme-secondary"
+      margin="0 10px "
+    />
+    <View width={50} height={50} backgroundColor="theme-warning" />
+  </Horizontal>
+);
+
+```
+
+## Props
+
+| Prop      | Type          | Description                                            | Default     |
+| --------- | ------------- | ------------------------------------------------------ | ----------- |
+| children  | React.ReactNode | The content to be arranged horizontally.                |             |
+| gap       | number        | The gap between horizontally aligned items.             | 0           |
+| styles    | CSSProperties | Optional custom styles for the horizontal container.   |             |
+| className | string        | Optional className for the horizontal container.        |             |
+| wrap      | boolean       | Whether the items should wrap to the next line.        | true        |

package/docs/components/HoverCard.mdx

@@ -0,0 +1,72 @@
+# HoverCard
+
+Displays rich content on hover, with customizable trigger and content presentation.
+
+### **Import**
+```tsx
+import { HoverCard } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { HoverCard } from '@app-studio/components';
+import { Text, Vertical, View } from 'app-studio';
+import { Button } from '@app-studio/components';
+
+export const DefaultHoverCard = () => {
+  return (
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <View>
+        <Text marginBottom={10}>Default HoverCard</Text>
+        <HoverCard>
+          <HoverCard.Trigger>
+            <Button>Hover Me</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content>
+            <Text>
+              The React Framework – created and maintained by @vercel.
+            </Text>
+          </HoverCard.Content>
+        </HoverCard>
+      </View>
+
+      <View>
+        <Text marginBottom={10}>HoverCard with different positions</Text>
+        <HoverCard>
+          <HoverCard.Trigger>
+            <Button>Hover for Top Position</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content side="top">
+            <Text>This content appears above the trigger.</Text>
+          </HoverCard.Content>
+        </HoverCard>
+      </View>
+
+      <View>
+        <Text marginBottom={10}>HoverCard with custom styling</Text>
+        <HoverCard>
+          <HoverCard.Trigger>
+            <Button variant="outline">Custom Styled HoverCard</Button>
+          </HoverCard.Trigger>
+          <HoverCard.Content
+            views={{
+              container: {
+                backgroundColor: 'color-blue',
+                color: 'color-white',
+                borderRadius: '8px',
+                padding: '16px',
+              },
+            }}
+          >
+            <Text color="white">
+              This HoverCard has custom styling with a primary background color-
+            </Text>
+          </HoverCard.Content>
+        </HoverCard>
+      </View>
+    </Vertical>
+  );
+};
+```
+