@hyddenlabs/hydn-ui 0.3.0-alpha.2 → 0.3.0-alpha.99

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React3, { createContext, useState, useRef, useEffect, isValidElement, cloneElement, useCallback, useMemo, createElement, useContext, useLayoutEffect } from 'react';
+import React5, { createContext, useId, useState, useRef, useEffect, isValidElement, cloneElement, useCallback, useLayoutEffect, useMemo, createElement, useContext } from 'react';
 import { IconX, IconChevronDown, IconCheck, IconCalendar, IconMenu2, IconTrash, IconChevronRight, IconChevronLeft, IconSelector, IconChevronUp } from '@tabler/icons-react';
 import { Link, NavLink } from 'react-router-dom';
 import { createPortal } from 'react-dom';
@@ -263,7 +263,8 @@ function Radio({
     success: "border-success focus:ring-success",
     warning: "border-warning focus:ring-warning"
   };
-  const inputId = id || `radio-${value || Math.random().toString(36).slice(2)}`;
+  const generatedId = useId();
+  const inputId = id || `radio-${value || generatedId}`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -277,7 +278,7 @@ function Radio({
             onChange: handleChange,
             disabled,
             "aria-label": ariaLabel,
-            "aria-invalid": validationState === "error",
+            "aria-invalid": validationState === "error" ? "true" : void 0,
             id: inputId,
             name,
             value,
@@ -473,7 +474,13 @@ function MultiSelect({
           selectedValues.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: getSelectedLabels().map((label, index) => /* @__PURE__ */ jsxs(
             "span",
             {
-              className: `inline-flex items-center gap-1 bg-primary/10 text-primary rounded-md font-medium ${currentSize.chip}`,
+              className: `
+                  inline-flex items-center gap-1 
+                  bg-primary/10 text-primary rounded-md font-medium 
+                  animate-scaleIn origin-left
+                  transition-all duration-200
+                  ${currentSize.chip}
+                `.trim(),
               children: [
                 label,
                 /* @__PURE__ */ jsx(
@@ -481,7 +488,7 @@ function MultiSelect({
                   {
                     type: "button",
                     onClick: (e) => handleRemoveValue(selectedValues[index], e),
-                    className: "hover:bg-primary/20 rounded-sm transition-colors",
+                    className: "hover:bg-primary/20 rounded-sm transition-colors duration-150",
                     "aria-label": `Remove ${label}`,
                     tabIndex: -1,
                     children: /* @__PURE__ */ jsx(IconX, { size: currentSize.icon - 4 })
@@ -541,7 +548,7 @@ function MultiSelect({
             onClick: () => !isDisabled && handleToggleOption(option.value),
             className: `
                       w-full px-3 py-2 flex items-center justify-between gap-2
-                      transition-colors text-left ${currentSize.text}
+                      transition-all duration-200 text-left ${currentSize.text}
                       ${isFocused ? "bg-muted" : ""}
                       ${isSelected ? "bg-primary/10 text-primary font-medium" : "hover:bg-muted"}
                       ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}
@@ -551,7 +558,13 @@ function MultiSelect({
             disabled: isDisabled,
             children: [
               /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
-              isSelected && /* @__PURE__ */ jsx(IconCheck, { size: currentSize.icon, className: "flex-shrink-0" })
+              isSelected && /* @__PURE__ */ jsx(
+                IconCheck,
+                {
+                  size: currentSize.icon,
+                  className: "flex-shrink-0 animate-scaleIn"
+                }
+              )
             ]
           },
           option.value
@@ -880,11 +893,36 @@ function FormField({
 FormField.displayName = "FormField";
 var form_field_default = FormField;
 function InputGroup({ children, prefix, suffix, className = "" }) {
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-stretch ${className}`, children: [
-    prefix && /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 bg-muted border border-r-0 border-input rounded-l-md", children: prefix }),
-    children,
-    suffix && /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 bg-muted border border-l-0 border-input rounded-r-md", children: suffix })
-  ] });
+  const isTextSuffix = typeof suffix === "string" || typeof suffix === "number";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "inline-flex items-stretch rounded-lg border border-input shadow-sm bg-background",
+        "focus-within:ring-2 focus-within:ring-ring/20 focus-within:border-ring",
+        "transition-colors duration-150 overflow-hidden",
+        // Use CSS nesting to style child input without cloning
+        "[&>input]:border-0 [&>input]:shadow-none [&>input]:rounded-none [&>input]:ring-0",
+        "[&>input]:focus:ring-0 [&>input]:focus:border-0 [&>input]:bg-transparent",
+        "[&>input]:flex-1 [&>input]:min-w-0",
+        // Style child buttons (both direct and nested)
+        "[&_button]:rounded-none [&_button]:border-0 [&_button]:shadow-none [&_button]:m-0",
+        "[&_button]:h-full",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        prefix && /* @__PURE__ */ jsx("div", { className: "flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0", children: prefix }),
+        children,
+        suffix && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: isTextSuffix ? "flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0" : "flex items-stretch shrink-0",
+            children: suffix
+          }
+        )
+      ]
+    }
+  );
 }
 InputGroup.displayName = "InputGroup";
 var input_group_default = InputGroup;
@@ -1176,8 +1214,31 @@ function DatePicker({
 }
 DatePicker.displayName = "DatePicker";
 var date_picker_default = DatePicker;
-function Nav({ children, className = "", ariaLabel = "Main navigation" }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: `flex items-center ${className}`, children });
+function Nav({
+  children,
+  className = "",
+  ariaLabel = "Main navigation",
+  direction = "horizontal",
+  spacing = "md",
+  align = "center"
+}) {
+  const spacingClasses = {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+  };
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const directionClass = direction === "horizontal" ? "flex-row" : "flex-col";
+  const spacingClass = spacingClasses[spacing];
+  const alignClass = alignClasses[align];
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: `flex ${directionClass} ${spacingClass} ${alignClass} ${className}`, children });
 }
 Nav.displayName = "Nav";
 var nav_default = Nav;
@@ -1186,7 +1247,9 @@ function Container({
   className = "",
   size = "lg",
   padding = "lg",
-  align = "center"
+  align = "center",
+  minWidth,
+  minHeight
 }) {
   const sizeClasses = {
     sm: "max-w-screen-sm",
@@ -1207,7 +1270,54 @@ function Container({
     center: "mx-auto",
     end: "ml-auto"
   };
-  return /* @__PURE__ */ jsx("div", { className: `px-4 ${sizeClasses[size]} ${paddingClasses[padding]} ${alignClasses[align]} ${className}`, children });
+  const minWidthClasses = {
+    xs: "min-w-[20rem]",
+    // 320px
+    sm: "min-w-[24rem]",
+    // 384px
+    md: "min-w-[28rem]",
+    // 448px
+    lg: "min-w-[32rem]",
+    // 512px
+    xl: "min-w-[36rem]",
+    // 576px
+    "2xl": "min-w-[42rem]",
+    // 672px
+    "3xl": "min-w-[48rem]",
+    // 768px
+    full: "min-w-full"
+  };
+  const minHeightClasses = {
+    xs: "min-h-[10rem]",
+    // 160px
+    sm: "min-h-[15rem]",
+    // 240px
+    md: "min-h-[20rem]",
+    // 320px
+    lg: "min-h-[25rem]",
+    // 400px
+    xl: "min-h-[30rem]",
+    // 480px
+    "2xl": "min-h-[35rem]",
+    // 560px
+    "3xl": "min-h-[40rem]",
+    // 640px
+    screen: "min-h-screen"
+  };
+  const minWidthClass = minWidth && minWidthClasses[minWidth] ? minWidthClasses[minWidth] : "";
+  const minHeightClass = minHeight && minHeightClasses[minHeight] ? minHeightClasses[minHeight] : "";
+  const inlineStyles = {
+    ...minWidth && !minWidthClasses[minWidth] && { minWidth },
+    ...minHeight && !minHeightClasses[minHeight] && { minHeight }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `px-4 ${sizeClasses[size]} ${paddingClasses[padding]} ${alignClasses[align]} ${minWidthClass} ${minHeightClass} ${className}`,
+      style: Object.keys(inlineStyles).length > 0 ? inlineStyles : void 0,
+      children
+    }
+  );
 }
 Container.displayName = "Container";
 var container_default = Container;
@@ -1317,8 +1427,8 @@ var PageTransition = ({
   type = "fade",
   className = ""
 }) => {
-  const [isVisible, setIsVisible] = React3.useState(false);
-  React3.useEffect(() => {
+  const [isVisible, setIsVisible] = React5.useState(false);
+  React5.useEffect(() => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         setIsVisible(true);
@@ -1440,20 +1550,34 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, close]);
-  useEffect(() => {
+  useLayoutEffect(() => {
+    let raf;
     if (isOpen) {
       const itemEls = itemsRef.current.filter(Boolean);
       if (itemEls.length) {
-        setActiveIndex(0);
-        itemEls[0]?.focus();
+        raf = requestAnimationFrame(() => {
+          setActiveIndex(0);
+          itemEls[0]?.focus();
+        });
       }
     } else {
-      setActiveIndex(-1);
+      raf = requestAnimationFrame(() => setActiveIndex(-1));
     }
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+    };
   }, [isOpen]);
-  const registerItem = (el, index) => {
-    itemsRef.current[index] = el;
-  };
+  const registerItem = useCallback((el, index) => {
+    if (typeof index === "number" && index >= 0) {
+      itemsRef.current[index] = el;
+      return;
+    }
+    if (el === null) {
+      itemsRef.current = itemsRef.current.filter((x) => x !== el && x != null);
+      return;
+    }
+    if (!itemsRef.current.includes(el)) itemsRef.current.push(el);
+  }, []);
   return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: `relative ${className}`, children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -1468,7 +1592,7 @@ function Dropdown({
         children: trigger
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { requestClose: close, autoClose }, children: /* @__PURE__ */ jsx(
+    isOpen && /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { requestClose: close, autoClose, registerItem }, children: /* @__PURE__ */ jsx(
       "div",
       {
         id: "dropdown-menu",
@@ -1477,10 +1601,7 @@ function Dropdown({
         role: "menu",
         "aria-orientation": "vertical",
         tabIndex: -1,
-        children: React3.Children.map(children, (child, i) => {
-          if (!React3.isValidElement(child)) return child;
-          return React3.cloneElement(child, { __dropdownIndex: i, __registerItem: registerItem, size });
-        })
+        children
       }
     ) })
   ] });
@@ -1576,6 +1697,22 @@ Pagination.displayName = "Pagination";
 var pagination_default = Pagination;
 function Sidebar({ children, className = "", width = "16rem" }) {
   const widthClass = width === "16rem" ? "w-64" : width === "4rem" ? "w-16" : "";
+  const enhancedChildren = React5.Children.map(children, (child) => {
+    if (!React5.isValidElement(child)) return child;
+    const childProps = child.props || {};
+    if ("href" in childProps) {
+      const existing = typeof childProps.className === "string" ? childProps.className : "";
+      const sidebarItemClasses = "flex items-center w-full justify-start gap-2 px-2 py-1.5 rounded hover:bg-muted";
+      const childInner = child.props.children;
+      const wrappedChildren = /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: childInner });
+      const newProps = {
+        ...child.props,
+        className: `${existing} ${sidebarItemClasses}`.trim()
+      };
+      return React5.cloneElement(child, newProps, wrappedChildren);
+    }
+    return child;
+  });
   return /* @__PURE__ */ jsx(
     "nav",
     {
@@ -1588,7 +1725,7 @@ function Sidebar({ children, className = "", width = "16rem" }) {
       `.replace(/\s+/g, " "),
       style: !widthClass ? { width } : void 0,
       "aria-label": "Sidebar navigation",
-      children: /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 py-3 space-y-2", children })
+      children: /* @__PURE__ */ jsx("div", { className: "flex-1 px-4 py-3 flex flex-col gap-2", children: enhancedChildren })
     }
   );
 }
@@ -1756,6 +1893,12 @@ function Toast({ message, children, type = "info", onClose, className = "", dura
     warning: "bg-warning text-warning-foreground",
     error: "bg-destructive text-destructive-foreground"
   };
+  const handleClose = useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose?.();
+    }, 300);
+  }, [onClose]);
   useEffect(() => {
     if (duration > 0) {
       const timer = setTimeout(() => {
@@ -1764,25 +1907,20 @@ function Toast({ message, children, type = "info", onClose, className = "", dura
       return () => clearTimeout(timer);
     }
     return void 0;
-  }, [duration]);
-  const handleClose = () => {
-    setIsClosing(true);
-    setTimeout(() => {
-      onClose?.();
-    }, 300);
-  };
-  return /* @__PURE__ */ jsxs(
+  }, [duration, handleClose]);
+  const toast = /* @__PURE__ */ jsxs(
     "div",
     {
       role: "alert",
       "aria-live": "polite",
-      className: `fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg ${typeClasses[type]} transition-all duration-300 ease-out ${isClosing ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0 animate-slideInRight"} ${className}`,
+      className: `fixed bottom-4 right-4 px-4 py-3 rounded-md shadow-lg z-[9999] ${typeClasses[type]} transition-all duration-300 ease-out ${isClosing ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0 animate-slideInRight"} ${className}`,
       children: [
         /* @__PURE__ */ jsx("span", { children: children || message }),
         onClose && /* @__PURE__ */ jsx("button", { onClick: handleClose, className: "ml-4 font-bold hover:opacity-70 transition-opacity", "aria-label": "Close", children: "\xD7" })
       ]
     }
   );
+  return typeof document !== "undefined" ? createPortal(toast, document.body) : toast;
 }
 Toast.displayName = "Toast";
 var toast_default = Toast;
@@ -1908,6 +2046,19 @@ function Tooltip({
 }
 Tooltip.displayName = "Tooltip";
 var tooltip_default = Tooltip;
+
+// src/utils/portal.ts
+function getPortalRoot(id = "hydn-ui-portal") {
+  if (typeof document === "undefined") return null;
+  let root = document.getElementById(id);
+  if (!root) {
+    root = document.createElement("div");
+    root.id = id;
+    document.body.appendChild(root);
+  }
+  return root;
+}
+var portal_default = getPortalRoot;
 function useOverlay(options) {
   const {
     isOpen,
@@ -1923,9 +2074,10 @@ function useOverlay(options) {
   const [shouldRender, setShouldRender] = useState(isOpen);
   const [phase, setPhase] = useState("mount");
   useLayoutEffect(() => {
-    if (isOpen) {
+    if (isOpen && !shouldRender) {
       setShouldRender(true);
       setPhase("mount");
+    } else if (isOpen && shouldRender && phase === "mount") {
       requestAnimationFrame(() => {
         setPhase("animating-in");
         let frame = 0;
@@ -1937,12 +2089,16 @@ function useOverlay(options) {
             requestAnimationFrame(step);
           }
         };
-        requestAnimationFrame(step);
+        if (animationFrames > 0) {
+          requestAnimationFrame(step);
+        } else {
+          setPhase("visible");
+        }
       });
-    } else if (!isOpen && shouldRender) {
+    } else if (!isOpen && shouldRender && phase !== "animating-out") {
       setPhase("animating-out");
     }
-  }, [isOpen, shouldRender, animationFrames]);
+  }, [isOpen, shouldRender, phase, animationFrames]);
   useEffect(() => {
     if (phase === "animating-out" && unmountOnExit) {
       const timeout = setTimeout(() => {
@@ -2027,7 +2183,8 @@ function Modal({
   actions,
   className = "",
   ariaLabel,
-  align = "center"
+  align = "center",
+  portalRoot = portal_default()
 }) {
   const {
     phase,
@@ -2041,7 +2198,7 @@ function Modal({
     animationFrames: 2,
     restoreFocus: true
   });
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -2059,7 +2216,7 @@ function Modal({
   const backdropOpacity = phase === "visible" || phase === "animating-in" ? "opacity-100" : "opacity-0 transition-opacity delay-50";
   const hasStructured = title || description || content || actions;
   const alignmentClasses = align === "center" ? "grid place-items-center" : "flex items-start justify-center pt-20";
-  return /* @__PURE__ */ jsx(
+  const panel = /* @__PURE__ */ jsx(
     "div",
     {
       "data-phase": phase,
@@ -2093,6 +2250,7 @@ function Modal({
       )
     }
   );
+  return portalRoot ? createPortal(panel, portalRoot) : panel;
 }
 Modal.displayName = "Modal";
 var modal_default = Modal;
@@ -2209,12 +2367,13 @@ function Popover({ trigger, children, content, position = "bottom", className =
 }
 Popover.displayName = "Popover";
 var popover_default = Popover;
-function Alert({ children, type = "info", dismissible = false, onClose, className = "" }) {
+function Alert({ children, type = "info", dismissible = false, onClose, className = "", position = "relative", duration = 0 }) {
+  const [isClosing, setIsClosing] = useState(false);
   const typeClasses = {
-    info: "bg-info/10 text-foreground border-info/30",
-    success: "bg-success/10 text-foreground border-success/30",
-    warning: "bg-warning/10 text-foreground border-warning/30",
-    error: "bg-destructive/10 text-foreground border-destructive/30"
+    info: "bg-info/20 text-foreground border-info/50 backdrop-blur-sm",
+    success: "bg-success/20 text-foreground border-success/50 backdrop-blur-sm",
+    warning: "bg-warning/20 text-foreground border-warning/50 backdrop-blur-sm",
+    error: "bg-destructive/20 text-foreground border-destructive/50 backdrop-blur-sm"
   };
   const iconClasses = {
     info: "text-info",
@@ -2222,6 +2381,21 @@ function Alert({ children, type = "info", dismissible = false, onClose, classNam
     warning: "text-warning",
     error: "text-destructive"
   };
+  const handleClose = useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose?.();
+    }, 300);
+  }, [onClose]);
+  useEffect(() => {
+    if (duration > 0 && onClose) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [duration, onClose, handleClose]);
   const icons = {
     info: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
       "path",
@@ -2256,19 +2430,44 @@ function Alert({ children, type = "info", dismissible = false, onClose, classNam
       }
     ) })
   };
-  return /* @__PURE__ */ jsxs("div", { role: "alert", className: `p-4 border rounded-lg flex items-start gap-3 ${typeClasses[type]} ${className}`, children: [
-    /* @__PURE__ */ jsx("span", { className: iconClasses[type], children: icons[type] }),
-    /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children }),
-    dismissible && onClose && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: onClose,
-        className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-ring rounded p-0.5",
-        "aria-label": "Close alert",
-        children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-      }
-    )
-  ] });
+  const positionClasses = {
+    top: "fixed top-4 left-1/2 -translate-x-1/2 z-[9999] max-w-2xl w-full mx-4",
+    bottom: "fixed bottom-4 left-1/2 -translate-x-1/2 z-[9999] max-w-2xl w-full mx-4",
+    relative: ""
+  };
+  const getAnimationClasses = () => {
+    if (position === "top") {
+      return isClosing ? "opacity-0 -translate-y-full" : "opacity-100 translate-y-0 animate-slideInTop";
+    }
+    if (position === "bottom") {
+      return isClosing ? "opacity-0 translate-y-full" : "opacity-100 translate-y-0 animate-slideInBottom";
+    }
+    return isClosing ? "opacity-0" : "opacity-100";
+  };
+  const alertContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: `p-4 border rounded-lg flex items-start gap-3 transition-all duration-300 ease-out ${typeClasses[type]} ${positionClasses[position]} ${getAnimationClasses()} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: iconClasses[type], children: icons[type] }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children }),
+        dismissible && onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleClose,
+            className: "flex-shrink-0 text-current opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-ring rounded p-0.5",
+            "aria-label": "Close alert",
+            children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+  if (position !== "relative" && typeof document !== "undefined") {
+    return createPortal(alertContent, document.body);
+  }
+  return alertContent;
 }
 Alert.displayName = "Alert";
 var alert_default = Alert;
@@ -3385,7 +3584,7 @@ function Drawer({
   closeOnEscape = true,
   closeOnOutside = true,
   unmountOnExit = true,
-  portalRoot = typeof document !== "undefined" ? document.body : null,
+  portalRoot = portal_default(),
   noAnimation = false
 }) {
   const { phase, shouldRender, ref, getPhaseClass } = useOverlay_default({
@@ -3394,8 +3593,8 @@ function Drawer({
     restoreFocus: true,
     focusTrap: true,
     unmountOnExit,
-    exitDuration: noAnimation ? 0 : 300,
-    animationFrames: noAnimation ? 0 : 2
+    exitDuration: noAnimation ? 0 : 250,
+    animationFrames: noAnimation ? 0 : 0
   });
   if (!shouldRender) return null;
   const sizeClasses = {
@@ -3419,7 +3618,7 @@ function Drawer({
   };
   const openTransform = "translate-x-0 translate-y-0";
   const panelTransform = noAnimation ? "" : getPhaseClass(openTransform, closedTransform[position]);
-  const overlayOpacity = noAnimation ? "" : getPhaseClass("opacity-100", "opacity-0");
+  const overlayOpacity = noAnimation ? "opacity-100" : getPhaseClass("opacity-100", "opacity-0");
   const handleKeyDown = (e) => {
     if (e.key === "Escape" && closeOnEscape) {
       e.stopPropagation();
@@ -3428,11 +3627,21 @@ function Drawer({
   };
   const panel = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      "div",
+      "button",
       {
-        className: `fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${overlayOpacity}`,
-        "aria-hidden": "true",
+        type: "button",
+        className: `fixed inset-0 z-[999] bg-black/50 backdrop-blur-sm transition-opacity duration-[250ms] ease-in-out ${overlayOpacity} border-0 p-0 m-0`,
+        "aria-label": closeOnOutside ? "Close overlay" : void 0,
+        "aria-hidden": !closeOnOutside,
+        tabIndex: closeOnOutside ? 0 : -1,
         onClick: () => closeOnOutside && onClose(),
+        onKeyDown: (e) => {
+          if (!closeOnOutside) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClose();
+          }
+        },
         "data-phase": phase
       }
     ),
@@ -3446,7 +3655,7 @@ function Drawer({
         tabIndex: -1,
         "data-phase": phase,
         "data-position": position,
-        className: `fixed ${edgeClasses[position]} ${position === "left" || position === "right" ? sizeClasses[size] : ""} bg-card text-card-foreground shadow-2xl z-50 flex flex-col outline-none ${panelTransform} ${noAnimation ? "" : "transition-[transform] duration-300 ease-out"} ${className}`,
+        className: `fixed ${edgeClasses[position]} ${position === "left" || position === "right" ? sizeClasses[size] : ""} bg-card text-card-foreground shadow-2xl z-[1000] flex flex-col outline-none ${panelTransform} ${noAnimation ? "" : "transition-transform duration-[250ms] ease-out will-change-transform"} ${className}`,
         onKeyDown: handleKeyDown,
         children: [
           title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/60 bg-card/95 backdrop-blur-sm", children: [
@@ -3726,10 +3935,14 @@ function useScrollReset(deps, container) {
     let cancelled = false;
     const maxRaf = 6;
     let rafCount = 0;
+    const isRef = (obj) => {
+      return typeof obj === "object" && obj !== null && "current" in obj;
+    };
     const setAllScrollTop = () => {
       if (cancelled) return;
       window.scrollTo(0, 0);
-      if (container) container.scrollTop = 0;
+      const resolved = isRef(container) ? container.current : container;
+      if (resolved) resolved.scrollTop = 0;
       document.documentElement.scrollTop = 0;
       document.body.scrollTop = 0;
     };
@@ -3796,7 +4009,7 @@ function LeftNavLayout({
       navRef.current.scrollTop = scrollPosRef.current;
     }
   }, [children]);
-  useScrollReset_default([children], contentRef.current);
+  useScrollReset_default([children], contentRef);
   const containerClasses = embedded ? "flex bg-background border border-border rounded-lg overflow-hidden" : "flex h-[calc(100vh-4rem)] bg-background";
   return /* @__PURE__ */ jsxs("div", { className: `${containerClasses} ${className}`, children: [
     mobileCollapsible && mobileMenuOpen && /* @__PURE__ */ jsx(
@@ -3828,17 +4041,34 @@ function LeftNavLayout({
             "div",
             {
               className: `
-            flex items-center h-12 flex-shrink-0
+            relative flex items-center h-12 flex-shrink-0
             px-4 border-b border-border
-            ${collapsed ? "justify-center" : "justify-between"}
           `,
               children: [
-                !collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "Navigation" }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `
+                text-sm font-semibold text-foreground
+                transition-all duration-300 ease-in-out
+                ${collapsed ? "opacity-0 w-0 overflow-hidden" : "opacity-100"}
+              `,
+                    children: "Navigation"
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: toggleCollapsed,
-                    className: "\n                hidden lg:flex items-center justify-center\n                w-8 h-8 rounded-md\n                text-muted-foreground hover:text-foreground\n                hover:bg-muted\n                transition-colors\n                focus:outline-none focus:ring-2 focus:ring-ring\n              ",
+                    className: `
+                hidden lg:flex items-center justify-center
+                w-8 h-8 rounded-md
+                text-muted-foreground hover:text-foreground
+                hover:bg-muted
+                transition-all duration-300 ease-in-out
+                focus:outline-none focus:ring-2 focus:ring-ring
+                ${collapsed ? "absolute left-1/2 -translate-x-1/2" : "absolute right-4"}
+              `,
                     "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
                     type: "button",
                     children: collapsed ? /* @__PURE__ */ jsx(IconChevronRight, { size: 20 }) : /* @__PURE__ */ jsx(IconChevronLeft, { size: 20 })