aidos-ui 4.0.4 → 4.0.6

package/src/pages/ProgressBar.mdx

@@ -1,200 +0,0 @@
-import { ProgressBar } from "../ProgressBar";
-import { Column } from "../Column";
-import { Row } from "../Row";
-import { Span } from "../Text";
-import { cssVar } from "../jss";
-
-# ProgressBar
-
-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="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="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,218 +0,0 @@
-import { ProgressCircle } from "../ProgressCircle";
-import { Row } from "../Row";
-import { Column } from "../Column";
-import { Span } from "../Text";
-import { cssVar } from "../jss";
-
-# ProgressCircle
-
-A circular progress indicator for displaying completion percentage. Uses SVG for crisp rendering at any size.
-
----
-
-## 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
-<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} />
-  <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} />
-</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

package/src/pages/RangeInput.mdx

@@ -1,237 +0,0 @@
-import { RangeInput } from "../RangeInput";
-import { Column } from "../Column";
-import { Row } from "../Row";
-import { Icon } from "../Icon";
-import { Span } from "../Text";
-
-# RangeInput
-
-A styled wrapper around the HTML `<input type="range">` element with support for labels, icons, and customization options.
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `number` | Required | Current slider value |
-| `onValueChange` | `(value: number) => void` | Required | Called when the value changes |
-| `min` | `number` | `0` | Minimum value |
-| `max` | `number` | `100` | Maximum value |
-| `step` | `number` | `1` | Step increment |
-| `label` | `ReactNode` | - | Label text displayed alongside the slider |
-| `labelPosition` | `"start" \| "end"` | `"end"` | Position of the label |
-| `labelSize` | `Size` | - | Label text size |
-| `labelColor` | `TextColor` | - | Label text color |
-| `labelBold` | `boolean` | - | Whether the label is bold |
-| `addOn` | `JSX.Element` | - | Icon or element to display |
-| `addOnPosition` | `"start" \| "end"` | `"start"` | Position of the add-on |
-| `gap` | `Gap` | `"medium"` | Space between elements |
-| `padding` | `Padding` | `"none"` | Container padding |
-| `disabled` | `boolean` | - | Disables the input |
-
----
-
-## Basic usage
-
-<Column gap="medium">
-  <RangeInput value={50} onValueChange={() => {}} />
-</Column>
-
-```js
-const [value, setValue] = useState(50);
-
-<RangeInput value={value} onValueChange={setValue} />
-```
-
----
-
-## With label
-
-Labels can be positioned at the start or end of the slider:
-
-<Column gap="medium">
-  <RangeInput value={75} onValueChange={() => {}} label="75%" />
-  <RangeInput value={25} onValueChange={() => {}} label="25%" labelPosition="start" />
-</Column>
-
-```js
-// Label at end (default)
-<RangeInput value={value} onValueChange={setValue} label={`${value}%`} />
-
-// Label at start
-<RangeInput
-  value={value}
-  onValueChange={setValue}
-  label={`${value}%`}
-  labelPosition="start"
-/>
-```
-
----
-
-## With icon add-on
-
-Add icons to provide context for what the slider controls:
-
-<Column gap="medium">
-  <RangeInput
-    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
-    value={50}
-    onValueChange={() => {}}
-    label="50%"
-  />
-  <RangeInput
-    addOn={<Icon icon="fa-sun" color="warning" size="medium" />}
-    addOnPosition="end"
-    value={80}
-    onValueChange={() => {}}
-    label="Brightness"
-    labelPosition="start"
-  />
-</Column>
-
-```js
-// Icon at start (default)
-<RangeInput
-  addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
-  value={volume}
-  onValueChange={setVolume}
-  label={`${volume}%`}
-/>
-
-// Icon at end
-<RangeInput
-  addOn={<Icon icon="fa-sun" color="warning" size="medium" />}
-  addOnPosition="end"
-  value={brightness}
-  onValueChange={setBrightness}
-  label="Brightness"
-  labelPosition="start"
-/>
-```
-
----
-
-## Label styling
-
-Customize the label appearance:
-
-<Column gap="medium">
-  <RangeInput
-    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
-    value={75}
-    onValueChange={() => {}}
-    label="75%"
-    labelSize="large"
-  />
-  <RangeInput
-    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
-    value={90}
-    onValueChange={() => {}}
-    label="90%"
-    labelSize="large"
-    labelColor="highlight"
-  />
-  <RangeInput
-    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
-    value={100}
-    onValueChange={() => {}}
-    label="MAX"
-    labelSize="large"
-    labelColor="highlight"
-    labelBold
-  />
-</Column>
-
-```js
-<RangeInput
-  value={value}
-  onValueChange={setValue}
-  label={`${value}%`}
-  labelSize="large"
-  labelColor="highlight"
-  labelBold
-/>
-```
-
----
-
-## Custom range
-
-Set min, max, and step values:
-
-```js
-// Temperature slider (0-100 in steps of 5)
-<RangeInput
-  value={temperature}
-  onValueChange={setTemperature}
-  min={0}
-  max={100}
-  step={5}
-  label={`${temperature}°C`}
-/>
-
-// Decimal values (0-1 in steps of 0.1)
-<RangeInput
-  value={opacity}
-  onValueChange={setOpacity}
-  min={0}
-  max={1}
-  step={0.1}
-  label={opacity.toFixed(1)}
-/>
-```
-
----
-
-## Volume control example
-
-<Row gap="medium" align="center" padding="medium">
-  <RangeInput
-    addOn={<Icon icon="fa-volume-up" color="primary" size="medium" />}
-    value={65}
-    onValueChange={() => {}}
-    label="65%"
-    labelBold
-  />
-</Row>
-
-```js
-function VolumeControl() {
-  const [volume, setVolume] = useState(50);
-
-  const icon = volume === 0
-    ? "fa-volume-off"
-    : volume < 50
-    ? "fa-volume-down"
-    : "fa-volume-up";
-
-  return (
-    <RangeInput
-      addOn={<Icon icon={icon} color="primary" size="medium" />}
-      value={volume}
-      onValueChange={setVolume}
-      label={`${volume}%`}
-      labelBold
-    />
-  );
-}
-```
-
----
-
-## Accessibility
-
-- The underlying `<input type="range">` is fully accessible
-- Labels are properly associated with the input via `htmlFor`
-- Focus states are visually indicated
-- Use `aria-label` or visible labels to describe the slider's purpose
-
-```js
-<RangeInput
-  aria-label="Volume"
-  value={volume}
-  onValueChange={setVolume}
-/>
-```