@raxrai/stylelab-ui 0.3.2 → 0.4.0

package/dist/index.mjs

@@ -18,13 +18,13 @@ import {
 // lib/theme-resolver.ts
 var themeMap = {
   minimal: {
-    button: { primary: "bg-zinc-900 text-white border border-zinc-200 transition-colors duration-200 hover:bg-zinc-800 hover:border-zinc-300 hover:shadow-md", secondary: "bg-transparent border border-zinc-200 text-zinc-900 hover:bg-zinc-100", ghost: "text-zinc-700 hover:bg-zinc-100" },
+    button: { primary: "bg-zinc-900 text-white border border-zinc-200 transition-colors duration-200 hover:bg-zinc-800 hover:border-zinc-300 hover:shadow-md", secondary: "bg-transparent border border-zinc-200 text-zinc-900 hover:bg-zinc-100", ghost: "text-inherit hover:bg-zinc-100" },
     input: { default: "border border-zinc-200 text-zinc-900 placeholder:text-zinc-400 focus:ring-1 focus:ring-zinc-400 focus:border-zinc-400" },
     toggle: { default: "bg-zinc-200 data-[state=on]:bg-zinc-900" },
     badge: { default: "bg-zinc-100 text-zinc-700 border border-zinc-200" },
     slider: { default: "bg-zinc-200 [&_.slider-thumb]:bg-zinc-900" },
     tabs: { default: "border-b border-zinc-200", triggerActive: "border-zinc-900 font-semibold", triggerInactive: "opacity-70" },
-    card: { default: "bg-white text-zinc-900 border border-zinc-200 shadow-none" },
+    card: { default: "bg-white border border-zinc-200 shadow-none" },
     bento: { default: "gap-4" },
     navbar: { default: "bg-white text-zinc-900 border-b border-zinc-200" },
     sidebar: { default: "bg-white text-zinc-900 border-r border-zinc-200" },
@@ -47,13 +47,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-zinc-200 text-zinc-900" }
   },
   night: {
-    button: { primary: "bg-white text-zinc-950 border border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition-colors duration-200 hover:bg-zinc-100 hover:shadow-md hover:border-white/20", secondary: "bg-zinc-900 border border-white/10 text-white hover:bg-zinc-800", ghost: "text-zinc-300 hover:bg-white/5" },
+    button: { primary: "bg-white text-zinc-950 border border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition-colors duration-200 hover:bg-zinc-100 hover:shadow-md hover:border-white/20", secondary: "bg-zinc-900 border border-white/10 text-white hover:bg-zinc-800", ghost: "text-inherit hover:bg-white/5" },
     input: { default: "bg-zinc-900 text-zinc-100 border border-white/10 placeholder:text-zinc-500 focus:ring-1 focus:ring-white/20 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
     toggle: { default: "bg-zinc-800 data-[state=on]:bg-white shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
     badge: { default: "bg-zinc-800 text-zinc-300 border border-white/10" },
     slider: { default: "bg-zinc-800 [&_.slider-thumb]:bg-white shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
     tabs: { default: "border-b border-white/10", triggerActive: "border-white font-semibold", triggerInactive: "opacity-70" },
-    card: { default: "bg-zinc-950 text-zinc-100 border border-white/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
+    card: { default: "bg-zinc-950 border border-white/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]" },
     bento: { default: "gap-4" },
     navbar: { default: "bg-zinc-950 text-zinc-100 border-b border-white/10" },
     sidebar: { default: "bg-zinc-950 text-zinc-100 border-r border-white/10" },
@@ -76,13 +76,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-white/20 text-zinc-100" }
   },
   glass: {
-    button: { primary: "rounded-xl bg-white/70 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/80 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", secondary: "rounded-xl bg-white/50 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/60 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", ghost: "rounded-xl text-slate-700 backdrop-blur-xl transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/40 hover:shadow-glass-soft hover:border hover:border-white/60" },
+    button: { primary: "rounded-xl bg-white/70 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/80 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", secondary: "rounded-xl bg-white/50 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-soft transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/60 hover:border-white/80 hover:shadow-glass-button-hover active:translate-y-0 active:shadow-glass-soft", ghost: "rounded-xl text-inherit backdrop-blur-xl transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:bg-white/40 hover:shadow-glass-soft hover:border hover:border-white/60" },
     input: { default: "rounded-xl bg-white/50 backdrop-blur-2xl border border-slate-200/80 text-slate-800 shadow-glass-soft placeholder:text-slate-500 focus:ring-2 focus:ring-slate-300/50 focus:border-slate-300" },
     toggle: { default: "rounded-full bg-white/50 data-[state=on]:bg-white/80 backdrop-blur-2xl border border-white/60 shadow-glass-soft" },
     badge: { default: "rounded-xl bg-white/60 backdrop-blur-2xl text-slate-700 border border-white/60 shadow-glass-soft" },
     slider: { default: "rounded-full bg-white/50 [&_.slider-thumb]:bg-white [&_.slider-thumb]:border-slate-200 [&_.slider-thumb]:shadow-glass-soft backdrop-blur-2xl border border-white/60 shadow-glass-soft" },
     tabs: { default: "border-b border-slate-200/60", triggerActive: "border-slate-700 font-semibold", triggerInactive: "opacity-70" },
-    card: { default: "rounded-2xl bg-white/60 backdrop-blur-2xl border border-white/60 text-slate-800 shadow-glass-lift" },
+    card: { default: "rounded-2xl bg-white/60 backdrop-blur-2xl border border-white/60 shadow-glass-lift" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-none bg-white/50 backdrop-blur-2xl border-b border-white/60 text-slate-800 shadow-glass-soft" },
     sidebar: { default: "rounded-none bg-white/50 backdrop-blur-2xl border-r border-white/60 text-slate-800 shadow-glass-soft" },
@@ -105,13 +105,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-slate-200/60 text-slate-800" }
   },
   neubrutal: {
-    button: { primary: "rounded-none bg-[#FFD600] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]", secondary: "rounded-none bg-[#FF5733] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1", ghost: "rounded-none border-4 border-transparent hover:border-black hover:bg-zinc-100 text-black" },
+    button: { primary: "rounded-none bg-[#FFD600] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]", secondary: "rounded-none bg-[#FF5733] text-black border-4 border-black shadow-neubrutal hover:translate-x-1 hover:translate-y-1", ghost: "rounded-none text-inherit border-4 border-transparent hover:border-black hover:bg-zinc-100" },
     input: { default: "rounded-none border-4 border-black text-black placeholder:text-zinc-600 focus:ring-4 focus:ring-black/20 bg-white" },
     toggle: { default: "rounded-none border-4 border-black bg-white data-[state=on]:bg-[#FFD600] shadow-neubrutal" },
     badge: { default: "rounded-none bg-[#FFD600] text-black border-4 border-black" },
     slider: { default: "rounded-none border-4 border-black bg-white [&_.slider-thumb]:bg-[#FF5733] [&_.slider-thumb]:border-4 [&_.slider-thumb]:border-black" },
     tabs: { default: "border-b-4 border-black", triggerActive: "bg-[#FFD600] border-b-4 border-black font-bold -mb-[3px] pb-[5px] shadow-neubrutal", triggerInactive: "opacity-80" },
-    card: { default: "rounded-none bg-white text-black border-4 border-black shadow-neubrutal" },
+    card: { default: "rounded-none bg-white border-4 border-black shadow-neubrutal" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-none bg-[#FFD600] text-black border-b-4 border-black shadow-neubrutal" },
     sidebar: { default: "rounded-none bg-[#FFD600]/30 border-r-4 border-black shadow-neubrutal text-black" },
@@ -134,13 +134,13 @@ var themeMap = {
     timeline: { default: "border-l-4 border-black text-black" }
   },
   clay: {
-    button: { primary: "rounded-[40px] bg-rose-200 text-rose-900 border border-rose-300 shadow-clay-outer hover:shadow-[10px_10px_20px_rgba(0,0,0,0.08),inset_-8px_-8px_15px_rgba(0,0,0,0.2),inset_8px_8px_15px_rgba(255,255,255,0.4)]", secondary: "rounded-[40px] bg-sky-100 text-sky-900 shadow-clay-outer", ghost: "rounded-[40px] hover:bg-zinc-100 text-zinc-800" },
+    button: { primary: "rounded-[40px] bg-rose-200 text-rose-900 border border-rose-300 shadow-clay-outer hover:shadow-[10px_10px_20px_rgba(0,0,0,0.08),inset_-8px_-8px_15px_rgba(0,0,0,0.2),inset_8px_8px_15px_rgba(255,255,255,0.4)]", secondary: "rounded-[40px] bg-sky-100 text-sky-900 shadow-clay-outer", ghost: "rounded-[40px] text-inherit hover:bg-zinc-100" },
     input: { default: "rounded-[40px] border border-zinc-200 bg-zinc-50 text-zinc-900 placeholder:text-zinc-500 focus:ring-2 focus:ring-sky-300" },
     toggle: { default: "rounded-full bg-sky-100 data-[state=on]:bg-sky-300 data-[state=on]:shadow-clay-outer" },
     badge: { default: "rounded-[40px] bg-amber-100 text-amber-900" },
     slider: { default: "rounded-full bg-sky-100 [&_.slider-thumb]:rounded-full [&_.slider-thumb]:bg-rose-300" },
     tabs: { default: "border-b-2 border-zinc-200/80", triggerActive: "border-rose-600 font-semibold", triggerInactive: "opacity-70" },
-    card: { default: "rounded-[40px] bg-rose-50 text-zinc-900 shadow-clay-outer border border-rose-100" },
+    card: { default: "rounded-[40px] bg-rose-50 shadow-clay-outer border border-rose-100" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-b-3xl bg-white/80 text-zinc-900 backdrop-blur-md shadow-clay-outer border-b border-zinc-200" },
     sidebar: { default: "rounded-r-3xl bg-sky-50 text-zinc-900 shadow-clay-outer border-r border-sky-100" },
@@ -163,13 +163,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-rose-200 text-zinc-900" }
   },
   cyberpunk: {
-    button: { primary: "bg-transparent border-2 border-[#22d3ee] text-[#22d3ee] font-mono shadow-neon-glow hover:animate-glitch-anim", secondary: "bg-transparent border-2 border-[#ec4899] text-[#ec4899] font-mono hover:animate-glitch-anim", ghost: "text-[#22d3ee] font-mono hover:bg-[#22d3ee]/10" },
+    button: { primary: "bg-transparent border-2 border-[#22d3ee] text-[#22d3ee] font-mono shadow-neon-glow hover:animate-glitch-anim", secondary: "bg-transparent border-2 border-[#ec4899] text-[#ec4899] font-mono hover:animate-glitch-anim", ghost: "text-inherit font-mono hover:bg-[#22d3ee]/10" },
     input: { default: "bg-black border-2 border-[#22d3ee] text-[#22d3ee] placeholder:text-[#22d3ee]/50 font-mono focus:shadow-neon-glow" },
     toggle: { default: "bg-zinc-900 border-2 border-[#22d3ee] data-[state=on]:bg-[#22d3ee] data-[state=on]:shadow-neon-glow" },
     badge: { default: "bg-black border-2 border-[#ec4899] text-[#ec4899] font-mono" },
     slider: { default: "bg-zinc-900 [&_.slider-thumb]:border-2 [&_.slider-thumb]:border-[#22d3ee] [&_.slider-thumb]:bg-[#22d3ee] [&_.slider-thumb]:shadow-neon-glow" },
     tabs: { default: "border-b-2 border-[#22d3ee]", triggerActive: "text-[#22d3ee] border-[#22d3ee] font-bold shadow-neon-glow", triggerInactive: "opacity-50 text-[#22d3ee]/70" },
-    card: { default: "bg-black text-[#22d3ee] border-2 border-[#22d3ee] shadow-neon-glow font-mono" },
+    card: { default: "bg-black border-2 border-[#22d3ee] shadow-neon-glow font-mono" },
     bento: { default: "gap-4" },
     navbar: { default: "bg-black text-[#22d3ee] border-b-2 border-[#22d3ee] font-mono" },
     sidebar: { default: "bg-black text-[#22d3ee] border-r-2 border-[#22d3ee] font-mono" },
@@ -192,13 +192,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-[#22d3ee] text-[#22d3ee] font-mono" }
   },
   retro: {
-    button: { primary: "rounded-none bg-lime-500 text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-lime-400 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", secondary: "rounded-none bg-white text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-zinc-100 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", ghost: "rounded-none font-mono text-black border-2 border-transparent hover:border-black hover:bg-zinc-100" },
+    button: { primary: "rounded-none bg-lime-500 text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-lime-400 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", secondary: "rounded-none bg-white text-black border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)] hover:bg-zinc-100 active:shadow-[2px_2px_0_0_rgba(0,0,0,1)]", ghost: "rounded-none font-mono text-inherit border-2 border-transparent hover:border-black hover:bg-zinc-100" },
     input: { default: "rounded-none border-2 border-black text-black placeholder:text-zinc-500 font-mono focus:ring-2 focus:ring-black focus:ring-offset-0 bg-white" },
     toggle: { default: "rounded-none border-2 border-black bg-zinc-200 data-[state=on]:bg-lime-500 shadow-[3px_3px_0_0_rgba(0,0,0,1)]" },
     badge: { default: "rounded-none bg-lime-500 text-black border-2 border-black font-mono" },
     slider: { default: "rounded-none border-2 border-black bg-zinc-200 [&_.slider-thumb]:rounded-none [&_.slider-thumb]:border-2 [&_.slider-thumb]:border-black [&_.slider-thumb]:bg-lime-500 [&_.slider-thumb]:shadow-[2px_2px_0_0_rgba(0,0,0,1)]" },
     tabs: { default: "border-b-2 border-black font-mono", triggerActive: "border-b-2 border-black font-bold bg-lime-500/20 text-black -mb-[2px] pb-[6px]", triggerInactive: "opacity-70 text-black" },
-    card: { default: "rounded-none bg-white text-black border-2 border-black shadow-[6px_6px_0_0_rgba(0,0,0,1)] font-mono" },
+    card: { default: "rounded-none bg-white border-2 border-black shadow-[6px_6px_0_0_rgba(0,0,0,1)] font-mono" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-none bg-zinc-100 text-black border-b-2 border-black font-mono shadow-[0_4px_0_0_rgba(0,0,0,1)]" },
     sidebar: { default: "rounded-none bg-zinc-100 text-black border-r-2 border-black font-mono" },
@@ -221,13 +221,13 @@ var themeMap = {
     timeline: { default: "border-l-2 border-black text-black font-mono" }
   },
   motion: {
-    button: { primary: "rounded-xl bg-indigo-500 text-white border-0 shadow-lg transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:shadow-xl hover:bg-indigo-600 active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2", secondary: "rounded-xl bg-white text-indigo-600 border-2 border-indigo-200 shadow-md transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:border-indigo-300 hover:shadow-lg active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2", ghost: "rounded-xl text-indigo-600 transition-all duration-300 ease-out hover:scale-105 hover:bg-indigo-50 hover:-translate-y-0.5 active:scale-100 active:translate-y-0" },
+    button: { primary: "rounded-xl bg-indigo-500 text-white border-0 shadow-lg transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:shadow-xl hover:bg-indigo-600 active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2", secondary: "rounded-xl bg-white text-indigo-600 border-2 border-indigo-200 shadow-md transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-0.5 hover:border-indigo-300 hover:shadow-lg active:scale-100 active:translate-y-0 focus:ring-2 focus:ring-indigo-300 focus:ring-offset-2", ghost: "rounded-xl text-inherit transition-all duration-300 ease-out hover:scale-105 hover:bg-indigo-50 hover:-translate-y-0.5 active:scale-100 active:translate-y-0" },
     input: { default: "rounded-xl border-2 border-indigo-200 bg-white text-zinc-900 transition-all duration-300 ease-out placeholder:text-zinc-400 focus:scale-[1.01] focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-0" },
     toggle: { default: "rounded-full bg-zinc-200 transition-all duration-300 ease-out data-[state=on]:bg-indigo-500 [&_.slider-thumb]:transition-transform [&_.slider-thumb]:duration-300 [&_.slider-thumb]:data-[state=on]:scale-110" },
     badge: { default: "rounded-full bg-indigo-100 text-indigo-700 border border-indigo-200 transition-all duration-300 ease-out hover:scale-110 hover:bg-indigo-200" },
     slider: { default: "rounded-full bg-zinc-200 transition-all duration-300 [&_.slider-thumb]:rounded-full [&_.slider-thumb]:bg-indigo-500 [&_.slider-thumb]:transition-transform [&_.slider-thumb]:duration-300 [&_.slider-thumb]:hover:scale-125 [&_.slider-thumb]:active:scale-110" },
     tabs: { default: "border-b-2 border-indigo-200 transition-colors duration-300", triggerActive: "border-indigo-500 font-semibold text-indigo-600 transition-all duration-300", triggerInactive: "opacity-70 transition-opacity duration-300 hover:opacity-100" },
-    card: { default: "rounded-2xl bg-white text-zinc-900 border-2 border-indigo-100 shadow-lg transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-xl hover:border-indigo-200 hover:-translate-y-1" },
+    card: { default: "rounded-2xl bg-white border-2 border-indigo-100 shadow-lg transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-xl hover:border-indigo-200 hover:-translate-y-1" },
     bento: { default: "gap-4" },
     navbar: { default: "rounded-none bg-white/95 backdrop-blur-md text-zinc-900 border-b-2 border-indigo-100 shadow-sm transition-all duration-300" },
     sidebar: { default: "rounded-none bg-white/95 backdrop-blur-md text-zinc-900 border-r-2 border-indigo-100 transition-all duration-300" },
@@ -3526,6 +3526,14 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function mergeRefs(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref != null) ref.current = node;
+    });
+  };
+}
 
 // node_modules/lucide-react/dist/esm/createLucideIcon.js
 import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
@@ -3675,6 +3683,7 @@ var X = createLucideIcon("x", __iconNode9);
 
 // components/Accordion.tsx
 import {
+  forwardRef as forwardRef3,
   useCallback as useCallback2,
   useEffect as useEffect2,
   useRef,
@@ -3740,14 +3749,14 @@ function AccordionPanel({
     )
   ] });
 }
-function Accordion({
+var Accordion = forwardRef3(function Accordion2({
   items,
   allowMultiple = false,
   defaultOpenIds,
   className,
   style,
   theme: themeProp
-}) {
+}, ref) {
   const [open, setOpen] = useState2(
     () => new Set(defaultOpenIds ?? [])
   );
@@ -3768,7 +3777,7 @@ function Accordion({
     },
     [allowMultiple]
   );
-  return /* @__PURE__ */ jsx2("div", { className: cn(themeClass, className), style, children: items.map((item) => /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2("div", { ref, className: cn(themeClass, className), style, children: items.map((item) => /* @__PURE__ */ jsx2(
     AccordionPanel,
     {
       item,
@@ -3778,12 +3787,12 @@ function Accordion({
     },
     item.id
   )) });
-}
+});
 
 // components/Alert.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Alert = forwardRef3(function Alert2({
+var Alert = forwardRef4(function Alert2({
   intent = "default",
   title,
   children,
@@ -3811,12 +3820,12 @@ var Alert = forwardRef3(function Alert2({
 });
 
 // components/Avatar.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function getInitials(name) {
   return name.trim().split(/\s+/).map((s) => s[0]).join("").toUpperCase().slice(0, 2);
 }
-var Avatar = forwardRef4(function Avatar2({
+var Avatar = forwardRef5(function Avatar2({
   src,
   alt = "",
   fallback,
@@ -3960,7 +3969,7 @@ var cva = (base, config) => (props) => {
 };
 
 // components/Badge.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var badgeVariants = cva(
   "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium",
@@ -3978,7 +3987,7 @@ var badgeVariants = cva(
     }
   }
 );
-var Badge = forwardRef5(function Badge2({
+var Badge = forwardRef6(function Badge2({
   children,
   variant = "default",
   dot = false,
@@ -4023,17 +4032,15 @@ var Badge = forwardRef5(function Badge2({
 });
 
 // components/BentoGrid.tsx
+import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-function BentoGrid({
-  children,
-  className,
-  style
-}) {
+var BentoGrid = forwardRef7(function BentoGrid2({ children, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "bento", "default");
   return /* @__PURE__ */ jsx6(
     "div",
     {
+      ref,
       className: cn(
         "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
         themeClass,
@@ -4043,9 +4050,10 @@ function BentoGrid({
       children
     }
   );
-}
+});
 
 // components/Breadcrumbs.tsx
+import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultSeparators = {
   minimal: "/",
@@ -4057,25 +4065,20 @@ var defaultSeparators = {
   retro: ">",
   motion: "\u203A"
 };
-function Breadcrumbs({
-  items,
-  separator,
-  className,
-  theme: themeProp
-}) {
+var Breadcrumbs = forwardRef8(function Breadcrumbs2({ items, separator, className, style, theme: themeProp }, ref) {
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "breadcrumbs", "default");
   const sep = separator ?? defaultSeparators[theme] ?? "/";
-  return /* @__PURE__ */ jsx7("nav", { "aria-label": "Breadcrumb", className: cn("flex flex-wrap items-center gap-1.5 text-sm", themeClass, className), children: items.map((item, i) => /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsx7("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex flex-wrap items-center gap-1.5 text-sm", themeClass, className), style, children: items.map((item, i) => /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1.5", children: [
     i > 0 && /* @__PURE__ */ jsx7("span", { "data-sep": true, className: "shrink-0 opacity-70", "aria-hidden": true, children: sep }),
     item.href != null ? /* @__PURE__ */ jsx7("a", { href: item.href, className: "hover:underline", children: item.label }) : /* @__PURE__ */ jsx7("span", { className: "font-medium", "aria-current": i === items.length - 1 ? "page" : void 0, children: item.label })
   ] }, i)) });
-}
+});
 
 // components/Button.tsx
 import {
-  forwardRef as forwardRef6
+  forwardRef as forwardRef9
 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var buttonVariants = cva(
@@ -4157,10 +4160,10 @@ function ButtonInner(props, ref) {
     }
   );
 }
-var Button = forwardRef6(ButtonInner);
+var Button = forwardRef9(ButtonInner);
 
 // components/Calendar.tsx
-import { useMemo as useMemo2, useState as useState3 } from "react";
+import { forwardRef as forwardRef10, useMemo as useMemo2, useState as useState3 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
@@ -4191,15 +4194,16 @@ var MONTHS = [
   "November",
   "December"
 ];
-function Calendar({
+var Calendar = forwardRef10(function Calendar2({
   value: controlledValue,
   defaultValue,
   onSelect,
   min,
   max,
   className,
+  style,
   theme: themeProp
-}) {
+}, ref) {
   const [uncontrolled, setUncontrolled] = useState3(
     () => defaultValue ?? null
   );
@@ -4247,7 +4251,9 @@ function Calendar({
   return /* @__PURE__ */ jsxs7(
     "div",
     {
+      ref,
       className: cn("inline-block max-w-full min-w-0 border p-3 sm:p-4 rounded-xl", themeClass, className),
+      style,
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between mb-3", children: [
           /* @__PURE__ */ jsx9(
@@ -4300,10 +4306,10 @@ function Calendar({
       ]
     }
   );
-}
+});
 
 // components/Card.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var cardVariants = cva("rounded-xl", {
   variants: {
@@ -4322,7 +4328,7 @@ var cardVariants = cva("rounded-xl", {
     isHoverable: false
   }
 });
-var Card = forwardRef7(function Card2({
+var Card = forwardRef11(function Card2({
   header,
   footer,
   padding = "md",
@@ -4343,8 +4349,8 @@ var Card = forwardRef7(function Card2({
       className: cn(
         cardVariants({ padding, isHoverable }),
         themeClass,
-        className,
-        classNames.root
+        classNames.root,
+        className
       ),
       ...props,
       children: [
@@ -4380,9 +4386,160 @@ var Card = forwardRef7(function Card2({
   );
 });
 
+// components/CommandPalette.tsx
+import { forwardRef as forwardRef12, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var CommandPalette = forwardRef12(function CommandPalette2({
+  open,
+  onClose,
+  commands,
+  placeholder = "Type a command...",
+  className,
+  style,
+  theme: themeProp
+}, ref) {
+  const [query, setQuery] = useState4("");
+  const [selected, setSelected] = useState4(0);
+  const listRef = useRef2(null);
+  const { theme: contextTheme } = useTheme();
+  const theme = themeProp ?? contextTheme;
+  const themeClass = getThemeClass(theme, "commandPalette", "default");
+  const filtered = useMemo3(() => {
+    if (!query.trim()) return commands;
+    const q = query.toLowerCase();
+    return commands.filter((c) => c.label.toLowerCase().includes(q));
+  }, [commands, query]);
+  const safeSelected = Math.min(selected, Math.max(0, filtered.length - 1));
+  useEffect3(() => {
+    if (open) {
+      setQuery("");
+      setSelected(0);
+    }
+  }, [open]);
+  useEffect3(() => {
+    setSelected((s) => Math.min(s, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+  const runSelected = useCallback3(() => {
+    const item = filtered[safeSelected];
+    if (item) {
+      item.onSelect();
+      onClose();
+    }
+  }, [filtered, safeSelected, onClose]);
+  useEffect3(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelected((s) => (s + 1) % Math.max(1, filtered.length));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelected(
+          (s) => (s - 1 + filtered.length) % Math.max(1, filtered.length)
+        );
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        runSelected();
+      }
+    };
+    document.addEventListener("keydown", handler, true);
+    return () => document.removeEventListener("keydown", handler, true);
+  }, [open, onClose, filtered.length, runSelected]);
+  useEffect3(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const item = el.querySelector(`[data-index="${safeSelected}"]`);
+    if (item && typeof item.scrollIntoView === "function") {
+      item.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  }, [safeSelected]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      ref,
+      className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh] p-4",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Command palette",
+      children: [
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+            onClick: onClose,
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            className: cn("relative z-10 w-full max-w-[calc(100vw-2rem)] sm:max-w-xl overflow-hidden rounded-xl mx-2 sm:mx-0", themeClass, className),
+            style,
+            children: [
+              /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 border-b border-inherit px-3 py-2", children: [
+                /* @__PURE__ */ jsx11(Search, { className: "size-4 shrink-0 opacity-60", "aria-hidden": true }),
+                /* @__PURE__ */ jsx11(
+                  "input",
+                  {
+                    type: "text",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    placeholder,
+                    className: "flex-1 bg-transparent outline-none placeholder:opacity-60",
+                    autoFocus: true,
+                    "aria-autocomplete": "list",
+                    "aria-controls": "command-palette-list",
+                    "aria-expanded": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx11("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: "ESC" })
+              ] }),
+              /* @__PURE__ */ jsx11(
+                "ul",
+                {
+                  ref: listRef,
+                  id: "command-palette-list",
+                  role: "listbox",
+                  className: "max-h-72 overflow-auto py-2",
+                  children: filtered.length === 0 ? /* @__PURE__ */ jsx11("li", { className: "px-4 py-3 text-sm opacity-60", children: "No results." }) : filtered.map((cmd, i) => /* @__PURE__ */ jsx11("li", { role: "option", "aria-selected": i === safeSelected, "data-index": i, children: /* @__PURE__ */ jsxs9(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        cmd.onSelect();
+                        onClose();
+                      },
+                      onMouseEnter: () => setSelected(i),
+                      className: `flex w-full items-center justify-between px-4 py-2 text-left text-sm ${i === safeSelected ? "bg-current/10" : ""}`,
+                      children: [
+                        cmd.label,
+                        cmd.shortcut ? /* @__PURE__ */ jsx11("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: cmd.shortcut }) : null
+                      ]
+                    }
+                  ) }, cmd.id))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
 // components/DashboardShell.tsx
-import { useState as useState4 } from "react";
-import { Fragment, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { forwardRef as forwardRef13, useState as useState5 } from "react";
+import { Fragment, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var SHELL_BG_BY_THEME = {
   minimal: "bg-gradient-to-br from-slate-50 via-zinc-50 to-slate-100",
   night: "bg-zinc-950 text-zinc-100",
@@ -4414,7 +4571,7 @@ function mobileNavLinkStateClasses(theme, active) {
   }
   return active ? "bg-black/5 text-zinc-900" : "text-zinc-600 hover:bg-black/5 hover:text-zinc-900";
 }
-function DashboardShell({
+var DashboardShell = forwardRef13(function DashboardShell2({
   children,
   navItems,
   adminNavItems,
@@ -4423,19 +4580,20 @@ function DashboardShell({
   userRole,
   onLogout,
   logo,
-  className
-}) {
-  const [mobileOpen, setMobileOpen] = useState4(false);
+  className,
+  style
+}, ref) {
+  const [mobileOpen, setMobileOpen] = useState5(false);
   const isAdmin = userRole === "ADMIN";
   const { theme } = useTheme();
   const shellBg = SHELL_BG_BY_THEME[theme];
   const isDarkHeader = darkHeaderThemes.includes(theme);
   const isActive = (href) => currentPath ? currentPath === href || currentPath.startsWith(href) : false;
-  return /* @__PURE__ */ jsxs9("div", { className: cn("min-h-screen", shellBg, className), children: [
-    /* @__PURE__ */ jsxs9("header", { className: cn("sticky top-0 z-40", headerClasses(theme)), children: [
-      /* @__PURE__ */ jsxs9("div", { className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8", children: [
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs10("div", { ref, className: cn("min-h-screen", shellBg, className), style, children: [
+    /* @__PURE__ */ jsxs10("header", { className: cn("sticky top-0 z-40", headerClasses(theme)), children: [
+      /* @__PURE__ */ jsxs10("div", { className: "mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -4446,10 +4604,10 @@ function DashboardShell({
               ),
               "aria-label": "Toggle navigation",
               "aria-expanded": mobileOpen,
-              children: mobileOpen ? /* @__PURE__ */ jsx11("span", { className: "text-lg leading-none", children: "\xD7" }) : /* @__PURE__ */ jsx11("span", { className: "text-xl leading-none", children: "\u2630" })
+              children: mobileOpen ? /* @__PURE__ */ jsx12("span", { className: "text-lg leading-none", children: "\xD7" }) : /* @__PURE__ */ jsx12("span", { className: "text-xl leading-none", children: "\u2630" })
             }
           ),
-          /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-2", children: logo ?? /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-2", children: logo ?? /* @__PURE__ */ jsx12(
             "span",
             {
               className: cn(
@@ -4459,8 +4617,8 @@ function DashboardShell({
               children: "Dashboard"
             }
           ) }),
-          /* @__PURE__ */ jsxs9("nav", { className: "ml-6 hidden items-center gap-1 text-sm sm:flex", children: [
-            navItems.map((item) => /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs10("nav", { className: "ml-6 hidden items-center gap-1 text-sm sm:flex", children: [
+            navItems.map((item) => /* @__PURE__ */ jsx12(
               "a",
               {
                 href: item.href,
@@ -4469,8 +4627,8 @@ function DashboardShell({
               },
               item.href
             )),
-            isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ jsxs9(Fragment, { children: [
-              /* @__PURE__ */ jsx11(
+            isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ jsxs10(Fragment, { children: [
+              /* @__PURE__ */ jsx12(
                 "span",
                 {
                   className: cn(
@@ -4479,7 +4637,7 @@ function DashboardShell({
                   )
                 }
               ),
-              adminNavItems.map((item) => /* @__PURE__ */ jsx11(
+              adminNavItems.map((item) => /* @__PURE__ */ jsx12(
                 "a",
                 {
                   href: item.href,
@@ -4494,8 +4652,8 @@ function DashboardShell({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-sm", children: [
-          userEmail && /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-sm", children: [
+          userEmail && /* @__PURE__ */ jsx12(
             "span",
             {
               className: cn(
@@ -4505,7 +4663,7 @@ function DashboardShell({
               children: userEmail
             }
           ),
-          onLogout && /* @__PURE__ */ jsx11(
+          onLogout && /* @__PURE__ */ jsx12(
             "button",
             {
               type: "button",
@@ -4519,8 +4677,8 @@ function DashboardShell({
           )
         ] })
       ] }),
-      mobileOpen && /* @__PURE__ */ jsxs9("div", { className: mobilePanelClasses(theme), children: [
-        /* @__PURE__ */ jsx11("div", { className: "space-y-1", children: navItems.map((item) => /* @__PURE__ */ jsx11(
+      mobileOpen && /* @__PURE__ */ jsxs10("div", { className: mobilePanelClasses(theme), children: [
+        /* @__PURE__ */ jsx12("div", { className: "space-y-1", children: navItems.map((item) => /* @__PURE__ */ jsx12(
           "a",
           {
             href: item.href,
@@ -4532,8 +4690,8 @@ function DashboardShell({
           },
           item.href
         )) }),
-        isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ jsxs9(Fragment, { children: [
-          /* @__PURE__ */ jsx11(
+        isAdmin && adminNavItems && adminNavItems.length > 0 && /* @__PURE__ */ jsxs10(Fragment, { children: [
+          /* @__PURE__ */ jsx12(
             "div",
             {
               className: cn(
@@ -4542,7 +4700,7 @@ function DashboardShell({
               )
             }
           ),
-          /* @__PURE__ */ jsx11("div", { className: "space-y-1", children: adminNavItems.map((item) => /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12("div", { className: "space-y-1", children: adminNavItems.map((item) => /* @__PURE__ */ jsx12(
             "a",
             {
               href: item.href,
@@ -4555,7 +4713,7 @@ function DashboardShell({
             item.href
           )) })
         ] }),
-        userEmail && /* @__PURE__ */ jsx11(
+        userEmail && /* @__PURE__ */ jsx12(
           "div",
           {
             className: cn(
@@ -4565,7 +4723,7 @@ function DashboardShell({
             children: userEmail
           }
         ),
-        onLogout && /* @__PURE__ */ jsx11(
+        onLogout && /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -4579,157 +4737,51 @@ function DashboardShell({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx11("main", { className: "mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8", children })
+    /* @__PURE__ */ jsx12("main", { className: "mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8", children })
   ] });
-}
+});
 
-// components/CommandPalette.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2, useState as useState5 } from "react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-function CommandPalette({
-  open,
-  onClose,
-  commands,
-  placeholder = "Type a command...",
-  theme: themeProp
-}) {
-  const [query, setQuery] = useState5("");
-  const [selected, setSelected] = useState5(0);
-  const listRef = useRef2(null);
-  const { theme: contextTheme } = useTheme();
-  const theme = themeProp ?? contextTheme;
-  const themeClass = getThemeClass(theme, "commandPalette", "default");
-  const filtered = useMemo3(() => {
-    if (!query.trim()) return commands;
-    const q = query.toLowerCase();
-    return commands.filter((c) => c.label.toLowerCase().includes(q));
-  }, [commands, query]);
-  const safeSelected = Math.min(selected, Math.max(0, filtered.length - 1));
-  useEffect3(() => {
-    if (open) {
-      setQuery("");
-      setSelected(0);
-    }
-  }, [open]);
-  useEffect3(() => {
-    setSelected((s) => Math.min(s, Math.max(0, filtered.length - 1)));
-  }, [filtered.length]);
-  const runSelected = useCallback3(() => {
-    const item = filtered[safeSelected];
-    if (item) {
-      item.onSelect();
-      onClose();
-    }
-  }, [filtered, safeSelected, onClose]);
-  useEffect3(() => {
-    if (!open) return;
-    const handler = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setSelected((s) => (s + 1) % Math.max(1, filtered.length));
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setSelected(
-          (s) => (s - 1 + filtered.length) % Math.max(1, filtered.length)
-        );
-        return;
-      }
-      if (e.key === "Enter") {
-        e.preventDefault();
-        runSelected();
-      }
-    };
-    document.addEventListener("keydown", handler, true);
-    return () => document.removeEventListener("keydown", handler, true);
-  }, [open, onClose, filtered.length, runSelected]);
-  useEffect3(() => {
-    const el = listRef.current;
-    if (!el) return;
-    const item = el.querySelector(`[data-index="${safeSelected}"]`);
-    item?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [safeSelected]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsxs10(
+// components/DataTable.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function DataTableInner({ columns, data, getRowKey, className, style }, ref) {
+  const { theme } = useTheme();
+  const themeClass = getThemeClass(theme, "dataTable", "default");
+  return /* @__PURE__ */ jsx13(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh] p-4",
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Command palette",
-      children: [
-        /* @__PURE__ */ jsx12(
-          "div",
+      ref,
+      className: cn(
+        "overflow-x-auto rounded-lg -mx-1 px-1 sm:mx-0 sm:px-0",
+        themeClass,
+        className
+      ),
+      style,
+      children: /* @__PURE__ */ jsxs11("table", { className: "w-full min-w-[480px] text-left text-sm", children: [
+        /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsx13("tr", { className: "border-b border-inherit", children: columns.map((col) => /* @__PURE__ */ jsx13(
+          "th",
           {
-            className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
-            onClick: onClose,
-            "aria-hidden": true
-          }
-        ),
-        /* @__PURE__ */ jsxs10(
-          "div",
+            className: "px-4 py-3 font-medium",
+            children: col.header
+          },
+          String(col.key)
+        )) }) }),
+        /* @__PURE__ */ jsx13("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx13(
+          "tr",
           {
-            className: `relative z-10 w-full max-w-[calc(100vw-2rem)] sm:max-w-xl overflow-hidden rounded-xl mx-2 sm:mx-0 ${themeClass}`,
-            children: [
-              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 border-b border-inherit px-3 py-2", children: [
-                /* @__PURE__ */ jsx12(Search, { className: "size-4 shrink-0 opacity-60", "aria-hidden": true }),
-                /* @__PURE__ */ jsx12(
-                  "input",
-                  {
-                    type: "text",
-                    value: query,
-                    onChange: (e) => setQuery(e.target.value),
-                    placeholder,
-                    className: "flex-1 bg-transparent outline-none placeholder:opacity-60",
-                    autoFocus: true,
-                    "aria-autocomplete": "list",
-                    "aria-controls": "command-palette-list",
-                    "aria-expanded": "true"
-                  }
-                ),
-                /* @__PURE__ */ jsx12("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: "ESC" })
-              ] }),
-              /* @__PURE__ */ jsx12(
-                "ul",
-                {
-                  ref: listRef,
-                  id: "command-palette-list",
-                  role: "listbox",
-                  className: "max-h-72 overflow-auto py-2",
-                  children: filtered.length === 0 ? /* @__PURE__ */ jsx12("li", { className: "px-4 py-3 text-sm opacity-60", children: "No results." }) : filtered.map((cmd, i) => /* @__PURE__ */ jsx12("li", { role: "option", "data-index": i, children: /* @__PURE__ */ jsxs10(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        cmd.onSelect();
-                        onClose();
-                      },
-                      onMouseEnter: () => setSelected(i),
-                      className: `flex w-full items-center justify-between px-4 py-2 text-left text-sm ${i === safeSelected ? "bg-current/10" : ""}`,
-                      children: [
-                        cmd.label,
-                        cmd.shortcut ? /* @__PURE__ */ jsx12("kbd", { className: "rounded border border-inherit px-1.5 py-0.5 text-xs opacity-60", children: cmd.shortcut }) : null
-                      ]
-                    }
-                  ) }, cmd.id))
-                }
-              )
-            ]
-          }
-        )
-      ]
+            className: "border-b border-inherit last:border-0",
+            children: columns.map((col) => /* @__PURE__ */ jsx13("td", { className: "px-4 py-3", children: col.render ? col.render(row) : String(row[col.key] ?? "") }, String(col.key)))
+          },
+          getRowKey ? getRowKey(row, i) : i
+        )) })
+      ] })
     }
   );
 }
+var DataTable = forwardRef14(DataTableInner);
 
 // components/DocumentAccordion.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function DocumentAccordion({
   title,
   content,
@@ -4744,15 +4796,15 @@ function DocumentAccordion({
     {
       id: "document",
       title,
-      content: /* @__PURE__ */ jsx13(
+      content: /* @__PURE__ */ jsx14(
         "div",
         {
           className: cn(
             "rounded-xl border p-0 shadow-sm backdrop-blur-md",
             theme === "night" || theme === "cyberpunk" ? "border-white/10 bg-zinc-950/80" : "border-black/5 bg-white/60"
           ),
-          children: pdfUrl ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsx13("div", { className: "flex justify-end px-4 pt-4", children: /* @__PURE__ */ jsxs11(
+          children: pdfUrl ? /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx14("div", { className: "flex justify-end px-4 pt-4", children: /* @__PURE__ */ jsxs12(
               "a",
               {
                 href: pdfUrl,
@@ -4763,19 +4815,19 @@ function DocumentAccordion({
                   theme === "night" || theme === "cyberpunk" ? "border-white/20 bg-zinc-900/80 text-sky-300 hover:bg-zinc-800/80" : "border-black/5 bg-white/70 text-blue-700 hover:bg-white"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx13("span", { children: "Open PDF" }),
-                  /* @__PURE__ */ jsx13("span", { "aria-hidden": true, children: "\u2197" })
+                  /* @__PURE__ */ jsx14("span", { children: "Open PDF" }),
+                  /* @__PURE__ */ jsx14("span", { "aria-hidden": true, children: "\u2197" })
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               "div",
               {
                 className: cn(
                   "h-[60vh] w-full border-t",
                   theme === "night" || theme === "cyberpunk" ? "border-white/10" : "border-black/5"
                 ),
-                children: /* @__PURE__ */ jsx13(
+                children: /* @__PURE__ */ jsx14(
                   "iframe",
                   {
                     src: `https://docs.google.com/viewer?url=${encodeURIComponent(
@@ -4787,7 +4839,7 @@ function DocumentAccordion({
                 )
               }
             )
-          ] }) : content ? /* @__PURE__ */ jsx13(
+          ] }) : content ? /* @__PURE__ */ jsx14(
             "div",
             {
               className: cn(
@@ -4801,7 +4853,7 @@ function DocumentAccordion({
       )
     }
   ];
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Accordion,
     {
       items,
@@ -4813,48 +4865,6 @@ function DocumentAccordion({
   );
 }
 
-// components/DataTable.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-function DataTable({
-  columns,
-  data,
-  getRowKey,
-  className,
-  style
-}) {
-  const { theme } = useTheme();
-  const themeClass = getThemeClass(theme, "dataTable", "default");
-  return /* @__PURE__ */ jsx14(
-    "div",
-    {
-      className: cn(
-        "overflow-x-auto rounded-lg -mx-1 px-1 sm:mx-0 sm:px-0",
-        themeClass,
-        className
-      ),
-      style,
-      children: /* @__PURE__ */ jsxs12("table", { className: "w-full min-w-[480px] text-left text-sm", children: [
-        /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { className: "border-b border-inherit", children: columns.map((col) => /* @__PURE__ */ jsx14(
-          "th",
-          {
-            className: "px-4 py-3 font-medium",
-            children: col.header
-          },
-          String(col.key)
-        )) }) }),
-        /* @__PURE__ */ jsx14("tbody", { children: data.map((row, i) => /* @__PURE__ */ jsx14(
-          "tr",
-          {
-            className: "border-b border-inherit last:border-0",
-            children: columns.map((col) => /* @__PURE__ */ jsx14("td", { className: "px-4 py-3", children: col.render ? col.render(row) : String(row[col.key] ?? "") }, String(col.key)))
-          },
-          getRowKey ? getRowKey(row, i) : i
-        )) })
-      ] })
-    }
-  );
-}
-
 // src/hooks/useKeyboardNavigation.ts
 import { useCallback as useCallback4, useEffect as useEffect4 } from "react";
 function useKeyboardNavigation(options) {
@@ -4933,6 +4943,7 @@ function useClickOutside(ref, handler, options) {
 
 // components/Dropdown.tsx
 import {
+  forwardRef as forwardRef15,
   useCallback as useCallback6,
   useEffect as useEffect6,
   useLayoutEffect,
@@ -4945,7 +4956,7 @@ function dropdownItemHighlightClass(theme) {
   const darkThemes = ["night", "cyberpunk"];
   return darkThemes.includes(theme) ? "hover:bg-white/10 focus:bg-white/10" : "hover:bg-black/5 focus:bg-black/5";
 }
-function Dropdown({
+var Dropdown = forwardRef15(function Dropdown2({
   trigger: triggerProp,
   placeholder = "Select\u2026",
   items,
@@ -4957,7 +4968,7 @@ function Dropdown({
   style,
   theme: themeProp,
   classNames = {}
-}) {
+}, ref) {
   const [open, setOpen] = useState6(false);
   const [uncontrolledValue, setUncontrolledValue] = useState6(defaultValue ?? "");
   const isControlled = controlledValue !== void 0;
@@ -4967,6 +4978,7 @@ function Dropdown({
   const listRef = useRef3(null);
   const containerRef = useRef3(null);
   const triggerRef = useRef3(null);
+  const mergedContainerRef = mergeRefs(ref, containerRef);
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "card", "default");
@@ -5126,7 +5138,7 @@ function Dropdown({
   return /* @__PURE__ */ jsxs13(
     "div",
     {
-      ref: containerRef,
+      ref: mergedContainerRef,
       className: cn("relative inline-block", className),
       style,
       onKeyDown: handleKeyDown,
@@ -5150,7 +5162,7 @@ function Dropdown({
       ]
     }
   );
-}
+});
 
 // components/Flashcard.tsx
 import { useState as useState7 } from "react";
@@ -5534,7 +5546,7 @@ function createDOMMotionComponentProxy(componentFactory) {
 
 // node_modules/framer-motion/dist/es/motion/index.mjs
 import { jsxs as jsxs14, jsx as jsx16 } from "react/jsx-runtime";
-import { forwardRef as forwardRef8, useContext as useContext5 } from "react";
+import { forwardRef as forwardRef16, useContext as useContext5 } from "react";
 
 // node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
 import { createContext as createContext6 } from "react";
@@ -5762,7 +5774,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
     return jsxs14(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? jsx16(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] });
   }
   MotionComponent.displayName = `motion.${typeof Component2 === "string" ? Component2 : `create(${(_b = (_a = Component2.displayName) !== null && _a !== void 0 ? _a : Component2.name) !== null && _b !== void 0 ? _b : ""})`}`;
-  const ForwardRefMotionComponent = forwardRef8(MotionComponent);
+  const ForwardRefMotionComponent = forwardRef16(MotionComponent);
   ForwardRefMotionComponent[motionComponentSymbol] = Component2;
   return ForwardRefMotionComponent;
 }
@@ -12847,6 +12859,7 @@ var createMotionComponent = /* @__PURE__ */ createMotionComponentFactory({
 var motion = /* @__PURE__ */ createDOMMotionComponentProxy(createMotionComponent);
 
 // components/Flashcard.tsx
+import { forwardRef as forwardRef17 } from "react";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var FRONT_BY_THEME = {
   minimal: "border-black/5 bg-gradient-to-br from-white to-zinc-50 text-zinc-900 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.1)]",
@@ -12868,17 +12881,13 @@ var BACK_BY_THEME = {
   retro: "from-zinc-800 to-black text-lime-400 font-mono",
   motion: "from-indigo-600 via-purple-600 to-indigo-700 text-white transition-all duration-500"
 };
-function Flashcard({
-  question,
-  answer,
-  className,
-  ...props
-}) {
+var Flashcard = forwardRef17(function Flashcard2({ question, answer, className, ...props }, ref) {
   const [isFlipped, setIsFlipped] = useState7(false);
   const { theme } = useTheme();
   return /* @__PURE__ */ jsx18(
     "div",
     {
+      ref,
       className: cn(
         "group relative h-64 w-full cursor-pointer [perspective:1000px]",
         className
@@ -12934,9 +12943,10 @@ function Flashcard({
       )
     }
   );
-}
+});
 
 // components/GraphicCard.tsx
+import { forwardRef as forwardRef18 } from "react";
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var SURFACE_BY_THEME = {
   minimal: "bg-gradient-to-br from-white to-zinc-50 border-black/5 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.08)] hover:shadow-[0_10px_40px_-6px_rgba(0,0,0,0.18)]",
@@ -12948,11 +12958,7 @@ var SURFACE_BY_THEME = {
   retro: "bg-white border-2 border-black font-mono shadow-[4px_4px_0_0_rgba(0,0,0,1)]",
   motion: "bg-white border-2 border-indigo-200 shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:border-indigo-300 hover:-translate-y-0.5"
 };
-function GraphicCard({
-  children,
-  className,
-  ...props
-}) {
+var GraphicCard = forwardRef18(function GraphicCard2({ children, className, ...props }, ref) {
   const { theme } = useTheme();
   const surface = SURFACE_BY_THEME[theme];
   const isDark = theme === "night" || theme === "cyberpunk";
@@ -12961,6 +12967,7 @@ function GraphicCard({
   return /* @__PURE__ */ jsxs16(
     "div",
     {
+      ref,
       className: cn(
         "group relative w-full overflow-hidden rounded-2xl p-6 transition-all duration-300",
         surface,
@@ -12974,10 +12981,10 @@ function GraphicCard({
       ]
     }
   );
-}
+});
 
 // components/Input.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var inputVariants = cva(
   "w-full rounded-lg px-3 py-2 text-sm outline-none transition-shadow",
@@ -12994,7 +13001,7 @@ var inputVariants = cva(
     }
   }
 );
-var Input = forwardRef9(function Input2({
+var Input = forwardRef19(function Input2({
   label,
   error,
   helperText,
@@ -13002,6 +13009,7 @@ var Input = forwardRef9(function Input2({
   suffix,
   size = "md",
   className,
+  style,
   id: idProp,
   disabled,
   theme: themeProp,
@@ -13030,13 +13038,12 @@ var Input = forwardRef9(function Input2({
         themeClass,
         error && "border-red-500 focus:ring-red-500 focus:border-red-500",
         hasAddon && "rounded-none first:rounded-l-lg last:rounded-r-lg",
-        !hasAddon && "rounded-lg",
-        className
+        !hasAddon && "rounded-lg"
       ),
       ...props
     }
   );
-  return /* @__PURE__ */ jsxs17("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxs17("div", { className: cn("w-full", className), style, children: [
     label && /* @__PURE__ */ jsx20(
       "label",
       {
@@ -13125,7 +13132,7 @@ function useFocusTrap(active, options) {
 }
 
 // components/Modal.tsx
-import { useCallback as useCallback10, useEffect as useEffect11 } from "react";
+import { forwardRef as forwardRef20, useCallback as useCallback10, useEffect as useEffect11 } from "react";
 import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var modalVariants = cva(
   "relative z-10 max-h-[90vh] w-full max-w-[calc(100vw-2rem)] overflow-auto rounded-xl p-4 sm:p-6",
@@ -13142,7 +13149,7 @@ var modalVariants = cva(
     }
   }
 );
-function Modal({
+var Modal = forwardRef20(function Modal2({
   open,
   onClose,
   title,
@@ -13151,11 +13158,12 @@ function Modal({
   style,
   children,
   theme: themeProp
-}) {
+}, ref) {
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "modal", "default");
   const focusTrapRef = useFocusTrap(open, { returnFocus: true });
+  const mergedRef = mergeRefs(ref, focusTrapRef);
   const handleEscape = useCallback10(
     (e) => {
       if (e.key === "Escape") onClose();
@@ -13192,7 +13200,7 @@ function Modal({
         /* @__PURE__ */ jsxs18(
           "div",
           {
-            ref: focusTrapRef,
+            ref: mergedRef,
             className: cn(modalVariants({ size }), themeClass, className),
             style,
             children: [
@@ -13225,21 +13233,15 @@ function Modal({
       ]
     }
   );
-}
+});
 
 // components/Navbar.tsx
-import { useCallback as useCallback11, useRef as useRef7, useState as useState8 } from "react";
+import { forwardRef as forwardRef21, useCallback as useCallback11, useRef as useRef7, useState as useState8 } from "react";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
-function Navbar({
-  children,
-  logo,
-  items,
-  right,
-  className,
-  style
-}) {
+var Navbar = forwardRef21(function Navbar2({ children, logo, items, right, className, style }, ref) {
   const [mobileOpen, setMobileOpen] = useState8(false);
   const navRef = useRef7(null);
+  const mergedNavRef = mergeRefs(ref, navRef);
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "navbar", "default");
   const mobilePanelBgOverride = theme === "glass" ? "bg-white/95 backdrop-blur-xl" : theme === "clay" ? "bg-white/95" : null;
@@ -13253,7 +13255,7 @@ function Navbar({
     return /* @__PURE__ */ jsxs19(
       "nav",
       {
-        ref: navRef,
+        ref: mergedNavRef,
         className: cn(
           "relative sticky top-0 z-50 flex h-14 w-full flex-col px-3 sm:px-4",
           themeClass,
@@ -13319,6 +13321,7 @@ function Navbar({
   return /* @__PURE__ */ jsx22(
     "nav",
     {
+      ref: mergedNavRef,
       className: cn(
         "sticky top-0 z-50 flex h-14 w-full flex-wrap items-center gap-2 px-3 sm:px-4",
         themeClass,
@@ -13328,21 +13331,18 @@ function Navbar({
       children
     }
   );
-}
+});
 
 // components/PricingCard.tsx
+import { forwardRef as forwardRef22 } from "react";
 import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
-function PricingCard({
-  tier,
-  onSelect,
-  className,
-  style
-}) {
+var PricingCard = forwardRef22(function PricingCard2({ tier, onSelect, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "pricingCard", "default");
   return /* @__PURE__ */ jsxs20(
     "div",
     {
+      ref,
       className: cn(
         "flex flex-col rounded-xl p-4 sm:p-6",
         themeClass,
@@ -13370,36 +13370,47 @@ function PricingCard({
       ]
     }
   );
-}
+});
 
 // components/ProgressBar.tsx
+import { forwardRef as forwardRef23 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
-function ProgressBar({
+var ProgressBar = forwardRef23(function ProgressBar2({
   value,
   max = 100,
   segmented = false,
   className,
   style,
+  "aria-label": ariaLabel,
   trackColor,
   activeColor
-}) {
+}, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "progress", "default");
   const pct = Math.min(100, Math.max(0, value / max * 100));
   const trackStyle = trackColor ? { backgroundColor: trackColor } : void 0;
   const fillStyle = activeColor ? { width: `${pct}%`, backgroundColor: activeColor } : { width: `${pct}%` };
+  const progressRole = {
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": max,
+    ...ariaLabel && { "aria-label": ariaLabel }
+  };
   if (segmented) {
     const segments = 10;
     const filled = Math.round(pct / 100 * segments);
     return /* @__PURE__ */ jsx24(
       "div",
       {
+        ref,
         className: cn(
           "flex h-3 w-full gap-0.5 overflow-hidden rounded-full",
           themeClass,
           className
         ),
         style: { ...style, ...trackStyle },
+        ...progressRole,
         children: Array.from({ length: segments }).map((_, i) => /* @__PURE__ */ jsx24(
           "div",
           {
@@ -13417,12 +13428,14 @@ function ProgressBar({
   return /* @__PURE__ */ jsx24(
     "div",
     {
+      ref,
       className: cn(
         "relative h-3 w-full overflow-hidden rounded-full",
         themeClass,
         className
       ),
       style: { ...style, ...trackStyle },
+      ...progressRole,
       children: /* @__PURE__ */ jsx24(
         "span",
         {
@@ -13432,33 +13445,25 @@ function ProgressBar({
       )
     }
   );
-}
+});
 
 // components/SectionHeader.tsx
+import { forwardRef as forwardRef24 } from "react";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
-function SectionHeader({
-  title,
-  subtitle,
-  className,
-  style
-}) {
+var SectionHeader = forwardRef24(function SectionHeader2({ title, subtitle, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "sectionHeader", "default");
-  return /* @__PURE__ */ jsxs21("header", { className: cn("pb-4", themeClass, className), style, children: [
+  return /* @__PURE__ */ jsxs21("header", { ref, className: cn("pb-4", themeClass, className), style, children: [
     /* @__PURE__ */ jsx25("h2", { className: "text-lg font-semibold sm:text-xl", children: title }),
     subtitle ? /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm opacity-80", children: subtitle }) : null,
     /* @__PURE__ */ jsx25("div", { className: "mt-3 border-b border-inherit" })
   ] });
-}
+});
 
 // components/Sidebar.tsx
-import { useCallback as useCallback12, useState as useState9 } from "react";
+import { forwardRef as forwardRef25, useCallback as useCallback12, useState as useState9 } from "react";
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
-function Sidebar({
-  children,
-  className,
-  style
-}) {
+var Sidebar = forwardRef25(function Sidebar2({ children, className, style }, ref) {
   const [collapsed, setCollapsed] = useState9(false);
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "sidebar", "default");
@@ -13466,6 +13471,7 @@ function Sidebar({
   return /* @__PURE__ */ jsxs22(
     "aside",
     {
+      ref,
       className: cn(
         "flex h-full flex-col transition-[width] duration-200",
         collapsed ? "w-12 sm:w-14" : "w-48 max-w-[85vw] sm:w-56 sm:max-w-none",
@@ -13488,10 +13494,10 @@ function Sidebar({
       ]
     }
   );
-}
+});
 
 // components/Skeleton.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var skeletonVariants = cva("", {
   variants: {
@@ -13505,7 +13511,7 @@ var skeletonVariants = cva("", {
     variant: "rectangle"
   }
 });
-var Skeleton = forwardRef10(
+var Skeleton = forwardRef26(
   function Skeleton2({ variant = "rectangle", className, theme: themeProp, style, ...props }, ref) {
     const { theme: contextTheme } = useTheme();
     const theme = themeProp ?? contextTheme;
@@ -13532,7 +13538,7 @@ var Skeleton = forwardRef10(
 
 // components/Slider.tsx
 import {
-  forwardRef as forwardRef11,
+  forwardRef as forwardRef27,
   useCallback as useCallback13,
   useState as useState10
 } from "react";
@@ -13556,7 +13562,7 @@ var trackVariants = cva(
   "relative h-3 w-full rounded-full overflow-visible",
   { variants: {}, defaultVariants: {} }
 );
-var Slider = forwardRef11(function Slider2({
+var Slider = forwardRef27(function Slider2({
   min = 0,
   max = 100,
   step = 1,
@@ -13565,6 +13571,7 @@ var Slider = forwardRef11(function Slider2({
   onValueChange,
   size = "md",
   className,
+  style,
   theme: themeProp,
   ...props
 }, ref) {
@@ -13583,7 +13590,7 @@ var Slider = forwardRef11(function Slider2({
     },
     [isControlled, onValueChange]
   );
-  return /* @__PURE__ */ jsxs23("div", { className: cn(sliderVariants({ size }), className), children: [
+  return /* @__PURE__ */ jsxs23("div", { className: cn(sliderVariants({ size }), className), style, children: [
     /* @__PURE__ */ jsxs23("div", { className: cn(trackVariants(), themeClass), children: [
       /* @__PURE__ */ jsx28(
         "span",
@@ -13621,20 +13628,15 @@ var Slider = forwardRef11(function Slider2({
 });
 
 // components/StatsCard.tsx
+import { forwardRef as forwardRef28 } from "react";
 import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
-function StatsCard({
-  label,
-  value,
-  trend,
-  className,
-  style
-}) {
+var StatsCard = forwardRef28(function StatsCard2({ label, value, trend, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "statsCard", "default");
   const isDark = theme === "night" || theme === "cyberpunk";
   const trendUpClass = trend?.direction === "up" ? isDark ? "text-emerald-400" : "text-emerald-600" : null;
   const trendDownClass = trend?.direction === "down" ? isDark ? "text-rose-400" : "text-rose-600" : null;
-  return /* @__PURE__ */ jsxs24("div", { className: cn("rounded-xl p-6", themeClass, className), style, children: [
+  return /* @__PURE__ */ jsxs24("div", { ref, className: cn("rounded-xl p-6", themeClass, className), style, children: [
     /* @__PURE__ */ jsx29("p", { className: "text-sm font-medium opacity-80", children: label }),
     /* @__PURE__ */ jsx29("p", { className: "mt-2 text-2xl font-bold tracking-tight", children: value }),
     trend ? /* @__PURE__ */ jsxs24(
@@ -13651,10 +13653,11 @@ function StatsCard({
       }
     ) : null
   ] });
-}
+});
 
 // components/Tabs.tsx
 import {
+  forwardRef as forwardRef29,
   useCallback as useCallback14,
   useEffect as useEffect12,
   useRef as useRef8,
@@ -13682,7 +13685,7 @@ var tabTriggerVariants = cva(
     }
   }
 );
-function Tabs({
+var Tabs = forwardRef29(function Tabs2({
   items,
   defaultValue,
   value: controlledValue,
@@ -13690,7 +13693,7 @@ function Tabs({
   className,
   style,
   theme: themeProp
-}) {
+}, ref) {
   const [uncontrolled, setUncontrolled] = useState11(
     () => defaultValue ?? items[0]?.value ?? ""
   );
@@ -13732,7 +13735,7 @@ function Tabs({
   );
   const activeItem = items[safeIndex];
   const content = activeItem?.content ?? null;
-  return /* @__PURE__ */ jsxs25("div", { className: cn("w-full min-w-0", className), style, children: [
+  return /* @__PURE__ */ jsxs25("div", { ref, className: cn("w-full min-w-0", className), style, children: [
     /* @__PURE__ */ jsx30(
       "div",
       {
@@ -13776,22 +13779,19 @@ function Tabs({
       }
     )
   ] });
-}
+});
 
 // components/Terminal.tsx
+import { forwardRef as forwardRef30 } from "react";
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
-function Terminal({
-  title = "terminal",
-  children,
-  className,
-  style
-}) {
+var Terminal = forwardRef30(function Terminal2({ title = "terminal", children, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "terminal", "default");
   const isCyberpunk = theme === "cyberpunk";
   return /* @__PURE__ */ jsxs26(
     "div",
     {
+      ref,
       className: cn("overflow-hidden rounded-xl font-mono text-sm", themeClass, className),
       style,
       children: [
@@ -13817,22 +13817,21 @@ function Terminal({
       ]
     }
   );
-}
+});
 
 // components/Timeline.tsx
+import { forwardRef as forwardRef31 } from "react";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
-function Timeline({
-  items,
-  className,
-  theme: themeProp
-}) {
+var Timeline = forwardRef31(function Timeline2({ items, className, style, theme: themeProp }, ref) {
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "timeline", "default");
   return /* @__PURE__ */ jsx32(
     "div",
     {
+      ref,
       className: cn("relative pl-4", themeClass, className),
+      style,
       role: "list",
       "aria-label": "Timeline",
       children: items.map((item, i) => /* @__PURE__ */ jsxs27(
@@ -13859,21 +13858,25 @@ function Timeline({
       ))
     }
   );
-}
+});
 
 // components/Toast.tsx
+import { forwardRef as forwardRef32, useEffect as useEffect13 } from "react";
 import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
-function Toast({
-  message,
-  onDismiss,
-  className,
-  style
-}) {
+var Toast = forwardRef32(function Toast2({ message, onDismiss, className, style }, ref) {
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "toast", "default");
+  useEffect13(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onDismiss();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onDismiss]);
   return /* @__PURE__ */ jsxs28(
     "div",
     {
+      ref,
       role: "alert",
       className: cn(
         "flex items-center justify-between gap-4 rounded-lg px-4 py-3 shadow-lg",
@@ -13896,11 +13899,11 @@ function Toast({
       ]
     }
   );
-}
+});
 
 // components/Toggle.tsx
 import {
-  forwardRef as forwardRef12,
+  forwardRef as forwardRef33,
   useCallback as useCallback15,
   useId as useId2,
   useState as useState12
@@ -13913,11 +13916,12 @@ var toggleVariants = cva(
     defaultVariants: {}
   }
 );
-var Toggle = forwardRef12(function Toggle2({
+var Toggle = forwardRef33(function Toggle2({
   checked: controlledChecked,
   defaultChecked = false,
   onCheckedChange,
   className,
+  style,
   "aria-label": ariaLabel = "Toggle",
   theme: themeProp,
   disabled,
@@ -13945,6 +13949,7 @@ var Toggle = forwardRef12(function Toggle2({
     {
       htmlFor: id3,
       className: cn(toggleVariants(), themeClass, className),
+      style,
       "data-state": checked ? "on" : "off",
       children: [
         /* @__PURE__ */ jsx34(
@@ -13978,7 +13983,7 @@ var Toggle = forwardRef12(function Toggle2({
 });
 
 // components/Tooltip.tsx
-import { useCallback as useCallback16, useState as useState13 } from "react";
+import { forwardRef as forwardRef34, useCallback as useCallback16, useId as useId3, useState as useState13 } from "react";
 import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 var placementClasses = {
   top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -13990,15 +13995,9 @@ var tooltipVariants = cva(
   "absolute z-50 whitespace-nowrap rounded-lg px-2 py-1 text-xs shadow-lg",
   { variants: {}, defaultVariants: {} }
 );
-function Tooltip({
-  content,
-  children,
-  placement = "top",
-  className,
-  style,
-  theme: themeProp
-}) {
+var Tooltip = forwardRef34(function Tooltip2({ content, children, placement = "top", className, style, theme: themeProp }, ref) {
   const [visible, setVisible] = useState13(false);
+  const tooltipId = useId3();
   const { theme: contextTheme } = useTheme();
   const theme = themeProp ?? contextTheme;
   const themeClass = getThemeClass(theme, "tooltip", "default");
@@ -14007,17 +14006,20 @@ function Tooltip({
   return /* @__PURE__ */ jsxs30(
     "span",
     {
+      ref,
       className: cn("relative inline-block", className),
       style,
       onMouseEnter: show,
       onMouseLeave: hide,
       onFocus: show,
       onBlur: hide,
+      "aria-describedby": visible ? tooltipId : void 0,
       children: [
         children,
         visible ? /* @__PURE__ */ jsx35(
           "span",
           {
+            id: tooltipId,
             role: "tooltip",
             className: cn(
               tooltipVariants(),
@@ -14030,7 +14032,7 @@ function Tooltip({
       ]
     }
   );
-}
+});
 
 // lib/theme-recommendations.ts
 var THEME_BACKGROUNDS = {
@@ -14161,6 +14163,7 @@ export {
   cn,
   getNextListIndex,
   getThemeClass,
+  mergeRefs,
   useClickOutside,
   useFocusTrap,
   useKeyboardNavigation,