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

package/dist/index.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React2 = require('react');
+var React3 = 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 React2__default = /*#__PURE__*/_interopDefault(React2);
+var React3__default = /*#__PURE__*/_interopDefault(React3);
 
 // src/components/forms/button/button.tsx
 function Button({
@@ -221,9 +221,9 @@ function Checkbox({
 }
 Checkbox.displayName = "Checkbox";
 var checkbox_default = Checkbox;
-var RadioGroupContext = React2.createContext(null);
+var RadioGroupContext = React3.createContext(null);
 var useRadioGroup = () => {
-  const context = React2.useContext(RadioGroupContext);
+  const context = React3.useContext(RadioGroupContext);
   return context;
 };
 function RadioGroup({
@@ -270,37 +270,43 @@ function Radio({
     warning: "border-warning focus:ring-warning"
   };
   const inputId = id || `radio-${value || Math.random().toString(36).slice(2)}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center justify-center relative ${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`, children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `inline-flex items-center justify-center relative ${disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -361,13 +367,13 @@ function MultiSelect({
   size = "md",
   className = ""
 }) {
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const [searchQuery, setSearchQuery] = React2.useState("");
-  const [focusedIndex, setFocusedIndex] = React2.useState(-1);
-  const containerRef = React2.useRef(null);
-  const searchInputRef = React2.useRef(null);
+  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 selectedValues = value || [];
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -380,14 +386,12 @@ function MultiSelect({
     }
     return void 0;
   }, [isOpen]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen && searchInputRef.current) {
       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;
@@ -866,7 +870,7 @@ function FormField({
   validationState = "default"
 }) {
   const effectiveValidationState = error ? "error" : validationState;
-  const childWithValidation = React2.isValidElement(children) ? React2.cloneElement(children, {
+  const childWithValidation = React3.isValidElement(children) ? React3.cloneElement(children, {
     validationState: effectiveValidationState
   }) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { direction: "vertical", spacing: "sm", className, children: [
@@ -891,8 +895,8 @@ function InputGroup({ children, prefix, suffix, className = "" }) {
 InputGroup.displayName = "InputGroup";
 var input_group_default = InputGroup;
 function Calendar({ value, onChange, minDate, maxDate, disabled = false, className = "" }) {
-  const [currentMonth, setCurrentMonth] = React2.useState(value || /* @__PURE__ */ new Date());
-  const [selectedDate, setSelectedDate] = React2.useState(value);
+  const [currentMonth, setCurrentMonth] = React3.useState(value || /* @__PURE__ */ new Date());
+  const [selectedDate, setSelectedDate] = React3.useState(value);
   const getDaysInMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
   };
@@ -1028,14 +1032,14 @@ function DatePicker({
   className = "",
   size = "md"
 }) {
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const [selectedDate, setSelectedDate] = React2.useState(value);
-  const containerRef = React2.useRef(null);
-  const inputRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const [selectedDate, setSelectedDate] = React3.useState(value);
+  const containerRef = React3.useRef(null);
+  const inputRef = React3.useRef(null);
+  React3.useEffect(() => {
     setSelectedDate(value);
   }, [value]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1047,7 +1051,7 @@ function DatePicker({
     }
     return void 0;
   }, [isOpen]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape" && isOpen) {
         setIsOpen(false);
@@ -1171,15 +1175,7 @@ function DatePicker({
         className: "absolute left-0 top-full mt-2 z-50 animate-scaleIn origin-top",
         role: "dialog",
         "aria-label": "Calendar",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          calendar_default,
-          {
-            value: selectedDate,
-            onChange: handleDateSelect,
-            minDate,
-            maxDate
-          }
-        )
+        children: /* @__PURE__ */ jsxRuntime.jsx(calendar_default, { value: selectedDate, onChange: handleDateSelect, minDate, maxDate })
       }
     )
   ] });
@@ -1232,7 +1228,7 @@ function Navbar({
   border = "none",
   disableMobileMenu = false
 }) {
-  const [mobileMenuOpen, setMobileMenuOpen] = React2.useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = React3.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",
@@ -1321,18 +1317,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] = React2.useState(defaultTab || tabs[0]?.id);
-  const [isAnimating, setIsAnimating] = React2.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__default.default.useState(false);
+  React3__default.default.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__ */ jsxRuntime.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] = React3.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",
@@ -1341,7 +1364,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
       },
@@ -1354,8 +1377,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__ */ jsxRuntime.jsx(page_transition_default, { type: "fade", duration: 150, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-6", children: tab.content }) })
       },
       tab.id
     ))
@@ -1363,16 +1385,23 @@ function Tabs({ tabs, defaultTab, className = "", ariaLabel = "Tabs" }) {
 }
 Tabs.displayName = "Tabs";
 var tabs_default = Tabs;
-var DropdownContext = React2.createContext(null);
-function Dropdown({ trigger, children, className = "", align = "start", autoClose = true, size = "md" }) {
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const dropdownRef = React2.useRef(null);
-  const menuRef = React2.useRef(null);
-  const itemsRef = React2.useRef([]);
-  const [activeIndex, setActiveIndex] = React2.useState(-1);
-  const close = React2.useCallback(() => setIsOpen(false), []);
-  const open = React2.useCallback(() => setIsOpen(true), []);
-  React2.useEffect(() => {
+var DropdownContext = React3.createContext(null);
+function Dropdown({
+  trigger,
+  children,
+  className = "",
+  align = "start",
+  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(() => {
     if (!isOpen) return;
     const handleKey = (e) => {
       if (!menuRef.current) return;
@@ -1407,7 +1436,7 @@ function Dropdown({ trigger, children, className = "", align = "start", autoClos
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [isOpen, activeIndex, close]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -1417,7 +1446,7 @@ function Dropdown({ trigger, children, className = "", align = "start", autoClos
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, close]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen) {
       const itemEls = itemsRef.current.filter(Boolean);
       if (itemEls.length) {
@@ -1454,9 +1483,9 @@ function Dropdown({ trigger, children, className = "", align = "start", autoClos
         role: "menu",
         "aria-orientation": "vertical",
         tabIndex: -1,
-        children: React2__default.default.Children.map(children, (child, i) => {
-          if (!React2__default.default.isValidElement(child)) return child;
-          return React2__default.default.cloneElement(child, { __dropdownIndex: i, __registerItem: registerItem, size });
+        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 });
         })
       }
     ) })
@@ -1726,14 +1755,14 @@ function Stepper({
 Stepper.displayName = "Stepper";
 var stepper_default = Stepper;
 function Toast({ message, children, type = "info", onClose, className = "", duration = 5e3 }) {
-  const [isClosing, setIsClosing] = React2.useState(false);
+  const [isClosing, setIsClosing] = React3.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"
   };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (duration > 0) {
       const timer = setTimeout(() => {
         handleClose();
@@ -1772,11 +1801,11 @@ function Tooltip({
   usePortal = false,
   className = ""
 }) {
-  const [showTooltip, setShowTooltip] = React2.useState(false);
-  const [tooltipPosition, setTooltipPosition] = React2.useState({ top: 0, left: 0 });
-  const triggerRef = React2.useRef(null);
+  const [showTooltip, setShowTooltip] = React3.useState(false);
+  const [tooltipPosition, setTooltipPosition] = React3.useState({ top: 0, left: 0 });
+  const triggerRef = React3.useRef(null);
   const isVisible = open || showTooltip;
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (usePortal && isVisible && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       const positions = {
@@ -1895,29 +1924,32 @@ function useOverlay(options) {
     exitDuration = 300,
     unmountOnExit = true
   } = options;
-  const previouslyFocusedRef = React2.useRef(null);
-  const containerRef = React2.useRef(null);
-  const [shouldRender, setShouldRender] = React2.useState(isOpen);
-  const [phase, setPhase] = React2.useState("mount");
-  React2.useLayoutEffect(() => {
+  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) {
       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");
     }
   }, [isOpen, shouldRender, animationFrames]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (phase === "animating-out" && unmountOnExit) {
       const timeout = setTimeout(() => {
         setShouldRender(false);
@@ -1927,7 +1959,7 @@ function useOverlay(options) {
     }
     return void 0;
   }, [phase, exitDuration, unmountOnExit]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen) {
       if (typeof document !== "undefined") {
         if (restoreFocus) previouslyFocusedRef.current = document.activeElement;
@@ -1943,50 +1975,79 @@ function useOverlay(options) {
       }
     };
   }, [isOpen, lockScroll, restoreFocus]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (phase === "visible" && containerRef.current) {
-      containerRef.current.focus?.();
+      const el = containerRef.current;
+      try {
+        el.focus?.({ preventScroll: true });
+      } catch {
+        el.focus?.();
+      }
     }
   }, [phase]);
-  const handleKeyDown = React2.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 = React3.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]);
-  React2.useEffect(() => {
+    },
+    [focusTrap, phase]
+  );
+  React3.useEffect(() => {
     if (focusTrap && phase === "visible") {
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     }
     return void 0;
   }, [phase, focusTrap, handleKeyDown]);
-  const getPhaseClass = React2.useCallback((openClass, closedClass) => phase === "visible" ? openClass : closedClass, [phase]);
+  const getPhaseClass = React3.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__default.default.useEffect(() => {
+  React3__default.default.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -2100,10 +2161,10 @@ function DeleteDialog({
 DeleteDialog.displayName = "DeleteDialog";
 var delete_dialog_default = DeleteDialog;
 function Popover({ trigger, children, content, position = "bottom", className = "" }) {
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const popoverRef = React2.useRef(null);
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const popoverRef = React3.useRef(null);
   const triggerContent = children || trigger;
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const handleClickOutside = (event) => {
       if (popoverRef.current && !popoverRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2519,12 +2580,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] = React2.useState(
+  const [sortConfig, setSortConfig] = React3.useState(
     initialSort ? { key: initialSort.key, direction: initialSort.direction } : null
   );
-  const [currentPage, setCurrentPage] = React2.useState(1);
-  const [selectedRows, setSelectedRows] = React2.useState(/* @__PURE__ */ new Set());
-  const sortedData = React2.useMemo(() => {
+  const [currentPage, setCurrentPage] = React3.useState(1);
+  const [selectedRows, setSelectedRows] = React3.useState(/* @__PURE__ */ new Set());
+  const sortedData = React3.useMemo(() => {
     if (!sortConfig) return data;
     const sorted = [...data].sort((a, b) => {
       const aValue = a[sortConfig.key];
@@ -3000,7 +3061,7 @@ function Heading({ children, level = 1, className = "", noMargin = false }) {
     6: "mb-2"
   };
   const margin = noMargin ? "" : marginClasses[level];
-  return React2.createElement(
+  return React3.createElement(
     `h${level}`,
     {
       className: `text-foreground ${levelClasses[level]} ${margin} ${className}`
@@ -3026,23 +3087,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",
@@ -3056,6 +3107,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",
@@ -3071,12 +3127,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, " "),
@@ -3199,7 +3254,7 @@ function PricingTier({
 PricingTier.displayName = "PricingTier";
 var pricing_tier_default = PricingTier;
 function CodeBlock({ code, className = "", showCopy = true }) {
-  const [copied, setCopied] = React2.useState(false);
+  const [copied, setCopied] = React3.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -3226,88 +3281,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
   });
-  React2.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__ */ jsxRuntime.jsxs(jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("header", { className: "flex items-center justify-end p-3 border-b border-border", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "\u2715" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.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__ */ 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: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold tracking-tight", children: title }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-5 flex flex-col gap-4", children })
         ]
       }
     )
   ] });
+  return portalRoot ? reactDom.createPortal(panel, portalRoot) : panel;
 }
 Drawer.displayName = "Drawer";
 var drawer_default = Drawer;
@@ -3317,7 +3500,7 @@ function Page({ children, className = "" }) {
 Page.displayName = "Page";
 var page_default = Page;
 function AccordionItem({ title, children, defaultOpen = false }) {
-  const [isOpen, setIsOpen] = React2.useState(defaultOpen);
+  const [isOpen, setIsOpen] = React3.useState(defaultOpen);
   return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "border-b border-border", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -3350,65 +3533,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__ */ jsxRuntime.jsx(
-    "section",
-    {
-      className: `${sizeClasses[size]} ${backgroundGradient ? "bg-gradient-to-b from-primary/10 via-primary/5 to-background" : "bg-background"} ${className}`,
-      children: /* @__PURE__ */ jsxRuntime.jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: centered ? "text-center" : "", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-bold mb-4 md:mb-6`, children: title }),
-        description && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
-          primaryAction && /* @__PURE__ */ jsxRuntime.jsx(
-            button_default,
-            {
-              size: "lg",
-              variant: primaryAction.variant || "primary",
-              style: primaryAction.style,
-              onClick: primaryAction.onClick,
-              loading: primaryAction.loading,
-              children: primaryAction.label
-            }
-          ),
-          secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(
-            button_default,
-            {
-              size: "lg",
-              variant: secondaryAction.variant || "neutral",
-              style: secondaryAction.style || "outline",
-              onClick: secondaryAction.onClick,
-              loading: secondaryAction.loading,
-              children: secondaryAction.label
-            }
-          )
-        ] }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8", children })
-      ] }) })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `relative ${sizeClasses[size]} ${variantClasses[variant]} ${className}`, children: [
+    variant === "gradient" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
+    /* @__PURE__ */ jsxRuntime.jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: centered ? "text-center mx-auto max-w-4xl" : "max-w-4xl", children: [
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl font-semibold text-primary mb-4", weight: "semibold", children: subtitle }),
+      /* @__PURE__ */ jsxRuntime.jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-extrabold mb-6 tracking-tight`, children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(text_default, { className: "text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto", children: description }),
+      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
+        primaryAction && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-10", children })
+    ] }) })
+  ] });
 }
 Hero.displayName = "Hero";
 var hero_default = Hero;
@@ -3541,7 +3728,7 @@ function Footer({ sections, copyright, social, className = "" }) {
 Footer.displayName = "Footer";
 var footer_default = Footer;
 function useScrollReset(deps, container) {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     let cancelled = false;
     const maxRaf = 6;
     let rafCount = 0;
@@ -3586,11 +3773,11 @@ function LeftNavLayout({
   embedded = false,
   mainContentRef
 }) {
-  const [internalCollapsed, setInternalCollapsed] = React2.useState(false);
-  const [internalMobileMenuOpen, setInternalMobileMenuOpen] = React2.useState(false);
-  const navRef = React2.useRef(null);
-  const scrollPosRef = React2.useRef(0);
-  const internalContentRef = React2.useRef(null);
+  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 contentRef = mainContentRef || internalContentRef;
   const collapsed = controlledCollapsed ?? internalCollapsed;
   const setCollapsed = (value) => {
@@ -3610,7 +3797,7 @@ function LeftNavLayout({
   };
   const toggleCollapsed = () => setCollapsed(!collapsed);
   const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (navRef.current) {
       navRef.current.scrollTop = scrollPosRef.current;
     }
@@ -3618,7 +3805,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__ */ jsxRuntime.jsxs("div", { className: `${containerClasses} ${className}`, children: [
-    mobileCollapsible && mobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-40 lg:hidden bg-background/80 backdrop-blur-sm", onClick: toggleMobileMenu, "aria-hidden": "true" }),
+    mobileCollapsible && mobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-40 lg:hidden bg-background/80 backdrop-blur-sm",
+        onClick: toggleMobileMenu,
+        "aria-hidden": "true"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
       {
@@ -3696,15 +3890,15 @@ function LeftNavItem({
   title,
   preventNavigation = false
 }) {
-  const navRef = React2.useRef(null);
-  const [isCollapsed, setIsCollapsed] = React2.useState(() => {
+  const navRef = React3.useRef(null);
+  const [isCollapsed, setIsCollapsed] = React3.useState(() => {
     if (typeof window !== "undefined") {
       const navElement = document.querySelector("nav[data-collapsed]");
       return navElement?.getAttribute("data-collapsed") === "true";
     }
     return false;
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const checkCollapsed = () => {
       const navElement2 = navRef.current?.closest("nav");
       if (navElement2) {
@@ -3807,26 +4001,26 @@ function Code({ children, block = false, variant = "default", className = "" })
 }
 Code.displayName = "Code";
 var code_default = Code;
-var ThemeContext = React2.createContext(void 0);
+var ThemeContext = React3.createContext(void 0);
 function ThemeProvider({
   children,
   defaultTheme = "light",
   storageKey = "hydn-theme",
   themes = ["light", "dark"]
 }) {
-  const [theme, setThemeState] = React2.useState(() => {
+  const [theme, setThemeState] = React3.useState(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem(storageKey);
       return stored && themes.includes(stored) ? stored : defaultTheme;
     }
     return defaultTheme;
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const root = window.document.documentElement;
     root.classList.remove(...themes);
     root.classList.add(theme);
   }, [theme, themes]);
-  const setTheme = React2.useCallback(
+  const setTheme = React3.useCallback(
     (newTheme) => {
       if (themes.includes(newTheme)) {
         localStorage.setItem(storageKey, newTheme);
@@ -3837,7 +4031,7 @@ function ThemeProvider({
     },
     [themes, storageKey]
   );
-  const value = React2.useMemo(
+  const value = React3.useMemo(
     () => ({
       theme,
       setTheme,
@@ -3848,7 +4042,7 @@ function ThemeProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  const context = React2.useContext(ThemeContext);
+  const context = React3.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -3859,39 +4053,53 @@ function ColorModeToggle({ className = "" }) {
   const toggleTheme = () => {
     setTheme(theme === "light" ? "dark" : "light");
   };
-  const getIcon = () => {
-    if (theme === "dark") {
-      return /* @__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: "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__ */ 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: "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__ */ jsxRuntime.jsx(
+  const isDark = theme === "dark";
+  const label = `Switch to ${theme === "light" ? "dark" : "light"} theme`;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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"
+              }
+            )
+          }
+        )
+      ]
     }
   );
 }
@@ -3908,8 +4116,12 @@ exports.Button = button_default;
 exports.ButtonGroup = button_group_default;
 exports.Calendar = calendar_default;
 exports.Card = card_default;
+exports.CardActions = card_actions_default;
+exports.CardBody = card_body_default;
+exports.CardFigure = card_figure_default;
 exports.CardFooter = card_footer_default;
 exports.CardHeader = card_header_default;
+exports.CardTitle = card_title_default;
 exports.Checkbox = checkbox_default;
 exports.Chip = chip_default;
 exports.Code = code_default;