@adamosuiteservices/ui 2.14.2 → 2.15.0

package/docs/components/ui/select.md

@@ -137,21 +137,30 @@ function App() {
 ### Con Label
 
 ```tsx
-import { Label } from "@adamosuiteservices/ui/label";
-
-<div className="grid w-full max-w-sm items-center gap-2">
-  <Label htmlFor="email-provider">Email provider</Label>
-  <Select>
-    <SelectTrigger id="email-provider">
-      <SelectValue placeholder="Select a provider" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="gmail">Gmail</SelectItem>
-      <SelectItem value="outlook">Outlook</SelectItem>
-      <SelectItem value="yahoo">Yahoo</SelectItem>
-    </SelectContent>
-  </Select>
-</div>;
+import {
+  Field,
+  FieldContent,
+  FieldGroup,
+  FieldLabel,
+} from "@adamosuiteservices/ui/field";
+
+<FieldGroup className="max-w-sm">
+  <Field>
+    <FieldLabel htmlFor="email-provider">Email provider</FieldLabel>
+    <FieldContent>
+      <Select>
+        <SelectTrigger id="email-provider">
+          <SelectValue placeholder="Select a provider" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="gmail">Gmail</SelectItem>
+          <SelectItem value="outlook">Outlook</SelectItem>
+          <SelectItem value="yahoo">Yahoo</SelectItem>
+        </SelectContent>
+      </Select>
+    </FieldContent>
+  </Field>
+</FieldGroup>;
 ```
 
 ### Con Grupos
@@ -244,6 +253,13 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 
 ```tsx
 import { Button } from "@adamosuiteservices/ui/button";
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@adamosuiteservices/ui/field";
 
 function App() {
   const [value, setValue] = useState("");
@@ -259,25 +275,26 @@ function App() {
 
   return (
     <div className="space-y-4">
-      <div className="grid w-full max-w-sm items-center gap-2">
-        <Label htmlFor="priority">
-          Priority level <span className="text-destructive">*</span>
-        </Label>
-        <Select value={value} onValueChange={setValue}>
-          <SelectTrigger
-            id="priority"
-            className={error ? "border-destructive" : ""}
-          >
-            <SelectValue placeholder="Select priority" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="low">Low</SelectItem>
-            <SelectItem value="medium">Medium</SelectItem>
-            <SelectItem value="high">High</SelectItem>
-          </SelectContent>
-        </Select>
-        {error && <p className="text-destructive text-sm">{error}</p>}
-      </div>
+      <FieldGroup className="max-w-sm">
+        <Field>
+          <FieldLabel htmlFor="priority">
+            Priority level <span className="text-destructive">*</span>
+          </FieldLabel>
+          <FieldContent>
+            <Select value={value} onValueChange={setValue}>
+              <SelectTrigger id="priority" aria-invalid={!!error}>
+                <SelectValue placeholder="Select priority" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="low">Low</SelectItem>
+                <SelectItem value="medium">Medium</SelectItem>
+                <SelectItem value="high">High</SelectItem>
+              </SelectContent>
+            </Select>
+          </FieldContent>
+          {error && <FieldError>{error}</FieldError>}
+        </Field>
+      </FieldGroup>
       <Button onClick={handleValidate} variant="outline">
         Validate Selection
       </Button>

package/docs/components/ui/sheet.md

@@ -32,9 +32,7 @@ import {
       <SheetTitle>Are you sure?</SheetTitle>
       <SheetDescription>This action cannot be undone.</SheetDescription>
     </SheetHeader>
-    <SheetBody>
-      {/* Content */}
-    </SheetBody>
+    <SheetBody>{/* Content */}</SheetBody>
   </SheetContent>
 </Sheet>
 ```
@@ -74,9 +72,7 @@ Ancho: `w-11/12` en móvil, `max-w-sm` en desktop. Border radius: `rounded-2xl`.
       <SheetTitle>Settings</SheetTitle>
       <SheetDescription>Configure your preferences</SheetDescription>
     </SheetHeader>
-    <SheetBody>
-      {/* Content with horizontal padding */}
-    </SheetBody>
+    <SheetBody>{/* Content with horizontal padding */}</SheetBody>
   </SheetContent>
 </Sheet>
 ```
@@ -126,9 +122,7 @@ Ancho: `w-11/12` en móvil, `max-w-sm` en desktop. Border radius: `rounded-2xl`.
       <SheetTitle>Edit profile</SheetTitle>
       <SheetDescription>Make changes to your profile here.</SheetDescription>
     </SheetHeader>
-    <SheetBody>
-      {/* Form fields */}
-    </SheetBody>
+    <SheetBody>{/* Form fields */}</SheetBody>
     <SheetFooter>
       <SheetClose asChild>
         <Button variant="outline">Cancel</Button>

package/docs/components/ui/slider.md

@@ -22,19 +22,19 @@ import { Slider } from "@adamosuiteservices/ui/slider";
 
 ## 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              |
+| 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]`
 
@@ -51,24 +51,33 @@ import { Slider } from "@adamosuiteservices/ui/slider";
 ### Con Label
 
 ```tsx
-import { Label } from "@adamosuiteservices/ui/label";
+import {
+  Field,
+  FieldContent,
+  FieldGroup,
+  FieldLabel,
+} from "@adamosuiteservices/ui/field";
 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>
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel htmlFor="volume">Volume: {value[0]}%</FieldLabel>
+        <FieldContent>
+          <Slider
+            id="volume"
+            max={100}
+            step={1}
+            value={value}
+            onValueChange={setValue}
+            className="w-full"
+          />
+        </FieldContent>
+      </Field>
+    </FieldGroup>
   );
 }
 ```
@@ -80,18 +89,22 @@ 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>
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel>
+          Price Range: ${value[0]} - ${value[1]}
+        </FieldLabel>
+        <FieldContent>
+          <Slider
+            max={100}
+            step={1}
+            value={value}
+            onValueChange={setValue}
+            className="w-full"
+          />
+        </FieldContent>
+      </Field>
+    </FieldGroup>
   );
 }
 ```
@@ -104,20 +117,24 @@ function App() {
   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>
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel>Progress: {value[0]}%</FieldLabel>
+        <FieldContent>
+          <Slider
+            max={100}
+            step={stepSize}
+            value={value}
+            onValueChange={setValue}
+            className="w-full"
+          />
+        </FieldContent>
+        <FieldDescription>
+          <div className="flex justify-between text-xs">
+            <span>0%</span>
+            <span>25%</span>
+            <span>50%</span>
+            <span>75%</span>
         <span>100%</span>
       </div>
     </div>
@@ -134,7 +151,7 @@ function App() {
   return (
     <div className="flex h-64 items-center space-x-6">
       <div className="flex flex-col items-center space-y-2">
-        <Label>Volume</Label>
+        <FieldLabel>Volume</FieldLabel>
         <Slider
           orientation="vertical"
           max={100}
@@ -162,34 +179,38 @@ function App() {
   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>
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel>Volume: {value[0]}%</FieldLabel>
+        <FieldContent>
+          <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>
+        </FieldContent>
+      </Field>
+    </FieldGroup>
   );
 }
 ```
@@ -215,7 +236,7 @@ function PriceFilter() {
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
-          <Label>Price Range</Label>
+          <FieldLabel>Price Range</FieldLabel>
           <Slider
             value={priceRange}
             onValueChange={setPriceRange}
@@ -259,7 +280,7 @@ function ColorPicker() {
         <div className="space-y-4">
           <div className="space-y-2">
             <div className="flex justify-between">
-              <Label>Red</Label>
+              <FieldLabel>Red</FieldLabel>
               <span className="text-sm text-muted-foreground">{red[0]}</span>
             </div>
             <Slider value={red} onValueChange={setRed} max={255} step={1} />
@@ -267,7 +288,7 @@ function ColorPicker() {
 
           <div className="space-y-2">
             <div className="flex justify-between">
-              <Label>Green</Label>
+              <FieldLabel>Green</FieldLabel>
               <span className="text-sm text-muted-foreground">{green[0]}</span>
             </div>
             <Slider value={green} onValueChange={setGreen} max={255} step={1} />
@@ -275,7 +296,7 @@ function ColorPicker() {
 
           <div className="space-y-2">
             <div className="flex justify-between">
-              <Label>Blue</Label>
+              <FieldLabel>Blue</FieldLabel>
               <span className="text-sm text-muted-foreground">{blue[0]}</span>
             </div>
             <Slider value={blue} onValueChange={setBlue} max={255} step={1} />
@@ -289,18 +310,18 @@ function ColorPicker() {
 
 ### Con Gradiente Arcoíris
 
-```tsx
+````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  
+**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
 
@@ -329,13 +350,13 @@ function CustomColorSlider() {
           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"]`  
+**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
@@ -361,7 +382,7 @@ function CustomColorSlider() {
     </div>
   );
 }
-```
+````
 
 ### Control de Temperatura con Colores