@adamosuiteservices/ui 2.14.1 → 2.15.0

package/docs/components/ui/textarea.md

@@ -50,12 +50,21 @@ import { Textarea } from "@adamosuiteservices/ui/textarea";
 ### Con Label
 
 ```tsx
-import { Label } from "@adamosuiteservices/ui/label";
-
-<div className="grid w-full gap-2">
-  <Label htmlFor="message">Your message</Label>
-  <Textarea placeholder="Type your message here." id="message" />
-</div>;
+import {
+  Field,
+  FieldContent,
+  FieldGroup,
+  FieldLabel,
+} from "@adamosuiteservices/ui/field";
+
+<FieldGroup className="max-w-sm">
+  <Field>
+    <FieldLabel htmlFor="message">Your message</FieldLabel>
+    <FieldContent>
+      <Textarea placeholder="Type your message here." id="message" />
+    </FieldContent>
+  </Field>
+</FieldGroup>;
 ```
 
 ### Controlado con Contador
@@ -67,22 +76,28 @@ function App() {
   const [value, setValue] = useState("");
 
   return (
-    <div className="grid w-full gap-2">
-      <Label htmlFor="feedback">
-        Your feedback ({value.length}/500 characters)
-      </Label>
-      <Textarea
-        id="feedback"
-        placeholder="Share your thoughts..."
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        maxLength={500}
-      />
-      <div className="flex justify-between text-sm text-muted-foreground">
-        <span>{value.length} characters</span>
-        <span>{500 - value.length} remaining</span>
-      </div>
-    </div>
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel htmlFor="feedback">
+          Your feedback ({value.length}/500 characters)
+        </FieldLabel>
+        <FieldContent>
+          <Textarea
+            id="feedback"
+            placeholder="Share your thoughts..."
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            maxLength={500}
+          />
+        </FieldContent>
+        <FieldDescription>
+          <div className="flex justify-between text-xs">
+            <span>{value.length} characters</span>
+            <span>{500 - value.length} remaining</span>
+          </div>
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
   );
 }
 ```

package/docs/components/ui/tooltip.md

@@ -210,7 +210,7 @@ Para múltiples tooltips, usa TooltipProvider:
       <p>Delete permanently</p>
     </TooltipContent>
   </Tooltip>
-</div>;
+</div>
 ```
 
 ### Form Help Icons
@@ -224,7 +224,10 @@ import { Input } from "@adamosuiteservices/ui/input";
     <Label htmlFor="username">Username</Label>
     <Tooltip>
       <TooltipTrigger asChild>
-        <Icon symbol="help" className="cursor-help text-lg text-muted-foreground" />
+        <Icon
+          symbol="help"
+          className="cursor-help text-lg text-muted-foreground"
+        />
       </TooltipTrigger>
       <TooltipContent>
         <p>

package/docs/components/ui/typography.md

@@ -18,12 +18,12 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 
 ## Props
 
-| Prop        | Tipo                                        | Default     | Descripción                             |
-| ----------- | ------------------------------------------- | ----------- | --------------------------------------- |
-| `variant`   | `"lg" \| "md" \| "sm" \| "xs" \| "caption"` | `"sm"`      | Tamaño del texto                        |
+| Prop        | Tipo                                                                                                       | Default     | Descripción                             |
+| ----------- | ---------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------- |
+| `variant`   | `"lg" \| "md" \| "sm" \| "xs" \| "caption"`                                                                | `"sm"`      | Tamaño del texto                        |
 | `color`     | `"default" \| "muted" \| "primary" \| "success" \| "warning" \| "destructive" \| "waiting" \| "secondary"` | `"default"` | Color del texto                         |
-| `asChild`   | `boolean`                                   | `false`     | Renderiza como child element (usa Slot) |
-| `className` | `string`                                    | -           | Clases CSS adicionales                  |
+| `asChild`   | `boolean`                                                                                                  | `false`     | Renderiza como child element (usa Slot) |
+| `className` | `string`                                                                                                   | -           | Clases CSS adicionales                  |
 
 **Nota**: Acepta todas las props de `<p>` cuando `asChild=false`
 
@@ -31,26 +31,26 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 
 ### Tamaños
 
-| Variante  | Font Size     | Uso                        |
-| --------- | ------------- | -------------------------- |
-| `lg`      | `text-lg`     | Headings, texto enfatizado |
-| `md`      | `text-base`   | Body text                  |
+| Variante  | Font Size     | Uso                              |
+| --------- | ------------- | -------------------------------- |
+| `lg`      | `text-lg`     | Headings, texto enfatizado       |
+| `md`      | `text-base`   | Body text                        |
 | `sm`      | `text-sm`     | Secondary text, labels (default) |
-| `xs`      | `text-xs`     | Fine print, detalles       |
-| `caption` | `text-[11px]` | Captions, metadata         |
+| `xs`      | `text-xs`     | Fine print, detalles             |
+| `caption` | `text-[11px]` | Captions, metadata               |
 
 ### Colores
 
-| Color         | Clase CSS                 | Uso                                    |
-| ------------- | ------------------------- | -------------------------------------- |
-| `default`     | `text-foreground`         | Texto principal (default)              |
-| `muted`       | `text-muted-foreground`   | Texto secundario                       |
-| `primary`     | `text-primary`            | Texto con color de marca               |
-| `success`     | `text-success`            | Mensajes de éxito, confirmaciones      |
-| `warning`     | `text-warning`            | Advertencias, precauciones             |
-| `destructive` | `text-destructive`        | Errores, acciones destructivas         |
-| `waiting`     | `text-waiting`            | Estados pendientes, en progreso        |
-| `secondary`   | `text-secondary-foreground` | Texto secundario alternativo         |
+| Color         | Clase CSS                   | Uso                               |
+| ------------- | --------------------------- | --------------------------------- |
+| `default`     | `text-foreground`           | Texto principal (default)         |
+| `muted`       | `text-muted-foreground`     | Texto secundario                  |
+| `primary`     | `text-primary`              | Texto con color de marca          |
+| `success`     | `text-success`              | Mensajes de éxito, confirmaciones |
+| `warning`     | `text-warning`              | Advertencias, precauciones        |
+| `destructive` | `text-destructive`          | Errores, acciones destructivas    |
+| `waiting`     | `text-waiting`              | Estados pendientes, en progreso   |
+| `secondary`   | `text-secondary-foreground` | Texto secundario alternativo      |
 
 ## Patrones de Uso
 
@@ -225,45 +225,69 @@ import { Typography } from "@adamosuiteservices/ui/typography";
 ### Uso de Colores
 
 ```tsx
-{/* ✅ Correcto - Color default para contenido principal */}
+{
+  /* ✅ Correcto - Color default para contenido principal */
+}
 <Typography variant="md" color="default">
   This is the main content that users should read.
-</Typography>
+</Typography>;
 
-{/* ✅ Correcto - Color muted para información secundaria */}
+{
+  /* ✅ Correcto - Color muted para información secundaria */
+}
 <Typography variant="sm" color="muted">
   Optional description or helper text.
-</Typography>
+</Typography>;
 
-{/* ✅ Correcto - Combinar tamaño y color apropiadamente */}
+{
+  /* ✅ Correcto - Combinar tamaño y color apropiadamente */
+}
 <div>
-  <Typography variant="lg" color="default">Main Heading</Typography>
-  <Typography variant="sm" color="muted">Subtitle or description</Typography>
-</div>
+  <Typography variant="lg" color="default">
+    Main Heading
+  </Typography>
+  <Typography variant="sm" color="muted">
+    Subtitle or description
+  </Typography>
+</div>;
 
-{/* ⚠️ Evitar - Color muted en contenido principal */}
+{
+  /* ⚠️ Evitar - Color muted en contenido principal */
+}
 <Typography variant="md" color="muted">
   Important information that should be easily readable
-</Typography>
+</Typography>;
 ```
 
 ### Jerarquía Visual
 
 ```tsx
-{/* ✅ Correcto - Jerarquía clara con tamaño y color */}
+{
+  /* ✅ Correcto - Jerarquía clara con tamaño y color */
+}
 <article>
-  <Typography variant="lg" color="default">Article Title</Typography>
-  <Typography variant="sm" color="muted">Published 2 hours ago</Typography>
+  <Typography variant="lg" color="default">
+    Article Title
+  </Typography>
+  <Typography variant="sm" color="muted">
+    Published 2 hours ago
+  </Typography>
   <Typography variant="md" color="default">
     Article content goes here with proper emphasis.
   </Typography>
-</article>
+</article>;
 
-{/* ✅ Correcto - Lista con estados */}
+{
+  /* ✅ Correcto - Lista con estados */
+}
 <div>
-  <Typography variant="md" color="default">Active item</Typography>
-  <Typography variant="md" color="muted">Inactive item</Typography>
-</div>
+  <Typography variant="md" color="default">
+    Active item
+  </Typography>
+  <Typography variant="md" color="muted">
+    Inactive item
+  </Typography>
+</div>;
 ```
 
 ## Estilos Base

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.14.1",
+  "version": "2.15.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",