@adamosuiteservices/ui 2.13.3 → 2.14.0

package/docs/components/ui/slider.md

@@ -32,7 +32,7 @@ import { Slider } from "@adamosuiteservices/ui/slider";
 | `step`          | `number`                            | Incremento (default: 1)             |
 | `disabled`      | `boolean`                           | Deshabilita el slider               |
 | `orientation`   | `"horizontal" \| "vertical"`        | Orientación (default: horizontal)   |
-| `color`         | `"full" \| [string, string]`        | Gradiente de colores personalizado  |
+| `colorSlide`    | `"full" \| [string, string]`        | Gradiente de colores personalizado  |
 | `theme`         | `Theme`                             | Tema personalizado                  |
 | `className`     | `string`                            | Clases CSS adicionales              |
 
@@ -305,8 +305,8 @@ function RainbowSlider() {
 ## Estilos Base
 
 - **Track height**: `h-1.5` (horizontal), `w-1.5` (vertical)
-- **Track bg**: `bg-muted` (o gradiente personalizado con prop `color`)
-- **Range bg**: `bg-primary` (transparente cuando se usa `color`)
+- **Track bg**: `bg-muted` (o gradiente personalizado con prop `colorSlide`)
+- **Range bg**: `bg-primary` (transparente cuando se usa `colorSlide`)
 - **Thumb**: `size-4` con `border-primary`, `bg-white`, `shadow-sm`
 - **Thumb hover/focus**: `ring-4` con `ring-ring/50`
 - **Vertical**: `min-h-44` default, `flex-col`
@@ -324,7 +324,7 @@ function CustomColorSlider() {
       <div className="space-y-2">
         <Label>Purple to Pink: {value[0]}%</Label>
         <Slider
-          color={["#8b5cf6", "#ec4899"]}
+          colorSlide={["#8b5cf6", "#ec4899"]}
           value={value}
           onValueChange={setValue}
 ## Troubleshooting
@@ -335,11 +335,11 @@ function CustomColorSlider() {
 **Vertical no funciona**: Agrega `className="h-[Xpx]"` para altura explícita  
 **Step no funciona**: `step` debe ser divisor válido del rango (max - min)  
 **Multiple thumbs**: `value={[10, 50, 90]}` crea 3 thumbs  
-**Color no se aplica**: Prop `color` acepta `"full"` o array de 2 strings `["#color1", "#color2"]`  
+**Color no se aplica**: Prop `colorSlide` acepta `"full"` o array de 2 strings `["#color1", "#color2"]`  
 **Gradiente no visible**: Asegura que los colores sean válidos (hex, rgb, hsl, etc.)
         <Label>Blue to Green</Label>
         <Slider
-          color={["#3b82f6", "#10b981"]}
+          colorSlide={["#3b82f6", "#10b981"]}
           defaultValue={[40]}
           max={100}
           step={1}
@@ -351,7 +351,7 @@ function CustomColorSlider() {
       <div className="space-y-2">
         <Label>Orange to Red</Label>
         <Slider
-          color={["#f97316", "#ef4444"]}
+          colorSlide={["#f97316", "#ef4444"]}
           defaultValue={[75]}
           max={100}
           step={1}
@@ -386,7 +386,7 @@ function ColorfulTemperature() {
         <div className="space-y-2">
           <Label>Target Temperature</Label>
           <Slider
-            color={["#3b82f6", "#ef4444"]}
+            colorSlide={["#3b82f6", "#ef4444"]}
             value={temperature}
             onValueChange={setTemperature}
             min={50}

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>