aidos-ui 4.0.0 → 4.0.1

package/src/pages/ProgressBar.mdx

@@ -1,20 +1,200 @@
 import { ProgressBar } from "../ProgressBar";
 import { Column } from "../Column";
+import { Row } from "../Row";
+import { Span } from "../Text";
+import { cssVar } from "../jss";
 
 # ProgressBar
 
-The `ProgressBar` component can be used to represent percentual progress in a linear way:
+A linear progress indicator for displaying completion percentage. Supports multiple colors and sizes.
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `progress` | `number` | Required | Progress value from 0 to 1 (values > 1 are capped at 1) |
+| `color` | `Color` | Required | Bar fill color: `"highlight"`, `"negative"`, `"warning"`, etc. |
+| `size` | `Size` | Required | Bar height: `"xsmall"` (4px), `"small"` (8px), `"medium"` (12px), `"large"` (16px), `"xlarge"` (20px) |
+| `jss` | `JSS` | - | Custom styles for the container |
+
+---
+
+## Basic usage
 
 <Column gap="medium">
-  <ProgressBar color="highlight" progress={0.66} size="large" />
-  <ProgressBar color="negative" progress={0.66} size="medium" />
-  <ProgressBar color="warning" progress={0.66} size="small" />
+  <ProgressBar color="highlight" progress={0.66} size="medium" />
+</Column>
+
+```js
+<ProgressBar color="highlight" progress={0.66} size="medium" />
+```
+
+---
+
+## Sizes
+
+<Column gap="medium">
+  <Row gap="medium" align="center">
+    <Span size="small" color="secondary" jss={{ width: 60 }}>xsmall</Span>
+    <ProgressBar color="highlight" progress={0.5} size="xsmall" jss={{ flexGrow: 1 }} />
+  </Row>
+  <Row gap="medium" align="center">
+    <Span size="small" color="secondary" jss={{ width: 60 }}>small</Span>
+    <ProgressBar color="highlight" progress={0.5} size="small" jss={{ flexGrow: 1 }} />
+  </Row>
+  <Row gap="medium" align="center">
+    <Span size="small" color="secondary" jss={{ width: 60 }}>medium</Span>
+    <ProgressBar color="highlight" progress={0.5} size="medium" jss={{ flexGrow: 1 }} />
+  </Row>
+  <Row gap="medium" align="center">
+    <Span size="small" color="secondary" jss={{ width: 60 }}>large</Span>
+    <ProgressBar color="highlight" progress={0.5} size="large" jss={{ flexGrow: 1 }} />
+  </Row>
+  <Row gap="medium" align="center">
+    <Span size="small" color="secondary" jss={{ width: 60 }}>xlarge</Span>
+    <ProgressBar color="highlight" progress={0.5} size="xlarge" jss={{ flexGrow: 1 }} />
+  </Row>
 </Column>
 
 ```js
+<ProgressBar color="highlight" progress={0.5} size="xsmall" />  // 4px
+<ProgressBar color="highlight" progress={0.5} size="small" />   // 8px
+<ProgressBar color="highlight" progress={0.5} size="medium" />  // 12px
+<ProgressBar color="highlight" progress={0.5} size="large" />   // 16px
+<ProgressBar color="highlight" progress={0.5} size="xlarge" />  // 20px
+```
+
+---
+
+## Colors
+
 <Column gap="medium">
   <ProgressBar color="highlight" progress={0.66} size="large" />
-  <ProgressBar color="negative" progress={0.66} size="medium" />
-  <ProgressBar color="warning" progress={0.66} size="small" />
+  <ProgressBar color="negative" progress={0.66} size="large" />
+  <ProgressBar color="warning" progress={0.66} size="large" />
+  <ProgressBar color="positive" progress={0.66} size="large" />
+</Column>
+
+```js
+<ProgressBar color="highlight" progress={0.66} size="large" />  // Accent color
+<ProgressBar color="negative" progress={0.66} size="large" />   // Error/danger
+<ProgressBar color="warning" progress={0.66} size="large" />    // Warning
+<ProgressBar color="positive" progress={0.66} size="large" />   // Success
+```
+
+---
+
+## Progress states
+
+<Column gap="medium">
+  <Row gap="medium" align="center">
+    <ProgressBar color="highlight" progress={0} size="medium" jss={{ flexGrow: 1 }} />
+    <Span size="small" color="secondary">0%</Span>
+  </Row>
+  <Row gap="medium" align="center">
+    <ProgressBar color="highlight" progress={0.25} size="medium" jss={{ flexGrow: 1 }} />
+    <Span size="small" color="secondary">25%</Span>
+  </Row>
+  <Row gap="medium" align="center">
+    <ProgressBar color="highlight" progress={0.5} size="medium" jss={{ flexGrow: 1 }} />
+    <Span size="small" color="secondary">50%</Span>
+  </Row>
+  <Row gap="medium" align="center">
+    <ProgressBar color="highlight" progress={0.75} size="medium" jss={{ flexGrow: 1 }} />
+    <Span size="small" color="secondary">75%</Span>
+  </Row>
+  <Row gap="medium" align="center">
+    <ProgressBar color="positive" progress={1} size="medium" jss={{ flexGrow: 1 }} />
+    <Span size="small" color="secondary">100%</Span>
+  </Row>
 </Column>
+
+```js
+<ProgressBar color="highlight" progress={0} size="medium" />     // Empty
+<ProgressBar color="highlight" progress={0.5} size="medium" />   // Half
+<ProgressBar color="positive" progress={1} size="medium" />      // Complete
+```
+
+---
+
+## With percentage label
+
+```js
+function UploadProgress({ progress }) {
+  const percentage = Math.round(progress * 100);
+
+  return (
+    <Column gap="small">
+      <Row justify="space-between">
+        <Span>Uploading...</Span>
+        <Span color="secondary">{percentage}%</Span>
+      </Row>
+      <ProgressBar
+        color={progress === 1 ? "positive" : "highlight"}
+        progress={progress}
+        size="medium"
+      />
+    </Column>
+  );
+}
+```
+
+---
+
+## Dynamic color based on value
+
+```js
+function StorageIndicator({ used, total }) {
+  const progress = used / total;
+
+  // Change color based on usage
+  const color = progress > 0.9
+    ? "negative"
+    : progress > 0.7
+    ? "warning"
+    : "highlight";
+
+  return (
+    <Column gap="small">
+      <Row justify="space-between">
+        <Span>Storage</Span>
+        <Span color="secondary">{Math.round(progress * 100)}% used</Span>
+      </Row>
+      <ProgressBar color={color} progress={progress} size="small" />
+    </Column>
+  );
+}
 ```
+
+---
+
+## Animated progress
+
+The progress bar uses CSS transform for smooth animations:
+
+```js
+function AnimatedProgress() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((p) => (p >= 1 ? 0 : p + 0.1));
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return <ProgressBar color="highlight" progress={progress} size="medium" />;
+}
+```
+
+---
+
+## Use cases
+
+- **File uploads**: Show upload completion
+- **Storage usage**: Display disk/quota usage
+- **Form completion**: Indicate steps completed
+- **Loading states**: Show determinate loading progress
+- **Skill levels**: Display proficiency ratings

package/src/pages/ProgressCircle.mdx

@@ -1,26 +1,40 @@
 import { ProgressCircle } from "../ProgressCircle";
 import { Row } from "../Row";
+import { Column } from "../Column";
+import { Span } from "../Text";
 import { cssVar } from "../jss";
 
 # ProgressCircle
 
-The `ProgressCircle` component can be used to represent percentual progress in a circular way:
+A circular progress indicator for displaying completion percentage. Uses SVG for crisp rendering at any size.
 
-<Row gap="medium" align="center">
-  <ProgressCircle progress={0.1} outerRadius={12} />
-  <ProgressCircle progress={0.2} outerRadius={12} />
-  <ProgressCircle progress={0.3} outerRadius={12} />
-  <ProgressCircle progress={0.4} outerRadius={12} />
-  <ProgressCircle progress={0.5} outerRadius={12} />
-  <ProgressCircle progress={0.6} outerRadius={12} />
-  <ProgressCircle progress={0.7} outerRadius={12} />
-  <ProgressCircle progress={0.8} outerRadius={12} />
-  <ProgressCircle progress={0.9} outerRadius={12} />
-  <ProgressCircle progress={1} outerRadius={12} />
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `progress` | `number` | Required | Progress value from 0 to 1 |
+| `outerRadius` | `number` | Required | Radius of the circle in pixels |
+| `stroke` | `number` | `4` | Width of the progress stroke |
+
+---
+
+## Basic usage
+
+<Row gap="medium" align="center" padding="medium">
+  <ProgressCircle progress={0.75} outerRadius={24} />
 </Row>
 
 ```js
-<Row gap="medium" align="center">
+<ProgressCircle progress={0.75} outerRadius={24} />
+```
+
+---
+
+## Progress states
+
+<Row gap="medium" align="center" padding="medium">
   <ProgressCircle progress={0.1} outerRadius={12} />
   <ProgressCircle progress={0.2} outerRadius={12} />
   <ProgressCircle progress={0.3} outerRadius={12} />
@@ -32,4 +46,173 @@ The `ProgressCircle` component can be used to represent percentual progress in a
   <ProgressCircle progress={0.9} outerRadius={12} />
   <ProgressCircle progress={1} outerRadius={12} />
 </Row>
+
+```js
+<ProgressCircle progress={0.1} outerRadius={12} />
+<ProgressCircle progress={0.2} outerRadius={12} />
+<ProgressCircle progress={0.3} outerRadius={12} />
+// ... and so on
+<ProgressCircle progress={1} outerRadius={12} />
+```
+
+---
+
+## Sizes
+
+Adjust the `outerRadius` to change the circle size:
+
+<Row gap="large" align="center" padding="medium">
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={8} />
+    <Span size="small" color="secondary">8px</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={12} />
+    <Span size="small" color="secondary">12px</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={20} />
+    <Span size="small" color="secondary">20px</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={32} />
+    <Span size="small" color="secondary">32px</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={48} />
+    <Span size="small" color="secondary">48px</Span>
+  </Column>
+</Row>
+
+```js
+<ProgressCircle progress={0.66} outerRadius={8} />   // Small
+<ProgressCircle progress={0.66} outerRadius={12} />  // Default
+<ProgressCircle progress={0.66} outerRadius={20} />  // Medium
+<ProgressCircle progress={0.66} outerRadius={32} />  // Large
+<ProgressCircle progress={0.66} outerRadius={48} />  // Extra large
+```
+
+---
+
+## Stroke width
+
+Adjust the `stroke` prop to change the line thickness:
+
+<Row gap="large" align="center" padding="medium">
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={24} stroke={2} />
+    <Span size="small" color="secondary">2px stroke</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={24} stroke={4} />
+    <Span size="small" color="secondary">4px stroke</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={24} stroke={6} />
+    <Span size="small" color="secondary">6px stroke</Span>
+  </Column>
+  <Column align="center" gap="small">
+    <ProgressCircle progress={0.66} outerRadius={24} stroke={8} />
+    <Span size="small" color="secondary">8px stroke</Span>
+  </Column>
+</Row>
+
+```js
+<ProgressCircle progress={0.66} outerRadius={24} stroke={2} />
+<ProgressCircle progress={0.66} outerRadius={24} stroke={4} />  // Default
+<ProgressCircle progress={0.66} outerRadius={24} stroke={6} />
+<ProgressCircle progress={0.66} outerRadius={24} stroke={8} />
+```
+
+---
+
+## With label
+
+Combine with text to show the percentage:
+
+```js
+function CircularProgress({ value }) {
+  return (
+    <Row align="center" gap="small">
+      <ProgressCircle progress={value} outerRadius={16} />
+      <Span>{Math.round(value * 100)}%</Span>
+    </Row>
+  );
+}
+```
+
+---
+
+## Inline with text
+
+Use small circles inline with text:
+
+```js
+<Row align="center" gap="small">
+  <Span>Task completion:</Span>
+  <ProgressCircle progress={0.8} outerRadius={8} stroke={2} />
+  <Span color="secondary">80%</Span>
+</Row>
 ```
+
+---
+
+## Skill indicator
+
+```js
+function SkillBadge({ name, level }) {
+  return (
+    <Row align="center" gap="medium" padding="small">
+      <ProgressCircle progress={level / 100} outerRadius={16} />
+      <Column gap="none">
+        <Span bold>{name}</Span>
+        <Span size="small" color="secondary">{level}%</Span>
+      </Column>
+    </Row>
+  );
+}
+
+// Usage
+<SkillBadge name="React" level={90} />
+<SkillBadge name="TypeScript" level={85} />
+<SkillBadge name="Node.js" level={70} />
+```
+
+---
+
+## Animated loading
+
+```js
+function LoadingCircle() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((p) => (p >= 1 ? 0 : p + 0.05));
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
+
+  return <ProgressCircle progress={progress} outerRadius={20} />;
+}
+```
+
+---
+
+## Styling
+
+The ProgressCircle uses these CSS variables:
+- `--secondary-background`: Circle background color
+- `--highlight`: Progress stroke color
+
+The SVG is rotated -90 degrees so progress starts from the top.
+
+---
+
+## Use cases
+
+- **Compact progress indicators**: Where horizontal space is limited
+- **Skill/proficiency displays**: Show expertise levels
+- **Loading states**: Determinate circular spinners
+- **Dashboard metrics**: Compact data visualization
+- **Achievement badges**: Show completion status