@adamosuiteservices/ui 2.14.1 → 2.15.0

package/dist/switch.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-BB_1_6y_.cjs"),O=require("react"),S=require("./index-BWaO7kQK.cjs"),R=require("./index-_XxjJPRD.cjs"),B=require("./index-cwZN7ZY3.cjs"),M=require("./index-DYxWvftI.cjs"),I=require("./index-bSPhqlcX.cjs"),y=require("./index-CocSS1YK.cjs"),j=require("./index-DoxiiusW.cjs");function $(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=$(O);var h="Switch",[z]=B.createContextScope(h),[H,A]=z(h),C=s.forwardRef((e,r)=>{const{__scopeSwitch:t,name:a,checked:n,defaultChecked:b,required:d,disabled:c,value:u="on",onCheckedChange:x,form:i,...g}=e,[l,m]=s.useState(null),w=R.useComposedRefs(r,f=>m(f)),k=s.useRef(!1),v=l?i||!!l.closest("form"):!0,[p,N]=S.useControllableState({prop:n,defaultProp:b??!1,onChange:x,caller:h});return o.jsxRuntimeExports.jsxs(H,{scope:t,checked:p,disabled:c,children:[o.jsxRuntimeExports.jsx(y.Primitive.button,{type:"button",role:"switch","aria-checked":p,"aria-required":d,"data-state":q(p),"data-disabled":c?"":void 0,disabled:c,value:u,...g,ref:w,onClick:S.composeEventHandlers(e.onClick,f=>{N(T=>!T),v&&(k.current=f.isPropagationStopped(),k.current||f.stopPropagation())})}),v&&o.jsxRuntimeExports.jsx(_,{control:l,bubbles:!k.current,name:a,value:u,checked:p,required:d,disabled:c,form:i,style:{transform:"translateX(-100%)"}})]})});C.displayName=h;var E="SwitchThumb",P=s.forwardRef((e,r)=>{const{__scopeSwitch:t,...a}=e,n=A(E,t);return o.jsxRuntimeExports.jsx(y.Primitive.span,{"data-state":q(n.checked),"data-disabled":n.disabled?"":void 0,...a,ref:r})});P.displayName=E;var D="SwitchBubbleInput",_=s.forwardRef(({__scopeSwitch:e,control:r,checked:t,bubbles:a=!0,...n},b)=>{const d=s.useRef(null),c=R.useComposedRefs(d,b),u=M.usePrevious(t),x=I.useSize(r);return s.useEffect(()=>{const i=d.current;if(!i)return;const g=window.HTMLInputElement.prototype,m=Object.getOwnPropertyDescriptor(g,"checked").set;if(u!==t&&m){const w=new Event("click",{bubbles:a});m.call(i,t),i.dispatchEvent(w)}},[u,t,a]),o.jsxRuntimeExports.jsx("input",{type:"checkbox","aria-hidden":!0,defaultChecked:t,...n,tabIndex:-1,ref:c,style:{...n.style,...x,position:"absolute",pointerEvents:"none",opacity:0,margin:0}})});_.displayName=D;function q(e){return e?"checked":"unchecked"}var U=C,L=P;function F({className:e,...r}){return o.jsxRuntimeExports.jsx(U,{"data-slot":"switch",className:j.cn(`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./jsx-runtime-BB_1_6y_.cjs"),T=require("react"),S=require("./index-BWaO7kQK.cjs"),j=require("./index-_XxjJPRD.cjs"),M=require("./index-cwZN7ZY3.cjs"),B=require("./index-DYxWvftI.cjs"),D=require("./index-bSPhqlcX.cjs"),y=require("./index-CocSS1YK.cjs"),R=require("./index-DoxiiusW.cjs");function I(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,s.get?s:{enumerable:!0,get:()=>t[e]})}}return r.default=t,Object.freeze(r)}const a=I(T);var x="Switch",[$]=M.createContextScope(x),[F,z]=$(x),C=a.forwardRef((t,r)=>{const{__scopeSwitch:e,name:s,checked:n,defaultChecked:o,required:u,disabled:i,value:c="on",onCheckedChange:d,form:m,...v}=t,[p,f]=a.useState(null),w=j.useComposedRefs(r,h=>f(h)),g=a.useRef(!1),k=p?m||!!p.closest("form"):!0,[b,N]=S.useControllableState({prop:n,defaultProp:o??!1,onChange:d,caller:x});return l.jsxRuntimeExports.jsxs(F,{scope:e,checked:b,disabled:i,children:[l.jsxRuntimeExports.jsx(y.Primitive.button,{type:"button",role:"switch","aria-checked":b,"aria-required":u,"data-state":q(b),"data-disabled":i?"":void 0,disabled:i,value:c,...v,ref:w,onClick:S.composeEventHandlers(t.onClick,h=>{N(O=>!O),k&&(g.current=h.isPropagationStopped(),g.current||h.stopPropagation())})}),k&&l.jsxRuntimeExports.jsx(_,{control:p,bubbles:!g.current,name:s,value:c,checked:b,required:u,disabled:i,form:m,style:{transform:"translateX(-100%)"}})]})});C.displayName=x;var E="SwitchThumb",P=a.forwardRef((t,r)=>{const{__scopeSwitch:e,...s}=t,n=z(E,e);return l.jsxRuntimeExports.jsx(y.Primitive.span,{"data-state":q(n.checked),"data-disabled":n.disabled?"":void 0,...s,ref:r})});P.displayName=E;var H="SwitchBubbleInput",_=a.forwardRef(({__scopeSwitch:t,control:r,checked:e,bubbles:s=!0,...n},o)=>{const u=a.useRef(null),i=j.useComposedRefs(u,o),c=B.usePrevious(e),d=D.useSize(r);return a.useEffect(()=>{const m=u.current;if(!m)return;const v=window.HTMLInputElement.prototype,f=Object.getOwnPropertyDescriptor(v,"checked").set;if(c!==e&&f){const w=new Event("click",{bubbles:s});f.call(m,e),m.dispatchEvent(w)}},[c,e,s]),l.jsxRuntimeExports.jsx("input",{type:"checkbox","aria-hidden":!0,defaultChecked:e,...n,tabIndex:-1,ref:i,style:{...n.style,...d,position:"absolute",pointerEvents:"none",opacity:0,margin:0}})});_.displayName=H;function q(t){return t?"checked":"unchecked"}var A=C,U=P;function L({className:t,disabled:r,...e}){const[s,n]=a.useState(!1),o=a.useRef(null);a.useEffect(()=>{const i=()=>{if(o.current){const d=o.current.closest("fieldset");n(d?.disabled??!1)}};i();const c=new MutationObserver(i);if(o.current){const d=o.current.closest("fieldset");d&&c.observe(d,{attributes:!0,attributeFilter:["disabled"]})}return()=>c.disconnect()},[]);const u=r||s;return l.jsxRuntimeExports.jsx(A,{ref:o,"data-slot":"switch",disabled:u,className:R.cn(`
           adm:peer adm:inline-flex adm:h-5 adm:w-8 adm:shrink-0 adm:items-center
           adm:rounded-full adm:border adm:border-transparent adm:shadow-xs
           adm:transition-all adm:outline-none
@@ -8,11 +8,11 @@
           adm:data-[state=checked]:bg-primary
           adm:data-[state=unchecked]:bg-input
           adm:dark:data-[state=unchecked]:bg-input/80
-        `,e),...r,children:o.jsxRuntimeExports.jsx(L,{"data-slot":"switch-thumb",className:j.cn(`
+        `,t),...e,children:l.jsxRuntimeExports.jsx(U,{"data-slot":"switch-thumb",className:R.cn(`
             adm:pointer-events-none adm:block adm:size-4 adm:rounded-full
             adm:bg-background adm:ring-0 adm:transition-transform
             adm:data-[state=checked]:translate-x-[calc(100%-2px)]
             adm:data-[state=unchecked]:translate-x-0
             adm:dark:data-[state=checked]:bg-primary-foreground
             adm:dark:data-[state=unchecked]:bg-foreground
-          `)})})}exports.Switch=F;
+          `)})})}exports.Switch=L;

package/dist/switch.js

@@ -1,116 +1,116 @@
 "use client";
-import { j as o } from "./jsx-runtime-BzflLqGi.js";
-import * as s from "react";
-import { u as T, c as I } from "./index-C0UREtMP.js";
+import { j as l } from "./jsx-runtime-BzflLqGi.js";
+import * as t from "react";
+import { u as I, c as T } from "./index-C0UREtMP.js";
 import { u as C } from "./index-DLcqcWxM.js";
 import { c as M } from "./index-FxyLF8MY.js";
-import { u as H } from "./index-BZPx6jYI.js";
-import { u as z } from "./index-BGQepRFJ.js";
+import { u as D } from "./index-BZPx6jYI.js";
+import { u as F } from "./index-BGQepRFJ.js";
 import { P as y } from "./index-BMWt1NBG.js";
-import { c as S } from "./index-CRiPKpXj.js";
-var h = "Switch", [A] = M(h), [U, q] = A(h), P = s.forwardRef(
-  (e, a) => {
+import { c as x } from "./index-CRiPKpXj.js";
+var k = "Switch", [H] = M(k), [z, A] = H(k), P = t.forwardRef(
+  (a, i) => {
     const {
-      __scopeSwitch: t,
+      __scopeSwitch: e,
       name: n,
-      checked: r,
-      defaultChecked: b,
-      required: i,
-      disabled: c,
-      value: m = "on",
-      onCheckedChange: k,
-      form: d,
-      ...w
-    } = e, [u, l] = s.useState(null), v = C(a, (f) => l(f)), g = s.useRef(!1), x = u ? d || !!u.closest("form") : !0, [p, N] = T({
-      prop: r,
-      defaultProp: b ?? !1,
-      onChange: k,
-      caller: h
+      checked: s,
+      defaultChecked: r,
+      required: u,
+      disabled: o,
+      value: c = "on",
+      onCheckedChange: d,
+      form: m,
+      ...v
+    } = a, [f, p] = t.useState(null), w = C(i, (b) => p(b)), S = t.useRef(!1), g = f ? m || !!f.closest("form") : !0, [h, N] = I({
+      prop: s,
+      defaultProp: r ?? !1,
+      onChange: d,
+      caller: k
     });
-    return /* @__PURE__ */ o.jsxs(U, { scope: t, checked: p, disabled: c, children: [
-      /* @__PURE__ */ o.jsx(
+    return /* @__PURE__ */ l.jsxs(z, { scope: e, checked: h, disabled: o, children: [
+      /* @__PURE__ */ l.jsx(
         y.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": p,
-          "aria-required": i,
-          "data-state": _(p),
-          "data-disabled": c ? "" : void 0,
-          disabled: c,
-          value: m,
-          ...w,
-          ref: v,
-          onClick: I(e.onClick, (f) => {
-            N((B) => !B), x && (g.current = f.isPropagationStopped(), g.current || f.stopPropagation());
+          "aria-checked": h,
+          "aria-required": u,
+          "data-state": _(h),
+          "data-disabled": o ? "" : void 0,
+          disabled: o,
+          value: c,
+          ...v,
+          ref: w,
+          onClick: T(a.onClick, (b) => {
+            N((B) => !B), g && (S.current = b.isPropagationStopped(), S.current || b.stopPropagation());
           })
         }
       ),
-      x && /* @__PURE__ */ o.jsx(
+      g && /* @__PURE__ */ l.jsx(
         j,
         {
-          control: u,
-          bubbles: !g.current,
+          control: f,
+          bubbles: !S.current,
           name: n,
-          value: m,
-          checked: p,
-          required: i,
-          disabled: c,
-          form: d,
+          value: c,
+          checked: h,
+          required: u,
+          disabled: o,
+          form: m,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-P.displayName = h;
-var R = "SwitchThumb", E = s.forwardRef(
-  (e, a) => {
-    const { __scopeSwitch: t, ...n } = e, r = q(R, t);
-    return /* @__PURE__ */ o.jsx(
+P.displayName = k;
+var R = "SwitchThumb", E = t.forwardRef(
+  (a, i) => {
+    const { __scopeSwitch: e, ...n } = a, s = A(R, e);
+    return /* @__PURE__ */ l.jsx(
       y.span,
       {
-        "data-state": _(r.checked),
-        "data-disabled": r.disabled ? "" : void 0,
+        "data-state": _(s.checked),
+        "data-disabled": s.disabled ? "" : void 0,
         ...n,
-        ref: a
+        ref: i
       }
     );
   }
 );
 E.displayName = R;
-var L = "SwitchBubbleInput", j = s.forwardRef(
+var O = "SwitchBubbleInput", j = t.forwardRef(
   ({
-    __scopeSwitch: e,
-    control: a,
-    checked: t,
+    __scopeSwitch: a,
+    control: i,
+    checked: e,
     bubbles: n = !0,
-    ...r
-  }, b) => {
-    const i = s.useRef(null), c = C(i, b), m = H(t), k = z(a);
-    return s.useEffect(() => {
-      const d = i.current;
-      if (!d) return;
-      const w = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(
-        w,
+    ...s
+  }, r) => {
+    const u = t.useRef(null), o = C(u, r), c = D(e), d = F(i);
+    return t.useEffect(() => {
+      const m = u.current;
+      if (!m) return;
+      const v = window.HTMLInputElement.prototype, p = Object.getOwnPropertyDescriptor(
+        v,
         "checked"
       ).set;
-      if (m !== t && l) {
-        const v = new Event("click", { bubbles: n });
-        l.call(d, t), d.dispatchEvent(v);
+      if (c !== e && p) {
+        const w = new Event("click", { bubbles: n });
+        p.call(m, e), m.dispatchEvent(w);
       }
-    }, [m, t, n]), /* @__PURE__ */ o.jsx(
+    }, [c, e, n]), /* @__PURE__ */ l.jsx(
       "input",
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: t,
-        ...r,
+        defaultChecked: e,
+        ...s,
         tabIndex: -1,
-        ref: c,
+        ref: o,
         style: {
-          ...r.style,
-          ...k,
+          ...s.style,
+          ...d,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -120,20 +120,40 @@ var L = "SwitchBubbleInput", j = s.forwardRef(
     );
   }
 );
-j.displayName = L;
-function _(e) {
-  return e ? "checked" : "unchecked";
+j.displayName = O;
+function _(a) {
+  return a ? "checked" : "unchecked";
 }
-var O = P, D = E;
+var U = P, q = E;
 function V({
-  className: e,
-  ...a
+  className: a,
+  disabled: i,
+  ...e
 }) {
-  return /* @__PURE__ */ o.jsx(
-    O,
+  const [n, s] = t.useState(!1), r = t.useRef(null);
+  t.useEffect(() => {
+    const o = () => {
+      if (r.current) {
+        const d = r.current.closest("fieldset");
+        s(d?.disabled ?? !1);
+      }
+    };
+    o();
+    const c = new MutationObserver(o);
+    if (r.current) {
+      const d = r.current.closest("fieldset");
+      d && c.observe(d, { attributes: !0, attributeFilter: ["disabled"] });
+    }
+    return () => c.disconnect();
+  }, []);
+  const u = i || n;
+  return /* @__PURE__ */ l.jsx(
+    U,
     {
+      ref: r,
       "data-slot": "switch",
-      className: S(
+      disabled: u,
+      className: x(
         `
           adm:peer adm:inline-flex adm:h-5 adm:w-8 adm:shrink-0 adm:items-center
           adm:rounded-full adm:border adm:border-transparent adm:shadow-xs
@@ -145,14 +165,14 @@ function V({
           adm:data-[state=unchecked]:bg-input
           adm:dark:data-[state=unchecked]:bg-input/80
         `,
-        e
+        a
       ),
-      ...a,
-      children: /* @__PURE__ */ o.jsx(
-        D,
+      ...e,
+      children: /* @__PURE__ */ l.jsx(
+        q,
         {
           "data-slot": "switch-thumb",
-          className: S(
+          className: x(
             `
             adm:pointer-events-none adm:block adm:size-4 adm:rounded-full
             adm:bg-background adm:ring-0 adm:transition-transform

package/docs/components/ui/accordion-rounded.md

@@ -325,9 +325,7 @@ Varios items pueden estar abiertos simultáneamente:
     />
     <AccordionContent>
       <div className="p-4">
-        <p className="text-sm text-foreground">
-          Manage notification settings.
-        </p>
+        <p className="text-sm text-foreground">Manage notification settings.</p>
       </div>
     </AccordionContent>
   </AccordionItem>
@@ -376,9 +374,7 @@ Varios items pueden estar abiertos simultáneamente:
       <div className="p-4 space-y-4">
         <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
           <div>
-            <p className="text-sm font-semibold text-foreground">
-              Credit Card
-            </p>
+            <p className="text-sm font-semibold text-foreground">Credit Card</p>
             <p className="text-xs text-muted-foreground">•••• 4242</p>
           </div>
           <span className="text-xs text-success font-medium">Active</span>

package/docs/components/ui/avatar.md

@@ -525,7 +525,9 @@ Mantén tamaños consistentes por contexto:
 ```tsx
 <Avatar>
   <AvatarImage src={url} alt="User" />
-  <AvatarFallback className="bg-primary text-primary-foreground">AB</AvatarFallback>
+  <AvatarFallback className="bg-primary text-primary-foreground">
+    AB
+  </AvatarFallback>
 </Avatar>
 ```
 

package/docs/components/ui/button.md

@@ -446,7 +446,9 @@ Anillo visible solo al navegar con teclado.
 Para formularios con validación. **Nota**: Solo funciona con la variante `outline` que tiene borde visible.
 
 ```tsx
-<Button variant="outline" aria-invalid="true">Invalid Button</Button>
+<Button variant="outline" aria-invalid="true">
+  Invalid Button
+</Button>
 ```
 
 **Estilos aplicados** (solo en variante outline):
@@ -619,18 +621,18 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 
 ## Props
 
-| Prop      | Tipo                                                                                                                                                                                            | Default     | Descripción                                                    |
-| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------- |
+| Prop      | Tipo                                                                                                                                                                                       | Default     | Descripción                                                    |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------- |
 | variant   | `"default" \| "success" \| "success-medium" \| "warning" \| "warning-medium" \| "destructive" \| "destructive-medium" \| "secondary" \| "outline" \| "ghost" \| "ghost-neutral" \| "link"` | `"default"` | Variante visual del botón                                      |
-| size      | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`                                                                                                         | `"default"` | Tamaño del botón                                               |
-| asChild   | `boolean`                                                                                                                                                               | `false`     | Renderiza el hijo en lugar de un `<button>`. Usa Radix UI Slot |
-| loading   | `boolean`                                                                                                                                                               | `false`     | Muestra spinner automático y desactiva el botón                |
-| disabled  | `boolean`                                                                                                                                                               | `false`     | Desactiva el botón (opacity 50%, pointer-events none)          |
-| className | `string`                                                                                                                                                                | -           | Clases CSS adicionales                                         |
-| children  | `ReactNode`                                                                                                                                                             | -           | Contenido del botón (texto, iconos, etc.)                      |
-| type      | `"button" \| "submit" \| "reset"`                                                                                                                                       | `"button"`  | Tipo de botón HTML                                             |
-| onClick   | `(e: MouseEvent) => void`                                                                                                                                               | -           | Handler de click                                               |
-| ...props  | `ButtonHTMLAttributes`                                                                                                                                                  | -           | Todas las props nativas de `<button>`                          |
+| size      | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`                                                                                                                            | `"default"` | Tamaño del botón                                               |
+| asChild   | `boolean`                                                                                                                                                                                  | `false`     | Renderiza el hijo en lugar de un `<button>`. Usa Radix UI Slot |
+| loading   | `boolean`                                                                                                                                                                                  | `false`     | Muestra spinner automático y desactiva el botón                |
+| disabled  | `boolean`                                                                                                                                                                                  | `false`     | Desactiva el botón (opacity 50%, pointer-events none)          |
+| className | `string`                                                                                                                                                                                   | -           | Clases CSS adicionales                                         |
+| children  | `ReactNode`                                                                                                                                                                                | -           | Contenido del botón (texto, iconos, etc.)                      |
+| type      | `"button" \| "submit" \| "reset"`                                                                                                                                                          | `"button"`  | Tipo de botón HTML                                             |
+| onClick   | `(e: MouseEvent) => void`                                                                                                                                                                  | -           | Handler de click                                               |
+| ...props  | `ButtonHTMLAttributes`                                                                                                                                                                     | -           | Todas las props nativas de `<button>`                          |
 
 **Nota sobre asChild**: Cuando es `true`, el componente usa `Slot` de Radix UI para transferir todas las props y estilos al hijo directo.
 
@@ -779,7 +781,9 @@ Acciones en footer de dialogs.
 Botones de herramientas con iconos.
 
 ```tsx
-{/* Toolbar con ghost para acciones primarias */}
+{
+  /* Toolbar con ghost para acciones primarias */
+}
 <div className="flex gap-1 p-2 border rounded-lg">
   <Button size="icon-sm" variant="ghost" aria-label="Bold">
     <BoldIcon />
@@ -797,9 +801,11 @@ Botones de herramientas con iconos.
   <Button size="icon-sm" variant="ghost" aria-label="Align center">
     <AlignCenterIcon />
   </Button>
-</div>
+</div>;
 
-{/* Toolbar con ghost-neutral para apariencia más sutil */}
+{
+  /* Toolbar con ghost-neutral para apariencia más sutil */
+}
 <div className="flex gap-1 p-2 border rounded-lg">
   <Button size="icon-sm" variant="ghost-neutral" aria-label="Bold">
     <BoldIcon />
@@ -810,7 +816,7 @@ Botones de herramientas con iconos.
   <Button size="icon-sm" variant="ghost-neutral" aria-label="Underline">
     <UnderlineIcon />
   </Button>
-</div>
+</div>;
 ```
 
 ### Call to Action (CTA)

package/docs/components/ui/card.md

@@ -106,13 +106,13 @@ Contenedor principal de la card.
 
 #### Props
 
-| Prop        | Tipo                                                                           | Default     | Descripción                                                |
-| ----------- | ------------------------------------------------------------------------------ | ----------- | ---------------------------------------------------------- |
-| `variant`   | `"default" \| "primary" \| "muted" \| "success" \| "warning" \| "destructive"` | `"default"` | Variante de color de fondo                                 |
-| `shadow`    | `"default" \| "none"`                                                          | `"none"`    | Control de sombra (none=flat, default=elevación)           |
-| `border`    | `"default" \| "transparent"`                                                   | `"default"` | Control de borde (default=visible, transparent=invisible)  |
-| `className` | `string`                                                                       | -           | Clases CSS adicionales                                     |
-| `children`  | `ReactNode`                                                                    | -           | Contenido de la card                                       |
+| Prop        | Tipo                                                                           | Default     | Descripción                                               |
+| ----------- | ------------------------------------------------------------------------------ | ----------- | --------------------------------------------------------- |
+| `variant`   | `"default" \| "primary" \| "muted" \| "success" \| "warning" \| "destructive"` | `"default"` | Variante de color de fondo                                |
+| `shadow`    | `"default" \| "none"`                                                          | `"none"`    | Control de sombra (none=flat, default=elevación)          |
+| `border`    | `"default" \| "transparent"`                                                   | `"default"` | Control de borde (default=visible, transparent=invisible) |
+| `className` | `string`                                                                       | -           | Clases CSS adicionales                                    |
+| `children`  | `ReactNode`                                                                    | -           | Contenido de la card                                      |
 
 ### CardHeader
 
@@ -388,7 +388,9 @@ Card con sombra sutil para crear profundidad cuando se necesita énfasis.
 La prop `shadow` funciona con todas las variantes de color.
 
 ```tsx
-{/* Flat colored cards */}
+{
+  /* Flat colored cards */
+}
 <Card variant="primary" shadow="none" className="w-[350px]">
   <CardHeader>
     <CardTitle>Flat Primary</CardTitle>
@@ -399,9 +401,11 @@ La prop `shadow` funciona con todas las variantes de color.
       Combines color variant with flat design for modern appearance.
     </p>
   </CardContent>
-</Card>
+</Card>;
 
-{/* Elevated colored cards */}
+{
+  /* Elevated colored cards */
+}
 <Card variant="success" shadow="default" className="w-[350px]">
   <CardHeader>
     <CardTitle>Elevated Success</CardTitle>
@@ -412,7 +416,7 @@ La prop `shadow` funciona con todas las variantes de color.
       Shadow adds depth to colored variants for emphasis.
     </p>
   </CardContent>
-</Card>
+</Card>;
 ```
 
 **Nota**: Experimenta con `shadow="none"` en grids de cards o layouts densos para un look más limpio.
@@ -1017,25 +1021,33 @@ Diferentes arreglos de botones.
 ### Uso de Sombras y Bordes
 
 ```tsx
-{/* ✅ Correcto - Default sin sombra para diseño plano */}
+{
+  /* ✅ Correcto - Default sin sombra para diseño plano */
+}
 <Card>
   <CardContent>Clean, flat design</CardContent>
-</Card>
+</Card>;
 
-{/* ✅ Correcto - Shadow para cards flotantes o destacadas */}
+{
+  /* ✅ Correcto - Shadow para cards flotantes o destacadas */
+}
 <Card shadow="default">
   <CardContent>Elevated card with depth</CardContent>
-</Card>
+</Card>;
 
-{/* ✅ Correcto - Border transparent para integración con fondo */}
+{
+  /* ✅ Correcto - Border transparent para integración con fondo */
+}
 <Card border="transparent" variant="muted">
   <CardContent>Blends with background</CardContent>
-</Card>
+</Card>;
 
-{/* ⚠️ Evitar - Shadow sin propósito específico */}
+{
+  /* ⚠️ Evitar - Shadow sin propósito específico */
+}
 <Card shadow="default">
   <CardContent>Unnecessary elevation</CardContent>
-</Card>
+</Card>;
 ```
 
 **Recomendaciones**:
@@ -1179,14 +1191,16 @@ Diferentes arreglos de botones.
 ### Uso de Shadow
 
 ```tsx
-{/* ✅ Correcto - Shadow para cards individuales o destacadas */}
+{
+  /* ✅ Correcto - Shadow para cards individuales o destacadas */
+}
 <Card shadow="default" className="w-[350px]">
-  <CardContent>
-    Stands out with subtle elevation
-  </CardContent>
-</Card>
+  <CardContent>Stands out with subtle elevation</CardContent>
+</Card>;
 
-{/* ✅ Correcto - Sin shadow para grids densos */}
+{
+  /* ✅ Correcto - Sin shadow para grids densos */
+}
 <div className="grid gap-4 md:grid-cols-3">
   <Card shadow="none">
     <CardContent>Flat design in dense layout</CardContent>
@@ -1197,9 +1211,11 @@ Diferentes arreglos de botones.
   <Card shadow="none">
     <CardContent>Flat design in dense layout</CardContent>
   </Card>
-</div>
+</div>;
 
-{/* ✅ Correcto - Sin shadow cuando ya hay separación visual */}
+{
+  /* ✅ Correcto - Sin shadow cuando ya hay separación visual */
+}
 <div className="space-y-4">
   <Card shadow="none">
     <CardContent>Spacing provides separation</CardContent>
@@ -1207,15 +1223,17 @@ Diferentes arreglos de botones.
   <Card shadow="none">
     <CardContent>No shadow needed here</CardContent>
   </Card>
-</div>
+</div>;
 
-{/* ⚠️ Considerar - Mucha sombra en layouts densos */}
+{
+  /* ⚠️ Considerar - Mucha sombra en layouts densos */
+}
 <div className="grid gap-2 md:grid-cols-4">
-  <Card shadow="default">...</Card>  {/* Puede verse pesado */}
+  <Card shadow="default">...</Card> {/* Puede verse pesado */}
   <Card shadow="default">...</Card>
   <Card shadow="default">...</Card>
   <Card shadow="default">...</Card>
-</div>
+</div>;
 ```
 
 ## Notas de Implementación

package/docs/components/ui/checkbox.md

@@ -33,7 +33,7 @@ import { Label } from "@adamosuiteservices/ui/label";
 | `required`        | `boolean`                                       | `false` | Campo requerido (HTML5)                      |
 | `name`            | `string`                                        | -       | Nombre para formularios                      |
 | `value`           | `string`                                        | `"on"`  | Valor para formularios                       |
-| `aria-invalid`    | `boolean`                                       | `false` | Muestra estado error (border rojo + ring)    |
+| `aria-invalid`    | `"true" \| "false"`                             | -       | Muestra estado error (border rojo + ring)    |
 | `className`       | `string`                                        | -       | Clases CSS adicionales                       |
 
 ## Estados del Checkbox
@@ -86,11 +86,38 @@ const someChecked = items.some(Boolean) && !allChecked;
 ### 5. Invalid (Error State)
 
 ```tsx
-<Checkbox aria-invalid />
+<Checkbox aria-invalid="true" />
+
+// En formularios con validación
+<div className="flex items-start gap-3">
+  <Checkbox id="terms" aria-invalid={!agreed} />
+  <div className="grid gap-1.5">
+    <Label htmlFor="terms">Accept terms and conditions</Label>
+    {!agreed && (
+      <p className="text-sm text-destructive">
+        You must accept the terms to continue
+      </p>
+    )}
+  </div>
+</div>
 ```
 
 **Estilos**: Border rojo (`border-destructive`) + ring rojo (`ring-destructive/20`)
 
+## Fieldset Disabled
+
+Los checkboxes dentro de un fieldset deshabilitado automáticamente heredan el estado disabled del navegador:
+
+```tsx
+<fieldset disabled>
+  <legend>Preferences</legend>
+  <div className="flex items-center gap-3">
+    <Checkbox id="option1" />
+    <Label htmlFor="option1">This will be disabled</Label>
+  </div>
+</fieldset>
+```
+
 ## Patrones de Uso
 
 ### Con Label Simple
@@ -223,14 +250,23 @@ const [agreed, setAgreed] = useState(false);
     id="terms"
     checked={agreed}
     onCheckedChange={(checked) => setAgreed(checked as boolean)}
-    aria-invalid={!agreed}
+    aria-invalid={!agreed ? "true" : undefined}
   />
   <Label htmlFor="terms" className="text-sm">
     I agree to the{" "}
-    <a href="/terms" className="underline">terms and conditions</a>
+    <a href="/terms" className="underline">
+      terms and conditions
+    </a>
   </Label>
-</div>
-<Button disabled={!agreed}>Continue</Button>
+</div>;
+{
+  !agreed && (
+    <p className="text-sm text-destructive">
+      You must accept the terms to continue
+    </p>
+  );
+}
+<Button disabled={!agreed}>Continue</Button>;
 ```
 
 ## Estilos Internos (Data Attributes)
@@ -288,5 +324,5 @@ const [agreed, setAgreed] = useState(false);
 
 ## Referencias
 
-- **Radix UI Checkbox**: https://www.radix-ui.com/primitives/docs/components/checkbox
-- **ARIA Checkbox**: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+- **Radix UI Checkbox**: <https://www.radix-ui.com/primitives/docs/components/checkbox>
+- **ARIA Checkbox**: <https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/>