@adamosuiteservices/ui 2.13.4 → 2.14.0

package/docs/components/ui/spinner.md

@@ -1,170 +1,170 @@
-# Spinner
-
-Indicador de carga animado usando Material Symbols. Icono giratorio para estados de loading.
-
-## Descripción
-
-El componente `Spinner` muestra un indicador de carga animado usando el ícono `progress_activity` de Material Symbols.
-
-## Importación
-
-```typescript
-import { Spinner } from "@adamosuiteservices/ui/spinner";
-```
-
-## Anatomía
-
-```tsx
-<Spinner />
-```
-
-**Componentes**: 1 (Spinner)
-
-## Props
-
-| Prop        | Tipo     | Descripción                    |
-| ----------- | -------- | ------------------------------ |
-| `className` | `string` | Clases CSS para tamaño y color |
-
-**Nota**: Acepta todas las props de `<span>` (Material Symbols es font-based)
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<Spinner />
-```
-
-### Tamaños
-
-```tsx
-<Spinner className="text-sm" />
-<Spinner className="text-lg" />  {/* Default */}
-<Spinner className="text-2xl" />
-<Spinner className="text-3xl" />
-```
-
-### Colores
-
-```tsx
-<Spinner className="text-primary" />
-<Spinner className="text-destructive" />
-<Spinner className="text-warning" />
-```
-
-### En Botones
-
-```tsx
-import { Button } from "@adamosuiteservices/ui/button";
-
-<Button disabled>
-  <Spinner />
-  Loading...
-</Button>
-
-<Button variant="outline" disabled>
-  <Spinner />
-  Please wait
-</Button>
-```
-
-### Con Estado
-
-```tsx
-import { useState } from "react";
-import { Button } from "@adamosuiteservices/ui/button";
-
-function App() {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleClick = () => {
-    setIsLoading(true);
-    setTimeout(() => setIsLoading(false), 2000);
-  };
-
-  return (
-    <Button onClick={handleClick} disabled={isLoading}>
-      {isLoading ? (
-        <>
-          <Spinner />
-          Submitting...
-        </>
-      ) : (
-        "Submit Form"
-      )}
-    </Button>
-  );
-}
-```
-
-### En Badges
-
-```tsx
-import { Badge } from "@adamosuiteservices/ui/badge";
-
-<Badge>
-  <Spinner />
-  Syncing
-</Badge>;
-```
-
-### En Cards
-
-```tsx
-import { Card, CardContent } from "@adamosuiteservices/ui/card";
-
-<Card>
-  <CardContent className="flex items-center space-x-3 p-6">
-    <Spinner className="text-xl" />
-    <span>Processing your payment...</span>
-  </CardContent>
-</Card>;
-```
-
-### Inline
-
-```tsx
-<p>
-  Loading data <Spinner className="inline text-lg" />
-</p>
-```
-
-## Casos de Uso
-
-**Button loading**: Estados de carga en botones  
-**Badge status**: Indicador de sincronización/procesamiento  
-**Inline loading**: Texto con loading inline  
-**Cards**: Contenido de cards en proceso  
-**Global loading**: Indicadores globales de app
-
-## Estilos Base
-
-- **Size**: `text-lg` default (font-size based)
-- **Animation**: `animate-spin`
-- **Role**: `role="status"`
-- **ARIA**: `aria-label="Loading"`
-
-## Accesibilidad
-
-- ✅ **Role**: `role="status"`
-- ✅ **ARIA**: `aria-label="Loading"` para screen readers
-- ✅ **Screen readers**: Anuncia estado de carga
-
-## Notas de Implementación
-
-- **Material Symbols**: Usa Icon component con symbol `progress_activity`
-- **Spin animation**: Tailwind `animate-spin`
-- **Font-based**: Material Symbol icon (span element)
-- **Customizable**: Tamaño y color via className con font-size classes
-
-## Troubleshooting
-
-**No gira**: Verifica `animate-spin` aplicado  
-**Muy pequeño/grande**: Ajusta `text-*` en className (text-lg, text-xl, etc.)  
-**Color incorrecto**: Usa `text-*` para cambiar color  
-**No se ve en button**: Asegúrate de espaciado con gap
-
-## Referencias
-
-- **Material Symbols**: <https://fonts.google.com/icons>
+# Spinner
+
+Indicador de carga animado usando Material Symbols. Icono giratorio para estados de loading.
+
+## Descripción
+
+El componente `Spinner` muestra un indicador de carga animado usando el ícono `progress_activity` de Material Symbols.
+
+## Importación
+
+```typescript
+import { Spinner } from "@adamosuiteservices/ui/spinner";
+```
+
+## Anatomía
+
+```tsx
+<Spinner />
+```
+
+**Componentes**: 1 (Spinner)
+
+## Props
+
+| Prop        | Tipo     | Descripción                    |
+| ----------- | -------- | ------------------------------ |
+| `className` | `string` | Clases CSS para tamaño y color |
+
+**Nota**: Acepta todas las props de `<span>` (Material Symbols es font-based)
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<Spinner />
+```
+
+### Tamaños
+
+```tsx
+<Spinner className="text-sm" />
+<Spinner className="text-lg" />  {/* Default */}
+<Spinner className="text-2xl" />
+<Spinner className="text-3xl" />
+```
+
+### Colores
+
+```tsx
+<Spinner className="text-primary" />
+<Spinner className="text-destructive" />
+<Spinner className="text-warning" />
+```
+
+### En Botones
+
+```tsx
+import { Button } from "@adamosuiteservices/ui/button";
+
+<Button disabled>
+  <Spinner />
+  Loading...
+</Button>
+
+<Button variant="outline" disabled>
+  <Spinner />
+  Please wait
+</Button>
+```
+
+### Con Estado
+
+```tsx
+import { useState } from "react";
+import { Button } from "@adamosuiteservices/ui/button";
+
+function App() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = () => {
+    setIsLoading(true);
+    setTimeout(() => setIsLoading(false), 2000);
+  };
+
+  return (
+    <Button onClick={handleClick} disabled={isLoading}>
+      {isLoading ? (
+        <>
+          <Spinner />
+          Submitting...
+        </>
+      ) : (
+        "Submit Form"
+      )}
+    </Button>
+  );
+}
+```
+
+### En Badges
+
+```tsx
+import { Badge } from "@adamosuiteservices/ui/badge";
+
+<Badge>
+  <Spinner />
+  Syncing
+</Badge>;
+```
+
+### En Cards
+
+```tsx
+import { Card, CardContent } from "@adamosuiteservices/ui/card";
+
+<Card>
+  <CardContent className="flex items-center space-x-3 p-6">
+    <Spinner className="text-xl" />
+    <span>Processing your payment...</span>
+  </CardContent>
+</Card>;
+```
+
+### Inline
+
+```tsx
+<p>
+  Loading data <Spinner className="inline text-lg" />
+</p>
+```
+
+## Casos de Uso
+
+**Button loading**: Estados de carga en botones  
+**Badge status**: Indicador de sincronización/procesamiento  
+**Inline loading**: Texto con loading inline  
+**Cards**: Contenido de cards en proceso  
+**Global loading**: Indicadores globales de app
+
+## Estilos Base
+
+- **Size**: `text-lg` default (font-size based)
+- **Animation**: `animate-spin`
+- **Role**: `role="status"`
+- **ARIA**: `aria-label="Loading"`
+
+## Accesibilidad
+
+- ✅ **Role**: `role="status"`
+- ✅ **ARIA**: `aria-label="Loading"` para screen readers
+- ✅ **Screen readers**: Anuncia estado de carga
+
+## Notas de Implementación
+
+- **Material Symbols**: Usa Icon component con symbol `progress_activity`
+- **Spin animation**: Tailwind `animate-spin`
+- **Font-based**: Material Symbol icon (span element)
+- **Customizable**: Tamaño y color via className con font-size classes
+
+## Troubleshooting
+
+**No gira**: Verifica `animate-spin` aplicado  
+**Muy pequeño/grande**: Ajusta `text-*` en className (text-lg, text-xl, etc.)  
+**Color incorrecto**: Usa `text-*` para cambiar color  
+**No se ve en button**: Asegúrate de espaciado con gap
+
+## Referencias
+
+- **Material Symbols**: <https://fonts.google.com/icons>