@adamosuiteservices/ui 2.13.2 → 2.13.4

package/docs/components/ui/slider.md

@@ -1,341 +1,460 @@
-# Slider
-
-Control de rango con thumbs deslizables. Soporta valores simples y rangos. Basado en Radix UI.
-
-## Descripción
-
-El componente `Slider` permite seleccionar un valor arrastrando un control deslizante.
-
-## Importación
-
-```typescript
-import { Slider } from "@adamosuiteservices/ui/slider";
-```
-
-## Anatomía
-
-```tsx
-<Slider defaultValue={[50]} max={100} step={1} />
-```
-
-**Componentes**: 1 (Slider) con 3 partes internas (Root, Track, Range, Thumb)
-
-## Props
-
-| Prop            | Tipo                         | Descripción                         |
-| --------------- | ---------------------------- | ----------------------------------- |
-| `defaultValue`  | `number[]`                   | Valor inicial (uncontrolled)        |
-| `value`         | `number[]`                   | Valor controlado (array de números) |
-| `onValueChange` | `(value: number[]) => void`  | Callback al cambiar valor           |
-| `min`           | `number`                     | Valor mínimo (default: 0)           |
-| `max`           | `number`                     | Valor máximo (default: 100)         |
-| `step`          | `number`                     | Incremento (default: 1)             |
-| `disabled`      | `boolean`                    | Deshabilita el slider               |
-| `orientation`   | `"horizontal" \| "vertical"` | Orientación (default: horizontal)   |
-| `theme`         | `Theme`                      | Tema personalizado                  |
-| `className`     | `string`                     | Clases CSS adicionales              |
-
-**Nota**: `value` y `defaultValue` siempre son arrays. Single value = `[50]`, range = `[20, 80]`
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-import { Slider } from "@adamosuiteservices/ui/slider";
-
-<Slider defaultValue={[33]} max={100} step={1} className="w-[60%]" />;
-```
-
-### Con Label
-
-```tsx
-import { Label } from "@adamosuiteservices/ui/label";
-import { useState } from "react";
-
-function App() {
-  const [value, setValue] = useState([50]);
-
-  return (
-    <div className="grid w-full max-w-sm items-center gap-2">
-      <Label htmlFor="volume">Volume: {value[0]}%</Label>
-      <Slider
-        id="volume"
-        max={100}
-        step={1}
-        value={value}
-        onValueChange={setValue}
-        className="w-full"
-      />
-    </div>
-  );
-}
-```
-
-### Range (Dos Valores)
-
-```tsx
-function App() {
-  const [value, setValue] = useState([20, 80]);
-
-  return (
-    <div className="grid w-full max-w-sm items-center gap-2">
-      <Label>
-        Price Range: ${value[0]} - ${value[1]}
-      </Label>
-      <Slider
-        max={100}
-        step={1}
-        value={value}
-        onValueChange={setValue}
-        className="w-full"
-      />
-    </div>
-  );
-}
-```
-
-### Con Steps
-
-```tsx
-function App() {
-  const [value, setValue] = useState([25]);
-  const stepSize = 25;
-
-  return (
-    <div className="grid w-full max-w-sm items-center gap-2">
-      <Label>Progress: {value[0]}%</Label>
-      <Slider
-        max={100}
-        step={stepSize}
-        value={value}
-        onValueChange={setValue}
-        className="w-full"
-      />
-      <div className="flex justify-between text-xs text-muted-foreground">
-        <span>0%</span>
-        <span>25%</span>
-        <span>50%</span>
-        <span>75%</span>
-        <span>100%</span>
-      </div>
-    </div>
-  );
-}
-```
-
-### Vertical
-
-```tsx
-function App() {
-  const [value, setValue] = useState([60]);
-
-  return (
-    <div className="flex h-64 items-center space-x-6">
-      <div className="flex flex-col items-center space-y-2">
-        <Label>Volume</Label>
-        <Slider
-          orientation="vertical"
-          max={100}
-          step={1}
-          value={value}
-          onValueChange={setValue}
-          className="h-48"
-        />
-        <span className="text-sm text-muted-foreground">{value[0]}%</span>
-      </div>
-    </div>
-  );
-}
-```
-
-### Con Botones
-
-```tsx
-import { Button } from "@adamosuiteservices/ui/button";
-
-function App() {
-  const [value, setValue] = useState([50]);
-
-  const decrease = () => setValue([Math.max(0, value[0] - 10)]);
-  const increase = () => setValue([Math.min(100, value[0] + 10)]);
-
-  return (
-    <div className="grid w-full max-w-sm items-center gap-4">
-      <Label>Volume: {value[0]}%</Label>
-      <div className="flex items-center space-x-2">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={decrease}
-          disabled={value[0] === 0}
-        >
-          -
-        </Button>
-        <Slider
-          value={value}
-          onValueChange={setValue}
-          max={100}
-          step={1}
-          className="flex-1"
-        />
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={increase}
-          disabled={value[0] === 100}
-        >
-          +
-        </Button>
-      </div>
-    </div>
-  );
-}
-```
-
-### Price Filter
-
-```tsx
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@adamosuiteservices/ui/card";
-import { Button } from "@adamosuiteservices/ui/button";
-
-function PriceFilter() {
-  const [priceRange, setPriceRange] = useState([25, 75]);
-
-  return (
-    <Card className="w-full max-w-sm">
-      <CardHeader>
-        <CardTitle>Filter by Price</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="space-y-2">
-          <Label>Price Range</Label>
-          <Slider
-            value={priceRange}
-            onValueChange={setPriceRange}
-            max={100}
-            step={1}
-            className="w-full"
-          />
-        </div>
-        <div className="flex justify-between text-sm">
-          <span>${priceRange[0]}</span>
-          <span>${priceRange[1]}</span>
-        </div>
-        <Button className="w-full">Apply Filter</Button>
-      </CardContent>
-    </Card>
-  );
-}
-```
-
-### RGB Color Picker
-
-```tsx
-function ColorPicker() {
-  const [red, setRed] = useState([128]);
-  const [green, setGreen] = useState([200]);
-  const [blue, setBlue] = useState([75]);
-
-  const rgbColor = `rgb(${red[0]}, ${green[0]}, ${blue[0]})`;
-
-  return (
-    <Card className="w-full max-w-sm">
-      <CardHeader>
-        <CardTitle>RGB Color Picker</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        <div
-          className="w-full h-20 rounded-lg border"
-          style={{ backgroundColor: rgbColor }}
-        />
-
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <div className="flex justify-between">
-              <Label>Red</Label>
-              <span className="text-sm text-muted-foreground">{red[0]}</span>
-            </div>
-            <Slider value={red} onValueChange={setRed} max={255} step={1} />
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex justify-between">
-              <Label>Green</Label>
-              <span className="text-sm text-muted-foreground">{green[0]}</span>
-            </div>
-            <Slider value={green} onValueChange={setGreen} max={255} step={1} />
-          </div>
-
-          <div className="space-y-2">
-            <div className="flex justify-between">
-              <Label>Blue</Label>
-              <span className="text-sm text-muted-foreground">{blue[0]}</span>
-            </div>
-            <Slider value={blue} onValueChange={setBlue} max={255} step={1} />
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-```
-
-### Deshabilitado
-
-```tsx
-<Slider defaultValue={[50]} max={100} step={1} disabled className="w-full" />
-```
-
-## Casos de Uso
-
-**Volume control**: Audio, música, efectos de sonido  
-**Price filters**: Rango de precios en e-commerce  
-**Color pickers**: RGB, HSL sliders  
-**Brightness/Contrast**: Ajustes de imagen  
-**Temperature**: Termostatos, controles de clima  
-**Range selection**: Filtros de fecha, edad, tamaño
-
-## Estilos Base
-
-- **Track height**: `h-1.5` (horizontal), `w-1.5` (vertical)
-- **Track bg**: `bg-muted`
-- **Range bg**: `bg-primary`
-- **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`
-
-## Accesibilidad
-
-- ✅ **Role**: `role="slider"` con `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
-- ✅ **Keyboard**: Arrow keys para ajustar valor, Home/End para min/max
-- ✅ **Focus**: Focus ring visible en thumbs
-- ✅ **Label**: Asociar con `id` para screen readers
-
-## Notas de Implementación
-
-- **Radix UI**: Basado en `@radix-ui/react-slider`
-- **Multiple thumbs**: Array length determina número de thumbs
-- **Value format**: Siempre array, ej: `[50]` para single, `[20, 80]` para range
-- **Auto-thumbs**: Genera thumbs automáticamente basado en `value.length`
-- **Data attributes**: `data-orientation` para estilos horizontal/vertical
-- **Theme support**: Prop `theme` para personalización
-
-## Troubleshooting
-
-**Thumb no se mueve**: Verifica `max`, `min` y `step` son números válidos  
-**Value no actualiza**: En modo controlado usa `value` + `onValueChange`, no `defaultValue`  
-**Range invertido**: Asegura `value[0] < value[1]` en ranges  
-**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
-
-## Referencias
-
-- **Radix UI Slider**: <https://www.radix-ui.com/primitives/docs/components/slider>
-- **shadcn/ui Slider**: <https://ui.shadcn.com/docs/components/slider>
+# Slider
+
+Control de rango con thumbs deslizables. Soporta valores simples y rangos. Basado en Radix UI.
+
+## Descripción
+
+El componente `Slider` permite seleccionar un valor arrastrando un control deslizante.
+
+## Importación
+
+```typescript
+import { Slider } from "@adamosuiteservices/ui/slider";
+```
+
+## Anatomía
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+**Componentes**: 1 (Slider) con 3 partes internas (Root, Track, Range, Thumb)
+
+## Props
+
+| Prop            | Tipo                                | Descripción                         |
+| --------------- | ----------------------------------- | ----------------------------------- |
+| `defaultValue`  | `number[]`                          | Valor inicial (uncontrolled)        |
+| `value`         | `number[]`                          | Valor controlado (array de números) |
+| `onValueChange` | `(value: number[]) => void`         | Callback al cambiar valor           |
+| `min`           | `number`                            | Valor mínimo (default: 0)           |
+| `max`           | `number`                            | Valor máximo (default: 100)         |
+| `step`          | `number`                            | Incremento (default: 1)             |
+| `disabled`      | `boolean`                           | Deshabilita el slider               |
+| `orientation`   | `"horizontal" \| "vertical"`        | Orientación (default: horizontal)   |
+| `colorSlide`    | `"full" \| [string, string]`        | Gradiente de colores personalizado  |
+| `theme`         | `Theme`                             | Tema personalizado                  |
+| `className`     | `string`                            | Clases CSS adicionales              |
+
+**Nota**: `value` y `defaultValue` siempre son arrays. Single value = `[50]`, range = `[20, 80]`
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import { Slider } from "@adamosuiteservices/ui/slider";
+
+<Slider defaultValue={[33]} max={100} step={1} className="w-[60%]" />;
+```
+
+### Con Label
+
+```tsx
+import { Label } from "@adamosuiteservices/ui/label";
+import { useState } from "react";
+
+function App() {
+  const [value, setValue] = useState([50]);
+
+  return (
+    <div className="grid w-full max-w-sm items-center gap-2">
+      <Label htmlFor="volume">Volume: {value[0]}%</Label>
+      <Slider
+        id="volume"
+        max={100}
+        step={1}
+        value={value}
+        onValueChange={setValue}
+        className="w-full"
+      />
+    </div>
+  );
+}
+```
+
+### Range (Dos Valores)
+
+```tsx
+function App() {
+  const [value, setValue] = useState([20, 80]);
+
+  return (
+    <div className="grid w-full max-w-sm items-center gap-2">
+      <Label>
+        Price Range: ${value[0]} - ${value[1]}
+      </Label>
+      <Slider
+        max={100}
+        step={1}
+        value={value}
+        onValueChange={setValue}
+        className="w-full"
+      />
+    </div>
+  );
+}
+```
+
+### Con Steps
+
+```tsx
+function App() {
+  const [value, setValue] = useState([25]);
+  const stepSize = 25;
+
+  return (
+    <div className="grid w-full max-w-sm items-center gap-2">
+      <Label>Progress: {value[0]}%</Label>
+      <Slider
+        max={100}
+        step={stepSize}
+        value={value}
+        onValueChange={setValue}
+        className="w-full"
+      />
+      <div className="flex justify-between text-xs text-muted-foreground">
+        <span>0%</span>
+        <span>25%</span>
+        <span>50%</span>
+        <span>75%</span>
+        <span>100%</span>
+      </div>
+    </div>
+  );
+}
+```
+
+### Vertical
+
+```tsx
+function App() {
+  const [value, setValue] = useState([60]);
+
+  return (
+    <div className="flex h-64 items-center space-x-6">
+      <div className="flex flex-col items-center space-y-2">
+        <Label>Volume</Label>
+        <Slider
+          orientation="vertical"
+          max={100}
+          step={1}
+          value={value}
+          onValueChange={setValue}
+          className="h-48"
+        />
+        <span className="text-sm text-muted-foreground">{value[0]}%</span>
+      </div>
+    </div>
+  );
+}
+```
+
+### Con Botones
+
+```tsx
+import { Button } from "@adamosuiteservices/ui/button";
+
+function App() {
+  const [value, setValue] = useState([50]);
+
+  const decrease = () => setValue([Math.max(0, value[0] - 10)]);
+  const increase = () => setValue([Math.min(100, value[0] + 10)]);
+
+  return (
+    <div className="grid w-full max-w-sm items-center gap-4">
+      <Label>Volume: {value[0]}%</Label>
+      <div className="flex items-center space-x-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={decrease}
+          disabled={value[0] === 0}
+        >
+          -
+        </Button>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={100}
+          step={1}
+          className="flex-1"
+        />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={increase}
+          disabled={value[0] === 100}
+        >
+          +
+        </Button>
+      </div>
+    </div>
+  );
+}
+```
+
+### Price Filter
+
+```tsx
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@adamosuiteservices/ui/card";
+import { Button } from "@adamosuiteservices/ui/button";
+
+function PriceFilter() {
+  const [priceRange, setPriceRange] = useState([25, 75]);
+
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Filter by Price</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label>Price Range</Label>
+          <Slider
+            value={priceRange}
+            onValueChange={setPriceRange}
+            max={100}
+            step={1}
+            className="w-full"
+          />
+        </div>
+        <div className="flex justify-between text-sm">
+          <span>${priceRange[0]}</span>
+          <span>${priceRange[1]}</span>
+        </div>
+        <Button className="w-full">Apply Filter</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### RGB Color Picker
+
+```tsx
+function ColorPicker() {
+  const [red, setRed] = useState([128]);
+  const [green, setGreen] = useState([200]);
+  const [blue, setBlue] = useState([75]);
+
+  const rgbColor = `rgb(${red[0]}, ${green[0]}, ${blue[0]})`;
+
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>RGB Color Picker</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div
+          className="w-full h-20 rounded-lg border"
+          style={{ backgroundColor: rgbColor }}
+        />
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label>Red</Label>
+              <span className="text-sm text-muted-foreground">{red[0]}</span>
+            </div>
+            <Slider value={red} onValueChange={setRed} max={255} step={1} />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label>Green</Label>
+              <span className="text-sm text-muted-foreground">{green[0]}</span>
+            </div>
+            <Slider value={green} onValueChange={setGreen} max={255} step={1} />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <Label>Blue</Label>
+              <span className="text-sm text-muted-foreground">{blue[0]}</span>
+            </div>
+            <Slider value={blue} onValueChange={setBlue} max={255} step={1} />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Con Gradiente Arcoíris
+
+```tsx
+function RainbowSlider() {
+  const [value, setValue] = useState([50]);
+
+## Casos de Uso
+
+**Volume control**: Audio, música, efectos de sonido  
+**Price filters**: Rango de precios en e-commerce  
+**Color pickers**: RGB, HSL sliders con gradientes personalizados  
+**Brightness/Contrast**: Ajustes de imagen  
+**Temperature**: Termostatos, controles de clima con gradientes frío-calor  
+**Range selection**: Filtros de fecha, edad, tamaño  
+**Hue selection**: Selectores de tono con gradiente arcoíris
+## Estilos Base
+
+- **Track height**: `h-1.5` (horizontal), `w-1.5` (vertical)
+- **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`
+- **Gradiente full**: Arcoíris de 6 colores (rojo → amarillo → verde → cyan → azul → rojo)
+- **Gradiente personalizado**: Linear gradient entre dos colores especificados
+### Con Colores Personalizados
+
+```tsx
+function CustomColorSlider() {
+  const [value, setValue] = useState([60]);
+
+  return (
+    <div className="space-y-6 w-full max-w-sm">
+      {/* Púrpura a Rosa */}
+      <div className="space-y-2">
+        <Label>Purple to Pink: {value[0]}%</Label>
+        <Slider
+          colorSlide={["#8b5cf6", "#ec4899"]}
+          value={value}
+          onValueChange={setValue}
+## Troubleshooting
+
+**Thumb no se mueve**: Verifica `max`, `min` y `step` son números válidos  
+**Value no actualiza**: En modo controlado usa `value` + `onValueChange`, no `defaultValue`  
+**Range invertido**: Asegura `value[0] < value[1]` en ranges  
+**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 `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
+          colorSlide={["#3b82f6", "#10b981"]}
+          defaultValue={[40]}
+          max={100}
+          step={1}
+          className="w-full"
+        />
+      </div>
+
+      {/* Naranja a Rojo */}
+      <div className="space-y-2">
+        <Label>Orange to Red</Label>
+        <Slider
+          colorSlide={["#f97316", "#ef4444"]}
+          defaultValue={[75]}
+          max={100}
+          step={1}
+          className="w-full"
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+### Control de Temperatura con Colores
+
+```tsx
+import { Badge } from "@adamosuiteservices/ui/badge";
+
+function ColorfulTemperature() {
+  const [temperature, setTemperature] = useState([72]);
+
+  return (
+    <Card className="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle>Temperature Control</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="text-center">
+          <div className="text-3xl font-bold">{temperature[0]}°F</div>
+          <Badge variant="secondary" className="mt-2">
+            Cold to Hot
+          </Badge>
+        </div>
+        <div className="space-y-2">
+          <Label>Target Temperature</Label>
+          <Slider
+            colorSlide={["#3b82f6", "#ef4444"]}
+            value={temperature}
+            onValueChange={setTemperature}
+            min={50}
+            max={90}
+            step={1}
+            className="w-full"
+          />
+        </div>
+        <div className="flex justify-between text-xs text-muted-foreground">
+          <span>❄️ 50°F</span>
+          <span>🔥 90°F</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+### Deshabilitado
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} disabled className="w-full" />
+```
+
+## Casos de Uso
+
+**Volume control**: Audio, música, efectos de sonido  
+**Price filters**: Rango de precios en e-commerce  
+**Color pickers**: RGB, HSL sliders  
+**Brightness/Contrast**: Ajustes de imagen  
+**Temperature**: Termostatos, controles de clima  
+**Range selection**: Filtros de fecha, edad, tamaño
+
+## Estilos Base
+
+- **Track height**: `h-1.5` (horizontal), `w-1.5` (vertical)
+- **Track bg**: `bg-muted`
+- **Range bg**: `bg-primary`
+- **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`
+
+## Accesibilidad
+
+- ✅ **Role**: `role="slider"` con `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
+- ✅ **Keyboard**: Arrow keys para ajustar valor, Home/End para min/max
+- ✅ **Focus**: Focus ring visible en thumbs
+- ✅ **Label**: Asociar con `id` para screen readers
+
+## Notas de Implementación
+
+- **Radix UI**: Basado en `@radix-ui/react-slider`
+- **Multiple thumbs**: Array length determina número de thumbs
+- **Value format**: Siempre array, ej: `[50]` para single, `[20, 80]` para range
+- **Auto-thumbs**: Genera thumbs automáticamente basado en `value.length`
+- **Data attributes**: `data-orientation` para estilos horizontal/vertical
+- **Theme support**: Prop `theme` para personalización
+
+## Troubleshooting
+
+**Thumb no se mueve**: Verifica `max`, `min` y `step` son números válidos  
+**Value no actualiza**: En modo controlado usa `value` + `onValueChange`, no `defaultValue`  
+**Range invertido**: Asegura `value[0] < value[1]` en ranges  
+**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
+
+## Referencias
+
+- **Radix UI Slider**: <https://www.radix-ui.com/primitives/docs/components/slider>
+- **shadcn/ui Slider**: <https://ui.shadcn.com/docs/components/slider>