@app-studio/web 0.9.41 → 0.9.44

package/docs/components/Slider.mdx

@@ -1,18 +1,19 @@
 # Slider
 
-A component that allows users to select a value from a range by moving a handle.
+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/web';
-  ```
+```tsx
+import { Slider } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React, { useState } from 'react';
-import { Slider } from '../Slider';
+import { Vertical } from 'app-studio';
+import { Slider } from '@app-studio/web';
 
-export const DefaultSlider = () => {
+export const DefaultDemo = () => {
   const [value, setValue] = useState(50);
 
   const handleChange = (newValue: number) => {
@@ -20,213 +21,126 @@ export const DefaultSlider = () => {
   };
 
   return (
-    <Slider
-      label="Default Slider"
-      value={value}
-      onChange={handleChange}
-      showValue
-      helperText="Drag the slider to change the value"
-    />
+    <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>
   );
 };
 ```
 
-### **Range**
-Customize the min, max, and step values.
-
-```tsx
-import React, { useState } from 'react';
-import { Slider } from '../Slider';
-
-export const RangeSlider = () => {
-  const [value, setValue] = useState(25);
-
-  return (
-    <Slider
-      label="Custom Range"
-      value={value}
-      onChange={setValue}
-      min={0}
-      max={200}
-      step={5}
-      showValue
-      helperText="Range from 0 to 200 with steps of 5"
-    />
-  );
-};
-```
+### **stepValues**
+An optional array of specific values the slider thumb should snap to.
 
-### **Step Values**
-Use specific step values instead of a continuous range.
+- **Type:** `number[]`
+- **Possible Values:** ``
 
 ```tsx
 import React, { useState } from 'react';
-import { Slider } from '../Slider';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Text } from 'app-studio';
+import { Slider } from '@app-studio/web';
 
-export const StepValuesSlider = () => {
-  const [value, setValue] = useState(40);
-  const stepValues = [0, 20, 40, 60, 80, 100];
-
-  return (
-    <Slider
-      label="Step Values Slider"
-      value={value}
-      onChange={setValue}
-      min={0}
-      max={100}
-      stepValues={stepValues}
-      showValue
-      helperText="This slider only allows specific values"
-    />
-  );
-};
-```
-
-### **Orientation**
-Change the orientation of the slider.
-
-```tsx
-import React, { useState } from 'react';
-import { Slider } from '../Slider';
-import { View } from '@app-studio/web';
+export const StepValuesDemo = () => {
+  const [value, setValue] = useState(25);
 
-export const VerticalSlider = () => {
-  const [value, setValue] = useState(50);
+  // Define specific values that the slider can take
+  const stepValues = [0, 25, 50, 75, 100];
 
   return (
-    <View height={250}>
+    <Vertical gap={20} width="100%" maxWidth={400}>
       <Slider
-        orientation="vertical"
+        label="Slider with Specific Steps"
         value={value}
         onChange={setValue}
         min={0}
         max={100}
-        step={1}
-        showTooltip
-        ariaLabel="Vertical slider"
+        stepValues={stepValues}
+        showValue
+        helperText="This slider only allows values: 0, 25, 50, 75, 100"
       />
-    </View>
-  );
-};
-```
-
-### **Tooltip**
-Show a tooltip when dragging the slider.
 
-```tsx
-import React, { useState } from 'react';
-import { Slider } from '../Slider';
-
-export const TooltipSlider = () => {
-  const [value, setValue] = useState(50);
-
-  return (
-    <Slider
-      label="Slider with Tooltip"
-      value={value}
-      onChange={setValue}
-      showTooltip
-      helperText="Drag to see the tooltip"
-    />
+      <Horizontal justifyContent="space-between" width="100%">
+        {stepValues.map((step) => (
+          <Text key={step} fontSize={12} color="color.blueGray.500">
+            {step}
+          </Text>
+        ))}
+      </Horizontal>
+    </Vertical>
   );
 };
-```
 
-### **Disabled**
-Disable the slider to prevent interaction.
+export const PricingTiersDemo = () => {
+  const [value, setValue] = useState(19.99);
 
-```tsx
-import React from 'react';
-import { Slider } from '../Slider';
+  // Define pricing tiers
+  const pricingTiers = [9.99, 19.99, 29.99, 49.99, 99.99];
 
-export const DisabledSlider = () => {
   return (
-    <Slider
-      label="Disabled Slider"
-      value={30}
-      isDisabled
-      helperText="This slider cannot be interacted with"
-    />
-  );
-};
-```
-
-### **Custom Styling**
-Customize the appearance of the slider.
-
-```tsx
-import React, { useState } from 'react';
-import { Slider } from '../Slider';
+    <Vertical gap={20} width="100%" maxWidth={400}>
+      <Text fontSize={16} fontWeight={500}>
+        Select Your Pricing Plan
+      </Text>
 
-export const CustomStyledSlider = () => {
-  const [value, setValue] = useState(60);
+      <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',
+          },
+        }}
+      />
 
-  return (
-    <Slider
-      label="Custom Styled Slider"
-      value={value}
-      onChange={setValue}
-      showValue
-      colorScheme="theme.secondary"
-      views={{
-        track: {
-          backgroundColor: 'color.gray.200',
-          height: 8,
-          borderRadius: 4,
-        },
-        progress: {
-          backgroundColor: 'color.blue.500',
-        },
-        thumb: {
-          backgroundColor: 'color.white',
-          border: '2px solid color.blue.500',
-          width: 20,
-          height: 20,
-        },
-        valueLabel: {
-          color: 'color.blue.500',
-          fontWeight: 'bold',
-        },
-      }}
-    />
+      <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>
   );
 };
 ```
 
-### **Formik Integration**
-Use the slider with Formik for form state management.
-
-```tsx
-import React from 'react';
-import { Formik, Form } from 'formik';
-import { FormikSlider } from '../../Formik/Formik.Slider';
-import { Button } from '../../Button/Button';
-
-export const FormikSliderExample = () => {
-  return (
-    <Formik
-      initialValues={{ slider: 50 }}
-      onSubmit={(values) => {
-        alert(JSON.stringify(values, null, 2));
-      }}
-    >
-      {({ handleSubmit }) => (
-        <Form>
-          <FormikSlider
-            name="slider"
-            label="Formik Slider"
-            min={0}
-            max={100}
-            step={1}
-            showValue
-            helperText="This slider is connected to Formik"
-          />
-          <Button type="submit" onClick={handleSubmit} marginTop={16}>
-            Submit
-          </Button>
-        </Form>
-      )}
-    </Formik>
-  );
-};
-```

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/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/web';
+
+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/web';
+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/web';
+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/web';
+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/web';
+
+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/web';
+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/web';
+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="#6b7280">
+        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/web';
+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/web';
+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/web';
+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="#6b7280">$1,234.56</Text>
+        </Vertical>
+        <StatusIndicator status="success" label="Paid" />
+      </Horizontal>
+      
+      <Text fontSize={14} color="#6b7280">
+        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/web';
+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="#6b7280">
+                    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/web';
+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="#6b7280">{notification.time}</Text>
+          </Vertical>
+        </Horizontal>
+      ))}
+    </Vertical>
+  );
+};
+```
+
+### **Animated Status**
+Status indicator with pulse animation.
+
+```tsx
+import React from 'react';
+import { StatusIndicator } from '@app-studio/web';
+
+export const AnimatedStatusIndicator = () => (
+  <StatusIndicator 
+    status="active" 
+    label="Live"
+    views={{
+      indicator: {
+        animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      }
+    }}
+  />
+);
+```
+