@kjaniec-dev/ui 0.3.1 → 0.4.1

package/dist/index.js

@@ -1,9 +1,10 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React16 from 'react';
+import * as React17 from 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+// src/lib/cn.ts
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -37,7 +38,7 @@ var buttonVariants = cva(
     defaultVariants: { variant: "primary", size: "md" }
   }
 );
-var Button = React16.forwardRef(
+var Button = React17.forwardRef(
   ({ className, variant, size, loading, leadingIcon, trailingIcon, children, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "button",
@@ -84,7 +85,7 @@ var badgeVariants = cva(
     defaultVariants: { variant: "neutral" }
   }
 );
-var Badge = React16.forwardRef(
+var Badge = React17.forwardRef(
   ({ className, variant, dot, children, ...props }, ref) => /* @__PURE__ */ jsxs("span", { ref, className: cn(badgeVariants({ variant }), className), ...props, children: [
     dot && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current", "aria-hidden": true }),
     children
@@ -111,7 +112,7 @@ var iconColor = {
   warning: "text-warning",
   danger: "text-danger"
 };
-var Alert = React16.forwardRef(
+var Alert = React17.forwardRef(
   ({ className, variant = "info", icon, title, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: [
     icon && /* @__PURE__ */ jsx("span", { className: cn("shrink-0 mt-0.5 [&_svg]:h-[1.15rem] [&_svg]:w-[1.15rem]", iconColor[variant ?? "info"]), children: icon }),
     /* @__PURE__ */ jsxs("div", { className: "text-foreground", children: [
@@ -121,7 +122,7 @@ var Alert = React16.forwardRef(
   ] })
 );
 Alert.displayName = "Alert";
-var Spinner = React16.forwardRef(
+var Spinner = React17.forwardRef(
   ({ className, size = 24, style, ...props }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
@@ -138,7 +139,7 @@ var Spinner = React16.forwardRef(
   )
 );
 Spinner.displayName = "Spinner";
-var Progress = React16.forwardRef(
+var Progress = React17.forwardRef(
   ({ className, value = 0, tone = "primary", barClassName, ...props }, ref) => {
     const pct = Math.max(0, Math.min(100, value));
     return /* @__PURE__ */ jsx(
@@ -146,6 +147,7 @@ var Progress = React16.forwardRef(
       {
         ref,
         role: "progressbar",
+        "aria-label": props["aria-label"] ?? "Progress",
         "aria-valuenow": pct,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -168,7 +170,7 @@ var Progress = React16.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.forwardRef(
+var Input = React17.forwardRef(
   ({ className, error, leadingIcon, style, ...props }, ref) => {
     const field = /* @__PURE__ */ jsx(
       "input",
@@ -193,7 +195,7 @@ var Input = React16.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React16.forwardRef(
+var Textarea = React17.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -210,14 +212,14 @@ var Textarea = React16.forwardRef(
   )
 );
 Textarea.displayName = "Textarea";
-var Label = React16.forwardRef(
+var Label = React17.forwardRef(
   ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs("label", { ref, className: cn("text-[0.8rem] font-semibold text-foreground", className), ...props, children: [
     children,
     required && /* @__PURE__ */ jsx("span", { className: "text-danger", children: " *" })
   ] })
 );
 Label.displayName = "Label";
-var Hint = React16.forwardRef(
+var Hint = React17.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
@@ -228,12 +230,12 @@ var Hint = React16.forwardRef(
   )
 );
 Hint.displayName = "Hint";
-var Field = React16.forwardRef(
+var Field = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ 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.forwardRef(
+var Select = React17.forwardRef(
   ({ className, error, style, children, ...props }, ref) => /* @__PURE__ */ jsx(
     "select",
     {
@@ -261,9 +263,9 @@ var Select = React16.forwardRef(
   )
 );
 Select.displayName = "Select";
-var Checkbox = React16.forwardRef(
+var Checkbox = React17.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React16.useId();
+    const autoId = React17.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", className: "peer sr-only", ...props }),
@@ -273,9 +275,9 @@ var Checkbox = React16.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var Radio = React16.forwardRef(
+var Radio = React17.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React16.useId();
+    const autoId = React17.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "radio", className: "peer sr-only", ...props }),
@@ -285,9 +287,9 @@ var Radio = React16.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React16.forwardRef(
+var Switch = React17.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React16.useId();
+    const autoId = React17.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", role: "switch", className: "peer sr-only", ...props }),
@@ -297,7 +299,7 @@ var Switch = React16.forwardRef(
   }
 );
 Switch.displayName = "Switch";
-var Slider = React16.forwardRef(
+var Slider = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "input",
     {
@@ -350,14 +352,15 @@ function Segmented({
     }
   );
 }
-var Card = React16.forwardRef(
-  ({ as: Tag = "div", className, elevated, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React17.forwardRef(
+  ({ as: Tag = "div", className, elevated, interactive, ...props }, ref) => /* @__PURE__ */ 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
@@ -365,23 +368,23 @@ var Card = React16.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React16.forwardRef(
+var CardHeader = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-[1.35rem] flex flex-col gap-1", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React16.forwardRef(
+var CardTitle = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("m-0 text-base font-bold tracking-[-0.01em]", className), ...props })
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React16.forwardRef(
+var CardDescription = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("m-0 text-[0.85rem] text-muted-foreground", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React16.forwardRef(
+var CardContent = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-[1.35rem] pb-[1.35rem]", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React16.forwardRef(
+var CardFooter = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -392,7 +395,7 @@ var CardFooter = React16.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
-var Stat = React16.forwardRef(
+var Stat = React17.forwardRef(
   ({ className, label, value, delta, trend, ...props }, ref) => /* @__PURE__ */ jsxs(Card, { ref, className: cn("p-[1.35rem] flex flex-col gap-2", className), ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "text-[0.78rem] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: label }),
     /* @__PURE__ */ jsx("span", { className: "text-[2rem] font-bold tracking-[-0.03em] tabular-nums leading-none", children: value }),
@@ -432,7 +435,7 @@ var avatarVariants = cva(
     defaultVariants: { size: "md", tone: "secondary" }
   }
 );
-var Avatar = React16.forwardRef(
+var Avatar = React17.forwardRef(
   ({ className, size, tone, src, alt, status, children, ...props }, ref) => {
     const node = /* @__PURE__ */ jsx("span", { ref, className: cn(avatarVariants({ size, tone }), "overflow-hidden", className), ...props, children: src ? /* @__PURE__ */ jsx("img", { src, alt, className: "h-full w-full object-cover" }) : children });
     if (!status) return node;
@@ -443,20 +446,20 @@ var Avatar = React16.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarGroup = React16.forwardRef(
+var AvatarGroup = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex [&>*:not(:first-child)]:-ml-2.5", className), ...props })
 );
 AvatarGroup.displayName = "AvatarGroup";
-var TabsContext = React16.createContext(null);
+var TabsContext = React17.createContext(null);
 function useTabs() {
-  const ctx = React16.useContext(TabsContext);
+  const ctx = React17.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.useState(defaultValue ?? "");
+  const [internal, setInternal] = React17.useState(defaultValue ?? "");
   const current = value ?? internal;
-  const setValue = React16.useCallback(
+  const setValue = React17.useCallback(
     (v) => {
       if (value === void 0) setInternal(v);
       onValueChange?.(v);
@@ -465,11 +468,51 @@ function Tabs({ value, defaultValue, onValueChange, className, children, ...prop
   );
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsx("div", { className, ...props, children }) });
 }
-var TabsList = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "tablist", className: cn("flex gap-1 border-b border-border", className), ...props })
+var TabsList = React17.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__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        onKeyDown: handleKeyDown,
+        className: cn("flex gap-1 border-b border-border", className),
+        ...props
+      }
+    );
+  }
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React16.forwardRef(
+var TabsTrigger = React17.forwardRef(
   ({ className, value, children, ...props }, ref) => {
     const { value: current, setValue } = useTabs();
     const active = current === value;
@@ -479,10 +522,14 @@ var TabsTrigger = React16.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
@@ -494,18 +541,30 @@ var TabsTrigger = React16.forwardRef(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React16.forwardRef(
+var TabsContent = React17.forwardRef(
   ({ className, value, ...props }, ref) => {
     const { value: current } = useTabs();
-    if (current !== value) return null;
-    return /* @__PURE__ */ 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__ */ 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.createContext(null);
+var AccordionContext = React17.createContext(null);
 function Accordion({ type = "single", defaultValue = [], className, children, ...props }) {
-  const [open, setOpen] = React16.useState(defaultValue);
-  const toggle = React16.useCallback(
+  const [open, setOpen] = React17.useState(defaultValue);
+  const toggle = React17.useCallback(
     (v) => {
       setOpen((prev) => {
         const isOpen = prev.includes(v);
@@ -517,15 +576,15 @@ function Accordion({ type = "single", defaultValue = [], className, children, ..
   );
   return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { open, toggle }, children: /* @__PURE__ */ jsx("div", { className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props, children }) });
 }
-var ItemContext = React16.createContext("");
-var AccordionItem = React16.forwardRef(
+var ItemContext = React17.createContext("");
+var AccordionItem = React17.forwardRef(
   ({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(ItemContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: cn("border-t border-border first:border-t-0", className), ...props }) })
 );
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React16.forwardRef(
+var AccordionTrigger = React17.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const ctx = React16.useContext(AccordionContext);
-    const value = React16.useContext(ItemContext);
+    const ctx = React17.useContext(AccordionContext);
+    const value = React17.useContext(ItemContext);
     const isOpen = ctx.open.includes(value);
     return /* @__PURE__ */ jsxs(
       "button",
@@ -562,10 +621,10 @@ var AccordionTrigger = React16.forwardRef(
   }
 );
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React16.forwardRef(
+var AccordionContent = React17.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const ctx = React16.useContext(AccordionContext);
-    const value = React16.useContext(ItemContext);
+    const ctx = React17.useContext(AccordionContext);
+    const value = React17.useContext(ItemContext);
     const isOpen = ctx.open.includes(value);
     return /* @__PURE__ */ jsx(
       "div",
@@ -579,11 +638,11 @@ var AccordionContent = React16.forwardRef(
   }
 );
 AccordionContent.displayName = "AccordionContent";
-var MenuContext = React16.createContext(null);
+var MenuContext = React17.createContext(null);
 function DropdownMenu({ children, className }) {
-  const [open, setOpen] = React16.useState(false);
-  const ref = React16.useRef(null);
-  React16.useEffect(() => {
+  const [open, setOpen] = React17.useState(false);
+  const ref = React17.useRef(null);
+  React17.useEffect(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -598,8 +657,23 @@ function DropdownMenu({ children, className }) {
   }, [open]);
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("relative inline-block", className), children }) });
 }
-var DropdownMenuTrigger = React16.forwardRef(({ onClick, ...props }, ref) => {
-  const ctx = React16.useContext(MenuContext);
+var DropdownMenuTrigger = React17.forwardRef(({ onClick, asChild, ...props }, ref) => {
+  const ctx = React17.useContext(MenuContext);
+  if (asChild) {
+    const child = React17.Children.only(props.children);
+    return React17.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__ */ jsx(
     "button",
     {
@@ -617,14 +691,46 @@ var DropdownMenuTrigger = React16.forwardRef(({ onClick, ...props }, ref) => {
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 function DropdownMenuContent({ className, align = "start", children, ...props }) {
-  const ctx = React16.useContext(MenuContext);
+  const ctx = React17.useContext(MenuContext);
+  const ref = React17.useRef(null);
+  React17.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__ */ 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
@@ -634,9 +740,9 @@ function DropdownMenuContent({ className, align = "start", children, ...props })
     }
   );
 }
-var DropdownMenuItem = React16.forwardRef(
+var DropdownMenuItem = React17.forwardRef(
   ({ className, danger, icon, children, onClick, ...props }, ref) => {
-    const ctx = React16.useContext(MenuContext);
+    const ctx = React17.useContext(MenuContext);
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -666,11 +772,11 @@ DropdownMenuItem.displayName = "DropdownMenuItem";
 function DropdownMenuSeparator({ className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("h-px bg-border my-1.5", className), role: "separator" });
 }
-var Breadcrumb = React16.forwardRef(
+var Breadcrumb = React17.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ 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.forwardRef(
+var BreadcrumbItem = React17.forwardRef(
   ({ className, current, children, ...props }, ref) => {
     if (current) {
       return /* @__PURE__ */ jsx("span", { "aria-current": "page", className: cn("text-foreground font-semibold", className), children });
@@ -717,27 +823,27 @@ function Pagination({ page, pageCount, onPageChange, className }) {
     /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "right" }) })
   ] });
 }
-var TableWrap = React16.forwardRef(
+var TableWrap = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props })
 );
 TableWrap.displayName = "TableWrap";
-var Table = React16.forwardRef(
+var Table = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full border-collapse text-[0.85rem]", className), ...props })
 );
 Table.displayName = "Table";
-var TableHeader = React16.forwardRef(
+var TableHeader = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className, ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React16.forwardRef(
+var TableBody = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className, ...props })
 );
 TableBody.displayName = "TableBody";
-var TableRow = React16.forwardRef(
+var TableRow = React17.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: cn("transition-colors hover:bg-muted/50", className), ...props })
 );
 TableRow.displayName = "TableRow";
-var TableHead = React16.forwardRef(
+var TableHead = React17.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsx(
     "th",
     {
@@ -752,7 +858,7 @@ var TableHead = React16.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React16.forwardRef(
+var TableCell = React17.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsx(
     "td",
     {
@@ -785,14 +891,68 @@ function Tooltip({ content, children, className }) {
     )
   ] });
 }
-function Modal({ open, onClose, children, width = 440, className }) {
-  React16.useEffect(() => {
-    if (!open) return;
-    const onEsc = (e) => e.key === "Escape" && onClose();
-    document.addEventListener("keydown", onEsc);
+var ModalContext = React17.createContext(null);
+function Modal({ open, onClose, children, width = 440, className, showClose = true }) {
+  const titleId = React17.useId();
+  const descId = React17.useId();
+  const containerRef = React17.useRef(null);
+  const lastActiveElement = React17.useRef(null);
+  React17.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]);
@@ -805,35 +965,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__ */ jsx(
+      children: /* @__PURE__ */ jsx(ModalContext.Provider, { value: { titleId, descId }, children: /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            ),
+            children
+          ]
         }
-      )
+      ) })
     }
   );
 }
-function ModalTitle({ className, ...props }) {
-  return /* @__PURE__ */ 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.useContext(ModalContext);
+  return /* @__PURE__ */ 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__ */ jsx("p", { className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
+function ModalDescription({ className, id, ...props }) {
+  const ctx = React17.useContext(ModalContext);
+  return /* @__PURE__ */ jsx("p", { id: id ?? ctx?.descId, className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
 }
 function ModalActions({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2.5 justify-end mt-6", className), ...props });
 }
-var ToastContext = React16.createContext(null);
+var ToastContext = React17.createContext(null);
 function useToast() {
-  const ctx = React16.useContext(ToastContext);
+  const ctx = React17.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
   return ctx;
 }
@@ -854,13 +1032,13 @@ var toneBorder = {
   danger: "border-l-danger"
 };
 function ToastProvider({ children }) {
-  const [items, setItems] = React16.useState([]);
-  const idRef = React16.useRef(0);
-  const remove = React16.useCallback((id) => {
+  const [items, setItems] = React17.useState([]);
+  const idRef = React17.useRef(0);
+  const remove = React17.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.useCallback(
+  const toast = React17.useCallback(
     ({ message, tone = "default", duration = 3200 }) => {
       const id = ++idRef.current;
       setItems((prev) => [...prev, { id, message, tone, duration }]);
@@ -890,7 +1068,18 @@ function ToastProvider({ children }) {
     )) })
   ] });
 }
+var PageHeader = React17.forwardRef(
+  ({ eyebrow, title, description, actions }, ref) => /* @__PURE__ */ jsx("header", { ref, className: "py-12 md:py-16", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:items-end md:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 max-w-2xl", children: [
+      eyebrow && /* @__PURE__ */ jsx("p", { className: "font-mono text-xs font-bold uppercase tracking-[0.2em] text-primary", children: eyebrow }),
+      /* @__PURE__ */ jsx("h1", { className: "font-sans text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-base leading-relaxed text-muted-foreground sm:text-lg", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: actions })
+  ] }) })
+);
+PageHeader.displayName = "PageHeader";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Field, Hint, Input, Label, Modal, ModalActions, ModalDescription, ModalTitle, Pagination, Progress, Radio, Segmented, Select, Slider, Spinner, Stat, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableWrap, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToastProvider, Tooltip, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Field, Hint, Input, Label, Modal, ModalActions, ModalDescription, ModalTitle, PageHeader, Pagination, Progress, Radio, Segmented, Select, Slider, Spinner, Stat, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableWrap, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToastProvider, Tooltip, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map