@zentauri-ui/zentauri-components 1.4.61 → 1.4.62

package/dist/ui/toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/toggle/toggle-base.tsx","../../src/ui/toggle/toggle.tsx"],"names":["useState","useCallback","jsxs","cn","toggleTrackVariants","jsx","toggleThumbVariants"],"mappings":";;;;;;;AASO,SAAS,WAAW,KAAA,EAAoB;AAC7C,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,eAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,cAAc,SAAA,GAAY,QAAA;AAAA,IAC1B,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,eAAe,OAAA,KAAY,MAAA;AACjC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,eAAS,cAAc,CAAA;AAC/D,EAAA,MAAM,QAAA,GAAW,YAAA,GAAe,OAAA,CAAQ,OAAO,CAAA,GAAI,YAAA;AAEnD,EAAA,MAAM,UAAA,GAAaC,iBAAA;AAAA,IACjB,CAAC,IAAA,KAAkB;AACjB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,MACtB;AACA,MAAA,eAAA,GAAkB,IAAI,CAAA;AAAA,IACxB,CAAA;AAAA,IACA,CAAC,cAAc,eAAe;AAAA,GAChC;AAEA,EAAA,MAAM,eAAe,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,IAAA,KAAS,OAAO,EAAA,GAAK,EAAA;AAE/D,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,QAAA;AAAA,MACd,YAAA,EAAY,SAAA;AAAA,MACZ,YAAA,EAAY,WAAW,SAAA,GAAY,WAAA;AAAA,MACnC,QAAA;AAAA,MACA,SAAA,EAAWC,oBAAGC,oCAAA,CAAoB,EAAE,MAAM,UAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MAClE,SAAS,MAAM;AACb,QAAA,IAAI,CAAC,QAAA,EAAU;AACb,UAAA,UAAA,CAAW,CAAC,QAAQ,CAAA;AAAA,QACtB;AAAA,MACF,CAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAS,CAAA;AAAA,wBACpCA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,mBAAA;AAAA,cACTG,oCAAA,CAAoB,EAAE,IAAA,EAAM,CAAA;AAAA,cAC5B;AAAA,aACF;AAAA,YACA,OAAO,EAAE,SAAA,EAAW,cAAc,QAAA,GAAW,YAAA,GAAe,CAAC,CAAA,GAAA,CAAA;AAAM;AAAA;AACrE;AAAA;AAAA,GACF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,QAAA;ACjElB,SAAS,OAAO,KAAA,EAAoB;AACzC,EAAA,uBAAOD,cAAAA,CAAC,UAAA,EAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AAChC;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"toggle.js","sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ToggleProps } from \"./types\";\nimport { toggleThumbVariants, toggleTrackVariants } from \"./variants\";\n\nexport function ToggleBase(props: ToggleProps) {\n  const {\n    className,\n    size,\n    appearance,\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    disabled,\n    ref,\n    \"aria-label\": ariaLabel = \"Toggle\",\n    children,\n    ...rest\n  } = props;\n  const isControlled = checked !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n  const resolved = isControlled ? Boolean(checked) : uncontrolled;\n\n  const setChecked = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolled(next);\n      }\n      onCheckedChange?.(next);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  const thumbShiftPx = size === \"sm\" ? 14 : size === \"lg\" ? 26 : 20;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"switch\"\n      data-slot=\"toggle\"\n      aria-checked={resolved}\n      aria-label={ariaLabel}\n      data-state={resolved ? \"checked\" : \"unchecked\"}\n      disabled={disabled}\n      className={cn(toggleTrackVariants({ size, appearance }), className)}\n      onClick={() => {\n        if (!disabled) {\n          setChecked(!resolved);\n        }\n      }}\n      {...rest}\n    >\n      <span className=\"sr-only\">{children}</span>\n      <span\n        className={cn(\n          toggleThumbVariants({ size }),\n          \"absolute left-1 top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out\",\n        )}\n        style={{ transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }}\n      />\n    </button>\n  );\n}\n\nToggleBase.displayName = \"Toggle\";\n","// toggle.tsx — default static entry (no framer-motion)\nimport { ToggleBase } from \"./toggle-base\";\nimport type { ToggleProps } from \"./types\";\n\nexport function Toggle(props: ToggleProps) {\n  return <ToggleBase {...props} />;\n}\n\nToggle.displayName = \"Toggle\";\n"]}
+{"version":3,"sources":["../../src/ui/toggle/toggle-base.tsx","../../src/ui/toggle/toggle.tsx"],"names":["useId","useState","useCallback","jsxs","cn","toggleTrackVariants","jsx","toggleThumbVariants"],"mappings":"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","file":"toggle.js","sourcesContent":["\"use client\";\n\nimport { useCallback, useId, useState, type ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ToggleProps } from \"./types\";\nimport { toggleThumbVariants, toggleTrackVariants } from \"./variants\";\n\nfunction hasToggleLabelChildren(node: ReactNode): boolean {\n  if (node === undefined || node === null) {\n    return false;\n  }\n  if (typeof node === \"boolean\") {\n    return false;\n  }\n  if (typeof node === \"string\") {\n    return node.trim().length > 0;\n  }\n  if (typeof node === \"number\") {\n    return true;\n  }\n  if (Array.isArray(node)) {\n    return node.some(hasToggleLabelChildren);\n  }\n  return true;\n}\n\nexport function ToggleBase(props: ToggleProps) {\n  const {\n    className,\n    size,\n    appearance,\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    disabled,\n    ref,\n    \"aria-label\": ariaLabelProp,\n    children,\n    ...rest\n  } = props;\n  const toggleLabelId = useId();\n  const isControlled = checked !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n  const resolved = isControlled ? Boolean(checked) : uncontrolled;\n\n  const setChecked = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolled(next);\n      }\n      onCheckedChange?.(next);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  const thumbShiftPx = size === \"sm\" ? 14 : size === \"lg\" ? 26 : 20;\n  const labeledByChildren = hasToggleLabelChildren(children);\n  const labeling =\n    labeledByChildren ?\n      {\n        \"aria-labelledby\": toggleLabelId,\n      }\n    : {\n        \"aria-label\": ariaLabelProp ?? \"Toggle\",\n      };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"switch\"\n      data-slot=\"toggle\"\n      aria-checked={resolved}\n      data-state={resolved ? \"checked\" : \"unchecked\"}\n      disabled={disabled}\n      className={cn(toggleTrackVariants({ size, appearance }), className)}\n      {...labeling}\n      onClick={() => {\n        if (!disabled) {\n          setChecked(!resolved);\n        }\n      }}\n      {...rest}\n    >\n      {labeledByChildren ?\n        <span id={toggleLabelId} className=\"sr-only\">\n          {children}\n        </span>\n      : null}\n      <span\n        className={cn(\n          toggleThumbVariants({ size }),\n          \"absolute left-1 top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out\",\n        )}\n        style={{ transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }}\n      />\n    </button>\n  );\n}\n\nToggleBase.displayName = \"Toggle\";\n","// toggle.tsx — default static entry (no framer-motion)\nimport { ToggleBase } from \"./toggle-base\";\nimport type { ToggleProps } from \"./types\";\n\nexport function Toggle(props: ToggleProps) {\n  return <ToggleBase {...props} />;\n}\n\nToggle.displayName = \"Toggle\";\n"]}

package/dist/ui/toggle.mjs

@@ -2,9 +2,27 @@
 import { toggleThumbVariants, toggleTrackVariants } from '../chunk-JQ5TIJ4F.mjs';
 export { toggleThumbVariants, toggleTrackVariants } from '../chunk-JQ5TIJ4F.mjs';
 import { cn } from '../chunk-DFEZH7TC.mjs';
-import { useState, useCallback } from 'react';
+import { useId, useState, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+function hasToggleLabelChildren(node) {
+  if (node === void 0 || node === null) {
+    return false;
+  }
+  if (typeof node === "boolean") {
+    return false;
+  }
+  if (typeof node === "string") {
+    return node.trim().length > 0;
+  }
+  if (typeof node === "number") {
+    return true;
+  }
+  if (Array.isArray(node)) {
+    return node.some(hasToggleLabelChildren);
+  }
+  return true;
+}
 function ToggleBase(props) {
   const {
     className,
@@ -15,10 +33,11 @@ function ToggleBase(props) {
     onCheckedChange,
     disabled,
     ref,
-    "aria-label": ariaLabel = "Toggle",
+    "aria-label": ariaLabelProp,
     children,
     ...rest
   } = props;
+  const toggleLabelId = useId();
   const isControlled = checked !== void 0;
   const [uncontrolled, setUncontrolled] = useState(defaultChecked);
   const resolved = isControlled ? Boolean(checked) : uncontrolled;
@@ -32,6 +51,12 @@ function ToggleBase(props) {
     [isControlled, onCheckedChange]
   );
   const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 26 : 20;
+  const labeledByChildren = hasToggleLabelChildren(children);
+  const labeling = labeledByChildren ? {
+    "aria-labelledby": toggleLabelId
+  } : {
+    "aria-label": ariaLabelProp ?? "Toggle"
+  };
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -40,10 +65,10 @@ function ToggleBase(props) {
       role: "switch",
       "data-slot": "toggle",
       "aria-checked": resolved,
-      "aria-label": ariaLabel,
       "data-state": resolved ? "checked" : "unchecked",
       disabled,
       className: cn(toggleTrackVariants({ size, appearance }), className),
+      ...labeling,
       onClick: () => {
         if (!disabled) {
           setChecked(!resolved);
@@ -51,7 +76,7 @@ function ToggleBase(props) {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children }),
+        labeledByChildren ? /* @__PURE__ */ jsx("span", { id: toggleLabelId, className: "sr-only", children }) : null,
         /* @__PURE__ */ jsx(
           "span",
           {

package/dist/ui/toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/toggle/toggle-base.tsx","../../src/ui/toggle/toggle.tsx"],"names":["jsx"],"mappings":";;;;;;AASO,SAAS,WAAW,KAAA,EAAoB;AAC7C,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA,GAAiB,KAAA;AAAA,IACjB,eAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,cAAc,SAAA,GAAY,QAAA;AAAA,IAC1B,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,eAAe,OAAA,KAAY,MAAA;AACjC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,cAAc,CAAA;AAC/D,EAAA,MAAM,QAAA,GAAW,YAAA,GAAe,OAAA,CAAQ,OAAO,CAAA,GAAI,YAAA;AAEnD,EAAA,MAAM,UAAA,GAAa,WAAA;AAAA,IACjB,CAAC,IAAA,KAAkB;AACjB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,eAAA,CAAgB,IAAI,CAAA;AAAA,MACtB;AACA,MAAA,eAAA,GAAkB,IAAI,CAAA;AAAA,IACxB,CAAA;AAAA,IACA,CAAC,cAAc,eAAe;AAAA,GAChC;AAEA,EAAA,MAAM,eAAe,IAAA,KAAS,IAAA,GAAO,EAAA,GAAK,IAAA,KAAS,OAAO,EAAA,GAAK,EAAA;AAE/D,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,QAAA;AAAA,MACd,YAAA,EAAY,SAAA;AAAA,MACZ,YAAA,EAAY,WAAW,SAAA,GAAY,WAAA;AAAA,MACnC,QAAA;AAAA,MACA,SAAA,EAAW,GAAG,mBAAA,CAAoB,EAAE,MAAM,UAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MAClE,SAAS,MAAM;AACb,QAAA,IAAI,CAAC,QAAA,EAAU;AACb,UAAA,UAAA,CAAW,CAAC,QAAQ,CAAA;AAAA,QACtB;AAAA,MACF,CAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAS,CAAA;AAAA,wBACpC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,mBAAA,CAAoB,EAAE,IAAA,EAAM,CAAA;AAAA,cAC5B;AAAA,aACF;AAAA,YACA,OAAO,EAAE,SAAA,EAAW,cAAc,QAAA,GAAW,YAAA,GAAe,CAAC,CAAA,GAAA,CAAA;AAAM;AAAA;AACrE;AAAA;AAAA,GACF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,QAAA;ACjElB,SAAS,OAAO,KAAA,EAAoB;AACzC,EAAA,uBAAOA,GAAAA,CAAC,UAAA,EAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AAChC;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"toggle.mjs","sourcesContent":["\"use client\";\n\nimport { useCallback, useState } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ToggleProps } from \"./types\";\nimport { toggleThumbVariants, toggleTrackVariants } from \"./variants\";\n\nexport function ToggleBase(props: ToggleProps) {\n  const {\n    className,\n    size,\n    appearance,\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    disabled,\n    ref,\n    \"aria-label\": ariaLabel = \"Toggle\",\n    children,\n    ...rest\n  } = props;\n  const isControlled = checked !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n  const resolved = isControlled ? Boolean(checked) : uncontrolled;\n\n  const setChecked = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolled(next);\n      }\n      onCheckedChange?.(next);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  const thumbShiftPx = size === \"sm\" ? 14 : size === \"lg\" ? 26 : 20;\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"switch\"\n      data-slot=\"toggle\"\n      aria-checked={resolved}\n      aria-label={ariaLabel}\n      data-state={resolved ? \"checked\" : \"unchecked\"}\n      disabled={disabled}\n      className={cn(toggleTrackVariants({ size, appearance }), className)}\n      onClick={() => {\n        if (!disabled) {\n          setChecked(!resolved);\n        }\n      }}\n      {...rest}\n    >\n      <span className=\"sr-only\">{children}</span>\n      <span\n        className={cn(\n          toggleThumbVariants({ size }),\n          \"absolute left-1 top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out\",\n        )}\n        style={{ transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }}\n      />\n    </button>\n  );\n}\n\nToggleBase.displayName = \"Toggle\";\n","// toggle.tsx — default static entry (no framer-motion)\nimport { ToggleBase } from \"./toggle-base\";\nimport type { ToggleProps } from \"./types\";\n\nexport function Toggle(props: ToggleProps) {\n  return <ToggleBase {...props} />;\n}\n\nToggle.displayName = \"Toggle\";\n"]}
+{"version":3,"sources":["../../src/ui/toggle/toggle-base.tsx","../../src/ui/toggle/toggle.tsx"],"names":["jsx"],"mappings":"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","file":"toggle.mjs","sourcesContent":["\"use client\";\n\nimport { useCallback, useId, useState, type ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ToggleProps } from \"./types\";\nimport { toggleThumbVariants, toggleTrackVariants } from \"./variants\";\n\nfunction hasToggleLabelChildren(node: ReactNode): boolean {\n  if (node === undefined || node === null) {\n    return false;\n  }\n  if (typeof node === \"boolean\") {\n    return false;\n  }\n  if (typeof node === \"string\") {\n    return node.trim().length > 0;\n  }\n  if (typeof node === \"number\") {\n    return true;\n  }\n  if (Array.isArray(node)) {\n    return node.some(hasToggleLabelChildren);\n  }\n  return true;\n}\n\nexport function ToggleBase(props: ToggleProps) {\n  const {\n    className,\n    size,\n    appearance,\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    disabled,\n    ref,\n    \"aria-label\": ariaLabelProp,\n    children,\n    ...rest\n  } = props;\n  const toggleLabelId = useId();\n  const isControlled = checked !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n  const resolved = isControlled ? Boolean(checked) : uncontrolled;\n\n  const setChecked = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolled(next);\n      }\n      onCheckedChange?.(next);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  const thumbShiftPx = size === \"sm\" ? 14 : size === \"lg\" ? 26 : 20;\n  const labeledByChildren = hasToggleLabelChildren(children);\n  const labeling =\n    labeledByChildren ?\n      {\n        \"aria-labelledby\": toggleLabelId,\n      }\n    : {\n        \"aria-label\": ariaLabelProp ?? \"Toggle\",\n      };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"switch\"\n      data-slot=\"toggle\"\n      aria-checked={resolved}\n      data-state={resolved ? \"checked\" : \"unchecked\"}\n      disabled={disabled}\n      className={cn(toggleTrackVariants({ size, appearance }), className)}\n      {...labeling}\n      onClick={() => {\n        if (!disabled) {\n          setChecked(!resolved);\n        }\n      }}\n      {...rest}\n    >\n      {labeledByChildren ?\n        <span id={toggleLabelId} className=\"sr-only\">\n          {children}\n        </span>\n      : null}\n      <span\n        className={cn(\n          toggleThumbVariants({ size }),\n          \"absolute left-1 top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out\",\n        )}\n        style={{ transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }}\n      />\n    </button>\n  );\n}\n\nToggleBase.displayName = \"Toggle\";\n","// toggle.tsx — default static entry (no framer-motion)\nimport { ToggleBase } from \"./toggle-base\";\nimport type { ToggleProps } from \"./types\";\n\nexport function Toggle(props: ToggleProps) {\n  return <ToggleBase {...props} />;\n}\n\nToggle.displayName = \"Toggle\";\n"]}

package/dist/ui/tooltip/animated.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkWZKGRU3U_js = require('../../chunk-WZKGRU3U.js');
+var chunkMQZB5EPD_js = require('../../chunk-MQZB5EPD.js');
 var chunkUOZYPWDZ_js = require('../../chunk-UOZYPWDZ.js');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
@@ -28,7 +28,7 @@ var TooltipContentAnimated = ({
   width,
   animation = "none"
 }) => {
-  const { open, position } = chunkWZKGRU3U_js.useTooltip();
+  const { open, position } = chunkMQZB5EPD_js.useTooltip();
   if (!open) return null;
   const positionStyles = {
     top: "bottom-full mb-2",
@@ -44,7 +44,7 @@ var TooltipContentAnimated = ({
       role: "tooltip",
       ...motionProps,
       className: chunkUOZYPWDZ_js.cn(
-        chunkWZKGRU3U_js.tooltipVariants({ variant, size, width }),
+        chunkMQZB5EPD_js.tooltipVariants({ variant, size, width }),
         positionStyles[position],
         className
       ),

package/dist/ui/tooltip/animated.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useTooltip, tooltipVariants } from '../../chunk-YNCD6TKE.mjs';
+import { useTooltip, tooltipVariants } from '../../chunk-Y4IFVO46.mjs';
 import { cn } from '../../chunk-DFEZH7TC.mjs';
 import { motion } from 'framer-motion';
 import { jsx } from 'react/jsx-runtime';

package/dist/ui/tooltip/tooltip-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-base.d.ts","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip-base.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,eAAO,MAAM,UAAU,0BAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,iFAOrB,YAAY,4CA+Cd,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,0BAG5B,mBAAmB,4CA4BrB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,gDAM5B,mBAAmB,mDAyBrB,CAAC"}
+{"version":3,"file":"tooltip-base.d.ts","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip-base.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,cAAc,oDAAiD,CAAC;AAE7E,eAAO,MAAM,UAAU,0BAMtB,CAAC;AAkBF,eAAO,MAAM,OAAO,GAAI,iFAOrB,YAAY,4CAiDd,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,0BAG5B,mBAAmB,4CAkGrB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,gDAM5B,mBAAmB,mDA0BrB,CAAC"}

package/dist/ui/tooltip/types.d.ts

@@ -7,6 +7,7 @@ export type TooltipContextType = {
     delay: number;
     scheduleDelayedOpen: () => void;
     cancelDelayedOpen: () => void;
+    tooltipId: string;
 };
 export type TooltipProps = {
     children: ReactNode;

package/dist/ui/tooltip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,eAAe,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,GACP,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,iBAAiB,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CAC1D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,eAAe,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,GACP,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,iBAAiB,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CAC1D,CAAC"}

package/dist/ui/tooltip.js

@@ -1,34 +1,34 @@
 "use client";
 'use strict';
 
-var chunkWZKGRU3U_js = require('../chunk-WZKGRU3U.js');
+var chunkMQZB5EPD_js = require('../chunk-MQZB5EPD.js');
 require('../chunk-UOZYPWDZ.js');
 
 
 
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunkWZKGRU3U_js.Tooltip; }
+  get: function () { return chunkMQZB5EPD_js.Tooltip; }
 });
 Object.defineProperty(exports, "TooltipContent", {
   enumerable: true,
-  get: function () { return chunkWZKGRU3U_js.TooltipContent; }
+  get: function () { return chunkMQZB5EPD_js.TooltipContent; }
 });
 Object.defineProperty(exports, "TooltipContext", {
   enumerable: true,
-  get: function () { return chunkWZKGRU3U_js.TooltipContext; }
+  get: function () { return chunkMQZB5EPD_js.TooltipContext; }
 });
 Object.defineProperty(exports, "TooltipTrigger", {
   enumerable: true,
-  get: function () { return chunkWZKGRU3U_js.TooltipTrigger; }
+  get: function () { return chunkMQZB5EPD_js.TooltipTrigger; }
 });
 Object.defineProperty(exports, "tooltipVariants", {
   enumerable: true,
-  get: function () { return chunkWZKGRU3U_js.tooltipVariants; }
+  get: function () { return chunkMQZB5EPD_js.tooltipVariants; }
 });
 Object.defineProperty(exports, "useTooltip", {
   enumerable: true,
-  get: function () { return chunkWZKGRU3U_js.useTooltip; }
+  get: function () { return chunkMQZB5EPD_js.useTooltip; }
 });
 //# sourceMappingURL=tooltip.js.map
 //# sourceMappingURL=tooltip.js.map

package/dist/ui/tooltip.mjs

@@ -1,5 +1,5 @@
 "use client";
-export { Tooltip, TooltipContent, TooltipContext, TooltipTrigger, tooltipVariants, useTooltip } from '../chunk-YNCD6TKE.mjs';
+export { Tooltip, TooltipContent, TooltipContext, TooltipTrigger, tooltipVariants, useTooltip } from '../chunk-Y4IFVO46.mjs';
 import '../chunk-DFEZH7TC.mjs';
 //# sourceMappingURL=tooltip.mjs.map
 //# sourceMappingURL=tooltip.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.4.61",
+  "version": "1.4.62",
   "description": "React + Tailwind UI kit with ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "license": "MIT",
   "files": ["dist", "src/ui", "src/lib", "src/hooks", "cli"],

package/src/hooks/useFocusManagement/useFocusManagement.test.tsx

@@ -42,4 +42,12 @@ describe("useFocusManagement", () => {
     fireEvent.keyDown(window, { key: "Escape" });
     expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
+
+  it("should return focus inside the overlay when focus moves outside without Tab", () => {
+    render(<Modal initialOpen />);
+    const outsideButton = screen.getByTestId("after");
+    outsideButton.focus();
+    expect(outsideButton).not.toHaveFocus();
+    expect(screen.getByRole("button", { name: "first" })).toHaveFocus();
+  });
 });

package/src/hooks/useFocusManagement/useFocusManagement.ts

@@ -1,39 +1,61 @@
 "use client";
 
 import type { RefObject } from "react";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { useBodyScrollLock } from "../useBodyScrollLock";
 
 const FOCUSABLE_SELECTOR =
-  'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
+  [
+    'a[href]',
+    'button:not([disabled])',
+    'textarea:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+  ].join(", ");
+
+function getFocusableElements(
+  root: HTMLElement,
+  focusableSelector: string,
+): HTMLElement[] {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(focusableSelector),
+  ).filter((element) => {
+    if (element.getAttribute("aria-hidden") === "true") {
+      return false;
+    }
+    if (typeof window === "undefined") {
+      return true;
+    }
+    const style = getComputedStyle(element);
+    if (style.visibility === "hidden" || style.display === "none") {
+      return false;
+    }
+    return true;
+  });
+}
 
 /**
- * Composes modal-like behavior for an open overlay: body scroll lock, Escape to close, and focus trapping.
- *
- * - Delegates scroll locking to {@link useBodyScrollLock} while `open` is true.
- * - Listens for `Escape` on `window` and calls `setOpen(false)`.
- * - When `open` becomes true, focuses the first visible focusable inside `contentRef`, or the container itself.
- * - Traps focus within `contentRef` via a capturing `focusin` listener on `document` that redirects focus back inside.
- * - On close/unmount of the open effect, restores focus to the element that was focused before the trap ran.
- *
- * @param params.open - Whether the overlay is visible.
- * @param params.setOpen - Setter used for Escape and cleanup paths.
- * @param params.contentRef - Root of the dialog/drawer content (must point at a focusable container or include focusables).
- * @param params.focusableSelector - Query selector for tabbable elements; defaults to a common interactive set.
+ * Composes modal-like behavior for an open overlay: body scroll lock, Escape to close, focus trapping with circular Tab cycling, and restoring focus after close.
  */
 export const useFocusManagement = ({
   open,
   setOpen,
   contentRef,
+  triggerRef,
   focusableSelector = FOCUSABLE_SELECTOR,
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
-  contentRef: RefObject<HTMLDivElement | null>;
+  contentRef: RefObject<HTMLElement | null>;
+  /** Last modal trigger control; used when focus cannot be inferred at open time. */
+  triggerRef?: RefObject<HTMLElement | null>;
   focusableSelector?: string;
 }) => {
   useBodyScrollLock(open);
 
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -47,31 +69,138 @@ export const useFocusManagement = ({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [open, setOpen]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!open) {
       return;
     }
-    const node = contentRef.current;
-    if (!node) {
-      return;
-    }
-    const focusables = Array.from(
-      node.querySelectorAll<HTMLElement>(focusableSelector),
-    ).filter((element) => element.offsetParent !== null || element === node);
-    const target = focusables[0] ?? node;
-    const previouslyFocused = document.activeElement as HTMLElement | null;
-    target.focus();
+
+    let cancelled = false;
+    let rafId = 0;
+    let trapInstalled = false;
+
+    const detachTrap = () => {
+      if (!trapInstalled) {
+        return;
+      }
+      trapInstalled = false;
+      document.removeEventListener("focusin", handleFocusIn, true);
+      document.removeEventListener("keydown", handleTabKeyDown, true);
+    };
+
+    let trapRoot: HTMLElement | null = null;
 
     const handleFocusIn = (event: FocusEvent) => {
-      if (!node.contains(event.target as Node)) {
-        event.stopPropagation();
-        target.focus();
+      const node = trapRoot;
+      if (!node) {
+        return;
+      }
+      const focused = event.target;
+      if (!(focused instanceof Node)) {
+        return;
       }
+      if (node.contains(focused)) {
+        return;
+      }
+      const list = getFocusableElements(node, focusableSelector);
+      const redirectTarget = list[0] ?? node;
+      redirectTarget.focus({ preventScroll: true });
     };
-    document.addEventListener("focusin", handleFocusIn);
+
+    const handleTabKeyDown = (event: KeyboardEvent) => {
+      const node = trapRoot;
+      if (!node) {
+        return;
+      }
+      if (event.key !== "Tab") {
+        return;
+      }
+      const list = getFocusableElements(node, focusableSelector);
+      if (list.length === 0) {
+        event.preventDefault();
+        node.focus({ preventScroll: true });
+        return;
+      }
+      const first = list[0];
+      const last = list[list.length - 1];
+      if (!first || !last) {
+        return;
+      }
+      const activeElement = document.activeElement as HTMLElement | undefined;
+
+      if (!activeElement || !node.contains(activeElement)) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus({ preventScroll: true });
+        return;
+      }
+
+      if (event.shiftKey && activeElement === first) {
+        event.preventDefault();
+        last.focus({ preventScroll: true });
+        return;
+      }
+      if (!event.shiftKey && activeElement === last) {
+        event.preventDefault();
+        first.focus({ preventScroll: true });
+      }
+    };
+
+    const installTrap = () => {
+      if (cancelled) {
+        return;
+      }
+      const node = contentRef.current;
+      if (!node) {
+        rafId = requestAnimationFrame(installTrap);
+        return;
+      }
+
+      trapRoot = node;
+
+      const active = document.activeElement;
+      if (
+        active instanceof HTMLElement &&
+        active !== document.body &&
+        !node.contains(active)
+      ) {
+        previousFocusRef.current = active;
+      } else {
+        previousFocusRef.current = triggerRef?.current ?? null;
+      }
+
+      const focusables = getFocusableElements(node, focusableSelector);
+      const initialFocus = focusables[0] ?? node;
+      initialFocus.focus({ preventScroll: true });
+
+      document.addEventListener("focusin", handleFocusIn, true);
+      document.addEventListener("keydown", handleTabKeyDown, true);
+      trapInstalled = true;
+    };
+
+    installTrap();
+
     return () => {
-      document.removeEventListener("focusin", handleFocusIn);
-      previouslyFocused?.focus?.();
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+      detachTrap();
+      trapRoot = null;
+
+      const fallbackTrigger =
+        triggerRef?.current &&
+        document.body.contains(triggerRef.current) &&
+        typeof triggerRef.current.focus === "function"
+          ? triggerRef.current
+          : null;
+
+      const toRestore = previousFocusRef.current ?? fallbackTrigger;
+      previousFocusRef.current = null;
+
+      if (
+        toRestore &&
+        typeof toRestore.focus === "function" &&
+        document.body.contains(toRestore)
+      ) {
+        toRestore.focus({ preventScroll: true });
+      }
     };
-  }, [contentRef, open]);
+  }, [open, contentRef, triggerRef, focusableSelector]);
 };

package/src/ui/badge/badge-base.tsx

@@ -13,6 +13,7 @@ export function BadgeBase({
   size,
   shape,
   closable = false,
+  liveRegion = false,
   onClose,
   closeLabel = "Remove",
   children,
@@ -24,11 +25,13 @@ export function BadgeBase({
   const isDot = shape === "dot";
   const resolvedAriaLabel =
     ariaLabel ?? (isDot ? "Status indicator" : undefined);
+  const landmarkRole =
+    liveRegion === true || isDot ? ("status" as const) : undefined;
 
   return (
     <Wrapper
       ref={ref}
-      role="status"
+      role={landmarkRole}
       data-slot="badge"
       aria-label={resolvedAriaLabel}
       className={cn(badgeVariants({ appearance, size, shape }), className)}

package/src/ui/badge/types.ts

@@ -15,6 +15,7 @@ export interface BadgeBaseProps extends ComponentPropsWithRef<"span"> {
   size?: BadgeVariantProps["size"];
   shape?: BadgeVariantProps["shape"];
   closable?: boolean;
+  liveRegion?: boolean;
   onClose?: MouseEventHandler<HTMLButtonElement>;
   closeLabel?: string;
   children?: ReactNode;

package/src/ui/badge/variants.ts

@@ -7,19 +7,19 @@ import { cva } from "class-variance-authority";
 export const buttonLikeSolidAppearances = {
   default: "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
   secondary: "bg-slate-800 text-slate-50",
-  destructive: "bg-rose-600 text-white",
+  destructive: "bg-rose-700 text-white",
   outline: "border border-white/10 bg-white/5 text-slate-50",
   ghost: "bg-transparent text-slate-200",
   glass: "border border-white/15 bg-white/10 text-white backdrop-blur-md",
-  emerald: "bg-emerald-600 text-white",
+  emerald: "bg-emerald-800 text-white",
   indigo: "bg-indigo-600 text-white",
   purple: "bg-purple-600 text-white",
   pink: "bg-pink-600 text-white",
-  rose: "bg-rose-600 text-white",
-  sky: "bg-sky-600 text-white",
-  teal: "bg-teal-600 text-white",
-  yellow: "bg-yellow-600 text-white",
-  orange: "bg-orange-600 text-white",
+  rose: "bg-rose-700 text-white",
+  sky: "bg-sky-700 text-white",
+  teal: "bg-teal-700 text-white",
+  yellow: "bg-yellow-800 text-white",
+  orange: "bg-orange-800 text-white",
   "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
   "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600 text-white",
   "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600 text-white",

package/src/ui/buttons/button.test.tsx

@@ -129,7 +129,7 @@ describe("Button (component library)", () => {
       expect(
         root.className,
         "Destructive appearance must surface danger styling",
-      ).toMatch(/bg-rose-600/);
+      ).toMatch(/bg-rose-700/);
     });
 
     it("should apply outline appearance when appearance='outline'", () => {

package/src/ui/buttons/variants.ts

@@ -14,24 +14,24 @@ export const buttonVariants = cva(
         default:
           "bg-slate-50 text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.12)] hover:bg-white",
         secondary: "bg-slate-800 text-slate-50 hover:bg-slate-700",
-        destructive: "bg-rose-600 text-white hover:bg-rose-600",
+        destructive: "bg-rose-700 text-white hover:bg-rose-800",
         outline:
           "border border-white/10 bg-white/5 text-slate-50 hover:bg-white/10",
         ghost: "bg-transparent text-slate-200 hover:bg-white/5",
         link: "bg-transparent text-cyan-300 underline-offset-4 hover:underline",
         glass:
           "border border-white/15 bg-white/10 text-white backdrop-blur-md hover:bg-white/15",
-        emerald: "bg-emerald-600 text-white hover:bg-emerald-600",
+        emerald: "bg-emerald-800 text-white hover:bg-emerald-900",
         indigo: "bg-indigo-600 text-white hover:bg-indigo-600",
         purple: "bg-purple-600 text-white hover:bg-purple-600",
         pink: "bg-pink-600 text-white hover:bg-pink-600",
         rose: "bg-rose-600 text-white hover:bg-rose-600",
-        sky: "bg-sky-600 text-white hover:bg-sky-600",
-        teal: "bg-teal-600 text-white hover:bg-teal-600",
-        yellow: "bg-yellow-600 text-white hover:bg-yellow-600",
-        orange: "bg-orange-600 text-white hover:bg-orange-600",
-        gray: "bg-gray-600 text-white hover:bg-gray-600",
-        amber: "bg-amber-600 text-white hover:bg-amber-600",
+        sky: "bg-sky-700 text-white hover:bg-sky-800",
+        teal: "bg-teal-700 text-white hover:bg-teal-800",
+        yellow: "bg-yellow-800 text-white hover:bg-yellow-900",
+        orange: "bg-orange-800 text-white hover:bg-orange-900",
+        gray: "bg-gray-700 text-white hover:bg-gray-800",
+        amber: "bg-amber-800 text-white hover:bg-amber-900",
         violet: "bg-violet-600 text-white hover:bg-violet-600",
         "gradient-blue":
           "bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:from-blue-600 hover:to-purple-600",

package/src/ui/drawer/animated/drawer-content-animated.tsx

@@ -26,7 +26,7 @@ export function DrawerContentAnimated({
   id,
   style,
 }: DrawerContentAnimatedProps) {
-  const { open, setOpen, titleId, descriptionId, contentRef } =
+  const { open, setOpen, titleId, descriptionId, contentRef, triggerRef } =
     useDrawerContext("DrawerContent");
   const resolvedSide = side ?? "right";
   const reduceMotion = useReducedMotion();
@@ -39,6 +39,7 @@ export function DrawerContentAnimated({
     open,
     setOpen,
     contentRef,
+    triggerRef,
   });
 
   const portalTarget = typeof document !== "undefined" ? document.body : null;
@@ -50,10 +51,8 @@ export function DrawerContentAnimated({
     <AnimatePresence>
       {open ? (
         <div className="fixed inset-0 z-50" data-slot="drawer-portal">
-          <motion.button
-            type="button"
-            aria-hidden
-            tabIndex={-1}
+          <motion.div
+            role="presentation"
             data-slot="drawer-overlay"
             className={drawerOverlayVariants()}
             onClick={() => setOpen(false)}