@app-studio/web 0.9.39 → 0.9.43

package/docs/components/Card.mdx

@@ -1,341 +1,298 @@
 # Card
 
-A flexible container component for organizing and displaying content.
+A versatile card component for displaying content in a contained, styled box with support for headers, content, and footers.
 
 ### **Import**
-  ```tsx
-  import { Card } from '@app-studio/web';
-  ```
+```tsx
+import { Card } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Card } from '../Card';
+import { Card } from '@app-studio/web';
 import { Text } from 'app-studio';
 
-export const DefaultDemo = () => {
-  return (
-    <Card>
-      <Text>This is a default card with simple content.</Text>
-    </Card>
-  );
-};
+export const DefaultCard = () => (
+  <Card>
+    <Text>Card content</Text>
+  </Card>
+);
 ```
 
-### **Variants**
-Different visual styles for the card.
+### **Structured Layout**
+Use Card.Header, Card.Content, and Card.Footer for organized layouts.
 
 ```tsx
 import React from 'react';
-import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
-
-export const VariantsDemo = () => {
-  return (
-    <Vertical gap={20}>
-      <Card variant="default">
-        <Text>Default Card</Text>
-        <Text color="color.gray.500">
-          This is a card with the default variant.
-        </Text>
+import { Card } from '@app-studio/web';
+import { Text, Button } from 'app-studio';
+
+export const StructuredCard = () => (
+  <Card>
+    <Card.Header>
+      <Text fontSize={18} fontWeight="bold">Card Title</Text>
+    </Card.Header>
+    <Card.Content>
+      <Text>This is the main content of the card.</Text>
+    </Card.Content>
+    <Card.Footer>
+      <Button>Action</Button>
+    </Card.Footer>
+  </Card>
+);
+```
+
+### **variant**
+The visual style variant of the card.
+
+- **Type:** `Variant`
+- **Default:** `'default'`
+- **Possible Values:** `'default' | 'elevated' | 'outlined' | 'filled'`
+
+```tsx
+import React from 'react';
+import { Card } from '@app-studio/web';
+import { Text, Vertical } from 'app-studio';
+
+export const VariantCards = () => (
+  <Vertical gap={15}>
+    {['default', 'elevated', 'outlined', 'filled'].map((variant) => (
+      <Card key={variant} variant={variant as any}>
+        <Card.Content>
+          <Text>{variant} variant</Text>
+        </Card.Content>
       </Card>
+    ))}
+  </Vertical>
+);
+```
 
-      <Card variant="outlined">
-        <Text>Outlined Card</Text>
-        <Text color="color.gray.500">
-          This card has a border around it.
-        </Text>
+### **size**
+The size of the card, affecting padding.
+
+- **Type:** `Size`
+- **Default:** `'md'`
+- **Possible Values:** `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
+
+```tsx
+import React from 'react';
+import { Card } from '@app-studio/web';
+import { Text, Vertical } from 'app-studio';
+
+export const SizedCards = () => (
+  <Vertical gap={15}>
+    {['xs', 'sm', 'md', 'lg', 'xl'].map((size) => (
+      <Card key={size} size={size as any}>
+        <Card.Content>
+          <Text>Size: {size}</Text>
+        </Card.Content>
       </Card>
+    ))}
+  </Vertical>
+);
+```
 
-      <Card variant="elevated">
-        <Text>Elevated Card</Text>
-        <Text color="color.gray.500">
-          This card has a shadow to give it an elevated appearance.
-        </Text>
+### **shape**
+The shape of the card's corners.
+
+- **Type:** `Shape`
+- **Default:** `'rounded'`
+- **Possible Values:** `'sharp' | 'rounded' | 'pillShaped'`
+
+```tsx
+import React from 'react';
+import { Card } from '@app-studio/web';
+import { Text, Horizontal } from 'app-studio';
+
+export const ShapedCards = () => (
+  <Horizontal gap={15}>
+    {['sharp', 'rounded', 'pillShaped'].map((shape) => (
+      <Card key={shape} shape={shape as any}>
+        <Card.Content>
+          <Text>{shape}</Text>
+        </Card.Content>
       </Card>
-    </Vertical>
-  );
-};
+    ))}
+  </Horizontal>
+);
 ```
 
-### **Structured Layout**
-Using Card.Header, Card.Content, and Card.Footer for structured layout.
+### **isFullWidth**
+Whether the card should take up the full width of its container.
+
+- **Type:** `boolean`
+- **Default:** `false`
 
 ```tsx
 import React from 'react';
-import { Card } from '../Card';
+import { Card } from '@app-studio/web';
 import { Text } from 'app-studio';
-import { Horizontal } from 'app-studio';
-import { Button } from '../../Button/Button';
 
-export const StructuredDemo = () => {
-  return (
-    <Card>
-      <Card.Header>
-        <Text fontWeight="bold" fontSize={18}>Card Title</Text>
-      </Card.Header>
-
-      <Card.Content>
-        <Text>
-          This card uses the structured layout with separate header, content, and footer sections.
-          The content area is where the main information goes.
-        </Text>
-      </Card.Content>
-
-      <Card.Footer>
-        <Horizontal justifyContent="flex-end" gap={10}>
-          <Button variant="outline">Cancel</Button>
-          <Button>Submit</Button>
-        </Horizontal>
-      </Card.Footer>
-    </Card>
-  );
-};
+export const FullWidthCard = () => (
+  <Card isFullWidth>
+    <Card.Content>
+      <Text>This card spans the full width</Text>
+    </Card.Content>
+  </Card>
+);
 ```
 
-### **Shapes**
-Different corner styles for the card.
+### **header**
+Optional header content for the card (alternative to Card.Header).
+
+- **Type:** `React.ReactNode`
 
 ```tsx
 import React from 'react';
-import { Card } from '../Card';
+import { Card } from '@app-studio/web';
 import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
-import { Shape } from '../Card/Card.type';
-
-export const ShapesDemo = () => {
-  const shapes: Shape[] = ['sharp', 'rounded', 'pillShaped'];
-
-  return (
-    <Vertical gap={20}>
-      {shapes.map((shape) => (
-        <Card key={shape} shape={shape} variant="outlined">
-          <Text fontWeight="bold">{shape} Card</Text>
-          <Text color="color.gray.500">
-            This card has {shape === 'sharp' ? 'no' : shape} corners.
-          </Text>
-        </Card>
-      ))}
-    </Vertical>
-  );
-};
+
+export const HeaderPropCard = () => (
+  <Card 
+    header={<Text fontWeight="bold">Header via prop</Text>}
+  >
+    <Text>Card content</Text>
+  </Card>
+);
 ```
 
-### **Sizes**
-Different padding sizes for the card.
+### **footer**
+Optional footer content for the card (alternative to Card.Footer).
+
+- **Type:** `React.ReactNode`
 
 ```tsx
 import React from 'react';
-import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Vertical } from 'app-studio';
-import { Size } from '../Card/Card.type';
-
-export const SizesDemo = () => {
-  const sizes: Size[] = ['sm', 'md', 'lg'];
-
-  return (
-    <Vertical gap={20}>
-      {sizes.map((size) => (
-        <Card key={size} size={size} variant="outlined">
-          <Text fontWeight="bold">{size.toUpperCase()} Size</Text>
-          <Text color="color.gray.500">
-            This card has {size} padding.
-          </Text>
-        </Card>
-      ))}
-    </Vertical>
-  );
-};
+import { Card } from '@app-studio/web';
+import { Text, Button } from 'app-studio';
+
+export const FooterPropCard = () => (
+  <Card 
+    footer={<Button>Action</Button>}
+  >
+    <Text>Card content</Text>
+  </Card>
+);
 ```
 
-### **Custom Styling**
-Customize the appearance of the card.
+### **views**
+Custom styles for different parts of the card.
+
+- **Type:** `CardStyles`
 
 ```tsx
 import React from 'react';
-import { Card } from '../Card';
+import { Card } from '@app-studio/web';
 import { Text } from 'app-studio';
-import { Horizontal } from 'app-studio';
-import { Button } from '../../Button/Button';
-
-export const CustomDemo = () => {
-  return (
-    <Card
-      views={{
-        container: {
-          backgroundColor: 'color.blue.50',
-          borderRadius: '16px',
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-        },
-        header: {
-          backgroundColor: 'color.blue.500',
-          color: 'color.white',
-          padding: '16px',
-          borderBottomWidth: '0',
-        },
-        content: {
-          padding: '24px',
-        },
-        footer: {
-          padding: '16px',
-          backgroundColor: 'color.gray.50',
-          borderTopWidth: '0',
-        },
-      }}
-    >
-      <Card.Header>
-        <Text fontWeight="bold" fontSize={18} color="white">
-          Custom Styled Card
-        </Text>
-      </Card.Header>
 
-      <Card.Content>
-        <Text>
-          This card has custom styling applied to all its parts.
-          You can customize the container, header, content, and footer.
-        </Text>
-      </Card.Content>
-
-      <Card.Footer>
-        <Horizontal justifyContent="flex-end" gap={10}>
-          <Button variant="outline">Cancel</Button>
-          <Button>Submit</Button>
-        </Horizontal>
-      </Card.Footer>
-    </Card>
-  );
-};
+export const StyledCard = () => (
+  <Card 
+    views={{
+      container: {
+        backgroundColor: '#f0f9ff',
+        borderColor: '#3b82f6',
+        borderWidth: 2,
+      },
+      header: {
+        backgroundColor: '#dbeafe',
+        padding: 15,
+      },
+      content: {
+        padding: 20,
+      },
+      footer: {
+        backgroundColor: '#eff6ff',
+        padding: 15,
+      }
+    }}
+  >
+    <Card.Header>
+      <Text>Styled Header</Text>
+    </Card.Header>
+    <Card.Content>
+      <Text>Styled Content</Text>
+    </Card.Content>
+    <Card.Footer>
+      <Text>Styled Footer</Text>
+    </Card.Footer>
+  </Card>
+);
 ```
 
-### **Context-Based Styling**
-The Card component uses a context-based styling system that allows styles to be passed down from the parent Card to its child components (Header, Content, Footer).
+### **Complex Example**
+A complete card with all features.
 
 ```tsx
 import React from 'react';
-import { Card } from '../Card';
-import { Text } from 'app-studio';
-import { Button } from '../../Button/Button';
-import { Horizontal } from 'app-studio';
-
-export const ContextStylingDemo = () => {
-  return (
-    <Card
-      views={{
-        // These styles will be passed down to all child components via context
-        container: {
-          backgroundColor: 'color.blue.50',
-          borderRadius: '12px',
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-        },
-        header: {
-          backgroundColor: 'color.blue.100',
-          padding: '16px',
-          borderBottomColor: 'color.blue.200',
-        },
-        content: {
-          padding: '24px',
-        },
-        footer: {
-          backgroundColor: 'color.blue.100',
-          padding: '16px',
-          borderTopColor: 'color.blue.200',
-        },
-      }}
-    >
-      <Card.Header>
-        <Text fontWeight="bold" fontSize={18}>
-          Context-Based Styling
-        </Text>
-      </Card.Header>
-
-      <Card.Content>
+import { Card } from '@app-studio/web';
+import { Text, Button, Horizontal, Vertical, Image } from 'app-studio';
+
+export const ComplexCard = () => (
+  <Card 
+    variant="elevated" 
+    size="lg" 
+    shape="rounded"
+    isFullWidth
+  >
+    <Card.Header>
+      <Horizontal justifyContent="space-between" alignItems="center">
+        <Text fontSize={20} fontWeight="bold">Product Card</Text>
+        <Text color="primary">$99.99</Text>
+      </Horizontal>
+    </Card.Header>
+    
+    <Card.Content>
+      <Vertical gap={15}>
+        <Image 
+          src="/product.jpg" 
+          width="100%" 
+          height={200}
+          borderRadius={8}
+        />
         <Text>
-          This card demonstrates the improved context-based styling system.
-          The styles defined in the Card's "views" prop are automatically
-          passed down to the Header, Content, and Footer components.
+          This is a detailed description of the product with all
+          its amazing features and benefits.
         </Text>
-      </Card.Content>
-
-      <Card.Footer>
-        <Horizontal justifyContent="flex-end" gap={10}>
-          <Button variant="outline">Cancel</Button>
-          <Button>Submit</Button>
-        </Horizontal>
-      </Card.Footer>
-    </Card>
-  );
-};
+      </Vertical>
+    </Card.Content>
+    
+    <Card.Footer>
+      <Horizontal gap={10} justifyContent="flex-end">
+        <Button variant="outline">Learn More</Button>
+        <Button variant="filled">Add to Cart</Button>
+      </Horizontal>
+    </Card.Footer>
+  </Card>
+);
 ```
 
-### **Theme Mode Support**
-The Card component supports both light and dark themes through the `themeMode` prop.
+### **Interactive Card**
+Card with hover effects and click handling.
 
 ```tsx
 import React from 'react';
-import { Card } from '../Card';
+import { Card } from '@app-studio/web';
 import { Text } from 'app-studio';
-import { Horizontal, Vertical } from 'app-studio';
-import { Button } from '../../Button/Button';
-
-export const DarkModeExample = () => {
-  return (
-    <Vertical gap={20}>
-      <Text fontSize={20} fontWeight="bold">Light Mode Cards</Text>
-      <Horizontal gap={20} alignItems="flex-start">
-        <Card variant="default" themeMode="light">
-          <Card.Header>
-            <Text fontWeight="bold">Default Card (Light)</Text>
-          </Card.Header>
-          <Card.Content>
-            <Text>This card uses light mode styling.</Text>
-          </Card.Content>
-          <Card.Footer>
-            <Button size="sm">Action</Button>
-          </Card.Footer>
-        </Card>
-
-        <Card variant="outlined" themeMode="light">
-          <Card.Header>
-            <Text fontWeight="bold">Outlined Card (Light)</Text>
-          </Card.Header>
-          <Card.Content>
-            <Text>This card uses light mode styling with an outline.</Text>
-          </Card.Content>
-          <Card.Footer>
-            <Button size="sm">Action</Button>
-          </Card.Footer>
-        </Card>
-      </Horizontal>
 
-      <Text fontSize={20} fontWeight="bold" marginTop={40}>Dark Mode Cards</Text>
-      <Horizontal gap={20} alignItems="flex-start">
-        <Card variant="default" themeMode="dark">
-          <Card.Header>
-            <Text fontWeight="bold">Default Card (Dark)</Text>
-          </Card.Header>
-          <Card.Content>
-            <Text>This card uses dark mode styling.</Text>
-          </Card.Content>
-          <Card.Footer>
-            <Button size="sm">Action</Button>
-          </Card.Footer>
-        </Card>
-
-        <Card variant="outlined" themeMode="dark">
-          <Card.Header>
-            <Text fontWeight="bold">Outlined Card (Dark)</Text>
-          </Card.Header>
-          <Card.Content>
-            <Text>This card uses dark mode styling with an outline.</Text>
-          </Card.Content>
-          <Card.Footer>
-            <Button size="sm">Action</Button>
-          </Card.Footer>
-        </Card>
-      </Horizontal>
-    </Vertical>
-  );
-};
+export const InteractiveCard = () => (
+  <Card 
+    onClick={() => console.log('Card clicked')}
+    cursor="pointer"
+    views={{
+      container: {
+        transition: 'all 0.3s ease',
+        hover: {
+          transform: 'translateY(-4px)',
+          boxShadow: '0 12px 24px rgba(0,0,0,0.15)',
+        }
+      }
+    }}
+  >
+    <Card.Content>
+      <Text>Click me!</Text>
+    </Card.Content>
+  </Card>
+);
 ```
+