@kjaniec-dev/ui 0.3.1 → 0.4.1

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React16 = require('react');
+var React17 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -24,8 +24,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React16__namespace = /*#__PURE__*/_interopNamespace(React16);
+var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
 
+// src/lib/cn.ts
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -59,7 +60,7 @@ var buttonVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "primary", size: "md" }
   }
 );
-var Button = React16__namespace.forwardRef(
+var Button = React17__namespace.forwardRef(
   ({ className, variant, size, loading, leadingIcon, trailingIcon, children, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -106,7 +107,7 @@ var badgeVariants = classVarianceAuthority.cva(
     defaultVariants: { variant: "neutral" }
   }
 );
-var Badge = React16__namespace.forwardRef(
+var Badge = React17__namespace.forwardRef(
   ({ className, variant, dot, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: cn(badgeVariants({ variant }), className), ...props, children: [
     dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current", "aria-hidden": true }),
     children
@@ -133,7 +134,7 @@ var iconColor = {
   warning: "text-warning",
   danger: "text-danger"
 };
-var Alert = React16__namespace.forwardRef(
+var Alert = React17__namespace.forwardRef(
   ({ className, variant = "info", icon, title, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("shrink-0 mt-0.5 [&_svg]:h-[1.15rem] [&_svg]:w-[1.15rem]", iconColor[variant ?? "info"]), children: icon }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-foreground", children: [
@@ -143,7 +144,7 @@ var Alert = React16__namespace.forwardRef(
   ] })
 );
 Alert.displayName = "Alert";
-var Spinner = React16__namespace.forwardRef(
+var Spinner = React17__namespace.forwardRef(
   ({ className, size = 24, style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -160,7 +161,7 @@ var Spinner = React16__namespace.forwardRef(
   )
 );
 Spinner.displayName = "Spinner";
-var Progress = React16__namespace.forwardRef(
+var Progress = React17__namespace.forwardRef(
   ({ className, value = 0, tone = "primary", barClassName, ...props }, ref) => {
     const pct = Math.max(0, Math.min(100, value));
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -168,6 +169,7 @@ var Progress = React16__namespace.forwardRef(
       {
         ref,
         role: "progressbar",
+        "aria-label": props["aria-label"] ?? "Progress",
         "aria-valuenow": pct,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -190,7 +192,7 @@ var Progress = React16__namespace.forwardRef(
 );
 Progress.displayName = "Progress";
 var baseField = "w-full font-sans text-sm text-foreground bg-surface border rounded-kj-md px-[0.85rem] transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed";
-var Input = React16__namespace.forwardRef(
+var Input = React17__namespace.forwardRef(
   ({ className, error, leadingIcon, style, ...props }, ref) => {
     const field = /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -215,7 +217,7 @@ var Input = React16__namespace.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React16__namespace.forwardRef(
+var Textarea = React17__namespace.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
@@ -232,14 +234,14 @@ var Textarea = React16__namespace.forwardRef(
   )
 );
 Textarea.displayName = "Textarea";
-var Label = React16__namespace.forwardRef(
+var Label = React17__namespace.forwardRef(
   ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, className: cn("text-[0.8rem] font-semibold text-foreground", className), ...props, children: [
     children,
     required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-danger", children: " *" })
   ] })
 );
 Label.displayName = "Label";
-var Hint = React16__namespace.forwardRef(
+var Hint = React17__namespace.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
@@ -250,12 +252,12 @@ var Hint = React16__namespace.forwardRef(
   )
 );
 Hint.displayName = "Hint";
-var Field = React16__namespace.forwardRef(
+var Field = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props })
 );
 Field.displayName = "Field";
 var chevron = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E";
-var Select = React16__namespace.forwardRef(
+var Select = React17__namespace.forwardRef(
   ({ className, error, style, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "select",
     {
@@ -283,9 +285,9 @@ var Select = React16__namespace.forwardRef(
   )
 );
 Select.displayName = "Select";
-var Checkbox = React16__namespace.forwardRef(
+var Checkbox = React17__namespace.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React16__namespace.useId();
+    const autoId = React17__namespace.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("input", { ref, id: inputId, type: "checkbox", className: "peer sr-only", ...props }),
@@ -295,9 +297,9 @@ var Checkbox = React16__namespace.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var Radio = React16__namespace.forwardRef(
+var Radio = React17__namespace.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React16__namespace.useId();
+    const autoId = React17__namespace.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("input", { ref, id: inputId, type: "radio", className: "peer sr-only", ...props }),
@@ -307,9 +309,9 @@ var Radio = React16__namespace.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React16__namespace.forwardRef(
+var Switch = React17__namespace.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React16__namespace.useId();
+    const autoId = React17__namespace.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx("input", { ref, id: inputId, type: "checkbox", role: "switch", className: "peer sr-only", ...props }),
@@ -319,7 +321,7 @@ var Switch = React16__namespace.forwardRef(
   }
 );
 Switch.displayName = "Switch";
-var Slider = React16__namespace.forwardRef(
+var Slider = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -372,14 +374,15 @@ function Segmented({
     }
   );
 }
-var Card = React16__namespace.forwardRef(
-  ({ as: Tag = "div", className, elevated, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Card = React17__namespace.forwardRef(
+  ({ as: Tag = "div", className, elevated, interactive, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     Tag,
     {
       ref,
       className: cn(
         "bg-card text-card-foreground rounded-kj-xl overflow-hidden border",
         elevated ? "border-transparent shadow-kj-lg" : "border-border shadow-kj-sm",
+        interactive && "cursor-pointer transition-all duration-300 hover:-translate-y-1 hover:shadow-kj-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         className
       ),
       ...props
@@ -387,23 +390,23 @@ var Card = React16__namespace.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React16__namespace.forwardRef(
+var CardHeader = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-[1.35rem] flex flex-col gap-1", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React16__namespace.forwardRef(
+var CardTitle = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("m-0 text-base font-bold tracking-[-0.01em]", className), ...props })
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React16__namespace.forwardRef(
+var CardDescription = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("m-0 text-[0.85rem] text-muted-foreground", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React16__namespace.forwardRef(
+var CardContent = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("px-[1.35rem] pb-[1.35rem]", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React16__namespace.forwardRef(
+var CardFooter = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -414,7 +417,7 @@ var CardFooter = React16__namespace.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
-var Stat = React16__namespace.forwardRef(
+var Stat = React17__namespace.forwardRef(
   ({ className, label, value, delta, trend, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { ref, className: cn("p-[1.35rem] flex flex-col gap-2", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.78rem] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[2rem] font-bold tracking-[-0.03em] tabular-nums leading-none", children: value }),
@@ -454,7 +457,7 @@ var avatarVariants = classVarianceAuthority.cva(
     defaultVariants: { size: "md", tone: "secondary" }
   }
 );
-var Avatar = React16__namespace.forwardRef(
+var Avatar = React17__namespace.forwardRef(
   ({ className, size, tone, src, alt, status, children, ...props }, ref) => {
     const node = /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn(avatarVariants({ size, tone }), "overflow-hidden", className), ...props, children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "h-full w-full object-cover" }) : children });
     if (!status) return node;
@@ -465,20 +468,20 @@ var Avatar = React16__namespace.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarGroup = React16__namespace.forwardRef(
+var AvatarGroup = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex [&>*:not(:first-child)]:-ml-2.5", className), ...props })
 );
 AvatarGroup.displayName = "AvatarGroup";
-var TabsContext = React16__namespace.createContext(null);
+var TabsContext = React17__namespace.createContext(null);
 function useTabs() {
-  const ctx = React16__namespace.useContext(TabsContext);
+  const ctx = React17__namespace.useContext(TabsContext);
   if (!ctx) throw new Error("Tabs.* must be used within <Tabs>");
   return ctx;
 }
 function Tabs({ value, defaultValue, onValueChange, className, children, ...props }) {
-  const [internal, setInternal] = React16__namespace.useState(defaultValue ?? "");
+  const [internal, setInternal] = React17__namespace.useState(defaultValue ?? "");
   const current = value ?? internal;
-  const setValue = React16__namespace.useCallback(
+  const setValue = React17__namespace.useCallback(
     (v) => {
       if (value === void 0) setInternal(v);
       onValueChange?.(v);
@@ -487,11 +490,51 @@ function Tabs({ value, defaultValue, onValueChange, className, children, ...prop
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, ...props, children }) });
 }
-var TabsList = React16__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "tablist", className: cn("flex gap-1 border-b border-border", className), ...props })
+var TabsList = React17__namespace.forwardRef(
+  ({ className, onKeyDown, ...props }, ref) => {
+    const handleKeyDown = (e) => {
+      const container = e.currentTarget;
+      const tabs = Array.from(container.querySelectorAll('[role="tab"]'));
+      if (tabs.length === 0) return;
+      const activeIndex = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
+      let newIndex = activeIndex;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        newIndex = (activeIndex + 1) % tabs.length;
+        tabs[newIndex].focus();
+        tabs[newIndex].click();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        newIndex = (activeIndex - 1 + tabs.length) % tabs.length;
+        tabs[newIndex].focus();
+        tabs[newIndex].click();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        newIndex = 0;
+        tabs[newIndex].focus();
+        tabs[newIndex].click();
+      } else if (e.key === "End") {
+        e.preventDefault();
+        newIndex = tabs.length - 1;
+        tabs[newIndex].focus();
+        tabs[newIndex].click();
+      }
+      onKeyDown?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        onKeyDown: handleKeyDown,
+        className: cn("flex gap-1 border-b border-border", className),
+        ...props
+      }
+    );
+  }
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React16__namespace.forwardRef(
+var TabsTrigger = React17__namespace.forwardRef(
   ({ className, value, children, ...props }, ref) => {
     const { value: current, setValue } = useTabs();
     const active = current === value;
@@ -501,10 +544,14 @@ var TabsTrigger = React16__namespace.forwardRef(
         ref,
         type: "button",
         role: "tab",
+        id: `tabs-trigger-${value}`,
+        "aria-controls": `tabs-panel-${value}`,
         "aria-selected": active,
+        tabIndex: active ? 0 : -1,
         onClick: () => setValue(value),
         className: cn(
-          "relative px-[0.9rem] py-2.5 text-sm font-semibold cursor-pointer transition-colors duration-150",
+          "relative px-[0.9rem] py-2.5 text-sm font-semibold cursor-pointer transition-colors duration-150 outline-none",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-sm",
           "after:content-[''] after:absolute after:left-[0.9rem] after:right-[0.9rem] after:-bottom-px after:h-0.5 after:rounded-sm after:transition-colors",
           active ? "text-foreground after:bg-primary" : "text-muted-foreground hover:text-foreground after:bg-transparent",
           className
@@ -516,18 +563,30 @@ var TabsTrigger = React16__namespace.forwardRef(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React16__namespace.forwardRef(
+var TabsContent = React17__namespace.forwardRef(
   ({ className, value, ...props }, ref) => {
     const { value: current } = useTabs();
-    if (current !== value) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "tabpanel", className: cn("pt-5 text-[0.9rem] text-muted-foreground", className), ...props });
+    const active = current === value;
+    if (!active) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        id: `tabs-panel-${value}`,
+        "aria-labelledby": `tabs-trigger-${value}`,
+        tabIndex: 0,
+        className: cn("pt-5 text-[0.9rem] text-muted-foreground outline-none", className),
+        ...props
+      }
+    );
   }
 );
 TabsContent.displayName = "TabsContent";
-var AccordionContext = React16__namespace.createContext(null);
+var AccordionContext = React17__namespace.createContext(null);
 function Accordion({ type = "single", defaultValue = [], className, children, ...props }) {
-  const [open, setOpen] = React16__namespace.useState(defaultValue);
-  const toggle = React16__namespace.useCallback(
+  const [open, setOpen] = React17__namespace.useState(defaultValue);
+  const toggle = React17__namespace.useCallback(
     (v) => {
       setOpen((prev) => {
         const isOpen = prev.includes(v);
@@ -539,15 +598,15 @@ function Accordion({ type = "single", defaultValue = [], className, children, ..
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { open, toggle }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props, children }) });
 }
-var ItemContext = React16__namespace.createContext("");
-var AccordionItem = React16__namespace.forwardRef(
+var ItemContext = React17__namespace.createContext("");
+var AccordionItem = React17__namespace.forwardRef(
   ({ className, value, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ItemContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("border-t border-border first:border-t-0", className), ...props }) })
 );
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React16__namespace.forwardRef(
+var AccordionTrigger = React17__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const ctx = React16__namespace.useContext(AccordionContext);
-    const value = React16__namespace.useContext(ItemContext);
+    const ctx = React17__namespace.useContext(AccordionContext);
+    const value = React17__namespace.useContext(ItemContext);
     const isOpen = ctx.open.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -584,10 +643,10 @@ var AccordionTrigger = React16__namespace.forwardRef(
   }
 );
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React16__namespace.forwardRef(
+var AccordionContent = React17__namespace.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const ctx = React16__namespace.useContext(AccordionContext);
-    const value = React16__namespace.useContext(ItemContext);
+    const ctx = React17__namespace.useContext(AccordionContext);
+    const value = React17__namespace.useContext(ItemContext);
     const isOpen = ctx.open.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -601,11 +660,11 @@ var AccordionContent = React16__namespace.forwardRef(
   }
 );
 AccordionContent.displayName = "AccordionContent";
-var MenuContext = React16__namespace.createContext(null);
+var MenuContext = React17__namespace.createContext(null);
 function DropdownMenu({ children, className }) {
-  const [open, setOpen] = React16__namespace.useState(false);
-  const ref = React16__namespace.useRef(null);
-  React16__namespace.useEffect(() => {
+  const [open, setOpen] = React17__namespace.useState(false);
+  const ref = React17__namespace.useRef(null);
+  React17__namespace.useEffect(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -620,8 +679,23 @@ function DropdownMenu({ children, className }) {
   }, [open]);
   return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative inline-block", className), children }) });
 }
-var DropdownMenuTrigger = React16__namespace.forwardRef(({ onClick, ...props }, ref) => {
-  const ctx = React16__namespace.useContext(MenuContext);
+var DropdownMenuTrigger = React17__namespace.forwardRef(({ onClick, asChild, ...props }, ref) => {
+  const ctx = React17__namespace.useContext(MenuContext);
+  if (asChild) {
+    const child = React17__namespace.Children.only(props.children);
+    return React17__namespace.cloneElement(child, {
+      ref,
+      ...props,
+      ...child.props,
+      onClick: (e) => {
+        ctx.setOpen(!ctx.open);
+        onClick?.(e);
+        child.props.onClick?.(e);
+      },
+      "aria-haspopup": "menu",
+      "aria-expanded": ctx.open
+    });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -639,14 +713,46 @@ var DropdownMenuTrigger = React16__namespace.forwardRef(({ onClick, ...props },
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 function DropdownMenuContent({ className, align = "start", children, ...props }) {
-  const ctx = React16__namespace.useContext(MenuContext);
+  const ctx = React17__namespace.useContext(MenuContext);
+  const ref = React17__namespace.useRef(null);
+  React17__namespace.useEffect(() => {
+    if (!ctx.open) return;
+    const container = ref.current;
+    if (container) {
+      const items = Array.from(container.querySelectorAll('[role="menuitem"]'));
+      if (items.length > 0) {
+        setTimeout(() => items[0].focus(), 50);
+      }
+    }
+  }, [ctx.open]);
+  const handleKeyDown = (e) => {
+    const container = ref.current;
+    if (!container) return;
+    const items = Array.from(container.querySelectorAll('[role="menuitem"]'));
+    if (items.length === 0) return;
+    const currentIndex = items.indexOf(document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const nextIndex = (currentIndex + 1) % items.length;
+      items[nextIndex].focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prevIndex = (currentIndex - 1 + items.length) % items.length;
+      items[prevIndex].focus();
+    } else if (e.key === "Tab" || e.key === "Escape") {
+      ctx.setOpen(false);
+    }
+  };
   if (!ctx.open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       role: "menu",
+      tabIndex: -1,
+      onKeyDown: handleKeyDown,
       className: cn(
-        "absolute top-[calc(100%+6px)] z-40 min-w-[200px] p-1.5 rounded-kj-md bg-surface border border-border shadow-kj-lg",
+        "absolute top-[calc(100%+6px)] z-40 min-w-[200px] p-1.5 rounded-kj-md bg-surface border border-border shadow-kj-lg outline-none",
         "animate-[kjpop_.12s_ease]",
         align === "end" ? "right-0" : "left-0",
         className
@@ -656,9 +762,9 @@ function DropdownMenuContent({ className, align = "start", children, ...props })
     }
   );
 }
-var DropdownMenuItem = React16__namespace.forwardRef(
+var DropdownMenuItem = React17__namespace.forwardRef(
   ({ className, danger, icon, children, onClick, ...props }, ref) => {
-    const ctx = React16__namespace.useContext(MenuContext);
+    const ctx = React17__namespace.useContext(MenuContext);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -688,11 +794,11 @@ DropdownMenuItem.displayName = "DropdownMenuItem";
 function DropdownMenuSeparator({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-px bg-border my-1.5", className), role: "separator" });
 }
-var Breadcrumb = React16__namespace.forwardRef(
+var Breadcrumb = React17__namespace.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex items-center gap-1.5 text-[0.85rem] text-muted-foreground", className), ...props, children })
 );
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbItem = React16__namespace.forwardRef(
+var BreadcrumbItem = React17__namespace.forwardRef(
   ({ className, current, children, ...props }, ref) => {
     if (current) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": "page", className: cn("text-foreground font-semibold", className), children });
@@ -739,27 +845,27 @@ function Pagination({ page, pageCount, onPageChange, className }) {
     /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { dir: "right" }) })
   ] });
 }
-var TableWrap = React16__namespace.forwardRef(
+var TableWrap = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props })
 );
 TableWrap.displayName = "TableWrap";
-var Table = React16__namespace.forwardRef(
+var Table = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: cn("w-full border-collapse text-[0.85rem]", className), ...props })
 );
 Table.displayName = "Table";
-var TableHeader = React16__namespace.forwardRef(
+var TableHeader = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className, ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React16__namespace.forwardRef(
+var TableBody = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className, ...props })
 );
 TableBody.displayName = "TableBody";
-var TableRow = React16__namespace.forwardRef(
+var TableRow = React17__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn("transition-colors hover:bg-muted/50", className), ...props })
 );
 TableRow.displayName = "TableRow";
-var TableHead = React16__namespace.forwardRef(
+var TableHead = React17__namespace.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
@@ -774,7 +880,7 @@ var TableHead = React16__namespace.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React16__namespace.forwardRef(
+var TableCell = React17__namespace.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "td",
     {
@@ -807,14 +913,68 @@ function Tooltip({ content, children, className }) {
     )
   ] });
 }
-function Modal({ open, onClose, children, width = 440, className }) {
-  React16__namespace.useEffect(() => {
-    if (!open) return;
-    const onEsc = (e) => e.key === "Escape" && onClose();
-    document.addEventListener("keydown", onEsc);
+var ModalContext = React17__namespace.createContext(null);
+function Modal({ open, onClose, children, width = 440, className, showClose = true }) {
+  const titleId = React17__namespace.useId();
+  const descId = React17__namespace.useId();
+  const containerRef = React17__namespace.useRef(null);
+  const lastActiveElement = React17__namespace.useRef(null);
+  React17__namespace.useEffect(() => {
+    if (!open) {
+      if (lastActiveElement.current) {
+        lastActiveElement.current.focus();
+        lastActiveElement.current = null;
+      }
+      return;
+    }
+    lastActiveElement.current = document.activeElement;
+    const container = containerRef.current;
+    if (container) {
+      const focusables = container.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusables.length > 0) {
+        setTimeout(() => focusables[0].focus(), 50);
+      } else {
+        container.focus();
+      }
+    }
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (e.key === "Tab") {
+        const container2 = containerRef.current;
+        if (!container2) return;
+        const focusables = Array.from(
+          container2.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          )
+        );
+        if (focusables.length === 0) {
+          e.preventDefault();
+          return;
+        }
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === first || document.activeElement === container2) {
+            last.focus();
+            e.preventDefault();
+          }
+        } else {
+          if (document.activeElement === last) {
+            first.focus();
+            e.preventDefault();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
     document.body.style.overflow = "hidden";
     return () => {
-      document.removeEventListener("keydown", onEsc);
+      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "";
     };
   }, [open, onClose]);
@@ -827,35 +987,53 @@ function Modal({ open, onClose, children, width = 440, className }) {
         "bg-[color-mix(in_oklch,#09090b_55%,transparent)]",
         open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: { titleId, descId }, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          ref: containerRef,
           role: "dialog",
           "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": descId,
+          tabIndex: -1,
           style: { maxWidth: width },
           className: cn(
-            "w-full p-7 rounded-kj-2xl bg-surface border border-border shadow-kj-lg transition-transform duration-200",
+            "relative w-full p-7 rounded-kj-2xl bg-surface border border-border shadow-kj-lg transition-transform duration-200 outline-none",
             open ? "scale-100 translate-y-0" : "scale-95 translate-y-2",
             className
           ),
-          children
+          children: [
+            showClose && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                "aria-label": "Close",
+                className: "absolute top-4 right-4 p-1.5 rounded-kj-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            ),
+            children
+          ]
         }
-      )
+      ) })
     }
   );
 }
-function ModalTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props });
+function ModalTitle({ className, id, ...props }) {
+  const ctx = React17__namespace.useContext(ModalContext);
+  return /* @__PURE__ */ jsxRuntime.jsx("h3", { id: id ?? ctx?.titleId, className: cn("m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props });
 }
-function ModalDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
+function ModalDescription({ className, id, ...props }) {
+  const ctx = React17__namespace.useContext(ModalContext);
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { id: id ?? ctx?.descId, className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
 }
 function ModalActions({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2.5 justify-end mt-6", className), ...props });
 }
-var ToastContext = React16__namespace.createContext(null);
+var ToastContext = React17__namespace.createContext(null);
 function useToast() {
-  const ctx = React16__namespace.useContext(ToastContext);
+  const ctx = React17__namespace.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
   return ctx;
 }
@@ -876,13 +1054,13 @@ var toneBorder = {
   danger: "border-l-danger"
 };
 function ToastProvider({ children }) {
-  const [items, setItems] = React16__namespace.useState([]);
-  const idRef = React16__namespace.useRef(0);
-  const remove = React16__namespace.useCallback((id) => {
+  const [items, setItems] = React17__namespace.useState([]);
+  const idRef = React17__namespace.useRef(0);
+  const remove = React17__namespace.useCallback((id) => {
     setItems((prev) => prev.map((t) => t.id === id ? { ...t, leaving: true } : t));
     setTimeout(() => setItems((prev) => prev.filter((t) => t.id !== id)), 250);
   }, []);
-  const toast = React16__namespace.useCallback(
+  const toast = React17__namespace.useCallback(
     ({ message, tone = "default", duration = 3200 }) => {
       const id = ++idRef.current;
       setItems((prev) => [...prev, { id, message, tone, duration }]);
@@ -912,6 +1090,17 @@ function ToastProvider({ children }) {
     )) })
   ] });
 }
+var PageHeader = React17__namespace.forwardRef(
+  ({ eyebrow, title, description, actions }, ref) => /* @__PURE__ */ jsxRuntime.jsx("header", { ref, className: "py-12 md:py-16", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:items-end md:justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 max-w-2xl", children: [
+      eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-xs font-bold uppercase tracking-[0.2em] text-primary", children: eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-sans text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base leading-relaxed text-muted-foreground sm:text-lg", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: actions })
+  ] }) })
+);
+PageHeader.displayName = "PageHeader";
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -945,6 +1134,7 @@ exports.Modal = Modal;
 exports.ModalActions = ModalActions;
 exports.ModalDescription = ModalDescription;
 exports.ModalTitle = ModalTitle;
+exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.Progress = Progress;
 exports.Radio = Radio;