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

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React2, { createContext, useState, useRef, useEffect, isValidElement, cloneElement, useCallback, useMemo, createElement, useContext, useLayoutEffect } from 'react';
+import React3, { createContext, useState, useRef, useEffect, isValidElement, cloneElement, useCallback, useMemo, createElement, useContext, useLayoutEffect } 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';
@@ -264,37 +264,43 @@ function Radio({
     warning: "border-warning focus:ring-warning"
   };
   const inputId = id || `radio-${value || Math.random().toString(36).slice(2)}`;
-  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center justify-center relative ${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "radio",
-        checked: isChecked,
-        onChange: handleChange,
-        disabled,
-        "aria-label": ariaLabel,
-        "aria-invalid": validationState === "error",
-        id: inputId,
-        name,
-        value,
-        className: "peer sr-only"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-hidden": "true",
-        onClick: () => !disabled && document.getElementById(inputId)?.click(),
-        className: `w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200 ease-out bg-background shadow-sm
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `inline-flex items-center justify-center relative ${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            checked: isChecked,
+            onChange: handleChange,
+            disabled,
+            "aria-label": ariaLabel,
+            "aria-invalid": validationState === "error",
+            id: inputId,
+            name,
+            value,
+            className: "peer sr-only"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            onClick: () => !disabled && document.getElementById(inputId)?.click(),
+            className: `w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200 ease-out bg-background shadow-sm
         before:content-[''] before:w-2.5 before:h-2.5 before:rounded-full before:scale-0 before:transition-transform before:duration-200 before:ease-out before:bg-primary
         peer-checked:before:scale-100 peer-checked:border-primary
         peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-ring
         peer-disabled:opacity-50 peer-disabled:cursor-not-allowed
         peer-hover:border-primary/60 peer-active:scale-95
         ${validationClasses[validationState]} ${className}`
-      }
-    )
-  ] });
+          }
+        )
+      ]
+    }
+  );
 }
 Radio.displayName = "Radio";
 var radio_default = Radio;
@@ -379,9 +385,7 @@ function MultiSelect({
       searchInputRef.current.focus();
     }
   }, [isOpen]);
-  const filteredOptions = options.filter(
-    (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
   const handleToggleOption = (optionValue) => {
     const isSelected = selectedValues.includes(optionValue);
     let newValues;
@@ -1165,15 +1169,7 @@ function DatePicker({
         className: "absolute left-0 top-full mt-2 z-50 animate-scaleIn origin-top",
         role: "dialog",
         "aria-label": "Calendar",
-        children: /* @__PURE__ */ jsx(
-          calendar_default,
-          {
-            value: selectedDate,
-            onChange: handleDateSelect,
-            minDate,
-            maxDate
-          }
-        )
+        children: /* @__PURE__ */ jsx(calendar_default, { value: selectedDate, onChange: handleDateSelect, minDate, maxDate })
       }
     )
   ] });
@@ -1315,18 +1311,45 @@ function NavbarLink({ href, children, external = false, className = "", end = fa
 }
 NavbarLink.displayName = "NavbarLink";
 var navbar_link_default = NavbarLink;
-function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
-  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const handleTabChange = (tabId) => {
-    if (tabId !== activeTab) {
-      setIsAnimating(true);
-      setTimeout(() => {
-        setActiveTab(tabId);
-        setIsAnimating(false);
-      }, 150);
+var PageTransition = ({
+  children,
+  duration = 300,
+  type = "fade",
+  className = ""
+}) => {
+  const [isVisible, setIsVisible] = React3.useState(false);
+  React3.useEffect(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setIsVisible(true);
+      });
+    });
+  }, []);
+  const getAnimationStyles = () => {
+    if (type === "none") return "";
+    const baseClasses = "transition-all ease-out";
+    const durationClass = `duration-[${duration}ms]`;
+    if (!isVisible) {
+      switch (type) {
+        case "fade":
+          return `${baseClasses} ${durationClass} opacity-0 translate-y-1`;
+        case "slide":
+          return `${baseClasses} ${durationClass} opacity-0 translate-y-3`;
+        case "scale":
+          return `${baseClasses} ${durationClass} opacity-0 scale-[0.99]`;
+        default:
+          return `${baseClasses} ${durationClass} opacity-0 translate-y-1`;
+      }
+    } else {
+      return `${baseClasses} ${durationClass} opacity-100 translate-y-0 scale-100`;
     }
   };
+  return /* @__PURE__ */ jsx("div", { className: `${getAnimationStyles()} ${className}`.trim(), children });
+};
+PageTransition.displayName = "PageTransition";
+var page_transition_default = PageTransition;
+function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
+  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": ariaLabel, className: "flex border-b-2 border-border/50", children: tabs.map((tab) => /* @__PURE__ */ jsx(
       "button",
@@ -1335,7 +1358,7 @@ function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
         "aria-selected": activeTab === tab.id,
         "aria-controls": `panel-${tab.id}`,
         id: `tab-${tab.id}`,
-        onClick: () => handleTabChange(tab.id),
+        onClick: () => setActiveTab(tab.id),
         className: `px-4 py-3 font-medium cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 relative ${activeTab === tab.id ? "text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-t after:transition-all after:duration-200" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
         children: tab.label
       },
@@ -1348,8 +1371,7 @@ function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
         id: `panel-${tab.id}`,
         "aria-labelledby": `tab-${tab.id}`,
         hidden: activeTab !== tab.id,
-        className: `pt-6 transition-all duration-200 ${activeTab === tab.id && !isAnimating ? "animate-fadeIn opacity-100" : "opacity-0"}`,
-        children: tab.content
+        children: activeTab === tab.id && /* @__PURE__ */ jsx(page_transition_default, { type: "fade", duration: 150, children: /* @__PURE__ */ jsx("div", { className: "pt-6", children: tab.content }) })
       },
       tab.id
     ))
@@ -1358,7 +1380,14 @@ function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
 Tabs.displayName = "Tabs";
 var tabs_default = Tabs;
 var DropdownContext = createContext(null);
-function Dropdown({ trigger, children, className = "", align = "start", autoClose = true, size = "md" }) {
+function Dropdown({
+  trigger,
+  children,
+  className = "",
+  align = "start",
+  autoClose = true,
+  size = "md"
+}) {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
   const menuRef = useRef(null);
@@ -1448,9 +1477,9 @@ function Dropdown({ trigger, children, className = "", align = "start", autoClos
         role: "menu",
         "aria-orientation": "vertical",
         tabIndex: -1,
-        children: React2.Children.map(children, (child, i) => {
-          if (!React2.isValidElement(child)) return child;
-          return React2.cloneElement(child, { __dropdownIndex: i, __registerItem: registerItem, size });
+        children: React3.Children.map(children, (child, i) => {
+          if (!React3.isValidElement(child)) return child;
+          return React3.cloneElement(child, { __dropdownIndex: i, __registerItem: registerItem, size });
         })
       }
     ) })
@@ -1896,17 +1925,20 @@ function useOverlay(options) {
   useLayoutEffect(() => {
     if (isOpen) {
       setShouldRender(true);
-      setPhase("animating-in");
-      let frame = 0;
-      const step = () => {
-        frame += 1;
-        if (frame >= animationFrames) {
-          setPhase("visible");
-        } else {
-          requestAnimationFrame(step);
-        }
-      };
-      requestAnimationFrame(step);
+      setPhase("mount");
+      requestAnimationFrame(() => {
+        setPhase("animating-in");
+        let frame = 0;
+        const step = () => {
+          frame += 1;
+          if (frame >= animationFrames) {
+            setPhase("visible");
+          } else {
+            requestAnimationFrame(step);
+          }
+        };
+        requestAnimationFrame(step);
+      });
     } else if (!isOpen && shouldRender) {
       setPhase("animating-out");
     }
@@ -1939,28 +1971,36 @@ function useOverlay(options) {
   }, [isOpen, lockScroll, restoreFocus]);
   useEffect(() => {
     if (phase === "visible" && containerRef.current) {
-      containerRef.current.focus?.();
+      const el = containerRef.current;
+      try {
+        el.focus?.({ preventScroll: true });
+      } catch {
+        el.focus?.();
+      }
     }
   }, [phase]);
-  const handleKeyDown = useCallback((e) => {
-    if (!focusTrap || phase !== "visible" || e.key !== "Tab" || !containerRef.current) return;
-    const node = containerRef.current;
-    const focusable = node.querySelectorAll(
-      'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
-    );
-    if (!focusable.length) return;
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (e.shiftKey) {
-      if (document.activeElement === first || document.activeElement === node) {
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!focusTrap || phase !== "visible" || e.key !== "Tab" || !containerRef.current) return;
+      const node = containerRef.current;
+      const focusable = node.querySelectorAll(
+        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first || document.activeElement === node) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (document.activeElement === last) {
         e.preventDefault();
-        last.focus();
+        first.focus();
       }
-    } else if (document.activeElement === last) {
-      e.preventDefault();
-      first.focus();
-    }
-  }, [focusTrap, phase]);
+    },
+    [focusTrap, phase]
+  );
   useEffect(() => {
     if (focusTrap && phase === "visible") {
       document.addEventListener("keydown", handleKeyDown);
@@ -1968,19 +2008,40 @@ function useOverlay(options) {
     }
     return void 0;
   }, [phase, focusTrap, handleKeyDown]);
-  const getPhaseClass = useCallback((openClass, closedClass) => phase === "visible" ? openClass : closedClass, [phase]);
+  const getPhaseClass = useCallback(
+    (openClass, closedClass) => {
+      return phase === "animating-in" || phase === "visible" ? openClass : closedClass;
+    },
+    [phase]
+  );
   return { phase, shouldRender, ref: containerRef, getPhaseClass };
 }
 var useOverlay_default = useOverlay;
-function Modal({ isOpen, onClose, children, title, description, content, actions, className = "", ariaLabel, align = "center" }) {
-  const { phase, shouldRender, ref: dialogRef, getPhaseClass } = useOverlay_default({
+function Modal({
+  isOpen,
+  onClose,
+  children,
+  title,
+  description,
+  content,
+  actions,
+  className = "",
+  ariaLabel,
+  align = "center"
+}) {
+  const {
+    phase,
+    shouldRender,
+    ref: dialogRef,
+    getPhaseClass
+  } = useOverlay_default({
     isOpen,
     focusTrap: true,
     lockScroll: true,
     animationFrames: 2,
     restoreFocus: true
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -3020,23 +3081,13 @@ function Card({
   className = "",
   variant = "default",
   size = "md",
+  width = "auto",
   hoverable = false,
   imagePosition = "top",
   centered = false,
   compact = false,
-  interactive,
-  highlighted,
-  maxWidth,
-  padding,
   ...props
 }) {
-  if (interactive && !hoverable) hoverable = true;
-  if (highlighted) variant = "filled";
-  if (maxWidth) {
-    if (!size || size === "md") {
-      size = maxWidth === "2xl" ? "xl" : maxWidth;
-    }
-  }
   const variantClasses = {
     default: "bg-card text-card-foreground border border-border shadow-md",
     bordered: "bg-card text-card-foreground border-2 border-border",
@@ -3050,6 +3101,11 @@ function Card({
     lg: "w-[28rem]",
     xl: "w-[32rem]"
   };
+  const widthClasses = {
+    auto: size !== "md" ? sizeClasses[size] : "max-w-full",
+    full: "w-full",
+    fit: "w-fit"
+  };
   const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer" : "transition-shadow duration-200";
   const imagePositionClasses = {
     top: "flex-col",
@@ -3065,12 +3121,11 @@ function Card({
         rounded-2xl
         overflow-hidden
         ${variantClasses[variant]}
-        ${size !== "md" ? sizeClasses[size] : "max-w-full"}
+        ${widthClasses[width]}
         ${hoverClasses}
         ${imagePositionClasses[imagePosition]}
         ${centerClasses}
         ${compact ? "p-4" : ""}
-        ${padding === "none" ? "" : ""}
         ${imagePosition === "side" ? "flex" : "flex"}
         ${className}
       `.trim().replace(/\s+/g, " "),
@@ -3220,88 +3275,216 @@ function CodeBlock({ code, className = "", showCopy = true }) {
 }
 CodeBlock.displayName = "CodeBlock";
 var code_block_default = CodeBlock;
+function CardBody({ children, padding = "md", className = "" }) {
+  const paddingClasses = {
+    none: "p-0",
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+    xl: "p-10"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        card-body
+        flex flex-col gap-2
+        ${paddingClasses[padding]}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardBody.displayName = "CardBody";
+var card_body_default = CardBody;
+function CardTitle({ children, className = "", as: Component = "h2", size = "md" }) {
+  const sizeClasses = {
+    sm: "text-base font-semibold",
+    md: "text-lg font-bold",
+    lg: "text-xl font-bold",
+    xl: "text-2xl font-bold"
+  };
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: `
+        card-title
+        ${sizeClasses[size]}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardTitle.displayName = "CardTitle";
+var card_title_default = CardTitle;
+function CardActions({ children, className = "", align = "end", direction = "row" }) {
+  const alignClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    stretch: "justify-stretch"
+  };
+  const directionClasses = {
+    row: "flex-row",
+    column: "flex-col"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        flex gap-2 px-6 pb-6 pt-2
+        ${directionClasses[direction]}
+        ${alignClasses[align]}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardActions.displayName = "CardActions";
+var card_actions_default = CardActions;
+function CardFigure({ children, className = "", aspectRatio = "auto" }) {
+  const aspectRatioClasses = {
+    square: "aspect-square",
+    video: "aspect-video",
+    wide: "aspect-[21/9]",
+    portrait: "aspect-[3/4]",
+    auto: ""
+  };
+  return /* @__PURE__ */ jsx(
+    "figure",
+    {
+      className: `
+        card-figure
+        relative overflow-hidden
+        ${aspectRatioClasses[aspectRatio]}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardFigure.displayName = "CardFigure";
+var card_figure_default = CardFigure;
 function Divider({ orientation = "horizontal", className = "", ...props }) {
   const orientationClasses = orientation === "horizontal" ? "w-full h-px" : "h-full w-px";
   return /* @__PURE__ */ jsx("hr", { className: `border-0 bg-border ${orientationClasses} ${className}`, "aria-orientation": orientation, ...props });
 }
 Divider.displayName = "Divider";
 var divider_default = Divider;
-function Drawer({ isOpen, onClose, children, position = "right", className = "", contentAlign = "start", centerVertical = false }) {
-  const { phase, shouldRender, ref: panelRef, getPhaseClass } = useOverlay_default({
+function Drawer({
+  isOpen,
+  onClose,
+  children,
+  position = "right",
+  className = "",
+  title,
+  size = "md",
+  closeOnEscape = true,
+  closeOnOutside = true,
+  unmountOnExit = true,
+  portalRoot = typeof document !== "undefined" ? document.body : null,
+  noAnimation = false
+}) {
+  const { phase, shouldRender, ref, getPhaseClass } = useOverlay_default({
     isOpen,
-    focusTrap: true,
     lockScroll: true,
     restoreFocus: true,
-    animationFrames: 2
+    focusTrap: true,
+    unmountOnExit,
+    exitDuration: noAnimation ? 0 : 300,
+    animationFrames: noAnimation ? 0 : 2
   });
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleEscape = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, onClose]);
   if (!shouldRender) return null;
-  const positionClasses = {
-    left: "left-0 top-0 h-full w-80",
-    right: "right-0 top-0 h-full w-80",
-    top: "top-0 left-0 w-full h-80",
-    bottom: "bottom-0 left-0 w-full h-80"
+  const sizeClasses = {
+    sm: "w-72",
+    md: "w-96",
+    lg: "w-[32rem]",
+    xl: "w-[40rem]",
+    full: "w-full max-w-2xl"
   };
-  const offscreenTransform = {
+  const edgeClasses = {
+    left: "left-0 top-0 bottom-0",
+    right: "right-0 top-0 bottom-0",
+    top: "top-0 left-0 right-0 h-96",
+    bottom: "bottom-0 left-0 right-0 h-96"
+  };
+  const closedTransform = {
     left: "-translate-x-full",
     right: "translate-x-full",
     top: "-translate-y-full",
     bottom: "translate-y-full"
-  }[position];
-  const transformClass = getPhaseClass("translate-x-0 translate-y-0", offscreenTransform);
-  const overlayOpacity = getPhaseClass("opacity-100", "opacity-0");
-  const panelOpacity = getPhaseClass("opacity-100", "opacity-0");
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  };
+  const openTransform = "translate-x-0 translate-y-0";
+  const panelTransform = noAnimation ? "" : getPhaseClass(openTransform, closedTransform[position]);
+  const overlayOpacity = noAnimation ? "" : getPhaseClass("opacity-100", "opacity-0");
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && closeOnEscape) {
+      e.stopPropagation();
+      onClose();
+    }
+  };
+  const panel = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: `fixed inset-0 bg-black/50 backdrop-blur-sm z-40 transition-opacity duration-300 ease-out will-change-opacity ${overlayOpacity}`,
-        onClick: onClose,
+        className: `fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ${overlayOpacity}`,
         "aria-hidden": "true",
+        onClick: () => closeOnOutside && onClose(),
         "data-phase": phase
       }
     ),
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: panelRef,
-        className: `fixed bg-card text-card-foreground border border-border shadow-2xl z-50 flex flex-col ${positionClasses[position]} transform ${transformClass} ${panelOpacity} will-change-transform will-change-opacity transition-[transform,opacity] duration-300 ease-[cubic-bezier(.25,.8,.25,1)] focus:outline-none ${className}`,
+        ref,
         role: "dialog",
         "aria-modal": "true",
-        "data-position": position,
-        "data-phase": phase,
+        "aria-label": title || "Drawer",
         tabIndex: -1,
-        onTransitionEnd: () => {
-        },
+        "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}`,
+        onKeyDown: handleKeyDown,
         children: [
-          /* @__PURE__ */ jsx("header", { className: "flex items-center justify-end p-3 border-b border-border", children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onClose,
-              "aria-label": "Close drawer",
-              className: "w-8 h-8 inline-flex items-center justify-center rounded hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring",
-              type: "button",
-              children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: "\u2715" })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            "section",
-            {
-              className: `flex-1 overflow-y-auto px-3 py-3 transition-opacity duration-200 ${panelOpacity} flex flex-col ${contentAlign === "center" ? "items-center" : contentAlign === "end" ? "items-end" : "items-start"} space-y-4 ${centerVertical ? "justify-center" : ""}`,
-              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: [
+            /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight", children: title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close drawer",
+                onClick: onClose,
+                className: "w-8 h-8 inline-flex items-center justify-center rounded-md hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring",
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-5 flex flex-col gap-4", children })
         ]
       }
     )
   ] });
+  return portalRoot ? createPortal(panel, portalRoot) : panel;
 }
 Drawer.displayName = "Drawer";
 var drawer_default = Drawer;
@@ -3344,65 +3527,69 @@ Accordion.displayName = "Accordion";
 var accordion_default = Accordion;
 function Hero({
   title,
+  subtitle,
   description,
   primaryAction,
   secondaryAction,
   children,
   className = "",
-  backgroundGradient = true,
+  variant = "gradient",
   centered = true,
   size = "lg"
 }) {
   const sizeClasses = {
-    sm: "py-12",
-    md: "py-16",
-    lg: "py-20 md:py-24"
+    sm: "py-12 md:py-16",
+    md: "py-16 md:py-20",
+    lg: "py-20 md:py-28"
   };
   const titleSizes = {
     sm: "text-3xl md:text-4xl",
     md: "text-4xl md:text-5xl",
-    lg: "text-4xl md:text-5xl lg:text-6xl"
+    lg: "text-5xl md:text-6xl lg:text-7xl"
   };
-  const descriptionSizes = {
-    sm: "text-base md:text-lg",
-    md: "text-lg md:text-xl",
-    lg: "text-xl md:text-2xl"
+  const variantClasses = {
+    gradient: "bg-gradient-to-b from-primary/10 via-primary/5 to-background",
+    solid: "bg-muted/30",
+    minimal: "bg-background"
   };
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      className: `${sizeClasses[size]} ${backgroundGradient ? "bg-gradient-to-b from-primary/10 via-primary/5 to-background" : "bg-background"} ${className}`,
-      children: /* @__PURE__ */ jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxs("div", { className: centered ? "text-center" : "", children: [
-        /* @__PURE__ */ jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-bold mb-4 md:mb-6`, children: title }),
-        description && /* @__PURE__ */ jsx(text_default, { className: `${descriptionSizes[size]} mb-6 md:mb-8 ${centered ? "max-w-3xl mx-auto" : "max-w-3xl"}`, children: description }),
-        (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
-          primaryAction && /* @__PURE__ */ jsx(
-            button_default,
-            {
-              size: "lg",
-              variant: primaryAction.variant || "primary",
-              style: primaryAction.style,
-              onClick: primaryAction.onClick,
-              loading: primaryAction.loading,
-              children: primaryAction.label
-            }
-          ),
-          secondaryAction && /* @__PURE__ */ jsx(
-            button_default,
-            {
-              size: "lg",
-              variant: secondaryAction.variant || "neutral",
-              style: secondaryAction.style || "outline",
-              onClick: secondaryAction.onClick,
-              loading: secondaryAction.loading,
-              children: secondaryAction.label
-            }
-          )
-        ] }),
-        children && /* @__PURE__ */ jsx("div", { className: "mt-8", children })
-      ] }) })
-    }
-  );
+  return /* @__PURE__ */ jsxs("section", { className: `relative ${sizeClasses[size]} ${variantClasses[variant]} ${className}`, children: [
+    variant === "gradient" && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
+    /* @__PURE__ */ jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxs("div", { className: centered ? "text-center mx-auto max-w-4xl" : "max-w-4xl", children: [
+      subtitle && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl font-semibold text-primary mb-4", weight: "semibold", children: subtitle }),
+      /* @__PURE__ */ jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-extrabold mb-6 tracking-tight`, children: title }),
+      description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto", children: description }),
+      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
+        primaryAction && /* @__PURE__ */ jsx(
+          button_default,
+          {
+            size: "lg",
+            variant: primaryAction.variant || "primary",
+            style: primaryAction.style,
+            onClick: primaryAction.onClick,
+            loading: primaryAction.loading,
+            icon: primaryAction.icon,
+            className: "shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all",
+            children: primaryAction.label
+          }
+        ),
+        secondaryAction && /* @__PURE__ */ jsx(
+          button_default,
+          {
+            size: "lg",
+            variant: secondaryAction.variant || "neutral",
+            style: secondaryAction.style || "outline",
+            onClick: secondaryAction.onClick,
+            loading: secondaryAction.loading,
+            icon: secondaryAction.icon,
+            className: "hover:shadow-md transition-all",
+            children: secondaryAction.label
+          }
+        )
+      ] }),
+      children && /* @__PURE__ */ jsx("div", { className: "mt-10", children })
+    ] }) })
+  ] });
 }
 Hero.displayName = "Hero";
 var hero_default = Hero;
@@ -3612,7 +3799,14 @@ function LeftNavLayout({
   useScrollReset_default([children], contentRef.current);
   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("div", { className: "fixed inset-0 z-40 lg:hidden bg-background/80 backdrop-blur-sm", onClick: toggleMobileMenu, "aria-hidden": "true" }),
+    mobileCollapsible && mobileMenuOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-40 lg:hidden bg-background/80 backdrop-blur-sm",
+        onClick: toggleMobileMenu,
+        "aria-hidden": "true"
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "aside",
       {
@@ -3853,45 +4047,59 @@ function ColorModeToggle({ className = "" }) {
   const toggleTheme = () => {
     setTheme(theme === "light" ? "dark" : "light");
   };
-  const getIcon = () => {
-    if (theme === "dark") {
-      return /* @__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: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-        }
-      ) });
-    }
-    return /* @__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: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-      }
-    ) });
-  };
-  const getLabel = () => {
-    return `Switch to ${theme === "light" ? "dark" : "light"} theme`;
-  };
-  return /* @__PURE__ */ jsx(
+  const isDark = theme === "dark";
+  const label = `Switch to ${theme === "light" ? "dark" : "light"} theme`;
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: toggleTheme,
-      className: `p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer ${className}`,
-      "aria-label": getLabel(),
-      title: getLabel(),
-      children: getIcon()
+      className: `relative p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer ${className}`,
+      "aria-label": label,
+      title: label,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: `w-5 h-5 absolute inset-0 m-auto transition-all duration-300 ${isDark ? "rotate-90 scale-0 opacity-0" : "rotate-0 scale-100 opacity-100"}`,
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: `w-5 h-5 transition-all duration-300 ${isDark ? "rotate-0 scale-100 opacity-100" : "-rotate-90 scale-0 opacity-0"}`,
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+              }
+            )
+          }
+        )
+      ]
     }
   );
 }
 ColorModeToggle.displayName = "ColorModeToggle";
 var color_mode_toggle_default = ColorModeToggle;
 
-export { accordion_default as Accordion, AccordionItem, alert_default as Alert, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, calendar_default as Calendar, card_default as Card, card_footer_default as CardFooter, card_header_default as CardHeader, checkbox_default as Checkbox, chip_default as Chip, code_default as Code, code_block_default as CodeBlock, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, empty_state_default as EmptyState, feature_section_default as FeatureSection, footer_default as Footer, form_field_default as FormField, grid_default as Grid, heading_default as Heading, hero_default as Hero, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, List, ListItem, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, page_default as Page, pagination_default as Pagination, popover_default as Popover, pricing_table_default as PricingTable, pricing_tier_default as PricingTier, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, useTable, useTheme };
+export { accordion_default as Accordion, AccordionItem, alert_default as Alert, avatar_default as Avatar, badge_default as Badge, breadcrumbs_default as Breadcrumbs, button_default as Button, button_group_default as ButtonGroup, calendar_default as Calendar, card_default as Card, card_actions_default as CardActions, card_body_default as CardBody, card_figure_default as CardFigure, card_footer_default as CardFooter, card_header_default as CardHeader, card_title_default as CardTitle, checkbox_default as Checkbox, chip_default as Chip, code_default as Code, code_block_default as CodeBlock, color_mode_toggle_default as ColorModeToggle, container_default as Container, data_table_default as DataTable, date_picker_default as DatePicker, delete_dialog_default as DeleteDialog, dialog_default as Dialog, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, empty_state_default as EmptyState, feature_section_default as FeatureSection, footer_default as Footer, form_field_default as FormField, grid_default as Grid, heading_default as Heading, hero_default as Hero, input_default as Input, input_group_default as InputGroup, left_nav_item_default as LeftNavItem, left_nav_layout_default as LeftNavLayout, left_nav_section_default as LeftNavSection, link_default as Link, List, ListItem, modal_default as Modal, multi_select_default as MultiSelect, nav_default as Nav, navbar_default as Navbar, navbar_brand_default as NavbarBrand, navbar_link_default as NavbarLink, page_default as Page, pagination_default as Pagination, popover_default as Popover, pricing_table_default as PricingTable, pricing_tier_default as PricingTier, progress_bar_default as ProgressBar, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, select_item_default as SelectItem, sidebar_default as Sidebar, skeleton_default as Skeleton, slider_default as Slider, spinner_default as Spinner, stack_default as Stack, status_label_default as StatusLabel, stepper_default as Stepper, switch_default as Switch, Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow, tabs_default as Tabs, text_default as Text, textarea_default as Textarea, ThemeProvider, timeline_default as Timeline, TimelineItem, toast_default as Toast, tooltip_default as Tooltip, useTable, useTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map