@app-studio/components 0.10.17

package/docs/components/Carousel.mdx

@@ -0,0 +1,184 @@
+# Carousel
+
+A versatile component for displaying a collection of content in a rotating sequence with navigation.
+
+### **Import**
+```tsx
+import { Carousel } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Carousel } from '@app-studio/components';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+
+export const DefaultDemo = () => {
+  // Create an array of slides with different background colors
+  const slides = [
+    { color: 'color-blue-500', text: 'Slide 1' },
+    { color: 'color-green-500', text: 'Slide 2' },
+    { color: 'color-purple-500', text: 'Slide 3' },
+    { color: 'color-orange-500', text: 'Slide 4' },
+  ];
+
+  return (
+    <View height="300px" width="100%">
+      <Carousel>
+        {slides.map((slide, index) => (
+          <View
+            key={index}
+            backgroundColor={slide.color}
+            width="100%"
+            height="100%"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text color="white" fontSize="24px" fontWeight="bold">
+              {slide.text}
+            </Text>
+          </View>
+        ))}
+      </Carousel>
+    </View>
+  );
+};
+```
+
+### **autoPlay**
+Enables or disables automatic slide progression.
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **Possible Values:** ``
+
+```tsx
+import React from 'react';
+import { Carousel } from '@app-studio/components';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+
+export const AutoPlayDemo = () => {
+  // Create an array of slides with different background colors
+  const slides = [
+    { color: 'color-red-500', text: 'Auto-play Slide 1' },
+    { color: 'color-yellow-500', text: 'Auto-play Slide 2' },
+    { color: 'color-teal-500', text: 'Auto-play Slide 3' },
+    { color: 'color-pink-500', text: 'Auto-play Slide 4' },
+  ];
+
+  return (
+    <View height="300px" width="100%">
+      <Carousel autoPlay autoPlayInterval={2000} pauseOnHover>
+        {slides.map((slide, index) => (
+          <Vertical
+            key={index}
+            backgroundColor={slide.color}
+            width="100%"
+            height="100%"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Text color="white" fontSize="24px" fontWeight="bold">
+              {slide.text}
+            </Text>
+            <Text color="white" fontSize="16px" marginTop="10px">
+              Auto-advances every 2 seconds. Hover to pause.
+            </Text>
+          </Vertical>
+        ))}
+      </Carousel>
+    </View>
+  );
+};
+```
+
+### **stepIndices**
+An optional array of indices that define specific steps or points in the carousel navigation.
+
+- **Type:** `number[]`
+- **Possible Values:** ``
+
+```tsx
+import React, { useState } from 'react';
+import { Carousel } from '@app-studio/components';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Button } from '@app-studio/components';
+
+export const StepIndicesDemo = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  // Create an array of slides
+  const slides = [
+    { color: 'color-blue-500', text: 'Introduction', id: 0 },
+    { color: 'color-gray-400', text: 'Step 1', id: 1 },
+    { color: 'color-gray-400', text: 'Step 2', id: 2 },
+    { color: 'color-gray-400', text: 'Step 3', id: 3 },
+    { color: 'color-gray-400', text: 'Step 4', id: 4 },
+    { color: 'color-green-500', text: 'Summary', id: 5 },
+  ];
+
+  // Only allow navigation to specific slides (introduction, steps 2 & 4, summary)
+  const stepIndices = [0, 2, 4, 5];
+
+  return (
+    <View>
+      <Text fontWeight="bold" marginBottom={2}>
+        Step Navigation (Only specific slides)
+      </Text>
+      <View height="300px" width="100%">
+        <Carousel
+          activeIndex={activeIndex}
+          onChange={setActiveIndex}
+          stepIndices={stepIndices}
+          showIndicators={false}
+        >
+          {slides.map((slide, index) => (
+            <View
+              key={index}
+              backgroundColor={
+                stepIndices.includes(index) ? slide.color : 'color-gray-400'
+              }
+              width="100%"
+              height="100%"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              flexDirection="column"
+              gap={4}
+            >
+              <Text color="white" fontSize="24px" fontWeight="bold">
+                {slide.text}
+              </Text>
+              <Text color="white" fontSize="16px">
+                {stepIndices.includes(index)
+                  ? 'This is an allowed step'
+                  : 'This slide is skipped in navigation'}
+              </Text>
+            </View>
+          ))}
+        </Carousel>
+      </View>
+
+      <Horizontal justifyContent="center" gap={4} marginTop={4}>
+        {stepIndices.map((index) => (
+          <Button
+            key={index}
+            onClick={() => setActiveIndex(index)}
+            variant={activeIndex === index ? 'filled' : 'outline'}
+          >
+            {slides[index].text}
+          </Button>
+        ))}
+      </Horizontal>
+    </View>
+  );
+};
+```
+

package/docs/components/Center.mdx

@@ -0,0 +1,474 @@
+# Center
+
+A layout component that centers its children both horizontally and vertically within its bounds using CSS Flexbox. Perfect for creating loading states, empty states, modal content, hero sections, and any content that needs perfect centering.
+
+### **Import**
+  ```tsx
+  import { Center } from '@app-studio/components';
+  // or from app-studio
+  import { Center } from '@app-studio/components';
+  ```
+
+### **Basic Usage**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { Text } from '@app-studio/components';
+
+export const BasicCenter = () => (
+  <Center height={200} backgroundColor="color-gray-100">
+    <Text fontSize={18} fontWeight="bold">
+      Centered Content
+    </Text>
+  </Center>
+);
+```
+
+### **Loading State Example**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { Loader } from '@app-studio/components';
+import { Text, Vertical } from '@app-studio/components';
+
+export const LoadingCenter = () => (
+  <Center height="100vh" backgroundColor="color-white">
+    <Vertical gap={16} alignItems="center">
+      <Loader size="lg" />
+      <Text color="color-gray-600">Loading...</Text>
+    </Vertical>
+  </Center>
+);
+```
+
+### **Empty State Example**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { Button } from '@app-studio/components';
+import { Text, Vertical } from '@app-studio/components';
+import { FolderIcon } from '@app-studio/components';
+
+export const EmptyStateCenter = () => (
+  <Center height={400} backgroundColor="color-gray-50" borderRadius={12}>
+    <Vertical gap={20} alignItems="center" textAlign="center">
+      <FolderIcon widthHeight={64} color="color-gray-400" />
+      <Vertical gap={8} alignItems="center">
+        <Text fontSize={20} fontWeight="bold" color="color-gray-700">
+          No items found
+        </Text>
+        <Text color="color-gray-500" maxWidth={300}>
+          There are no items to display. Create your first item to get started.
+        </Text>
+      </Vertical>
+      <Button variant="filled" colorScheme="theme-primary">
+        Create Item
+      </Button>
+    </Vertical>
+  </Center>
+);
+```
+
+### **Modal Content Example**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { Modal, Button } from '@app-studio/components';
+import { Text, Vertical, Horizontal } from '@app-studio/components';
+
+export const ModalCenter = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>
+        Open Modal
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Center padding={40}>
+          <Vertical gap={24} alignItems="center" textAlign="center">
+            <Text fontSize={24} fontWeight="bold">
+              Confirm Action
+            </Text>
+            <Text color="color-gray-600" maxWidth={300}>
+              Are you sure you want to delete this item? This action cannot be undone.
+            </Text>
+            <Horizontal gap={12}>
+              <Button
+                variant="outline"
+                onClick={() => setIsOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="filled"
+                colorScheme="theme-error"
+                onClick={() => setIsOpen(false)}
+              >
+                Delete
+              </Button>
+            </Horizontal>
+          </Vertical>
+        </Center>
+      </Modal>
+    </>
+  );
+};
+```
+
+### **Hero Section Example**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { Button } from '@app-studio/components';
+import { Text, Vertical, Horizontal } from '@app-studio/components';
+
+export const HeroCenter = () => (
+  <Center
+    height="100vh"
+    backgroundImage="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+    color="color-white"
+  >
+    <Vertical gap={32} alignItems="center" textAlign="center" maxWidth={600}>
+      <Vertical gap={16} alignItems="center">
+        <Text fontSize={48} fontWeight="bold">
+          Build Amazing Apps
+        </Text>
+        <Text fontSize={20} opacity={0.9}>
+          Create beautiful, responsive applications with our comprehensive
+          component library and design system.
+        </Text>
+      </Vertical>
+
+      <Horizontal gap={16}>
+        <Button
+          variant="filled"
+          size="lg"
+          backgroundColor="color-white"
+          color="color-gray-900"
+        >
+          Get Started
+        </Button>
+        <Button
+          variant="outline"
+          size="lg"
+          borderColor="color-white"
+          color="color-white"
+        >
+          Learn More
+        </Button>
+      </Horizontal>
+    </Vertical>
+  </Center>
+);
+```
+
+### **Card Center Example**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { View, Text, Vertical } from '@app-studio/components';
+import { StarIcon } from '@app-studio/components';
+
+export const CardCenter = () => (
+  <View
+    width={300}
+    height={200}
+    border="1px solid"
+    borderColor="color-gray-200"
+    borderRadius={12}
+    backgroundColor="color-white"
+    boxShadow="0 4px 12px rgba(0,0,0,0.1)"
+  >
+    <Center height="100%">
+      <Vertical gap={12} alignItems="center">
+        <StarIcon widthHeight={32} color="color-yellow-500" filled />
+        <Text fontSize={18} fontWeight="bold">
+          Premium Feature
+        </Text>
+        <Text color="color-gray-600" textAlign="center" fontSize={14}>
+          Unlock advanced features with our premium plan
+        </Text>
+      </Vertical>
+    </Center>
+  </View>
+);
+```
+
+### **Props**
+
+The Center component extends ViewProps from app-studio, inheriting all standard view properties:
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| children | React.ReactNode | undefined | Content to be centered |
+| gap | number \| string | 0 | Space between child elements (if multiple) |
+
+**Inherited ViewProps:**
+- `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`
+- `padding`, `margin`, `paddingTop`, `paddingBottom`, etc.
+- `backgroundColor`, `border`, `borderRadius`, `boxShadow`
+- `position`, `top`, `left`, `right`, `bottom`, `zIndex`
+- `overflow`, `cursor`, `opacity`, `transform`
+- All CSS properties and responsive breakpoint props
+
+### **Responsive Centering**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { Text, Vertical } from '@app-studio/components';
+
+export const ResponsiveCenter = () => (
+  <Center
+    height={{ mobile: '50vh', tablet: '60vh', desktop: '100vh' }}
+    padding={{ mobile: 16, tablet: 24, desktop: 32 }}
+  >
+    <Vertical
+      gap={16}
+      alignItems="center"
+      textAlign="center"
+      maxWidth={{ mobile: 300, tablet: 400, desktop: 500 }}
+    >
+      <Text
+        fontSize={{ mobile: 24, tablet: 32, desktop: 40 }}
+        fontWeight="bold"
+      >
+        Responsive Title
+      </Text>
+      <Text
+        fontSize={{ mobile: 14, tablet: 16, desktop: 18 }}
+        color="color-gray-600"
+      >
+        This content adapts to different screen sizes
+      </Text>
+    </Vertical>
+  </Center>
+);
+```
+
+### **Multiple Children with Gap**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { View } from '@app-studio/components';
+
+export const CenterWithGap = () => (
+  <Center height={300} gap={16}>
+    <View
+      width={60}
+      height={60}
+      backgroundColor="color-red-400"
+      borderRadius={8}
+    />
+    <View
+      width={60}
+      height={60}
+      backgroundColor="color-blue-400"
+      borderRadius={8}
+    />
+    <View
+      width={60}
+      height={60}
+      backgroundColor="color-green-400"
+      borderRadius={8}
+    />
+  </Center>
+);
+```
+
+### **Error State Example**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { Button } from '@app-studio/components';
+import { Text, Vertical } from '@app-studio/components';
+import { ErrorIcon } from '@app-studio/components';
+
+export const ErrorStateCenter = () => (
+  <Center
+    height={400}
+    backgroundColor="color-red-50"
+    borderRadius={12}
+    border="1px solid"
+    borderColor="color-red-200"
+  >
+    <Vertical gap={20} alignItems="center" textAlign="center">
+      <ErrorIcon widthHeight={48} color="color-red-500" />
+      <Vertical gap={8} alignItems="center">
+        <Text fontSize={18} fontWeight="bold" color="color-red-700">
+          Something went wrong
+        </Text>
+        <Text color="color-red-600" maxWidth={300}>
+          We encountered an error while processing your request.
+          Please try again or contact support.
+        </Text>
+      </Vertical>
+      <Button
+        variant="filled"
+        colorScheme="theme-error"
+        onClick={() => window.location.reload()}
+      >
+        Try Again
+      </Button>
+    </Vertical>
+  </Center>
+);
+```
+
+### **Image Placeholder Example**
+```tsx
+import React from 'react';
+import { Center } from '@app-studio/components';
+import { Text } from '@app-studio/components';
+import { ImageIcon } from '@app-studio/components';
+
+export const ImagePlaceholder = () => (
+  <Center
+    width={300}
+    height={200}
+    backgroundColor="color-gray-100"
+    border="2px dashed"
+    borderColor="color-gray-300"
+    borderRadius={8}
+    cursor="pointer"
+    _hover={{
+      backgroundColor: 'color-gray-200',
+      borderColor: 'color-gray-400',
+    }}
+  >
+    <Vertical gap={8} alignItems="center">
+      <ImageIcon widthHeight={32} color="color-gray-500" />
+      <Text color="color-gray-600" fontSize={14}>
+        Click to upload image
+      </Text>
+    </Vertical>
+  </Center>
+);
+```
+
+### **Best Practices**
+
+**When to Use Center:**
+- Loading states and spinners
+- Empty states and placeholders
+- Modal and dialog content
+- Hero sections and landing pages
+- Error states and messages
+- Single-item displays (icons, logos, etc.)
+
+**Layout Considerations:**
+- Always specify a height for proper centering
+- Use appropriate container sizes for content
+- Consider responsive behavior across devices
+- Ensure content doesn't overflow on small screens
+
+**Accessibility:**
+- Ensure centered content is keyboard accessible
+- Use proper heading hierarchy
+- Provide alternative text for images
+- Consider screen reader navigation
+
+**Performance:**
+- Avoid unnecessary nesting of Center components
+- Use CSS transforms for animations instead of changing layout
+- Consider using CSS Grid for complex centered layouts
+
+### **Common Patterns**
+
+**Splash Screen:**
+```tsx
+<Center height="100vh" backgroundColor="theme-primary">
+  <Vertical gap={24} alignItems="center">
+    <Logo size="lg" />
+    <Loader color="color-white" />
+  </Vertical>
+</Center>
+```
+
+**Feature Highlight:**
+```tsx
+<Center height={300} backgroundColor="color-blue-50">
+  <Vertical gap={16} alignItems="center" textAlign="center">
+    <FeatureIcon widthHeight={48} />
+    <Text fontSize={20} fontWeight="bold">Feature Name</Text>
+    <Text color="color-gray-600">Feature description</Text>
+  </Vertical>
+</Center>
+```
+
+**Call to Action:**
+```tsx
+<Center padding={40} backgroundColor="color-gray-900" color="color-white">
+  <Vertical gap={20} alignItems="center" textAlign="center">
+    <Text fontSize={24} fontWeight="bold">Ready to get started?</Text>
+    <Button variant="filled" size="lg">Get Started Now</Button>
+  </Vertical>
+</Center>
+```
+
+### **Integration with Other Components**
+
+The Center component works well with other layout components:
+
+```tsx
+import { Center, Vertical, Horizontal } from '@app-studio/components';
+
+// Centered content within a larger layout
+<Vertical height="100vh">
+  <Header />
+  <Center flex={1}>
+    <MainContent />
+  </Center>
+  <Footer />
+</Vertical>
+
+// Horizontally centered, vertically stacked
+<Horizontal height="100vh">
+  <Sidebar />
+  <Center flex={1}>
+    <Vertical gap={20}>
+      <Title />
+      <Content />
+      <Actions />
+    </Vertical>
+  </Center>
+</Horizontal>
+```
+
+### **Advanced Usage**
+
+**Custom Centering Logic:**
+```tsx
+// For more complex centering needs, you can extend Center
+const CustomCenter = ({ children, ...props }) => (
+  <Center
+    position="relative"
+    {...props}
+  >
+    <View
+      position="absolute"
+      top="50%"
+      left="50%"
+      transform="translate(-50%, -50%)"
+    >
+      {children}
+    </View>
+  </Center>
+);
+```
+
+**Animated Center:**
+```tsx
+const AnimatedCenter = ({ children, ...props }) => (
+  <Center
+    transition="all 0.3s ease"
+    _hover={{
+      transform: 'scale(1.05)',
+    }}
+    {...props}
+  >
+    {children}
+  </Center>
+);
+```