@app-studio/web 0.9.41 → 0.9.43

package/docs/components/ProgressBar.mdx

@@ -0,0 +1,460 @@
+# ProgressBar
+
+A progress bar component for displaying progress or completion status with customizable colors, height, and styling.
+
+### **Import**
+```tsx
+import { ProgressBar } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+
+export const DefaultProgressBar = () => (
+  <ProgressBar value={50} />
+);
+```
+
+### **value**
+Current progress value.
+
+- **Type:** `number`
+- **Default:** `0`
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+
+export const ProgressValues = () => (
+  <Vertical gap={15}>
+    <ProgressBar value={0} />
+    <ProgressBar value={25} />
+    <ProgressBar value={50} />
+    <ProgressBar value={75} />
+    <ProgressBar value={100} />
+  </Vertical>
+);
+```
+
+### **max**
+Maximum progress value.
+
+- **Type:** `number`
+- **Default:** `100`
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical, Text } from 'app-studio';
+
+export const CustomMaxProgressBar = () => (
+  <Vertical gap={10}>
+    <Text>Progress: 30 out of 200</Text>
+    <ProgressBar value={30} max={200} />
+  </Vertical>
+);
+```
+
+### **color**
+Color of the filled portion.
+
+- **Type:** `string`
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+
+export const ColoredProgressBars = () => (
+  <Vertical gap={15}>
+    <ProgressBar value={60} color="#3b82f6" />
+    <ProgressBar value={60} color="#10b981" />
+    <ProgressBar value={60} color="#ef4444" />
+    <ProgressBar value={60} color="#f59e0b" />
+    <ProgressBar value={60} color="#8b5cf6" />
+  </Vertical>
+);
+```
+
+### **backgroundColor**
+Background color of the track.
+
+- **Type:** `string`
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+
+export const BackgroundColorProgressBars = () => (
+  <Vertical gap={15}>
+    <ProgressBar 
+      value={60} 
+      color="#3b82f6" 
+      backgroundColor="#dbeafe" 
+    />
+    <ProgressBar 
+      value={60} 
+      color="#10b981" 
+      backgroundColor="#d1fae5" 
+    />
+    <ProgressBar 
+      value={60} 
+      color="#ef4444" 
+      backgroundColor="#fee2e2" 
+    />
+  </Vertical>
+);
+```
+
+### **height**
+Height of the progress bar.
+
+- **Type:** `number | string`
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+
+export const HeightProgressBars = () => (
+  <Vertical gap={15}>
+    <ProgressBar value={60} height={4} />
+    <ProgressBar value={60} height={8} />
+    <ProgressBar value={60} height={12} />
+    <ProgressBar value={60} height={20} />
+  </Vertical>
+);
+```
+
+### **radius**
+Border radius for rounded corners.
+
+- **Type:** `number | string`
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical } from 'app-studio';
+
+export const RadiusProgressBars = () => (
+  <Vertical gap={15}>
+    <ProgressBar value={60} height={12} radius={0} />
+    <ProgressBar value={60} height={12} radius={4} />
+    <ProgressBar value={60} height={12} radius={8} />
+    <ProgressBar value={60} height={12} radius={20} />
+  </Vertical>
+);
+```
+
+### **views**
+Custom styles for container or bar.
+
+- **Type:** `{ container?: ViewProps; bar?: ViewProps }`
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+
+export const StyledProgressBar = () => (
+  <ProgressBar 
+    value={60}
+    views={{
+      container: {
+        borderWidth: 2,
+        borderColor: '#3b82f6',
+        padding: 2,
+      },
+      bar: {
+        background: 'linear-gradient(90deg, #3b82f6, #8b5cf6)',
+      }
+    }}
+  />
+);
+```
+
+### **Animated Progress**
+Progress bar with smooth animation.
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical, Text } from 'app-studio';
+
+export const AnimatedProgressBar = () => {
+  const [progress, setProgress] = useState(0);
+  
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) return 0;
+        return prev + 1;
+      });
+    }, 50);
+    
+    return () => clearInterval(interval);
+  }, []);
+  
+  return (
+    <Vertical gap={10}>
+      <Text>{progress}%</Text>
+      <ProgressBar value={progress} />
+    </Vertical>
+  );
+};
+```
+
+### **File Upload Progress**
+Progress bar for file upload.
+
+```tsx
+import React, { useState } from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical, Text, Button } from 'app-studio';
+
+export const FileUploadProgress = () => {
+  const [progress, setProgress] = useState(0);
+  const [uploading, setUploading] = useState(false);
+  
+  const simulateUpload = () => {
+    setUploading(true);
+    setProgress(0);
+    
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          setUploading(false);
+          return 100;
+        }
+        return prev + 10;
+      });
+    }, 200);
+  };
+  
+  return (
+    <Vertical gap={15}>
+      <Button onClick={simulateUpload} isDisabled={uploading}>
+        Upload File
+      </Button>
+      
+      {uploading && (
+        <Vertical gap={5}>
+          <Text fontSize={14}>Uploading... {progress}%</Text>
+          <ProgressBar 
+            value={progress} 
+            color="#10b981"
+            height={8}
+          />
+        </Vertical>
+      )}
+    </Vertical>
+  );
+};
+```
+
+### **Multi-Step Progress**
+Progress bar for multi-step processes.
+
+```tsx
+import React, { useState } from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical, Horizontal, Text, Button } from 'app-studio';
+
+export const MultiStepProgress = () => {
+  const [step, setStep] = useState(1);
+  const totalSteps = 4;
+  const progress = (step / totalSteps) * 100;
+  
+  return (
+    <Vertical gap={20}>
+      <Vertical gap={10}>
+        <Text>Step {step} of {totalSteps}</Text>
+        <ProgressBar 
+          value={progress} 
+          color="#3b82f6"
+          height={10}
+        />
+      </Vertical>
+      
+      <Horizontal gap={10}>
+        <Button 
+          onClick={() => setStep(Math.max(1, step - 1))}
+          isDisabled={step === 1}
+        >
+          Previous
+        </Button>
+        <Button 
+          onClick={() => setStep(Math.min(totalSteps, step + 1))}
+          isDisabled={step === totalSteps}
+        >
+          Next
+        </Button>
+      </Horizontal>
+    </Vertical>
+  );
+};
+```
+
+### **Gradient Progress Bar**
+Progress bar with gradient fill.
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+
+export const GradientProgressBar = () => (
+  <ProgressBar 
+    value={70}
+    height={16}
+    radius={8}
+    views={{
+      bar: {
+        background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
+      }
+    }}
+  />
+);
+```
+
+### **Striped Progress Bar**
+Progress bar with striped pattern.
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+
+export const StripedProgressBar = () => (
+  <ProgressBar 
+    value={65}
+    height={20}
+    radius={10}
+    views={{
+      bar: {
+        background: `
+          repeating-linear-gradient(
+            45deg,
+            #3b82f6,
+            #3b82f6 10px,
+            #60a5fa 10px,
+            #60a5fa 20px
+          )
+        `,
+      }
+    }}
+  />
+);
+```
+
+### **Status-Based Progress**
+Different colors based on progress value.
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical, Text } from 'app-studio';
+
+export const StatusProgressBars = () => {
+  const getColor = (value: number) => {
+    if (value < 30) return '#ef4444'; // Red
+    if (value < 70) return '#f59e0b'; // Orange
+    return '#10b981'; // Green
+  };
+  
+  return (
+    <Vertical gap={15}>
+      {[20, 50, 90].map((value) => (
+        <Vertical key={value} gap={5}>
+          <Text>{value}%</Text>
+          <ProgressBar 
+            value={value} 
+            color={getColor(value)}
+            height={10}
+          />
+        </Vertical>
+      ))}
+    </Vertical>
+  );
+};
+```
+
+### **Loading Progress**
+Indeterminate loading state.
+
+```tsx
+import React from 'react';
+import { ProgressBar } from '@app-studio/web';
+
+export const LoadingProgressBar = () => (
+  <ProgressBar 
+    value={100}
+    height={4}
+    views={{
+      bar: {
+        animation: 'progress-loading 1.5s ease-in-out infinite',
+        background: 'linear-gradient(90deg, transparent, #3b82f6, transparent)',
+      }
+    }}
+  />
+);
+```
+
+### **Complete Example**
+A comprehensive progress tracking example.
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { ProgressBar } from '@app-studio/web';
+import { Vertical, Horizontal, Text, Button, Card } from 'app-studio';
+
+export const CompleteProgressExample = () => {
+  const [tasks, setTasks] = useState([
+    { id: 1, name: 'Design', progress: 100, color: '#10b981' },
+    { id: 2, name: 'Development', progress: 65, color: '#3b82f6' },
+    { id: 3, name: 'Testing', progress: 30, color: '#f59e0b' },
+    { id: 4, name: 'Deployment', progress: 0, color: '#6b7280' },
+  ]);
+  
+  const overallProgress = tasks.reduce((sum, task) => sum + task.progress, 0) / tasks.length;
+  
+  return (
+    <Card padding={20}>
+      <Vertical gap={20}>
+        <Vertical gap={10}>
+          <Horizontal justifyContent="space-between">
+            <Text fontSize={18} fontWeight="bold">Project Progress</Text>
+            <Text fontSize={18} fontWeight="bold">{Math.round(overallProgress)}%</Text>
+          </Horizontal>
+          <ProgressBar 
+            value={overallProgress} 
+            color="#3b82f6"
+            height={12}
+            radius={6}
+          />
+        </Vertical>
+        
+        <Vertical gap={15}>
+          {tasks.map((task) => (
+            <Vertical key={task.id} gap={5}>
+              <Horizontal justifyContent="space-between">
+                <Text fontSize={14}>{task.name}</Text>
+                <Text fontSize={14}>{task.progress}%</Text>
+              </Horizontal>
+              <ProgressBar 
+                value={task.progress} 
+                color={task.color}
+                height={8}
+                radius={4}
+              />
+            </Vertical>
+          ))}
+        </Vertical>
+      </Vertical>
+    </Card>
+  );
+};
+```
+

package/docs/components/Resizable.mdx

@@ -1,44 +1,56 @@
 # Resizable
 
-An accessible resizable panel group component for creating flexible layouts with resizable panels.
+A flexible container that allows users to resize its content areas by dragging adjustable dividers.
 
 ### **Import**
-  ```tsx
-  import { Resizable } from '@app-studio/web';
-  ```
+```tsx
+import { Resizable } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
 import { Resizable } from '@app-studio/web';
-import { View } from '@app-studio/web';
-import { Text } from '@app-studio/web';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
 
 export const DefaultResizable = () => {
   return (
-    <View height="400px" width="100%">
+    <View
+      height="400px"
+      width="100%"
+      border="1px solid #e2e8f0"
+      borderRadius="8px"
+      overflow="hidden"
+    >
       <Resizable>
         <Resizable.Panel id="panel1" defaultSize="30%">
           <View padding="16px" height="100%" backgroundColor="color.blue.50">
-            <Text fontWeight="bold">Panel 1</Text>
+            <Text fontWeight="bold" marginBottom="8px">
+              Panel 1
+            </Text>
             <Text>This is the first panel. Drag the handle to resize.</Text>
           </View>
         </Resizable.Panel>
-        
+
         <Resizable.Handle id="handle1" withVisualIndicator />
-        
+
         <Resizable.Panel id="panel2" defaultSize="40%">
           <View padding="16px" height="100%" backgroundColor="color.green.50">
-            <Text fontWeight="bold">Panel 2</Text>
+            <Text fontWeight="bold" marginBottom="8px">
+              Panel 2
+            </Text>
             <Text>This is the second panel. Drag the handle to resize.</Text>
           </View>
         </Resizable.Panel>
-        
+
         <Resizable.Handle id="handle2" withVisualIndicator />
-        
+
         <Resizable.Panel id="panel3" defaultSize="30%">
           <View padding="16px" height="100%" backgroundColor="color.purple.50">
-            <Text fontWeight="bold">Panel 3</Text>
+            <Text fontWeight="bold" marginBottom="8px">
+              Panel 3
+            </Text>
             <Text>This is the third panel. Drag the handle to resize.</Text>
           </View>
         </Resizable.Panel>
@@ -48,101 +60,90 @@ export const DefaultResizable = () => {
 };
 ```
 
-### **Orientation**
-The Resizable component supports both horizontal and vertical orientations:
-
-```tsx
-// Horizontal (default)
-<Resizable orientation="horizontal">
-  {/* Panels and handles */}
-</Resizable>
-
-// Vertical
-<Resizable orientation="vertical">
-  {/* Panels and handles */}
-</Resizable>
-```
-
-### **Nested Layouts**
-The Resizable component can be nested to create complex layouts:
-
-```tsx
-<Resizable>
-  <Resizable.Panel id="left" defaultSize="30%">
-    {/* Left panel content */}
-  </Resizable.Panel>
-  
-  <Resizable.Handle id="handle1" />
-  
-  <Resizable.Panel id="right" defaultSize="70%">
-    {/* Nested vertical resizable */}
-    <Resizable orientation="vertical">
-      <Resizable.Panel id="top" defaultSize="50%">
-        {/* Top right panel content */}
-      </Resizable.Panel>
-      
-      <Resizable.Handle id="handle2" />
-      
-      <Resizable.Panel id="bottom" defaultSize="50%">
-        {/* Bottom right panel content */}
-      </Resizable.Panel>
-    </Resizable>
-  </Resizable.Panel>
-</Resizable>
-```
-
-### **Handle Variants**
-The Resizable component supports different handle variants:
-
-```tsx
-<Resizable variant="default">
-  {/* Panels and handles */}
-</Resizable>
-
-<Resizable variant="subtle">
-  {/* Panels and handles */}
-</Resizable>
-
-<Resizable variant="prominent">
-  {/* Panels and handles */}
-</Resizable>
-```
+### **collapsible**
+Enables or disables the ability for panels to collapse.
 
-### **Handle Sizes**
-The Resizable component supports different handle sizes:
+- **Type:** `boolean`
+- **Default:** `false`
 
 ```tsx
-<Resizable size="sm">
-  {/* Panels and handles */}
-</Resizable>
-
-<Resizable size="md">
-  {/* Panels and handles */}
-</Resizable>
+import React from 'react';
+import { Resizable } from '@app-studio/web';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
 
-<Resizable size="lg">
-  {/* Panels and handles */}
-</Resizable>
-```
+export const CollapsibleResizable = () => {
+  return (
+    <View
+      height="400px"
+      width="100%"
+      border="1px solid #e2e8f0"
+      borderRadius="8px"
+      overflow="hidden"
+    >
+      <Resizable
+        collapsible={true}
+        autoSaveId="collapsible-example"
+        keyboardResizeBy={20}
+      >
+        <Resizable.Panel
+          id="panel1"
+          defaultSize="25%"
+          collapsible={true}
+          minSize={100}
+          maxSize={300}
+        >
+          <View padding="16px" height="100%" backgroundColor="color.blue.50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Collapsible Panel
+            </Text>
+            <Text>
+              This panel can be collapsed using the button on the handle. It
+              also has min (100px) and max (300px) constraints.
+            </Text>
+          </View>
+        </Resizable.Panel>
 
-### **Controlled Resizing**
-The Resizable component can be controlled externally:
+        <Resizable.Handle id="handle1" withVisualIndicator withCollapseButton />
 
-```tsx
-const [sizes, setSizes] = useState([33.33, 33.33, 33.33]);
+        <Resizable.Panel id="panel2" defaultSize="50%">
+          <View padding="16px" height="100%" backgroundColor="color.green.50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Main Panel
+            </Text>
+            <Text>
+              This is the main content panel. Try using keyboard navigation with
+              arrow keys to resize panels. Home/End keys make larger jumps.
+            </Text>
+          </View>
+        </Resizable.Panel>
 
-const handleSizesChange = (newSizes) => {
-  setSizes(newSizes);
+        <Resizable.Handle
+          id="handle2"
+          withVisualIndicator
+          withCollapseButton
+          collapseTarget="panel3"
+        />
+
+        <Resizable.Panel
+          id="panel3"
+          defaultSize="25%"
+          collapsible={true}
+          defaultCollapsed={true}
+        >
+          <View padding="16px" height="100%" backgroundColor="color.purple.50">
+            <Text fontWeight="bold" marginBottom="8px">
+              Initially Collapsed Panel
+            </Text>
+            <Text>
+              This panel starts collapsed. The layout is persisted in
+              localStorage so your changes will be remembered when you return.
+            </Text>
+          </View>
+        </Resizable.Panel>
+      </Resizable>
+    </View>
+  );
 };
-
-<Resizable defaultSizes={sizes} onSizesChange={handleSizesChange}>
-  {/* Panels and handles */}
-</Resizable>
 ```
 
-### **Accessibility**
-The Resizable component is fully accessible:
-
-- Handles have proper ARIA attributes
-- Keyboard navigation is supported (arrow keys to resize, Enter to start resizing, Escape to cancel)
-- Focus management for keyboard users