@app-studio/web 0.9.31 → 0.9.33

package/docs/components/Gradient.mdx

@@ -0,0 +1,271 @@
+# Gradient
+
+Creates beautiful gradient backgrounds with various styles and animations.
+
+### **Import**
+  ```tsx
+  import { Gradient } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Gradient } from '../Gradient';
+
+export const DefaultDemo = () => (
+  <Gradient 
+    from="color.blue.500" 
+    to="color.purple.500" 
+    height="100px" 
+    width="100%" 
+  />
+);
+```
+
+### **type**
+Specifies the type of gradient to render.
+
+```tsx
+import React from 'react';
+import { Gradient } from '../Gradient';
+import { Vertical } from 'app-studio';
+import { Text } from '../../Text/Text';
+
+export const TypesDemo = () => (
+  <Vertical gap={16}>
+    <Vertical gap={8}>
+      <Text fontWeight="500">Linear Gradient</Text>
+      <Gradient 
+        type="linear" 
+        from="color.blue.500" 
+        to="color.purple.500" 
+        height="100px" 
+        width="100%" 
+      />
+    </Vertical>
+
+    <Vertical gap={8}>
+      <Text fontWeight="500">Radial Gradient</Text>
+      <Gradient 
+        type="radial" 
+        from="color.blue.500" 
+        to="color.purple.500" 
+        height="100px" 
+        width="100%" 
+      />
+    </Vertical>
+
+    <Vertical gap={8}>
+      <Text fontWeight="500">Conic Gradient</Text>
+      <Gradient 
+        type="conic" 
+        colors={[
+          { color: 'color.red.500', position: '0deg' },
+          { color: 'color.yellow.500', position: '90deg' },
+          { color: 'color.green.500', position: '180deg' },
+          { color: 'color.blue.500', position: '270deg' },
+          { color: 'color.red.500', position: '360deg' }
+        ]}
+        height="100px" 
+        width="100%" 
+      />
+    </Vertical>
+  </Vertical>
+);
+```
+
+### **direction**
+Specifies the direction for linear gradients.
+
+```tsx
+import React from 'react';
+import { Gradient } from '../Gradient';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Text } from '../../Text/Text';
+
+export const DirectionsDemo = () => (
+  <Vertical gap={16}>
+    <Text fontWeight="500">Linear Gradient Directions</Text>
+    <Horizontal gap={16} flexWrap="wrap">
+      {['to-right', 'to-left', 'to-bottom', 'to-top', '45deg'].map((direction) => (
+        <Vertical key={direction} gap={8} width="150px">
+          <Text fontSize="14px">{direction}</Text>
+          <Gradient 
+            type="linear" 
+            direction={direction}
+            from="color.blue.500" 
+            to="color.purple.500" 
+            height="100px" 
+            width="100%" 
+          />
+        </Vertical>
+      ))}
+    </Horizontal>
+  </Vertical>
+);
+```
+
+### **from/to**
+Specifies the start and end colors for simple two-color gradients.
+
+```tsx
+import React from 'react';
+import { Gradient } from '../Gradient';
+
+export const FromToDemo = () => (
+  <Gradient 
+    from="color.blue.500" 
+    to="color.purple.500" 
+    height="100px" 
+    width="100%" 
+  />
+);
+```
+
+### **colors**
+Specifies an array of color stops for multi-color gradients.
+
+```tsx
+import React from 'react';
+import { Gradient } from '../Gradient';
+import { Vertical } from 'app-studio';
+import { Text } from '../../Text/Text';
+
+export const MulticolorDemo = () => (
+  <Vertical gap={16}>
+    <Text fontWeight="500">Multi-color Gradients</Text>
+    
+    <Vertical gap={8}>
+      <Text fontSize="14px">Linear 3-color</Text>
+      <Gradient 
+        type="linear" 
+        colors={[
+          { color: 'color.blue.500', position: '0%' },
+          { color: 'color.purple.500', position: '50%' },
+          { color: 'color.pink.500', position: '100%' }
+        ]}
+        height="100px" 
+        width="100%" 
+      />
+    </Vertical>
+    
+    <Vertical gap={8}>
+      <Text fontSize="14px">Rainbow</Text>
+      <Gradient 
+        type="linear" 
+        colors={[
+          { color: 'color.red.500', position: '0%' },
+          { color: 'color.orange.500', position: '16.67%' },
+          { color: 'color.yellow.500', position: '33.33%' },
+          { color: 'color.green.500', position: '50%' },
+          { color: 'color.blue.500', position: '66.67%' },
+          { color: 'color.indigo.500', position: '83.33%' },
+          { color: 'color.purple.500', position: '100%' }
+        ]}
+        height="100px" 
+        width="100%" 
+      />
+    </Vertical>
+  </Vertical>
+);
+```
+
+### **animate**
+Enables animation for the gradient.
+
+```tsx
+import React from 'react';
+import { Gradient } from '../Gradient';
+import { Vertical } from 'app-studio';
+import { Text } from '../../Text/Text';
+
+export const AnimatedDemo = () => (
+  <Vertical gap={16}>
+    <Text fontWeight="500">Animated Gradients</Text>
+    
+    <Vertical gap={8}>
+      <Text fontSize="14px">Animated Linear</Text>
+      <Gradient 
+        type="linear" 
+        from="color.blue.500" 
+        to="color.purple.500" 
+        animate={true}
+        animationDuration={5}
+        height="100px" 
+        width="100%" 
+      />
+    </Vertical>
+  </Vertical>
+);
+```
+
+### **children**
+Content to render inside the gradient.
+
+```tsx
+import React from 'react';
+import { Gradient } from '../Gradient';
+import { Vertical } from 'app-studio';
+import { Text } from '../../Text/Text';
+import { Button } from '../../Button/Button';
+import { Center } from 'app-studio';
+
+export const WithContentDemo = () => (
+  <Gradient 
+    type="linear" 
+    from="color.blue.600" 
+    to="color.purple.600" 
+    height="150px" 
+    width="100%" 
+    borderRadius="12px"
+  >
+    <Center height="100%">
+      <Vertical alignItems="center" gap={16}>
+        <Text color="white" fontWeight="600" fontSize="24px">
+          Welcome to Gradients
+        </Text>
+        <Button backgroundColor="color.white" color="color.purple.600">
+          Get Started
+        </Button>
+      </Vertical>
+    </Center>
+  </Gradient>
+);
+```
+
+### **views**
+Custom styling that overrides default views.
+
+```tsx
+import React from 'react';
+import { Gradient } from '../Gradient';
+import { Center } from 'app-studio';
+import { Text } from '../../Text/Text';
+
+export const StylesDemo = () => (
+  <Gradient 
+    type="radial" 
+    colors={[
+      { color: 'rgba(0, 0, 0, 0.1)', position: '0%' },
+      { color: 'rgba(0, 0, 0, 0.7)', position: '100%' }
+    ]}
+    height="150px" 
+    width="100%" 
+    borderRadius="12px"
+    views={{
+      container: {
+        backgroundImage: "url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }
+    }}
+  >
+    <Center height="100%">
+      <Text color="white" fontWeight="600" fontSize="24px">
+        Overlay on Image
+      </Text>
+    </Center>
+  </Gradient>
+);
+```

package/docs/components/Horizontal.mdx

@@ -0,0 +1,40 @@
+# Horizontal
+
+Aligns child components horizontally, with optional reverse order.
+
+### **Import**
+  ```tsx
+  import { Horizontal } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+
+import { View } from 'app-studio';
+import { Horizontal } from '../../Horizontal/Horizontal';
+
+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,140 @@
+# HoverCard
+
+A floating card that appears when hovering over a trigger element. Supports configurable open and close delays for a smoother user experience.
+
+### **Import**
+  ```tsx
+  import { HoverCard } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { HoverCard } from '../HoverCard';
+import { Button } from '../../Button/Button';
+import { Text } from '../../Text/Text';
+
+export const DefaultHoverCard = () => {
+  return (
+    <HoverCard>
+      <HoverCard.Trigger>
+        <Button>Hover Me</Button>
+      </HoverCard.Trigger>
+      <HoverCard.Content>
+        <Text>
+          The React Framework – created and maintained by @vercel.
+        </Text>
+      </HoverCard.Content>
+    </HoverCard>
+  );
+};
+```
+
+### **Positioning**
+You can control the position of the HoverCard content using the `side` and `align` props.
+
+```tsx
+import React from 'react';
+import { HoverCard } from '../HoverCard';
+import { Button } from '../../Button/Button';
+import { Text } from '../../Text/Text';
+
+export const PositionedHoverCard = () => {
+  return (
+    <HoverCard>
+      <HoverCard.Trigger>
+        <Button>Hover Me</Button>
+      </HoverCard.Trigger>
+      <HoverCard.Content side="top" align="center">
+        <Text>
+          This content appears above the trigger.
+        </Text>
+      </HoverCard.Content>
+    </HoverCard>
+  );
+};
+```
+
+### **Custom Styling**
+You can customize the appearance of the HoverCard using the `views` prop.
+
+```tsx
+import React from 'react';
+import { HoverCard } from '../HoverCard';
+import { Button } from '../../Button/Button';
+import { Text } from '../../Text/Text';
+
+export const StyledHoverCard = () => {
+  return (
+    <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>
+  );
+};
+```
+
+### **Delay Options**
+You can control the timing of when the HoverCard opens and closes using the `openDelay` and `closeDelay` props.
+
+```tsx
+import React from 'react';
+import { HoverCard } from '../HoverCard';
+import { Button } from '../../Button/Button';
+import { Text } from '../../Text/Text';
+
+export const DelayedHoverCard = () => {
+  return (
+    <HoverCard openDelay={100} closeDelay={1000}>
+      <HoverCard.Trigger>
+        <Button>Hover Me</Button>
+      </HoverCard.Trigger>
+      <HoverCard.Content>
+        <Text>
+          This card opens quickly (100ms) but stays open longer (1000ms) after you move away.
+        </Text>
+      </HoverCard.Content>
+    </HoverCard>
+  );
+};
+```
+
+### **Using with Other Components**
+You can use the `asChild` prop on the Trigger to apply hover behavior directly to another component.
+
+```tsx
+import React from 'react';
+import { HoverCard } from '../HoverCard';
+import { Link } from '../../Link/Link';
+import { Text } from '../../Text/Text';
+
+export const LinkHoverCard = () => {
+  return (
+    <HoverCard>
+      <HoverCard.Trigger asChild>
+        <Link to="https://example.com">example.com</Link>
+      </HoverCard.Trigger>
+      <HoverCard.Content>
+        <Text>
+          This card uses the asChild prop to apply hover behavior directly to the Link component.
+        </Text>
+      </HoverCard.Content>
+    </HoverCard>
+  );
+};
+```