@app-studio/components 0.10.17

package/docs/components/Sidebar.mdx

@@ -0,0 +1,86 @@
+# Sidebar
+
+A versatile layout component for navigation or content, typically positioned at the screen edges.
+
+### **Import**
+```tsx
+import { Sidebar } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Sidebar } from '@app-studio/components';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { HomeIcon,
+  SettingsIcon,
+  UserIcon,
+  NotificationIcon,
+  HelpIcon, } from '@app-studio/components';
+import { SideBarNavItem } from '@app-studio/components';
+
+export const DefaultSidebar = () => {
+  return (
+    <View
+      height="500px"
+      position="relative"
+      border="1px solid #e2e8f0"
+      borderRadius="8px"
+      overflow="hidden"
+    >
+      <Horizontal width="100%" height="100%">
+        <Sidebar defaultExpanded={true} fixed={false}>
+          <Sidebar.Header>
+            <Text fontWeight="bold" size="lg">
+              App Name
+            </Text>
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Vertical gap={8}>
+              <SideBarNavItem
+                icon={<HomeIcon widthHeight={20} />}
+                label="Home"
+                isActive
+              />
+              <SideBarNavItem
+                icon={<UserIcon widthHeight={20} />}
+                label="Profile"
+              />
+              <SideBarNavItem
+                icon={<NotificationIcon widthHeight={20} />}
+                label="Notifications"
+              />
+              <SideBarNavItem
+                icon={<SettingsIcon widthHeight={20} />}
+                label="Settings"
+              />
+              <SideBarNavItem
+                icon={<HelpIcon widthHeight={20} />}
+                label="Help"
+              />
+            </Vertical>
+          </Sidebar.Content>
+          <Sidebar.Footer>
+            <Text size="sm" color="color-gray-500">
+              © 2023 App Studio
+            </Text>
+          </Sidebar.Footer>
+        </Sidebar>
+        <View flex="1" padding="16px" backgroundColor="color-gray-50">
+          <Text fontWeight="bold" size="xl" marginBottom="16px">
+            Main Content
+          </Text>
+          <Text>
+            This is the main content area. It will adjust based on the sidebar
+            state.
+          </Text>
+        </View>
+      </Horizontal>
+    </View>
+  );
+};
+```
+

package/docs/components/Slider.mdx

@@ -0,0 +1,146 @@
+# Slider
+
+The Slider component allows users to select a single value from a predefined range by dragging a thumb.
+
+### **Import**
+```tsx
+import { Slider } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React, { useState } from 'react';
+import { Vertical } from 'app-studio';
+import { Slider } from '@app-studio/components';
+
+export const DefaultDemo = () => {
+  const [value, setValue] = useState(50);
+
+  const handleChange = (newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <Slider
+        label="Default Slider"
+        value={value}
+        onChange={handleChange}
+        showValue
+        helperText="Drag the slider to change the value"
+      />
+    </Vertical>
+  );
+};
+```
+
+### **stepValues**
+An optional array of specific values the slider thumb should snap to.
+
+- **Type:** `number[]`
+- **Possible Values:** ``
+
+```tsx
+import React, { useState } from 'react';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Text } from 'app-studio';
+import { Slider } from '@app-studio/components';
+
+export const StepValuesDemo = () => {
+  const [value, setValue] = useState(25);
+
+  // Define specific values that the slider can take
+  const stepValues = [0, 25, 50, 75, 100];
+
+  return (
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <Slider
+        label="Slider with Specific Steps"
+        value={value}
+        onChange={setValue}
+        min={0}
+        max={100}
+        stepValues={stepValues}
+        showValue
+        helperText="This slider only allows values: 0, 25, 50, 75, 100"
+      />
+
+      <Horizontal justifyContent="space-between" width="100%">
+        {stepValues.map((step) => (
+          <Text key={step} fontSize={12} color="color-blueGray-500">
+            {step}
+          </Text>
+        ))}
+      </Horizontal>
+    </Vertical>
+  );
+};
+
+export const PricingTiersDemo = () => {
+  const [value, setValue] = useState(19.99);
+
+  // Define pricing tiers
+  const pricingTiers = [9.99, 19.99, 29.99, 49.99, 99.99];
+
+  return (
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <Text fontSize={16} fontWeight={500}>
+        Select Your Pricing Plan
+      </Text>
+
+      <Slider
+        value={value}
+        onChange={setValue}
+        min={0}
+        max={100}
+        stepValues={pricingTiers}
+        showValue
+        views={{
+          track: {
+            backgroundColor: 'color-green-100',
+            height: 8,
+          },
+          progress: {
+            backgroundColor: 'color-green-500',
+          },
+          thumb: {
+            backgroundColor: 'color-white',
+            border: '2px solid color-green-500',
+          },
+          valueLabel: {
+            backgroundColor: 'color-green-500',
+            color: 'color-white',
+            padding: '2px 8px',
+            borderRadius: 4,
+            fontWeight: 600,
+          },
+          stepMarks: {
+            width: 6,
+            height: 6,
+            backgroundColor: 'color-green-700',
+          },
+        }}
+      />
+
+      <Horizontal justifyContent="space-between" width="100%">
+        {pricingTiers.map((price) => (
+          <Text
+            key={price}
+            fontSize={12}
+            color="color-green-700"
+            fontWeight={500}
+          >
+            ${price}
+          </Text>
+        ))}
+      </Horizontal>
+
+      <Text fontSize={14} color="color-blueGray-600" textAlign="center">
+        Selected Plan: ${value}/month
+      </Text>
+    </Vertical>
+  );
+};
+```
+

package/docs/components/StatusIndicator.mdx

@@ -0,0 +1,373 @@
+# StatusIndicator
+
+A status indicator component for displaying status states with labels and customizable styling.
+
+### **Import**
+```tsx
+import { StatusIndicator } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+
+export const DefaultStatusIndicator = () => (
+  <StatusIndicator status="success" />
+);
+```
+
+### **status**
+The status state to display.
+
+- **Type:** `Status`
+- **Possible Values:** `'success' | 'error' | 'warning' | 'info' | 'pending' | 'active' | 'inactive'`
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const StatusStates = () => (
+  <Vertical gap={15}>
+    <StatusIndicator status="success" />
+    <StatusIndicator status="error" />
+    <StatusIndicator status="warning" />
+    <StatusIndicator status="info" />
+    <StatusIndicator status="pending" />
+    <StatusIndicator status="active" />
+    <StatusIndicator status="inactive" />
+  </Vertical>
+);
+```
+
+### **label**
+Label text to display next to the indicator.
+
+- **Type:** `string`
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Vertical } from 'app-studio';
+
+export const LabeledStatusIndicators = () => (
+  <Vertical gap={15}>
+    <StatusIndicator status="success" label="Completed" />
+    <StatusIndicator status="error" label="Failed" />
+    <StatusIndicator status="warning" label="Warning" />
+    <StatusIndicator status="info" label="Information" />
+    <StatusIndicator status="pending" label="Pending" />
+    <StatusIndicator status="active" label="Active" />
+    <StatusIndicator status="inactive" label="Inactive" />
+  </Vertical>
+);
+```
+
+### **themeMode**
+Optional theme mode override.
+
+- **Type:** `'light' | 'dark'`
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+
+export const ThemedStatusIndicators = () => (
+  <Horizontal gap={20}>
+    <StatusIndicator 
+      status="success" 
+      label="Light Mode" 
+      themeMode="light" 
+    />
+    <StatusIndicator 
+      status="success" 
+      label="Dark Mode" 
+      themeMode="dark" 
+    />
+  </Horizontal>
+);
+```
+
+### **views**
+Custom styles for the status indicator.
+
+- **Type:** `StatusIndicatorStyles`
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+
+export const StyledStatusIndicator = () => (
+  <StatusIndicator 
+    status="success" 
+    label="Custom Styled"
+    views={{
+      container: {
+        padding: 10,
+        backgroundColor: '#f0fdf4',
+        borderRadius: 8,
+      },
+      indicator: {
+        width: 12,
+        height: 12,
+      },
+      label: {
+        fontSize: 16,
+        fontWeight: 'bold',
+      }
+    }}
+  />
+);
+```
+
+### **User Status**
+Showing online/offline status.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Horizontal, Avatar, Vertical, Text } from 'app-studio';
+
+export const UserStatus = () => (
+  <Horizontal gap={15} alignItems="center">
+    <Avatar src="/user.jpg" size={48} />
+    <Vertical gap={5}>
+      <Text fontWeight="bold">John Doe</Text>
+      <StatusIndicator status="active" label="Online" />
+    </Vertical>
+  </Horizontal>
+);
+```
+
+### **Order Status**
+Displaying order or shipment status.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Vertical, Text, Card } from 'app-studio';
+
+export const OrderStatus = () => (
+  <Card padding={20}>
+    <Vertical gap={15}>
+      <Text fontSize={18} fontWeight="bold">Order #12345</Text>
+      <StatusIndicator status="success" label="Delivered" />
+      <Text fontSize={14} color="color-coolGray-500">
+        Your order was delivered on March 15, 2024
+      </Text>
+    </Vertical>
+  </Card>
+);
+```
+
+### **System Status**
+Showing system or service status.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Vertical, Horizontal, Text } from 'app-studio';
+
+export const SystemStatus = () => (
+  <Vertical gap={15}>
+    <Text fontSize={20} fontWeight="bold">System Status</Text>
+    
+    <Vertical gap={10}>
+      <Horizontal justifyContent="space-between" alignItems="center">
+        <Text>API Server</Text>
+        <StatusIndicator status="active" label="Operational" />
+      </Horizontal>
+      
+      <Horizontal justifyContent="space-between" alignItems="center">
+        <Text>Database</Text>
+        <StatusIndicator status="active" label="Operational" />
+      </Horizontal>
+      
+      <Horizontal justifyContent="space-between" alignItems="center">
+        <Text>CDN</Text>
+        <StatusIndicator status="warning" label="Degraded" />
+      </Horizontal>
+      
+      <Horizontal justifyContent="space-between" alignItems="center">
+        <Text>Email Service</Text>
+        <StatusIndicator status="error" label="Down" />
+      </Horizontal>
+    </Vertical>
+  </Vertical>
+);
+```
+
+### **Task Status**
+Displaying task or project status.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Vertical, Horizontal, Text } from 'app-studio';
+
+export const TaskStatus = () => {
+  const tasks = [
+    { id: 1, name: 'Design mockups', status: 'success' as const, label: 'Complete' },
+    { id: 2, name: 'Develop frontend', status: 'active' as const, label: 'In Progress' },
+    { id: 3, name: 'Write tests', status: 'pending' as const, label: 'Pending' },
+    { id: 4, name: 'Deploy to production', status: 'inactive' as const, label: 'Not Started' },
+  ];
+  
+  return (
+    <Vertical gap={15}>
+      {tasks.map((task) => (
+        <Horizontal key={task.id} justifyContent="space-between" alignItems="center">
+          <Text>{task.name}</Text>
+          <StatusIndicator status={task.status} label={task.label} />
+        </Horizontal>
+      ))}
+    </Vertical>
+  );
+};
+```
+
+### **Payment Status**
+Showing payment or transaction status.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Vertical, Horizontal, Text, Card } from 'app-studio';
+
+export const PaymentStatus = () => (
+  <Card padding={20}>
+    <Vertical gap={15}>
+      <Horizontal justifyContent="space-between" alignItems="center">
+        <Vertical gap={5}>
+          <Text fontSize={16} fontWeight="bold">Payment to Acme Corp</Text>
+          <Text fontSize={14} color="color-coolGray-500">$1,234.56</Text>
+        </Vertical>
+        <StatusIndicator status="success" label="Paid" />
+      </Horizontal>
+      
+      <Text fontSize={14} color="color-coolGray-500">
+        Transaction ID: TXN-2024-03-15-001
+      </Text>
+    </Vertical>
+  </Card>
+);
+```
+
+### **Server Status Dashboard**
+A complete server status dashboard.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Vertical, Horizontal, Text, Card } from 'app-studio';
+
+export const ServerStatusDashboard = () => {
+  const servers = [
+    { name: 'Web Server 1', status: 'active' as const, uptime: '99.9%' },
+    { name: 'Web Server 2', status: 'active' as const, uptime: '99.8%' },
+    { name: 'Database Primary', status: 'active' as const, uptime: '100%' },
+    { name: 'Database Replica', status: 'warning' as const, uptime: '95.2%' },
+    { name: 'Cache Server', status: 'error' as const, uptime: '0%' },
+  ];
+  
+  return (
+    <Card padding={20}>
+      <Vertical gap={20}>
+        <Text fontSize={20} fontWeight="bold">Server Status</Text>
+        
+        <Vertical gap={15}>
+          {servers.map((server) => (
+            <Card key={server.name} padding={15} variant="outlined">
+              <Horizontal justifyContent="space-between" alignItems="center">
+                <Vertical gap={5}>
+                  <Text fontWeight="bold">{server.name}</Text>
+                  <Text fontSize={14} color="color-coolGray-500">
+                    Uptime: {server.uptime}
+                  </Text>
+                </Vertical>
+                <StatusIndicator 
+                  status={server.status} 
+                  label={
+                    server.status === 'active' ? 'Online' :
+                    server.status === 'warning' ? 'Degraded' :
+                    'Offline'
+                  }
+                />
+              </Horizontal>
+            </Card>
+          ))}
+        </Vertical>
+      </Vertical>
+    </Card>
+  );
+};
+```
+
+### **Notification Status**
+Using status indicators in notifications.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+import { Vertical, Horizontal, Text } from 'app-studio';
+
+export const NotificationStatus = () => {
+  const notifications = [
+    { 
+      id: 1, 
+      message: 'Deployment successful', 
+      status: 'success' as const,
+      time: '2 minutes ago' 
+    },
+    { 
+      id: 2, 
+      message: 'High memory usage detected', 
+      status: 'warning' as const,
+      time: '5 minutes ago' 
+    },
+    { 
+      id: 3, 
+      message: 'Build failed', 
+      status: 'error' as const,
+      time: '10 minutes ago' 
+    },
+  ];
+  
+  return (
+    <Vertical gap={10}>
+      {notifications.map((notification) => (
+        <Horizontal key={notification.id} gap={10} alignItems="flex-start">
+          <StatusIndicator status={notification.status} />
+          <Vertical gap={2}>
+            <Text>{notification.message}</Text>
+            <Text fontSize={12} color="color-coolGray-500">{notification.time}</Text>
+          </Vertical>
+        </Horizontal>
+      ))}
+    </Vertical>
+  );
+};
+```
+
+### **Animated Status**
+Status indicator with pulse animation.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/components';
+
+export const AnimatedStatusIndicator = () => (
+  <StatusIndicator 
+    status="active" 
+    label="Live"
+    views={{
+      indicator: {
+        animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      }
+    }}
+  />
+);
+```
+

package/docs/components/Switch.mdx

@@ -0,0 +1,62 @@
+# Switch
+
+A toggle switch for user interactions like turning settings on or off.
+
+## Props
+
+| Prop          | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| name             | string        | Name of the switch.                                                                                                                        |         |
+| id               | string        | Id of the switch.                                                                                                                          |         |
+| colorScheme      | string        | Defines the color theme for the switch component.                                                                                             |         |
+| shadow           | Shadow        | Defines the shadow appearance of the switch using predefined Shadow or Elevation, or a custom CSSProperties object.                        |         |
+| styles           | CSSProperties | Optional custom styles for the switch component.                                                                                              |         |
+| className        | string        | Optional className for the switch component.                                                                                                |         |
+| isChecked        | boolean       | Defines the initial toggle state.                                                                                                          | false   |
+| isDisabled       | boolean       | Sets the toggle component as disabled or not.                                                                                              | false   |
+
+### **Import**
+  ```tsx
+  import { Switch } from '@app-studio/components';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Switch } from '@app-studio/components';
+
+export const DefaultSwitch = () => <Switch id="check" name="checkbox" />;
+
+```
+
+### **colorScheme**
+Defines the color theme for the switch component.
+
+```tsx
+import React from 'react';
+
+import { Switch } from '@app-studio/components';
+
+export const ColorSwitch = () => (
+  <Switch name="name" colorScheme="theme-primary" isChecked />
+);
+
+```
+
+### **shadow**
+Defines the shadow appearance of the switch using predefined Shadow or Elevation, or a custom CSSProperties object.
+
+```tsx
+import React from 'react';
+import { Switch } from '@app-studio/components';
+
+export const ShadowSwitch = () => (
+  <Switch
+    id="shadowCheckbox"
+    name="shadowCheckbox"
+    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
+    isChecked
+  />
+);
+
+```