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

package/dist/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React3 = require('react');
+var React5 = require('react');
 var iconsReact = require('@tabler/icons-react');
 var reactRouterDom = require('react-router-dom');
 var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React5__default = /*#__PURE__*/_interopDefault(React5);
 
 // src/components/forms/button/button.tsx
 function Button({
@@ -221,9 +221,9 @@ function Checkbox({
 }
 Checkbox.displayName = "Checkbox";
 var checkbox_default = Checkbox;
-var RadioGroupContext = React3.createContext(null);
+var RadioGroupContext = React5.createContext(null);
 var useRadioGroup = () => {
-  const context = React3.useContext(RadioGroupContext);
+  const context = React5.useContext(RadioGroupContext);
   return context;
 };
 function RadioGroup({
@@ -269,7 +269,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 = React5.useId();
+  const inputId = id || `radio-${value || generatedId}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -283,7 +284,7 @@ function Radio({
             onChange: handleChange,
             disabled,
             "aria-label": ariaLabel,
-            "aria-invalid": validationState === "error",
+            "aria-invalid": validationState === "error" ? "true" : void 0,
             id: inputId,
             name,
             value,
@@ -367,13 +368,13 @@ function MultiSelect({
   size = "md",
   className = ""
 }) {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [searchQuery, setSearchQuery] = React3.useState("");
-  const [focusedIndex, setFocusedIndex] = React3.useState(-1);
-  const containerRef = React3.useRef(null);
-  const searchInputRef = React3.useRef(null);
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [searchQuery, setSearchQuery] = React5.useState("");
+  const [focusedIndex, setFocusedIndex] = React5.useState(-1);
+  const containerRef = React5.useRef(null);
+  const searchInputRef = React5.useRef(null);
   const selectedValues = value || [];
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -386,7 +387,7 @@ function MultiSelect({
     }
     return void 0;
   }, [isOpen]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen && searchInputRef.current) {
       searchInputRef.current.focus();
     }
@@ -479,7 +480,13 @@ function MultiSelect({
           selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: getSelectedLabels().map((label, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -487,7 +494,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__ */ jsxRuntime.jsx(iconsReact.IconX, { size: currentSize.icon - 4 })
@@ -547,7 +554,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" : ""}
@@ -557,7 +564,13 @@ function MultiSelect({
             disabled: isDisabled,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }),
-              isSelected && /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { size: currentSize.icon, className: "flex-shrink-0" })
+              isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                iconsReact.IconCheck,
+                {
+                  size: currentSize.icon,
+                  className: "flex-shrink-0 animate-scaleIn"
+                }
+              )
             ]
           },
           option.value
@@ -870,7 +883,7 @@ function FormField({
   validationState = "default"
 }) {
   const effectiveValidationState = error ? "error" : validationState;
-  const childWithValidation = React3.isValidElement(children) ? React3.cloneElement(children, {
+  const childWithValidation = React5.isValidElement(children) ? React5.cloneElement(children, {
     validationState: effectiveValidationState
   }) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { direction: "vertical", spacing: "sm", className, children: [
@@ -886,17 +899,42 @@ function FormField({
 FormField.displayName = "FormField";
 var form_field_default = FormField;
 function InputGroup({ children, prefix, suffix, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-stretch ${className}`, children: [
-    prefix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center px-3 bg-muted border border-r-0 border-input rounded-l-md", children: prefix }),
-    children,
-    suffix && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0", children: prefix }),
+        children,
+        suffix && /* @__PURE__ */ jsxRuntime.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;
 function Calendar({ value, onChange, minDate, maxDate, disabled = false, className = "" }) {
-  const [currentMonth, setCurrentMonth] = React3.useState(value || /* @__PURE__ */ new Date());
-  const [selectedDate, setSelectedDate] = React3.useState(value);
+  const [currentMonth, setCurrentMonth] = React5.useState(value || /* @__PURE__ */ new Date());
+  const [selectedDate, setSelectedDate] = React5.useState(value);
   const getDaysInMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
   };
@@ -1032,14 +1070,14 @@ function DatePicker({
   className = "",
   size = "md"
 }) {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [selectedDate, setSelectedDate] = React3.useState(value);
-  const containerRef = React3.useRef(null);
-  const inputRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [selectedDate, setSelectedDate] = React5.useState(value);
+  const containerRef = React5.useRef(null);
+  const inputRef = React5.useRef(null);
+  React5.useEffect(() => {
     setSelectedDate(value);
   }, [value]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1051,7 +1089,7 @@ function DatePicker({
     }
     return void 0;
   }, [isOpen]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -1182,8 +1220,31 @@ function DatePicker({
 }
 DatePicker.displayName = "DatePicker";
 var date_picker_default = DatePicker;
-function Nav({ children, className = "", ariaLabel = "Main navigation" }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: `flex ${directionClass} ${spacingClass} ${alignClass} ${className}`, children });
 }
 Nav.displayName = "Nav";
 var nav_default = Nav;
@@ -1192,7 +1253,9 @@ function Container({
   className = "",
   size = "lg",
   padding = "lg",
-  align = "center"
+  align = "center",
+  minWidth,
+  minHeight
 }) {
   const sizeClasses = {
     sm: "max-w-screen-sm",
@@ -1213,7 +1276,54 @@ function Container({
     center: "mx-auto",
     end: "ml-auto"
   };
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -1228,7 +1338,7 @@ function Navbar({
   border = "none",
   disableMobileMenu = false
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = React3.useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = React5.useState(false);
   const appearanceClasses = {
     solid: "bg-background shadow-sm",
     blur: "bg-background/70 backdrop-blur-md supports-[backdrop-filter]:bg-background/60 border border-border/60",
@@ -1323,8 +1433,8 @@ var PageTransition = ({
   type = "fade",
   className = ""
 }) => {
-  const [isVisible, setIsVisible] = React3__default.default.useState(false);
-  React3__default.default.useEffect(() => {
+  const [isVisible, setIsVisible] = React5__default.default.useState(false);
+  React5__default.default.useEffect(() => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         setIsVisible(true);
@@ -1355,7 +1465,7 @@ var PageTransition = ({
 PageTransition.displayName = "PageTransition";
 var page_transition_default = PageTransition;
 function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
-  const [activeTab, setActiveTab] = React3.useState(defaultTab || tabs[0]?.id);
+  const [activeTab, setActiveTab] = React5.useState(defaultTab || tabs[0]?.id);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", "aria-label": ariaLabel, className: "flex border-b-2 border-border/50", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1385,7 +1495,7 @@ function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
 }
 Tabs.displayName = "Tabs";
 var tabs_default = Tabs;
-var DropdownContext = React3.createContext(null);
+var DropdownContext = React5.createContext(null);
 function Dropdown({
   trigger,
   children,
@@ -1394,14 +1504,14 @@ function Dropdown({
   autoClose = true,
   size = "md"
 }) {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const dropdownRef = React3.useRef(null);
-  const menuRef = React3.useRef(null);
-  const itemsRef = React3.useRef([]);
-  const [activeIndex, setActiveIndex] = React3.useState(-1);
-  const close = React3.useCallback(() => setIsOpen(false), []);
-  const open = React3.useCallback(() => setIsOpen(true), []);
-  React3.useEffect(() => {
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const dropdownRef = React5.useRef(null);
+  const menuRef = React5.useRef(null);
+  const itemsRef = React5.useRef([]);
+  const [activeIndex, setActiveIndex] = React5.useState(-1);
+  const close = React5.useCallback(() => setIsOpen(false), []);
+  const open = React5.useCallback(() => setIsOpen(true), []);
+  React5.useEffect(() => {
     if (!isOpen) return;
     const handleKey = (e) => {
       if (!menuRef.current) return;
@@ -1436,7 +1546,7 @@ function Dropdown({
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [isOpen, activeIndex, close]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -1446,20 +1556,34 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, close]);
-  React3.useEffect(() => {
+  React5.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 = React5.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__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: `relative ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1474,7 +1598,7 @@ function Dropdown({
         children: trigger
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: { requestClose: close, autoClose }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: { requestClose: close, autoClose, registerItem }, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         id: "dropdown-menu",
@@ -1483,10 +1607,7 @@ function Dropdown({
         role: "menu",
         "aria-orientation": "vertical",
         tabIndex: -1,
-        children: React3__default.default.Children.map(children, (child, i) => {
-          if (!React3__default.default.isValidElement(child)) return child;
-          return React3__default.default.cloneElement(child, { __dropdownIndex: i, __registerItem: registerItem, size });
-        })
+        children
       }
     ) })
   ] });
@@ -1582,6 +1703,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__default.default.Children.map(children, (child) => {
+    if (!React5__default.default.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__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-2", children: childInner });
+      const newProps = {
+        ...child.props,
+        className: `${existing} ${sidebarItemClasses}`.trim()
+      };
+      return React5__default.default.cloneElement(child, newProps, wrappedChildren);
+    }
+    return child;
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {
@@ -1594,7 +1731,7 @@ function Sidebar({ children, className = "", width = "16rem" }) {
       `.replace(/\s+/g, " "),
       style: !widthClass ? { width } : void 0,
       "aria-label": "Sidebar navigation",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 px-4 py-3 space-y-2", children })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 px-4 py-3 flex flex-col gap-2", children: enhancedChildren })
     }
   );
 }
@@ -1755,14 +1892,20 @@ function Stepper({
 Stepper.displayName = "Stepper";
 var stepper_default = Stepper;
 function Toast({ message, children, type = "info", onClose, className = "", duration = 5e3 }) {
-  const [isClosing, setIsClosing] = React3.useState(false);
+  const [isClosing, setIsClosing] = React5.useState(false);
   const typeClasses = {
     info: "bg-info text-info-foreground",
     success: "bg-success text-success-foreground",
     warning: "bg-warning text-warning-foreground",
     error: "bg-destructive text-destructive-foreground"
   };
-  React3.useEffect(() => {
+  const handleClose = React5.useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose?.();
+    }, 300);
+  }, [onClose]);
+  React5.useEffect(() => {
     if (duration > 0) {
       const timer = setTimeout(() => {
         handleClose();
@@ -1770,25 +1913,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__ */ jsxRuntime.jsxs(
+  }, [duration, handleClose]);
+  const toast = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: children || message }),
         onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleClose, className: "ml-4 font-bold hover:opacity-70 transition-opacity", "aria-label": "Close", children: "\xD7" })
       ]
     }
   );
+  return typeof document !== "undefined" ? reactDom.createPortal(toast, document.body) : toast;
 }
 Toast.displayName = "Toast";
 var toast_default = Toast;
@@ -1801,11 +1939,11 @@ function Tooltip({
   usePortal = false,
   className = ""
 }) {
-  const [showTooltip, setShowTooltip] = React3.useState(false);
-  const [tooltipPosition, setTooltipPosition] = React3.useState({ top: 0, left: 0 });
-  const triggerRef = React3.useRef(null);
+  const [showTooltip, setShowTooltip] = React5.useState(false);
+  const [tooltipPosition, setTooltipPosition] = React5.useState({ top: 0, left: 0 });
+  const triggerRef = React5.useRef(null);
   const isVisible = open || showTooltip;
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (usePortal && isVisible && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       const positions = {
@@ -1914,6 +2052,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,
@@ -1924,14 +2075,15 @@ function useOverlay(options) {
     exitDuration = 300,
     unmountOnExit = true
   } = options;
-  const previouslyFocusedRef = React3.useRef(null);
-  const containerRef = React3.useRef(null);
-  const [shouldRender, setShouldRender] = React3.useState(isOpen);
-  const [phase, setPhase] = React3.useState("mount");
-  React3.useLayoutEffect(() => {
-    if (isOpen) {
+  const previouslyFocusedRef = React5.useRef(null);
+  const containerRef = React5.useRef(null);
+  const [shouldRender, setShouldRender] = React5.useState(isOpen);
+  const [phase, setPhase] = React5.useState("mount");
+  React5.useLayoutEffect(() => {
+    if (isOpen && !shouldRender) {
       setShouldRender(true);
       setPhase("mount");
+    } else if (isOpen && shouldRender && phase === "mount") {
       requestAnimationFrame(() => {
         setPhase("animating-in");
         let frame = 0;
@@ -1943,13 +2095,17 @@ 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]);
-  React3.useEffect(() => {
+  }, [isOpen, shouldRender, phase, animationFrames]);
+  React5.useEffect(() => {
     if (phase === "animating-out" && unmountOnExit) {
       const timeout = setTimeout(() => {
         setShouldRender(false);
@@ -1959,7 +2115,7 @@ function useOverlay(options) {
     }
     return void 0;
   }, [phase, exitDuration, unmountOnExit]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen) {
       if (typeof document !== "undefined") {
         if (restoreFocus) previouslyFocusedRef.current = document.activeElement;
@@ -1975,7 +2131,7 @@ function useOverlay(options) {
       }
     };
   }, [isOpen, lockScroll, restoreFocus]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (phase === "visible" && containerRef.current) {
       const el = containerRef.current;
       try {
@@ -1985,7 +2141,7 @@ function useOverlay(options) {
       }
     }
   }, [phase]);
-  const handleKeyDown = React3.useCallback(
+  const handleKeyDown = React5.useCallback(
     (e) => {
       if (!focusTrap || phase !== "visible" || e.key !== "Tab" || !containerRef.current) return;
       const node = containerRef.current;
@@ -2007,14 +2163,14 @@ function useOverlay(options) {
     },
     [focusTrap, phase]
   );
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (focusTrap && phase === "visible") {
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     }
     return void 0;
   }, [phase, focusTrap, handleKeyDown]);
-  const getPhaseClass = React3.useCallback(
+  const getPhaseClass = React5.useCallback(
     (openClass, closedClass) => {
       return phase === "animating-in" || phase === "visible" ? openClass : closedClass;
     },
@@ -2033,7 +2189,8 @@ function Modal({
   actions,
   className = "",
   ariaLabel,
-  align = "center"
+  align = "center",
+  portalRoot = portal_default()
 }) {
   const {
     phase,
@@ -2047,7 +2204,7 @@ function Modal({
     animationFrames: 2,
     restoreFocus: true
   });
-  React3__default.default.useEffect(() => {
+  React5__default.default.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -2065,7 +2222,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__ */ jsxRuntime.jsx(
+  const panel = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-phase": phase,
@@ -2099,6 +2256,7 @@ function Modal({
       )
     }
   );
+  return portalRoot ? reactDom.createPortal(panel, portalRoot) : panel;
 }
 Modal.displayName = "Modal";
 var modal_default = Modal;
@@ -2161,10 +2319,10 @@ function DeleteDialog({
 DeleteDialog.displayName = "DeleteDialog";
 var delete_dialog_default = DeleteDialog;
 function Popover({ trigger, children, content, position = "bottom", className = "" }) {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const popoverRef = React3.useRef(null);
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const popoverRef = React5.useRef(null);
   const triggerContent = children || trigger;
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const handleClickOutside = (event) => {
       if (popoverRef.current && !popoverRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2215,12 +2373,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] = React5.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",
@@ -2228,6 +2387,21 @@ function Alert({ children, type = "info", dismissible = false, onClose, classNam
     warning: "text-warning",
     error: "text-destructive"
   };
+  const handleClose = React5.useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose?.();
+    }, 300);
+  }, [onClose]);
+  React5.useEffect(() => {
+    if (duration > 0 && onClose) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [duration, onClose, handleClose]);
   const icons = {
     info: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
@@ -2262,19 +2436,44 @@ function Alert({ children, type = "info", dismissible = false, onClose, classNam
       }
     ) })
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: `p-4 border rounded-lg flex items-start gap-3 ${typeClasses[type]} ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconClasses[type], children: icons[type] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm", children }),
-    dismissible && onClose && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: iconClasses[type], children: icons[type] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm", children }),
+        dismissible && onClose && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+  if (position !== "relative" && typeof document !== "undefined") {
+    return reactDom.createPortal(alertContent, document.body);
+  }
+  return alertContent;
 }
 Alert.displayName = "Alert";
 var alert_default = Alert;
@@ -2580,12 +2779,12 @@ function TableCell({ children, className = "", align = "left", ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-6 py-4 whitespace-nowrap ${alignClasses[align]} ${className}`, ...props, children });
 }
 function useTable({ data, initialSort, pageSize = 10 }) {
-  const [sortConfig, setSortConfig] = React3.useState(
+  const [sortConfig, setSortConfig] = React5.useState(
     initialSort ? { key: initialSort.key, direction: initialSort.direction } : null
   );
-  const [currentPage, setCurrentPage] = React3.useState(1);
-  const [selectedRows, setSelectedRows] = React3.useState(/* @__PURE__ */ new Set());
-  const sortedData = React3.useMemo(() => {
+  const [currentPage, setCurrentPage] = React5.useState(1);
+  const [selectedRows, setSelectedRows] = React5.useState(/* @__PURE__ */ new Set());
+  const sortedData = React5.useMemo(() => {
     if (!sortConfig) return data;
     const sorted = [...data].sort((a, b) => {
       const aValue = a[sortConfig.key];
@@ -3061,7 +3260,7 @@ function Heading({ children, level = 1, className = "", noMargin = false }) {
     6: "mb-2"
   };
   const margin = noMargin ? "" : marginClasses[level];
-  return React3.createElement(
+  return React5.createElement(
     `h${level}`,
     {
       className: `text-foreground ${levelClasses[level]} ${margin} ${className}`
@@ -3254,7 +3453,7 @@ function PricingTier({
 PricingTier.displayName = "PricingTier";
 var pricing_tier_default = PricingTier;
 function CodeBlock({ code, className = "", showCopy = true }) {
-  const [copied, setCopied] = React3.useState(false);
+  const [copied, setCopied] = React5.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -3391,7 +3590,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({
@@ -3400,8 +3599,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 = {
@@ -3425,7 +3624,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();
@@ -3434,11 +3633,21 @@ function Drawer({
   };
   const panel = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.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
       }
     ),
@@ -3452,7 +3661,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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/60 bg-card/95 backdrop-blur-sm", children: [
@@ -3500,7 +3709,7 @@ function Page({ children, className = "" }) {
 Page.displayName = "Page";
 var page_default = Page;
 function AccordionItem({ title, children, defaultOpen = false }) {
-  const [isOpen, setIsOpen] = React3.useState(defaultOpen);
+  const [isOpen, setIsOpen] = React5.useState(defaultOpen);
   return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "border-b border-border", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -3728,14 +3937,18 @@ function Footer({ sections, copyright, social, className = "" }) {
 Footer.displayName = "Footer";
 var footer_default = Footer;
 function useScrollReset(deps, container) {
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     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;
     };
@@ -3773,11 +3986,11 @@ function LeftNavLayout({
   embedded = false,
   mainContentRef
 }) {
-  const [internalCollapsed, setInternalCollapsed] = React3.useState(false);
-  const [internalMobileMenuOpen, setInternalMobileMenuOpen] = React3.useState(false);
-  const navRef = React3.useRef(null);
-  const scrollPosRef = React3.useRef(0);
-  const internalContentRef = React3.useRef(null);
+  const [internalCollapsed, setInternalCollapsed] = React5.useState(false);
+  const [internalMobileMenuOpen, setInternalMobileMenuOpen] = React5.useState(false);
+  const navRef = React5.useRef(null);
+  const scrollPosRef = React5.useRef(0);
+  const internalContentRef = React5.useRef(null);
   const contentRef = mainContentRef || internalContentRef;
   const collapsed = controlledCollapsed ?? internalCollapsed;
   const setCollapsed = (value) => {
@@ -3797,12 +4010,12 @@ function LeftNavLayout({
   };
   const toggleCollapsed = () => setCollapsed(!collapsed);
   const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (navRef.current) {
       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__ */ jsxRuntime.jsxs("div", { className: `${containerClasses} ${className}`, children: [
     mobileCollapsible && mobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3834,17 +4047,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__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: "Navigation" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(iconsReact.IconChevronRight, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconChevronLeft, { size: 20 })
@@ -3890,15 +4120,15 @@ function LeftNavItem({
   title,
   preventNavigation = false
 }) {
-  const navRef = React3.useRef(null);
-  const [isCollapsed, setIsCollapsed] = React3.useState(() => {
+  const navRef = React5.useRef(null);
+  const [isCollapsed, setIsCollapsed] = React5.useState(() => {
     if (typeof window !== "undefined") {
       const navElement = document.querySelector("nav[data-collapsed]");
       return navElement?.getAttribute("data-collapsed") === "true";
     }
     return false;
   });
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const checkCollapsed = () => {
       const navElement2 = navRef.current?.closest("nav");
       if (navElement2) {
@@ -4001,26 +4231,26 @@ function Code({ children, block = false, variant = "default", className = "" })
 }
 Code.displayName = "Code";
 var code_default = Code;
-var ThemeContext = React3.createContext(void 0);
+var ThemeContext = React5.createContext(void 0);
 function ThemeProvider({
   children,
   defaultTheme = "light",
   storageKey = "hydn-theme",
   themes = ["light", "dark"]
 }) {
-  const [theme, setThemeState] = React3.useState(() => {
+  const [theme, setThemeState] = React5.useState(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem(storageKey);
       return stored && themes.includes(stored) ? stored : defaultTheme;
     }
     return defaultTheme;
   });
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const root = window.document.documentElement;
     root.classList.remove(...themes);
     root.classList.add(theme);
   }, [theme, themes]);
-  const setTheme = React3.useCallback(
+  const setTheme = React5.useCallback(
     (newTheme) => {
       if (themes.includes(newTheme)) {
         localStorage.setItem(storageKey, newTheme);
@@ -4031,7 +4261,7 @@ function ThemeProvider({
     },
     [themes, storageKey]
   );
-  const value = React3.useMemo(
+  const value = React5.useMemo(
     () => ({
       theme,
       setTheme,
@@ -4042,7 +4272,7 @@ function ThemeProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  const context = React3.useContext(ThemeContext);
+  const context = React5.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }