@adamosuiteservices/ui 2.13.3 → 2.14.0

package/docs/components/ui/progress.md

@@ -1,182 +1,182 @@
-# Progress
-
-Indicador de progreso basado en Radix UI. Muestra el avance de una tarea con barra animada y variantes de color.
-
-## Descripción
-
-El componente `Progress` muestra una barra de progreso para indicar el estado de una tarea.
-
-## Importación
-
-```typescript
-import { Progress } from "@adamosuiteservices/ui/progress";
-```
-
-## Anatomía
-
-```tsx
-<Progress value={33} />
-```
-
-**Componentes**: 1 (Progress)
-
-## Props
-
-| Prop        | Tipo                                                   | Default     | Descripción            |
-| ----------- | ------------------------------------------------------ | ----------- | ---------------------- |
-| `value`     | `number`                                               | `0`         | Progreso (0-100)       |
-| `variant`   | `"default" \| "destructive" \| "success" \| "warning"` | `"default"` | Variante de color      |
-| `max`       | `number`                                               | `100`       | Valor máximo           |
-| `className` | `string`                                               | -           | Clases CSS adicionales |
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<Progress value={33} />
-```
-
-### Con Label
-
-```tsx
-<div className="space-y-2">
-  <div className="flex items-center justify-between">
-    <Label>File Upload</Label>
-    <span className="text-sm text-muted-foreground">45%</span>
-  </div>
-  <Progress value={45} />
-  <p className="text-xs text-muted-foreground">
-    Uploading document.pdf (2.3 MB of 5.1 MB)
-  </p>
-</div>
-```
-
-### Variantes
-
-```tsx
-<Progress value={70} variant="default" />
-<Progress value={100} variant="success" />
-<Progress value={40} variant="warning" />
-<Progress value={90} variant="destructive" />
-```
-
-### Animado
-
-```tsx
-import { useState, useEffect } from "react";
-
-function App() {
-  const [progress, setProgress] = useState(13);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setProgress(66), 500);
-    return () => clearTimeout(timer);
-  }, []);
-
-  return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <Label>Loading...</Label>
-        <span className="text-sm text-muted-foreground">{progress}%</span>
-      </div>
-      <Progress value={progress} />
-    </div>
-  );
-}
-```
-
-### Tamaños Custom
-
-```tsx
-<Progress value={60} className="h-1" />  {/* Small */}
-<Progress value={60} />                    {/* Default h-2 */}
-<Progress value={60} className="h-4" />  {/* Large */}
-```
-
-### Con Iconos
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<div className="space-y-2">
-  <div className="flex items-center gap-2">
-    <Icon symbol="download" className="text-lg" />
-    <Label>Download</Label>
-    <span className="ml-auto text-sm text-muted-foreground">65%</span>
-  </div>
-  <Progress value={65} />
-</div>;
-```
-
-### Multi-Step
-
-```tsx
-import { useState } from "react";
-
-function App() {
-  const [currentStep, setCurrentStep] = useState(2);
-  const totalSteps = 5;
-  const progress = (currentStep / totalSteps) * 100;
-
-  return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <Label>Setup Progress</Label>
-        <span className="text-sm text-muted-foreground">
-          Step {currentStep} of {totalSteps}
-        </span>
-      </div>
-      <Progress value={progress} />
-    </div>
-  );
-}
-```
-
-## Casos de Uso
-
-**File uploads**: Progreso de subida de archivos  
-**Downloads**: Descarga de contenido  
-**Multi-step forms**: Wizards con pasos  
-**System resources**: CPU, memoria, disco  
-**Installation**: Instalación de paquetes/apps  
-**Processing**: Tareas de procesamiento
-
-## Estilos Base
-
-- **Height**: `h-2` default
-- **Border radius**: `rounded-full`
-- **Transition**: `transition-all` en indicator
-- **Transform**: `translateX` para animación
-
-### Estilos de Variantes
-
-- **default**: `bg-primary/20` → `bg-primary`
-- **destructive**: `bg-destructive/20` → `bg-destructive`
-- **success**: `bg-success/20` → `bg-success`
-- **warning**: `bg-warning/20` → `bg-warning`
-
-## Accesibilidad
-
-- ✅ **ARIA**: `role="progressbar"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
-- ✅ **Screen readers**: Anuncia progreso automáticamente
-- ✅ **Live region**: Actualizaciones en tiempo real
-
-## Notas de Implementación
-
-- **Radix UI**: Basado en `@radix-ui/react-progress`
-- **CVA**: Variantes con class-variance-authority
-- **Animation**: CSS transform para transición suave
-- **Value clamp**: Valor se limita entre 0-100 automáticamente
-
-## Troubleshooting
-
-**No se ve progreso**: Verifica que `value` esté entre 0-100  
-**No anima**: Asegúrate de que value cambie, usa `transition-all`  
-**Variante no cambia color**: Verifica prop `variant` correcta  
-**Muy fino**: Ajusta `className="h-3"` o mayor
-
-## Referencias
-
-- **Radix UI Progress**: <https://www.radix-ui.com/primitives/docs/components/progress>
-- **shadcn/ui Progress**: <https://ui.shadcn.com/docs/components/progress>
+# Progress
+
+Indicador de progreso basado en Radix UI. Muestra el avance de una tarea con barra animada y variantes de color.
+
+## Descripción
+
+El componente `Progress` muestra una barra de progreso para indicar el estado de una tarea.
+
+## Importación
+
+```typescript
+import { Progress } from "@adamosuiteservices/ui/progress";
+```
+
+## Anatomía
+
+```tsx
+<Progress value={33} />
+```
+
+**Componentes**: 1 (Progress)
+
+## Props
+
+| Prop        | Tipo                                                   | Default     | Descripción            |
+| ----------- | ------------------------------------------------------ | ----------- | ---------------------- |
+| `value`     | `number`                                               | `0`         | Progreso (0-100)       |
+| `variant`   | `"default" \| "destructive" \| "success" \| "warning"` | `"default"` | Variante de color      |
+| `max`       | `number`                                               | `100`       | Valor máximo           |
+| `className` | `string`                                               | -           | Clases CSS adicionales |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<Progress value={33} />
+```
+
+### Con Label
+
+```tsx
+<div className="space-y-2">
+  <div className="flex items-center justify-between">
+    <Label>File Upload</Label>
+    <span className="text-sm text-muted-foreground">45%</span>
+  </div>
+  <Progress value={45} />
+  <p className="text-xs text-muted-foreground">
+    Uploading document.pdf (2.3 MB of 5.1 MB)
+  </p>
+</div>
+```
+
+### Variantes
+
+```tsx
+<Progress value={70} variant="default" />
+<Progress value={100} variant="success" />
+<Progress value={40} variant="warning" />
+<Progress value={90} variant="destructive" />
+```
+
+### Animado
+
+```tsx
+import { useState, useEffect } from "react";
+
+function App() {
+  const [progress, setProgress] = useState(13);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <Label>Loading...</Label>
+        <span className="text-sm text-muted-foreground">{progress}%</span>
+      </div>
+      <Progress value={progress} />
+    </div>
+  );
+}
+```
+
+### Tamaños Custom
+
+```tsx
+<Progress value={60} className="h-1" />  {/* Small */}
+<Progress value={60} />                    {/* Default h-2 */}
+<Progress value={60} className="h-4" />  {/* Large */}
+```
+
+### Con Iconos
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<div className="space-y-2">
+  <div className="flex items-center gap-2">
+    <Icon symbol="download" className="text-lg" />
+    <Label>Download</Label>
+    <span className="ml-auto text-sm text-muted-foreground">65%</span>
+  </div>
+  <Progress value={65} />
+</div>;
+```
+
+### Multi-Step
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [currentStep, setCurrentStep] = useState(2);
+  const totalSteps = 5;
+  const progress = (currentStep / totalSteps) * 100;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <Label>Setup Progress</Label>
+        <span className="text-sm text-muted-foreground">
+          Step {currentStep} of {totalSteps}
+        </span>
+      </div>
+      <Progress value={progress} />
+    </div>
+  );
+}
+```
+
+## Casos de Uso
+
+**File uploads**: Progreso de subida de archivos  
+**Downloads**: Descarga de contenido  
+**Multi-step forms**: Wizards con pasos  
+**System resources**: CPU, memoria, disco  
+**Installation**: Instalación de paquetes/apps  
+**Processing**: Tareas de procesamiento
+
+## Estilos Base
+
+- **Height**: `h-2` default
+- **Border radius**: `rounded-full`
+- **Transition**: `transition-all` en indicator
+- **Transform**: `translateX` para animación
+
+### Estilos de Variantes
+
+- **default**: `bg-primary/20` → `bg-primary`
+- **destructive**: `bg-destructive/20` → `bg-destructive`
+- **success**: `bg-success/20` → `bg-success`
+- **warning**: `bg-warning/20` → `bg-warning`
+
+## Accesibilidad
+
+- ✅ **ARIA**: `role="progressbar"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
+- ✅ **Screen readers**: Anuncia progreso automáticamente
+- ✅ **Live region**: Actualizaciones en tiempo real
+
+## Notas de Implementación
+
+- **Radix UI**: Basado en `@radix-ui/react-progress`
+- **CVA**: Variantes con class-variance-authority
+- **Animation**: CSS transform para transición suave
+- **Value clamp**: Valor se limita entre 0-100 automáticamente
+
+## Troubleshooting
+
+**No se ve progreso**: Verifica que `value` esté entre 0-100  
+**No anima**: Asegúrate de que value cambie, usa `transition-all`  
+**Variante no cambia color**: Verifica prop `variant` correcta  
+**Muy fino**: Ajusta `className="h-3"` o mayor
+
+## Referencias
+
+- **Radix UI Progress**: <https://www.radix-ui.com/primitives/docs/components/progress>
+- **shadcn/ui Progress**: <https://ui.shadcn.com/docs/components/progress>